Dom Vournias
The COVID-19 Tracking Tool is a personal project that I developed to track real-time cases using the COVID-19 Response API in Greece. I took the decision to create the tracker because of the current situation. At the same time, I thought it would be a great exercise of my API implementation skills. The project took around two weeks to be completed.
Made with
The tracker could be built only by using vanilla React, but I decided to code it with Gatsby, because it's super fast and a great exercise as well. As for the styling of it, Tailwind was my first option, but during the first build I noticed that some features would include extra styling, so eventually I picked SASS for its simplicity.
Covid-19 Tracker is the first Greek web app that shows statistics of Covid. There are many websites that show data worldwide, but I decided to reduce the data and create a specifically targeting regions of Greece.
Key features
The first feature is divided in four sections displaying the overall cases, while under every block I display the daily stats. Followed up with cases by region where I filtered the query to first view the region with most cases. Also, I included a graph where the visitor can see the case rates visually.
(a)
(b)
(c)
The complexity of
The most complex feature of the tracker was the map. The circles drawn on the map are based on a mathematical equation relative to the number of cases and the range and circumference of the circle. The circle coordinates had to be connected with the API and placed on the map accordingly.
Overall, the Covid-19 tracker broadened my view and skills dealing with APIs and helped me understand better when to use certain frameworks. The app gave me insight and inspiration in challenging my coding skills.