Projects
Tierra Libre — A digital clubhouse for a motorcycle brotherhood
- Where the friction was: a ride gets announced in a group chat, the attendance list is a series of thumbs-up emoji nobody can count, the route is a link that expires, and the photos scatter afterwards. The knowledge that makes a club valuable — which roads are good, which are gravel, which have a radar trap — lives in individual riders' heads.
- Two distinct jobs: the club captain planning and running an event, and the member deciding whether to show up. They need almost opposite interfaces. The captain needs roles, waitlists and rosters; the member needs one clear answer to "where, when, am I in".
- What motivates return visits: not logistics. Riders come back for status and memory — what they have ridden, how it compares, what the club did last season. That finding produced the passport.
- A closed door matters: the club is by invitation, and the product had to express that rather than apologise for it. Applications are reviewed by a road captain before anyone gets in.
- Dark, editorial, café-racer: deep browns and blacks with a brass accent, built from the club's own aesthetic rather than a generic dark theme.
- Type as attitude: Oswald for display and statistics, Inter for body. Condensed uppercase for headings reads like a race poster, and the numbers in the leaderboard carry weight.
- No UI library: plain CSS with custom properties, organised per feature. A component kit would have imposed a house style, and the house style is the product here.
- Stats as trophies: kilometres, rides and streaks are rendered large and proudly, because that is what members open the app to see.
- Rides and meetups: weekly rides, event rides and rallies, with RSVP and an automatic waitlist when a ride fills. Staff assign riding roles — guía, cierre, marshal. Rides export to a calendar as
.ics, and post-ride reports collect photo galleries.
- Route archive: members upload a GPX track, which renders on a Mapbox map with an elevation profile. Distance and climb are computed automatically. Routes can be rated, pinned with points of interest, and downloaded.
- Community garage: every bike gets a profile with photos, modifications and an odometer, plus a maintenance log and recurring service reminders that fire by kilometres or by months — oil, chain, inspection.
- Passport and ranking: ten stamps (Dawn Run, High Pass, Coastal, Night Ride, Rain Rider, 100km Day, Rally Rider, Solo Tour, Vintage, Legend) drive four ranks from Novato through Trotamundos and Capitán de Ruta to Leyenda. Leaderboards cover kilometres, ride count and streaks, alongside milestone badges and seasonal challenges.
- Live on the road: a member can broadcast that they are riding, and appear in real time on a shared map.
- Comments and reactions: live threads and emoji reactions on every ride, route and event.
Membership is a state machine, enforced in the database. Sign-in is email magic-link only — no passwords, because a club of riders does not need another password to lose. First sign-in creates a profile with status pending, and a road captain or admin approves the application before that person sees club content. Crucially, members cannot edit their own status or role: a database trigger guards those privileged columns, so the approval flow cannot be bypassed from the client.
Gamification runs server-side. Stamps are not awarded by the browser. A Supabase edge function re-evaluates a member's passport after a ride log, against the stamp catalogue held in the database. If the award logic lived in the frontend, the ranking would be fiction.
Twenty migrations, one schema. The schema, row-level security policies, stamp catalogue, realtime configuration and storage buckets are all versioned as migrations rather than clicked together in a dashboard, so the backend is reproducible.
- Frontend: React with Vite and React Router, no UI framework — plain CSS with custom properties, organised per feature.
- Backend: Supabase — Postgres with row-level security, magic-link auth, realtime, storage, and an edge function for passport evaluation.
- Maps: Mapbox GL JS for route rendering, GPX parsing and elevation profiles.
- Domain logic: dedicated modules for GPX, geography, gamification, badges, challenges, maintenance scheduling, ratings and calendar export, kept out of the components.
- Media: HEIC conversion on upload, because riders shoot on iPhones.
Gamification is a trust system. A passport only has meaning if it cannot be gamed, which means the award rules have to live somewhere the member cannot reach. Moving stamp evaluation into an edge function was not a performance decision, it was the decision that made the feature worth having.
A closed community needs a real front door. The landing page has to sell the club to someone who cannot get in yet, and then hand them an application rather than a signup. Designing for the un-approved visitor — who sees the promise but not the content — was its own problem, and easy to forget when building a members-only product.
HEIC broke more than I expected. Photography is central to a riding club, riders shoot on phones, and iPhone photos arrive in a format browsers will not render. Converting on upload was unglamorous and load-bearing.
A club that used to run on a group chat now has a place where rides are planned with real rosters, where the routes worth riding are archived with their elevation and their gravel warnings, where bikes have service histories, and where the kilometres you have ridden are on record. The culture came first and the software fitted itself around it, which is the only order that works for something a club has to want to open.