DEV Community

Robert
Robert

Posted on • Updated on

Coronavirus tracking website made with Vue and Node

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!

Discussion (19)

Collapse
patryktech profile image
Patryk

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).

Collapse
wobsoriano profile image
Robert Author

Thank you. I'll consider that!

Collapse
wobsoriano profile image
Robert Author

Dot sizes are good now :)

Collapse
patryktech profile image
Patryk

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.

Thread Thread
wobsoriano profile image
Robert Author

Thank you. Will start planning on the fix!

Collapse
maxdevjs profile image
maxdevjs

Awesome (and useful) project. Congratulations.

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

Collapse
wobsoriano profile image
Robert Author

Sorry, I don't understand. But thank you!

Collapse
maxdevjs profile image
maxdevjs
Thread Thread
wobsoriano profile image
Robert Author

It's not yet sorted but currently working on it.

Collapse
ooanishoo profile image
ooanishoo

Good work mate. 👏👏👏

Collapse
wobsoriano profile image
Robert Author

Thanks bro!

Collapse
ahmednrana profile image
Rana Ahmed

Beautiful. Which maps are you using

Collapse
wobsoriano profile image
Robert Author

Thanks! It uses leaflet map

Collapse
djpandab profile image
Stephen Smith

Yes this is excellent! This is inspiring. Great job.

Collapse
wobsoriano profile image
Robert Author

Thanks!

Collapse
bobwalsh47hats profile image
Bob Walsh

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

Collapse
wobsoriano profile image
Robert Author

Bug fixed!

Collapse
wobsoriano profile image
Robert Author

Thanks. I'll check that.

Collapse
otomer profile image
Tomer Ovadia

Nice work! Also happy to share mine :) coronavirus-epidemic.com