Inspiration
In the past few months, the world has undergone a litany of disasterous events. Situations such as the Ohio train derailment and the recent earthquakes in Turkey, have inspired us to think deeply about common humanitarian issues that arise due to unexpected crises. Specifically, we took inspiration from the water issues that took place in Flint, Michigan. To give a bit context, in 2014 Flint, Michigan experienced a severe water crisis in which their drinking water was contaminated with lead and Legionella Bacteria. Our project aims to combat future crises like this on a national scale, enabling citizens all over the U.S. to be able to locate safe drinking water.
What it does
Project Safe Water effectively tracks the location of safe drinking sources in a small vicinity of the users location. When accessing our website, users are prompted with options to enter in both their state and county. Project Safe Water displays the pH level of the water, the turbidity, and the amount of the dissolved oxygen in the water based on location. Each of these state and county values is stored, converted into longitude and latitude, and plotted on a map in which the user can view. Afterwards, the user is provided with safe, clean drinking water choices in their vicinity
How we built it
We used JavaScript, CSS, and HTML on the frontend. On the backend side of things, we mainly used python and flask. In order to produce data regarding water quality we used USGS Water API, for mapping we used Google Maps API, and in the backend we used OpenStreetMap's Overpass API to collect the longitude and latitude of water sources. We used the Overpass API to build our own Proxy API, which in turn allowed us to create data sets of nearby water sources in the specified county.
Challenges we ran into
Turning a county name into the right code to query the api with
One of the first problems we ran into was being able to convert the county name into a readable code that could be used to query the api.
Adding the list of local accessible drinking water to a google map and displaying it on the html page
Locating a usable API that returns the location of water sources
Getting our Flask backend to interact with our JavaScript frontend.
Accomplishments that we're proud of
Aside from completing the project itself, our main accomplishments stem from being able to collect and display the locations of water sources in the area, creating a functioning website that displays correct information in a timely manner.
For starters, we're most proud of being able to integrate Flask REST APIs into our project. As developers, we're all relatively inexperienced when it comes to coding outside of an academic environment. However, after extensive amounts of trial and error, we were able to effectively use Flask to allow us to display various information about water quality.
Additionally, we're proud of being able to display google maps on our website while plotting out the locations of nearby water sources locations. Similar to Flask REST APIs, we aren't very familiar with Google Maps API. Although it took a good amount of troubleshooting, our team was able to complete the task within a reasonable amount of time.
What we learned
Our main takeaway from this hackathon was becoming comfortable with the usage of APIs. We gained plenty of insight on how Flask works and integrated Google Maps into our website as well. Additionally, this hackathon taught us important time management skills as well as being able to divy up positions properly.
What's next for Project Safe Water
- The ability for users to self-report poor local water conditions and other users to see if users nearby have reported low-quality water
- There is a lot more data in the USGS database that can be used to determine water quality more wholisitically
- Get the website running on a server so it is accesible to users nationwide
- On top of #3, potentially look into worldwide water data
Log in or sign up for Devpost to join the conversation.