Skip to content

Visualization infected, recovered, deaths in card, table, chart, maps on worldwide of COVID-19

Notifications You must be signed in to change notification settings

HuynhXuanLam-IT44/React-corona-tracker-v2

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1 Commit
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Mini Project: COVID-19 Tracker

Date: 05 - Aug - 2020

Function

  • Display Infected, Recovered, Deaths of Worldwide, and 215 another countries
  • Display Table for Top live cases by Country
  • Draw Line chart for new cases
  • Draw circle of cases each country in Map
  • when click on country in Map, Popup the data of this country

Screenshot

  • Wire frame:

  • Finish project:

Deploy

https://covid-tracker-dksgsd.surge.sh

Tech-Stack

  • React
  • Material-UI
  • axios
  • chart.js, react-chartjs-2
  • react-countup
  • numeral
  • react-leaflet
  • surge.sh

API used

https://disease.sh/

After this project

I have improve for myself about

  • className with BEM methodology
  • Layout with flex-box
  • Table Container with Material-UI
  • style for each component with React
  • Fetch API via axios by async await, Promise.all

I have understand about

  • Create Line Chart with chatjs & react-chartjs-2
  • Display CountUp animation for Typography
  • Use numeral for style a number 100,000
  • Create a Map with react-leaflet
  • Draw circle, Popup on the Map

Next step, Bugs:

  • Responsive for InfoBox
  • Responsive for Logo in Header
  • Responsive for Map
  • Fix width & height for LineGraph
  • Change backgroundColor when click on each InfoBox in LineGraph
  • Select another country, and switch to worldwide > bug
  • Unique key for MenuItem in Table
  • Unique key in Map

Set up

npm install and npm start