In this article, we will create 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.
Pre-requisites:
- Basic JavaScript such as functions, types of variables, objects, etc.
- ReactJS development setup for web development.
- ReactJS Hooks such as useState Hook and useEffect Hook.
- APIs knowledge to fetch real-time data.
- Basic CSS properties for styling and designing for the web application.
Approach:
- Set up the development environment, install all the required dependencies.
- In the App.js file, create and initialise 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.
Note: Please refer to the ReactJS Setting up article to set up the development environment.
Below is the step by the step implementation of the above approach.
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 and for stylings add CSS file CovidData.css.
Project Structure: It will look like the following.
Project Structure
Step 3: Now, in App.js, we will create the component file, that will hold the code for the application.
App.js
Javascript
import "./App.css"; import CovidData from "./CovidData"; function App() { return <div className="App"> <CovidData/> </div>; } export default App; |
Note: Our component name is CovidData and we have imported this component file in App.js.
Step 4: In the CovidData.js file, we will create the form to take the input and when the form is submitted then we will fetch the data from the API with the help of useEffect Hook and set the fetched the in the variable objects using useState Hook. When the data is fetched then pass the variable objects using JSX expression to display the data. To get data, real-time API we have used the “https://disease.sh/v3/covid-19/countries” API.
CovidData.js
Javascript
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(() => { .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; |
Step 5: For stylings, we have used basic CSS properties such as alignment, font style, etc.
CovidData.css
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:
