ReliefMap - Disaster relief platform

Flood aid platform with maps, alerts &weather data

Created on 7th September 2025

•

Purpose: Real-time disaster relief mapping and emergency response coordination platform
Target Users: Disaster victims, first responders, volunteers, and emergency coordinators
Platform: Desktop-only web application with mobile restrictions for optimal performance
Tech Stack: React 18, TypeScript, Tailwind CSS, Firebase, OpenWeatherMap API, Google Maps

Real-time Disaster Coordination: Provides live mapping of emergency reports, resources, and safe zones during disasters
Emergency Communication Gap: Bridges communication between affected populations and relief organizations
Resource Allocation: Helps coordinate volunteers, supplies, and emergency services efficiently
User Safety: Delivers weather alerts, evacuation routes, and real-time safety information
Information Overload: Organizes disaster data into actionable insights with visual mapping
Accessibility Issues: Ensures desktop-optimized experience for critical decision-making during crises

Interactive Disaster Map: Real-time visualization of reports, alerts, and resources using Leaflet
Emergency Alerts System: Browser notifications with Firebase Cloud Messaging (FCM)
Weather Integration: Live weather data and flood warnings via OpenWeatherMap API
Smart Navigation: Google Maps directions from user location to emergency sites
WhatsApp Sharing: Direct sharing of emergency reports with location and details
Authentication: Google OAuth integration for secure user access
Performance Optimized: Lazy loading, memoization, and responsive design for smooth UX

Emergency Response: Enables faster coordination between victims and responders during disasters
User Safety: Provides real-time weather alerts and evacuation guidance
Scalability: Built with modern web technologies for high-traffic disaster scenarios
Accessibility: Desktop-focused design ensures reliable performance in critical situations
Innovation: Combines multiple APIs for comprehensive disaster intelligence
Production-Ready: Optimized for deployment with security best practices

API Authentication Issues: OpenWeatherMap 401 errors due to incorrect API key configuration and endpoint changes
Performance Bottlenecks: Slow loading of map components and report details due to unoptimized React rendering
Security Vulnerabilities: Firebase API keys exposed in public service worker files
Mobile Responsiveness: Balancing desktop-only restrictions with responsive design requirements
Real-time Data Integration: Managing multiple APIs (Firebase, OpenWeatherMap, Google Maps) with error handling
Build Configuration: Resolving TypeScript compilation errors and environment variable management
User Location Detection: Handling geolocation permissions and fallback scenarios for directions

API Fixes: Switched to free-tier OpenWeatherMap endpoints, implemented proper error handling and fallbacks
Performance Optimization: Applied React.memo, useMemo, useCallback, and lazy loading to components
Security Enhancement: Removed hardcoded keys from service worker, implemented secure PostMessage communication
Desktop-Only Implementation: Created device detection system with professional mobile restriction screen
Real-time Integration: Built robust weather service with caching and graceful degradation
Build Resolution: Fixed TypeScript errors, optimized bundle size, and ensured production-ready deployment
Location Handling: Enhanced geolocation with permission management and coordinate validation
The overall setup of this project gets you feel that how real systems work like when we get notifications from government portal before severe crisis, floods, hurricane towards our state etc.

Technologies used

HTML

React

Node.js

Firebase

CSS

JavaScript