ProjectsClusterClear Duel
01 / Project Details
LiveTurn-Based Multiplayer Puzzle
ClusterClear Duel
ClusterClear Duel was built as a modern 1v1 puzzle product rather than a simple game prototype. The experience combines low-friction entry, fast invite-based matchmaking, responsive gameplay, and a backend architecture designed to keep every move fair, reproducible, and recoverable.
RoleFull-stack Product Engineer
Duration3 weeks
ClientPersonal Project
Year2025
Project Summary
ClusterClear Duel is cluster-clearing gone multiplayer: instant duel creation, a shared 10×10 board, live chat, seamless reconnects, and match replay.
02 / Snapshot
10×10 shared board
Every match starts from a persisted seed and plays out on a shared deterministic board.
30-second turn timer
The server controls turn timing and can automatically issue a `PASS` when a player times out.
Deterministic replay
Completed matches can be reconstructed from the seed plus the ordered event log.
Social layer
Includes chat, friends, match history, profile management, and achievements.
03 / Overview
Built to feel fast to enter, fair to play, and trustworthy under pressure.
ClusterClear Duel is a multiplayer puzzle experience for players who want quick head-to-head sessions without the friction usually attached to competitive games. The product balances sharp UI, immediate onboarding, and a backend model strong enough to protect turn order, move validity, scoring, persistence, and replay accuracy.
Challenge
The core challenge was not just building a puzzle board. It was turning a deterministic ruleset into a believable multiplayer product. That required solving for realtime synchronization, validation, reconnect safety, replayability, authentication flexibility, and enough UX polish to make the game feel intentional instead of experimental.
Solution
I approached the project as both a systems problem and a product design problem. The solution pairs a React-based interface and Phaser-powered board rendering with a NestJS + Socket.IO backend, PostgreSQL persistence, Redis-backed matchmaking support, and a shared engine used across live gameplay, validation, and replay.
04 / Stack & Scope
What shipped
Tech Stack
ReactViteTypeScriptTailwind CSSPhaser 3NestJSSocket.IOPrismaPostgreSQLRedisZodZustandTanStack QueryPlaywrightTurborepoVercel + Railway
Team Context
Solo Full-stack Product Engineer
Deliverables
- Responsive landing and authenticated home experience
- Guest auth, email/password auth, and Google OAuth flow
- Invite-based and authenticated duel creation
- Match join by shareable link or pasted match ID
- Phaser-powered interactive puzzle board
- Server-authoritative move validation and turn enforcement
- Realtime chat, presence, forfeit, leave, and match-end handling
- Replay mode with playback controls and deterministic state reconstruction
- Profile page with editable display name and filtered match history
- Friends system with online/offline state and challenge flow
- Achievement system for gameplay and social milestones
- CI-gated deployment pipeline and live production rollout
Key Highlights
- Shared deterministic engine used by validation, gameplay logic, and replay reconstruction
- Authoritative backend that owns turn order, move legality, score updates, and event sequencing
- Reconnect-safe persistence via stored match snapshots instead of rebuilding everything from scratch on refresh
- Typed contracts across layers using shared schemas and Socket.IO event maps
- Tested critical flows including invalid move rejection, chat persistence, reconnect continuity, replay behavior, and server-driven auto-pass
05 / Process
From product framing to final polish.
Step 01
Framing the game loop
I started by defining the rules in a deterministic way: a shared 10×10 board, cluster-based selection, turn alternation, gravity, column shifting, score calculation, and a clear end condition. This created a stable gameplay contract that could be reused everywhere else in the stack.
Step 02
Building the shared engine
Instead of duplicating logic between frontend and backend, I centralized the rules inside a shared game-engine package. That decision became one of the strongest technical advantages of the project: the same logic drives validation, local board interaction, replay generation, and testing expectations.
Step 03
Wiring the authoritative realtime layer
The next step was building the multiplayer backbone. I used NestJS and Socket.IO to handle match join, move submission, chat, presence, forfeit, leave, and match-end events. PostgreSQL stores match state and event history, while Redis supports queue and realtime coordination. The backend remains the source of truth, so the client renders the game but does not own it.
Step 04
Polishing the player experience
With the core systems stable, I focused on product polish: invite flows, guest access, Google OAuth, friends, profile management, replay controls, better landing UX, modal history views, outcome messaging, and responsive navigation. The final layer was quality assurance and deployment: typed contracts, unit-tested shared logic, Playwright coverage, and a CI/CD path to production.
06 / Gallery
Selected product views
07 / Closing Notes
This project focused on making multiplayer puzzle gameplay feel intentional at every layer — not only in how the interface looked, but in how fairness, persistence, replayability, and player progression were engineered behind the scenes.
Product Thinking
The experience was shaped around low-friction entry, clear game-state communication, and features that increase replay value.
Systems Reliability
The backend enforces rules, stores ordered events, preserves state across refreshes, and supports replay without compromising trust.
Full-Stack Range
The project spans UI design, frontend engineering, realtime infrastructure, backend architecture, testing, and production deployment.
08 / Next Project