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