Vancouver Beaches E. Coli Tracker

• 

  Map with Live Beach Colours

Inspiration

Vancouver has some of the best beaches in Canada. Unfortunately due to outdated combined sewer stormwater systems, many of these beaches are often dangerous to swim in due to E. Coli. This project was inspired to make E. Coli information more accessible and build support for separating sewer stormwater systems.

What it does

This app displays Vancouver beaches on a map with a colour coded dot to indicate water safety. All beaches are also displayed in a table with their name, safety status, E. Coli level, latest E. Coli sample date.

How we built it

This project was built as a full stack using: Front end: React Map integration: Leaflet Backend: Flask Web scrapper: pdfPlumber Hosting: GitHub Pages (Frontend), Render (Backend)

Challenges we ran into

This was my first time building an interactive website so designing the stack was challenging. The E. Coli data is hosted in pdf format which was difficult to scrape. Designing a user-friendly way to display safety levels was challenging as the initial table was difficult to read alone.

Accomplishments that we're proud of

I am proud of creating this as my first full stack interactive website. The map colours will update based on the latest E. Coli report.

What we learned

As I had never done full stack before I learned how to use Javascript, React, Leaflet, Flask, pdfPlumber, how to host a website with a front end and backend, and how to design a full stack.

What's next for Vancouver Beaches E. Coli Tracker

More information on the dangers of the combine sewer stormwater systems to contextualize high E. Coli levels, expanding the system to other provinces, improving mobile compatibility.

Built With

• css
• flask
• html
• javascript
• leaflet.js
• pdfplumber
• python
• react