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.
Screenshot date and time: 2020-06-04 3:41 PM
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.
Screenshot date and time: 2020-06-04 3:41 PM
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.
This project is built for a hackathon regarding web monetization api, to showcase an updated counter of COVID-19 cases and to show exclusive news content from WHO.
</🌠>Web-Monetization With COVID-19 Tracker & WHO NEWS API </💰>
Prequisities for running this project and for seeing exclusive content
reactjs intall with nodejs stable Version(v12.14.1)
material UI
For seeing exclusive content following are the requirements⤵
coil webmonetization extension (firefox/chrome/safari) with membership
then you are able to see news(exclusive content).
Basic view of the app with out coil membership⤵
After enabling coil extension(With membership) view of app⤵
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(){constsettings={"url":"https://www.who.int/rss-feeds/news-english.xml","method":"GET","timeout":0,};constRSS_URL=settings.url;fetch(RSS_URL).then(response=>response.text()).then(str=>newwindow.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