SafeZone

Ongoing disasters and available relief centers
Past disasters
Uploading relief centers information
Relief center popup screen
Mobile Demo

Inspiration

During any natural disaster, the most dangerous enemy after the event itself is the information vacuum. We've all seen the news reports: families driving into flooded roads that looked clear, residents unable to find open shelters, and first responders lacking a clear view of real-time ground-level dangers. Official alerts are critical but often too broad, while social media is fast but filled with rumors and panic.

We were inspired by this critical gap between official broadcasts and the chaotic, moment-to-moment reality faced by people on the ground. We wanted to build the "Waze for disaster response"—a single, reliable platform that replaces panic with clarity.

What it does

SafeZone is a unified, real-time, and community-verified situational awareness platform. It serves as the single source of truth during a crisis by providing a live, interactive map and proactive communication.

For Affected Residents: SafeZone proactively sends targeted SMS and email alerts when a potential disaster (identified by NASA or FEMA data) is detected in their registered area, providing immediate, actionable information directly via text. Following this alert, the app provides a filterable map to instantly locate life-saving resources, such as open shelters, medical aid stations, and clean water distribution points.
For First Responders: It gives big organizations like Red Cross as well as locals who are providing support a centralized platform to display the resources they have and what they need more of, maximizing the use of everybody's resources and capabilities.
For Volunteers: It allows organizations and individuals to see exactly where help is needed most, directing manpower and supplies to verified resource gaps.

How we built it

Backend: Node.js for server-side logic and API management
Database: Supabase for auth, real-time data synchronization, and PostgreSQL storage
Frontend: React for real time map view and login functionality
Mapping: MapBox for interactive mapping and geospatial features
Styling: Tailwind CSS for responsive design
External APIs: NASA EONET API for disaster event data, FEMA API for official emergency information
Communication: Twilio for SMS alert system, Email alert system after login
AI Integration: OpenAI API for intelligent data processing and weather/shelter updates

Challenges we ran into

Data Preprocessing: Processing and standardizing data from multiple sources (NASA EONET, FEMA) with different formats and structures into a unified system (70,000 data points)
Full-Stack Development: completely new to Supabase, and inexperienced full stack developers, we had to learn a lot of concepts on the fly.
Mapbox GL + React: there were so many different mapbox features that we wanted to implement, but at times it was really arduous integrating it with the React state logic. -Continuous API Calls: challenging to set up continuous weather API calls -Deploying OnRender We spent hours trying to get the app deployed on Render because the production app kept pointing to the local Node.js server when calling APIs, even after multiple code updates and deployments. The issue was that we hadn’t built the dist file after making the code changes. -Twilio Our initial plan was to send users sms who are in the same city where the disaster has occured or about the occur but according to US law we had to go through a Toll free verfication for a mobile number which will take about 2 days to complete legal process thus we dropped the plan and switch to only email.
Network Connectivity Issues: During disasters, when people don’t have reliable internet access, we address this by sending detailed SMS messages. These messages include the location of the nearest resource center, directions to reach it, and we also notify the resource center about the victims’ locations, helping bridge the communication gap and solve the problem.

Accomplishments that we're proud of

Real-time Center Updates: Successfully implemented a system where when a resource center is created in one environment, it appears instantly across all other connected users' maps in real-time, and data on that center's resources and availabilities is constantly being updated
Live Disaster Integration: Built a system that continuously monitors ongoing natural disasters and displays them on the map in real-time
Proactive Alert System: Created an intelligent notification system that automatically sends email alerts to users when they log into the site from a state currently experiencing a natural disaster

What we learned

The importance of reliable real-time data synchronization in crisis situations
How to effectively integrate multiple government APIs with varying data formats
The technical challenges of building resilient communication systems for emergency scenarios
The critical balance between automated alerts and user-verified information in disaster response

What's next for SafeZone

Offline Functionality: Develop solutions for network connectivity issues, including offline data caching and mesh networking capabilities
Enhanced Verification System: Implement more sophisticated community verification algorithms and trust scoring
Multi-language Support: Add support for multiple languages to serve diverse communities
Integration Expansion: Partner with more emergency services and NGOs for broader data coverage
Mobile App Development: Create dedicated iOS and Android applications for better mobile accessibility
AI-Powered Predictions: Enhance the system with predictive analytics for resource needs and danger zones