#100DaysOfCode Day 39: COVID-19 Tracker with React, Material UI, and Chart.js (Part 1)
Hello, World!
For today’s agenda, I will be going over another React.js-based project. This time, we will be making a COVID-19 tracker website. In short, this website utilizes the Coronavirus API from Mathdroid and then redecorates the whole website into a fancy card-ish one using Chart.js and Material UI.
Here is an example of the finished project from the tutorial I followed:
This project will be mostly front-end UI designing work, so keep your heads up for a lot of markup JSX code!
Installing Dependencies
Here are the list of dependencies that you will need:
- Node.js: You will need to use Node’s Package Manager,
npm, to create your React application. - Axios: Remember Axios from our CRUD project? Axios is used to send HTTP requests from the front-end.
react-chartjs-2: Essentially, this is a React wrapper for Chart.js, which supplies simple, clean, and engaging HTML5 based JavaScript charts for your website.react-countup: A React component wrapper around CountUp.js, which is used to create animations displaying numerical data.classnames: a simple utility for conditionally joining classNames together.
To install these dependencies, download Node.js first. You can download it through Chocolatey, a popular package manager for Windows.
choco install nodejs.installNext, create the directory of your project. You can call this anything; I will call it coronatracker. Run mkdir coronatracker and cd coronatracker. Once you are in your project’s directory, initialize your React application using:
npx create-react-app ./Writing down create-react-app ./ means that you are essentially initializing the React application in the current directory. If you have not created your coronatracker directory, you can immediately run npx create-react-app coronatracker and get two things done in one command.
Afterward, you can install the Node modules using the following:
node install axios react-chartjs-2 react-countup classnamesThis will download the mentioned dependencies and save them in your project’s node_modules file.
Now, since we are going to start everything from scratch, you will have to delete everything inside the src folder. To do this, simply run the following command in your root directory:
rmdir src /s`Now, recreate your src directory and we can start coding!
Creating the app
First, we will need to make the index.js file. Under the hood, create-react-app uses Webpack with html-webpack-plugin. The configuration in Webpack specifies that the entry point of the app is located in src/index.js. Therefore, the first file that is read by React.js is index.js, and it then follows the other modules.
src/index.js
Now, let’s make our index.js file:
import React from 'react';
import ReactDom from 'react-dom';
import App from './App';ReactDom.render(<App />, document.getElementById('root));
The code in the last line is the ReactDOM.render() code which has the following structure:
ReactDOM.render(element, container[callback])Running the code above will render a React element into the DOM in the supplied container and return a reference to the component (or null for stateless components). In our case, we will be rendering the App component inside the root id of our HTML page.
src/App.js
In index.js, we rendered an App component to root. Now, we will make the actual App component using the following code:
import React, { Component } from 'react';class App extends Component {
render(){
return(
<h1>COVID-19</h1>
)
}
}export default App;
As you can see, we have created a simple Stateless Component that will render COVID-19. We then export our Component so that it can be used by other files.
For the next step, create a two new directories: components and api. Inside your components folder, create three new folders called cards, charts, and countrypicker. Don’t worry about what to fill these folders with. We will get to this soon!
api/index.js
Now, we are going to make another index.js file that is responsible for sending HTTP requests to the API URL using Axios. We will create three different methods:
- Fetch Data: Simply fetch the data of confirmed, recovered, and death cases with the last updated date.
- Fetch Daily Data: This method will fetch the data of the total confirmed cases and the death toll
- Fetch Countries: This method will return the list of countries available
The code for this API request is the following:
import axios from 'axios';const url = 'https://covid19.mathdro.id/api';export const fetchData = async (country) => {
let changeableurl = url;
if(country){
changeableurl = `${url}/countries/${country}`
}
try{
const{ data: {confirmed, recovered, deaths, lastUpdate} } = await axios.get(changeableurl);
return{ confirmed, recovered, deaths, lastUpdate}'
}
catch(error){
console.log(error);
}
};export const fetchDailyData = async () => {
try{
const {data} = await axios.get(`${url}/daily`);
return data.map(({confirmed, deaths, reportDate: date}) => (
{
confirmed: confirmed.total,
deaths: deaths.total,
date
}));
}
catch(error){
return error;
}
};export const fetchCountries = async () => {
try{
const {data: {countries}} = await axios.get(`${url}/countries`);
return countries.map((country) => country.name);
}
catch(error){
return error
}
};
Let’s start with the first function, fetchData. Here, we create an async function which takes a country as a parameter. Next, we create a variable called changeableurl, which has the value of our API’s URL. The reason why it is changeable is so that it can be adjusted according to the country we want to view. For example, if you want to view the data of Coronavirus in Indonesia, then you can run https://covid19.mathdro.id/api/countries/indonesia.
Next, the country parameter will be placed inside a conditional statement. Aside from following the tutorial, I do not have an idea why the writer wrote it this way. If I were to write it, it would be like this:
export const fetchData = async (country) => {
try{
const { data: {confirmed, recovered, deaths, lastUpdate}} = await axios.get(`${url}/countries/${country}`);
}This is interesting. I will report back on what happened.
Back to fetchData, the rest are promise-based actions based on the results.
fetchDailyData will fetch the total number of confirmed cases and death counts around the world. Because there is no need for a choice, we will create a async function without any parameters. Here, we send an Axios GET request to http://covid19.mathdro.id/api/daily. (Now, I tried to send a GET request to that URL, but it posted cases only in China. I will get back to this later).
The last function didn’t really make much sense. I tried to view the API URL but got a 404. Maybe I’ll wait and see how the project comes up.
Conclusion
That’s it for today, folks! I now found a new way of enjoying tutorials: build them quickly, but document them clearly; make sure I know the reason for each line of code. This is more exciting, as it is more of an active-learning approach rather than mindlessly typing code. Maybe it did work when I did not understand the keywords associated with web development. But now that I somewhat have a grasp, I should be able to dive deeper into the code written by several other people.
