FloodWatch

Inspiration

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 weatherapi.com 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

agile
csv
express.js
node.js
oci
react

Created by

I worked on the backend of our project; which takes care of storing points, getting weather information for a specific location, and sending up to date location data to our heat map via an express REST API.

Trevor Dolbow
I primarily worked on the front end of our application. I worked on the overall layout of the components and touched almost every part of the front end. I learned more about React and it's appropriate use cases.

Andrew Roberts
I worked on the front end, integrating the heat map into the web page, as well as getting the react website to deploy on github pages.

Matthew Gwin
I worked on some of the components of the page including the pop-ups, the Twitter embedding, and the general design. I enjoy designing/ UI/UX so making the site user-friendly was right up my alley. I also dipped my toes in other parts of the project that I was unfamiliar with and learned more about concepts like API requests and middleware.

Yasmeen Elzamek