COVID-19 Tracker using ReactJS and real time API

Creating a web application COVID-19 Tracker using ReactJS and real-time API. In this web application or website, when the user enters the name of the country, it will display the number of active cases, recovered cases, today’s cases, etc.

Prerequisites:

• React JS
• ReactJS Hooks
• Introduction to APIs
• APIs knowledge to fetch real-time data.

Approach:

• Set up the development environment, and install all the required dependencies.
• In the App.js file, create and initialize a component that is used to hold the code of the web application.
• In that JavaScript file, create a form to take the input from the user and fetch and display the details using real-time API and react useState Hook and useEffect Hook.
• Use CSS for stylings of the component file and import the CSS file in the component file.

Steps to Create React Application:

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

In that created folder go to src folder and delete App.test.js, logo.svg and setupTests.js because these files are not required in this project, and add component files used to hold the code for the application. Our component name is CovidData and file name is CovidData.js for stylings add the CSS file CovidData.css.

Project Structure:

Project Structure

Example: This example uses fetch funtion to get the data form API and CSS for styling.

Javascript

// Filename - App.js

import CovidData from "./CovidData";

function App() {
    return (
        <div className="App">
            <CovidData />
        </div>
    );
}

export default App;

Javascript

// Filaname - CovidData.js

import React, { useEffect, useState } from "react";
import "./CovidData.css";

function CovidData() {
    const [country, setCountry] = useState("");
    const [cases, setCases] = useState("");
    const [recovered, setRecovered] = useState("");
    const [deaths, setDeaths] = useState("");
    const [todayCases, setTodayCases] = useState("");
    const [deathCases, setDeathCases] = useState("");
    const [recoveredCases, setRecoveredCases] =
        useState("");
    const [userInput, setUserInput] = useState("");

    useEffect(() => {
        fetch("https://disease.sh/v3/covid-19/countries")
            .then((res) => res.json())
            .then((data) => {
                setData(data);
            });
    }, []);

    const setData = ({
        country,
        cases,
        deaths,
        recovered,
        todayCases,
        todayDeaths,
        todayRecovered,
    }) => {
        setCountry(country);
        setCases(cases);
        setRecovered(recovered);
        setDeaths(deaths);
        setTodayCases(todayCases);
        setDeathCases(todayDeaths);
        setRecoveredCases(todayRecovered);
    };

    const handleSearch = (e) => {
        setUserInput(e.target.value);
    };
    const handleSubmit = (props) => {
        props.preventDefault();
        fetch(
            `https://disease.sh/v3/covid-19/countries/${userInput}`
        )
            .then((res) => res.json())
            .then((data) => {
                setData(data);
            });
    };

    return (
        <div className="covidData">
            <h1>COVID-19 CASES COUNTRY WISE</h1>
            <div className="covidData__input">
                <form onSubmit={handleSubmit}>
                    {/* input county name */}
                    <input
                        onChange={handleSearch}
                        placeholder="Enter Country Name"
                    />
                    <br />
                    <button type="submit">Search</button>
                </form>
            </div>

            {/* Showing the details of the country */}
            <div className="covidData__country__info">
                <p>Country Name : {country} </p>
                <p>Cases : {cases}</p>
                <p>Deaths : {deaths}</p>
                <p>Recovered : {recovered}</p>
                <p>Cases Today : {todayCases}</p>
                <p>Deaths Today : {deathCases}</p>
                <p>Recovered Today : {recoveredCases}</p>
            </div>
        </div>
    );
}

export default CovidData;

CSS

/* Filaname - CovidData.css */

body {
    background-color: rgb(102, 226, 102);
  }
  .covidData {
    background-color: green;
    width: 30%;
    margin: auto;
    margin-top: 15px;
    border-radius: 6px;
    padding: 10px;
  }

  /* input stylings */

  .covidData__form {
    padding: 10px;
    margin: 20px;
  }
  .covidData__input input {
    width: 400px;
    height: 50px;
    text-align: center;
    font-size: 25px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
  }
  .covidData__input button {
    width: 80px;
    height: 50px;
    margin-top: 10px;
    background-color: black;
    color: white;
    font-size: 20px;
    border-radius: 10px;
    border: none;
    box-shadow: 5px 5px 5px rgb(71, 67, 67);
    cursor: pointer;
  }

  /* detail stylings */

  .covidData__country__info {
    font-size: 20px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    width: 500px;
    margin-left: auto;
    margin-right: auto;
    height: auto;
    padding-left: 10px;
    background-color: white;
    margin-top: 20px;
    padding: 2px;
    text-shadow: 1px 1px 1px rgb(71, 67, 67);
    box-shadow: 5px 5px 5px rgb(71, 67, 67);
  }

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output: