Water Quality Report

• 

  Water Quality Report UI

• 

• 

• 

• 

• 

• 

• 

• 

• 

Inspiration

Many other applications have used crowdsourced data to provide relevant information to users based on their location. However, the use of crowdsourced data for water quality measurement was lacking, so I decided to develop a simple system to aggregate water quality data from users with an interface similar to AirNow.gov.

What it does

Water Quality Report aggregates water quality observations of rivers and streams from users. Past observations are displayed on a map based on where the observation was submitted. In addition, users are provided with a water quality report for their area based on nearby observations from the past 24 hours. Users can also see trends in water quality through a graph in the right sidebar.

How we built it

The backend uses node.js and express.js. In order to save development time, user observations are stored in memory within an array instead of on a persistent database. The frontend uses Bootstrap for basic styling and theming, leaflet for the map, and chart.js for the trend graph.

Challenges we ran into

Since a frontend framework was not used, it was somewhat challenging to keep the state and UI in sync. In addition, the lack of a framework also made list rendering difficult as I had to manually create and add list elements to the DOM. Furthermore, customizing the leaflet map to implement custom marker rendering was time consuming.

Accomplishments that we're proud of

The UI and visualization of the observations of the map turned out very good. I am also proud of implementing the user-specific water quality reports based on recent nearby observations.

What we learned

Since this was my first time using Bootstrap, I was able to become more comfortable with the framework and it allowed me to save time by reducing the amount of styling I had to do. In addition, I was able to learn more about the customization capabilities of leaflet which were used to develop the observation map.

What's next for Water Quality Report

In order to make the project more maintainable, I would probably rewrite the application to use a frontend framework like Vue. Moreover, I would begin to use a more traditional database to store the user observations in order to improve performance and make the data persistent. Incorporating outside datasources would also be a good next step.

Built With

• bootstrap
• chart.js
• express.js
• javascript
• leaflet.js
• node.js