https://github.com/tinspham209/react-corona-tracker-v2

Visualization infected, recovered, deaths in card, table, chart, maps on worldwide of COVID-19
https://github.com/tinspham209/react-corona-tracker-v2

axios material-ui numeral react react-chartjs-2 react-countup react-leaflet

Last synced: about 8 hours ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/tinspham209/react-corona-tracker-v2
• Owner: tinspham209
• Created: 2020-08-04T07:08:37.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-12-15T20:19:32.000Z (11 months ago)
• Last Synced: 2023-12-15T22:14:47.214Z (11 months ago)
• Topics: axios, material-ui, numeral, react, react-chartjs-2, react-countup, react-leaflet
• Language: JavaScript
• Homepage: https://covid-tracker-dksgsd.surge.sh
• Size: 7.57 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 22
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 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`