Barcelona Explorer is my hackathon entry: an interactive, full-screen map of Barcelona built with Framer 3.0 agents.

Browse the city’s landmarks, beaches, markets, and hidden corners, each with photos, quick stats, and one-tap links to tickets or directions, in a dark/light, fully responsive interface.

Why I built it

I’ve lived in Barcelona over 3 years and it still amazes me. After a Framer event in Eixample, I wanted to bottle that feeling of discovering the city into something you can play with, not just another page to scroll.

A live map felt like the perfect challenge: lots of moving parts that all have to stay in sync.

What’s inside

A real pan/zoom map (Leaflet + CARTO tiles) with custom markers that animate and recolor on selection
A master-detail panel with photography, ratings, and contextual CTAs (Book Tickets · Get Directions · Visit Website) per location
Three switchable views: Explore, List, and an About panel, driven from a clean icon rail
A custom Framer Office marker right where it belongs on the map
A dark/light mode toggle that inverts the entire UI and swaps the map to dark tiles in real time

Built to be technically sound

It’s engineered, not just pretty. Shared state keeps everything in sync, and the whole experience is performance‑optimized, accessible, SSR‑safe, and data‑driven, so new places instantly show up across the map, list, and detail views.

Mobile, done right

On phones it becomes an Apple/Google-Maps-style draggable bottom sheet with peek/half/full snap points, so the map stays the hero.

What agents helped with

Agents let me build and refine each piece independently in small, reviewable steps. What surprised me most is how well they handled the genuinely interactive, stateful parts of Framer, not just layout and content. With clear structure, you can actually ship something people want to touch.

Try it: pan the map, tap a marker, flip to dark mode, and watch Barcelona light up.

Built with Framer 3.0 AI agents.

Suggested for you

Suggested for you

Suggested for you