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

Source: Dev.to

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 tackled 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 1 MB

In modern web development, shipping a dashboard generally involves downloading massive JavaScript bundles (React, Angular, Tailwind). We went 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.

Architecture: State Sync via WebSockets

Instead of hitting a REST API blindly every few seconds, we built a pure WebSocket pipeline using FastAPI (Python) on the backend. This acts as our real‑time state engine.

1. An authorized user or crowd‑sourced participant inputs an updated wait time.
2. The backend immediately mutates the state map.
3. A JSON update is broadcast to every active screen in the stadium, guaranteeing true zero‑latency updates.

The “Smart Route” Engine

Data visualization isn’t enough; we needed to make it actionable. The engine runs entirely in the browser:

• If a facility line exceeds 15 minutes, it triggers a “Red” threshold.
• The engine analyzes surrounding equivalent facilities (e.g., matching the North Gate with the South Gate).
• When an alternative is found, it calculates the geographic distance and displays 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 path‑finding logic applies a penalty multiplier (1.2×) to realistic walking times, ensuring all recommended routes are practically accessible.

Simulation Driven by Match Events

To showcase the product, the Python backend runs an asynchronous background time‑loop moving at 5× speed (Stadium Time). It parses the Match Schedule and, as a match nears halftime, the simulation loop aggressively spikes food, gate, and toilet traffic by 40 %, dynamically forcing natural bottleneck behaviors across the cluster. This lets us watch the predictive trend indicators (↑/↓) react instantly.

Conclusion

Building highly capable interfaces doesn’t always require massive bundle sizes. This project demonstrates that, with the right‑sized architecture—trading heavy abstractions for raw WebSocket piping and vanilla mechanics—you can deliver elite physical‑world solutions directly in the browser.