Varje augusti förvandlas Vila de Gràcia i Barcelona till något man måste se för att tro: 23 gator och torg tävlar om att överträffa varandra med månader av hantverk, och i åtta dagar är det castellers, eldlopp och konserter till gryningen. Vi har bott här i tjugo år. Festivalen är anledningen till att hälften av våra vänner vet var vår studio ligger.
Sidoprojekt. Fiestas de Gràcia är en inofficiell guide gjord av Clutch Developer — utan koppling till Fundació Festa Major de Gràcia eller distriktet. Det officiella programmet finns på barcelona.cat/fmgracia.
Problemet
Det officiella programmet är en vackert formgiven PDF — på runt hundra sidor. Vilket är helt okej tills det är lördag kväll, du står i en fullpackad gata och vill besvara en väldigt enkel fråga: vad händer just nu, nära mig? PDF:er filtrerar inte. Så i år, eftersom vi ändå släpper en produkt i veckan, var det festivalens tur.
- Alla 134 evenemang, filtrerbara per dag, kategori och plats — under festivalen hoppar guiden till och med till idag och just nu.
- En livekarta över de 23 smyckade gatorna, festtorgen, säkra rutter och gågatuzonen.
- Gatuprofiler med varje kommittés historia, lite kontext och deras Instagram.
- En applåd-topplista — varje besökare får 3 applåder 👏 till sina favoritgator.
- Katalanska, spanska och engelska. Ingen app, inget konto för att läsa. Gratis.
Byggd på kvällar, live före dag ett
Alltihop gick från PDF till produktion på mindre än en veckas kvällar. Vi omvandlade distriktets program till strukturerad, trespråkig data; varje evenemang med tider, koordinater, kategorier, priser och tillgänglighetsnoteringar. Själva sajten är medvetet tråkig teknik: statisk HTML, CSS och vanilla JavaScript med hash-router — inget ramverk, inget byggsteg, inget som kan gå sönder.
Deadlinen är den intressanta begränsningen. Festivalen pågår 14–21 augusti. En festivalguide som släpps 22 augusti är värd exakt ingenting, så omfånget fick böja sig: applåd-topplistan gick live på öppningsdagen med magic link och Google, Apple kom en dag senare; A4-affischerna med QR-kod gjordes i samma palett som det officiella programmet, redo att tejpas på en lyktstolpe.
Stacken, eftersom frågan kommer
- Front: handskriven HTML/CSS/JS, Leaflet med CARTO-tiles, liquid glass-design i Cupertino-stil, mörkt läge som standard.
- Applåder: Supabase — row-level security, 3-applåder-regeln som databastrigger, magic link + Google + Apple.
- Hosting: Netlify med immutable assets och versionerad cache-bust — hela sajten cachas på edge.
- Extra: llms.txt för AI-assistenter, analys endast med samtycke och en tryckfärdig affisch-pipeline.
Inget av det här är smart för smarthetens skull. Det är samma playbook som i vårt kundarbete, skalad till ett kvarter: förstå den verkliga frågan någon ställer, få in datan i en form som besvarar den, och leverera medan svaret fortfarande spelar roll.