01
Daily seed
Date hash generates today's unique challenge.
CASE STUDY · DAILY GAME
RailGuessr
RailGuessr is an interactive transit geography game designed for urban enthusiasts and commuters. Players must reconstruct specific metro segments by identifying intermediate stations between two endpoints across 16 lines. The project features a deterministic daily challenge system, PWA support, and a high-performance minimalist interface designed for mobile-first engagement.
reactcanvascssonline
THE PROBLEM
Transit fans and daily commuters lacked an engaging, low-friction way to test their knowledge of urban networks.
Built to explore deterministic client-side logic and high-retention gaming mechanics. RailGuessr targets a niche community of transit enthusiasts, providing a daily mental challenge that is synchronized globally without requiring any backend infrastructure.
- Transit fans have no daily challenge. Generic geography games ignore the detail and real topology of urban metro networks.
- Daily sync normally requires a backend. Keeping every global player on the same puzzle usually means a server and hosting cost.
- Metro topology is non-trivial. Branched lines like Line 7 and 13 can't be modeled as simple arrays.
Transit enthusiasts & commuters
Daily players who commute, urban enthusiasts who know their city's metro by heart
€0
hosting cost
400+
monthly active users
15%
PWA installs
THE SOLUTION
guess the station, beat the clock.
A purely client-side React application deployed via Cloudflare Pages. The metro network is modeled as a static adjacency list (Graph). The daily seed is derived from a hash of the current date, ensuring global sync. User statistics and streaks are managed via a custom StatsManager utility interacting with LocalStorage.
02
Play
Player enters intermediate stations to reconstruct the route.
03
Score
Fuzzy matching validates answers and updates the streak.
04
Share
One-click share drives organic community growth.
in progress
Before
fragmented tools · high manual overhead
After
single unified product · fast & automated
KEY FEATURES
Built around how transit enthusiasts & commuters actually work.
FEATURE 01
Deterministic Daily Challenge
A date-hash generates the same puzzle for every player globally — no backend required, no synchronization cost.
- Zero infrastructure cost for global daily sync
- Reproducible puzzles allow community discussion and hints
FEATURE 02
Graph-Based Pathfinding
The Paris Metro is modeled as a graph, enabling accurate route identification even on branched lines like 7, 10, and 13.
- Handles forked lines and shared track segments
- Validates all valid solution paths, not just one canonical answer
FEATURE 03
PWA & Offline Support
Full offline-first PWA support means players can open their daily challenge even underground in the metro itself.
- Service worker caches all game assets on first load
- Home-screen installable on iOS and Android
TECHNICAL CHALLENGE
Hard problems solved.
Graph traversal logic identifies unique paths on branched lines, while a custom normalizer strips special characters for fuzzy matching. The UI is built with Tailwind CSS and Framer Motion for sub-60fps fluid transitions. Monetization is integrated via Google AdSense with specific focus on maintaining core UX performance.
What made it hard
- Implementing a deterministic daily challenge system where every user globally gets the same puzzle based on a date-hash, with zero backend dependency.
- Handling the topological complexity of branched metro lines (Lines 7, 10, 13) using graph-based pathfinding to identify valid intermediate stations.
- Optimizing for 100% offline-first PWA support while maintaining high SEO visibility and AdSense performance for monetization.
- Building a 'fuzzy' input matching system that handles accents, casing, and varied nomenclature (e.g., 'Châtelet' vs 'Chatelet') to maximize accessibility.
architecture.ts
1 const frontend = [ "React", "Tailwind CSS", "Framer Motion" ];
2 const data = [ "Graph adjacency list", "LocalStorage (streaks)", "Static JSON" ];
3 const infra = [ "Cloudflare Pages", "Service Worker / PWA" ];
4 const monetization = [ "Google AdSense" ];
THE STACK
Technologies used.
Frontend
ReactTailwind CSSFramer Motion
Data
Graph adjacency listLocalStorage (streaks)Static JSON
Infra
Cloudflare PagesService Worker / PWA
Monetization
Google AdSense
WHAT THIS PROVES
What RailGuessr demonstrates.
Graph algorithms
Modeled a real-world transit network and wrote pathfinding logic on branched topologies.
Zero-backend architecture
Delivered a globally synchronized daily game with zero server cost using deterministic client-side hashing.
PWA engineering
Built an installable offline-capable game that achieves a 15% home-screen adoption rate.
Fuzzy matching
Engineered an accent-tolerant string normalizer for fair and accessible guessing across varied input.
WORK WITH ME
Want to build something like this?
Bring me your idea or half-built project. We'll scope it, design it and ship it — using the same workflow behind RailGuessr.