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.

We changed some things in app you guys can check that in live view 👉here live and running.

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

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.

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

View After enabling Coil extensioon with membership

⤴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 live and running.

Link to Code

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.

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
• krishna Github👉krishnadevz

Additional Resources

• WHO API
• Material UI
• axios
• coil