Building COVID_19 Tracker App

I built simple COVID-19 Tracker App. This was good practice to remind some React.js that I learned during the school.

Data is sourced from Johns Hopkins CSSE

I used 3rd party data website http://covid19api.com

first create react app with ‘create-react-app covid-19-tracker’

created Header.js and Contents.js components.

components

needed to install axios to fetch data from API. and chartjs2 library to use chart.

installing axios and react-chartjs-2

with using ‘postman’ I could see which ‘key’ I can fetch.

data ‘postman’

I only used ‘Confirmed’, “Deaths’, ‘Recovered’ and ‘Active’ for this app.

I used ‘Bar, ‘Doughnut’, and ‘Line’ from ‘react-chartjs-2’

type of chart from react-chartjs-2

I used ‘Bar’ chart for the number of ‘COVID-19 Cases’ by monthly.

and ‘Line’ chart for the number of ‘Active’,

and ‘Doughnut’ chart for the comparing between number of Cases, ‘Recovered’, and ‘Deaths’.

axios fetching and data

when mounted useEffect will be executed. (get method)

async and await allow us to execute makeData(res.data) when axios.get is finished.

the reason why I used reduce(acc,cur) is to get only accumulated data at end of the month.

use map to get ‘confirmed’ and ‘active’

It was hard to understand with deep understanding.

It is just simple tracker.

I will keep update it.

thank you