Skip to content
loading...

Coronavirus tracking website made with Vue and Node

wobsoriano profile image Robert twitter logo github logo Updated on ・1 min read

Hello everyone!

I'm proud to announce my coronavirus (COVID-19) tracking website (https://the2019ncov.com). It has twitter updates from the World Health Organization and timeline of cases scraped from bnonews.com.

Here's a demo of the main functionality:

the2019ncov

I built it with the following:

  • Vue and Vuetify
  • Express (Cheerio for web scraping)
  • ApexCharts
  • Twitter API
  • Leaflet

It's heavily inspired by Johns Hopkins CSSE dashboard.

I also made it public so you can visualize your own!

Frontend: https://github.com/sorxrob/2019-ncov-frontend
Backend: https://github.com/sorxrob/2019-ncov-api

UPDATE: Added light mode!

twitter logo DISCUSS (19)
Discussion
markdown guide
 

Looks good. I'd consider making the dot sizes representative of the values on the map (i.e. make the dot over Hubei province larger than the one over Sweden), and using ISO 8601 for dates (but that's one of my pet peeves / personal preference).

 
 

Awesome, looks great.

One little issue I've noticed, the dots don't repeat, so if you scroll East, they don't appear over North America or Europe at all, and if you keep scrolling in either direction, they don't appear over China either.

Not a big deal, and I don't know how hard it'd be to fix that in leaflet maps, but worth mentioning.

Thank you. Will start planning on the fix!

 
 

Awesome (and useful) project. Congratulations.

Easier to ask: how are sorted the listed data (in the navigation drawer)?

 
 
 

results are way off. Clicking San Francisco brings up a province in Canada??

 
 
 
 
 
Classic DEV Post from Aug 4 '19

You're not worth hiring unless...

Robert profile image
Apparently, this user prefers to keep an air of mystery about them.