Inspiration

We were inspired by the idea of natural disasters, especially floods in particular. With the increase in the amount of extreme rainfall events due to climate change, there are massive concerns around the world about floods in urban areas causing large amounts of damage. We also knew that increasing the amount of urban greenery in an area could potentially mitigate the negative effects of flooding by absorbing and storing runoff during extreme rainfall events. With this in mind, we developed a project that combines flood risk mitigation with the idea of urban green spaces.

What it does

The FloodForecast web app calculates flood risk based on factors like ground elevation, proximity to water, and the amount of vegetation. It displays the data in the form of a graph and provides a risk percentage with explanations and flood preparedness recommendations depending on the risk level. The app also includes a vegetation analysis, factoring in tree, shrub, and grass coverage, and a simulation showing how different vegetation levels can reduce flood impact which shows the data in a segmented bar graph.

How we built it

We built the site using ReactJS to create a dynamic and interactive user interface. For styling, we used Tailwind CSS, which allowed us to quickly design a responsive and clean layout. The flood risk calculator and vegetation simulation were developed using TSX, enabling efficient integration of logic and UI elements for accurate calculations and simulations. For our calculator and simulator, we used an AI model to scrape data sources for weights to use in our calculations.

Challenges we ran into

We faced several challenges during the project. Initially, our limited knowledge of Git made version control difficult, leading to some struggles. Additionally, our calculators didn’t function as expected at first, prompting us to conduct research to determine the appropriate weights for the calculations. Finally, we encountered significant issues when deploying the site, but we successfully resolved them in the end.

Accomplishments that we're proud of

Overall, we are proud to have developed a fully functional web app that effectively meets our objectives. It collects data and presents information in a clear and accessible manner while offering valuable flood preparedness tips. We are also pleased with the project's potential for real-world applications in flood risk assessment, as it could genuinely assist individuals and communities in preparing for floods.

What we learned

Through our research about floods, we all gained insight into the factors which contribute to flood risk and how vegetation can be used to reduce the risk of floods. Ultimately, by doing this project we learned a lot about how to create visually appealing websites through our use of ReactJS and tailwind to build our UI for the FloodForecast site. We also learned a lot about how to collaborate on a project through Github with version control. We gained valuable problem-solving and debugging skills by handling challenges related to calculations, UI issues, and refining the project through iterative testing and debugging.

What's next for FloodForecast

With FloodForecast, it’s clear how our initial concept of a flood risk assessment calculator could extend to other climate-related natural disasters, such as earthquakes and hurricanes. Alternatively, we could delve deeper into the flood component of the app by incorporating enhanced data sources, such as APIs that provide real-time data, historical flood events, and climate models. This would enable us to deliver more accurate flood risk assessments based on the latest information.

Share this project:

Updates