DEV Community

Bruno Luis Panuto Silva
Bruno Luis Panuto Silva

Posted on

2 3

WMHub: easy Web Monetization for all

What I built

A web app that allows you to automatically add Web Monetization to your project without having to code JS or add <meta> tags. It also collects metrics on pages with Web Monetization and consolidates that into the platform.

Submission Category:

Foundational Technology

Demo

https://wmhub.live

Link to Code

Wmhub

Here you'll find our application!

Setup

Install the Elixir programming language, clone this repo and run:

mix deps.get
cd assets/ && npm install && cd ..
iex -S mix phx.server



How I built it

The stack for this project is Elixir, with PostgreSQL for the database and Phoenix as the web framework.

The "library" injected in pages to handle Web Monetization events is made in JavaScript, the ES5 version. We want to include everyone!

All interactions apart from the landing page, signin and signup forms are Phoenix LiveViews, which classifies this app as an SPA (after you login).

Communication with pages to broadcast real-time payment pointer updates to users that are already connected to your app are handled by Phoenix Channels.

Additional Resources/Info

The plan is to expand WMHub beyond a simple "payment pointer" update tool. Here are some of the ideas in the roadmap:

  • A templating tool that allows you to hook Web Monetization events and display content. Maybe display a link to paying users! There is a challenge here in flexibility vs mitigating XSS attack vectors.

  • A "trigger" tool that runs on Web Monetization events and allows you to hook any type of code.

  • A marketplace of triggers and templates, so that users can install things without any knowledge whatsoever.

  • Collect (anonimized/with consent) data from users visiting a WMHub powered project, allowing the content creator more insight on how their content is consumed.

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

Top comments (0)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay