Mapistry

Inspiration Planning trips is overwhelming — endless tabs, scattered recommendations, and no easy way to visualize a full itinerary. We wanted to build one place where anyone could go from "I want to visit Tokyo" to a complete, mapped day-by-day plan in minutes. What it does Mapistry lets you search any city, browse AI-curated places filtered by budget and interests, and drag-and-drop them into a multi-day itinerary with live maps, travel times, and cost breakdowns. It then generates a fully personalized trip plan powered by Google Gemini. How we built it We built it as a React single-page app using the Google Places API for location data, Google Maps Embed API for live directions, and the Gemini API for AI-generated descriptions and cost estimates. Everything is deployed on Vercel with environment variables managing all API keys securely. Challenges we ran into Getting the AI integrations stable was the biggest hurdle — we cycled through Anthropic and multiple Gemini model versions before landing on a working configuration. Syncing real-time map directions with the selected transport mode and keeping costs accurate across multiple API sources also required significant iteration. Accomplishments that we're proud of We're proud that the full pipeline — from city search to downloadable PDF itinerary — actually works end to end in a polished, production-ready UI. The budget tracker that updates live as you add places felt like a genuinely useful feature we hadn't seen done this cleanly elsewhere. What we learned We learned how quickly third-party API constraints can block progress, and how important it is to build fallbacks when external services fail or change. We also got much more comfortable architecting a stateful React app where many moving pieces — maps, AI, cost data, drag-and-drop — all have to stay in sync. What's next for Mapistry We want to add collaborative trip planning so friends can build itineraries together in real time. Longer term, we'd love to integrate live flight and hotel booking directly into the app so users can go from plan to booked without ever leaving Mapistry.

Built With

• ai
• anthropic
• api
• claude
• gemini
• google
• google-maps
• googlecloudapi
• openweatherapi
• serpari
• versel