WordShot

Problem Statement

Real-time multiplayer games are unforgiving on the web: a flaky mobile connection drops a player mid-round, WebSocket state desyncs, and the game either stalls for everyone or boots the player out. Building "Scattergories meets speed-typing" as a competitive, real-time web game means solving fast answer validation, fair scoring, and — hardest of all — graceful recovery when networks misbehave.

Proposed Solution

WordShot is a fast-paced word game: a random letter (A–Z) appears and players race a 20–30s timer to fill categories (Name, Place, Animal, Food, …) with valid words starting with that letter. It ships single-player (instant, no login, resumable) and multiplayer (2–8 players, room codes, real-time chat, spectate, host controls) modes — backed by a dictionary of 100,000+ words across 13 categories and a scoring engine that rewards validity, rarity, and speed.

Full Solution Details

• Gameplay loop — random letter → categories → validate against dictionary → score by validity/rarity/speed → round breakdown → final leaderboard.
• Multiplayer — 6-character room codes, host configuration/start-stop, role-based access (host vs player), real-time chat, spectator mode.
• Session recovery — automatic reconnection that restores a player into an in-progress game (98% recovery on mobile).
• Gamification — 24+ tracked metrics and game-history.

Technical Documentation

Frontend — React 18 + TypeScript 5.6 + Vite 6, Socket.IO client, Framer Motion, react-confetti, and the author's Meemaw library. Feature-Sliced Design where each mode (game single-player, multiplayer) owns its full stack (api/, providers/, screen/, types/, constants/, routes), with shared/services housing singletons (Cache, Sound). Multiplayer keeps a dedicated WebSocket context provider, and role encoding lives in multiplayer/utils.

Backend — Node 18 + TypeScript + Express in a three-layer architecture, MongoDB/Mongoose, Socket.IO for real-time, NodeCache with five distinct caching patterns, JWT + bcrypt, express-validator, Winston. The README documents a real performance-optimization journey with measured wins: game start ~300ms → <10ms (97% faster), answer validation ~150ms → <5ms (97% faster), 5× API throughput, 35% memory reduction, and game-init failures from ~2% → 0%. It also dissects specific engineering problems — the "letter selection problem," the answer-validation engine over a 100K-word set, and the real-time multiplayer sync system.

Tech Stack

React 18, TypeScript 5.6, Vite 6, Socket.IO, Framer Motion, react-confetti, Meemaw, Tailwind CSS (frontend); Node.js 18, Express, TypeScript, MongoDB/Mongoose, Socket.IO, NodeCache, JWT, bcrypt, Winston (backend).

System Design

  Player (mobile/web) ──Socket.IO──┐
                                   ▼
        ┌──────────── Multiplayer Room (6-char code) ────────────┐
        │  host controls · chat · spectate · role-based access   │
        └───────────────────────────┬────────────────────────────┘
                                     ▼
   Three-layer backend:  routes → services → data (Mongoose)
        │  letter selection · answer validation (<5ms)           
        │  scoring (validity + rarity + speed)                    
        ▼
   NodeCache (5 patterns) ◄──► MongoDB (100K words, 13 categories,
                                          users, games, stats)
        ▲
   Reconnect/session-recovery layer ── restores in-progress game (98% mobile)

Smart Architectural Decisions

• Three-layer session recovery is the crown jewel. Reconnection logic restores a dropped player into a live, timed, multiplayer round — the hardest problem in real-time web games — at 98% success on mobile.
• Cache everything hot. Five distinct NodeCache patterns turned a 300ms game start into <10ms and 150ms validation into <5ms, plus 5× throughput — the README treats performance as a documented, measured journey, not an afterthought.
• FSD by game mode, with each mode owning its WebSocket providers and state, keeps single-player and multiplayer cleanly isolated despite sharing a backend.
• Scoring on validity + rarity + speed makes the game feel fair and skillful rather than just fast-typing.

Impacts

A live, production multiplayer game: 400 active users, 10,000+ games played, 98% mobile session recovery, and a backend with documented 97% latency reductions and zero game-init failures.

Demonstrated Skills

Real-time systems (Socket.IO rooms, reconnection/state recovery); performance engineering with measured before/after metrics and layered caching; dictionary-scale validation (100K words); three-layer backend architecture; React 18 + FSD with isolated WebSocket contexts; gamification/scoring design; production deployment and analytics.