loading...
Cover image for Covid 19 Tracker React Project For Beginners, Built In 45 Minutes!

Covid 19 Tracker React Project For Beginners, Built In 45 Minutes!

hemant profile image Hemant Joshi 😼 Updated on ・2 min read

Hii dev,

Take a live preview of the application which I hosted on heroku. Click Here To Preview.

Link to my personal website: https://hemant.codes/ . Remember i am just 18 i would love if you would guide me.

I also built a Youtube Clone App in react

Let's begin with Covid 19 Global Tracker!

So when me begin let me give you a basic idea about the project which will be involved

export const fetchDailyData= async()=>{
try{
const{data} = await axios.get(${url}/daily);

const modifiedData =data.map((dailyData) => ({
confirmed: dailyData.confirmed.total,
deaths: dailyData.deaths.total,
date: dailyData.reportDate,

1. The Api Key
2. Fetching Data From Api Key
3. Frontend Set Up
4. Graphs In React
5. Hosting In Heroku
6. Showing Off


Lets begin with the proper steps metioned above in the systematic order:

1. API KEY

I will be posting the api key which i have used and this api key gives realtime updates the the key is as followed : https://covid19.mathdro.id/api

for the specific country you can add further /countries/country_name.

So i believe 1st step is done and if you face problem in API setup check my git hub or contact me.


2. Fetching Data From Api key :

This is the most critical job i believe but if you have knowledge of https in react here you go, I will be using axios get method.

export const fetchDailyData= async()=>{
try{
const{data} = await axios.get(${url}/daily);
const modifiedData =data.map((dailyData) => ({
confirmed: dailyData.confirmed.total,
deaths: dailyData.deaths.total,
date: dailyData.reportDate,
}))
return modifiedData
} catch(error){
}
}

From the above method we will success fully get the data in our variable data and this would be the other important step to get done.


3. Frontend Set Up :

So here the Api returns a lot of imformations but we will try to make it simple and will consume
{data:{confirmed , recovered,deaths,lastUpdate}}

Three Important ones only.

          <Typography color="textSecondary" 
           gutterBottom>Infected</Typography>
               <Typography variant ="h5">
                   <CountUp
                   start ={0}
                   end={confirmed.value}
                   duration ={4.5}
                   separator = ","
                   />
           </Typography>

This is how i will display data in cards by using material UI and you can change values for all three data.


4. Graphs In React

React is inbuilt with Graph library and the implimentation on graph is really simple and to check further this is the link to my github https://github.com/8bithemant/Covid-19-Tracker


5. Hosting On Heroku

After the completion of the app you are finally ready to host it online in my case i will host it on heroku.


In case if you are left with any doubt let me know comment below

Also Dont Forget To Follow Me On GitHub And Star Your Favourite Project

I am 18 years old and learning on Mern Stack and i have dream to become a top class developer and a javascript teacher too.

*:- Hemant Joshi *

Posted on by:

Discussion

markdown guide
 
 

I love this, hey can we connect

 

Yes,would love to❤️

Some comments have been hidden by the post's author - find out more

Code of Conduct Report abuse