Hurricane Preparedness

Gives users information on how to stay prepared for hurricanes! Tells users their flood zone and gives a personalized supply list for their situation using AI. Maps will be added in future!

Comment

Inspiration

I live in Florida and, last year, my house flooded two feet because of Hurricane Milton. Our family didn't care too much about the hurricane because we had never faced flooding problems from past hurricanes. Therefore, we didn't do much research and didn't prepare. Because of this situation and this hackathon, I decided to create a website that would allow hurricane information to be easily accessible, while also personalizing a supply list that a family should have based on their situation.

What it does

Currently, the user is able to create a personalized supply list for an upcoming hurricane based on their situation. The user can input family size, number of children, pets, and any other additional information that the AI will take into consideration and create a personalized supply list. In the future, the website will also show flood zones based on the user's location and find shelters nearby.

How we built it

The website was created using React and TypeScript for frontend development. Tailwind CSS was used for styling, and Radix UI components were used for consistency and accessibility (has pre-built components). For the backend, Supabase was used to handle serverless functions such as powering the AI functionality. A custom Supabase Edge Function was also created to connect with the OpenAI API, allowing it to generate a personalized supply list on our website. The application was also built with Vite to optimize builds. Netlify was then used to host the website.

Challenges we ran into

One of the challenges I faced was designing the AI prompt system. The supply list would sometimes produce a very general list that was not specific enough; therefore, we had to change it so the AI would give more detailed lists. I also faced a problem where the list would not show at all when the user pressed the generate button.

Accomplishments that we're proud of

The biggest accomplishment that I am proud of is the AI system that creates the personalized emergency supply list. The AI creates a specific list based on a family's situation, and then that output is put into a checklist on our website. I'm proud that I was able to create something that can genuinely be helpful to families when preparing for a hurricane.

What we learned

The project taught me how to work with AI APIs to generate responses that are structured and detailed. I learned how to code an AI that creates specified outputs and also takes that output to display on the website cleanly as a checklist. Overall, this website taught me how to create an AI to do something that I want it to do.

What's next for Hurricane Preparedness

There are many new additions that I plan to incorporate into the website. First, I plan to integrate real-time tracking APIs that display alerts for any upcoming hurricanes, while also displaying storm position/trajectories. I also want to add maps that show when clicking the "Find My Zone" button and "Find Shelters" button, showing a user's location to see what flood zone they are in and also allows them to find shelters nearby. I also plan on adding user accounts, allowinf families to save their personal supply lists, set preparation reminders, etc.

Built With

Share this project:

Updates