nibble0101 / coviweb

A Single Page Application(SPA) which displays up-to-date COVID-19 statistics.

coviWEB

This is a single page application which displays up-to-date COVID-19 statistics built using React.js. The project is hosted live on Netlify and it can be viewed Here.

Data Source

Covid-19 data displayed in this application is obtained from NOVEL COVID-19 API. A list of COVID-19 related articles is retrieved from New York Times API and COVID-19 facts from Johns Hopkins.

Dependencies

In addition to using HTML, CSS and React.js for building this project, i have also used d3.js for data visualization, react-router-dom for managing the routes and react-reveal for animation. For a full list of dependencies, check the package.json file.

License

MIT

Live Project

The project is hosted live Here on Netlify.

coviweb's Issues

Refactor styles

Refactor CSS so that each component has a separate CSS file.

The page shouldn't be possible to scroll if hamburger menu is open in mobile view.

If a client is using a mobile device and the hamburger menu is open, the scroll behavior should be disabled. This is however not the case. If the browser is reduced to the size of a mobile device, and the hamburger menu is opened, it is possible to scroll the document.

This, I believe, can be solved by toggling a lock-scroll class on document.body and in the CSS, something like .lock-scroll{overflow: hidden} will do.

COVID-19 data not available for Sudan in visualizations page but available in dashboard

If you navigate to the visualization page, Sudan currently doesn't have COVID-19 data yet in the dashboard, there is data for Sudan. I suspect there is a mismatch between ISO codes from topoJSON data and the NOVEL COVID-19 API. Other countries without COVID-19 data are Somaliland, Turkmenistan and North Korea. The last three most likely do not have COVID-19 data available from the API but it is also worth checking out to be sure.

Use of data stored in local storage doesn't have a time frame.

In the Press component, data is fetched from the New York Times API and stored in local storage so that the data is retrieved and used if it already exists next time the client navigates to this page. The data already in local storage however is used indefinitely yet new articles are being added to the API periodically.

It is therefore important to add a time frame within which data in local storage is usable. This can be 24 hours, 48 hours e.t.c
This can be achieved by adding the current date from Date.now() and deferring data retrieval from the API if the difference between Date.now() and date in local storage is less than 24 * 60 * 60 * 1000. Of course the 24 is if it is decided that the "expiry" time frame is 24 hours.

Add serverless functions

Add server-less function from which data can be fetched.

Refactor app

The whole app needs refactoring so that best practices are integrated.

Add open graph meta tags

Add open graph meta tags to the HTML file

Make app more accessible

The app is not accessible currently. There is need to work on color contrast and outlines.