Covid-19 Tracker

Apr. 24, 2021

The first commit of my Covid-19 Tracker app. You can find it here, covid-tracker.

Technology

The application was built using Vue.js as the front-end framework and Tailwind CSS for styling. The data is fetched from the covid19api.com.

Component

The app consists of a SideBar which contains the Header and a list of links to different visualization that will be implemented later. For now, the navigation is not working, but the idea is that currently active tab will be bold and highlighted whereas inactive tabs will be gray out.

Then with the main body, we hav a DataTitle that display which country the data belongs to, as well as the updated date. Next, we display the stats for TotalConfirmed, TotalDeaths, and TotalRecovered the DataBox components. Below the boxes, we have a country selector which will update the data based on country. The Clear button will refesh the data back to the Global stats.

Lesson Learned and What Next

Styling is not my strong point, and to get to this point, I have spent 3/4 of the total time, looking through documents, example, fine tuning every details. And it still not looks decent :).

The next feature I am going to implement is to have a list of countries sorted by Top Cases, Top Deaths. A choropleth map and a pie chart of some data. I will look into Google Charts for the choropleth map and pie chart.