Covid-Recovery Tracker

• 

  UI of the COVID-19 Vaccine tracker and News Interface

• 

• 

  News Section

Inspiration

Given the current state of the COVID-19 pandemic, the recent approvals for numerous vaccines are a promising step towards returning to our normal lives. However, the fast tracked research and development processes for preparing this vaccine have caused many people to doubt its effectiveness and are concerned about potential side effects associated with it. Though this is a valid concern, there are many misconceptions about the vaccine’s side effects including rumours of microchips being implanted via the injection, or it potentially altering your DNA. For the average person, such rumours are enough to cause distrust in the available vaccines and many people make judgments without taking the time to fully understand the vaccine. This tool is meant for the average person to understand the covid situation and the importance of the vaccine in a concise manner.

What it does

The web page displays covid-19 statistics in a user friendly interface. It also includes information regarding the covid-19 vaccine as an effort to reduce the stigma surrounding it. Additionally, there is a list of relevant news articles that are displayed based on the region the user is currently viewing.

How we built it

From this past weekend, we are extremely proud of our efforts and the web-page our team came up with. More importantly, we achieved our goal of creating a page that de-stigmatizes the Covid-19 Vaccine.

Challenges we ran into

We ran into challenges regarding connecting our various different data fields to the front end. We were pulling data from various sources such as covid-19 data and news from all provinces/territories as well as the country as a whole. Because of this, it was difficult to create a method to quickly update our current visualizations and access the new data fields without changing the visuals that we were using. Fixing this took a lot of trial and error and we attempted several solutions but learning how to create an adaptive visual and implementing a quick and flexible backend will definitely help with future projects.

We also wanted to build an algorithm that could predict future covid-19 hotspots using current data. Unfortunately, due to time constraints, we were not able to do so but it is something we would definitely like to work toward going forward.

Accomplishments that we're proud of

This web-page was built using a react-template by MaterialUI for the frontend and express.js for the backend. Our backend is hosted on repl.it. For all the data displayed on the page, the Government of Canada Covid data API is used, and yahoo news is scaped to show relevant news articles based on the region selected by the user.

What we learned

While integrating our application into a react theme template, we got to experience and play around with react structure and styling that none of us were familiar with from the template. As we started adding and modifying more code, we got to understand the design and the react component cycle of the theme, and got quite fluent at adding, modifying, restructuring components as we required by the time we completed our app. As this experience has definitely made us more comfortable with using themes and templates, this will become a useful skill for future projects since we will be able to do integration faster and more prepared.

What's next for Still thinkin bout it

We hope to eventually develop a smart algorithm that can predict future covid 19 risk using existing data. We also hope to improve the UI and add more data fields such as daily changes fields visualized. The end goal of our web app is not only to eliminate misinformation surrounding the virus but also to act as an aggregator for all covid-19 related news and information for Canadian citizens so they can quickly learn everything they need to know about the virus without having to visit several sources.

Built With

• express.js
• javascript
• react