VoyageAI is a premium, state-of-the-art interactive travel planning web application. The frontend is built on React and Vite, designed to work in tandem with a LangGraph multi-agent backend. It orchestrates a stream of responses from 8 specialized AI agents to deliver dynamic, high-fidelity itineraries, budget analyses, weather forecast advisories, and geographic travel routes.
- Tracks and displays real-time generation updates for all 8 backend agents:
- Destination Agent — Curates overview, descriptions, and hero imagery.
- Attraction Agent — Selects top sightseeing locations.
- Hotel Agent — Recommends hotels and alternative accommodations.
- Dining Agent — Suggests top restaurants and local culinary highlights.
- Weather Agent — Analyzes forecast advisories and packing safety tips.
- Local Agent — Yields insider travel styles and suitabilities.
- Transport Agent — Compares intercity logistics, pricing, and speed.
- Budget Agent — Audits costs and suggests revisions to match user budgets.
- Integrated with Leaflet and OpenStreetMap, styled with CartoDB Dark Matter.
- Geocoding Lookups: Dynamically geocodes the destination and each attraction name.
- Route Polyline Path: Draws a glowing, semi-transparent purple travel path connecting attractions in sequential order.
- Custom Dark Popups: Sleek dark navy tooltips with gold attraction badges and distance indicators.
- Floating Legend Overlay: A glassmorphic overlay guide listing attraction path indexes at a glance.
- A custom React tour wizard that spotlights form input fields using dynamic dark backdrops.
- Scroll-aligns and guides the user through Departure, Destination, Duration, Budget, and Preferences before submitting.
- Directly extracts and displays high-quality photos (e.g., Pexels images) returned by the agents.
- Renders photographer names and source attributions overlayed on cinematic banners.
- Live elapsed stopwatch counting final response seconds.
- SSE Stream Abort: Instantly triggers network cancellation (
AbortController) to shut down generation processes if any agent encounters an"error"status.
- Centered Symmetric Shell: All pages sit in a balanced
840pxmax-width container, correcting left-side screen biases on large viewports. - Micro-animations: Button hover vertical translations (
translateY(-1px)), glow drop-shadows, active click feedback, and sidebar link translations (translateX(4px)). - Responsive Wrappers: Flex layout wrapping tab items with scrollbar-hidden rules for smooth mobile operations.
- Framework: React 18
- Build Tool: Vite 6
- Routing: React Router DOM 6
- Map System: Leaflet 1.9 (OpenStreetMap CartoDB dark tile layers)
- Styling: Vanilla CSS (Premium dark mode palette, glassmorphism, responsive media queries)
Clone the repository and install the project dependencies:
npm installStart the local Vite server:
npm run devValidate and compile the project into minified static assets (dist folder):
npm run buildRun ESLint to check for syntax and styling compliance:
npm run lint- Satyabrata Mishra