10cf482d9f6e55e9dd834103889b8c84dd10577b
TripPlanner
A full-stack travel planning web application with drag-and-drop itinerary building, place management, packing lists, and Google Maps integration.
Features
- Drag & Drop Planner: Drag places from the sidebar onto day columns; reorder within days or move between days
- Place Management: Add places with address, price, tags, categories, reservation status, and visit time
- Google Maps Integration: Search Google Places to auto-fill place details (requires API key)
- Packing Lists: Grouped packing lists with progress tracking and quick-add suggestions
- Trip Management: Multiple trips with date ranges, automatic day generation
- Categories & Tags: Color-coded organization of places
- Admin Panel: User management and platform statistics
- JWT Authentication: Secure login and registration
Tech Stack
- Backend: Node.js + Express + SQLite (better-sqlite3)
- Frontend: React 18 + Vite + Tailwind CSS v3
- State: Zustand with optimistic updates
- DnD: @dnd-kit/core + @dnd-kit/sortable
- Auth: JWT tokens
- Icons: lucide-react
Default Admin Credentials
Email: admin@admin.com
Password: admin123
Change these credentials after first login in production!
Development Setup
Prerequisites
- Node.js 18+
- npm or yarn
1. Install Server Dependencies
cd server
npm install
2. Configure Server Environment
cp .env.example .env
# Edit .env and set a secure JWT_SECRET
3. Install Client Dependencies
cd client
npm install
4. Run Development Servers
In two separate terminals:
# Terminal 1 - Server (from /server directory)
npm run dev
# Terminal 2 - Client (from /client directory)
npm run dev
The server runs on http://localhost:3001 and the client on http://localhost:5173. The Vite dev server proxies /api requests to the Express server automatically.
Production Build
Manual
# Build the client
cd client
npm run build
# The built files go to client/dist/
# Copy them to server/public/
cp -r dist ../server/public
# Run the server in production mode
cd ../server
NODE_ENV=production node src/index.js
Docker
# Build and run with Docker Compose
docker-compose up --build
# The app will be available at http://localhost:3000
Environment Variables
Server (.env)
| Variable | Default | Description |
|---|---|---|
PORT |
3001 |
Server port |
JWT_SECRET |
(required) | Secret key for JWT signing |
NODE_ENV |
development |
Environment mode |
In production, set a strong random JWT_SECRET (at least 32 characters).
Google Maps API Key Setup
- Go to Google Cloud Console
- Create a new project or select existing
- Enable the Places API (New)
- Create an API key under Credentials
- Optionally restrict the key to your domain
- In the app: go to a trip → Settings tab → enter your API key
The Maps integration allows:
- Searching places by name/query
- Auto-filling place details (name, address, coordinates, phone, website)
SQLite Database
The database is stored at ./data/travel.db (relative to the server process working directory).
In Docker, this is mounted as a volume at ./data.
API Endpoints
Auth
POST /api/auth/registerPOST /api/auth/loginGET /api/auth/mePUT /api/auth/me/maps-key
Trips
GET /api/tripsPOST /api/tripsGET /api/trips/:idPUT /api/trips/:idDELETE /api/trips/:id
Days
GET /api/trips/:tripId/daysPOST /api/trips/:tripId/daysPUT /api/trips/:tripId/days/:idDELETE /api/trips/:tripId/days/:id
Places
GET /api/trips/:tripId/placesPOST /api/trips/:tripId/placesPUT /api/trips/:tripId/places/:idDELETE /api/trips/:tripId/places/:id
Assignments
POST /api/trips/:tripId/days/:dayId/assignmentsDELETE /api/trips/:tripId/days/:dayId/assignments/:idPUT /api/trips/:tripId/days/:dayId/assignments/reorderPUT /api/trips/:tripId/assignments/:id/move
Packing
GET /api/trips/:tripId/packingPOST /api/trips/:tripId/packingPUT /api/trips/:tripId/packing/:idDELETE /api/trips/:tripId/packing/:id
Tags & Categories
GET/POST/PUT/DELETE /api/tagsGET/POST/PUT/DELETE /api/categories
Maps (requires API key)
POST /api/maps/searchGET /api/maps/details/:placeId
Admin
GET /api/admin/usersPUT /api/admin/users/:idDELETE /api/admin/users/:idGET /api/admin/stats
Description
Languages
TypeScript
64.7%
JavaScript
35%
CSS
0.2%