Trip Planner

⭐ Please star and fork this repository and join our discussions to help make this project even better!

 

Repository Stats

Stars	Forks	Open PRs
Closed PRs	Issues	Contributors	Last Update

🚀 Participating in Open Source Programs

GSSoC 2025 - Girl Script Summer of Code

GSSoC is a 3-month long Open Source program conducted by GirlScript Foundation. It brings together students, developers, and organizations to contribute to meaningful open-source projects while promoting diversity in tech.

OSCI 2025 - Open Source Connect India

OSCI is an initiative aimed at promoting open source development in India. It brings together developers from across the country to collaborate on innovative projects and enhance India's presence in the global open source ecosystem.

Overview

👋 Welcome to Trip Planner!

Trip Planner is a modern, AI-powered travel planning web application built with React and Node.js. It helps travelers effortlessly create personalized itineraries, discover top destinations, book accommodations, and connect with fellow travelers. The platform features an interactive chatbot for recommendations, a friend-finding system, and an admin dashboard for property management—making it your one-stop solution for seamless travel experiences.

✨ Recent Updates

• Modern Glass-Morphism UI: Beautiful, modern design with glass-morphism effects
• Professional Logo: Custom SVG compass logo representing travel planning
• Mobile-First Navigation: Responsive navbar with auto-close functionality
• Optimized Performance: Cleaned codebase with 56% fewer dependencies
• Enhanced UX: Seamless navigation and improved user experience
• Improved Error Handling: Standardized error handling across components with consistent UI for error states
• Added Authentication System: Implemented login and signup functionality with MongoDB database
• Network Status Detection: Added network status bar to notify users when offline
• Standardized API Responses: Consistent API response format for better error handling

---

✨ Features

🧠 AI Chatbot Get travel recommendations and tips via an interactive chatbot.	🗺️ Destination Guide Explore information about top places, attractions, and landmarks.	🤝 Find Friends Connect and chat with other travelers to plan trips together.
🏨 Stay Booking Support Find and book accommodations (Airbnb-style listings).	📍 Personalized Itinerary AI suggests travel plans based on your interests.	🛠️ Admin Dashboard Admins/hosts can manage property listings and view bookings.

🔐 User Authentication Secure login and registration for travelers and hosts.	🎨 Modern UI Design Glass-morphism effects with beautiful gradients and animations.	🌙 Dark Mode Toggle between light and dark themes.
📱 Responsive Design Fully responsive for mobile and desktop with auto-close navigation.	🗺️ Interactive Maps Location-based services with Leaflet integration.	☁️ Cloud Database Uses MongoDB for scalable data storage.

🧰 Tech Stack

| 🎨 Styling | CSS, Bootstrap, Glass-morphism effects |

Note: The application uses MongoDB for data storage and a custom authentication system. The frontend is optimized with modern CSS techniques and responsive design.

---

🚀 Getting Started

Prerequisites

• Node.js (v18+ recommended)
• npm (v9+ recommended)
• MongoDB (local or MongoDB Atlas)

1. Clone the Repository

git clone <your-repo-url>
cd react_app

2. Install Dependencies

For the frontend (React):

cd client
npm install

For the backend (Express):

cd ../server
npm install

3. Start the Frontend (React)

cd ../client
npm run dev

Visit the app at: http://localhost:5173

4. Start the Backend (Express API)

Open a new terminal and run:

cd server
npm run dev # or node server.js

The backend will run at http://localhost:5000

5. Environment Configuration

⚠️ IMPORTANT: Environment variables are required for the application to work properly.

Step 1: Copy Sample Files

Both client and server directories contain .env.sample and .env.example files with all required variables:

# Copy sample files to create your environment configuration
cp client/.env.sample client/.env
cp server/.env.example server/.env

Server Environment Setup Script

For easier server environment configuration, we've created a helpful setup script:

cd server
npm run setup-env

This interactive script will:

• Guide you through setting up all required environment variables
• Generate secure random values for secrets like JWT_SECRET
• Use default values where appropriate
• Check for any missing critical variables

For more information about environment setup, see server/ENV_SETUP.md.

Step 2: Configure Server Environment Variables

Edit server/.env with your actual values:

# MongoDB Database Configuration (Required)
MONGODB_URI=mongodb://localhost:27017/tripPlannerDB
# Or for MongoDB Atlas:
# MONGODB_URI=mongodb+srv://<username>:<password>@cluster0.mongodb.net/tripPlannerDB

# JWT Secret for Authentication
JWT_SECRET=your_jwt_secret_key_here
JWT_EXPIRES_IN=7d

# API Keys (Required for full functionality)
PEXELS_API_KEY=your_pexels_api_key_here

# Server Configuration
PORT=5000
NODE_ENV=development

Step 3: Configure Client Environment Variables

Edit client/.env with your actual values:

# Weather API (Required for weather functionality)
VITE_WEATHER_API_KEY=your_openweather_api_key_here

# Backend API URL
VITE_API_BASE_URL=http://localhost:5000

API Keys Setup Guide

📸 Pexels API (Required for Images):

1. Visit Pexels API
2. Sign up for a free account
3. Get your API key from the dashboard
4. Add to server/.env as PEXELS_API_KEY

🌤️ OpenWeatherMap API (Required for Weather):

1. Visit OpenWeatherMap API
2. Sign up for a free account
3. Get your API key from the dashboard
4. Add to client/.env as VITE_WEATHER_API_KEY

🗄️ MongoDB Database Setup:

• Option 1: Local MongoDB Installation

  • Install MongoDB Community Edition from MongoDB Download Center
  • Start the MongoDB service
  • Create a database named tripPlannerDB
  • Set MONGODB_URI=mongodb://localhost:27017/tripPlannerDB in server/.env

• Option 2: MongoDB Atlas (Cloud Service)

  • Create a free account on MongoDB Atlas
  • Set up a new cluster
  • Create a database user and get your connection string
  • Set MONGODB_URI=mongodb+srv://<username>:<password>@cluster0.mongodb.net/tripPlannerDB in server/.env

🔐 Security Note: Never commit .env files to version control. The .env.sample files are templates - your actual .env files with real credentials should remain local only.

Add .env to your .gitignore file to prevent accidental commits:

# Ignore environment variable files
.env

For GSSoC Contributors:

Option 1: Use Shared API Key (Recommended for GSSoC)

• Use the existing API key provided by the project maintainer
• Add the shared API key to the .env file as PIXELS_API_KEY
• This is the recommended approach for GSSoC contributors
• Note: Rate limits are shared across all contributors

Option 2: Get Your Own API Key (Optional)

• Sign up at Pixels API to get your own API key
• Add your personal API key to the .env file as PIXELS_API_KEY
• Benefits: Higher rate limits, no sharing with other users
• Free tier available with limited requests per month
• Use this if you plan to work extensively on image-related features

API Usage:

• The API is used for high-quality travel destination images
• Rate limits: Check Pixels API documentation for current limits
• Images are cached to minimize API calls

Note:

• For MongoDB connection: The application uses server/config/db.js to connect to your MongoDB database using the connection string in your .env file.
• For local development: Ensure your MongoDB server is running before starting the application.
• For MongoDB Atlas: Make sure your IP address is whitelisted in the Atlas dashboard.
• The application uses a custom JWT-based authentication system, no external auth provider setup required.
• Keep your API keys and database credentials secure and never commit them to version control.

---

🖼️ Screenshots

Home Page	Places	Find Friends	Admin Dashboard

---

🛠️ Project Structure

react_app/
├── 📱 client/                 # React frontend
│   ├── src/
│   │   ├── components/        # Reusable UI components
│   │   ├── pages/            # Application pages
│   │   ├── images/           # Static images
│   │   └── utils/            # Utility functions
│   └── site_images_/         # Screenshots for documentation
├── 🖥️ server/                 # Node.js backend
│   ├── config/               # Database configuration
│   ├── controllers/          # API controllers
│   ├── middleware/           # Custom middleware
│   └── routes/               # API routes
└── 📄 docs/                  # Documentation files

Key Directories:

• client/src/components/ - Navigation, Footer, PlaceCard, Chatbot, etc.
• client/src/pages/ - Home, Places, FindFriends, Admin, Auth pages
• server/ - Express.js API with MongoDB integration
• site_images_/ - Application screenshots and documentation assets

---

🧑‍💻 Contributing

We welcome all contributions—big or small! See Contributing.md for guidelines and join discussion to share your ideas.

• Report bugs or UI issues
• Suggest and implement new features
• Improve code structure or performance
• Enhance UI/UX design
• Update documentation

Ways to Collaborate

For All Contributors

• Code Reviews: Help review PRs from other contributors
• Issue Triage: Help categorize and prioritize open issues
• Documentation: Improve README, add code comments, or create tutorials
• Testing: Write and improve test coverage
• Design: Suggest UI/UX improvements with mockups

For Open Source Program Participants

• GSSoC 2025: If you're participating in GSSoC, check our labeled issues and mention your participation in PRs
• OSCI 2025: OSCI participants can focus on documentation improvements and accessibility features

Mentorship

• Pair Programming: Connect with maintainers for pair programming sessions
• First-time Contributors: Look for "good first issue" labels to get started

Communication

• Ask questions in GitHub discussions before starting major changes
• Share your progress in weekly community discussions.

For complete guidelines, see our detailed Contributing.md document.

---

📌 Future Enhancements

Feature	Description
🧠 Smarter AI Chatbot	Enhanced NLP for smarter query handling.
📱 Mobile App	Native mobile app support.
🤝 Social Integration	Google/Facebook login and trip sharing.
💬 Real-time Chat	Live chat among travelers.
📍 Geolocation Suggestions	Destinations based on user’s real-time location.
🏅 Reward System	Badges and rewards for active users.
📦 PWA Support	Progressive Web App/offline access.
🧳 Travel Budget Planner	Tool for managing travel expenses.
🎨 Advanced UI Features	More animations, themes, and customization options.
🔍 Advanced Search	Filter by price, rating, location, and amenities.

---

📄 License

This project is licensed under the ISC License.

---

🙏 Acknowledgements

• React
• Vite
• Bootstrap
• MongoDB
• Express
• Leaflet for interactive maps

---

🚀 Recent Improvements & Optimizations

UI/UX Improvements

• Modern Glass-Morphism Design: Beautiful translucent effects and gradients
• Professional Logo: Custom SVG compass logo representing travel planning
• Mobile-First Navigation: Responsive navbar with auto-close functionality
• Enhanced Animations: Smooth transitions and hover effects
• Consistent Theming: Unified color scheme and styling

Code Quality

• Removed Dead Code: Eliminated unused components and imports
• Simplified Architecture: Streamlined component structure
• Better Organization: Cleaner file structure and naming conventions
• TypeScript Optimization: Improved type safety and development experience

Development Experience

• Faster Development: Reduced build times and dependency conflicts
• Cleaner IDE: No unused files cluttering the workspace
• Better Debugging: Simplified codebase for easier troubleshooting
• Maintainable Code: Well-structured and documented components

Contributors can find more information in the Contributing Guide.

---

Made with ❤️ for travelers everywhere!