DEV Community

Ayushi Bhadani
Ayushi Bhadani

Posted on • Edited on

🏟️ Building SmartStadia: Revolutionizing the Fan Experience with React & Google Cloud

πŸš€ The Vision
Stadiums are massive, complex environments. Whether it's finding your seat, locating a lost child, or knowing which restroom has the shortest line, the "Match Day" experience can often be stressful.

SmartStadia was born to solve this. It’s an intelligent stadium coordination platform that uses real-time data to make match days safer and more enjoyable.

✨ Key Features

  1. The Command Center (Admin Security) πŸ” We built a role-protected dashboard for stadium authorities. It features:

-Live Incident Mapping: Track medical or safety alerts across the stadium in real-time.
-System Broadcasts: Send instant push alerts to every attendee's device.
-Dynamic Zone Blocking: Instantly "lock down" areas and trigger the routing engine to redirect fans to safety.

  1. Interactive Heatmaps & Smart Routing πŸ—ΊοΈ Using custom SVG-based mapping, fans can:

-See live crowd density (Heatmaps).
-Find the nearest restroom with the shortest queue.
-Locate Child: A unique feature that simulates RFID-wristband -tracking to help parents find their kids instantly.

  1. High-Performance Design 🎨 I prioritized a "Premium Digital Twin" aesthetic.

-Interactive Backgrounds: Mouse-tracking particles and glowing orbs create a futuristic feel.
-Glassmorphism: A sleek, high-contrast UI that looks great on mobile or command-center screens.

πŸ›  The Tech Stack
-Frontend: React 18, Vite, Tailwind CSS, Framer Motion
-Backend: Node.js, Express
-Deployment: Google Cloud Run (Dockerized), GitHub
-Testing: Vitest & React Testing Library (100% pass rate!)

β™Ώ Accessibility Matters
We believe safety tools must be accessible to everyone. SmartStadia includes full ARIA support for screen readers and high-contrast themes for readability in all lighting conditions.

🏁 Conclusion
Building SmartStadia for the H2S Skill Prompt Wazr competition has been an incredible journey. It pushed us to combine high-level UI design with critical safety logic and professional cloud deployment.

Check out the code on GitHub: https://github.com/AyushiBhadani/SmartStadia_

I’d love to hear your thoughts in the comments! How do you think technology can make live events better? ⬇️

Top comments (0)