Proyectos
Tierra Libre — La casa digital de una hermandad motera
- Dónde estaba la fricción: se anuncia una rodada en el grupo, la lista de asistencia es una serie de pulgares arriba que nadie puede contar, la ruta es un enlace que caduca y las fotos se dispersan después. El conocimiento que hace valioso a un club —qué carreteras son buenas, cuáles tienen lastre, cuáles tienen radar— vive en la cabeza de cada piloto.
- Dos tareas distintas: el capitán planificando un evento y el miembro decidiendo si va. Necesitan interfaces casi opuestas. El capitán necesita roles, listas de espera y nóminas; el miembro necesita una respuesta clara a «dónde, cuándo, estoy dentro».
- Qué motiva volver: no es la logística. Los pilotos vuelven por estatus y memoria: qué han rodado, cómo se compara, qué hizo el club la temporada pasada. Ese hallazgo produjo el pasaporte.
- Una puerta cerrada importa: el club es por invitación, y el producto tenía que expresarlo en vez de disculparse por ello. Un capitán de ruta revisa cada solicitud antes de que alguien entre.
- Oscuro, editorial, café racer: marrones profundos y negros con un acento latón, construidos desde la estética del club y no desde un tema oscuro genérico.
- Tipografía como actitud: Oswald para display y estadísticas, Inter para el cuerpo. Las mayúsculas condensadas en los títulos se leen como un cartel de carrera, y los números del ranking pesan.
- Sin librería de UI: CSS plano con propiedades personalizadas, organizado por función. Un kit de componentes habría impuesto un estilo de casa, y aquí el estilo de la casa es el producto.
- Las estadísticas como trofeos: kilómetros, rodadas y rachas se muestran en grande y con orgullo, porque es lo que los miembros abren la app para ver.
- Rodadas y quedadas: salidas semanales, de evento y rallies, con inscripción y lista de espera automática cuando se llena. El staff asigna roles de rodada —guía, cierre, marshal—. Las salidas se exportan al calendario en
.ics y las crónicas posteriores recogen galerías de fotos.
- Archivo de rutas: los miembros suben un trazado GPX que se dibuja sobre un mapa de Mapbox con su perfil de altimetría. La distancia y el desnivel se calculan solos. Las rutas se puntúan, se marcan con puntos de interés y se descargan.
- Garaje comunitario: cada moto tiene ficha con fotos, modificaciones y kilometraje, más un historial de mantenimiento y recordatorios recurrentes que avisan por kilómetros o por meses: aceite, cadena, revisión.
- Pasaporte y ranking: diez sellos (Dawn Run, High Pass, Coastal, Night Ride, Rain Rider, 100km Day, Rally Rider, Solo Tour, Vintage, Legend) impulsan cuatro rangos, de Novato a Trotamundos, Capitán de Ruta y Leyenda. Los rankings cubren kilómetros, número de salidas y rachas, junto a insignias de hitos y desafíos de temporada.
- En directo, en la carretera: un miembro puede avisar que está rodando y aparecer en tiempo real en un mapa compartido.
- Comentarios y reacciones: hilos en vivo y reacciones con emoji en cada rodada, ruta y evento.
La membresía es una máquina de estados, forzada en la base de datos. El acceso es solo por enlace mágico al correo —sin contraseñas, porque un club de moteros no necesita otra contraseña que perder—. El primer ingreso crea un perfil con estado pending, y un capitán de ruta o admin aprueba la solicitud antes de que esa persona vea contenido del club. Lo importante: los miembros no pueden editar su propio status ni role; un trigger de base de datos protege esas columnas, así que el flujo de aprobación no se puede saltar desde el cliente.
La gamificación corre en el servidor. Los sellos no los otorga el navegador. Una edge function de Supabase reevalúa el pasaporte de un miembro tras registrar una rodada, contra el catálogo de sellos guardado en la base. Si la lógica de premios viviera en el frontend, el ranking sería ficción.
Veinte migraciones, un esquema. El esquema, las políticas de seguridad por fila, el catálogo de sellos, la configuración de tiempo real y los buckets de almacenamiento están versionados como migraciones en vez de armados a clics en un panel, así que el backend es reproducible.
- Frontend: React con Vite y React Router, sin framework de UI — CSS plano con propiedades personalizadas, organizado por función.
- Backend: Supabase — Postgres con seguridad a nivel de fila, autenticación por enlace mágico, tiempo real, almacenamiento y una edge function para evaluar el pasaporte.
- Mapas: Mapbox GL JS para dibujar rutas, parseo de GPX y perfiles de altimetría.
- Lógica de dominio: módulos dedicados para GPX, geografía, gamificación, insignias, desafíos, mantenimiento, puntuaciones y exportación de calendario, fuera de los componentes.
- Multimedia: conversión de HEIC al subir, porque los pilotos disparan con iPhone.
La gamificación es un sistema de confianza. Un pasaporte solo tiene sentido si no se puede manipular, lo que obliga a que las reglas de premio vivan donde el miembro no llega. Mover la evaluación de sellos a una edge function no fue una decisión de rendimiento, fue la decisión que hizo que la función valiera la pena.
Una comunidad cerrada necesita una puerta real. La landing tiene que venderle el club a alguien que todavía no puede entrar, y luego entregarle una solicitud en lugar de un registro. Diseñar para el visitante no aprobado —que ve la promesa pero no el contenido— fue un problema aparte, y fácil de olvidar al construir un producto solo para miembros.
HEIC rompió más de lo que esperaba. La fotografía es central en un club motero, los pilotos disparan con el teléfono, y las fotos de iPhone llegan en un formato que los navegadores no dibujan. Convertirlas al subir fue poco glamoroso y decisivo.
Un club que antes funcionaba en un grupo de chat ahora tiene un lugar donde las rodadas se planifican con nóminas reales, donde las rutas que valen la pena quedan archivadas con su desnivel y sus avisos de lastre, donde las motos tienen historial de servicio, y donde los kilómetros que has rodado están registrados. La cultura fue primero y el software se acomodó alrededor, que es el único orden que funciona para algo que un club tiene que querer abrir.