01
Semilla diaria
El hash de fecha genera el desafío único de hoy.
CASO DE ESTUDIO · JUEGO DIARIO
RailGuessr
RailGuessr es un juego interactivo de geografía del transporte diseñado para entusiastas urbanos y viajeros habituales. Los jugadores deben reconstruir segmentos específicos del metro identificando las estaciones intermedias entre dos extremos a través de 16 líneas. El proyecto presenta un sistema de desafío diario determinista, soporte PWA, y una interfaz minimalista de alto rendimiento diseñada para un compromiso mobile-first.
reactcanvascssonline
EL PROBLEMA
Los aficionados al transporte y los viajeros diarios carecían de una forma atractiva y sin fricción de poner a prueba su conocimiento de las redes urbanas.
Construido para explorar la lógica determinista del lado del cliente y las mecánicas de juego de alta retención. RailGuessr se dirige a una comunidad nicho de entusiastas del transporte, ofreciendo un desafío mental diario sincronizado globalmente sin requerir ninguna infraestructura de backend.
- Los aficionados al transporte no tienen desafío diario. Los juegos de geografía genéricos ignoran el detalle y la topología real de las redes de metro urbanas.
- La sincronización diaria normalmente requiere un backend. Mantener a todos los jugadores globales en el mismo rompecabezas normalmente implica un servidor y un coste de hosting.
- La topología del metro no es trivial. Las líneas ramificadas como la 7 y la 13 no pueden modelarse como simples arrays.
Entusiastas del transporte y viajeros habituales
Jugadores diarios que viajan al trabajo, entusiastas urbanos que conocen el metro de su ciudad de memoria
0 €
coste de hosting
400+
usuarios activos mensuales
15%
instalaciones PWA
LA SOLUCIÓN
adivina la estación, vence el reloj.
Una aplicación React puramente del lado del cliente desplegada vía Cloudflare Pages. La red de metro se modela como una lista de adyacencia estática (grafo). La semilla diaria se deriva de un hash de la fecha actual, garantizando la sincronización global. Las estadísticas y rachas del usuario se gestionan mediante una utilidad StatsManager a medida que interactúa con LocalStorage.
02
Jugar
El jugador introduce las estaciones intermedias para reconstruir la ruta.
03
Puntuar
La coincidencia difusa valida las respuestas y actualiza la racha.
04
Compartir
Compartir con un clic impulsa el crecimiento orgánico de la comunidad.
Antes
herramientas fragmentadas · alta carga manual
Después
producto único unificado · rápido y automatizado
FUNCIONALIDADES CLAVE
Construido en torno a cómo trabaja realmente entusiastas del transporte y viajeros habituales.
FEATURE 01
Desafío diario determinista
Un hash de fecha genera el mismo rompecabezas para cada jugador globalmente — sin backend requerido, sin coste de sincronización.
- Coste de infraestructura cero para sincronización diaria global
- Rompecabezas reproducibles permiten discusión comunitaria y pistas
FEATURE 02
Búsqueda de caminos basada en grafos
El Metro de París se modela como un grafo, permitiendo una identificación precisa de rutas incluso en líneas ramificadas como la 7, 10 y 13.
- Gestiona líneas bifurcadas y segmentos de vía compartidos
- Valida todos los caminos de solución válidos, no solo una respuesta canónica
FEATURE 03
Soporte PWA y sin conexión
El soporte PWA offline-first completo significa que los jugadores pueden abrir su desafío diario incluso bajo tierra en el propio metro.
- El service worker cachea todos los recursos del juego en la primera carga
- Instalable en la pantalla de inicio en iOS y Android
DESAFÍO TÉCNICO
Problemas difíciles resueltos.
La lógica de recorrido de grafos identifica caminos únicos en líneas ramificadas, mientras que un normalizador a medida elimina caracteres especiales para la coincidencia difusa. La UI está construida con Tailwind CSS y Framer Motion para transiciones fluidas por debajo de 60fps. La monetización se integra vía Google AdSense con un enfoque específico en mantener el rendimiento central de la UX.
Qué lo hizo difícil
- Implementar un sistema de desafío diario determinista donde cada usuario en el mundo recibe el mismo rompecabezas basado en un hash de fecha, sin dependencia de backend.
- Gestionar la complejidad topológica de las líneas de metro ramificadas (líneas 7, 10, 13) usando búsqueda de caminos basada en grafos para identificar estaciones intermedias válidas.
- Optimizar para un soporte PWA 100% offline-first mientras se mantiene una alta visibilidad SEO y rendimiento de AdSense para la monetización.
- Construir un sistema de coincidencia de entrada 'difusa' que maneje acentos, mayúsculas/minúsculas, y nomenclatura variada (p. ej., 'Châtelet' vs 'Chatelet') para maximizar la accesibilidad.
architecture.ts
1 const frontend = [ "React", "Tailwind CSS", "Framer Motion" ];
2 const datos = [ "Lista de adyacencia de grafo", "LocalStorage (rachas)", "JSON estático" ];
3 const infra = [ "Cloudflare Pages", "Service Worker / PWA" ];
4 const monetización = [ "Google AdSense" ];
EL STACK
Tecnologías utilizadas.
Frontend
ReactTailwind CSSFramer Motion
Datos
Lista de adyacencia de grafoLocalStorage (rachas)JSON estático
Infra
Cloudflare PagesService Worker / PWA
Monetización
Google AdSense
LO QUE ESTO DEMUESTRA
Lo que RailGuessr demuestra.
Algoritmos de grafos
Modelada una red de transporte del mundo real y escrita lógica de búsqueda de caminos en topologías ramificadas.
Arquitectura sin backend
Entregado un juego diario sincronizado globalmente con coste de servidor cero usando hashing determinista del lado del cliente.
Ingeniería PWA
Construido un juego instalable y utilizable sin conexión que alcanza una tasa de adopción de pantalla de inicio del 15%.
Coincidencia difusa
Diseñado un normalizador de cadenas tolerante a acentos para adivinanzas justas y accesibles a través de entradas variadas.
TRABAJEMOS JUNTOS
¿Quieres construir algo así?
Tráeme tu idea o proyecto a medio construir. Lo defino, lo diseño y lo entrego — usando el mismo flujo de trabajo detrás de RailGuessr.