COVID 19 | Coronavirus Tracker is an app designed and developed to keep track of the latest trend development of SARS COVID-19, featuring various data and statistics such as confirmed, active, recovered, new and death cases, represented in form of charts and a choropleth map.
Cases data is being taken from trusted sources of Worldometers and JHUCSSE with the help of Open Disease Data API and design inspiration taken from Johns Hopkins University COVID-19 Dashboard.
Users can easily search for specific country using search bar and other components
Interactive choropleth map displays popup with details for each country.
Users can hover on any of the charts to see details of date and number of cases
Data displayed in charts and tables can be sorted by multiple parameters: by case type, weekly or daily, and by period of time.
App will automatically set color scheme to the user's system preferred mode, but they can always toggle it using the Dark Mode switch
Pixel-perfected for all screen sizes and resolutions.
Users are able to submit a bug report form to the Netlify dashboard.
The app is powered by React library with node.js at its core. it is initialized with create-react-app and it uses Chakra UI components throughout the whole UI.
For chart data representation, the app uses Chart.js library with react-chartjs-2 wrapper for React.
Map component is build with the use of React-Leaflet library, with country polygons being drawn from Datahub.io World GeoJSON.
As for the data, the app makes an async/await .GET request to the Open Disease Data API using Axios processing the data to the needed format and distributing it to all the components as requested.
-
Install and use the correct version of Node using NVM
-
Install dependencies
npm install
- Start the development server
npm start
- Generate a full static production build
npm run build
- Preview the site as it will appear once deployed
npm run serve