A proactive, real-time decision support system that integrates IoT telemetry with Machine Learning to predict and manage urban flash floods in Chennai.
🌐 Live Authority Dashboard | ⚙️ Prediction Engine API
- AI-Powered Prediction: Utilizes a Random Forest model trained on historical IMD weather datasets to provide localized risk assessments.
- Real-Time GIS Mapping: Interactive map interface using Leaflet.js to visualize flood risk scores across multiple city nodes.
- Authority Control Panel: Secure dashboard for officials to monitor live sensor feeds, view historical trends, and prepare emergency broadcasts.
- Role-Based Security: Integrated with Clerk to ensure only authorized personnel can access the command center.
- IOT Simulation: A custom IoT simulation that bridges virtual hardware (Wokwi) with live infrastructure.
The system follows a distributed architecture to separate the Intelligence Layer from the Visualization Layer.
- Backend (Python/Flask): Orchestrates the MQTT data listener, the Random Forest inference engine, and real-time data simulation.
- Frontend (React/Vite): A multi-page application with distinct entry points for the landing page (
landingPage.jsx) and the secure dashboard. - Deployment: The frontend is hosted on Vercel for multi-page support, while the backend is hosted on Render.
- Frontend: React, Vite, Tailwind CSS, Leaflet.js, Clerk Auth.
- Backend: Flask, Scikit-Learn, Paho-MQTT, Joblib.
- IoT & Hardware: ESP32 (Wokwi Simulation), MQTT Broker.
To validate the system, we utilized a IoT SIMULATION approach using Wokwi. Instead of waiting for real rain, we manually inject sensor data to test the system's response to critical thresholds.
- Manual Trigger: An official pushes an increment button on the ESP32 (Wokwi) to simulate rising water levels.
- MQTT Transmission: Data is published to a cloud broker and picked up by our Flask listener.
- AI Inference: The Random Forest model processes telemetry and updates the risk score.
- Dashboard Update: The React frontend reflects the change instantly on the map.
Caption: The Wokwi ESP32 interface used for manual data injection.
In this video, you can see that when the button is pushed in Wokwi, the data passes to the model, which predicts the risk score on the live map in real-time.
| Name | Role / Contribution |
|---|---|
| Ishani Jindal | Full stack developer, UI/UX designing |
| Aditi Mehta | Frontend developer, UI/UX designing |
| Mehar Bhanwra | Set up wiring, wrote C++ logic for ESP32 |
-
Firebase Phone Authentication (OTP/SMS)
Implemented for user verification using Firebase Auth. -
Firebase Realtime Database Integration
Used to store and manage user-related data. -
Twilio SMS Emergency Alerting
Initially integrated for emergency notifications.
The Twilio-based SMS alerting system was removed due to inconsistent delivery latency, which made it unsuitable for time-critical emergency scenarios. The system was refactored to prioritize reliability and faster response mechanisms.
- Clone the repository:
git clone [https://github.com/ishanijdev/Floodprediction_dashboard.git](https://github.com/ishanijdev/Floodprediction_dashboard.git)
- Setup Frontend
cd chennai-flood-dashboard npm install - Run the Full Ecosystem
npm run start-all