CORONA TRACKER

A Covid-19 Tracker built using React.js, Typescript and NX Workspace.

View Demo

Table of Contents

• About the Project
• Why
• What i wanted to learn from this Project
  • Built With
• Getting Started
  • Required Versions
  • Prerequisites
  • Installation
• Main Scripts
• Directory Structure
• Contact
• Acknowledgements

About The Project

It's a COVID-19 tracker where you can see reports in beautiful maps and charts. You can select reports by countries.

Why

I am learning ReactJS, so wanted to understand fundamentals of React. And wanted to learn how to creaate fully typed React Project usig Typescript. And wanted to learn NX Workspace for monorepo projects in depth. I found this tutorial interesting. In that tutorial they created it with React with JavaScript. And i wanted to reproduce the same project in Typescript.

What i wanted to learn from this Project

• useEffect react hook when and how to use it,
• useState react hook when and how to use it,
• Fully typed react functional components,
• Basics of material-ui react UI library,
• How to use leaflet map library,
• How to use chart.js in react,
• How to use monorepo architecture like google using nx workspace,
• How to seperate each feature into a seperate library and use it in the app.
• How to use custom eslint rules for better linting and proper code structure,
• How to auto deploy static site to vercel.com

Built With

• ReactJS
• TypeScript
• NX Workspace

Getting Started

To get a local copy up and running follow these simple steps.

Required Versions

• node - v12.16.1
• npm - v6.14.5
• yarn - v1.22.4
• nx - v10.0.11

Prerequisites

• node

# Mac and Linux using nvm (node-version-manager)
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.0/install.sh | bash

nvm install v12.16.1

• yarn

# Mac
brew install yarn

# Debian / Ubuntu
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt update && sudo apt install yarn

• nx

# NPM
npm install -g nx

# Yarn
yarn global add nx

Installation

1. Clone the repo

# SSH
git clone [email protected]:emjimadhu/corona-tracker.git

# HTTPS
git clone https://github.com/emjimadhu/corona-tracker.git

2. Install NPM packages

yarn # or yarn install

Main Scripts

• yarn start:web - Starts Development server for react app,
• yarn build:web - Builds react app for production,
• yarn lint:web - Lints React App

Directory Structure

• root: Project root holds all the flies of the project
  • apps: Holds web(ReactJS)
    • web: Directory contains all the React app codes
  • libs: Holds all the common library and codes you can share between apps
    • web: Holds all the components used in react app
      • header: Header component
      • info-box: InfoBox component
      • line-graph: LineGraph component
      • map: Map component
      • table: Table component
    • shared: A shared module for common code sharing across projects in this work space.
  • readme-images: Holds all the images for README.

Contact

Em Ji Madhu -

Project Link: https://github.com/emjimadhu/corona-tracker

Demo Link: https://corona-tracker.emjimadhu.me/

Acknowledgements

• Clever Programming