CityBreaker: The AI-Powered City Break Planner

CityBreaker leverages Google Maps API & Gemini AI to allow you to plan your perfect city trip & discover hidden gems as well.

Comment

💡 Inspiration

As a passionate traveler, I had the idea to develop a self-contained website to showcase the power of the Google Maps API Platform to help me plan my next city break to South Korea.
I wanted to utilise the power of the platform in conjunction with the latest front-end technology such as GSAP to design a beautiful interface.

🗺️ What it does

CityBreaker is an intelligent travel planner that helps users discover and explore city destinations with speed and style, directly addressing the Travel and AI categories of the awards.

  • Visual City Dashboard
    Leveraging the Google Maps Platform, the app provides a rich, interactive map as the central canvas. Users can seamlessly fly between global destinations, from London to Tokyo, and get an immediate sense of place.

  • AI-Powered Itineraries
    At the heart of CityBreaker is a powerful AI engine. By integrating with Gemini AI, the app generates curated suggestions and full multi-day itineraries, complete with must-do activities, authentic hidden gems, and local foodie tips.

  • Interactive Map Exploration
    Users can search for landmarks, restaurants, and other points of interest directly on the map. This allows for intuitive, visual itinerary building without ever leaving the immersive map view.

  • "Surprise Me" Feature
    For the adventurous traveler, this feature uses AI to suggest a unique, unexpected point of interest within the selected city—encouraging spontaneous discovery and helping users break out of the typical tourist trails. The UI has been updated to allow retry and also supports mobile interface.

🛠️ How we built it

CityBreaker was built with a modern, performant, and highly interactive tech stack, focusing on Technical Execution and quality Integrations.

  • Frontend
    The application is built with Next.js and React, using TypeScript for robust, type-safe code. The UI is designed to be fluid and engaging, brought to life with a combination of GSAP (GreenSock Animation Platform) for complex timeline animations and Framer Motion for smooth, declarative UI transitions.

  • Mapping & Search
    The core of the experience relies on the Google Maps Platform. We used the Maps JavaScript API for the main map interface, the Places API to power our live search for landmarks and restaurants, and the Geocoding API for location-based queries.

  • AI Integration & PDF Generation
    The intelligent itineraries are generated by a custom backend API endpoint that communicates with Gemini AI. We evaluated several models and selected the optimal one for our use case. A key feature is our serverless function that takes this AI-generated content and dynamically creates a beautifully formatted, downloadable PDF itinerary for offline use.

🚧 Challenges we ran into

  • Front-end vs Backend Development Challenges

Personally, I haven't done frontend development for a very long time, hence using GenAI tools such as Gemini proved to be a god-send. The learning curve to integrate a React/Next.js stack using traditional brute-force learning would have been immense and impossible whilst balancing a full time job.

  • Effective AI Prompt Engineering
    Getting the AI to produce consistently high-quality, non-generic itineraries was a significant challenge. It required dozens of iterations on the prompt structure, learning how to provide the right context and constraints to guide the model toward generating creative and practical multi-day plans.

  • Integrating a Seamless Search Experience
    Implementing a powerful search bar directly on the map was more complex than anticipated. The challenge was not just fetching data from the Places API, but also managing the state of search results, displaying markers without cluttering the UI, and ensuring the map gracefully animated to selected locations—all while keeping the interface clean and intuitive.

The Google Maps API implementation seems to have updated over time, hence getting the search results to focus to focus on the map boundaries is tricky and is not 100% accurate.

  • Performance Optimization
    Balancing a visually rich interface—with high-resolution maps, photos, and complex animations—with a smooth, non-janky user experience was a top priority. We overcame this by implementing strategic memoization, lazy loading components, and ensuring our GSAP timelines were efficient and properly cleaned up.

🏆 Accomplishments that we're proud of

  • Truly Fun & Personal Discovery
    We're especially proud of the "Surprise Me" feature. It goes beyond typical tourist spots by using AI to suggest unique locations based on niche interests. We successfully implemented "exotic" options like finding the best ramen for gamers or locating a city's Magic: The Gathering hotspots—making discovery genuinely personal and fun. This directly enhances the User Experience and demonstrates creative Purpose.

  • End-to-End Itinerary Generation
    The complete workflow from AI prompt to user download is a major accomplishment. The system seamlessly generates an intelligent itinerary with Gemini AI and then programmatically creates a polished, travel-ready PDF document, providing tangible, offline value to the user.

✨ Try it: Click Itinerary and then the Magic PDF button to generate a magazine-style city guide.

🎓 What we learned

  • AI Model Analysis is Crucial
    It was a fun and insightful process to explore the differences between various Gemini models, such as Gemini 2.5-Pro for PDF generation, and Gemini-2.5-Flash-lite for generating shorter pieces of content.

  • The Power of Structured AI Output
    This project was a deep dive into how to "talk" to a large language model. We learned that by demanding structured output (like JSON), we could reliably use the AI's creativity as a data source for other programmatic tasks, like generating our PDF.

  • Complexity in Simplicity
    The most intuitive features, like the seamless search bar, often require the most complex logic behind the scenes. This project reinforced the importance of careful planning to create an experience that feels effortless for the user.

🔭 What's next for CityBreaker: The AI-Powered City Break Planner

This hackathon is just the beginning. We have a clear vision for the future of CityBreaker, focusing on the Immersive category.

  • True 3D Exploration with Cesium
    We plan to integrate Cesium with Google Maps Platform’s Photorealistic 3D Tiles. This will elevate our visual planning from a 2D experience into a fully immersive, true 3D digital twin of the city—allowing users to fly through streets and understand the terrain like never before.

  • User Accounts & Saved Itineraries
    Allowing users to create accounts, save their favourite spots, and build and store multiple shareable itineraries to improve long-term usability.

  • Google Maps Immersive View Integration
    Complementing the Cesium integration, we’ll use the new Immersive View API to provide photorealistic, 3D aerial views of key landmarks, offering a different but equally powerful way to visualize a location.

Built With

Share this project:

Updates