✈️ PackGo — Smart Travel Planner

Plan trips. Track expenses. Check weather. Translate languages. Book flights & hotels.
All in one beautiful, full-stack travel companion.

🚀 Live Demo · 📖 Docs · 🐛 Report Bug · ✨ Request Feature

• 🌍 Overview
• 📸 Screenshots
• ✨ Features
• 🛠️ Tech Stack
• 📁 Project Structure
• 🚀 Getting Started
• 🔑 Environment Variables
• 📡 API Endpoints
• 🗄️ Database Models
• 🔒 Security Features
• 🎨 Design Highlights
• 🔮 Future Enhancements
• 🤝 Contributing
• 🌟 Contributors
• 📄 License
• 👥 Mentors
• 👤 Author
• 🙌 Thanks to Contributors

PackGo is a production-ready, full-stack travel planning application built with the MERN stack (MongoDB, Express.js, React 19, Node.js). It consolidates every tool a traveller needs — itinerary management, expense tracking, real-time weather, live language translation, and flight & hotel search — into a single, polished web application.

Whether you're planning a weekend getaway or a month-long adventure, PackGo keeps all your travel data organised, secure, and accessible from any device.

Landing Page	Dashboard

Trip Detail	Destinations

• Create, edit, and delete trips with destination autocomplete
• Status tracking — Planned · Ongoing · Completed
• Destination images fetched automatically from the seeded catalogue
• Per-trip budget allocation

• Log expenses by category — Food · Transport · Accommodation · Activities · Shopping
• Budget utilization progress bar with overspend alerts
• Category-wise breakdown with interactive pie charts (Recharts)
• Export expenses to CSV for offline records

• Real-time weather powered by OpenWeatherMap API
• 5-day forecast with weather condition icons
• Smart travel tips based on temperature & conditions

• Instant translation via Google Translate API (google-translate-api-x) — no API key needed
• 28+ languages including Hindi, Spanish, French, Japanese, Arabic
• Auto language detection
• Common travel phrases quick-select
• Copy to clipboard with one click

• Search flights by origin, destination, and dates
• Search hotels by location, check-in/check-out, and guests
• Visual flight timeline with airline info and pricing
• Hotel cards with ratings, amenities, and booking CTA
• (Currently uses mock data — designed for real API integration)

• JWT-based authentication with token auto-refresh
• Secure password hashing with bcryptjs
• Protected routes with middleware guard
• Profile management and password change
• Security headers via Helmet + API rate limiting

• Trip statistics — Total, Completed, Planned, Budget overview
• Total spending analytics across all trips
• Monthly trip distribution bar chart (Recharts)
• Quick action cards for navigation
• Upcoming trip cards with status badges

• Tracks the last 5 destinations you explored on the home page
• Persists across page refreshes using localStorage
• Horizontally scrollable cards with destination image, name, and location
• One-click to jump back to a destination
• Clear all button to reset history
• No duplicates — revisiting a destination moves it to the top

Create a .env file inside the server directory before running the backend locally.

Example:

MONGO_URI=mongodb://127.0.0.1:27017/travel-plan
PORT=5000
FRONTEND_URL=http://localhost:3000

Make sure MongoDB is running locally before starting the backend server.

On macOS (Homebrew):

brew services start mongodb-community

Then start the backend:

cd server
npm install
npm run dev

Without a valid MONGO_URI, authentication-related endpoints such as forgot password may fail due to database connection timeouts.

travel-planner/
├── assets/                          # README screenshots
│   ├── landing_page.png
│   ├── dashboard.png
│   ├── trip_detail.png
│   ├── expense_tracker.png
│   ├── weather_forecast.png
│   └── live_translator.png
│
├── client/                          # ⚛️ React Frontend
│   └── src/
│       ├── components/
│       │   └── PrivateRoute.js      # Auth route guard
│       ├── pages/
│       │   ├── Home.js              # Landing page
│       │   ├── Login.js             # Login with image carousel
│       │   ├── Register.js          # Multi-step registration
│       │   ├── Dashboard.js         # Dashboard layout + sidebar
│       │   ├── NotFound.js          # 404 page
│       │   └── dashboard/
│       │       ├── DashboardHome.js  # Analytics overview
│       │       ├── TripsView.js      # Trip list + create modal
│       │       ├── TripDetail.js     # Trip detail + expenses
│       │       ├── ExpensesView.js   # Expense tracker + pie chart
│       │       ├── BookingView.js    # Flight & hotel search
│       │       ├── WeatherView.js    # Weather forecast
│       │       ├── TranslatorView.js # Live translator
│       │       └── ProfileView.js    # Profile & password
│       ├── redux/
│       │   ├── store.js
│       │   ├── actions/             # Async thunk actions
│       │   ├── reducers/            # State reducers
│       │   └── types/               # Action type constants
│       ├── services/
│       │   └── api.js               # Axios instance + interceptors
│       ├── theme.js                 # MUI custom theme (Poppins)
│       ├── App.js                   # Root component + routes
│       └── index.js                 # Entry point
│
├── server/                          # 🟢 Express Backend
│   ├── controllers/
│   │   ├── authController.js        # Register, login, profile
│   │   ├── tripController.js        # Trip CRUD
│   │   ├── expenseController.js     # Expense CRUD + aggregation
│   │   ├── weatherController.js     # OpenWeatherMap integration
│   │   ├── translatorController.js  # Google Translate integration
│   │   └── bookingController.js     # Flight & hotel (mock)
│   ├── models/
│   │   ├── User.js                  # User schema + password methods
│   │   ├── Trip.js                  # Trip schema with nested objects
│   │   ├── Expense.js               # Expense schema linked to trips
│   │   └── Destination.js           # Destination catalogue schema
│   ├── routes/                      # Express route declarations
│   ├── middleware/
│   │   ├── auth.js                  # JWT verification middleware
│   │   └── errorHandler.js          # Global error handler
│   ├── data/
│   │   ├── seed.js                  # Database seeder
│   │   └── cleanAndSeed.js          # Clean + reseed script
│   └── server.js                    # Express app entry point
│
├── .env.example                     # Environment variable template
├── .gitignore
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── LICENSE
└── README.md

Make sure you have the following installed:

• Node.js v18 or higher → Download
• MongoDB (local) or a free MongoDB Atlas cluster → Get Atlas
• npm (bundled with Node.js)
• OpenWeatherMap API Key (free) → Get Key

git clone https://github.com/hitesh-kumar123/Travel-Plans-.git
cd Travel-Plans-

⚠️ Important:
This repository uses separate frontend (client) and backend (server) environments.

Running commands like:

npm run dev

from the root directory will result in a missing script error.

Please install dependencies and run scripts separately inside the client and server directories.

### Important

Run commands from the appropriate project directory.

Backend:

```bash
cd server
npm install
npm run dev

Frontend:

cd client
npm install
npm start

Running commands from the wrong directory may result in missing files or package.json errors.

Do not run installation or start commands from the repository root directory.

Install dependencies separately inside:

• server/
• client/

Running commands from the root directory may result in missing script errors.

cd server npm install

cd ../client npm install

### 3. Configure Environment Variables

Copy the example file and fill in your values:

```bash
cp .env.example server/.env
Copy-Item .env.example server\.env

Open server/.env and update:

PORT=5000
MONGO_URI=mongodb+srv://<username>:<password>@cluster.mongodb.net/travel-planner
JWT_SECRET=your_super_secret_jwt_key_here
WEATHER_API_KEY=your_openweathermap_api_key

💡 Tip: The translator uses google-translate-api-x — no API key required!
Get your free weather key at openweathermap.org/api.

cd server
node data/seed.js

This populates the destinations collection with sample travel destinations and images for destination autocomplete.

Open two separate terminals:

# Terminal 1 — Backend (http://localhost:5000)
cd server
npm run dev

# Terminal 2 — Frontend (http://localhost:3000)
cd client
npm start

Then open your browser at http://localhost:3000 🎉

If you see:

The uri parameter to openUri() must be a string, got undefined

Make sure your .env file exists and contains a valid MongoDB connection string.

If npm reports:

Could not read package.json

Verify that you are running commands from the correct project directory (server/ or client/).

Base URL: http://localhost:5000/api

{
  name:      String,   // required
  email:     String,   // required, unique
  password:  String,   // hashed with bcrypt
  createdAt: Date
}

{
  user:           ObjectId,    // ref: User
  destination:    String,
  startDate:      Date,
  endDate:        Date,
  description:    String,
  budget:         Number,
  status:         Enum['planned', 'ongoing', 'completed'],
  activities:     [String],
  accommodation:  { name, address, checkIn, checkOut },
  transportation: { type, details },
  images:         [String],
  notes:          String
}

{
  user:        ObjectId,   // ref: User
  trip:        ObjectId,   // ref: Trip
  amount:      Number,
  currency:    String,     // default: 'INR'
  category:    Enum['food', 'transport', 'accommodation', 'activities', 'shopping', 'other'],
  description: String,
  date:        Date
}

{
  name:               String,
  city:               String,
  state:              String,
  category:           String,
  description:        String,
  images:             [String],
  entrance_fee_inr:   Number,
  best_time_to_visit: String,
  rating:             Number
}

• Custom MUI Theme — Poppins typography, curated palette, rounded components and consistent spacing
• Editorial Landing Page — Playfair Display + DM Sans typography, hero illustrations, animated call-to-actions
• Fully Responsive — Mobile-first approach; collapsible sidebar drawer on small screens
• Micro-animations — Hover lift effects, card transitions, skeleton loaders
• Toast Notifications — Real-time feedback (success / error / info) on all user actions via React-Toastify
• Interactive Charts — Bar chart for monthly trip analytics, pie chart for expense breakdown

• Real flight & hotel API integration (Amadeus / Skyscanner / RapidAPI)
• AI-powered itinerary generation (OpenAI / Gemini)
• Social trip sharing with friends and collaborative planning
• Push notifications & email reminders for upcoming trips
• Offline mode with service workers (PWA)
• Travel insurance integration
• Multi-currency expense conversion with live exchange rates
• Trip photo gallery with image uploads (Cloudinary)
• Dark mode toggle
• Mobile app (React Native)

We ❤️ contributions from the community! PackGo is an open-source project and all kinds of contributions are welcome — bug fixes, feature additions, documentation improvements, and more.

Please read our:

• 📋 Contributing Guidelines — branching strategy, commit message format, PR checklist
• 🎓 Mentor Guidelines — instructions and expectations for GSSoC '26 Mentors
• 🤝 Code of Conduct — community standards and expectations

# 1. Fork the repository on GitHub

# 2. Clone your fork
git clone https://github.com/<your-username>/Travel-Plans-.git

git fetch upstream
git pull upstream main

# 3. Create a feature branchP
git checkout -b feature/your-amazing-feature


# 4. Make your changes and commit
git add .
git commit -m "feat: add your amazing feature"

# 5. Push and open a Pull Request
git push origin feature/your-amazing-feature

Good First Issues are labelled good first issue — a great place to start! 🌱

Thanks to all the amazing people who contribute to Travel-Plans 🚀

This project is licensed under the MIT License.
See the LICENSE file for full details.

We are incredibly grateful to our mentors for their valuable support and code reviews:

• Mrigakshi Rathore — GSSoC'26 Mentor
  • 
  •