StadiumSense: Elevating the Fan Experience with AI & Real-time Data 🏟️

Nabeel — Tue, 21 Apr 2026 16:29:43 +0000

A Build-in-Public Journey for the Promptwar Virtual Hackathon

Attendee View

Staff View

The Problem: The "Stadium Struggle"

We’ve all been there. You’re at a massive stadium, the game is at a critical point, and you’re stuck in a 20-minute line for a burger. Or worse, you’re caught in a human bottleneck trying to find your gate after the final whistle.
For venue staff, it's even more stressful. Managing 50,000+ people with static data is a recipe for safety hazards and customer frustration.
Enter StadiumSense.

The Vision: Intelligence at the Edge

StadiumSense is a real-time event management platform designed to solve these exact pain points. My goal was to create a dual-experience solution:

For Fans: A mobile-first PWA that provides live crowd density heatmaps, gate navigation, and concession pre-ordering to skip the lines.

For Staff: A high-level dashboard with real-time occupancy metrics and AI-powered crowd routing suggestions to proactively manage the flow.

The Journey: Build-in-Public & Promptwar Virtual

Participating in the Promptwar Virtual Hackathon was the perfect catalyst for this project. The "Build-in-Public" approach kept the pressure on and the feedback loop tight. Seeing the community's response to daily updates was incredibly motivating.
One of the unique aspects of this build was the integration of Antigravity, my AI coding partner.

Building with Antigravity 🚀

Antigravity wasn't just a "copilot"; it felt like a senior lead developer sitting next to me. Throughout the hackathon, Antigravity helped me:

Rapidly Prototype: From the first FoodOrderForm.tsx to the complex MapOverlay.tsx, we iterated at lightning speed.

Squash "Heisenbugs": We tackled a nasty infinite routing loop and subtle Firestore date serialization issues that would have taken hours to debug solo.

Optimize for Evaluation: We didn't just build features; we audited the code for WCAG 2.1 accessibility compliance and optimized performance using lazy loading and debounced listeners.

Architecting the AI: Antigravity helped bridge the gap between the frontend and the Gemini API, ensuring the crowd-routing suggestions were both safe and realistic.

The Tech Stack

Frontend: React + TypeScript + Vite (for that blazing-fast dev experience).

Styling: Modern Vanilla CSS with high-end aesthetics (glassmorphism and dynamic transitions).

Backend: Firebase (Firestore for real-time sync, Cloud Functions for AI logic).

Intelligence: Google Gemini API for predictive crowd management.
Real-time Visualization: Google Maps JavaScript API with custom heatmap layers.

Key Breakthroughs

AI-Powered Routing: Using Gemini to analyze live occupancy data across different sections and suggest specific redistribution strategies (e.g., "Redirect Gate B traffic to Gate D").

Offline Resilience: Building as a Progressive Web App (PWA) ensures that even in a crowded stadium with spotty 5G, the core UI remains responsive.

Final Thoughts

Building StadiumSense has been a whirlwind. From the initial concept to the final accessibility audit, the journey has reinforced one thing: the future of software development is collaborative. Using tools like Antigravity allows developers to focus on the "what" and the "why," while the AI helps master the "how."

DEV Community: Nabeel