DField Poker

Most browser poker products feel like an Excel sheet with cards. Built a browser poker engine. Real animated table, smooth play, chips slide naturally, works the same on phone and laptop.

• 01User surface

  The whole experience the user sees

  This frame shows the live product: a browser-based multiplayer poker room · animated cards, emotes, real-time table feel. Every component is ours · scope, design, code, deploy.

• 02Stack behind the screen

  What's powering it: Express, React, TypeScript

  4 stack components run behind this frame · Express, React, TypeScript drive the visible UI; the rest sit in the data layer. All studio-owned.

• 03What we shipped

  Real-time multiplayer tables

  A modern poker-room feel in the browser

• 04Status

  Private deploy · under NDA.

  Per the client's request the URL stays private · the build, architecture, and lessons can be shared in a scoping call.

• 01 · BRIEF

  What kills browser poker?

  Two failure modes: laggy real-time sync and 'feels like a spreadsheet'. Spec'd a Socket-driven sync layer + a React table with deliberate animation budget.

• 02 · ARCHITECTURE

  Stack decisions before any code.

  Decision doc captured the data flow, Express, React, TypeScript, JavaScript role split, and the failure modes we'd handle in v1 vs defer. Cross-service boundaries (where AI ends and the web app begins) were drawn here so neither side leaked into the other later.

• 02 · BUILD

  Express + Socket + React table.

  Express owns the game state, Socket pushes deltas to clients, React renders the table off the same model. AI scoring runs server-side and surfaces hints in casual rooms.

• 04 · POLISH

  Performance, accessibility, and observability.

  PSI / a11y / coverage budgets enforced as launch gates. Logging + metrics wired before cut-over · the team can answer 'is it working?' from a dashboard, not a Slack thread. Threat-model checklist signed off before traffic hits the box.

• 03 · SHIP

  Animated dealing + emotes + mobile parity.

  Mobile gets the same animation budget as desktop · table feel survives the smaller screen. Emotes carry tone without slowing the action.

• 01Sync

  Express + Socket state delta

  Server holds canonical state, deltas pushed to every seated client · zero-debate consistency.

• 02Table UI

  Animated dealing + bet flow

  60fps target on commodity hardware · the felt feels live, not lifeless.

• 03Emotes

  Table chat + emotes

  Tone moves around the table without slowing the action · a poker room, not a spreadsheet.

• 04AI

  Optional move scoring in casual rooms

  Hints surface for newer players · ranked rooms turn it off entirely.

• 
  01Frame

  Table · seated, 5-second hand countdown

  Two players seated (Guest-AAAL with dealer button, Guest-AAAJ) at 100,000 chips each, three empty seats waiting · the countdown text 'New hand starting in 5 seconds' synchronises every client without anyone having to click 'ready'.

• 
  02Frame

  Flop · 3 community cards + action buttons

  First three community cards (A♠ K♥ 10♣) lay across the felt, pot at 10,000. The action banner says 'Guest-AAAJ calls $2500.00'. Fold / Check / Call / Raise + a $500 stake slider sit on the bottom rail · the player decides without leaving the seat.

• 
  03Frame

  Turn · 4th card lands, pot grows to 11,000

  Fourth community card (9♣) joins the board · pot grows to 11,000 as 'Guest-AAAL calls $500.00'. Both players still in. The animation arc on the new card mirrors the dealing arc on the flop · zero-debate consistency.

• 
  04Frame

  River · final card, action passes to the next player

  Full board (A♠ K♥ 10♣ 9♣ 7♥) revealed · 'Guest-AAAJ checks' frees Guest-AAAL to act. The river is the highest-tension moment in poker; the table reads cleanly even at this density of cards + chip stacks + buttons.