Create account

DEV Community

Ankit Beniwal

Posted on Sep 17, 2020

Spring + Thymeleaf + Bulma + Charts = Awesome Covid Trend Tracker

#showdev #java

Hi Folks,

I hope you all and your families are safe.

I know I am a bit late for a corona tracker app but I think better late than never. This is not a very unique idea but I have tried to present it differently.

And this is my first attempt on java spring. Thus, I will appreciate your precious feedback.

So, When I initially thought about creating a spring application, I had no idea of what I will create. And I started surfing the web for ideas and datasets. I had to choose a not so advanced idea so that I can complete the project fast and build my confidence. Then I found this github repository where covid data is updated daily. They have hosted CSV files where data is updated automatically everyday.

After digging a bit, I came across Apache Commons CSV library which made it easy for me to use that CSV file in my project.

I decided to render a line graph for every country to make it more presentable. And that's how I found highly customizable Google Charts. Fetching Data from CSV was easy, as was using a templated google line chart. But Converting the CSV data to the format which chart needed as input was not that easy. I had to use HashMap of ArrayLists of ArrayLists.

First Level ArrayList - for day wise record of a country from january. (Each record contains three different values for Total Cases, Recovered Cases and Deaths)
Second Level ArrayList - for all countries

This was fun 🤩🤩. If you are interested to know all the nitty-gritty of the implementation. Check the source code.

For frontend I decided to use Bulma CSS due to its lightweight size and ease of use. And for templating, I think thymeleaf is obvious.

Result page looks like this:

I am open to positive criticism, feedback, chocolates, repo stars, coffee. Check out the live version hosted at heroku https://covid-trend-tracker.herokuapp.com/.

If you are willing to contribute, then create an issue and let's discuss about it or you can skim the code to tell me what I did the way I shouldn't.