Let's Build a Full Stack AI Travel App in Next.js | Chat Interface to Live Map Pins

In this video, I built Atlas — a full stack AI travel planner where you describe your trip in plain language and every real place the AI mentions gets pinned on a live Google Map in real time, right next to the chat. No forms. No dropdowns. Just a conversation that builds your trip as you talk. SOURCE CODE - https://sujan45.gumroad.com/l/uatqch This is a complete end-to-end build — frontend, backend, AI, database, auth, deployment — and I'm showing every step, including the real bugs we hit and exactly how we fixed them. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 🗺️ WHAT WE BUILT ━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ✅ Chat-to-map sync — Claude responds conversationally AND calls a custom extract_places tool to identify real, geocodable locations. Only specific, visitable places above a 0.6 confidence threshold get pinned — no false positives from vague mentions like "a good coffee shop" ✅ Live map panel — pins drop in one by one as places are extracted, with a smooth stagger animation. The map auto-fits its camera to frame all current pins using Google Maps fitBounds() ✅ Place enrichment — every extracted place name gets geocoded via Google Places API (Text Search + Place Details) returning real lat/lng, photos, ratings, and descriptions. Results are cached in our own Postgres table so we never pay Google twice for the same place ✅ Hover cards — hover any bold place name in the chat reply and see the actual Google Places photo, star rating, and place name in a floating card ✅ Destination loader — while the AI is thinking, the right panel shows an orbit animation with circling destination photos and cycling status text ("Scouting the best spots", "Mapping out the route") themed to your query ✅ Persistent trips — every chat session is saved as a trip. Messages, extracted places, and the full conversation history are stored in Supabase with proper Row Level Security so users can only ever see their own data ✅ Trip dashboard — a card grid showing all your saved trips with real cover photos pulled from the highest-rated Google Places photo in that trip's conversation, relative timestamps, and status badges ✅ Collapsible sidebar — shows your real past conversations fetched from the backend, with a hover-to-reveal delete button using a click-twice-to-confirm pattern (no jarring native confirm() popups) ✅ AI itinerary generation — once you've had a conversation, click the Itinerary tab and Atlas builds a complete structured day-by-day plan from your chat history using Claude's forced tool calling (guaranteed structured JSON output, no plain text) ✅ Auth — Supabase magic link + email OTP. The backend verifies JWTs using ES256 asymmetric signing via a JWKS endpoint — no shared secret needed on the backend ✅ Middleware route protection — Next.js middleware blocks unauthenticated requests to /chat server-side before any React code runs, plus a ?auth=required flag that auto-opens the login modal on redirect ✅ Proper backend logging — every request gets a UUID, structured JSON logs with path/method/status/duration, rate-limiting-ready CORS locked to your frontend origin #nextjs #fastapi #claudeapi #anthropic #aiapps #fullstack #reactjs #python #supabase #googlemaps #llm #buildwithclaude #webdevelopment #indiedev #aitravel #realtimeai #toolcalling #streamingai #typescript