Crowdsourced information is a valuable resource when regular data collection techniques are limited. This idea inspired to create an application to display crowdsourced flood information in an easy to read format.

What it does

Floodwatch takes user location data and a one question questionnaire to determine if floods are occurring in areas around Delaware. If a flood is determined to be taking place, a pin on our map will be dropped to announce that there are floods in the area. When multiple floods are taking place in a single area, a heatmap is applied, warning users about areas they may want to avoid.

In addition to this functionality, Floodwatch provides a live Twitter feed of the Delaware Emergency Management Agency, which provides additional extreme weather and flooding updates periodically.

How we built it

We built this app with two separate components: -The Frontend React webpage

  • The frontend React webpage is based on the react JavaScript framework
  • The frontend React webpage implements a map library called leaflet to take care of the interactive heat map
  • The frontend React webpage uses the twitter imbedded API to get the live twitter feed of the Delaware Emergency Management Agency

    • The backend REST API
  • The backend REST API implements two request types: get and post; which are used to send and receive information from the front end, including weather and heatmap data points.

  • The backend REST API uses a weather API from to get weather information.

Challenges we ran into

  • The react framework severely kneecapped our productivity. React prevented us from properly connecting our frontend to our backend, which meant that some data had to be hardcoded into the frontend for demonstration purposes. The backend components are fully functional, so with additional time, the hardcoded data can be replaced with the functioning backend.

Accomplishments that we're proud of

We are proud of the fact that we created a compelling proof of concept for a crowdsourced flood tracker using a novel data visualization approach.

What we learned

During this development process, we learned about full stack product development. We also got to try out programming languages that we were relatively unfamiliar with.

What's next for FloodWatch

Floodwatch will be taken from a proof of concept where data hardcoded into the heatmap will be replaced with data saved and posted to our backend component.

Built With

Share this project: