Front End

Let's Create a COVID-19 Tracker using React.js

Sabesan Sathananthan
Towards Data Science
6 min readJun 18, 2020

Photo by Markus Spiske from Pexels

Most people in the world stay at home these days because of the lockdown. Most of you are frustrated about staying at home for a long time. Therefore, we will make a COVID-19 tracking application and get pleasure about that we create a tracking application. we will fetch the data from this link.

When I scrolled Youtube videos I found a tutorial about how to make the Corona Virus tracking application. I watched that video and started to create a COVID-19 tracker and Finally, I created a Tracker using React.js. I added some features more than shown in the video. Here I will describe how to create a tracking application using React application from scratch. Here is the demo of that React application. This is my 30th article in Medium.

First things, First

As usual, we need to create a React application using create-react-app. To create a React application run the following command in your shell/terminal in a specific folder (e.g. desktop )

npx create-react-app covid-tracker

A new folder will be created, and it will be named as google-map. From this step, our application is bootstrapped with Create React App. For more information, click the link. Then open that project in your IDE. I am using VS Code IDE.

Delete all the files inside the src folder and create an app.js file and index.js file inside the src folder.

Now, in our src folder directory we create an index.js file with the following code:

Then create the api folder, Components folder, and images folder inside the src folder. Thereafter create the Cards folder, Chart folder, CountryPicker folder, and index.js file inside the component folder. Now our project’s folder structure should like below:

With this project structure, each folder (Cards, Chart, CountryPicker) is going to have its own styles and its own component.

Now we need to install all the necessary dependencies for that run the following command in your shell/terminal which was integrated with VSCode or your IDE.

npm install --save axios react-chartjs-2 react-countup classnames @material-ui/core

In case you’re having issues installing dependencies, Try

npm cache clean — force

With the help of Axios, we will make a get request to the API. ‘react-chartjs-2’ is one of the better libraries for making charts. ‘react-countup’ is going to help us make that animation while counting numbers. ‘classnames’ is a library that provides us conditional class selection in React. ‘Material-UI’ is the world’s most popular React UI framework like bootstrap.

Photo by Andrea Piacquadio from Pexels

Fetch Data

We need to fetch the data from the API. Now, in our api folder directory we create an index.js file with the following code:

It loads Axios, which is responsible for REST calls. As you can see, we are making 3 different calls for Chart, Cards & CountryPicker.

fetchData function is to fetch the confirmed, recovered, and death details with last updated time according to the worldwide or according to the country wise. fetchData function helps to fetch the data to display the results in the Cards component.

fetchDailyData function is to fetch the daily total deaths and total confirmed details with the respective dates. Unfortunately, we couldn’t fetch the total recovered details now (today: 18-Jun-2020). fetchDailyData function helps to fetch the data to display the results in the Chart component.

fetchCountries function is to map the country’s shortened name with the Country’s name. fetchCountries function helps to fetch the country name to display the results in the CountryPicker component.

Photo by Lukas from Pexels

Cards Component

This component loads 4 cards: Infected, Recovered, deaths, and active on the top of the website. Now we are going to create Cards.jsx file inside the Cards folder with the following code:

Cards component is a purely functional component that returns JSX. I calculated the active cases by subtracting the recovered cases and death cases from confirmed cases. There is no point of creating the Cards component without styling, therefore, we are going to create Cards.module.css file inside the Cards folder with the following code:

@media tag is responsible for the responsive view.

Yeah, we finished the Cards component !!

Photo by Kaboompics .com from Pexels

Chart Component

This loads both bar and line charts: Line chart to show global data and bar chart to represent a single country. Now we are going to create Chart.jsx file inside the Chart folder with the following code:

Chart component is a purely functional component that returns JSX. There is no point of creating the Chart component without styling, therefore, we are going to create Chart.module.css file inside the Chart folder with the following code:

Photo by fauxels from Pexels

CountryPicker Component

Drop down to select a country based on the selected country showing a bar chart and showing cards with death, confirmed, active, and recovered details for that particular country. Now we are going to create CountryPicker.jsx file inside the CountryPicker folder with the following code:

CountryPicker component is a purely functional component that returns JSX. There is no point of creating the CountryPicker component without styling, therefore, we are going to create CountryPicker.module.css file inside the CountryPicker folder with the following code:

Photo by Martin Sanchez on Unsplash

If we are going to import Cards, Chart and CountryPicker Components in App.js like below would just clutter up your App.js.

import Cards from "./Components/Cards/Cards";
import Chart from "./Components/Chart/Chart";
import CountryPicker from "./Components/CountryPicker/CountryPicker";

Therefore, we need to use a neat little trick. We don’t need to have imports like above. As you can see there is a lot of repetitive code. We spend lot of time specifying where we want to import from what we want to import from. Therefore we can have one import file like below.

import { Cards, Chart, CountryPicker } from “./Components”;

Now we are going to create an index.js file inside the Components folder with the following code:

App Component

After adding all the functionalities we need to update App.js. App Component is responsible for sending country & data together into a single view so the website can dynamically change based on the country’s selection whether to show a bar chart or line chart. Now we are going to add the following Code into the App.js which is in the src folder.

Here you can download the coronaImage and add it into the images folder which we created inside the src folder. App Component is a class component that has asynchronous React lifecycle method componentDidMount. we need to add some styling to the App.js component. Therefore we need to add the App.module.css file inside the src folder with the following code:

Boom!!! Our Covid-19 Tracking Application is ready. Start the application by running the following command

npm start

Conclusion

The features of the above website are easy to use, attractive UI, charts speaks more than text, real-time data, and last but not least, it is a responsive website for both desktop & mobile view. Covid-19 API is Serving data from John Hopkins University CSSE as a JSON API. You can clone the repo from this link. Finally I would like to thank JavaScript Mastery for the YouTube Video.

Try something new today. Feel good about yourself.

Happy coding!

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Published in Towards Data Science

Your home for data science and AI. The world’s leading publication for data science, data analytics, data engineering, machine learning, and artificial intelligence professionals.

Written by Sabesan Sathananthan

Software Engineer 👨‍💻 @SyscoLABSSL | Postgard🧑‍🎓 in CSE at UOM | Technical Writer ✍️ | sabesansathananthan.now.sh | Still makes silly mistakes daily.

Responses (3)

What are your thoughts?

Thank you for the article! I had to run "npm install --save react-chartjs-2 chart.js" in the project to get past an error indicating chart.js was not defined for the react-chartjs-2 library. Also, there is a section in your article that talks about…

--

can you please help

--