How I made my COVID tracker site using Next.JS 🇵🇭

By Nico Mendoza · Aug 5, 2022

The source code of this project can be found here.

This article will teach us how to make a COVID tracker site using NextJS. I made this website to learn how to scrape data from the COVID-19 Tracker | Department of Health website - DOH.

Why did I make a COVID tracker site?

I often look at the COVID-19 Tracker | Department of Health website - DOH and find it very hard to find the data I need. Most of the time, I would only need to look at the daily cases and deaths on a given day.

Creating a NextJS Project

This article assumes that you already know the basics of NextJS and ReactJS. If you haven't already, I would suggest learning more about the fundamentals of React. To start, let's install the following dependencies:

Loading code...

Writing the scraper code

This project will use Cheerio to scrape the data from the COVID-19 Tracker website. The scraped values will then be passed to the Next.js data fetching API. In our case, we will use the getStaticProps API to fetch the data.

Create a .env file, then add the following variable:

Loading code...

COVID_TRACKER_URL is the URL which we will scrape the data from.

Create a scraper function that returns the data we need.

Loading code...

Fetching the data from the URL and parsing it

We will fetch the data from the URL using the fetch API and then parse the data using Cheerio.

Loading code...

Getting the data we need

This is the part where it gets a little bit complicated. The way I approached this is somewhat different from the way other people approached it.

Instead of scraping the data from the website, I decided to scrape the data from the table URL that is embedded in the website. I noticed that the data is coming from the tableau dashboard.

To get the sheet ID and the session ID, we will use the following code:

Loading code...

tsConfigJson will be an object with the following properties:

Loading code...

We can then use the sheet ID and the session ID to form a URL that we can use to fetch the data.

Loading code...

The right values can sometimes vary depending on the layout of the table. The following code will get the right values:

Loading code...

This isn't the best way to do it, but it works. And it also does not guarantee that the values will be the same every time. We might need to change the code if we find a better way to get the right values. If you have any suggestions, please let me know.

Creating the landing page

in pages/index.tsx, we will write the following code:

Loading code...

The code above will use the getCases function that we created earlier to populate the data in our landing page. We will also add a lastUpdated property to the props object that will be used to show the last time the data was updated. I decided to use getStaticProps instead of getServerSide because we don't need to always scrape the data every time we visit the page. Feel free to change the look of your landing page if you want.

Here's how I implemented it. I'm using tailwindcss to style the landing page:

Loading code...

This is my first time writing an article about my project. I hope you enjoy it as much as I do 🚀. If you have any suggestions or feedback, please feel free to reach out to me.