The Problem
Every IPL match day, 33,000+ fans pack into stadiums with
zero real-time intelligence. Staff coordinate manually via
WhatsApp. Wait times at food courts are pure guesswork, and
crowd surges go completely undetected until panic sets in.
After the RCB stampede tragedy that killed 11 fans during
their IPL title celebrations, I realized modern Indian
stadiums are operating blindly. There is no single screen
showing where crowds are building. No early warning when a
queue crosses 20 minutes. No unified view of where your 18
staff members actually are.
I wanted to build a proactive platform that could change
this — and do it entirely through prompt engineering.
What I Built — ArenaIQ
ArenaIQ is a real-time, AI-driven crowd intelligence and
operations dashboard for modern sports stadiums. It monitors
crowd density across every stand, predicts queue surges
before they happen, tracks staff positions globally, and
auto-flags security incidents — all feeding into a single
dark-themed command center built in 13 days using only
Google AntiGravity.
Live demo: [YOUR CLOUD RUN URL]
GitHub: [YOUR GITHUB URL]
Key Features
3D Stadium Heatmap
A bespoke, rotating Three.js stadium bowl where each
physical section pulses dynamically from green (safe) to
red (critical) based on the live data engine's occupancy
percentages. The geometry itself is venue-agnostic —
segment count adjusts automatically based on how many
zones the venue has configured.
Incident Command Center
The most operationally critical feature. A high-priority
live feed tracking security, medical, and crowd incidents
complete with severity tagging (Critical / High / Medium /
Low), active elapsed timers, staff assignment, and full
resolution workflows. New incidents trigger a notification
bell animation and a real-time toast alert. This is the
feature that directly addresses the safety gap exposed by
the Bengaluru tragedy.
Queue Operations Simulator
Real-time tracking of wait times across all entry gates,
food courts, and restrooms. Each queue card shows the
current wait in large color-coded numbers (green under
5 min, amber 5–15 min, red above 15 min), a Recharts
sparkline of the last 10 data points, and an AI-generated
recommendation — e.g. "Open Lane 2 immediately — wait
exceeds 20 min."
Interactive SVG Staff Mapping
A visual blueprint mapping 18+ active staff members across
the venue. Each staff member has a role badge (Security,
Medic, Usher, Crowd Control), a live status indicator
(Active / Responding / On Break / Standby), and a one-click
dynamic reassignment dropdown. The map updates in real time
as staff statuses change.
"Ask ArenaIQ" Fan Chatbot
An NLP-style conversational assistant built for fans. Ask
it "shortest food queue right now," "where is Gate 3,"
"what's the score," or "I need medical help" — and it
responds using live venue data. The emergency response
flow dispatches the nearest medic's name and location
instantly.
Venue-Agnostic Admin Engine
The entire platform runs on a dynamic JSON config schema.
A 5-step onboarding wizard lets any stadium manager
configure their venue — zone names, gate count, staff
roles, match details, brand colors — in under 5 minutes.
Three one-click presets are built in: Wankhede Stadium
(Mumbai), Arun Jaitley Stadium (Delhi), and M Chinnaswamy
Stadium (Bengaluru). Switching presets instantly rewrites
the global state — brand colors, zone geometry, AI
parameters, and chatbot knowledge all reconfigure in under
one second without a page reload.
My Prompt Strategy
I used a "layered architecture prompting" approach. Instead
of asking the AI to build an entire dashboard at once —
which produces monolithic, unmaintainable code — I
structured every prompt with a single clear responsibility.
Layer 1 — Data architecture first:
"Build a central mockDataEngine.js that simulates 12
stadium zones updating every 3 seconds with realistic
occupancy and queue fluctuations via an EventEmitter
pattern. All data must flow through a single VenueContext
provider."
Layer 2 — AI insight logic second:
"Build a rule-based aiInsightEngine.js that scans live
zone data and generates specific, actionable alerts when
occupancy exceeds 85%, when queue wait exceeds 20 minutes,
or when staff count in a high-density zone drops below 2.
All alert strings must reference actual zone and staff
names from config — no generic placeholders."
Layer 3 — UI last:
"Now build the visual dashboard components that hook into
VenueContext and render the data using Framer Motion
staggered entry animations and Recharts sparklines. Every
metric card number must animate from 0 to its value on
mount."
This strict separation meant the AI agent never confused
data logic with UI logic. The result was enterprise-grade
component architecture that a senior developer would
recognise as production-quality.
The most powerful single prompt in the entire project was
the venue-agnostic refactor instruction:
"Search every component for hardcoded venue strings.
Replace all of them with references to VenueConfig from
context. Then inject config.primaryColor as a CSS custom
property on :root so the entire theme updates when a new
venue loads."
That one prompt turned a Wankhede-only demo into a
platform that works for every stadium in India.
The Venue-Agnostic Architecture — Why It Matters
Most hackathon projects are demos. ArenaIQ is a platform.
The key technical decision was isolating all venue-specific
data into a single global VenueConfig object living in
React Context. Every component — the 3D model, the AI
engine, the chatbot, the staff map — reads from this config
instead of hardcoded values.
When an admin switches from Wankhede to Chinnaswamy, three
things happen simultaneously in under 100 milliseconds:
- CSS custom properties update on :root — the entire color theme shifts from cyan to RCB red instantly
- The mock data engine reinitialises with new zone names, gate names, and staff count
- The 3D stadium geometry rebuilds with the correct number of segments for the new zone count
This is the difference between a visualization and a
product. Any stadium in India can be onboarded in under
5 minutes with zero code changes.
Tech Stack
- React 18 + Vite (fast client-side SPA)
- Tailwind CSS with CSS custom properties for instant theme switching
- Three.js + React Three Fiber (live 3D telemetry rendering)
- Framer Motion (staggered mount animations, layout transitions)
- Recharts (queue sparklines and occupancy trend charts)
- Lucide React (iconography)
- React Hot Toast (real-time incident notifications)
- Google AntiGravity (AI-powered agentic development)
- Google Cloud Run (containerised serverless deployment)
What I Learned
Building with Google AntiGravity completely changed how I
think about software development. The skill is no longer
"write the code" — it is "architect the intent." The
developers who will win the next decade are the ones who
can decompose a complex system into layered, unambiguous
prompts and then verify the output with the same rigour
they would apply to a code review.
The biggest lesson: specificity wins. "Build a dashboard"
produces garbage. "Build a Queue Monitor page with 10
cards in a 2-column grid where each card shows wait time
in 48px JetBrains Mono font, color-coded green/amber/red,
with a Recharts sparkline of the last 10 data points"
produces production code.
Real-World Impact
ArenaIQ addresses a documented, urgent problem. After the
Bengaluru stampede, the Rajasthan Royals commissioned a
700-page safety audit of their own stadium. KSCA added
new entry gates and widened concourses specifically for
IPL 2026. Stadium operators across India are actively
spending money on this exact problem right now.
ArenaIQ demonstrates what the solution looks like —
a proactive, AI-driven command center that gives
operations teams the visibility they currently lack.
Built with Google AntiGravity for PromptWars Virtual 2025.
Top comments (0)