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
itshally
/
wb-covid19
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⤵
Live View URL⤵
In the project directory, you can run following commands⤵
npm start
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
npm test
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
npm run build
Builds the app for production to the build folder.
It correctly…
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
Top comments (12)
Very cool, @itshally @krishnadevz.
Is it really necessary for the Stop / Start call-to-action? ie. if I'm a Web Monetization provider member (Coil or other) then starting monetization automatically seems like something I'd want. It took me a while to realise that I had to hit 'start' — when one of the attractions of Web Monetization is that it happens automagically in the background without any thinking if indeed I am a member.
However if I wasn't a member perhaps there would be more info/call to action to consider becoming a member explaining all the extra features that you would unlock?
Yes, that is necessary to click the start button but before that, we have to install Coil browser extension in the browser then after logging in then we can click on the start button then we are able to see exclusive contents/News. but if we don't have coil extension install/ installed with not login then that is not going to work means then one message show like this
so that's all about description if you're not a member of a coil with extension then you can see basic tracker but for the more updates like news from WHO we have to enable coil with a login that's all.
Current Monetization State: Not enabled in browserand in-browser like edge where coil extension is not yet available app look like this ⤵Thank you 😊👋
hally can also describe more welcome to thread @itshally
Hey, so yeah, I agree that we should apply a brief description of what a Web Monetization provider can unlock when they click the Start button. In that case, it will give them an idea of what they can unlock. Thank you for the feedback!
However, we want to welcome everybody especially those people who aren't a web monetization provider to see our project. We don't want to hide this graph because awareness is important. But since reading those News that we displayed from WHO is a reason to stay for a long time, then we find it reasonable for Web Monetization provider to activate the Start button.
@itshally — A provider (Coil) doesn't decide to stop/start the stream. The content/site owner decides this by quickly checking and detecting if Web Monetization has started. This should/could be instant if true, rather than making the end user click start. See Start/Stop example.
hello there now @itshally updated web monetization code so basically now I opened our app then I am having coil extension also then I logiedIn also but I don't membership from a coil so I am not able to see content but hally signup for free because hackathon provides that for users and now we added new cards also check view below and once visit our app website
you can check it out what changes we made on the app also or livepreview to thanks for the reply have good day
Nice update, folks. That bit is now working smoothly and I was aurtomatically streaming when I visited the site.
Some messaging when not a member would like be a good next update candidate (I visited on a browser that I don't have the extension installed).
We just realized the mistake that was going on our project after your feedback, that's why I want to say thank you for enlightening us as well 😄
No 'mistakes' or right or wrong, @itshally @krishnadevz. I'm glad that you're experimenting with different techniques. This is all so new — so kudos to you both for taking the plunge.
Thank you have a good day 😊🙏
Great!
thanks Robert. I like to read your amazing articles my favorite one is this post has -- views tom Scott one. thanks for inspiring
Thanks! ✌️🚀🖐️