Pick-a-bots | RAMSoc (IT) Sumobots

System Architecture
Voting Dashboard (figma)

Inspiration

Last year at Sumobots 2024, we prototyped “Pick-a-Bots” using Google Forms for voting and Google Sheets as our makeshift database. It worked well to get the ball rolling, but we quickly ran into performance and concurrency limits as the field filled out. For 2025, we decided to build a purpose-built platform - retaining the familiar token-based voting flow - but replacing Forms & Sheets with a real stack that scales and feels seamless for both fans and organisers.

What it does

Token Betting: Every user starts with 100 tokens. Before each match, you stake tokens on the bot you think will win.
Real-time Updates: We fetch live match states, scores, and outcomes directly from Challonge’s API and push updates to the front end.
Reward Engine: Correct predictions double your stake; incorrect ones simply cost the tokens you wagered - no hidden penalties.
Leaderboard & History: Track your performance over the tournament, compare with peers, and see which matchups were the most unpredictable.

How we built it

Frontend: Next.js (App Router) deployed on Cloudflare Pages, with React + Chakra UI for a responsive, accessible UI.
Realtime & Cron: Since ChallongeAPI doesn't have webhooks for matches, we developed a scheduled Cloudflare Worker polls Challonge every minute and writes match data to Supabase; listeners in the Next.js app react instantly.
Backend & Database: Supabase handles auth (JWT), RLS, and Postgres storage.
Integration: Challonge API 2.0 for tournament data, Supabase client for queries, and jose for on-the-fly JWT issuance.

Challenges we ran into

Concurrency: Preventing race conditions when two users voted simultaneously on the same match; we solved this with Supabase transactions and row-level locking.
Hydration Mismatches: Conditionally rendering login/“Enter as…” buttons based on JWT presence triggered React hydration errors. We refactored into a client-only useEffect hook and isolated the logo into a light-mode/dark-mode component.

Accomplishments that we’re proud of

End-to-end pipeline: From Challonge → Worker → Realtime Supabase → Next.js listener, every part updates within 60 s.
User-friendly Admin UI: A simple Cloudflare Worker, served form lets organisers change tournament IDs, Supabase URLs, and cron intervals on the fly.
Performance & Scalability: Zero-server frontend with Workers and Supabase scales automatically for any tournament size.

What we learned

Edge vs. Pages: We discovered when to use Cloudflare Workers + OpenNext.js (for serverless functions and cron) versus pure Pages, balancing cold starts and ease of deployment.
Schema Isolation: Leveraging Postgres schemas for test isolation simplifies CI/CD and avoids data bleed.
RLS & Supabase Policies: Writing custom policies for token-deduction logic taught us how powerful row-level security can be when done correctly.
Chakra + Next.js SSR: Handling UI state that depends on localStorage or JWTs requires careful client-only logic to avoid hydration pitfalls.

What’s next for Pick-A-Bots | RAMSoc (IT) Sumobots

Extended Markets: Introduce boss-battle side-bets, tournament outcomes, and bracket predictions.
Analytics Dashboard: Integrate Metabase on top of Supabase to help organizers visualize token flow, popular bots, and user engagement.