Since all of us are from the State of Wisconsin, we decided to do something for the incessant rains and floods in the State. Recent floodings and its consequences in the Hilldale area in Madison and various campus spots urged us to come up with our project.

What it does

We implement a web-based application that can help the residents to get alerted to possible flooding in the near future. The user can log-into the website and after it is authenticated, he or she can enter his or her address. Based on that, the user will get a 'Danger' score, rainfall prediction graph for a week and a personalized note of the flood risk.

How we built it

For the front-end, we used React and React Bootstrap with JSX elements throughout our code. This involved the responsive designing of the landing page (user-authentication) and the home page. The back end runs on Python, Flask, and AWS. We use Flask, a python microframework for web dev, to build a central API around the other APIs we are using (mapbox for geocoding, darksky for weather, and Jawg for elevation). This allows clear and consistent API calls from the client while handling the rest on the server. Our users are stored in an AWS DynamoDB table and receive a cookie upon successful login. The API is hosted on an AWS EC2 t2.micro instance which accepts HTTP.

Challenges we ran into

The main challenges we ran into were the following:

CORS Blocking between the client and the server, Routing React pages on specific events, Browser Caching, CSS styling on child components

Accomplishments that we're proud of

This was the first full-fledged project in which we used React and it was a lot of fun (maybe not) figuring out the flow and the components of the class. Apart from that, we were happy to get the AWS server and database running and the successful passing of a cookie on a valid authorisation.

What we learned

We learned the intricacies of React, setting up of an API, using different APIs and sending data back and through the servers and essentially the entire working of a client-server setup in Flask.

What's next for Flood Watch

We believe this can be taken to the next level where users can get text message notifications real-time and can further select contacts to share it with. We also believe that more number of parameters (such as type of soil etc.) can come into play to better decide the risk factor.

Share this project: