In today's global environment plagued by climate change, the rate of natural disasters like floods and hurricanes occurring seems to be constantly increasing. Consequently, this places many people at a significantly higher risk if they lack the abilities, knowledge, or resources to properly prepare for and evacuate in a disaster situation. We wanted to design an early-warning platform where users can register on their phones and receive alerts about their surrounding areas and also be monitored for their safety during a natural disaster.

What it does

Our platform is built to support both sides to successfully keep citizens safe during an emergency situation. On our website, first responders can log in and be redirected to a home page with a map of their current location and an interactive dashboard. On their dashboard, they can input the details of an emergency situation including the type of disaster, area being impacted, and any additional details and push an alert to all users in the affected area, requesting confirmation of their safety multiple times before they send an officer to the last known location to provide assistance. They can also view a map of the impacted area and get the phone numbers or addresses of registered users and optimize the locations that they go to.

How we built it

We built our project using a full web stack with ReactJS for the front-end and Flask (Python) + MongoDB for the back-end, along with Swift for iOS development. We prototyped all of our designs in FIgma and used some BootstrapCSS for the implementation. In order to work flexibly with a map and render layers on top, we utilized ReactMapGL as a wrapper for the Mapbox component. We used the Courier API to send asynchronous email notifications to the users and the authorities. We also used the Geolocation API in iOS for constant background location tracking.

Challenges we ran into

One of the biggest challenges we faced was integrating our data fully, from retrieving it on the front-end of our website, all the way to sending a notification to the user’s mobile device and emailing them about the disaster. We each focused on separate aspects of the project mainly, but with some overlapping skill sets and online tutorials, we were able to collaboratively resolve all of our issues and display a functional final product.

Accomplishments that we're proud of

Some of our favorite accomplishments during this project that we struggled with were dynamically rendering an interactive map with individualized markers representing every human in our database, sending emails to users stored in our database, and adding a wide range of flexibility for the user.

What we learned

This was one of the most ambitious projects we've attempted before given the time constraints. For most of us, this was one of our first serious hackathon experiences and we learned a lot about managing our workflow, maintaining good communication while we collaborate, and

What's next for ASAP Response

ASAP Response was a really interesting idea when we came up with it, and even more fun to implement. Unfortunately, we didn't have time to implement all of the ideas we had planned during our 24-hour demo. In our existing UI, we would love to add features to filter citizens by risk categories and highlight structures like hospitals, fire departments, etc. We hope to implement the paper ( for using machine learning to optimize response of emergency services based on data aggregation using Twitter. With some back-end ML, we could provide better personalized feedback for where responders should go based on the specific type of event and density of citizens. In the future, we could have a web and mobile platform for both first responders and citizens, making it more accessible to everyone and also provide tips for how to ensure your own safety during a disaster. In general, we would love to expand further out of San Diego to broader cities to provide assistance and save lives.

Share this project: