How it’s built
The tech, decisions, and standards behind Rummy Score Tracker
A look under the hood: the libraries we lean on, the practices we hold ourselves to, and the architectural calls that shaped this app.
Stack
Tech we build with
Framework & Runtime
- Next.jsv15
App Router with a catch-all route for instant client-side navigation.
- Reactv18
Hooks-only, concurrent-ready function components.
Language & Types
- TypeScriptv5
Strict mode end-to-end. Domain modelled with discriminated unions and exhaustive switches.
Styling
- Tailwind CSSv3
Token-driven design system with motion tokens, brand palette, and custom easings.
- PostCSS + Autoprefixer
Vendor-prefixing pipeline.
Graphics & Motion
- WebGL
Hand-written shaders for the aurora background — FBM noise, spark cycle, custom palette.
- OGLv1
Tiny WebGL helper for the ambient canvas burst layer.
- Framer Motionv12
Choreographed UI transitions that respect reduced-motion.
Testing
- Vitestv4
144 unit tests across game logic, scoring rules, persistence, and UI helpers.
- Playwright
End-to-end regression suite for refresh survival and game flow.
- jsdom
Browser-like environment for component-adjacent tests.
- Coverage (V8)
Coverage reports wired into CI scripts.
Quality & Tooling
- ESLintv8
Next.js + TypeScript ruleset, no warnings tolerated.
- Lighthouse CI
Performance and accessibility budgets tracked between releases.
Practices
How we work
The standards we apply to every change. Quality is not a phase — it is the working method.
Test-Driven Development
Every behaviour change starts with a failing test. The suite covers scoring rules, dealer rotation, elimination, persistence, and refresh survival — so refactors stay fearless.
Behaviour-Driven Tests
Tests describe outcomes, not implementation. Factories build domain objects so specs stay readable and resistant to incidental change.
Type-Driven Domain Modelling
Game state, events, and rules are encoded as exhaustively-checked discriminated unions. Illegal states are unrepresentable.
Capability-Aware Animation
The ambient WebGL layer respects prefers-reduced-motion, prefers-reduced-data, document visibility, and low-end device heuristics. No GPU work for users who do not want it.
Privacy by Default
No accounts, no server, no user database. Game state lives in your browser — analytics are aggregate-only.
Bundle Budget Discipline
New visual layers are gated by an explicit ≤ 30 kB gzipped delta budget. Performance is a constraint, not an afterthought.
Small Safe Steps
Work is sliced into 1–3 hour increments using the expand-contract pattern. Every commit leaves the app shippable.
XP & Lean Philosophy
Optimised for learning and adaptation over prediction. Small batches, fast feedback, sustainable pace.
Architecture
Decisions worth highlighting
- 01
Single-page app on Next.js catch-all
A single [[...slug]] route hosts every game screen. Routing happens client-side for snappy transitions while still giving each page proper SEO, canonical URLs, and Open Graph metadata.
- 02
Reducer-based game state
All state mutations flow through a typed reducer with named events (ADD_ROUND, TOGGLE_ELIMINATION, CHANGE_DEALER, …). Pure, testable, and trivially time-travel-able.
- 03
LocalStorage with cache busting
Game state is persisted locally with a versioned schema. A cache-busting orchestrator detects stale state on deploy and migrates or resets safely without surprising the user.
- 04
Module-level event bus for bursts
Ambient celebration bursts are emitted from game logic via a tiny module-level singleton. No React Context, no provider tree pollution — just a function call from the reducer touchpoint.
- 05
Hand-written aurora shader
The scoreboard background is a fragment shader: layered FBM noise, a 22-second spark cycle, deep-navy → emerald → persimmon palette. Ported from the Wrume hero, unified across the studio.
- 06
Progressive enhancement, not feature flags
Animations, ads, and graphics enhance the experience but are never load-bearing. The core game works on minimal hardware with motion off.
Built by Wrume
Care over cleverness. Tests over hope. Privacy over data.
If this is the kind of work you appreciate, you can find more of it at wrume.com.