Warehouse Jiu Jitsu app
A mobile application for warehouse jiu-jitsu betting with fake credits
Overview
Warehouse Jiu Jitsu is a real-time betting and match companion app built for streamers and communities who want a polished, low-friction way to run live wagers on ongoing matches. Instead of juggling chat commands, spreadsheets, and manual payouts, it gives you a structured, interactive UI where viewers can place bets, track odds, and see results the moment a winner is declared.
The core experience lives in a responsive betting panel that updates live via WebSockets: contenders, odds, total pool sizes, and user balances all stay in sync without page reloads. The goal was to feel more like a native overlay or sportsbook widget than a traditional website.
My role & scope
I owned the full vertical slice of the betting experience: from the real‑time data model and Socket.IO events to the React UI and UX details around loading states, confirmations, and error handling.
Concretely, this included:
- Designing the betting flow and state machine (idle → placing → confirmed → settled).
- Implementing the Betting client component, including optimistic UI, confetti/winner visuals, and skeleton states.
- Wiring the front end to the Socket.IO layer for live game state, user info, and bet submission.
- Coordinating with the backend schema and endpoints for matches, users, and bets to keep UI state consistent with the database.
Under the hood
- Next.js (App Router) + React for the main application shell and betting UI, using client components where low‑latency interaction is critical.
- Socket.IO as the real-time backbone for broadcasting game state and user info, handling bet submissions and keeping balances and odds in sync.
- TypeScript for strongly-typed UI state, including animated percentage tracking and a dedicated bettingState object.
- PostgreSQL as the relational store for matches, contenders, user accounts, and historical bets.
- UX Polish via skeleton loaders, “no active match” handling, winner banners, and dynamic confetti effects.
Interesting challenges
Synchronizing UI with real-time state
The UI listens to live update-game-state and update-user-info events. I had to ensure the component could mount in several different scenarios (fresh load, reconnect, match already in progress) and always land in a consistent state without flicker or stale data.
Managing concurrent user actions
I built a clampAmount utility and a bettingState object to guard against invalid bets on the client before the socket event is even emitted, reducing unnecessary server load.
Making percentages feel “alive”
To avoid jarring UI jumps as new bets arrive, I implemented simple percentage animations that gradually step the displayed percentage toward the real target value over time.
What I’d improve next
- Stronger end-to-end typing between Socket.IO events and the backend payloads using a shared schema (like Zod or DTOs).
- Deeper analytics including per‑user win rates and match-level stats.
- Harden risk management with more sophisticated rate limiting and edge-case constraints on the backend.
- Test coverage for critical flows like reconnecting mid‑match and race conditions between concurrent bets.