TravelMate - AI Travel Planner

TravelMate is a full-stack itinerary planning app with AI-based POI ranking, optimized route generation, Google Maps visualization, JWT authentication, and PDF export.

Features

• AI-powered POI ranking and clustering
• Google Maps route visualization with polyline decoding
• Day-by-day itinerary planning
• Lightweight Three.js hero animation for landing/auth experience
• JWT auth with access + refresh token flow
• Shareable itinerary day cards
• Avatar customization
• Weather preview for destination
• PDF itinerary export

Stack

• Frontend: React 18 (Vite), pure JavaScript (JSX), Tailwind CSS, React Query, React Context, react-hook-form + zod
• Backend: Node.js (ESM), Express, MongoDB/Mongoose, JWT, bcrypt, Winston, pdfkit

Setup

1. Google Cloud setup

1. Create a project in Google Cloud Console.
2. Enable APIs:
   • Maps JavaScript API
   • Places API
   • Directions API
   • Geocoding API
   • Distance Matrix API
3. Create API keys:
   • Frontend key: restrict to HTTP referrers
   • Backend key: restrict to server IPs

2. Backend

cd backend
npm install
cp .env.example .env
npm run dev

3. Frontend

cd frontend
npm install
cp .env.example .env
npm run dev

Troubleshooting

UI looks plain or buttons look empty

• Hard refresh the browser after restarting Vite (Ctrl+F5).
• Verify frontend is running with npm run dev inside frontend.
• Make sure frontend/src/index.css is imported in frontend/src/main.jsx.

Critical notes

• Use pure JavaScript/JSX only.
• Do not hardcode API keys in source code.
• GOOGLE_MAPS_API_KEY is validated on backend startup.
• .env.example files include required variables for both backend and frontend.