Queen Bee HQ: A Full Spelling Bee Command Center in a Single HTML File
Queen Bee HQ: A Full Spelling Bee Command Center in a Single HTML File
Last month my friend Keri and I hosted our very own spelling bee at our favorite bar. You can see in the photo below that it two literally two of us, with both of our computers, each one with three windows, to pull this off in a way that felt seamless and easy for everyone, with a little bit of razzle dazzle showmanship. It was cool! But really exhausting – I realized at one point we were about to head into a long string of duplicate words and so I called a water break and then hunkered down like shit-shit-shit-shit to try and reset all of the words.
However, we LOVED hosted it and I would host another in a heartbeat. Kind of tricky to test this new app in a large scenario, but I’d go for it.
Queen Bee HQ is a full spelling bee command center built for bar events, word management, a live announcer view, and a separate projector display, all as a single drag-and-drop HTML file with no build step and no server required. This one's part of the vibe-coded series, and it's the one where the trickiest problem turned out to be something as ordinary as two browser windows talking to each other.
What does it actually do?
There are four tabs, a Command Center for running the bee live, a Word List manager, a Players roster, and an Accounts stub for a future paid tier (in case Spelling Bees for Grown Ups sweeps the nation and I become a thousandaire). The Command Center gives the announcer everything they need, pronunciation, origin, definition, example sentence, while a completely separate Display Window, meant to be screen-shared to a projector, shows only what the audience should actually see. Words stay hidden on the display until the announcer scores the round, and pressing Correct or Wrong reveals the word and result at the same moment on both screens, then a Next Word button advances the game.
Players get random three-digit numbers instead of sequential ones, since that reads better on a big screen than a simple counting list. The app auto-fills the current speller in rotation order, highlights whoever's up with a gold UP NOW badge, and logs every round with a clear divider between them. Eliminating a player is just a tap on their card.
Stylistically, I don’t really care that it looks obviously Claude-coded here, since it’s just a backend command center. I spent a lot more time getting the dumb thing to work and not let me down during testing at home.
How does word management actually work?
We pre-wrote about 100 of our own words, and then ran out of steam and used AI to fill in about 150 more. In Queen Bee, you can do the same thing: yyou can paste in a raw list of words and have an AI model fill in the definition, pronunciation, origin, and example sentence for all of them at once, or generate a fresh list from scratch with difficulty and theme controls. Everything on a word card is editable inline afterward, and you can drag to reorder or sort the whole list by difficulty.
What about the championship round?
I know! We’re all asking about it. The championship round is tricky: that part implements actual Scripps rules, not a simplified version. Neither player can be eliminated by a single miss once it's down to the final two, a state machine tracks who's leading and who's on notice, and once a player earns a clincher shot, the word comes from a separate pool of specifically harder championship words. There's a full-screen winner reveal at the end to close it out properly.
What made single-file HTML actually work here?
It's genuinely powerful for something like this. No deployment step, no npm, no build, you just open the file and it runs. A real backend, accounts, and payment processing would only come into play for a future persistent-account layer, not as a prerequisite for the app to actually function tonight at an event.
What was the hardest technical problem?
Getting the display window and the main app window to reliably talk to each other when the whole thing is running from a local file, not a hosted server. Several standard approaches for cross-window communication all failed in different ways under that specific condition. What actually worked was the simplest option, opening a blank window and writing directly into it, then passing messages to it, but building that injected HTML as plain string concatenation rather than a template literal.
That last detail turned out to matter more than it sounds. Any closing script or style tag inside a JavaScript template literal, even escaped, gets caught and acted on by the browser's HTML parser before your JavaScript ever runs. The only safe way around it is splitting those tags apart during string concatenation (#teamconcat) so the parser never sees a complete closing tag inside the outer script block.
What else was worth learning?
Sketching the championship round's state machine as a diagram (and actually doing this and working on the app while it was fresh) before writing any code paid off directly, since the transitions between its five or so states, especially the case where both players miss at once, aren't obvious, and having the diagram first meant the implementation was clean on the first pass instead of needing a rebuild later.
And generating a large batch of AI-written words in one API call just doesn't work, it hits a token limit and comes back truncated. Breaking the request into chunks of 40 words and merging the results afterward fixed it completely, and showing a running batch count while it worked made the wait feel reasonable instead of like the app had stalled.
FAQ
Does this require internet access to run at an event? No ongoing connection is required to run the bee itself, since it's a single local HTML file. AI-assisted word generation does need a connection, but that's a setup step done before the event, not during it.
Does the audience see the same screen as the announcer? No. The announcer's Command Center and the audience-facing Display Window show different information, so words and results stay hidden from the audience until the announcer actually scores the round.
Does it follow real spelling bee championship rules? Yes, the championship round specifically implements Scripps-style rules, including the no-single-miss-elimination rule for the final two players and a separate pool of harder clincher words.