{"componentChunkName":"component---src-templates-project-js","path":"/projects/web-monetization","result":{"data":{"site":{"siteMetadata":{"title":"itsHally"}},"markdownRemark":{"html":"<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 590px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/81f03b22161ec1b061e0aa396ce0352a/cb9f4/wmcovid19.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 50.67567567567568%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAAsTAAALEwEAmpwYAAABRElEQVQoz3VSgXKDIAzt/3/kdrt1q9YhCCoCCW+BVqveNXcxIQnPkJdLzhlFit1rEeNGfDctuvsdXddVNcYc6vdSzpfVOSbKByBmJKKaZ37o+ccv4FzvXVawGAOUUiBKD7QHNN5LPvgrzgY4zwlNM6LXEdokWJcxjoBzgLVc/aLFd1ZyEi/WDix3Dx1iO4SFpGhGZnmuNNqrQYojmATIzbCjlzFIXWQYOyFKPMk5pbyf4atdOzl8XL9wU3c4P6LtWmirSwVsr/B3+wX5GXGa0X5+Q/808MYeSDqQ4mWOWkCVGzAtvgIFilgknlNCXhawaPILgnHw8oIgneYnkxVwBWNh9Mx2KSLKmFwA2aGy/paiMylJOggxVmCSVSm2+mV1ZFD8zFWVPNV1YoRAQlR4zXDfYQHdLp217uI5nnG99uh7vQH+A7OwElzlh95XAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"screenshot\"\n        title=\"screenshot\"\n        src=\"/static/81f03b22161ec1b061e0aa396ce0352a/fcda8/wmcovid19.png\"\n        srcset=\"/static/81f03b22161ec1b061e0aa396ce0352a/12f09/wmcovid19.png 148w,\n/static/81f03b22161ec1b061e0aa396ce0352a/e4a3f/wmcovid19.png 295w,\n/static/81f03b22161ec1b061e0aa396ce0352a/fcda8/wmcovid19.png 590w,\n/static/81f03b22161ec1b061e0aa396ce0352a/efc66/wmcovid19.png 885w,\n/static/81f03b22161ec1b061e0aa396ce0352a/c83ae/wmcovid19.png 1180w,\n/static/81f03b22161ec1b061e0aa396ce0352a/cb9f4/wmcovid19.png 1903w\"\n        sizes=\"(max-width: 590px) 100vw, 590px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n  </a>\n    </span></p>\n<h1>Web Monetization</h1>\n<p><a href=\"\"><img src=\"https://api.netlify.com/api/v1/badges/e30784c5-9efd-4f20-8a47-13f3fb899613/deploy-status\" alt=\"Netlify Status\"></a></p>\n<img alt=\"GitHub\" src=\"https://img.shields.io/github/license/itshally/wb-covid19?style=for-the-badge\">\n<img alt=\"GitHub top language\" src=\"https://img.shields.io/github/languages/top/itshally/wb-covid19?style=for-the-badge\">\n<p>For this May-June 2020's Hackathon, we decided to build a project that has a specific feature of web monetization. We used ReactJS as one of our stacks for this project, and additional framework/packages like Material-UI, axios, and ChartJS.</p>\n<h2>What is Web Monetization?</h2>\n<p>It is an alternative solution for content creators to get paid for the contents they are publishing on the Web. When a web user visits the monetized website, the visitor's browser may send <strong>micropayments</strong> to it.\nIt's a cool project because the web page can detect these micropayments and give the user a better experience.\n<a href=\"https://webmonetization.org/\">Learn more</a></p>\n<p>The DEV team organized a Hackathon,\n<a href=\"https://dev.to/devteam/announcing-the-grant-for-the-web-hackathon-on-dev-3kd1\">Grant For The Web Hackathon on Dev</a>\n(Source).</p>\n<p>Everybody who is participating can choose between these three categories:</p>\n<ul>\n<li>Foundational Technology</li>\n<li>Creative Catalyst</li>\n<li>Exciting Experiment</li>\n</ul>\n<p>And our project was under <strong>Foundational Technology</strong>.</p>\n<h2>Tools &#x26; Technologies</h2>\n<ul>\n<li>ReactJS</li>\n<li>Material-UI</li>\n<li>Axios</li>\n<li>API</li>\n<li><a href=\"https://webmonetization.org/\">Web Monetization</a></li>\n<li><a href=\"https://coil.com/\">Coil</a></li>\n</ul>\n<h2>Installation</h2>\n<p>To clone this project to your device, type the <code>code</code> below to your git bash:</p>\n<pre><code>git clone https://github.com/itshally/wb-covid19.git\n</code></pre>\n<p>After cloning the repo, make sure to install all the dependencies before running it locally.</p>\n<pre><code>cd wb-covid19\n\nnpm i\n\nnpm start\n</code></pre>\n<h2>Screenshots</h2>\n<ul>\n<li>\n<h4>Basic view of the app without coil membership</h4>\n</li>\n</ul>\n<p><img src=\"https://raw.githubusercontent.com/itshally/wb-covid19/master/Annotation%202020-06-09%20152200.png\" alt=\"screenshot of basic view\"></p>\n<p><img src=\"https://raw.githubusercontent.com/itshally/wb-covid19/master/basicviewofapp.gif\" alt=\"gif of basic view\"></p>\n<ul>\n<li>\n<h4>After enabling coil extension with coil membership</h4>\n</li>\n</ul>\n<p><img src=\"https://raw.githubusercontent.com/itshally/wb-covid19/master/Devtohackathon.gif\" alt=\"premium view\"></p>\n<h2>License</h2>\n<p>Distributed under the\n<a href=\"https://github.com/itshally/wb-covid19/blob/master/LICENSE\">MIT License</a></p>\n<h2>Team Members</h2>\n<ul>\n<li>Hally</li>\n<li>Krishna Kakade</li>\n</ul>","id":"1217de75-1027-5105-9469-6cbdee9cd1c2","frontmatter":{"title":"Web Monetization","description":"For this 2020 Hackathon, we decided to build a project that has a specific feature of web monetization. We used Reactjs as our stack for this project, and additional framework and packages like Material UI, axios, and chart.","preview":"https://wmcovid19.netlify.app/","tools":["ReactJS","Material-UI","Axios","API","Coil"],"sourceCode":"https://github.com/itshally/wb-covid19","keyWords":null,"image":{"childImageSharp":{"fixed":{"src":"/static/81f03b22161ec1b061e0aa396ce0352a/986a3/wmcovid19.png"}}}}}},"pageContext":{"id":"1217de75-1027-5105-9469-6cbdee9cd1c2","previousPostId":"cfc12042-d891-5bb1-b5a2-d98d7a6cbbdd","nextPostId":null}},"staticQueryHashes":["143701507"]}