Every August, the Vila de Gràcia in Barcelona turns into something you have to see to believe: 23 streets and squares compete to out-decorate each other with months of handcrafted work, and for eight days there are castellers, fire runs and concerts until sunrise. We've lived here for twenty years. This festival is the reason half our friends know where our office is.
Side project. Fiestas de Gràcia is an unofficial guide made by Clutch Developer — no affiliation with the Fundació Festa Major de Gràcia or the District. The official programme lives at barcelona.cat/fmgracia.
The problem
The official programme is a beautifully designed PDF — around a hundred pages of it. Which is fine until it's Saturday night, you're standing in a packed street, and you want to answer a very simple question: what's on right now, near me? PDFs don't filter. So this year, since we ship a product every week anyway, we gave the festa its turn.
- All 134 events, filterable by day, category and venue — the guide even jumps to today and right now during the festival.
- A live map of the 23 decorated streets, festival squares, safe routes and the pedestrian zone.
- Street profiles with each commission's story, a bit of history and their Instagram.
- A clap leaderboard — every visitor gets 3 claps 👏 for their favourite streets.
- Catalan, Spanish and English. No app, no sign-up to read. Free.
Built in evenings, shipped before day one
The whole thing went from PDF to production in under a week of evenings. We parsed the District's programme into structured, trilingual data; every event got times, venue coordinates, categories, prices and accessibility notes. The site itself is deliberately boring technology: static HTML, CSS and vanilla JavaScript with a hash router — no framework, no build step, nothing to break.
The deadline is the interesting constraint. The festa runs August 14–21. A festival guide that ships on August 22 is worth exactly nothing, so scope had to bend: the claps leaderboard got magic-link and Google sign-in on launch day, Apple sign-in a day later; the A4 posters with a QR code came out of the same palette as the official programme, ready to tape to a lamppost.
The stack, since you'll ask
- Front: hand-written HTML/CSS/JS, Leaflet with CARTO tiles, Cupertino-style liquid-glass design, dark mode by default.
- Claps: Supabase — row-level security, a 3-claps-per-person rule enforced by a database trigger, magic-link + Google + Apple sign-in.
- Hosting: Netlify with immutable assets and a versioned cache-bust — the whole site is cached at the edge.
- Extras: llms.txt for AI assistants, consent-gated analytics, and a print-ready poster pipeline.
None of it is clever for cleverness' sake. It's the same playbook we use for client work, scaled to a neighbourhood: understand the real question someone is asking, get the data into a shape that answers it, and ship while the answer still matters.