COVID-19 Tracker is a web application that lists COVID-19 case count of countries around the world.
The case count is categorized into three:
- Confirmed cases: includes all types of reported cases, as well as recoveries.
- Deaths: a separate count for all deaths caused by COVID-19
- Recoveries: a subset of the confirmed cases count, presents the number of discharges/patient recoveries
It is built using web components with the help from LitElement. The project was scaffolded using open-wc's CLI.
For the data source, it uses the free COVID-19 API by api-sports from RapidAPI.
- Country search: user can search a country via its name.
- Coverage filtering: user can filter the coverage of the list, either worldwide or by continent. Total count per coverage is also displayed.
- Case count sorting: user can sort the list via case count category in ascending or descending (default) order.
- Country pinning: users can pin a country that would stay on top of the list. It is saved via
localStorage.
- Dark mode: the app's theme adapts to the device/browser's current theme.
- PWA: this is a progressive web app, it can be installed on supported devices and can work offline.
For offline, the data for the last online session would be used.
This is a redesigned spin-off of once was the practice app for my current employer. It was part of the initial tasks given.
If you'll check the initial commits, there are a lot of initial files. The from-scratch commits can be found on a private repo.
I asked permission to my boss if I can use that app and put it on my personal portfolio. And it was granted. Yay 🥳🎉
This is the original app, the ones I used on our final presentation.
To run the app locally:
npm install
npm run start
# requires node 10 & npm 6 or higherI want to thank you the following persons for being a part of the development of this app 😍🥰
- Boss Mikko, Boss Niko, and Sammy, for all the help, including lit-element basics, app structure, and code review during the initial app development
- Kharisa, Blessy, and RC, for acting as my design consultants, as well as providing the initial comments and suggestions interface-wise
- Jemil and Camille for testing the app, as well as providing suggestions for improvement
- and you, for taking the time to read this long README.md 🤣