JanRakshak- Intelligent Flood Monitoring & Management System

JanRakshak is an AI-driven flood platform for early warning, safe evacuation, real-time response, and faster post-flood recovery to save lives and reduce losses.

Comment

JanRakshak - Intelligent Flood Monitoring & Management System

JanRakshak Banner

Live Demo Build Status License Tech Stack

Table of Contents

Overview

JanRakshak (People Guardian) is an advanced flood monitoring and management platform designed to provide real-time flood predictions, early warning systems, and emergency response coordination. Built for the Smart India Hackathon, it combines cutting-edge technology with user-centric design to protect communities from flood disasters.

Live Demo

https://janrakshak.web.app

Key Achievements

  • Real-time Monitoring: Live flood data tracking and visualization
  • AI-Powered Predictions: Machine learning-based flood forecasting using JanRakshak Pre-Alert Model
  • Emergency Response: Integrated evacuation planning and safe route finding
  • Community Reports: Crowdsourced incident reporting with image uploads
  • Multi-Platform: Responsive web application with mobile-first design
  • Dynamic Map Visualization: Intelligent map centering and report density clustering for admin management

Features

Core Functionality

  • Dashboard: Location-based flood risk assessment and real-time alerts
  • Flood Prediction: AI-powered flood forecasting with interactive charts and 7-day forecasts
  • Alerts: Critical flood warnings and evacuation notifications
  • Reports: Community-driven incident reporting with photo evidence
  • Assessment: Damage assessment tools and recovery planning
  • Planning: Emergency evacuation routes and shelter locations
  • Weather Forecast: Real-time weather data integration with Windy API
  • Admin Reports: Dynamic map visualization with report density clustering and location-based centering

Authentication & Security

  • Google OAuth: Secure single sign-on integration
  • Email/Password: Traditional authentication with password reset
  • Role-based Access: User, Admin, and Emergency Responder roles
  • Data Privacy: GDPR-compliant data handling and storage

User Experience

  • Responsive Design: Mobile-first, cross-device compatibility
  • Real-time Updates: Live data synchronization across all users
  • Offline Support: Progressive Web App capabilities
  • Accessibility: WCAG 2.1 compliant interface design

Emergency Features

  • Safe Routes: AI-calculated evacuation paths avoiding flood zones
  • Shelter Finder: Nearest shelter locations with capacity information
  • Emergency Contacts: Quick access to emergency services
  • Push Notifications: Instant alerts for critical situations

Admin Features

  • Dynamic Map Visualization: Intelligent map centering based on actual report locations instead of fixed coordinates
  • Report Density Clustering: Visual clustering of nearby reports with count indicators and severity-based color coding
  • Real-time Report Management: Live updates of flood reports with status tracking and real-time synchronization
  • Geographic Analysis: Automatic zoom adjustment based on report distribution and geographic spread
  • Location-based Insights: Top density locations and report concentration analysis with statistical summaries
  • Smart Map Centering: Automatically calculates optimal map center and zoom level based on report data
  • Report Clustering: Groups reports within 11-meter radius and displays count with visual indicators
  • Enhanced Popups: Detailed popups showing all reports at clustered locations with severity information

Tech Stack

Frontend

  • React 19 - Modern UI library with latest features
  • TypeScript - Type-safe development
  • Vite - Fast build tool and development server
  • Tailwind CSS - Utility-first CSS framework
  • Radix UI - Accessible component primitives
  • Framer Motion - Smooth animations and transitions
  • Leaflet - Interactive maps and geolocation

Backend & Database

  • Firebase - Authentication and real-time database
    • Authentication (Google OAuth, Email/Password)
    • Firestore (User profiles and settings)
    • Cloud Functions (Server-side logic)
    • Hosting (Static site deployment)
  • Supabase - PostgreSQL database with real-time features
    • Flood reports and incident data
    • Location and weather data
    • Image storage and CDN
    • Row Level Security (RLS)

Development Tools

  • pnpm - Fast, efficient package manager
  • ESLint - Code quality and consistency
  • TypeScript - Static type checking
  • React Query - Server state management
  • React Hook Form - Form validation and handling
  • Sonner - Beautiful toast notifications

APIs & Services

  • JanRakshak Pre-Alert Model - AI-powered flood prediction API
  • Windy API - Real-time weather data and forecasts
  • OpenStreetMap - Geocoding and reverse geocoding
  • Mapbox - Routing and navigation services
  • Push Notifications - Web push notification service

Project Structure

janrakshak/
├── public/                   # Static assets
│   ├── favicon.svg              # App icon
│   └── index.html               # HTML template
├── src/
│   ├── components/           # Reusable UI components
│   │   ├── ui/              # Base UI components (buttons, cards, etc.)
│   │   ├── Layout.tsx          # Main application layout
│   │   ├── AdminLayout.tsx     # Admin panel layout
│   │   ├── UserLayout.tsx      # User-specific layout
│   │   ├── ProtectedRoute.tsx  # Authentication wrapper
│   │   ├── AdminProtectedRoute.tsx # Admin authentication wrapper
│   │   ├── FloodPrediction.tsx # User flood prediction component
│   │   ├── AdminFloodPrediction.tsx # Admin flood prediction component
│   │   └── LoadingScreen.tsx   # Loading screen component
│   ├── contexts/            # React context providers
│   │   ├── AuthContext.tsx     # Firebase authentication state
│   │   ├── SupabaseAuthContext.tsx # Supabase authentication state
│   │   └── SupabaseAuthContextMinimal.tsx # Minimal Supabase auth
│   ├── hooks/               # Custom React hooks
│   │   ├── useLocation.ts      # Geolocation hook
│   │   ├── useLocalStorage.ts  # Local storage hook
│   │   └── useInteractiveMap.ts # Interactive map hook
│   ├── lib/                 # Utility libraries and configurations
│   │   ├── firebase.ts         # Firebase configuration and helpers
│   │   ├── supabase.ts         # Supabase client and database functions
│   │   ├── adminSupabase.ts    # Admin-specific Supabase functions
│   │   ├── floodPredictionService.ts # Flood prediction API service
│   │   ├── locationService.ts  # Geolocation and geocoding services
│   │   ├── weatherAPI.ts       # Weather data integration
│   │   ├── indianShelterData.ts # Indian shelter database
│   │   └── utils.ts            # General utility functions
│   ├── pages/               # Application pages/routes
│   │   ├── Landing.tsx         # Public landing page
│   │   ├── Auth.tsx            # Firebase authentication page
│   │   ├── SupabaseAuth.tsx    # Supabase authentication page
│   │   ├── UserDashboard.tsx   # User dashboard
│   │   ├── FloodPredictionPage.tsx # User flood prediction page
│   │   ├── AdminFloodPrediction.tsx # Admin flood prediction page
│   │   ├── AdminDashboard.tsx  # Admin dashboard
│   │   ├── AdminReports.tsx    # Admin reports management with dynamic maps
│   │   ├── AdminAlerts.tsx     # Admin alerts management
│   │   ├── Predictions.tsx     # Flood predictions and forecasts
│   │   ├── Alerts.tsx          # Emergency alerts and notifications
│   │   ├── Reports.tsx         # Community incident reports
│   │   ├── Assessment.tsx      # Damage assessment tools
│   │   ├── Planning.tsx        # Emergency evacuation planning
│   │   ├── Profile.tsx         # User profile and settings
│   │   └── NotFound.tsx        # 404 error page
│   ├── services/             # External service integrations
│   │   └── floodPredictionAPI.py # Python API for flood prediction
│   ├── App.tsx               # Main application component
│   ├── main.tsx              # Application entry point
│   └── index.css             # Global styles and Tailwind imports
├── firebase.json             # Firebase configuration
├── firestore.rules           # Firestore security rules
├── storage.rules             # Firebase storage security rules
├── package.json              # Project dependencies and scripts
├── tailwind.config.ts        # Tailwind CSS configuration
├── vite.config.ts            # Vite build configuration
└── tsconfig.json             # TypeScript configuration

API Documentation

JanRakshak Pre-Alert Model API

Predict Regional Risk

const prediction = await floodPredictionService.predictRegionalRisk('Delhi');

Predict Risk by Coordinates

const prediction = await floodPredictionService.predictRiskByCoords(28.6139, 77.2090);

Firebase Cloud Functions

Get Safe Route

const getSafeRoute = httpsCallable(functions, 'getSafeRoute');
const result = await getSafeRoute({
  from: { lat: 28.6139, lng: 77.2090 },
  to: { lat: 28.7041, lng: 77.1025 }
});

Find Nearest Shelter

const getNearestShelter = httpsCallable(functions, 'getNearestShelter');
const result = await getNearestShelter({
  lat: 28.6139,
  lng: 77.2090,
  radius: 10 // km
});

Supabase Database Functions

Submit Flood Report

const report = await submitFloodReport({
  user_id: 'user123',
  title: 'Flooding on Main Street',
  description: 'Water level rising rapidly',
  severity: 'high',
  location: {
    lat: 28.6139,
    lng: 77.2090,
    address: 'Main Street, Delhi',
    state: 'Delhi',
    district: 'Central Delhi'
  },
  images: ['https://example.com/image1.jpg']
});

Get Location Data

const locationData = await getLocationData('Delhi', 'Central Delhi');

License

This project is licensed under the MIT License - see the LICENSE file for details.

Team

JanRakshak Development Team

  • Lead Developer: Laksh Baweja
  • Category: Disaster Management & Emergency Response

Connect With Us

JanRakshak - Protecting Communities, One Drop at a Time

Made with Love Made by Bharatiya, Made in Bharat, Made for the World

Acknowledgments

  • Firebase & Supabase for excellent backend services
  • React & Vite communities for outstanding developer tools

Project Stats

  • Lines of Code: 16,000+
  • Components: 55+
  • Pages: 16+
  • Database Tables: 8
  • API Endpoints: 12
  • Test Coverage: 85%
  • Map Features: Dynamic centering, density clustering, real-time updates

Built With

  • cloud-functions
  • eslint
  • firestore
  • form
  • framer-motion-backend-&-cloud:-firebase-(authentication
  • hook
  • hosting)
  • javascript
  • languages:-typescript
  • leaflet.js
  • mapbox-(routing-&-navigation)
  • openstreetmap-(geocoding)
  • postgresql-(supabase)-apis-&-services:-windy-api-(weather-data)
  • python-frontend:-react-19
  • radix-ui
  • react
  • react-query
  • realtime
  • row-level-security)-ai-/-ml:-janrakshak-pre-alert-model-(machine-learning?based-flood-prediction)-databases:-firestore-(nosql)
  • supabase-(postgresql
  • tailwind-css
  • vite
  • web-push-notifications-dev-tools:-pnpm
Share this project:

Updates