CrowdWatch is a comprehensive React-based dashboard designed for real-time crowd monitoring and analytics. It serves as the frontend interface for an IoT-based Stall Monitoring System, visualizing data captured by ESP32-CAM modules to help identifying engaging stalls, improving event planning, and managing crowd safety.
- Live Monitor (Dashboard): Real-time visualization of crowd density across different zones (e.g., Main Entrance, Food Court).
- Analytics Module: Historical data tracking with interactive charts for visitor trends and peak hours.
- Image Processing: Manual upload feature for processing crowd images using custom algorithms.
- System Status: Live status monitoring of connected IoT devices (ESP32-CAMs).
- Settings & Alerts: Configurable thresholds for crowd density alerts and system notifications.
- Frontend Framework: React 19
- Styling: Tailwind CSS
- Icons: Lucide React
- Charts: Recharts
- UI Components: Radix UI
- Routing: React Router v6
- Animations: Framer Motion
app_stall_montior-22/
├── crowdwatch-app/ # Main React Application
│ ├── src/
│ │ ├── pages/ # Application Routes (Dashboard, Analytics, etc.)
│ │ ├── components/ # Reusable UI Components
│ │ ├── Layout.js # Main App Layout with Sidebar
│ │ └── App.js # Main Entry Point & Routing
│ └── package.json # Dependencies & Scripts
└── Components/ # Shared/External Components- Node.js (v14 or higher)
- npm (v6 or higher)
-
Navigate to the application directory:
cd crowdwatch-app -
Install dependencies:
npm install
Start the development server:
npm startThe application will launch automatically at http://localhost:3000.
(Screenshots can be added here to showcase the Dashboard and Analytics views)
Navigate to the Settings page within the application to configure:
- Maximum capacity thresholds per zone.
- Alert sensitivity.
- Device connection parameters.
This project is part of the Stall Monitoring System research initiative.