Live Casino Platform
Enterprise Live Casino with Real-Time Betting (NDA)
React 18 client consuming a 953-file TypeScript engine library via three-level Inversify DI (Root → Session → Game containers). MobX observable stores for reactive state, RxJS event streams for game lifecycle orchestration, and gRPC-Web streaming for bi-directional server communication. 505-component design system with Pixi.js WebGL rendering, Konva canvas interactions, and SCSS modules with auto-generated types.
Key Features
- 953-file TypeScript engine consumed as library by React 18 client
- Three-level Inversify DI containers with IOCModuleDescriptor auto-instantiation pattern
- MobX 6 observable stores (@observable, @action, @computed) for reactive betting state
- RxJS game lifecycle streams: initRound$ → bettingFinished$ → gameRoundFinished$ → resultCleared$
- 505-component design system: atoms/molecules/organisms with SCSS modules and generated CSS types
- Pixi.js 8 WebGL + Konva canvas + Framer Motion + GSAP for multi-layer game animations
Tech Stack
Frontend
Architecture
Graphics
Design System
Challenges & Solutions
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.
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.
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.