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!

Top comments (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

Need a better mental model for async/await?

Check out this classic DEV post on the subject.

⭐️🎀 JavaScript Visualized: Promises & Async/Await

async await