Trip Planner

A full-stack trip planning application built with React and Cloudflare Workers, deployed as a single unified service.

Overview

This application combines a React frontend with a Cloudflare Workers backend, serving both the static client assets and API endpoints from a single worker. The backend uses Cloudflare D1 for database storage.

Architecture

• Frontend: React with TypeScript, Vite for building
• Backend: Hono framework on Cloudflare Workers
• Database: Cloudflare D1 (SQLite)
• Deployment: Single Cloudflare Worker serving both static assets and API routes

Getting Started

Prerequisites

• Node.js 18+
• npm
• Wrangler CLI (Cloudflare Workers CLI)

Installation

npm install

Database Setup

The application uses Cloudflare D1 for database storage. Database migrations are located in the migrations/ directory.

For local development, apply migrations to your local development database:

# Apply all pending migrations to local database
npx wrangler d1 migrations apply trip-plan --local

For production, migrations are automatically applied when you run npm run deploy. However, you can also manually apply migrations:

# Manually apply migrations to production
npx wrangler d1 migrations apply trip-plan --remote

The migrations include:

• 0001_create_schema.sql - Creates the database schema (locations, categories, activities, itinerary_items)
• 0002_seed_data.sql - Seeds initial data with locations, categories, and activities for Melbourne and Brisbane

Development

1. Build the React frontend:

npm run build

2. Start the development server:

npm run dev

The application will be available at http://localhost:8787

Building

To build the React application for production:

npm run build

Testing

The project uses Vitest 4.x for testing.

Important Note on Vitest 4.x Upgrade: This project has been upgraded to Vitest 4.0.13. As part of this upgrade, the API tests have been rewritten to use mock D1Database implementations instead of @cloudflare/vitest-pool-workers, which does not yet support Vitest 4.x. The mock implementation provides the same test coverage while maintaining compatibility with the latest Vitest version.

Note: Tests require the application to be built first as the API tests need the dist directory for asset serving.

# Build first
npm run build

# Then run all tests (API and client)
npm test

Run API tests only:

npm run test:api

Run client tests only:

npm run test:client

Linting

npm run lint

Deployment

Deploy to Cloudflare Workers:

npm run deploy

This command will:

1. Build the React frontend (npm run build)
2. Apply pending database migrations to production (wrangler d1 migrations apply trip-plan --remote)
3. Deploy the worker to Cloudflare (wrangler deploy)

Note: Database migrations are automatically applied during deployment to ensure the production database schema is up to date.

Project Structure

├── src/
│   ├── index.ts              # Worker entry point (API routes + static serving)
│   ├── client/               # React application
│   │   ├── components/       # React components
│   │   ├── api.ts           # API client
│   │   └── main.tsx         # React entry point
│   └── public/              # Static assets
├── migrations/               # D1 database migrations
│   ├── 0001_create_schema.sql  # Database schema
│   └── 0002_seed_data.sql      # Seed data
├── test/                     # API tests
├── dist/                     # Built React app (generated)
├── wrangler.jsonc           # Cloudflare Workers configuration
├── vite.config.ts           # Vite configuration
├── vitest.api.config.ts     # API test configuration
├── vitest.client.config.ts  # Client test configuration
└── package.json             # Dependencies and scripts

API Routes

• GET /api/init - Get locations and categories
• GET /api/activities - Get all activities (with optional location filter)
• GET /api/itinerary - Get itinerary items
• POST /api/itinerary - Add item to itinerary
• DELETE /api/itinerary/:id - Remove item from itinerary

All other routes serve the React application via static assets.

Database Schema

The application uses four main tables:

• locations - Trip locations (Melbourne, Brisbane)
• categories - Activity categories (Sights, Dining, Trips)
• activities - Available activities and recommendations
• itinerary_items - User's planned itinerary

Database schema and seed data are managed through migrations in the migrations/ directory.

License

MIT