Live Casino Platform
Enterprise Live Casino with Real-Time Betting (NDA)
Enterprise-grade live casino gaming platform with 20+ games, real-time betting via gRPC-Web streaming, and a 505-component design system. Three codebases: 953-file TypeScript business logic engine with Inversify DI, React 18 client with MobX + RxJS reactive state, and Storybook-documented component library with Pixi.js/Konva graphics rendering.
Key Features
- Three-level Inversify DI: RootContainer → SessionContainer → GameContainer with auto-instantiation
- gRPC-Web bi-directional streaming for live table state and bet placement via Protocol Buffers
- MobX observable stores + RxJS event streams for reactive game lifecycle orchestration
- 505-component design system with 379 Storybook stories across live, first-person, and lobby UI
- Pixi.js 8 WebGL rendering + Konva canvas for graphics-heavy game interactions
- Optimistic betting with real-time balance deduction, server reconciliation, and rejection rollback
Tech Stack
Frontend
Architecture
Graphics
Design System
Challenges & Solutions
Optimistic Betting with State Consistency
Server round-trips of 100-500ms would feel sluggish for real-time betting — but optimistic updates create race conditions where responses could reference different game rounds, causing balance inconsistencies.
Multi-layer bet synchronization with explicit round context in every server response. Balance deducted immediately on bet placement, reconciled on server confirmation, restored on rejection. MobX computed properties automatically derive UI state from the latest consistent snapshot.
Three-Level DI Container Lifecycle
20+ games share common infrastructure (auth, player, money) but each has unique stores and services — managing instantiation, disposal, and memory cleanup across game switches was complex.
Inversify DI hierarchy: RootContainer (app-level singletons), SessionContainer (auth/player), GameContainer (per-game stores). IOCModuleDescriptor pattern with autoInstantiate array. Container disposal on game exit prevents memory leaks — each level cleanly unbinds its services.
gRPC Streaming Resilience
Live dealer games require continuous bi-directional gRPC streams — network interruptions would lose game state and disconnect players mid-round.
RxJS-based auto-reconnect with state preservation: streams automatically re-establish on disconnect, replay missed events, and reconcile with current server state. Error logging to Kibana for monitoring stream health across thousands of concurrent players.