loading...
Cover image for COVID-19 Tracker web-monetized with News from WHO API ๐ŸŽ‰๐Ÿš€

COVID-19 Tracker web-monetized with News from WHO API ๐ŸŽ‰๐Ÿš€

krishnakakade profile image krishna kakade Updated on ใƒป3 min read

gftwhackathon Hackathon Journey (4 Part Series)

1) DAY 1 #gftwhackathon Team Forming and Idea fixing and webmonetization 2) DAY 2 Started Working on Tracker and wireframes for APP structuring 3) DAY 3:-Exclusive content from WHO API & web-monetization 4) COVID-19 Tracker web-monetized with News from WHO API ๐ŸŽ‰๐Ÿš€

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

Screenshot date and time: 2020-06-04 3:41 PM

Alt Text

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.

two

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.

third

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

fourth

View After enabling Coil extensioon with membership

Alt Text

โคด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

GitHub logo 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 </๐Ÿ’ฐ>

Netlify Status

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โคต

basicview

basidc

After enabling coil extension(With membership) view of appโคต

firstview

Live View URLโคต

live Preview

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โ€ฆ

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

GIF

Additional Resources

gftwhackathon Hackathon Journey (4 Part Series)

1) DAY 1 #gftwhackathon Team Forming and Idea fixing and webmonetization 2) DAY 2 Started Working on Tracker and wireframes for APP structuring 3) DAY 3:-Exclusive content from WHO API & web-monetization 4) COVID-19 Tracker web-monetized with News from WHO API ๐ŸŽ‰๐Ÿš€

Posted on by:

krishnakakade profile

krishna kakade

@krishnakakade

Learning MERNโœก Stack Developer.SelfTaught-Dev/Opensourcer๐Ÿ›  #100DaysOfCode FOSSโค I like to build things & Write things related to Web๐ŸŒ๐Ÿฑโ€๐Ÿ‘ค. (Learning๐Ÿ“š/Buildingโš™/Writing/๐Ÿฅ›)

Discussion

markdown guide
 

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 Current Monetization State: Not enabled in browser and in-browser like edge where coil extension is not yet available app look 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.
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.

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
Alt Text
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 ๐Ÿ˜Š๐Ÿ™

 
 

thanks Robert. I like to read your amazing articles my favorite one is this post has -- views tom Scott one. thanks for inspiring

 

Thanks! โœŒ๏ธ๐Ÿš€๐Ÿ–๏ธ