trip-planning

byRana Owais

# WanderSync — AI Travel Itinerary Planner (Build Prompt) Build a complete, production-quality web app called **WanderSync** — an AI-powered travel itinerary planner. Must look like a polished commercial travel-tech product (reference: OceanVoyage Cruises / TriqTrip style — big hero image, floating search card, clean destination grids, lots of white space). Follow every spec below exactly. ## Overview Users describe travel preferences by **typing or speaking, in any language**, and get a personalized day-wise itinerary generated by AI, with real destination photos, attraction data, and weather. AI can also **reply back with voice**, in the same language the user used. Example input: *"I want a 7-day cultural trip in Italy with budget hotels and art museums."* ## Tech Stack & APIs - **Frontend:** React JS (hooks), HTML5, CSS3, JS - **Backend:** Python, Flask (REST API) - **Database:** SQLite (users/sessions) + MongoDB/JSON (itineraries) - **LLM:** OpenAI GPT-4o — NLU, structured itinerary JSON, multilingual chat, embeddings for personalization - **Voice input (STT):** OpenAI Whisper API — transcribes speech, auto-detects language - **Voice output (TTS):** OpenAI TTS API (`tts-1`/`tts-1-hd`) — reads AI replies aloud in the same language as input - **Destination images/data:** Google Places API — real photos, ratings, details for every place shown anywhere (home cards, attraction lists, itinerary results) — never generic stock images - **Weather:** OpenWeatherMap API - **PDF export:** `reportlab` or `weasyprint` - **Auth:** Flask-Login/JWT + bcrypt password hashing ### Voice AI behavior - Mic icon on Trip Planner lets user speak instead of type. - Whisper transcribes + detects language automatically. - GPT-4o replies in that same detected language. - Reply is also converted to speech (OpenAI TTS) and auto-played, with mute/replay control. - Applies to initial planning request AND any follow-up chat/edit request (typed or spoken, any language). ## Design System (strict) **Colors (TechWiz palette):** | Role | Hex | Usage | |---|---|---| | Background | `#F2F6F9` | Page background | | Card/Section | `#E9EDF2` | Cards, panels, inputs | | Primary | `#0B2545` | Header, footer, headings, icons | | Accent/CTA | `#0B2545` | Solid button, white text, `box-shadow:0 4px 14px rgba(11,37,69,.25)`, hover lightens to `#123561` | | Text primary | `#111827` | Body/headings | | Text muted | `#4B5563` | Captions | | Borders | `#D7DEE6` | Card borders/dividers | Calm, structured, premium feel — soft shadows, `border-radius:12–16px`, generous spacing, no clutter. **Fonts:** - Headings: `DM Serif Display` (Google Font) — hero text, section titles, logo wordmark - Body: `Gadugi` — paragraphs, labels, nav, buttons. System font, use fallback: ```css font-family:'Gadugi','Segoe UI',system-ui,-apple-system,sans-serif; ``` ```html <link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&display=swap" rel="stylesheet"> ``` **Layout reference:** Large full-bleed hero photo + overlaid heading + floating input card overlapping hero and content below; horizontal-scroll destination cards; testimonial/"moments" section; icon+label feature rows. Adapt this structure to trip-planning content. **Real imagery rule (critical):** Never use generic/placeholder stock photos for a named place. Every destination/attraction/hotel shown anywhere (home cards, attraction lists, itinerary results) must show a real photo of that specific place via Google Places Photos API. If unavailable, show a clearly-labeled elegant placeholder illustration, not an unrelated stock photo. ## Header / Navigation (exact) **Logged OUT:** - Logo (left, DM Serif Display) - How it works (link) - Destinations (link) - Log in (outline button, `#0B2545` border/text) - Get started free (solid `#0B2545` button, white text) **Logged IN:** - Logo - Plan a trip → Planner page - My trips → Dashboard - Profile avatar (circular, initials or photo) - Log out **Profile avatar dropdown:** - Name + email header - Edit Profile (name/email/password) - Change Profile Picture - Dark Mode toggle (flips to dark navy palette derived from `#0B2545`) - Voice Response toggle (on/off) - Preferred Language selector (default: auto-detect) - My Trips shortcut - Log out Mobile: collapse nav into hamburger menu; avatar dropdown stays accessible. ## Pages 1. **Home/Landing** — full-bleed hero + DM Serif headline, floating trip-input card overlapping hero, "How it works" (3–4 steps), horizontal-scroll "Popular Destinations" (real photos), testimonials section, footer. 2. **Login/Signup** — split-screen form + travel imagery. 3. **Trip Planner** — text box with mic icon for voice input, plus destination/dates/budget/interests(chips)/travelers fields. Live transcription while speaking. 4. **Loading/Processing** — branded animated loader, rotating status text. 5. **Itinerary Result** — day-wise tabs, each activity card with real photo, time, title, description, map pin; weather widget; hotel sidebar; "Play voice summary" button (TTS reads day aloud); Edit/Download PDF/Share/Save. 6. **Edit Itinerary (inline)** — reorder/remove activities; voice commands supported ("swap day 2 and 3"). 7. **Dashboard/My Trips** — grid of saved itineraries with real photos, dates, View button. 8. **Profile/Settings** — full version of avatar dropdown options + account deletion. ## Functional Requirements 1. Secure signup/login/logout (bcrypt + JWT/session). 2. Text AND voice input (Whisper transcription, auto language detection). 3. GPT-4o generates structured JSON itinerary in user's detected/selected language. 4. AI replies read aloud via TTS in same language; toggle-able. 5. Google Places integration for real photos/ratings/details everywhere. 6. OpenWeatherMap integration for trip-date forecasts. 7. Personalization via stored past itineraries + embeddings similarity. 8. PDF export + shareable link. 9. Inline editing via UI or voice command. 10. Dashboard of saved itineraries. 11. Real-time progress indicator during generation. 12. Full profile management (info, avatar, dark mode, voice toggle, language). ## Non-Functional Requirements - **Performance:** Generation + image fetch completes in 5–8s under normal load; progressive loading UI if longer. - **Security:** HTTPS, hashed passwords, API keys in env vars only, never client-side. - **Scalability:** Async external API calls for concurrent users. - **Reliability:** Graceful fallback if any API (voice/image) fails or times out — app never breaks fully. - **Accessibility:** Responsive, proper contrast, captions/text alongside all voice output (never voice-only), keyboard-navigable. ## Deliverables - Full commented source (Flask backend + React frontend) - `.env.example` with `OPENAI_API_KEY`, `GOOGLE_PLACES_API_KEY`, `OPENWEATHERMAP_API_KEY` - `README.md` — setup, assumptions, architecture overview - Sample test data: 3–4 example prompts (incl. one non-English voice example) with generated itineraries - Folder structure: ``` wandersync/ ├── backend/ │ ├── app.py │ ├── routes/ │ ├── services/ (openai_service.py, voice_service.py, places_service.py, weather_service.py, pdf_service.py) │ ├── models/ │ └── database.db ├── frontend/ │ ├── src/ │ │ ├── components/ (Navbar, ProfileDropdown, VoiceInputButton, ItineraryCard...) │ │ ├── pages/ │ │ ├── styles/ (theme.css with palette+fonts above) │ │ └── App.jsx ├── .env.example ├── README.md └── requirements.txt ``` ## Tone Premium, editorial-feeling travel-tech product — DM Serif Display elegance + clean `#0B2545`-on-`#F2F6F9` structure, real photography everywhere, natural multilingual voice AI (not a gimmick). Avoid purple-gradient AI-app clichés and clutter. **Build order:** scaffolding → backend services (OpenAI, Whisper/TTS, Places, Weather) → theme/design system → pages (order above) → voice input/output wiring → PDF export → final polish pass matching the reference layout.