TripNext is a comprehensive travel planning and sharing platform that connects travelers with local guides, allows trip recommendations based on preferences, enables blog sharing, and features an interactive travel gallery. With real-time chat, personalized profiles, and secure authentication, TripNext offers a complete ecosystem for travel enthusiasts.
- 🧳 Personalized Trip Planning - Get AI-powered trip recommendations based on your preferences
- 📸 Interactive Gallery - Share and explore travel photos in an immersive gallery experience
- 📝 Travel Blogs - Create, read, and comment on travel blogs from the community
- 📦 Trip Packages - Browse and book curated trip packages from verified guides
- 💼 Package Management - Create and manage travel packages to showcase to travelers
- 📊 Dashboard Analytics - Track your packages, bookings, and engagement metrics
- 💬 Direct Communication - Chat with interested travelers about your packages
- 🔒 Secure Authentication - Email verification and secure password management
- 💬 Real-time Chat - Instant messaging between travelers and guides
- 🌙 Dark/Light Mode - Choose your preferred theme for comfortable browsing
- 📱 Responsive Design - Seamless experience across all devices
- Next.js 14 - React framework with App Router for optimized client and server components
- TypeScript - Type-safe code for better developer experience
- TailwindCSS - Utility-first CSS framework for responsive design
- Shadcn/UI - High-quality reusable components built on Radix UI
- Framer Motion - Animations and interactive elements
- NextAuth.js - Authentication solution with JWT sessions
- Socket.IO Client - Real-time bidirectional event-based communication
- Three.js & React Three Fiber - 3D globe visualization
- Node.js & Express - Fast, unopinionated web framework
- MongoDB & Mongoose - NoSQL database for flexible data modeling
- Socket.IO - Real-time communication server
- JWT - Secure authentication tokens
- Cloudinary - Cloud storage for images
- Nodemailer - Email sending for verification and notifications
- bcrypt.js - Password hashing and security
TripNext/
├── frontend/ # Next.js frontend application
│ ├── public/ # Static assets
│ └── src/
│ ├── app/ # Next.js App Router
│ │ ├── (Home) # Home page components
│ │ ├── auth/ # Authentication pages
│ │ ├── blogs/ # Blog pages and components
│ │ ├── guide/ # Guide dashboard and components
│ │ └── user/ # User dashboard and components
│ ├── components/ # Shared UI components
│ ├── hooks/ # Custom React hooks
│ └── lib/ # Utility functions and services
│
└── backend/ # Express backend API
├── src/
│ ├── controllers/ # Route controllers
│ ├── db/ # Database configuration
│ ├── middleware/ # Express middleware
│ ├── models/ # Mongoose models
│ ├── routes/ # API routes
│ └── utils/ # Helper functions
└── index.js # Server entry point
- Node.js (v18 or higher)
- MongoDB
- Cloudinary account (for image storage)
- Clone the repository
git clone https://github.com/yourusername/tripnext.git
cd tripnext- Install backend dependencies
cd backend
npm install- Set up environment variables
# Create a .env file in the backend directory with the following:
PORT=5000
MONGODB_URI=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret
CLIENT_URL=http://localhost:3000
CLOUDINARY_CLOUD_NAME=your_cloudinary_cloud_name
CLOUDINARY_API_KEY=your_cloudinary_api_key
CLOUDINARY_API_SECRET=your_cloudinary_api_secret
EMAIL_SERVICE=your_email_service
EMAIL_USERNAME=your_email_username
EMAIL_PASSWORD=your_email_password- Install frontend dependencies
cd ../frontend
npm install- Set up frontend environment variables
# Create a .env.local file in the frontend directory with:
NEXT_PUBLIC_API_URL=http://localhost:5000
NEXT_PUBLIC_SOCKET_URL=http://localhost:5000
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=your_nextauth_secret- Start the development servers
# In the backend directory
npm run dev
# In the frontend directory (in a separate terminal)
npm run dev- Open your browser and visit
http://localhost:3000
- Sign Up: Email & password registration with email verification
- Login: Secure login with role-based redirection (user/guide)
- Password Reset: Secure password recovery via email
- Sign up/Login to access personalized features
- Browse Trip Recommendations tailored to preferences
- Explore Trip Packages offered by verified guides
- Chat with Guides to learn more about packages
- Share Travel Experiences through blogs and gallery posts
- Engage with Community by commenting on blogs
- Create Guide Profile with expertise and credentials
- Create Trip Packages with details, pricing, and images
- Manage Bookings and communication with interested travelers
- Share Travel Insights through the blog platform
- Secure email verification process
- JWT-based authentication with short expiry
- Password hashing with bcrypt
- Role-based access control for routes and components
- Protected API endpoints with authentication middleware
- Secure session management with NextAuth.js
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
For any inquiries or support, please contact us at [email protected].