Skip to main content

Month: April 2020

Covid Tracker React App

Create COVID Tracker – A Modern scalable React JS Application with React, Redux, Thunks, Selectors and Styled Components

Kiran Dash Leave a comment

Intro

In this tutorial we are going to build a COVID or The Corona Virus Disease Tracker, a modern scalable React Application using React JS framework and four advanced React tools: Redux, Thunks, Selectors and Styled Components. Just React JS is enough for creating simple applications but if you want to build large, high performance applications, your job will be much more simplified if you know how to use these additional tools.

For the Application concept, I thought I would create something that might be useful for me in the current situation. The current situation in World is not good. COVID-19 or The Corona Virus Disease has affected lives of people in many countries. I am currently staying in Singapore and have been working from home since last two weeks. As a developer I thought it would be better to use my time during this weekend to create a Tutorial to build an App for tracking Corona Virus reports from different countries.

Demo:

http://bgwebagency.in/projects/ui/covid-tracker/

Features:

  1. Search Country Report: Country Codes you can use for testing: GB (United Kingdom), US (USA), SG (Singapore), GE (Georgia), IN (India), IT (Italy), ES (Spain).
  2. Pin Country Result to move a result to very top.
  3. Remove a Country from the list.
  4. Persisting the result on reload as well. Note: The results are not being saved in any Database. We will save them in localStorage since our only focus here is Frontend development with React.

Prerequisites for this Tutorial:

To get the most of this tutorial, it will be better if you already know the following:

  1. HTML, CSS
  2. Basic React (Optional but Helpful)

Softwares and APIs Required for this Tutorial:

  1. nodejs: https://nodejs.org/en/
  2. API: We are using an API which will return latest report for a country based on country code.
    https://api.thevirustracker.com/free-api?countryTotal=US
  3. More APIs from the same API provider:
    https://thevirustracker.com/api
  4. Alternate Similar APIs: (If the previous one is not working)
    https://corona.lmao.ninja/v2/countries/SG
    https://covid-19-apis.postman.com/
    or any other API that returns report for a single country.
  5. API for global stats: (For Task after Tutorial)
    https://api.thevirustracker.com/free-api?global=stats
  6. Alternate Similar API for global stats: (For Task after Tutorial)
    https://corona.lmao.ninja/v2/all

What this Tutorial Will Cover?

  1. Introduction, and Project Setup:
    We will setup the project and understand the project structure.
  2. Build the Application view by creating components in React JS.
    Important Sections:
  3. Manage state of the application with Redux.
  4. Handle API/Asynchronous calls with Thunks.
  5. Selectors: A middle layer between API layer and Component View.
  6. Styled Components: For handling CSS in a smart way, from JS file instead of creating separate CSS file.
  7. Build app for Production deployment.

Why use the Advanced React Tools?

Every Application mainly consists of 3 important layers. API layer to get data from the APIs. A data layer where we can handle the data from API and modify it to our requirements, and last but not the least, a view layer to show the data.

React JS framework was basically designed to mainly take care of the views only. Which means React JS is powerful to show data but when it comes to the other tasks such as calling APIs and handling or managing data, although React can do the job, React is not that good. Because, React does not have any specific sets of standards on how to manage state and perform API calls etc. That is ok when we are creating a small application but if you are working on a large application with a team, each developer will have their own ways of handling the code. And thus not having a set of rules will clutter the code and it will be extremely difficult to debug the code in future. So that’s where all these tools are helpful. They provide extra sets of rules on how to do things. For example: Redux takes care of data or state management by adding some extra standard rules. Similarly Thunks have a standard way of calling the APIs. And styled components have a specific way of handling CSS.

So in summary, these extra tools help us organise the application in a much  standard way by separating the responsibilities among different tools instead of handling everything with React. Thus, the Application is easy to manage and expand.

Tasks for you after Tutorial:

  1. Create Unpin Country Button, clicking which The pinned Countries can come back to the Not Pinned Countries Section.
  2. Create another React Component to show the Global Stats of total cases, from API: https://api.thevirustracker.com/free-api?global=stats. Use the same flow of first creating a GlobalStats.js component, add redux globalstats reducer, add selectors and finally adding styles with styled components.
  3. Modify the reducer code to remove isLoading reducer and add isLoading as a property of state.countries instead of direct child of the state. Because now we are adding a new API. and we will need isLoading property for individual API. So also we need to add another isLoading prop for state.globalstats.

Important links:

App Demo: http://bgwebagency.in/projects/ui/covid-tracker/

Github Project: https://github.com/kirandash/covid-tracker

Follow Me On Github: https://github.com/kirandash

Follow Me On Twitter: https://twitter.com/TheKiranDash