Elke augustus verandert de Vila de Gràcia in Barcelona in iets dat je gezien moet hebben: 23 straten en pleinen strijden om de mooiste versiering, met maanden handwerk, en acht dagen lang zijn er castellers, vuurlopen en concerten tot zonsopgang. Wij wonen hier al twintig jaar. Dit feest is de reden dat de helft van onze vrienden weet waar onze studio zit.
Side project. Fiestas de Gràcia is een onofficiële gids van Clutch Developer — zonder banden met de Fundació Festa Major de Gràcia of het District. Het officiële programma staat op barcelona.cat/fmgracia.
Het probleem
Het officiële programma is een prachtig vormgegeven pdf — van zo'n honderd pagina's. Prima, totdat het zaterdagavond is, je in een stampvolle straat staat en een heel simpele vraag wilt beantwoorden: wat is er nu, bij mij in de buurt? Pdf's filteren niet. Dus dit jaar, omdat we toch elke week een product uitbrengen, was het feest aan de beurt.
- Alle 134 evenementen, filterbaar op dag, categorie en locatie — tijdens het festival springt de gids zelfs naar vandaag en nu.
- Een live kaart van de 23 versierde straten, de feestpleinen, veilige routes en de voetgangerszone.
- Straatprofielen met het verhaal van elke commissie, wat context en hun Instagram.
- Een applaus-ranglijst — elke bezoeker krijgt 3 applausjes 👏 voor zijn favoriete straten.
- Catalaans, Spaans en Engels. Geen app, geen account nodig om te lezen. Gratis.
Gebouwd in de avonduren, live vóór dag één
Het geheel ging in minder dan een week avonden van pdf naar productie. We zetten het districtsprogramma om in gestructureerde, drietalige data; elk evenement met tijden, coördinaten, categorieën, prijzen en toegankelijkheidsnotities. De site zelf is bewust saaie techniek: statische HTML, CSS en vanilla JavaScript met een hash-router — geen framework, geen build-stap, niets dat stuk kan.
De deadline is de interessante beperking. Het feest loopt van 14 tot 21 augustus. Een festivalgids die op 22 augustus verschijnt is precies niets waard, dus de scope moest buigen: de applaus-ranglijst ging live op openingsdag met magic link en Google, Apple volgde een dag later; de A4-posters met QR-code kwamen uit hetzelfde palet als het officiële programma, klaar om op een lantaarnpaal te plakken.
De stack, want die vraag komt toch
- Front: handgeschreven HTML/CSS/JS, Leaflet met CARTO-tiles, liquid-glass design in Cupertino-stijl, standaard dark mode.
- Applaus: Supabase — row-level security, de 3-applausjes-regel als database-trigger, magic link + Google + Apple.
- Hosting: Netlify met immutable assets en een geversioneerde cache-bust — de hele site staat in de edge-cache.
- Extra's: llms.txt voor AI-assistenten, analytics alleen met toestemming en een drukklare poster-pipeline.
Niets hiervan is slim om het slim zijn. Het is hetzelfde draaiboek als in ons klantwerk, geschaald naar een buurt: begrijp de echte vraag die iemand stelt, breng de data in een vorm die antwoord geeft, en lever op zolang het antwoord er nog toe doet.