01
Graine quotidienne
Le hash de date génère le défi unique du jour.
ÉTUDE DE CAS · JEU QUOTIDIEN
RailGuessr
RailGuessr est un jeu de géographie des transports interactif conçu pour les passionnés d'urbanisme et les usagers du quotidien. Les joueurs doivent reconstituer des segments spécifiques du métro en identifiant les stations intermédiaires entre deux terminus sur 16 lignes. Le projet propose un système de défi quotidien déterministe, un support PWA, et une interface minimaliste et performante pensée pour un usage mobile-first.
reactcanvascssonline
LE PROBLÈME
Les passionnés de transports et les usagers quotidiens manquaient d'un moyen engageant et sans friction de tester leur connaissance des réseaux urbains.
Construit pour explorer la logique déterministe côté client et les mécaniques de jeu à forte rétention. RailGuessr cible une communauté de niche de passionnés de transports, en proposant un défi mental quotidien synchronisé mondialement sans nécessiter d'infrastructure backend.
- Les passionnés de transports n'ont aucun défi quotidien. Les jeux de géographie génériques ignorent le détail et la vraie topologie des réseaux de métro urbains.
- La synchronisation quotidienne nécessite normalement un backend. Garder chaque joueur dans le monde sur la même énigme implique généralement un serveur et un coût d'hébergement.
- La topologie du métro n'est pas triviale. Les lignes ramifiées comme les lignes 7 et 13 ne peuvent pas être modélisées comme de simples tableaux.
Passionnés de transports & usagers quotidiens
Joueurs quotidiens qui font la navette, passionnés d'urbanisme qui connaissent le métro de leur ville par cœur
0 €
coût d'hébergement
400+
utilisateurs actifs mensuels
15%
installations PWA
LA SOLUTION
devinez la station, battez le chrono.
Une application React purement côté client déployée via Cloudflare Pages. Le réseau de métro est modélisé comme une liste d'adjacence statique (graphe). La graine quotidienne est dérivée d'un hash de la date courante, garantissant une synchronisation mondiale. Les statistiques et séries utilisateur sont gérées via un utilitaire StatsManager sur mesure interagissant avec LocalStorage.
02
Jouer
Le joueur saisit les stations intermédiaires pour reconstituer le trajet.
03
Score
La correspondance floue valide les réponses et met à jour la série.
04
Partager
Le partage en un clic alimente la croissance communautaire organique.
Avant
outils fragmentés · forte charge manuelle
Après
produit unifié unique · rapide et automatisé
FONCTIONNALITÉS CLÉS
Conçu autour de la façon dont passionnés de transports & usagers quotidiens travaillent réellement.
FEATURE 01
Défi quotidien déterministe
Un hash de date génère la même énigme pour chaque joueur dans le monde — aucun backend requis, aucun coût de synchronisation.
- Coût d'infrastructure nul pour une synchronisation quotidienne mondiale
- Des énigmes reproductibles permettent la discussion communautaire et les indices
FEATURE 02
Pathfinding basé sur un graphe
Le métro parisien est modélisé comme un graphe, permettant une identification précise des trajets même sur des lignes ramifiées comme les 7, 10 et 13.
- Gère les lignes fourchues et les segments de voie partagés
- Valide tous les chemins de solution valides, pas seulement une réponse canonique
FEATURE 03
Support PWA & hors ligne
Un support PWA offline-first complet permet aux joueurs d'ouvrir leur défi quotidien même sous terre dans le métro lui-même.
- Le service worker met en cache tous les assets du jeu dès le premier chargement
- Installable sur l'écran d'accueil iOS et Android
DÉFI TECHNIQUE
Problèmes difficiles résolus.
La logique de parcours de graphe identifie les chemins uniques sur les lignes ramifiées, tandis qu'un normaliseur sur mesure retire les caractères spéciaux pour la correspondance floue. L'UI est construite avec Tailwind CSS et Framer Motion pour des transitions fluides à moins de 60 fps. La monétisation est intégrée via Google AdSense avec un focus particulier sur le maintien des performances UX principales.
Ce qui rendait la tâche difficile
- Implémenter un système de défi quotidien déterministe où chaque utilisateur dans le monde reçoit la même énigme basée sur un hash de date, sans aucune dépendance backend.
- Gérer la complexité topologique des lignes de métro ramifiées (lignes 7, 10, 13) en utilisant un pathfinding basé sur des graphes pour identifier les stations intermédiaires valides.
- Optimiser pour un support PWA 100 % offline-first tout en maintenant une bonne visibilité SEO et des performances AdSense pour la monétisation.
- Construire un système de correspondance de saisie « floue » gérant les accents, la casse et une nomenclature variée (ex. « Châtelet » vs « Chatelet ») pour maximiser l'accessibilité.
architecture.ts
1 const frontend = [ "React", "Tailwind CSS", "Framer Motion" ];
2 const données = [ "Liste d'adjacence de graphe", "LocalStorage (séries)", "JSON statique" ];
3 const infra = [ "Cloudflare Pages", "Service Worker / PWA" ];
4 const monétisation = [ "Google AdSense" ];
LA STACK
Technologies utilisées.
Frontend
ReactTailwind CSSFramer Motion
Données
Liste d'adjacence de grapheLocalStorage (séries)JSON statique
Infra
Cloudflare PagesService Worker / PWA
Monétisation
Google AdSense
CE QUE CELA PROUVE
Ce que RailGuessr démontre.
Algorithmes de graphes
Modélisé un réseau de transport réel et écrit une logique de pathfinding sur des topologies ramifiées.
Architecture sans backend
Livré un jeu quotidien synchronisé mondialement à coût serveur nul grâce au hachage déterministe côté client.
Ingénierie PWA
Construit un jeu installable et utilisable hors ligne atteignant un taux d'adoption écran d'accueil de 15 %.
Correspondance floue
Conçu un normaliseur de chaînes tolérant aux accents pour des devinettes justes et accessibles à travers des saisies variées.
TRAVAILLER ENSEMBLE
Envie de construire quelque chose comme ça ?
Apportez-moi votre idée ou projet à moitié construit. Je le cadre, le conçois et le livre — avec le même workflow que derrière RailGuessr.