Travel Planner Client

A modern, responsive, and feature-rich Travel Planning Platform built with Next.js 16, TypeScript, and Tailwind CSS.
Users can create travel plans, find travel buddies, request to join trips, chat, make premium payments via SSLCommerz, and manage everything through a beautiful dashboard.

Project Overview

Public Features

• Landing Page with Top Destinations
• Find Travel Buddies CTA
• How It Works (3-step guide)
• Testimonials section
• Explore All Trips
• View Host Profiles & Reviews

User Features

• Authentication (Login / Register)
• Create Travel Plans
• Edit & Delete Own Plans
• Send Requests to Join Trips
• Accept / Cancel Join Requests
• View Matched Travel Buddies
• Give Reviews after trip completion
• Subscription Payment via SSLCommerz
• Real-time Payment Status Page
• Comprehensive User Dashboard

Admin Features

• Admin Dashboard
• Manage All Travel Plans (edit/delete)
• Manage All Users
• Manage All Reviews (delete)
• View All Transactions (Premium Payments)

---

Technology Stack

Frontend

• Next.js 16 (App Router)
• TypeScript
• Tailwind CSS
• React Hook Form + Zod
• Axios
• SweetAlert2
• JWT Client Authentication (Cookies)
• SWR / Custom Fetch Hooks

Backend (API)

• Node.js + Express.js
• PostgreSQL + Prisma ORM
• SSLCommerz Payment Gateway
• JWT Authentication
• Role-based System (User / Admin)
• REST API Architecture

Backend Documentation: Travel Planning Backend API Docs

Features Summary

Feature	Description
Create Travel Plans	Users create detailed travel itineraries
Find Travel Buddies	Smart matching engine compares plans
Join Requests	Users can request, accept, and cancel
Host Reviews	Users give ratings after trips end
SSLCommerz Payment	Premium plans & Verified Badge purchase
Dashboards	User & Admin dashboards
Auth System	Secure login with HttpOnly cookies
Responsive UI	Fully mobile-friendly

---

Setup Instructions

1️⃣ Clone the Repository

git clone https://github.com/mdmasharafilhossain/Travel-Planner-Client
cd Travel-Planning-Client

2️⃣ Install Dependencies

npm install

3️⃣ Create .env File

NEXT_PUBLIC_API_BASE="https://your-backend-url.com"
NEXT_PUBLIC_IMGBB_KEY="your-imgBB-key"

4️⃣ Run the Development Server

npm run dev

Live URLs

• Frontend: Travel Planning Live
• Backend: Travel Planning API

Author

Mohammad Mashrafil Hossain Mahi
Full Stack Developer(MERN + TypeScript + Prisma + Next.js)

Email: mashrafilmahi007@gmail.com