SmartStadia - Intelligent Crowd & Safety Management

SmartStadia is a next-generation web application designed for live event coordination, crowd heatmap tracking, smart stadium routing, and critical safety management.

🚀 Hackathon Prototype Note

This repository represents the Client-Side Prototype for the H2S Skill Prompt Wazr competition. To demonstrate complex real-time capabilities without relying on expensive live cloud infrastructure, this prototype employs a simulated backend architecture.

Architecture & Security Context

• Simulated JWT & Role-Based Access (RBAC): For demonstration purposes, admin authentication (admin123) and user states are managed via local browser storage (localStorage) and React state. In a production environment, this would be replaced by HTTP-only secure cookies and a robust OAuth 2.0 / JWT backend provider.
• Mock Data Engine: Live heatmaps, incident reporting, and food ordering queues rely on seeded data structures and simulated latency to mimic high-load WebSocket behavior.

✨ Key Features

• Interactive Command Center: Role-protected (/admin) dashboard with live incident tracking, stadium-wide broadcast alerts, and dynamic zone-blocking capabilities.
• Smart Routing & Heatmaps: Dynamic SVG-based interactive map tracking crowd density, restroom queues, and a "Locate Child" RFID-tracking simulation.
• SOS Emergency System: High-visibility emergency support interface linked to simulated physical RFID wristbands.
• Fluid UI/UX: Built with React, Vite, Framer Motion, and Tailwind CSS. Features an interactive, cinematic mouse-tracking background system with high-contrast accessibility (a11y) considerations.

🛠 Tech Stack

• Frontend Framework: React 18 + Vite (for rapid HMR and optimized bundling)
• Styling: Tailwind CSS + Custom CSS Variables (Glassmorphism & Neon themes)
• Animations: Framer Motion
• Charting: Chart.js (react-chartjs-2)
• Icons: Lucide React

♿ Accessibility (a11y)

SmartStadia is designed with inclusivity in mind:

• High-contrast visual design ensuring readability in both bright and dark environments.
• Semantic HTML and ARIA labels (aria-label) implemented across all interactive elements and icon-only buttons for screen-reader compatibility.
• Responsive layout scaling seamlessly from mobile devices to large command-center displays.

🧪 Testing Pipeline

(Note: Automated testing suites like Vitest/Jest are slated for the CI/CD integration phase following this prototype presentation. Current validation relies on rapid manual iteration and component-level isolation.)