🏏 Building "Mivora": A High-Performance IPL Stadium Live Dashboard

#css #showdev #sideprojects #ui

🚀 The Vision
During the peak of the IPL season, I wanted to create something that wasn't just another score app. I wanted to capture the vibe of being in the stadium—the energy, the congestion, and the real-time pulse of the crowd.

Enter Mivora: a premium, glassmorphic dashboard designed for match-day attendees to monitor stadium facilities and live match status in real-time.

🎨 Design Language: "Obsidian Neon"
The UI is the star of the show. I moved away from boring light themes to a deep, immersive Obsidian Neon aesthetic.

Key Design Pillars:
Dynamic Glassmorphism: Using backdrop-filter: blur(20px) combined with subtle grain textures to create a high-end feel.
Status-Responsive Glows: The components aren't static. They use CSS variables to change their neon accent colors based on wait times:
💎 Cyan (Smooth): Low entry wait.
🟠 Amber (Busy): Moderate crowd.
🔴 Rose (Congested): Peak stadium load.
Animated Cyber-Mesh: A moving background grid that adds depth without distracting from the match data.
⚙️ Technical Blueprint
The app is built for speed and responsiveness, catering to fans on the move.

React 19 & Vite: Leveraging the latest React features and lightning-fast Vite builds.
Vanilla CSS Architecture: No heavy UI frameworks. Everything is custom-built with CSS variables and keyframe animations for maximum performance.
Live Data Simulation: Implemented custom useEffect hooks to simulate fluctuating crowd dynamics across stadium gates, fan zones, and concessions.
☁️ Cloud-Native Deployment
Mivora is fully containerized using a multi-stage Dockerfile and deployed to Google Cloud Run. This ensures the app stays responsive even when thousands of fans hit it during a CSK vs MI final!

bash
gcloud run deploy mivora --source . --port 8080 --region us-central1
💼 Lessons Learned
This project taught me the importance of Visual Feedback in real-time dashboards. By using colors and pulses to communicate "busy-ness" levels, we can guide crowd movement much more effectively than with just numbers alone.
🌐 Live Demo:
https://mivora-766611966558.us-central1.run.app/

💻 GitHub:
https://github.com/UtkarshDashora/Mivora_IPL_Live

Check out the code here: GitHub Repository (Work in progress)

Built with ❤️ by Utkarsh Dashora