4 juni 2026

Overzicht

Tierra Libre is het digitale thuis van een motor-hermandad — een club enkel voor leden waar ritten worden gepland, routes gearchiveerd, motoren getoond en elke trip een stempel oplevert. Rueda libre, rueda en familia. Ik heb het van ontwerp tot oplevering gebouwd: de visuele identiteit van het product, het interaction design, de frontend, het databaseschema en de beveiligingsregels. De briefing die alles bepaalde: het moest aanvoelen als een clubhuis, niet als software. Een rijclub heeft een cultuur, en een generiek dashboard zou die platgeslagen hebben.

UX-onderzoek

Rijclubs draaien op WhatsApp en geheugen. Dat werkt tot het niet meer werkt.

• Waar de frictie zat: een rit wordt aangekondigd in een groepschat, de deelnemerslijst is een reeks duimpjes die niemand kan tellen, de route is een link die vervalt, en achteraf verspreiden de foto's zich. De kennis die een club waardevol maakt — welke wegen goed zijn, welke gravel, welke een flitspaal hebben — zit in de hoofden van individuele rijders.
• Twee verschillende jobs: de clubkapitein die een event plant en runt, en het lid dat beslist of het komt opdagen. Ze hebben bijna tegengestelde interfaces nodig. De kapitein heeft rollen, wachtlijsten en deelnemerslijsten nodig; het lid heeft één duidelijk antwoord op "waar, wanneer, doe ik mee".
• Wat terugkomt veroorzaakt: niet de logistiek. Rijders komen terug voor status en herinnering — wat ze gereden hebben, hoe het zich verhoudt, wat de club vorig seizoen deed. Die bevinding leverde het paspoort op.
• Een gesloten deur doet ertoe: de club werkt op uitnodiging, en het product moest dat uitdragen in plaats van zich ervoor te verontschuldigen. Aanvragen worden nagekeken door een road captain voor iemand binnen kan.

UI-richting

• Donker, editorial, café-racer: diep bruin en zwart met een messing accent, opgebouwd uit de eigen esthetiek van de club in plaats van een generiek donker thema.
• Type als attitude: Oswald voor display en statistieken, Inter voor body. Condensed uppercase voor titels leest als een raceposter, en de cijfers in het klassement hebben gewicht.
• Geen UI-library: plain CSS met custom properties, per feature georganiseerd. Een componentkit zou een huisstijl hebben opgelegd, en de huisstijl ís het product hier.
• Stats als trofeeën: kilometers, ritten en streaks worden groot en trots weergegeven, want dat is waarvoor leden de app openen.

Kernfuncties

• Ritten en meetups: wekelijkse ritten, eventritten en rallies, met RSVP en een automatische wachtlijst wanneer een rit vol is. De organisatie wijst rijrollen toe — guía, cierre, marshal. Ritten exporteren naar een agenda als .ics, en na de rit verzamelen de verslagen fotogalerijen.
• Routenarchief: leden uploaden een GPX-track, die op een Mapbox-kaart verschijnt met een hoogteprofiel. Afstand en klim worden automatisch berekend. Routes kunnen beoordeeld worden, vastgepind met points of interest en gedownload.
• Community-garage: elke motor krijgt een profiel met foto's, aanpassingen en een kilometerstand, plus een onderhoudslog en terugkerende serviceherinneringen die afgaan op kilometers of op maanden — olie, ketting, keuring.
• Paspoort en ranking: tien stempels (Dawn Run, High Pass, Coastal, Night Ride, Rain Rider, 100km Day, Rally Rider, Solo Tour, Vintage, Legend) sturen vier rangen aan, van Novato over Trotamundos en Capitán de Ruta tot Leyenda. Klassementen dekken kilometers, aantal ritten en streaks, naast mijlpaalbadges en seizoenschallenges.
• Live op de baan: een lid kan uitzenden dat het aan het rijden is, en verschijnt dan realtime op een gedeelde kaart.
• Reacties en commentaren: live threads en emoji-reacties op elke rit, route en event.

Architectuur

Lidmaatschap is een state machine, afgedwongen in de database. Aanmelden kan enkel met een e-mailmagic link — geen wachtwoorden, want een club rijders heeft geen extra wachtwoord nodig om kwijt te raken. De eerste aanmelding maakt een profiel met status pending, en een road captain of admin keurt de aanvraag goed voor die persoon clubcontent ziet. Cruciaal: leden kunnen hun eigen status of role niet wijzigen. Een databasetrigger bewaakt die geprivilegieerde kolommen, dus de goedkeuringsflow kan niet omzeild worden vanuit de client. Gamificatie draait server-side. Stempels worden niet door de browser uitgedeeld. Een Supabase edge function herevalueert het paspoort van een lid na een ritlog, tegen de stapelcatalogus in de database. Als de toekenningslogica in de frontend zat, zou de ranking fictie zijn. Twintig migraties, één schema. Het schema, de row-level security policies, de stapelcatalogus, de realtime-configuratie en de storage-buckets zijn allemaal als migraties geversioneerd in plaats van in elkaar geklikt in een dashboard, zodat de backend reproduceerbaar is.

Gebruikte technologieën

• Frontend: React met Vite en React Router, geen UI-framework — plain CSS met custom properties, per feature georganiseerd.
• Backend: Supabase — Postgres met row-level security, magic-link-auth, realtime, storage en een edge function voor de paspoortevaluatie.
• Kaarten: Mapbox GL JS voor routeweergave, GPX-parsing en hoogteprofielen.
• Domeinlogica: aparte modules voor GPX, geografie, gamificatie, badges, challenges, onderhoudsplanning, ratings en agenda-export, buiten de componenten gehouden.
• Media: HEIC-conversie bij upload, want rijders fotograferen met iPhones.

Uitdagingen en lessen

Gamificatie is een vertrouwenssysteem. Een paspoort heeft alleen betekenis als het niet te manipuleren is, wat betekent dat de toekenningsregels ergens moeten staan waar het lid niet bij kan. Stempels evalueren in een edge function was geen performantiebeslissing, het was de beslissing die de feature de moeite waard maakte. Een gesloten community heeft een echte voordeur nodig. De landingspagina moet de club verkopen aan iemand die er nog niet in kan, en die persoon dan een aanvraag geven in plaats van een signup. Ontwerpen voor de niet-goedgekeurde bezoeker — die de belofte wel ziet maar de content niet — was een eigen probleem, en makkelijk te vergeten bij het bouwen van een product dat enkel voor leden is. HEIC brak meer dan ik verwachtte. Fotografie is centraal in een rijclub, rijders fotograferen met hun telefoon, en iPhone-foto's komen binnen in een formaat dat browsers niet weergeven. Converteren bij upload was ondankbaar en dragend.

Resultaat

Een club die vroeger op een groepschat draaide, heeft nu een plek waar ritten gepland worden met echte deelnemerslijsten, waar de routes die de moeite lonen gearchiveerd staan met hun hoogteprofiel en hun gravelwaarschuwingen, waar motoren een servicehistoriek hebben, en waar de kilometers die je gereden hebt vastliggen. De cultuur kwam eerst en de software schikte zich daarrond, en dat is de enige volgorde die werkt voor iets wat een club zelf moet willen openen.