loading...
Cover image for Live Art - Showing Support for Artists Through Web Monetization

Live Art - Showing Support for Artists Through Web Monetization

katieraby profile image Katie Updated on ・3 min read

What We Built

We built a "Live Art" web platform to help artists gain monetary support through live art sessions, with payments being sent from supporters using the coil browser extension to the logged-in artist. The payment pointer stored in the meta tags will be dynamic - changing depending on which artist is logged in, to eventually allow for multiple "art rooms" with multiple artists, giving supporters the ability to pick a room.

Submission Category:

This submission falls under the Creative Catalyst category: projects that use existing Web Monetization technology to explore the creation, distribution, and discoverability of content online.

We wanted to submit a project under the creative catalyst category to demonstrate the wide usage of Web Monetization, focused specifically on helping freelance/ad hoc creatives to monetize their passions through the web.

Demo

Find our hosted Live Art here at this link.

Homepage

If you are an artist you will need a payment pointer to enable micro payments to be made to your web wallet. Uphold offer a good service for this and you can sign up here.

Artist Login

As a supporter you will need a coil account and the relevant extension for your web browser. Find more info about getting started here.

Not monetized

Once logged in and the site is monetized, the artist will be able to draw on the canvas with the supporter able to view in real-time.

Blank canvas

Bad art example

The supporter will be sending payments via their Coil browser extension as below.

Monetization in action

Link to Code

Back-end Repo

GitHub logo katieraby / live-art-backend

Backend repo for our Live Art - web monetization hackathon project. Created using nodeJS, Express, Mongoose and MongoDB. MIT Licensed.

Live Art Backend API

Backend RESTful API for Live Art, serving up endpoints relating to storing artist data, logging in, and fetching artist data Endpoints available:

  • GET /artist
  • POST /artist
  • POST /artist/:username

Getting Started & Installation

Prerequisites

To run this API on your machine, you will need Node.js and MongoDB installed on your machine.

To install Mongo, go to https://docs.mongodb.com/manual/installation/

To install Node, go to: https://nodejs.org/en/download/
The version required is a minimum of v. 13.8.0

Installation

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

  1. Clone a copy of the repository on your machine using the below command:
git clone https://github.com/katieraby/live-art-backend.git
  1. Install the required dependencies:
npm install
  1. For testing, install the required dev dependencies:
npm i -D mocha chai supertest

How to create your dbConfig (required)

To connect to your live mongo database, ensure…

Front-end Repo

GitHub logo katieraby / live-art

Live Art project for the DEV Web Monetization Hackathon. Show support for artists and creatives by viewing their live art display in a monetized environment. Co-created with bainesface.

Live Art

A web application using web monetization and socket.io to enable supporters to view live art and make micro payments to the artist.

The hosted version of this project is available here.

Alt text

If you are an artist you will need a payment pointer to enable micro payments to be made to your web wallet. Uphold offer a good service for this and you can sign up here

Alt text

As a supporter you will need an coil account and the relevant extension for your web browser. All can be found here

Alt text

Once logged in and the site is monetized, the artist will be able to draw on the canvas with the supporter able to view in real time.

Alt text

Alt text

The supporter will be sending payments via their Coil browser extension as below.

Monetization in action

If you would like to view the backend API for this project please find the code here.

Prerequisites

  • …

How We Built It

Technologies used:

We started off by creating our mini back-end, using Express, Mongoose and MongoDB, in which we would store the artist's data, including username, bio, payment pointer and password (hashed), to enable artists to have a regular account in which they could login as an artist to Live Art.

We then moved across to our front-end and decided to create our socket server within the front-end file structure, to separate concerns. For our front-end web application, we used React and integrated the Canvas API to act as our artist's whiteboard during a Live Art session.

To integrate web monetization into our application, we needed dynamic meta-tags, in which the monetization payment pointer changed according the artist logged in. We used the React plugin react-meta-tags to give us component-like access to the meta tags, where we were then able to grab the artist's payment pointer ID from the socket connection, store it in state, and reflect this change in our meta tags for monetization.

To finish, we added some styling to our application using CSS modules.

The Future of Live Art

At present our product, on the date of submission, is our minimum viable product and has a few bugs which need fixing!

Improvements we would also like to make following the submission deadline include:

  • Adding a live chat to allow users to interact with the artist
  • Allow supporters to login with Coil Authentication
  • Adding additional styling
  • Creating multiple art rooms, so multiple artists are able to draw at the same time, with supporters able to choose which artist to support.

Team Members

Sarah Baines - Github
Katie Raby - Github

Final Word

Thank you to the DEV team for putting on such awesome hackathons, to allow developers the opportunity to explore new technology they wouldn't otherwise be aware of!


Celebration GIF

Posted on Jun 5 by:

katieraby profile

Katie

@katieraby

Junior Software Engineer, AWS Certified Cloud Practitioner, Girls Who Code Facilitator, runner up of #gftwhackathon, lifetime learner πŸ‘©πŸΌβ€πŸ’»

Discussion

markdown guide