Atlas & Ember — Travel Guide Generator

💡 Inspiration

My girlfriend always wants to go out and travel — but every time, we hit the same wall: "Where should we even go? And once we pick somewhere, what do we actually do there?" Planning a trip meant juggling a dozen browser tabs — one for attractions, one for restaurants, one for the weather, another for the budget — and we'd usually give up before anything was decided.

I wanted a single place where you just type in a destination and instantly get a polished, magazine-quality travel guide you could actually print and carry. Something that turns "I don't know, somewhere nice?" into a real plan in seconds. So I built Atlas & Ember.

✨ What it does

You enter a destination, dates, travel style, budget, and who's traveling. In seconds, Atlas & Ember generates a complete, editorial-style travel guide that includes:

Day-by-day itinerary — morning, afternoon, and evening plans with specific places, timing, and local tips
Restaurant picks — breakfast, lunch, and dinner with must-order dishes
Accommodation options across budget, mid-range, and luxury tiers
Transportation guide — getting there plus local transit costs
Budget breakdown — estimated cost per person by category
Live weather forecast for your travel dates (via Open-Meteo)
Practical tips on visas, seasonality, and safety

You can save guides to history, watch them stream in live as they generate, and download the whole thing as a PDF.

🛠️ How I built it

Next.js 15 (App Router) + TypeScript for the frontend and API routes
Tailwind CSS for the warm, editorial "magazine" design
Claude (Anthropic API) as the engine that researches and writes each guide, streamed to the UI in real time
Open-Meteo API for free, key-less weather forecasts
localStorage for the guide history feature
jsPDF for one-click PDF export
Deployed on Vercel, with Novus.ai installed to track how real users interact with the product

📚 What I learned

This was my first time shipping a real, deployed product end-to-end. I learned how to:

Work with a streaming LLM API and parse server-sent events on the fly
Sanitize and validate AI-generated JSON so the UI never breaks
Debug a full deployment pipeline — environment variables, model versioning, and build errors
Think about "shippedness": it's not done until a stranger can open the URL and get value

🧗 Challenges I faced

AI returning unexpected JSON shapes — some fields came back as nested objects instead of strings, crashing the React render. I added a sanitizer layer to coerce everything safely.
Streaming the response — switching from a single blocking request to a live stream meant rebuilding both the API route and the client reader.
Deployment headaches — wrong model IDs, missing API keys, and a free-tier Vercel quirk that blocked git-triggered deploys. I learned to read build logs carefully and deploy through the dashboard instead.