CrisisCompanion

An app that, in times of natural disaster, tells the user where the disaster is and where to go for shelter.

Comment

Inspiration

In times of disaster, such as wildfires, flood, and landslides, early evacuation is key to reduce casualties and damage mitigation. However, even when a warning is issued, residents often don’t know where to evacuate to, especially in a chaotic environment. In fact, in a report by the American Public Health Association, more than 3.1 million Americans each year are displaced from their homes by natural disasters.

What it does

We developed an app that scours the internet and user reports for disaster site locations, tracks the user location, and calculates the best route to the nearest reported shelter. We designed the app so that it includes both the current online reports for natural disasters and also the current user reports, for maximum coverage and to ensure an early evacuation. We find shelters through an algorithm that predicts the closest safe hotel, airbnb, emergency centers, churches, or red cross shelter in addition to user reports for safe available shelters. This way, we ensure that a shelter is available there for anyone in these dire times.

How we built it

We built Crisis Companion using HTML, CSS, and JavaScript. We used Claude to help refine our code, and Figma to design the app's layout and screens before building. HTML structured the app, CSS styled the map, markers, and cards, and JavaScript handled all the interactions like clicking markers, sliding up detail cards, switching screens, and submitting reports.

Challenges we ran into

We had trouble figuring out how to lay out the map with all the markers, cards, and legend without it looking cluttered or confusing. Getting everything to fit cleanly on a phone screen took a lot of trial and error.

Accomplishments that we're proud of

We're proud that we went from an idea to a fully interactive working prototype in a brief time period. The app looks and feels like a real product, with a clean design, working navigation, clickable markers, detail cards, and a form for reporting disasters and shelters.

What we learned

We learned how to plan an app before writing any code by designing in Figma first. We also got better at using HTML, CSS, and JavaScript together to build interactive interfaces, and learned how to use Claude as a coding and design tool to speed up the process.

What's next for CrisisCompanion

We want to connect the app to a real live database so shelter reports actually save and appear on the map for other users. We also want to integrate NASA's real-time disaster data and add push notifications to alert users when a disaster is detected near their location.

Built With

Share this project:

Updates