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
Free
Cartful Shopper
🛒 Ecommerce
Mobile shopping app with story-style product discovery, slick cart drawer and checkout in three taps.
4.4k 752CursorBoltReplit
Free
Willow Telehealth
🏥 Medical
Telehealth app with symptom intake flow, visit room UI and prescription tracking in a calm clinical style.
4.1k 537CursorClaude Code
Free
Stackline Tasks
⚡ Productivity
Productivity app blending today-list focus with a kanban board, command palette and satisfying completion physics.
3.8k 689CursorClaude CodeWindsurf
Premium
Mindful AI Chat
🤖 AI
Calm AI companion chat app with streaming bubbles and voice input UI.
3.7k 64CursorClaude CodeReplit