The world has been hit by novel coronavirus pretty badly. Cities around the world have been locked down to prevent the spreading of novel coronavirus. Covid19 is the disease created by this novel coronavirus.

I have created a website where people can compare historical data of covid19 situations among different countries.

Summary

Website link: https://covid19comparison.iamsabir.com

Source Code: Covid19CountryComparison Github Repo

Framework used: GatsbyJs

Hosting Solution: Zeit

Expectation about Covid19 Comparison Website

I wanted to show covid19 related data of countries visually. Also, an important target was to let people compare data of different countries in the same timeline.

Challenges

I faced some challenges in my journey. Here I am explaining those.

Data

The first problem was data. Data is the most important thing. There are lots of different APIs where you can get various types of data. Some APIs are open for all. Some are not.

I searched for open and free APIs which will serve my purpose. Pomber JSON time-series data, corona.lmao.ninja and Covid19 API helped me a lot to build the website.

Choosing the Right Technology

We now have a very sweet problem in the software industry. There are too many programming languages, frameworks and libraries out there. We now have to choose technology very carefully considering our skills and desired work.

I wanted this website to be either server-side rendered website or a static one. These types of websites perform better in the case of SEO.

I will be explaining my choice more in the next section.

Technological Options

I am comfortable working with Java ecosystem and ReactJs ecosystem. So, NextJs and GatsbyJs are two very good and convenient options for me. I have worked extensively with both frameworks.

NextJs supports both static site generation per page and also server-side rendering. With its 9.3 version release, NextJs has gone to a different level. New methods like getStaticProps, getServerSideProps etc. are helping NextJs to become a true hybrid framework.

GatsbyJs, on the other hand, is a Static Site Generator. GatsbyJs also allows us to make API calls on the fly. It is a great framework packed with various out of the box plugins. It utilizes modern technologies like GraphQl, React, etc.

Now, for hosting option, I wanted to use a serverless hosting solution. This would help me to worry less about managing servers. There are a lot of serverless hosting solutions like Zeit, Netlify, Firebase etc.

Solution

I have a full-time job. And after office hours, I spend a lot of time with family. So, I needed a way to build this website fast without affecting my normal routine.

I choose GatsbyJs for creating the website. Although NextJs has some pretty good static site generation options, GatsbyJs is built for Static sites. You can deploy GatsbyJs in almost any kind of servers and hosting services. NextJs can be deployed in Zeit's serverless hosting solution. But, GatsbyJs has far more alternatives.

Also, GatsbyJs has a vast array of plugins and starters. This plugins and starters help you to build website fast.

For hosting solution, Zeit was an obvious solution for me. For personal projects, Zeit maybe has the most generous free tier. They literally offer unlimited bandwidth, build time, custom domains and projects for personal websites. With the help of webhooks and their CLI, deployment is something, you do not need to even worry about with Zeit. So, I did not much time to setup domain, CI/CD and other deployment-related works.

In the Challenges section, I listed 3 sources from where I fetched data. I needed to modify JSON output from those APIs. I chose Google Cloud Platform's Cloud Functions for this task. For small jobs like this, GCP functions, AWS lambda, etc. could be a very fast and convenient option.

And for the visual representations, I chose ChartJs. ChartJs is very easy and straight forward. So, to complete the website in a minimum time possible, I used ChartJs.