COVID-19 Tracker web-monetized with News from WHO API 🎉🚀
Tags: gftwhackathon, react, showdev, webmonetization
Published: 2020-06-05 12:56:24

[Instructions]: # (To submit to the Grant For The Web x DEV Hackathon, please fill out all sections.)
Note:- If you want to know our hackathon journey how we worked you guys can check it out series of articles for this hackathon & this Article updated with Snaps of app after enabling **coil** Extension with membership(Monetization Part)🔽🌟


# What We built

For this 2020 Hackathon, we decided to build a project that has a specific feature of web monetization. COVID-19 Tracker & News where we have prepared an exclusive content for all the visitors who have decided to begin monetizing the app.

On the initial load of the app, the bottom photo illustrates what the visitor can only see first. It only displays the global result of the total number of cases for confirmed, recovered, and deaths.

![one](https://res.cloudinary.com/practicaldev/image/fetch/s--r65Sf9ap--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/31nyut9p9695xldrt2lj.png)<center>Screenshot date and time: 2020-06-04 3:41 PM</center>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/owt7sh0dqp78y6m9hj58.png)

We changed some things in app you guys can check that in live view 👉[here](https://wmcovid19.netlify.app/) live and running.

Then, there is a country picker available if the visitor desires to check the case numbers for a specific country.

![two](https://res.cloudinary.com/practicaldev/image/fetch/s--Jx2kTJ04--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/uudrn8knwbe1u52qi41d.png)
<center>Screenshot date and time: 2020-06-04 3:41 PM
</center>

Those are simply teasers of it, but there is hidden content for visitors who chooses to monetize the app. Once they clicked the START MONETIZATION button, they can view all the exclusive contents. As a result, it gives them 100% access to the app's features. However, that private content will entirely disappear when they clicked the STOP MONETIZATION button.

![third](https://res.cloudinary.com/practicaldev/image/fetch/s--D29S0wtS--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/4h72mtsocl9x7f44zx8g.png)

However, these buttons will be displayed as disabled when the browser is not supported by a web monetization (Coil)extension.

![fourth](https://res.cloudinary.com/practicaldev/image/fetch/s--P1tM7qt1--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/dd5rpptqhehxzxpioit8.JPG)

# View After enabling Coil extensioon with membership
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/nbtkin8y4ml513zu0tq3.png)  
⤴If this unclear to see then everything is given in detail on Github Repo😊


### Submission Category: 
* Foundational Technology


## Demo
 We deployed the project via Netlify, and you can check it out 👉[here](https://wmcovid19.netlify.app/) live and running.

## Link to Code

{% github  itshally/wb-covid19  %}



## How we built it 

We used Reactjs as our stack for this project, and additional framework and packages like Material UI, axios, and chart.
The project started by implementing the tracker first. We followed along a tutorial for this first phase and I would like to give credits to JavaScript Mastery, which we used it as the 20% content for the website.

The remaining 80% will be the exclusive content where we really worked on that part. We used the **All WHO news via RSS** to capture all the latest news from the WHO.

To work on our WHO news content, we tried to `fetch` the RSS to get the translated response into a text, which will then be parsed those strings into a DOM.

```js
componentDidMount(){
   const settings = {
       "url": "https://www.who.int/rss-feeds/news-english.xml",
       "method": "GET",
       "timeout": 0,
   };
   const RSS_URL = settings.url;
   fetch(RSS_URL)
        .then(response => response.text())
        .then(str => new window.DOMParser().parseFromString(str, "text/xml"))
        .then(data => { 
                   // code will be here ...
   });
}



```

thanks to hally for working on project and dev.to team for hosting hackathons 

#Authors 
* Hally
* Krishna 

# Team Members

* Hally Github👉[hally](https://github.com/itshally)
* krishna Github👉[krishnadevz](https://github.com/krishnadevz)

![GIF](https://media.giphy.com/media/LpQrsRA3zOuJNk7KYt/giphy.gif)
 

## Additional Resources
* WHO API 
* Material UI
* axios
* coil 
 {% twitter 1276340062788214785 %}