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

Видео Let's Build a Full Stack AI Travel App in Next.js | Chat Interface to Live Map Pins канала Sujan Anand