The latest articles on DEV Community by Utkarsh Dashora (@utkarsh_dashora_0770b784e). https://dev.to/utkarsh_dashora_0770b784e https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3876337%2F87ca220f-395a-4cce-9fee-92632965cf01.png https://dev.to/utkarsh_dashora_0770b784e en Utkarsh Dashora Mon, 13 Apr 2026 11:52:09 +0000 https://dev.to/utkarsh_dashora_0770b784e/building-mivora-a-high-performance-ipl-stadium-live-dashboard-187e https://dev.to/utkarsh_dashora_0770b784e/building-mivora-a-high-performance-ipl-stadium-live-dashboard-187e <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fafiqfk6x63fkkkyeromy.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fafiqfk6x63fkkkyeromy.png" alt=" " width="800" height="370"></a>🚀 The Vision<br> 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.</p> <p>Enter Mivora: a premium, glassmorphic dashboard designed for match-day attendees to monitor stadium facilities and live match status in real-time.</p> <p>🎨 Design Language: "Obsidian Neon"<br> The UI is the star of the show. I moved away from boring light themes to a deep, immersive Obsidian Neon aesthetic.</p> <p>Key Design Pillars:<br> Dynamic Glassmorphism: Using backdrop-filter: blur(20px) combined with subtle grain textures to create a high-end feel.<br> Status-Responsive Glows: The components aren't static. They use CSS variables to change their neon accent colors based on wait times:<br> 💎 Cyan (Smooth): Low entry wait.<br> 🟠 Amber (Busy): Moderate crowd.<br> 🔴 Rose (Congested): Peak stadium load.<br> Animated Cyber-Mesh: A moving background grid that adds depth without distracting from the match data.<br> ⚙️ Technical Blueprint<br> The app is built for speed and responsiveness, catering to fans on the move.</p> <p>React 19 &amp; Vite: Leveraging the latest React features and lightning-fast Vite builds.<br> Vanilla CSS Architecture: No heavy UI frameworks. Everything is custom-built with CSS variables and keyframe animations for maximum performance.<br> Live Data Simulation: Implemented custom useEffect hooks to simulate fluctuating crowd dynamics across stadium gates, fan zones, and concessions.<br> ☁️ Cloud-Native Deployment<br> 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!</p> <p>bash<br> gcloud run deploy mivora --source . --port 8080 --region us-central1<br> 💼 Lessons Learned<br> 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.<br> 🌐 Live Demo:<br> <a href="https://mivora-766611966558.us-central1.run.app/" rel="noopener noreferrer">https://mivora-766611966558.us-central1.run.app/</a></p> <p>💻 GitHub:<br> <a href="https://github.com/UtkarshDashora/Mivora_IPL_Live" rel="noopener noreferrer">https://github.com/UtkarshDashora/Mivora_IPL_Live</a></p> <p>Check out the code here: GitHub Repository (Work in progress)</p> <p>Built with ❤️ by Utkarsh Dashora</p> <h1> Hack2Skill #GoogleCloud #CloudRun #ReactJS #Vite #WebDev #UIUX #IPL #ProjectLaunch #OpenToWork #react #webdev #vite #cricket #ipl #css #uidesign </h1> css showdev sideprojects ui Utkarsh Dashora Mon, 13 Apr 2026 09:44:09 +0000 https://dev.to/utkarsh_dashora_0770b784e/kinetic-stadium-real-time-digital-twin-for-smart-stadiums-2ipg https://dev.to/utkarsh_dashora_0770b784e/kinetic-stadium-real-time-digital-twin-for-smart-stadiums-2ipg <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdwxfuqgwx5hyommbj823.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdwxfuqgwx5hyommbj823.png" alt=" " width="800" height="381"></a>Stadiums are no longer just physical spaces—they are dynamic systems filled with real-time interactions.</p> <p>I built <strong>Kinetic Stadium</strong>, a digital twin platform that transforms how large-scale venues manage crowds, reduce wait times, and improve overall fan experience.</p> <h2> 🧠 Problem </h2> <p>Large stadiums face challenges like:</p> <ul> <li>Crowd congestion</li> <li>Long waiting times at concessions</li> <li>Difficulty in tracking movement</li> <li>Lack of real-time decision-making tools</li> </ul> <h2> 💡 Solution: Kinetic Stadium </h2> <p>A <strong>real-time digital twin system</strong> that visualizes crowd movement and provides actionable insights.</p> <h2> ⚙️ Tech Stack </h2> <ul> <li>Frontend: React + Vite</li> <li>Backend: Node.js</li> <li>Database: Firebase Realtime Database</li> <li>Deployment: Google Cloud Run</li> <li>Containerization: Docker</li> </ul> <h2> 🔥 Key Features </h2> <h3> 🔹 Real-Time Crowd Monitoring </h3> <p>Live crowd density updates with sub-second latency.</p> <h3> 🔹 Smart Crowd Flow </h3> <p>Hotspot detection to prevent congestion before it happens.</p> <h3> 🔹 Friend Finder </h3> <p>Locate friends easily inside large venues.</p> <h3> 🔹 Smart Concessions </h3> <p>Data-driven insights to reduce waiting times.</p> <h2> 🧪 Architecture Overview </h2> <ul> <li>React UI visualizes real-time data</li> <li>Firebase streams live updates</li> <li>Node.js handles backend logic</li> <li>Docker ensures scalability</li> <li>Cloud Run enables seamless deployment</li> </ul> <h2> 🌐 Live Demo </h2> <p>👉 <a href="https://kinetic--system-766611966558.asia-south1.run.app/" rel="noopener noreferrer">https://kinetic--system-766611966558.asia-south1.run.app/</a></p> <h2> 💻 GitHub Repository </h2> <p>👉 <a href="https://github.com/UtkarshDashora/Kinetic__System" rel="noopener noreferrer">https://github.com/UtkarshDashora/Kinetic__System</a></p> <h2> 🚀 Future Improvements </h2> <ul> <li>AI-based crowd prediction</li> <li>IoT integration (sensors)</li> <li>Mobile app for attendees</li> <li>Advanced analytics dashboard</li> </ul> <h2> 🙌 Conclusion </h2> <p>Kinetic Stadium is my vision for the future of <strong>smart venues and real-time systems</strong>.</p> <p>If you found this interesting, feel free to give feedback or connect with me!</p> <h1> GoogleCloud </h1> <h1> react #node #firebase #cloud #webdev </h1> iot react showdev webdev