SafeGuard

🌍 Inspiration

In an era of increasing natural disasters and climate change, we witnessed how communities struggle to stay informed about real-time threats while keeping track of their loved ones' safety.

Traditional weather apps provide general forecasts, but they lack:

Personalized location monitoring
Real-time disaster tracking for the places that matter most

We were inspired to create a solution that combines live disaster data with personal location management, empowering users to proactively protect their families and communities.

🛡️ What It Does

SafeGuard is an interactive weather safety platform that provides:

🌀 Real-time Disaster Monitoring
Live tracking of natural disasters, wildfires, storms, and other hazardous events using NASA's EONET API
📍 Personal Location Management
Save and monitor important locations (home, work, family members’ addresses) with custom names and contact information
🗺️ Interactive Safety Mapping
Visual representation of disasters and personal locations on an interactive map with weather overlay
📏 Intelligent Proximity Search
Click any location to find the nearest threats (or safe zones within customizable radius distances – future work ongoing)
📌 Coordinate Discovery
Click anywhere on the map to get precise GPS coordinates
🔐 User Authentication
Secure personal location storage with individual user accounts
📱 Responsive Design
Full desktop and mobile compatibility for safety monitoring on-the-go

🏗️ How We Built It

Frontend:

React.js with Vite for fast development
Tailwind CSS for modern responsive design
Leaflet.js for interactive mapping

Backend:

Node.js with Express.js serving RESTful APIs for authentication and location management

Data Sources:

NASA EONET: Real-time disaster data
OpenWeatherMap API: Weather overlays (pending implementation)
OpenStreetMap: Base map tiles

Key Features:

Real-time data fetching and caching
Interactive map with custom markers and animations
Haversine formula for accurate distance calculations
Responsive grid layouts for all screen sizes
Modular component structure
Service layers for API logic and geospatial utilities

🚧 Challenges We Ran Into

API Integration Complexity
Parsing and normalizing diverse formats from NASA EONET with inconsistent coordinate systems
Real-time Performance
Optimizing map rendering with potentially hundreds of disaster markers
Responsive Map Design
Scaling map elegantly from mobile to ultrawide screens
Geographic Calculations
Accurate distance computations using the Haversine formula
State Management
Managing complex interactions: map clicks, marker selections, search animations, etc.
Cross-browser Compatibility
Ensuring consistent behavior across browsers and devices

🏆 Accomplishments That We're Proud Of

Real-world Impact
Built a genuinely useful tool addressing real safety concerns
Technical Excellence
Smooth integration of multiple APIs with real-time processing
User Experience
Intuitive interface making complex geodata accessible
Performance Optimization
Smooth map interactions even with large data sets
Responsive Innovation
Full-width design that works on any screen size
Feature Completeness
Production-ready app with login, data persistence, and full monitoring tools

📚 What We Learned

Geographic Data Processing
Coordinates, distance calculations, geospatial normalization
Real-time API Management
Efficient fetching, caching, and updating of live data
Interactive Mapping
Advanced Leaflet.js usage for custom markers and events
Responsive Design at Scale
Truly adaptive layouts for extreme screen size variations
User-Centered Safety Design
Clear visual hierarchy and intuitive interactions for emergencies
Full-Stack Integration
Strengthened connection between frontend logic and backend systems