How I Built Simple Covid-19 Tracker App With React JS?

October 8, 2020

Well I started learning React js about a month ago after being a bit comfortable with basics of JavaScript. After reading on blogs and videos that “learning by doing” is the best way to learn, I was searching for easy & beginner friendly projects to test my skills. That is why I decided to work on a Covid-19 update website.

Read: Top 5 Free Resources To Learn React Js

The tracker app I created is a simple website that fetches data from an API and display the data on the site. You can actually search for a country and it will display the flag, total confirmed, recovered cases and deaths due to Covid 19. I used simple CSS to style the site which is pretty basic as well.

I have documented the process of how I created this simple app in this post in case someone who is trying to learn React can follow along and create this simple project on his own.

Also check out this tutorial on how to create your first Discord Bot with JavaScript.

Here’s a preview of what you can build if you follow along

There’s a small disclaimer, I just started learning React about a month ago and this is my first project. I know there’s a lot of room for improvement and this is no way is the best tracker app you will create with React js.

Read: 11 Best Resources To Learn JavaScript For Free

Let’s get started.

Requirements:

Before getting started make sure you have node installed in your system. I used create react app which is a boilerplate which lets us set up the environment so that we can use latest JS features and optimizes our app for production.

To create a project with create-react-app run this command on your terminal

    npx create-react-app covid-tracker

It’ll create a folder with covid-tracker and install create-react-app on it. You can navigate inside this folder and open your code editor inside it.

    cd covid-tracker
    code .

Then you can run the app with npm start to start the app which will display a default react start page.

Cleaning Up:

In this step I cleaned up some code and deleted some unnecessary files.

I deleted all the files on my src folder except index.js, App.js and index.css files. Also I cleared all unnecessary import statements from index.js file.

I cleared the index.css file so that all styles could be done as we like.

Creating The First Component

The best thing about working with React is you can work in components.

To create our first component, I added a components folder inside src folder and created a Component named SearchCountry.js . It is a functional component and I created simple skeleton with JSX in this file as follows

import React from 'react';
const SearchCountry = () => {
 return (
        <>
            <form className="form" onSubmit={search}>
              <label htmlFor = "country" className="label">Country</label>
              <input type="text" name="country" placeholder="Enter Country.."
                className = "input" value = {country}
                    onChange={e => setCountry(e.target.value)}
                    />
              <button type="submit" className = "button">Search</button>      
            </form>
        </>
        )
    }
    
export default SearchCountry;

The className on the JSX are used for styling and I will add the other properties below.

I included the above component on App.js file and it displays a simple search form on the browser.

Fetching Data

The next and most important step is to fetch data from an API. I used the following API to fetch data.

    https://corona.lmao.ninja/v2/countries/

In case it doesn’t work, you can replace it with your own(There can be changes on the code as per the API)

const [country, setCountry] = useState('');
const [details, setDetails] = useState({});

const search = async e => {
        e.preventDefault();
        const url = `https://corona.lmao.ninja/v2/countries/${country}`
        await fetch(url)
        .then(res => res.json())
        .then(data => setDetails(data))
        .catch(err => console.log(err)) ;
}

I added the code just above the return statement.

Here as you can see I have used useState hook to set country and details state which are initialized to be empty sting and object respectively.

To use useState hook in your project you’ll have to update the import statement above to include useState hook as shown below.

import React, { useState } from 'react';

The country state is set when the user enters a country in the search box and the data fetched is stored in the details state.

Now we have data ready to be displayed to the users.

Displaying Data

In this step we will create a new component which will include elements to display data to the dom.

I created a new functional component DisplayData.js inside src folder.

Let’s pass data from SearchCountry.js to DisplayData.js first. To do this add the following code at the end of the return statement in the SearchCountry.js

<DisplayData 
    cases = {details.cases} 
    deaths={details.deaths} 
    recovered={details.recovered} 
    todayCases={details.todayCases}
/>

Also don’t forget to import the DisplayData component inside the SearchCountry.

Then you can create the DisplayData component as below:

import React from 'react'

const DisplayData = (props) => {
    return (
        <div className = "display">
        <p>Total Confirmed Cases: {props.cases}</p>
        <p>Total Deaths: {props.deaths} </p>
        <p>Total Recovered: {props.recovered}</p>
        <p>Cases Reported Today: {props.todayCases}</p>
        </div>
        
    )
}

export default DisplayData;

We get data from SearchCountry component and pass and access them as props in DisplayData component.

Now we have our working app which we can use to search a valid country and get the data.

Styling:

I created a simple CSS file and didn’t care much about styling. You can use your own styling ability to make it look more fancy.

Here’s my simple stylesheet for the project

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 10px;
}

.container {
    margin: 40px;
   display: flex;
   flex-direction: column; 
   align-items: center;
   justify-content: center;
}

.label{
    font-size: 1.5rem;
    display: block;
    margin-bottom: 10px;
}

.input {
    font-size: 2rem;
    padding: 1.2rem 2rem;
    border-radius: 15px;
    border: 1px solid #e1e1e1;
    margin-bottom: 10px;
    margin-right: 5px;
}

.button {
    font-size: 1.8rem;
    padding: 1.2rem 2rem;
    border-radius: 20px;
    border: 1px solid #e1e1e1;
    background-color: rgba(0,0,0,0.85);
    color: #fff;
}

h1{
    font-size: 4rem;
}

.display{
margin-top: 20px
}

.display p {
    font-size: 1.6rem;
    margin-bottom: 1rem;
    text-align: center
}

Errors:

I know it is one of the most important part I didn’t care much while creating this app. Basically there are two bugs in this app:

The app doesn’t work when a user try to search empty string
And the app doesn’t work when there is spelling mistake or country with zero cases reported

Wrapping Up:

This is my simple first project with React JS.

Read: Create a Website in 5 Minutes with HTML and CSS

If you enjoyed this as a beginner, make sure to share this and try this as well.

You can find the actual project here in github .

Update: I have made some changes to the project as you can see on the github repo. You can refer to the code to see the changes.

Also check the live app here.

I have tried to solve the first bug with a simple approach and still working on the second one.

Thank you for reading!