Covid19

Simple Dashboard page for Corona virus statistics created using React library and Coronavirus COVID19 API.

Website Live Link

Table of Contents

• Covid19
  • Table of Contents
  • General Information
    • Task Description Provided By NADSOFT
    • Figma Design
  • Technologies Used
  • Features
  • Demo Video
  • Setup
  • Features to be Added
  • Acknowledgements
  • Contact

General Information

• Simple Dashboard page for Corona virus statistics.
• Technical assignment requested by NADSOFT for the application of React Developer position.

Task Description Provided By NADSOFT

You're required to Create a React app dashboard for Corona virus with the following requirements:

1. User should be able to view global statistics (cases, deaths, recovered).
2. User should be able to view a list of statistics per country (cases, deaths, recovered).
3. User should be able to search for countries.
4. User should be able to rank countries in order.

Note: To solve the assignment, use the API from here: https://cutt.ly/MLH5xKR.

Figma Design

Technologies Used

• React Library | A JavaScript library for building user interfaces.
• React Hooks | State Hook and Effect Hook.
• Axios Library | To make requests to:
  • Coronavirus COVID19 API in order to fetch data.
  • IP API in order to analyze the user connection IP.
• React Bootstrap Components | Container, Row, Col, Navbar, Nav, Form, Card, Carousel, Table, OverlayTrigger, and Tooltip.
• React Icons | FaLongArrowAltUp, FiArrowDown.

Features

• User can navigate between dashboard sections (Global, Your Country, and Other Countries statistics).

• User can view global statistics (cases, deaths, recovered).

• User by default can view their country statistics (cases, deaths, recovered) based on their device IP.

• User can search for countries statistics.

• User can view summary and table of statistics for all countries (cases, deaths, recovered).

• User can sort countries in order (alphabetical, total cases, total deaths, or total recovered).

Demo Video

Setup

$ git clone git@github.com:yahiaqous/Covid19.git
$ cd Covid19
Covid19 git:(main)$ npm i
Covid19 git:(main)$ npm start

Features to be Added

• Divide the table with "view more" button.
• Design and Develop the Footer Component.
• Add "Return to Top" button.
• Create count up animation for the cards numbers.
• Create loading component until fetching data.
• Create API errors handler.

Acknowledgements

• This project was inspired and requested by NADSOFT.
• This Stack Overflow Answer helped me to create function that sorts dictionary based on value.
• This Sandbox Tutorial helped me how to get the user country by analyzing their connection IP through this API.

Contact

Created by Yahia Qous - feel free to contact me!