Skip to content
BranchesTags

Repository files navigation

🌍 Travel Planner - Full Stack Application

A comprehensive travel planning and booking platform built with modern technologies.

🚀 Tech Stack

Backend

  • Runtime: Node.js + Express.js
  • Database: MongoDB + Mongoose
  • Authentication: Bcrypt password hashing
  • Email: Nodemailer (OTP, notifications)
  • API: RESTful architecture

Frontend

  • Framework: React + Vite
  • Styling: CSS Modules
  • State: React Hooks
  • HTTP: Fetch API

✨ Features

  • 👤 User Authentication

    • Sign up / Login
    • Password reset with OTP
    • Profile management

  • 🏨 Booking System

    • Browse destinations
    • Book accommodations
    • View booking history
    • Booking status tracking

  • ⭐ Reviews & Ratings

    • Submit reviews for bookings
    • View all reviews
    • Rating system (1-5 stars)

  • 💬 Query Management

    • Submit support queries
    • Admin responses
    • Query status tracking

  • 👨‍💼 Admin Dashboard

    • Manage users
    • Manage bookings
    • Handle queries
    • View analytics

📋 Prerequisites

  • Node.js (v14 or higher)
  • MongoDB (v4.4 or higher)
  • npm or yarn

🛠️ Installation & Setup

1. Install MongoDB

macOS:

brew tap mongodb/brew
brew install mongodb-community
brew services start mongodb-community

Windows: Download from MongoDB Website

Linux (Ubuntu):

sudo apt-get install -y mongodb-org
sudo systemctl start mongod

2. Clone and Install

git clone https://github.com/AryanCodeWizard/Travel-Planner.git
cd Travel-Planner

3. Backend Setup

cd backend
npm install
cp .env.example .env
# Edit .env with your configuration
npm run dev

Backend runs on: http://localhost:3000

4. Frontend Setup

cd Frontend
npm install
npm run dev

Frontend runs on: http://localhost:5173

🔧 Configuration

Backend Environment Variables (.env)

# MongoDBMONGODB_URI=mongodb://localhost:27017/tour_planner# ServerPORT=3000NODE_ENV=development# CORSCORS_ORIGIN=http://localhost:5173# Email (Optional)EMAIL_HOST=smtp.gmail.comEMAIL_PORT=587EMAIL_USER=your-email@gmail.comEMAIL_PASSWORD=your-app-password

Frontend Environment Variables (.env)

VITE_API_URL=http://localhost:3000/api

📡 API Endpoints

Authentication

  • POST /api/auth/signup - Register new user
  • POST /api/auth/login - User login
  • POST /api/auth/forgot-password - Request OTP
  • POST /api/auth/verify-otp - Verify OTP
  • POST /api/auth/reset-password - Reset password

User

  • GET /api/user/data - Get user profile
  • POST /api/user/update - Update profile

Bookings

  • POST /api/booking/save - Create booking
  • GET /api/booking/user-bookings - Get user bookings
  • GET /api/booking/recent-activities - Recent bookings

Reviews

  • POST /api/review/submit - Submit review
  • GET /api/review/all - Get all reviews

Admin

  • GET /api/admin/users - Get all users
  • GET /api/admin/bookings - Get all bookings
  • POST /api/admin/update-booking - Update booking
  • DELETE /api/admin/delete-booking/:id - Delete booking

📁 Project Structure

Travel-Planner/
├── backend/
│ ├── config/
│ │ └── database.js
│ ├── models/
│ │ ├── User.js
│ │ ├── Booking.js
│ │ ├── Review.js
│ │ └── Query.js
│ ├── routes/
│ │ ├── auth.js
│ │ ├── user.js
│ │ ├── booking.js
│ │ ├── admin.js
│ │ ├── review.js
│ │ └── query.js
│ ├── utils/
│ │ └── mailer.js
│ └── server.js
│
├── Frontend/
│ ├── src/
│ │ ├── components/
│ │ ├── pages/
│ │ ├── config/
│ │ │ └── api.js
│ │ └── App.jsx
│ └── index.html
│
└── docs/
├── QUICK_START.md
├── MONGODB_SETUP.md
├── MIGRATION_GUIDE.md
└── MIGRATION_SUMMARY.md

🚀 Quick Start

# Terminal 1: Start MongoDB
brew services start mongodb-community # macOS
sudo systemctl start mongod # Linux# Terminal 2: Start Backendcd backend && npm run dev
# Terminal 3: Start Frontendcd Frontend && npm run dev

Visit: http://localhost:5173

📚 Documentation

🧪 Testing

API Health Check

curl http://localhost:3000/

MongoDB Check

mongosh
use tour_planner
db.stats()

🔒 Security Features

  • ✅ Password hashing with bcrypt
  • ✅ CORS protection
  • ✅ Environment variable configuration
  • ✅ Input validation & sanitization
  • ✅ Secure OTP generation
  • ✅ Auto-expiring password reset tokens

📊 Database Schema

Collections:

  • users - User accounts and profiles
  • bookings - Travel bookings and reservations
  • reviews - User reviews and ratings
  • queries - Support queries and tickets
  • passwordresets - OTP tokens for password reset

🌐 Deployment

MongoDB Atlas (Cloud Database)

  1. Create account at MongoDB Atlas
  2. Create cluster
  3. Get connection string
  4. Update .env with Atlas URI

Hosting Options

  • Backend: Heroku, AWS, Azure, DigitalOcean
  • Frontend: Vercel, Netlify, AWS S3
  • Database: MongoDB Atlas

🤝 Contributing

  1. Fork the repository
  2. Create feature branch (git checkout -b feature/AmazingFeature)
  3. Commit changes (git commit -m 'Add AmazingFeature')
  4. Push to branch (git push origin feature/AmazingFeature)
  5. Open Pull Request

📝 License

This project is licensed under the ISC License.

👨‍💻 Authors

🙏 Acknowledgments

  • MongoDB for the excellent database
  • Express.js for the web framework
  • React team for the amazing frontend library
  • All contributors and supporters

📞 Support

For issues and questions:

  • Open an issue on GitHub
  • Check documentation in /docs folder
  • Review troubleshooting in QUICK_START.md

Built with ❤️ using Node.js, MongoDB, Express, and React

🌟 Star this repo if you found it helpful!

Travel Planner Banner

PHP VersionReact VersionMySQL VersionLicense

Your complete travel management solution

View Demo • Features • Installation • Tech Stack • Setup Guide

✨ At a Glance

Travel Planner is a comprehensive web application that streamlines travel planning and booking. With an intuitive user interface and powerful backend, it helps users discover destinations, book accommodations, plan activities, and manage their entire travel experience from a single platform.

🎬 Demo

Home PageDestination SearchBooking Process

🚀 Features

👤 User Management

  • Secure authentication system
  • User profile customization
  • Booking history & preferences
  • Password recovery with OTP

🌐 Destination Discovery

  • Curated destination catalog
  • Advanced search & filtering
  • Detailed destination information
  • Location-based recommendations

🏨 Accommodation

  • Diverse lodging options
  • Price comparison tools
  • Rich property details
  • Availability calendar

📅 Booking System

  • Streamlined booking flow
  • Multiple payment options
  • Instant confirmation
  • Booking management

⭐ Reviews & Ratings

  • Verified customer reviews
  • Rating system
  • Photo uploads for reviews
  • Helpful sorting and filtering

👨‍💼 Admin Tools

  • Comprehensive dashboard
  • User and booking management
  • Analytics and reports
  • Content management

💻 Tech Stack


React.js
Frontend Framework
Tailwind CSS
Styling
PHP
Backend Language
MySQL
Database

Additional technologies:

  • Framer Motion: Animation library for React
  • PHPMailer: Email functionality
  • JSON Web Tokens: Authentication mechanism

🏗️ Project Structure

Travel-Planner/
├── Frontend/ # React frontend application
│ ├── public/ # Public assets
│ ├── src/ # Source files
│ │ ├── components/ # Reusable UI components
│ │ ├── pages/ # Page components
│ │ ├── data/ # Mock data and constants
│ │ └── App.jsx # Main application component
│ ├── index.html # HTML entry point
│ └── package.json # Frontend dependencies
│
├── backend/ # PHP backend
│ ├── config/ # Database configuration
│ ├── controllers/ # Business logic
│ ├── utils/ # Utility functions
│ └── *.php # API endpoints
│
├── database/ # Database schema and migrations
├── PHPMailer/ # PHPMailer library for emails
└── README.md # Project documentation

Detailed Setup Guide

Prerequisites

  • XAMPP (version 7.4+ recommended)
  • Node.js (version 18+ recommended) and npm
  • Git (optional, for cloning the repository)

Step 1: Setting Up XAMPP

  1. Download and install XAMPP from the official website
  2. Start the XAMPP Control Panel and start both Apache and MySQL services
  3. Verify that services are running correctly:
    • Apache should be green and running on port 80
    • MySQL should be green and running on port 3306

Step 2: Database Setup

  1. Open your browser and go to phpMyAdmin: http://localhost/phpmyadmin
  2. Create a new database: 
    CREATEDATABASEtravel_planner;
  3. Select the newly created database and import the schema:
    • Click on the "Import" tab
    • Click "Browse" and navigate to /Applications/XAMPP/xamppfiles/htdocs/img/Travel-Planner/database/travel_planner.sql
    • Click "Go" to import the schema

Alternatively, you can set up the database manually with these SQL commands:

CREATEDATABASEtravel_planner;
USE travel_planner;
-- Users TableCREATETABLEusers (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(100) NOT NULL,
email VARCHAR(100) NOT NULL UNIQUE,
password VARCHAR(255) NOT NULL,
is_admin BOOLEAN DEFAULT FALSE,
registration_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
-- Insert admin userINSERT INTO users (name, email, password, is_admin) VALUES ('Admin', 'admin@travelplanner.com', '$2y$10$YourHashedPasswordHere', TRUE);
-- Destinations TableCREATETABLEdestinations (
id INT AUTO_INCREMENT PRIMARY KEY,
title VARCHAR(100) NOT NULL,
location VARCHAR(100) NOT NULL,
description TEXT,
image VARCHAR(255),
cost DECIMAL(10,2) NOT NULL,
rating DECIMAL(3,1),
reviews INT DEFAULT 0
);
-- Accommodations TableCREATETABLEaccommodations (
id INT AUTO_INCREMENT PRIMARY KEY,
title VARCHAR(100) NOT NULL,
location VARCHAR(100) NOT NULL,
description TEXT,
image VARCHAR(255),
cost DECIMAL(10,2) NOT NULL,
rating DECIMAL(3,1),
reviews INT DEFAULT 0
);
-- Bookings TableCREATETABLEbookings (
booking_id VARCHAR(20) PRIMARY KEY,
user_id INT,
destination VARCHAR(100),
accommodation VARCHAR(100),
check_in_date DATE,
check_out_date DATE,
num_nights INT,
total_cost DECIMAL(10,2),
booking_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
admin_status ENUM('pending', 'approved', 'rejected') DEFAULT 'pending',
payment_method VARCHAR(50),
FOREIGN KEY (user_id) REFERENCES users(id)
);
-- Reviews TableCREATETABLEreviews (
id INT AUTO_INCREMENT PRIMARY KEY,
booking_id VARCHAR(20),
user_id INT,
rating INTNOT NULL,
review_text TEXT,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
FOREIGN KEY (booking_id) REFERENCES bookings(booking_id),
FOREIGN KEY (user_id) REFERENCES users(id)
);
-- User Queries TableCREATETABLEuser_queries (
id INT AUTO_INCREMENT PRIMARY KEY,
user_id INT,
user_name VARCHAR(100),
user_email VARCHAR(100),
subject VARCHAR(255),
message TEXT,
reply TEXTNULL,
status ENUM('pending', 'answered') DEFAULT 'pending',
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
updated_at TIMESTAMPNULLONUPDATECURRENT_TIMESTAMP,
FOREIGN KEY (user_id) REFERENCES users(id)
);

Step 3: Clone or Download the Project

  1. If using Git, clone the repository to your XAMPP's htdocs folder: 
    cd /Applications/XAMPP/xamppfiles/htdocs/img
git clone https://github.com/yourusername/travel-planner.git Travel-Planner
  2. If not using Git, download the ZIP and extract it to: 
    /Applications/XAMPP/xamppfiles/htdocs/img/Travel-Planner

Step 4: Configure Backend

  1. Navigate to the backend configuration file:

    cd /Applications/XAMPP/xamppfiles/htdocs/img/Travel-Planner/backend/config

  2. Create or edit the database.php file with your MySQL credentials:

    <?php// Database configurationdefine('DB_SERVER', 'localhost');
define('DB_USERNAME', 'root'); // Default XAMPP usernamedefine('DB_PASSWORD', ''); // Default XAMPP password is emptydefine('DB_NAME', 'travel_planner');
// Attempt to connect to MySQL database$conn = newmysqli(DB_SERVER, DB_USERNAME, DB_PASSWORD, DB_NAME);
// Check connectionif ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
?>

  3. Configure the email settings in PHPMailer (if using email features):

    // Inside email-sending script$mail = newPHPMailer(true);
$mail->isSMTP();
$mail->Host = 'smtp.gmail.com'; // Or your SMTP server$mail->SMTPAuth = true;
$mail->Username = 'your-email@gmail.com';
$mail->Password = 'your-app-password'; // Use app password for Gmail$mail->SMTPSecure = PHPMailer::ENCRYPTION_STARTTLS;
$mail->Port = 587;

Step 5: Set Up Frontend

  1. Navigate to the Frontend directory:

    cd /Applications/XAMPP/xamppfiles/htdocs/img/Travel-Planner/Frontend

  2. Install dependencies:

    npm install

  3. Start the development server:

    npm run dev

  4. The development server will start, typically at http://localhost:3000

Step 6: Backend Configuration (If Needed)

  1. Ensure your API endpoints are correctly pointing to the backend:

    // Example in your React codeconstAPI_BASE_URL='http://localhost/img/Travel-Planner/backend';

  2. You may need to configure CORS in your PHP backend:

    // Add to the top of your PHP API filesheader("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS");
header("Access-Control-Allow-Headers: Content-Type, Authorization");

Step 7: Creating Sample Data (Optional)

If you want to populate your database with sample data:

-- Sample destinationsINSERT INTO destinations (title, location, description, image, cost, rating, reviews) VALUES ('Great Wall of China', 'Beijing, China', 'One of the Seven Wonders of the World.', 'https://example.com/greatwall.jpg', 499999, 4.9, 8000),
('Taj Mahal', 'Agra, India', 'A symbol of eternal love.', 'https://example.com/tajmahal.jpg', 9999, 4.9, 5500);
-- Sample accommodationsINSERT INTO accommodations (title, location, description, image, cost, rating, reviews) VALUES ('Luxury Beach Resort', 'Maldives', 'Relax in a private villa with ocean access.', 'https://example.com/resort.jpg', 3499, 4.8, 290),
('Mountain Retreat', 'Swiss Alps', 'Cozy wooden lodge with breathtaking views.', 'https://example.com/lodge.jpg', 4999, 4.9, 340);

Running the Application

Accessing the Application

  1. Frontend: Open your browser and navigate to:

    http://localhost:3000

  2. Backend API: Available at:

    http://localhost/img/Travel-Planner/backend/

Default User Accounts

For testing purposes, you can use these accounts:

  1. Admin Account:

  2. Sample User Account:

Testing Features

  1. User Registration: Create a new account
  2. User Login: Use the sample account or newly created one
  3. Browse Destinations: View available destinations
  4. Book Accommodation: Select dates and complete a booking
  5. Manage Bookings: View your bookings in the user dashboard
  6. Admin Features: Log in with the admin account to manage users, bookings, and queries

Troubleshooting Common Issues

Database Connection Issues

  • Error: "Cannot connect to database"
    • Solution: Verify MySQL is running in XAMPP Control Panel
    • Solution: Double-check database name, username, and password in config file

API Connection Issues

  • Error: "Failed to fetch" in browser console
    • Solution: Ensure Apache is running
    • Solution: Check API endpoint URLs are correct
    • Solution: Verify CORS headers are properly set

Frontend Build Problems

  • Error: npm dependencies issues
    • Solution: Delete node_modules folder and run npm install again
    • Solution: Make sure you're using a compatible Node.js version

PHP Errors

  • Error: "Call to undefined function" or similar
    • Solution: Make sure PHP extensions are enabled in php.ini
    • Solution: Check XAMPP PHP version is 7.4 or higher

Additional Resources

Contact & Support

About

An intelligent, AI-powered travel platform that plans your entire journey from doorstep to destination—tailored to your budget, with optimized transport, accommodation (hostels/hotels), food recommendations, and curated adventure experiences, all in one seamless and personalized solution.

Resources

Readme
Activity

Stars

0 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages