Trip Planner: Build Accessible Itineraries Day by Day

WayFy’s Trip Planner lets you organise an accessible journey from the first idea to a shareable, day-by-day itinerary. Each trip is broken into days, each day holds an ordered list of places with optional visit windows, and the whole structure can be visualised on a calendar or an inline map. Trips you mark as public appear in the community feed where other users can fork them into their own account — accessibility-first route planning built on real places from the WayFy map.

Data Model

The planner is backed by three SQLAlchemy models in backend/src/api/models/trip_model.py.

Trip

Field	Type	Description
`id`	Integer PK	Auto-incrementing trip identifier
`user_id`	Integer FK → `users.id`	Owner of the trip
`title`	String(200)	Trip name (required)
`description`	Text	Optional longer description
`is_public`	Boolean	When `true`, trip appears in the public feed
`original_trip_id`	Integer FK → `trips.id`	Set when this trip is a fork; points to the source trip
`cover_image`	String(200)	Filename served from `/api/trips/cover/<filename>`
`created_at`	DateTime	UTC timestamp of creation
`updated_at`	DateTime	UTC timestamp of last update
`fork_count`	Computed	Number of forks referencing this trip (serialised, not stored)
`total_days`	Computed	Length of the `days` relationship (serialised, not stored)

TripDay

Field	Type	Description
`id`	Integer PK	Day identifier
`trip_id`	Integer FK → `trips.id`	Parent trip
`day_number`	Integer	Ordering index (1-based, enforced by `order_by`)
`date`	Date	Calendar date for this day (optional)
`title`	String(200)	Day label, e.g. “Day 1 — Madrid”
`notes`	Text	Free-form notes for the day

TripDayPlace

Field	Type	Description
`id`	Integer PK	Place-in-day identifier
`trip_day_id`	Integer FK → `trip_days.id`	Parent day
`favorite_id`	Integer FK → `user_favorites.id`	Links to a saved favourite (optional)
`place_name`	String(200)	Display name of the place (required)
`latitude`	Float	Geographic latitude
`longitude`	Float	Geographic longitude
`osm_id`	String(50)	OpenStreetMap element ID for cross-referencing
`sub_type`	String(100)	OSM sub-type, e.g. `catering.restaurant`
`order`	Integer	Position within the day (0-based)
`notes`	Text	Notes specific to this stop
`visit_time`	Time	Planned arrival time (serialised as `HH:MM`)
`visit_time_end`	Time	Planned departure time (serialised as `HH:MM`)

API Endpoints

All trip endpoints are JWT-protected unless noted.

Method	Path	Description
`GET`	`/api/trips/`	List trips owned by the authenticated user
`POST`	`/api/trips/`	Create a new trip
`GET`	`/api/trips/:id`	Get a single trip with days and places
`PUT`	`/api/trips/:id`	Update trip metadata
`DELETE`	`/api/trips/:id`	Delete a trip
`PUT`	`/api/trips/:id/cover`	Upload a cover image (multipart/form-data)
`DELETE`	`/api/trips/:id/cover`	Remove the cover image
`POST`	`/api/trips/:id/fork`	Fork a public trip into your own account
`GET`	`/api/trips/public`	List all public trips (no auth required)
`POST`	`/api/trips/:id/days`	Add a day to a trip
`PUT`	`/api/trips/:id/days/:dayId`	Update a day
`DELETE`	`/api/trips/:id/days/:dayId`	Delete a day (renumbers remaining days)
`POST`	`/api/trips/:id/days/:dayId/places`	Add a place to a day
`PUT`	`/api/trips/:id/days/:dayId/places/:placeId`	Update a place
`DELETE`	`/api/trips/:id/days/:dayId/places/:placeId`	Remove a place

Creating a Trip

Open the trip form

Navigate to Trips and click New trip. The ModalTripForm component opens a modal with fields for title, description, and public/private toggle.

Submit the form

useTrips.createTrip posts the form data to POST /api/trips/ with your JWT in the Authorization header. The new trip is prepended to your trips list on success.

{
  "title": "Accessible Madrid Weekend",
  "description": "Two days exploring central Madrid with full wheelchair access.",
  "is_public": false
}

Add a cover image

Click the cover image area in TripCoverImage to upload a photo. The file is sent as multipart/form-data to PUT /api/trips/:id/cover and the response returns the new cover_image path served from /api/trips/cover/<filename>.

Managing Days

Adding a Day

From the TripDetail view, click Add day. The ModalAssignDate modal lets you set the day number and an optional calendar date. Use ModalDateRange to set a date range across all days in one step — the backend recalculates day_number and date for each existing day.

Editing a Day

Each day is rendered as a TripDayCard. Inline editing updates the day’s title and notes via PUT /api/trips/:id/days/:dayId. When a day is deleted, useTripDetail.handleDeleteDay renumbers all remaining days sequentially starting from 1 and resequences dates from the anchor date of the first remaining day.

Adding Places to a Day

Open the place picker

Clicking Add place on a TripDayCard opens ModalAddPlace. You can search by name using SearchAutocomplete (Geoapify geocoder) or browse places directly from your WayFy favourites.

Set a time slot

The modal includes visit_time and visit_time_end time pickers. These values are stored as Time columns and serialised as HH:MM strings, so the TripCalendar can render them as timed events.

Add notes

The notes field on TripDayPlace stores any visit-specific notes, such as booking references or accessibility reminders.

Save

useTrips calls tripsApi.addPlace(tripId, dayId, data, token) which posts to POST /api/trips/:id/days/:dayId/places. The response is merged into the in-memory trip state immediately.

Places sourced from your WayFy favourites carry a favorite_id foreign key, linking the trip stop back to the original map pin and its accessibility review.

Calendar View

The TripCalendar component uses react-big-calendar with date-fns localisation (es locale). It converts the days array into calendar events by mapping each TripDayPlace with a visit_time to a timed event (start/end), and places without a time to all-day events defaulting to a one-hour block at 09:00. The calendar supports drag-and-drop via the withDragAndDrop addon — dragging an event updates its visit_time and visit_time_end by calling useTripDetail.handleUpdatePlace. The calendar also accepts click-to-slot for creating new places directly from a time block. Available views: Month, Week, Day, Agenda.

Day Map

The TripDayMap component renders a mini Mapbox GL map showing all places in a single day as numbered markers. Opening ModalTripDayMap expands this to a full-screen modal map. The useTripDayRoute hook computes a routing line between the ordered places to give a visual overview of the day’s walking or transit path.

Making a Trip Public

In the ModalTripForm (edit mode), toggle Make public. This sets is_public: true via PUT /api/trips/:id. The trip then appears in GET /api/trips/public and is shown in the PublicTripsList component on the community trips page.

Making a trip public exposes its title, description, cover image, all days, and all places to any WayFy user — including unauthenticated visitors. Remove sensitive location notes before publishing.

Forking a Public Trip

Any logged-in user can fork a public trip from the PublicTripsList. The TripCard component shows a Fork button alongside the trip’s fork_count.

POST /api/trips/:id/fork
Authorization: Bearer <token>

The backend creates a full deep copy of the trip — including all TripDay and TripDayPlace records — and sets original_trip_id to the source trip’s ID on the new record. The fork appears in your private trips list immediately and is entirely independent; edits to your fork do not affect the original.

{
  "id": 42,
  "user_id": 7,
  "title": "Accessible Madrid Weekend",
  "original_trip_id": 15,
  "fork_count": 0,
  "total_days": 2,
  "is_public": false,
  "cover_image": "/api/trips/cover/madrid_weekend.jpg"
}

Frontend Components Reference

TripList

Grid of TripCard components showing your own trips with cover image, title, day count, and fork count.

TripDetail

Full trip view with TripDayCard list, TripCalendar, and TripCoverImage.

TripDayCard

Expandable card for a single day showing its ordered places with time slots, notes, and edit/delete controls.

TripDayMap

Inline Mapbox GL map for a single day’s places. Expands into ModalTripDayMap for full-screen view.

TripCalendar

Drag-and-drop react-big-calendar view of all trip places with timed events.

PublicTripsList

Community feed of public trips with fork button and author attribution.

Hooks Reference

Hook	Responsibility
`useTrips`	CRUD for the authenticated user’s trip list; cover image upload/remove
`useTripDetail`	Loads a single trip with days/places; handles day/place add, update, delete, and day renumbering
`useTripDayRoute`	Computes a route polyline through a day’s ordered places for map display

Get Started

Core Features

Configuration

Architecture

Trip Planner: Build Accessible Itineraries Day by Day

Data Model

Trip

TripDay

TripDayPlace

API Endpoints

Creating a Trip

Managing Days

Adding a Day

Editing a Day

Adding Places to a Day

Calendar View

Day Map

Making a Trip Public

Forking a Public Trip

Frontend Components Reference

TripList

TripDetail

TripDayCard

TripDayMap

TripCalendar

PublicTripsList

Hooks Reference

Build docs developers (and LLMs) love

Get Started

Core Features

Configuration

Architecture

Documentation Index

​Data Model

​Trip

​TripDay

​TripDayPlace

​API Endpoints

​Creating a Trip

​Managing Days

​Adding a Day

​Editing a Day

​Adding Places to a Day

​Calendar View

​Day Map

​Making a Trip Public

​Forking a Public Trip

​Frontend Components Reference

TripList

TripDetail

TripDayCard

TripDayMap

TripCalendar

PublicTripsList

​Hooks Reference

Build docs developers (and LLMs) love

Data Model

Trip

TripDay

TripDayPlace

API Endpoints

Creating a Trip

Managing Days

Adding a Day

Editing a Day

Adding Places to a Day

Calendar View

Day Map

Making a Trip Public

Forking a Public Trip

Frontend Components Reference

Hooks Reference