LiveBingo

Every viewer gets a personal bingo card that marks itself from what happens on stream.

Comment

Inspiration

Streams have long quiet stretches, and that's when viewers leave. Stream bingo is a fun fix, but every tool we found is manual: the streamer writes squares in a spreadsheet and ticks them by hand mid-game, so nobody keeps it up. We wanted bingo that runs itself, where each viewer's card reacts to the stream in real time.

What it does

  • !bingo in chat → the bot replies with a link to that viewer's own card: a random 5×5 drawn from the streamer's square pool, with a free centre. It works on any phone, with no login or extension.
  • Squares mark themselves from four kinds of trigger:
    • Twitch events: follows, subs, gift subs, raids, and cheers above a bit threshold (EventSub).
    • Chat bursts: N different viewers type a keyword (like "F" or "GG") within a time window.
    • The streamer's voice: phrases like "let's go", caught by browser speech recognition on the dashboard.
    • Manual taps for anything else ("snack break").
  • BINGO: a completed line shows a banner on the viewer's card, a celebration with confetti on the OBS overlay, and a chat shout-out. Winners are ranked #1, #2, #3.
  • OBS overlay: a transparent browser source with "🎯 Raid arrives — 41 cards marked" toasts, the BINGO celebration, an optional stats panel and optional generated sounds.
  • Streamer dashboard: edit the square pool, get AI-suggested squares from the stream's title and game (OpenAI structured output), tap squares, toggle voice triggers, and use demo mode to fire fake events, so the whole thing can be tried without waiting for a raid.

How we built it

Almost all of the code was written with OpenAI Codex, one prompt per build day (two small fixes were made outside Codex during review):

  1. Twitch OAuth, EventSub over WebSocket, and the chat bot.
  2. Seeded cards, the live card page and win detection.
  3. Automatic marking, demo mode and admin protection.
  4. The dashboard, AI squares and voice triggers.
  5. The OBS overlay.
  6. The deploy, robustness and accessibility.

The main thread is "Build LiveBingo Twitch foundation" (session ID above). The overlay and deploy were done in a second thread, "Build OBS stream overlay". Codex ran npm test, npm run build and a scripted demo round before each commit, and the commit history shows each step.

Stack: Node.js + TypeScript, Fastify, ws WebSockets, plain HTML/CSS/JS pages, Twitch EventSub (WebSocket transport) + Helix Send Chat Message, the OpenAI Responses API with JSON-schema output, the Web Speech API, the Web Audio API and canvas confetti, and Vitest. It's deployed on Render.

Challenges we ran into

  • Chat bursts without false positives: counting distinct viewers inside a sliding window, and excluding the broadcaster and the bot, so one person spamming can't tick a square.
  • Overlay pacing: demo rounds fire hits faster than a toast can be read. The overlay now shortens toasts when hits queue up and merges 3 or more into one summary, so it never falls more than a few seconds behind.
  • Security in a public overlay: card IDs work as viewer links, so they're stripped from every event sent to the public overlay and to other viewers (only the winner's own card hears its ID, so its BINGO banner shows live), and a test enforces this. Login is locked to the channel owner, so no visitor can replace the bot's tokens.
  • Deploy details: Render's production build skipped TypeScript (dev dependencies), and the free tier sleeps and wipes local files. The app now reconnects EventSub on startup and shows a clear "log in again" state.

Accomplishments that we're proud of

  • A real !bingo on a live channel returns a card link in seconds, and squares mark themselves from real Twitch events.
  • One server does everything: the bot, cards, dashboard and overlay, with no database and no frontend build step.
  • 16 automated tests, plus a one-command demo round that ends in a BINGO.

What we learned

EventSub over WebSocket makes a Twitch bot much simpler: no public webhook endpoint is needed to receive events. Codex works best with one clear prompt per feature, followed by a review pass. The security fixes came from reviewing its work, not from the first draft.

What's next for LiveBingo

  • Multiple channels with a database, so any streamer can sign up in one click.
  • Mods can mark squares from chat (!hit snack).
  • Square packs per game, and seasonal leaderboards for viewers.
  • A Twitch Extension panel, so the card opens without leaving the stream.

Built With

Share this project:

Updates

Submission history