Engineering a Real-Time Stadium Management Dashboard in Under 1MB

J Dipayan Rao — Sat, 11 Apr 2026 14:52:10 +0000

Introduction
Have you ever been at a major sporting event, sitting through the first half, only to spend the entire 15-minute halftime waiting in line for the bathroom or a burger?

This is the ubiquitous "Wait Time Dilemma" in the Physical Event Experience. At peak capacity, attendees naturally swarm to the closest facility, unaware that an identical facility just one sector over is completely empty. What if we could mathematically re-distribute that crowd in real-time, drastically lowering wait times globally?

For Promptwars 2026, I decided to tackle this challenge by engineering the Stadium Control Center—a hyper-fast, real-time venue synchronization platform designed under extreme constraints.

The Imposed Constraint: Keep it Under 1MB
In modern web development, shipping a dashboard generally involves downloading massive JavaScript bundles (React, Angular, Tailwind). We decided to go entirely against the grain:

Zero Frameworks. Pure Vanilla JS and raw CSS Grid.
Zero Image Assets. Completely vectorized inline SVGs and mathematical geometry for the UI.
Zero HTTP Polling overhead.

The Architecture: State Sync via WebSockets
Instead of hitting a REST API blindly every few seconds, we developed a pure WebSocket pipeline utilizing FastAPI in Python on the backend. This acts as our real-time state engine.

When an authorized user or crowd-sourced participant inputs an updated wait time, the backend immediately mutates the State map and broadcasts an instantaneous JSON update to every active screen in the stadium. This guarantees true zero-latency updates.

Enter the 'Smart Route' Engine Data visualization isn't enough; we needed to make it actionable. We built a localized pathing algorithm natively within the browser:

If a facility line crosses 15 minutes, it triggers a "Red" threshold.
The engine immediately analyzes surrounding equivalent facilities (e.g., matching the North Gate with the South Gate).
If an alternative is found, it calculates the geographic distance and automatically triggers the Smart Assistant banner: "Pro-tip: The North Food Court is peaking. We found a shorter path to the West sector—save 15 mins!"

Inclusive Routing (ADA) Traffic routing isn't one-size-fits-all. We integrated a physical [♿] ADA toggle. When activated, the pathfinding logic applies a penalty multiplier (1.2x) to realistic walking-times to ensure all recommended routes are practically accessible.

Simulation Driven by Match Events
To showcase the product, our Python backend runs an asynchronous background time-loop moving at 5x speed (Stadium Time). It actively parses the "Match Schedule." Once a match nears halftime, the simulation_loop aggressively spikes food, gate and toilet traffic by 40% dynamically, forcing natural bottleneck behaviors across the cluster so we can watch the predictive trend indicators (↑/↓) react instantly.

Building highly capable interfaces doesn't always require massive build sizes. This project proves that with right-sized architecture—trading heavy abstractions for raw WebSocket piping and Vanilla mechanics—you can build elite physical world solutions directly in the browser.

DEV Community: J Dipayan Rao

Engineering a Real-Time Stadium Management Dashboard in Under 1MB