Case Study: A Covid19 comparison website in less than 50 working hours
Tags: webdev, gatsby, covid19, casestudy
Published: 2020-04-10 12:10:21


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 href="https://covid19comparison.iamsabir.com/" title="Covid19 comparison website" target="_blank">a website</a> where people can compare historical data of covid19 situations among different countries.


![Covid19 Comparison](https://res.cloudinary.com/practicaldev/image/fetch/s--GWyUpsW0--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/i/3364xp59tdjba2tfpc62.PNG "Covid19 comparison website")

## Summary

Website link: <a href="https://covid19comparison.iamsabir.com/" title="Covid19 comparison website" target="_blank">https://covid19comparison.iamsabir.com</a> <br />
Source Code: <a href="https://github.com/Sabir001/Covid19CountryComparison" title="Source Code" target="_blank" rel="noopener noreferrer">Covid19CountryComparison Github Repo</a> <br /> 
Framework used: <a href="https://www.gatsbyjs.org/" title="GatsbyJs" target="_blank" rel="noopener noreferrer">GatsbyJs</a> <br />
Hosting Solution: <a href="https://zeit.co/" title="Zeit" target="_blank" rel="noopener noreferrer">Zeit</a> <br />

## 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. <a href="https://github.com/pomber/covid19" title="Pomber JSON time-series data" target="_blank" rel="noopener noreferrer">Pomber JSON time-series data</a>, <a href="https://corona.lmao.ninja/docs/" title="corona.lmao.ninja" target="_blank" rel="noopener noreferrer">corona.lmao.ninja</a> and <a href="https://covid19api.com/" title="Covid19 API" target="_blank" rel="noopener noreferrer">Covid19 API</a> 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, <a href="https://nextjs.org/" title="NextJS" target="_blank" rel="noopener noreferrer">NextJs</a> and <a href="https://www.gatsbyjs.org/" title="GatsbyJs" target="_blank" rel="noopener noreferrer">GatsbyJs</a> 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  <a href="https://zeit.co/" title="Zeit" target="_blank" rel="noopener noreferrer">Zeit</a>, <a href="https://www.netlify.com/" title="Netlify" target="_blank" rel="noopener noreferrer">Netlify</a>, <a href="https://firebase.google.com/" title="Firebase" target="_blank" rel="noopener noreferrer">Firebase</a> 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 <a href="https://zeit.co/" title="Zeit" target="_blank" rel="noopener noreferrer">Zeit</a>'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, <a href="https://zeit.co/" title="Zeit" target="_blank" rel="noopener noreferrer">Zeit</a> 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 <a href="https://cloud.google.com/" title="Google Cloud Platform" rel="noopener noreferrer">Google Cloud Platform</a>'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 <a href="https://www.chartjs.org/" title="ChartJs" rel="noopener noreferrer">ChartJs</a>. ChartJs is very easy and straight forward. So, to complete the website in a minimum time possible, I used ChartJs.