How I built a COVID-19 Tracker App using React- with Material UI, Hooks, and Chart.js
Hey everyone! In this blog, I wanted to write about my most recent project. I created a COVID-19 tracker application. I didn’t have much experience using Material UI or Chart.js before this but it was a really great learning experience and a lot simpler to work with than I thought. With that let’s begin!
So what does this Covid-19 application even do? This application uses an external API that gets real-time statistics. These stats show the number of people infected and recovered from Covid-19 as well as the number of deaths caused by Covid-19. There is a dropdown button that allows you to select any country and it will populate those numbers for this based on that day. The API returns data which looks like this:
In order to actually get the real-time information, I wrote a fetch request to this API. Here is what that code looked like:
Now let’s say I wanted to see Australia numbers I could select ‘Australia’ from the dropdown list and this is what I get back.
And just to confirm that these are real-time numbers if search into Google Australis Covid numbers this is what I see.
In order to implement the bar chart which showed these numbers in a graph, I used Chart js. Here is what the chart looked like.
The code to implement this chart goes like this.
In order to create this, I started in App.js where there are only class-based components. I created data and country which are the initial states. I used ‘componentDidMount’ which used a fetch request to the data, and then the fetched data is in the API where i created an asynchronous function to return the data we actually need. Once we got the data we set it a state. In order to select the countries, I used FormControl and a native select from Material UI. And then in order to display the charts, I used a bar graph for a single country and a line graph for a global country.
Creating this application wouldn’t have been possible without this amazing tutorial that I followed. Here is the link and I would definitely recommend checking it out. It was super easy to follow and has great explanations. https://www.youtube.com/watch?v=khJlrj3Y6Ls
The link to this repo is here https://github.com/aribakhan97/covid-tracker
