DEV Community

Cover image for I built a covid-19 update trackeršŸ’» during quarantine, you can contribute too!
kapeel kokane
kapeel kokane

Posted on

I built a covid-19 update trackeršŸ’» during quarantine, you can contribute too!

The backdrop

The covid-19 outbreak has hit the world like a storm and times have changed more quickly than we could ever imagine.
Like most of the IT companies, the one that I work for has mandated work from home for the safety of the employees. My own country, India is fighting a very hard battle with a 21-day Nation Wide Lockdown in place.

With such measures being taken, I was keen on finding the severity of the situation in other countries and wanted to know how they were handling the problem.

To investigate the same, I tried to look online for dashboards available that provide the relevant data. Some of them were boring old tables while others were quite artistic like these:

https://covindia.netlify.com/
https://www.covidvisualizer.com/

But they did not seem to fulfil the requirement I had, i.e. visualize the scale of impact on different countries in a single graph. So I set out to build a covid dashboard myself.

The process

In the beginning, I thought I would scrape the WHO official site for the numbers that were required, deploy a Node.JS endpoint that would return me those numbers in the form of an API, and then, call that API in the front end. I later found out this awesome API that was doing exactly the same:

https://github.com/NovelCOVID/API
Alt Text

which was exposing the data based on numbers maintained by:

https://www.worldometers.info/coronavirus/
Alt Text

So I thought I would use those.

For visualization, I thought I would go with BizCharts as they have the most diverse set of graphing APIs that I have ever seen. And for the framework, I went with ant design just because I am more comfortable with it.

After some tinkering, I was able to achieve the result that I wanted.
The Result
Alt Text

Do check it out yourself here:
https://kokanek.github.io/corona-tracker/
(You might want to refresh if you don't get the data right away as the API sometimes does not return data due to heavy load)

Here is the link to the github repo:
https://github.com/kokanek/corona-tracker

Do check it out. Also, let me know if you have any more feature suggestions based on the API available.

Cheers!

Top comments (9)

Collapse
Ā 
abdurrkhalid333 profile image
Abdur Rehman Khalid •

Very Nice Work Done, Here is a Simple Suggestion, You can add a simple pie-chart that can provide the insight of deaths, recovered, and natural cases as well.

At will provide a nice way to give insight for more facts.

Collapse
Ā 
kokaneka profile image
kapeel kokane •

Hey. Thanks for the suggestion. Could you elaborate what information can be displayed using the pie chart?

Collapse
Ā 
ashishkumarsinghh profile image
Ashish Kumar Singh •

Nice work kapeel. After reading your post, i also created one:
covid-19-india.now.sh/

Collapse
Ā 
kokaneka profile image
kapeel kokane •

Hey Ashish, nice work šŸ‘

Collapse
Ā 
silentsudo profile image
Ashish Agre •

Good job Ashish

Collapse
Ā 
fullstackcoder profile image
fullstackcoder •

Nice job! I also built a covi19 tracker last week:
coronapp19.netlify.com/

Collapse
Ā 
kokaneka profile image
kapeel kokane •

Nice šŸ‘

Collapse
Ā 
dbhaskaran profile image
Deepak Bhaskaran •

I really liked your UI, here is a simple version that I built using Spring Boot covid-dashboard.herokuapp.com/

Collapse
Ā 
kokaneka profile image
kapeel kokane •

Looks good. You can try to provide pagination too.