Free
✈️ Travel
CROSS_PLATFORM

Waypoint Trips

Travel planner app with day-by-day itinerary timeline, map-linked stops and collaborative trip boards.

4.6k views 477 copies 377 words

The Prompt

# Waypoint — Travel Planning App

## Goal
Design and build "Waypoint", a travel planning app. Feel: anticipation — the joy of the trip starts in the planning. Every screen should feel native-quality — fluid, tactile, zero jank.

## Visual Language
- **Palette**: cloud white base, ink text, horizon gradient (peach #FFB088 → sky #7DD3FC) used for trip covers and the active-day marker
- **Type scale**: large title 32-34px bold, section header 20px semibold, body 16-17px, caption 13px.
- **Surfaces**: layered backgrounds (base / elevated card / sheet), 20px card radius, subtle 1px hairline separators.
- **Iconography**: consistent 24px stroke icons, 1.75px stroke weight.

## Screens
1. **Trips home** — stacked trip cards with cover gradient + destination photo blend, dates, collaborator avatars overlapping; '+ New trip' prominent.
2. **Itinerary** — vertical timeline per day: time dots connected by a line, stop cards (name, category icon, note, photo thumb); day switcher chips across top; active day chip in horizon gradient.
3. **Stop detail** — sheet: map snippet placeholder, address with copy, hours, personal note field, 'photos' strip.
4. **Explore** — search + category chips (Eat/See/Do), result cards with save-to-day button that shows a mini day-picker.
5. **Trip board** — collaborative wishlist grid; each card shows who added it via tiny avatar; long-press to vote ❤️, sorted by votes.

## Interactions & Motion
- Adding a stop to a day: card flies from Explore into the timeline position with a spring arc.
- Timeline auto-scrolls to 'now' when viewing the current trip day, with a pulsing location dot.
- Reordering stops: long-press lifts card (scale 1.03 + shadow), others part smoothly.
- Spring physics for all transitions (stiffness ~260, damping ~24); never linear easing.
- Skeleton loaders for every async surface; optimistic UI for user actions.

## Details That Matter
- Empty trip state: gradient postcard illustration + 'Where to, captain?' — set the tone early.
- Offline mode banner: 'Saved for the plane ✈️' — travelers will be offline, embrace it.
## Tech & Quality Bar
- React Native + Expo + TypeScript (or Flutter if requested). Reanimated for 60fps gestures.
- Dark & light mode from a single token file. Safe-area aware on all screens.
- Haptics on key confirmations. Offline-tolerant: cache last data, show stale-while-revalidate.

You may also like