01
Secure identity
httpOnly sessions, protected user flows, avatar uploads, and validation at trust boundaries.
Back to selected work
01Product case study · Real-time systems
Real-time play, engineered end to end.
XO Arena is a modular, type-safe Tic-Tac-Toe product built around secure identity, server-authoritative matches, live matchmaking, persistent profiles, and installable mobile behavior.
Complete local product · Recorded walkthrough
System map · 02
A small game with production-shaped systems.
The board is deliberately simple. The engineering around it handles the harder product concerns: identity, concurrency, authority, persistence, responsive delivery, and clear feedback.
02
Live rooms
Socket.IO matchmaking and room events keep both players synchronized through every turn.
03
Authoritative play
A shared, type-safe game engine supports server-validated moves and dependable match state.
04
Adaptive opponents
Four computer difficulty modes turn the same game model into progressively stronger challenges.
05
Installable client
Responsive, touch-friendly PWA behavior keeps the complete product usable on mobile surfaces.
06
Persistent history
Prisma and MySQL retain profiles, match outcomes, move counts, and recent activity.
Next.jsTypeScriptExpressSocket.IOPrismaMySQLZodPWA
Product surfaces · 03
The complete flow, captured in context.
Each image is served as a compact WebP and loaded only as it approaches the viewport. The frames document the real local product rather than a reconstructed mockup.
Product entry
A theme-aware landing experience explains the game and establishes auth, multiplayer, PWA, and design-system signals before entry.
Matchmaking lobby
Players can choose four computer difficulties, enter quick matchmaking, or create an online room from one responsive surface.
Authoritative game room
The match view combines board state, player identity, replay actions, outcome messaging, and an auditable turn-by-turn move log.
Persistent player history
Profile editing and recent match history make identity and persistence visible, including mode, opponent, outcome, and move count.
Deployment note · 04
Why this is a case study—not a temporary demo.
XO Arena’s complete experience depends on persistent services: secure sessions, an application server, Socket.IO rooms, a relational database, and uploaded-media storage. Rather than publish a partially provisioned build that misrepresents the product, this page documents the complete local system through its actual recorded flows and product captures.
The implementation is shaped for deployment; the presentation is intentionally honest about the infrastructure a reliable real-time product requires.