DEV Community

Cover image for Not just another Coronavirus (covid-19) dashboard with live statistics

Not just another Coronavirus (covid-19) dashboard with live statistics

Tomer Ovadia on April 04, 2020

So many Coronavirus statistics websites are built these days! Sharing with you mine which is a responsive dashboard website I created presenting C...
Collapse
 
ksvrajesh profile image
Rajesh KSV

I tried to open, but it just loads and loads and loads. Tried on FF 76, Opera 67 and Safari (Normal and private mode). Is the site working fine ?

Collapse
 
rad_hombre profile image
Matthew Orndoff • Edited

Same issue. Not working on Chrome, Firefox, or Edge.

Maybe he's being hugged to death with requests.

Looks like a great project though.

Collapse
 
otomer profile image
Tomer Ovadia

Hey @rad_hombre , I'm sorry it didn't work for you, there was an issue in my logic, had to add another fallback on the first request. Can you please try again :) ?

Thread Thread
 
rad_hombre profile image
Matthew Orndoff

Works great now! Very fly. Thanks 🤙

Collapse
 
otomer profile image
Tomer Ovadia • Edited

Sorry @ksvrajesh - Please retry, I experienced some temporary issue.

Collapse
 
aleksandrhovhannisyan profile image
Aleksandr Hovhannisyan

Hmm, still can't access it.

Your time to interactive on mobile is also 18s, which is painfully slow:

developers.google.com/speed/pagesp...

Thread Thread
 
otomer profile image
Tomer Ovadia

Thanks for the feedback @aleksandrhovhannisyan but I tried most of the browsers and seems like its working, can you share the problem? Also, regarding the performance results, considering the fact it's only a pet project 🐶, I didn't even start to optimize things, might be the a future goal tough. What has motivated me over performance this time is the time-to-market metric.

Thread Thread
 
aleksandrhovhannisyan profile image
Aleksandr Hovhannisyan

but I tried most of the browsers and seems like its working, can you share the problem

Sure! I'm on Chrome Version 80.0.3987.149 (Official Build) (64-bit).

It just hangs on the loading indicator and never loads the app.

Thread Thread
 
otomer profile image
Tomer Ovadia

I was just able to run it on this version, may I suggest that you use Hard Refresh?

Just open the Chrome Dev Tools by pressing F12. Once the chrome dev tools are open, just right click on the refresh button and a menu will drop down. This menu gives you the option of doing a hard refresh, or even clearing the cache and do a hard refresh automatically.

Thread Thread
 
aleksandrhovhannisyan profile image
Aleksandr Hovhannisyan

Yeah, idk, I did a cache clear + hard reload; still hangs on the loading screen. I also disabled my adblocker, but that didn't really change anything. No errors in the log.

Collapse
 
ksvrajesh profile image
Rajesh KSV

Works now. Nice UI design :)

Collapse
 
itachiuchiha profile image
Itachi Uchiha

It looks amazing. But I want to say something. May it be good that the header container sticky. For example;

.header-container {
    position: sticky;
    top: 0;
    z-index: 1002;
    background: #060818;
}
Collapse
 
otomer profile image
Tomer Ovadia

I love your suggestion @aligoren , Thank you.

Collapse
 
negoziator profile image
Lars Christian Schou

Nice design 👏

Do you know, you cannot scroll when scrolling from the elements (putting your finger on top of an element) ? You have to start scrolling from between each element.

Might not be easy to fix, since the elements are interactive.

Very good job you did 👍👏

Collapse
 
otomer profile image
Tomer Ovadia

Thank you @negoziator 👍 ! And that's a nice catch, my tasks list gets infinite now :)

 
jonrandy profile image
Jon Randy 🎖️ • Edited

Just sits on the loading spinner. Console reveals the following:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://ipapi.co/json/. (Reason: CORS request did not succeed).

Thread Thread
 
otomer profile image
Tomer Ovadia • Edited

Thank you @jonrandy , I'm going to handle this and to reply here once fixed!

Edit: I just provided a fallback around this, @adam_greenough @aleksandrhovhannisyan can you please also try again :) ?

Thread Thread
 
aleksandrhovhannisyan profile image
Aleksandr Hovhannisyan

It works now, yes

Thread Thread
 
otomer profile image
Tomer Ovadia

Thank you

Collapse
 
ricoet22 profile image
Kamil Pawlak

Just two things:

  • bear in mind that flag emojis are not supported in Windows (a country code is being displayed instead), which is important if you're targeting all platforms
  • if your target audience is also outside the US, using month/date/year date format might be confusing for non-US people that may mistake it with date/month/year, adding an explanation (like 4/5/2020M/D/Y) or a date format picker will be helpful
Collapse
 
otomer profile image
Tomer Ovadia • Edited

Thank you for the great feedback @ricoet22 .

bear in mind that flag emojis are not supported in Windows (a country code is being displayed instead), which is important if you're targeting all platforms

I actually did not know that, I will adjust my code accordingly.

if your target audience is also outside the US, using month/date/year date format might be confusing for non-US people that may mistake it with date/month/year, adding an explanation (like 4/5/2020M/D/Y) or a date format picker will be helpful

You are also right about the date format.

Did add these to my list of improvements.

Collapse
 
mazentouati profile image
Mazen Touati

Congrats! I like the diversity of options available and interactivity. I would like to give you some feedback regarding the UI: you can make a better results by working more on white spaces. Some area are tightened together and some places are over spaced. For example for the data tables there's wide horizontal spaces that made me lost reading the data multiple times ( data table that's shown withing an individual country ) while some graphs have unreadable values due to tight space.

for the endless loading experience it's because the Adblocker will block this URL => "ipapi.co/json/". Your code apparently not expecting the request to fail.
probably you need to refactor the following Line and make it fall back to world data when it fails.

Good luck

Collapse
 
otomer profile image
Tomer Ovadia

Thank you for your great feedback @mazentouati ! Just making sure, you are referring only to the country view? or both the main one too?

As for the issue around ipapi, I just solved this, and this community is amazing, thank you for noting this.
Please retry again and LMK if you think it's valid now.

Collapse
 
mazentouati profile image
Mazen Touati • Edited

It's my pleasure Tomer. Yes for the data table I'm referring only to country view. For example this country with few data in its table coronavirus-epidemic.com/?country=SL see how spread the table will look.

A quick UX hack is to align your numerical columns to the right. It will help users compare values easier.
Also, fixing the table head on scrolling is a great help too as shown here: worldometers.info/coronavirus/
if you havn't read it yet, this article will give you a great insight and exposure on designing tables that work: Design better data tables

For the endless loop, well done it's working now. However, I've cleared my cache first to access it. Consider adding a versioning to your assets to force the browser of returning users to reload the file rather than serving it from its cache. For example app.js?v=5, ideally it would be a unique value so it's guaranteed to be reloaded. Browsers will cache GET requests usually so by changing the request query parameters we will trick the browser into thinking it's a new resource so it will load it again.

Thread Thread
 
otomer profile image
Tomer Ovadia • Edited

Thanks for elaborating around this @mazentouati . I definitely agree on both the table headers adjustments and the cache busting optimization! I am planning to do several changes soon after this great feedback.

Collapse
 
dazza91 profile image
Darren Hill

Smart design I will bookmark it

Collapse
 
otomer profile image
Tomer Ovadia

Thank you @dazza91 :)

Collapse
 
griffinfoster profile image
Griffin Foster

Hey Tomer, this new app has an amazing UI and I am a huge fan! I am just curious how long it took you to take this idea and see it through to where it is now. In addition, are you monetizing / do you plan to? And because some pages are being flagged and restricted because of the "virus" keyword, did the government reach out to you about anything? I ask only because I am considering doing something similar to this and just want to get as much information as I can before I get going.

Collapse
 
otomer profile image
Tomer Ovadia

Thank you @griffinfoster for sharing! I did spent few weeks on this. Currently I don't make any profit from it since I started this as a pet project, but it could be nice though, why do you ask? About the government reaching to me, I am not sure I understand what do you mean, why should they? The restricted thing I mentioned in the post is mostly around VPN policies (for example tech employees who has VPN installed on their machine) or Antivirus rules that thinks it makes sense to block a website with the word "virus" (even though it is a legit word). There might be some Adblockers too though I did not tackle one that blocked an entire domain. Hope it helps :)

Collapse
 
htnguy profile image
Hieu Nguyen • Edited

I love the dashboard. You really did an awesome job.

This is a detail thing, but when you click on one of the countries on the map, it would be nice to highlight or add special styling to the selected country. When I first saw it, I thought it wasn't working lol.

Otherwise, 👍

Collapse
 
otomer profile image
Tomer Ovadia

Thank you @htnguy !! I think it's a great Idea, will definitely add this :)

Collapse
 
bdeepak23 profile image
Deepak Bhaskaran

Very cool UI. I built a simple one covid-dashboard.herokuapp.com/ but mostly using Java and Spring boot

Collapse
 
otomer profile image
Tomer Ovadia

Lovely! Great work @bdeepak23 :)

Collapse
 
slotix profile image
Dmitry Narizhnyhkh

Excellent job! 👍
Please check out our COVID-19 widgets and simple API.
Similar to your website, our widgets show live statistics local to a visitor depending on one's location

Collapse
 
stokry profile image
Stokry

Is this template that you use for this dashboard: : designreset.com/cork/ltr/demo8/

Collapse
 
otomer profile image
Tomer Ovadia • Edited

Yes but it has few diffs

Collapse
 
stokry profile image
Stokry

Ok, if you say so.

Collapse
 
nedimf profile image
Nedim F

Awesome design, website is working awesome too. Great job.

Collapse
 
otomer profile image
Tomer Ovadia

Thank you @nedimf :)

Collapse
 
haikelfazzani profile image
Haikel Fazzani

I disabled AdBlock, it works fine.. Good job

Collapse
 
joamuleiro profile image
Joaquín Muleiro

Beautifully built site! Congratulations. Though may I ask, how are you collecting all the countries' data? Are you using an API or are you updating them daily somehow?

Collapse
 
otomer profile image
Tomer Ovadia

Thank you @joamuleiro ! I am using several APIs, I shared the list in this post. Hope this is helpful :)

Collapse
 
meir profile image
Meir Roth

wow looks good!
great job 👍

Collapse
 
alelepd profile image
Alejandro León ✏️

Good idea!
I noticed an error on Chile's continent, it says Chile is in Africa, but it is actually in South America.

Collapse
 
otomer profile image
Tomer Ovadia • Edited

Thank you I have just added this to my tasks list :)

Edit: Fixed :)

Collapse
 
kiromousa profile image
kiro

really good Tomer!!

Collapse
 
chan_austria777 profile image
chan 🤖

there's a widget that defaults to the current country of the viewer. Would you mind sharing how to do that?

Collapse
 
otomer profile image
Tomer Ovadia

Hi @chan_austria777 , sure! I am basing my decision of what country to auto-select according to the client's public IP address. Note that it's not 100% correct since you might be using a VPN or something that alters your IP address but for my needs it was enough. To detect the IP address I am using the following ipapi.co API, specifically the following /GET ipapi.co/json/ endpoint which results with a simple JSON that you can retrieve the user's country code from.

Collapse
 
otomer profile image
Tomer Ovadia

Super nice @jarovarga :) I can understand you!