Building a music bingo platform with an AI DJ from scratch

Music bingo is one of the fastest-growing bar and event formats in the country. The format is simple: a host plays songs, players mark their cards, first to complete a pattern wins. The execution is not simple. Hosts are running the game from a patchwork of Spotify playlists, printed paper cards, Google Sheets for tracking, and a microphone for calling songs. The setup takes an hour. The game breaks when someone claims BINGO and the host has to manually verify against a spreadsheet while the room waits.

I built BingoBoxx to replace all of it. One platform that handles playlist creation, card generation, real-time game state, automatic verification, and an AI DJ that calls songs, hypes the crowd, and reacts to the game as it unfolds. The goal was a host experience that takes five minutes to set up and a player experience that takes ten seconds to join: scan a QR code, enter a nickname, play.

This is a personal product. I designed it, built it, and shipped it. Every decision in this case study, from the interaction design to the database schema to the audio processing pipeline, is mine.

I attended two music bingo nights at a local restaurant before writing a line of code. Both nights were packed. Both nights had the same problems.

The host is doing five jobs at once. They are the DJ, the MC, the game master, the verifier, and the tech support. They are switching between Spotify, a spreadsheet of called songs, a stack of printed cards, and a microphone. At both events, the host spent more time managing the game than engaging with the crowd. Between songs, they were scrolling through a spreadsheet to track what had been called. When someone claimed BINGO, the entire room waited while the host walked over, compared the card to the call list, and figured out whether it was valid. The tool should be invisible so the host can be present.

Paper cards kill the energy. At the first event, a player spilled a drink on their card and had to sit out the rest of the round. At the second, two people got into an argument about whether a song had been called. Printed cards cannot be joined mid-game, cannot be verified automatically, and cannot be trusted. The verification pause at both events was over a minute. In a room of 60 people with drinks in their hands, a minute of dead air is where you lose the room.

No one wants to download an app to play bingo for 45 minutes. I looked at every music bingo product I could find. The ones that existed required a download. Players do not install apps for a single bar event. The solution had to be web-based, no-account, and instant. Scan a code, type a name, play.

I prototyped two approaches before landing on the architecture that shipped.

Approach A: Digital cards with a real DJ. Build a platform where players scan a QR code to join and get a digital bingo card on their phone, but the music lives completely outside of BingoBoxx. The host still runs Spotify separately, still announces songs into a microphone, still manages the game manually. The screen is only for joining and marking cards. This was the faster build and the safer bet. I rejected it because it solved the card problem but left the host doing four jobs instead of five. The DJ, the MC, the verifier, and the game master were still the same person. The product would be a digital card, not a platform. And without the music integrated, there was no way to do automatic verification because the system would not know which songs had been called.

Approach B: Web-based platform with QR join, integrated music, and AI DJ. Host gets a full dashboard in the browser. Players scan a QR code and play on their phone's browser. No download, no account. Music plays directly from the host's browser through Spotify. Real-time sync via Supabase Realtime so every player's card updates instantly when a song is called. AI DJ handles the MC role so the host does not have to. Automatic verification because the system knows exactly which songs have been called and in what order. This was the hardest to build and the only approach that solved all three problems simultaneously.

Four design decisions shaped the product.

First, ten-second player onboarding. Scan QR code, enter a nickname, get a randomized card. No email. No password. No app download. No tutorial longer than three taps. The player's phone is a bingo card and nothing else. Every feature that required explanation was cut or redesigned until it did not. If it could not be understood while holding a drink in a loud bar, it was wrong.

Second, the AI DJ is the host's relief valve. The AI DJ is not a novelty feature. It is the architectural decision that makes the product work. The DJ calls every song with personality, announces players by name when they join, detects when someone is close to BINGO and builds tension, reacts to game events in real time, and fills dead air with contextual banter. Two personality modes (Smooth Street and Hype DJ) match different venue vibes. The DJ does the MC job so the host can work the room. This required building a custom text-to-speech pipeline with ElevenLabs, a Web Audio effects chain (high-pass filter, compressor, warmth EQ, presence boost, dry/wet reverb mix), and 300+ contextual DJ lines across 16 categories.

Third, instant verification kills the dead air. When a player taps BINGO, the system verifies in real time. No host intervention. Each winning tile lights up green sequentially with a 600ms animation per tile. Invalid tiles flash red with an explanation. The entire verification takes under four seconds. The 90-second dead-air pause that kills energy at paper-card events does not exist.

Fourth, TV mode as the room's shared screen. The host projects a TV view that shows the currently playing song with album art, a live leaderboard (who is closest to BINGO), the QR code for late joiners, and floating emoji reactions from players. The TV is the room's shared context. It replaces the host announcing "the song we just played was..." because the answer is on the screen. It creates ambient energy because the leaderboard creates soft competition. And it keeps the QR code visible so players can join at any point during the game.

BingoBoxx shipped as a Next.js 16 web application with Supabase for real-time data, Spotify Web Playback SDK for music, ElevenLabs for AI voice, and Stripe for subscriptions.

Three game modes at launch. Music Bingo is the core product: import a Spotify playlist or use the AI vibe generator ("chill R&B for a rooftop party") and the system builds a playlist from the prompt. Custom Bingo lets hosts type any items (office bingo, wedding bingo, baby shower bingo). Classic Bingo runs traditional 1-75 numbers with configurable auto-draw intervals.

The host flow is five steps: pick a mode, build or import a playlist, choose a win pattern (8 options from traditional line to X-shape to four corners, each with a visual preview grid), toggle optional features (drinking game mode, Auto DJ), and launch. The game generates a unique QR code and short URL. Players scan and join in seconds.

The player card is the hardest piece of interaction design in the product. It has to work on every phone screen size, in a dark bar, with one hand, while the player is not fully paying attention. Tiles are large enough to tap without precision. Marked tiles change state with haptic feedback. The currently playing song appears as a banner with blurred album art at the top of the card. A progress indicator shows how close the player is to completing the active win pattern. The BINGO button only appears when the pattern is actually complete, so players never submit false claims.

The drinking game mode (Pro feature) adds house rules to song calls. 43 rules across four severity levels (sips, drinks, social, legendary). The same song triggers the same rule for every player (deterministic hash) so the DJ can announce it once. A full-screen "HOUSE RULE" overlay appears on the player's phone with a 3-second auto-dismiss countdown.

The win celebration is designed to be shareable. When a player wins, the system generates a 1080x1350 PNG card with a branded gradient, the winner's name, the game name, the winning pattern, and the song that completed it. One tap to share to Instagram Stories or save to camera roll.

Friday Game Night.

PLAYINGLIVE

▶ NOW PLAYING · 1 / 5

Toxic.

BRITNEY SPEARS

05

IN THE ROOM

01

CALLED

00

WINNERS

playbingoboxx.com

ToxicMr. BrightsideHey Ya!Dancing QueenLevitating

Switch songs to see how the TV mode updates in real time

The product evolved through eight phases, each one driven by what broke or what was missing.

Phase 1: Core game loop. The first version had working bingo logic, card generation, and real-time sync. No AI DJ, no Spotify playback, no TV mode. The host called songs manually from a list. The game worked but was indistinguishable from a digital version of paper bingo. The energy was missing.

Phase 2: The neon redesign. The first UI was clean and minimal. It looked like a SaaS tool. Music bingo is not a SaaS tool. It is a party. I redesigned the entire visual language around a neon aesthetic: dark plum backgrounds, magenta and acid green accents, monospace metadata type, glassmorphism nav bars. The product needed to feel like a venue, not a dashboard. Engagement with the landing page doubled after the visual redesign.

Phase 3: Spotify integration. The first version required hosts to manually type song titles. Adoption stalled because playlist creation took 20+ minutes. I built Spotify OAuth integration so hosts could import existing playlists in one tap. Then added song search with autocomplete and album art. Then added the Spotify Web Playback SDK so the music plays directly from the host's browser tab. Playlist creation time dropped from 20+ minutes to under 2.

Phase 4: The AI DJ. The biggest single iteration. Started with browser speechSynthesis (robotic, unusable). Upgraded to ElevenLabs (natural but flat). Added a Web Audio effects chain (reverb, compression, presence boost) to make the voice sound like it was coming through a venue PA system. Built 300+ contextual lines across two personality modes. Added intelligence: the DJ detects when a player is one tile away from BINGO and announces it to build tension. It detects when multiple players are close simultaneously and plays it up. It fills dead air between songs with pre-game banter and idle hype at tuned intervals (20-45s pre-game, 60-90s during). It ducks the Spotify volume to 24% when speaking and restores to 80% after. The DJ transformed the product from a tool into an experience.

Phase 5: Auto DJ and drinking game. Auto DJ shuffles the playlist and plays configurable clip lengths (25-100% of each song) with 3.5-second crossfades. The host presses "start" and the game runs itself. Drinking game mode added 43 house rules that appear as full-screen overlays on player phones. These two features together turned BingoBoxx from "host manages a game" to "host presses play and works the room."

Phase 6: TV mode and remote control. TV mode was designed for bars and event spaces projecting to a screen. Background video loop, live leaderboard, currently playing song with progress bar, QR code for late joiners, floating emoji reactions. The remote control page lets the host manage the game from their phone while TV mode runs on the projector. This separated the control surface from the display surface, which is how real venues actually operate.

Phase 7: Verification and win celebration. The first verification was a simple toast notification ("BINGO verified!"). Too fast, too quiet. I redesigned it as a sequential tile-by-tile animation where each winning square lights up green with a 600ms delay, building anticipation. Invalid tiles flash red with an explanation. The win card generator creates a shareable image the winner can post. The verification moment went from a non-event to the climax of the game.

Phase 8: Monetization and polish. Stripe integration with a Free/Pro split. Free gets custom and classic modes with 15-player cap. Pro ($12/mo) unlocks music bingo, Spotify, drinking game, TV mode, all win patterns, unlimited players. Draft persistence across the paywall: if a free user hits a Pro feature during game creation, their entire form state saves to localStorage and restores after payment. iOS audio unlock overlay for Safari autoplay compliance. Three-step player tutorial. Emoji reaction bar.

BingoBoxx is live at playbingoboxx.com with paying subscribers across bars, corporate events, and private parties. The product replaces an hour of setup with five minutes, eliminates paper cards entirely, and removes the 90-second verification dead air that kills energy at live events.

The AI DJ is the feature that separates BingoBoxx from every competitor in the space. No other music bingo platform has a real-time AI MC that calls songs by name, reacts to game state, builds tension around near-wins, and fills dead air with contextual personality. The DJ is the reason hosts come back. It is doing the hardest part of their job better than they can do it themselves.

The technical surface area of the product is the outcome I am most proud of as a designer who codes. Real-time multiplayer game state over WebSockets. Spotify Web Playback SDK with crossfade mixing. ElevenLabs TTS with a custom Web Audio effects chain. Stripe subscription management with draft persistence across the paywall. Shareable winner card generation via Canvas API. Nine Supabase Realtime subscriptions running simultaneously. TV mode with live leaderboard and emoji reactions. All of it shipping from a single Next.js application that I designed and built alone.

Building a product alone taught me something that working on a team obscures: every design decision has an engineering cost, and every engineering shortcut has a design cost. When you are both roles, the tradeoffs are immediate and personal. The AI DJ is a good example. The "right" engineering decision was to use browser speechSynthesis. It is free, fast, and reliable. The "right" design decision was to make the DJ sound like a real DJ at a real venue. Those two decisions are incompatible. I chose the design decision, built the ElevenLabs pipeline with the audio effects chain, and accepted the engineering complexity because the product's value lives in the feeling of the experience, not in the architecture underneath it.

The craft decision that defined BingoBoxx is the same one that defined Rally: designing for the context of use. A bingo card in a bar is not a bingo card on a couch. The tiles are bigger because fingers are less precise after two drinks. The haptic feedback is stronger because the room is loud. The BINGO button only appears when the pattern is complete because false claims in a crowded room are worse than a missed claim. The AI DJ speaks at a cadence tuned for a room, not for headphones. Every surface was designed for the specific moment it would be used, in a specific environment, by a person who is only half paying attention. That constraint produced the best interaction design I have done.