CASE STUDY · WEB PRODUCT

Chuhe Xiangqi
Online Chinese Chess

A browser game that grew into a cross-device product with room state, APIs, database persistence and multiple play modes.

Live Demo ↗GitHub ↗
Role
Full-stack web product development
Scope
Game rules · multiplayer rooms · state sync · persistence
Status
Live
Stack
JavaScript · HTTP API · Neon Postgres / D1
Year
2026

00 / Project framing

Project framing and engineering decisions

ProblemA multiplayer board game must prevent stale cross-device state from overwriting newer moves while handling reconnects and room lifecycle.
DecisionUse revision-based polling, player tokens, heartbeats and persisted room state to separate UI rules from multiplayer synchronization.
EvidenceVerified features include 6-digit rooms, 2 primary rule modes, Neon Postgres / Cloudflare D1 backends and a public live demo.
NextNext: extract a shared game engine, add automated rule tests and make the server authoritative for game rules.

01 / Verified metrics

6digit room codes
2main rule modes: standard / Jieqi
2main APIs: rooms / change-side
2DB backends: Neon Postgres / Cloudflare D1

The repository also documents AI play, undo confirmation, replay, sandbox mode, heartbeat throttling and cleanup for rooms inactive over seven days.

02 / Architecture

Browser UIboard, rules, replay and variants
HTTP APIrooms and change-side
Revision Syncpolling, player token, heartbeat
PersistenceNeon Postgres or Cloudflare D1

03 / Engineering

ConcurrencyRevision checks prevent stale clients from overwriting newer game state.
ReconnectA player token in LocalStorage lets a browser reclaim its seat.
VariantsThe same UI supports standard Xiangqi, Jieqi, sandbox and custom positions.
PersistenceRoom state includes game JSON, revision, heartbeat, undo request and timestamps.

04 / Product

LIVE PRODUCT · MULTIPLAYER WEB

From a standalone board to a complete web product.

The original brand artwork stays intact, but the visual is now framed as a product showcase with tighter proportions so it supports the engineering story instead of overpowering it.

chuhe xiangqi · web product
Chuhe Xiangqi product interface
The current Chuhe Xiangqi product visual. The case study focuses on multiplayer synchronization, reconnects and persistence rather than presenting the artwork itself as engineering evidence.

The README also records the next engineering step: extract a shared game engine, add automated rule tests and make the server authoritative for rules.