<h1 id="heading-react-covid-19-tracker-clone">React Covid-19-tracker Clone</h1>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1645049485582/dua3fIrk3.png" alt="image.png" /></p>
<p>Follow along with the youtube tutorial <a target="_blank" href="https://www.youtube.com/watch?v=cF3pIMJUZxM&amp;ab_channel=CleverProgrammer">🔴 Build a COVID-19 Tracker with REACT JS for Beginners (React Hooks and Material UI)
</a> and set up the firebase app.</p>
<h2 id="heading-what-i-have-learned">What I have learned?</h2>
<ul>
<li>Make async API resquest with fetch</li>
<li>Use javascript npm library like chartjs, numeral and leaflet </li>
<li>React modules react-leaflet</li>
<li>Integrate open API <a target="_blank" href="https://disease.sh/">disease.sh</a></li>
<li>Integration of Firebase for hosting</li>
<li>Integration of  Material ui (<a target="_blank" href="https://material-ui.com/">https://material-ui.com/</a>)</li>
</ul>
<h2 id="heading-use-case-with-singapore">Use case with Singapore</h2>
<h4 id="heading-total-cases">Total cases</h4>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1645050595288/EYPjghSBi.png" alt="image.png" /></p>
<h4 id="heading-total-recovered">Total recovered</h4>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1645050580971/M1jIUJabL.png" alt="image.png" /></p>
<h4 id="heading-total-deaths">Total deaths</h4>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1645050531795/eMrU-hQjp.png" alt="image.png" /></p>
<h2 id="heading-steps">Steps</h2>
<h3 id="heading-todo">TODO</h3>
<p>Create react app sample and start the app</p>
<pre><code>npx create<span class="hljs-operator">-</span>react<span class="hljs-operator">-</span>app covid<span class="hljs-number">-19</span><span class="hljs-operator">-</span>tracker
cd covid<span class="hljs-number">-19</span><span class="hljs-operator">-</span>tracker
npm start
</code></pre><h3 id="heading-components">Components</h3>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1645049886122/UYPbW10mP.png" alt="image.png" /></p>
<ul>
<li>App</li>
<li><ul>
<li>InfoBox</li>
</ul>
</li>
<li><ul>
<li>Table</li>
</ul>
</li>
<li><ul>
<li>LineGraph</li>
</ul>
</li>
</ul>
<h3 id="heading-deployment">Deployment</h3>
<ul>
<li><p>Install Firebase for backend with
<code>npm i firebase</code></p>
</li>
<li><p>log in to the app with firebase
<code>firebase login</code></p>
</li>
<li><p>Deploy firebase with the following command in the console</p>
</li>
</ul>
<pre><code>firebase init
Enter yes to proceed
? Hosting: Configure and deploy Firebase Hosting sites
? <span class="hljs-keyword">Use</span> an existing <span class="hljs-keyword">project</span>
? covid<span class="hljs-number">-19</span>-tracker-cfb05 (covid<span class="hljs-number">-19</span>-tracker)
? What <span class="hljs-keyword">do</span> you want <span class="hljs-keyword">to</span> <span class="hljs-keyword">use</span> <span class="hljs-keyword">as</span> your <span class="hljs-keyword">public</span> <span class="hljs-keyword">directory</span>? <span class="hljs-keyword">build</span>
? Configure <span class="hljs-keyword">as</span> a single-page app? Yes
</code></pre><ul>
<li>Clean and create the version to deploy with
<code>npm run build</code></li>
<li>After any update, run the command again and deploy with
<code>firebase deploy</code></li>
</ul>
<h2 id="heading-link">Link</h2>
<ul>
<li><a target="_blank" href="https://covid-19-tracker-cfb05.web.app/">Live</a></li>
<li><a target="_blank" href="https://github.com/leopaul29/covid-19-tracker">GitHub</a> </li>
</ul>


# React Covid-19-tracker Clone


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1645049485582/dua3fIrk3.png)

Follow along with the youtube tutorial [🔴 Build a COVID-19 Tracker with REACT JS for Beginners (React Hooks and Material UI)
](https://www.youtube.com/watch?v=cF3pIMJUZxM&ab_channel=CleverProgrammer) and set up the firebase app.


## What I have learned?

* Make async API resquest with fetch
* Use javascript npm library like chartjs, numeral and leaflet 
* React modules react-leaflet
* Integrate open API [disease.sh](https://disease.sh/ )
* Integration of Firebase for hosting
* Integration of  Material ui ([https://material-ui.com/](https://material-ui.com/))

## Use case with Singapore

#### Total cases

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1645050595288/EYPjghSBi.png)

#### Total recovered

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1645050580971/M1jIUJabL.png)

#### Total deaths

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1645050531795/eMrU-hQjp.png)

## Steps

### TODO

Create react app sample and start the app

```
npx create-react-app covid-19-tracker
cd covid-19-tracker
npm start

```

### Components


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1645049886122/UYPbW10mP.png)

* App
* * InfoBox
* * Table
* * LineGraph

### Deployment

* Install Firebase for backend with
`npm i firebase`

* log in to the app with firebase
`firebase login`

* Deploy firebase with the following command in the console

```
firebase init
Enter yes to proceed
? Hosting: Configure and deploy Firebase Hosting sites
? Use an existing project
? covid-19-tracker-cfb05 (covid-19-tracker)
? What do you want to use as your public directory? build
? Configure as a single-page app? Yes
```

* Clean and create the version to deploy with
`npm run build`
* After any update, run the command again and deploy with
`firebase deploy`

## Link

* [Live](https://covid-19-tracker-cfb05.web.app/)
* [GitHub](https://github.com/leopaul29/covid-19-tracker) 



Léo-Paul's Blog

Léo-Paul's Blog

⚙ React Covid-19-tracker-clone

React Covid-19-tracker Clone

What I have learned?

Use case with Singapore

Total cases

Total recovered

Total deaths

Steps

TODO

Components

Deployment

Link