Elke augustus verandert de Vila de Gràcia in Barcelona in iets dat je gezien moet hebben: 23 straten en pleinen proberen elkaar te overtreffen met maanden handwerk, en acht dagen lang zijn er castellers, correfocs, workshops en concerten door de hele buurt. We wonen hier al twintig jaar. Dit feest is de reden dat de helft van onze vrienden weet waar onze studio staat, en het gaf ons een concrete productbeperking: bouwen voor mensen die al buiten zijn, met hun telefoon in de hand, op zoek naar wat ze hierna kunnen doen. De gids moest snel antwoord geven zonder het karakter van de festa plat te slaan tot een lijst anonieme evenementen. Daarom moesten het programma, de kaart en de verhalen van de straten bij dezelfde kleine site horen.
Eigen project. Fiestas de Gràcia is een onofficiële gids van Clutch Developer — zonder band met de Fundació Festa Major de Gràcia of het District. Het officiële programma staat op barcelona.cat/fmgracia. De onofficiële gids staat op fiestasdegracia.com.
Het probleem
Het officiële programma is een prachtig vormgegeven pdf met heel veel informatie. Prima als je thuis plant, maar onhandig op zaterdagavond wanneer je in een volle straat staat en een eenvoudige vraag wilt beantwoorden: wat is er nu en wat is er bij mij in de buurt? Een pdf filtert niet op dag, categorie of locatie en geeft de kaart geen volwaardige plek in dezelfde beslissing. Op een telefoon heeft de gebruiker een korte route nodig van vraag naar evenement: kies een dag, beperk de categorie, zoek op naam of locatie en open de route of de context van de straat. De openingsdatum van het festival lag vast en het budget voor het kleine avondproject was beperkt. De scope moest dus scherp blijven: het programma omzetten in een snelle, leesbare gids zonder te doen alsof die de officiële communicatie vervangt.
- Alle 134 evenementen, filterbaar op dag, categorie en locatie — met snelkoppelingen naar de agenda van vandaag en naar evenementen die tijdens het festival nu plaatsvinden.
- Een livekaart van de 23 versierde straten en pleinen, festivalplekken, voetgangerszones en praktische routes door de buurt.
- Straatprofielen met het verhaal van elke commissie, lokale context, hun Instagram en een directe ingang naar de kaart.
- Een applausranglijst — elke bezoeker krijgt 3 applausjes 👏 om over favoriete straten te verdelen; inloggen houdt het kleine spel gekoppeld aan echte mensen.
- Catalaans, Spaans en Engels. Je hebt geen app of account nodig om het programma te lezen. Het is gratis.
De stack, want die vraag komt toch
- Front: handgeschreven HTML/CSS/JavaScript, met echte URL's voor het programma, de kaart en straatpagina's zodat bezoekers een nuttige bestemming kunnen delen.
- Kaart: Leaflet met CARTO/OpenStreetMap-tiles, om de versierde straten en festivalplekken aan hetzelfde filterbare programma te koppelen.
- Applaus: door Supabase ondersteunde status voor inloggen en de ranglijst, met e-mailverificatie en opties voor Google en Apple voor de regel van 3 applausjes per persoon.
- Oplevering: een klein statisch weboppervlak op Netlify, met Catalaanse, Spaanse en Engelse content, analytics na toestemming en zonder installatie via een appstore. Door die onderdelen bij elkaar te houden laadde de gids snel, was hij makkelijk te delen en kon hij worden bijgewerkt terwijl het programma veranderde.
Het geheel ging in minder dan een week avonden van district-pdf naar productie en stond vóór dag één live. De belangrijkste keuze in de oplevering was stoppen bij het nuttige antwoord: bekijk het programma, filter het, zie de straten op een kaart en open de lokale context. Een bezoeker hoeft geen nieuw systeem te leren of een account te maken; de gids is er wanneer de vraag ontstaat en stapt daarna weer opzij. Daardoor wordt een klein, tijdgebonden product eerder gebruikt dan een grotere gids die pas na het juiste moment verschijnt. Het is dezelfde aanpak als bij de websites die we voor klanten bouwen: opleveren zolang het antwoord ertoe doet, de scope zichtbaar houden en de volgende functie laten voortkomen uit echt gebruik.