DevBingo

🎮 DevBingo — Network Like a Dev, Win Like a Gamer

💡 Inspiration

Every developer conference has the same problem: networking feels forced. You stand awkwardly near the coffee station, someone asks "so what do you work on?", and the conversation dies in thirty seconds.

We wanted to fix that - not with another app that tells you to "connect with people," but with a game. What if finding someone who deploys on Fridays, or who knows how to exit Vim, actually meant something? What if networking had stakes, a scoreboard, and a winner?

DevBingo was born from that idea: turn the developer conference floor into a multiplayer game board.

🛠️ How We Built It

The stack was chosen to move fast without sacrificing feel.

Frontend - React + Vite + Tailwind CSS, with a full retro pixel aesthetic using the Press Start 2P Google Font. Every button has an 8-bit chunky shadow, every screen feels like a game from 1994.

Avatars - 10 hand-crafted pixel art characters (Hacker, Designer, Coffee Addict, Bug Hunter, Data Wizard...) built entirely from SVG <rect> elements on a 12×12 grid. No images, no libraries — pure math and rectangles.

Game engine - In-memory state with a pub/sub listener pattern, structured so Firebase Realtime Database can be dropped in later with minimal changes. Each player gets a shuffled 5×5 bingo card, taps a cell to get a 4-digit verification code, shows it to the person they found, and marks it confirmed.

Backend - A lightweight Express.js server with a single smart endpoint: POST /api/generate-challenges. It takes an event name and theme, sends them to Google Gemini, and gets back 24 freshly generated, event-specific bingo challenges - so GDG Tbilisi DevFest gets different cards than a Web3 summit.

Animations - The footer scene (snowy grass, pixel cars, blinking kitten, swaying grass blades) is drawn entirely on an HTML5 Canvas at 60fps. The fairy lights use proper quadratic Bézier curves with per-bulb twinkling phases. Zero animation libraries.

🧠 What We Learned

Canvas is powerful and painful - drawing a pixel kitten with a wagging tail in 2D canvas reminded us why game engines exist.
Gemini is surprisingly good at bingo - the AI-generated challenges were genuinely funny and event-specific on the first try.
Pixel fonts are unforgiving -Press Start 2P at 6px is the hardest design constraint we've ever worked with. Every word has to be surgically short.
Real multiplayer is hard, fake multiplayer is fun - the in-memory bot system let us demo a full room in seconds during testing.

⚔️ Challenges

Mobile grid layout - getting a 5×5 bingo card to look good on a 375px phone screen with pixel fonts inside every cell was a multi-hour battle with clamp() and aspect-ratio.
Bingo detection timing - the first version used setTimeout hacks to detect wins after state updates. Replaced with a proper useEffect dependency on player.hasBingo.
Gemini response parsing - the model occasionally wraps the JSON array in markdown code fences. Added a regex extraction fallback so the UI never crashes on a bad response.
Background seam - the footer canvas initially drew its own sky gradient, creating a visible color seam against the page background. Fixed by making the canvas transparent above the snow line and unifying the background in CSS.

🚀 What's Next

Real multiplayer via Firebase Realtime Database (state is already structured for it)
QR code room joining - scan to join instead of typing a 6-character code
Custom avatar upload - let players use their GitHub profile picture
Event leaderboard - persistent cross-session scores for a full-day conference