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.
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.
As a supporter you will need a coil account and the relevant extension for your web browser. Find more info about getting started here.
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.
The supporter will be sending payments via their Coil browser extension as below.
Link to Code
Back-end Repo
katieraby
/
live-art-backend
RUNNER UP in the DEV x Grant For The Web Hackathon 2020, '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.
- Clone a copy of the repository on your machine using the below command:
git clone https://github.com/katieraby/live-art-backend.git
- Install the required dependencies:
npm install
- 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
katieraby
/
live-art
RUNNER UP in the DEV x Grant For The Web Hackathon 2020, 'Live Art'. 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.
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
As a supporter you will need an coil account and the relevant extension for your web browser. All can be found here
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.
The supporter will be sending payments via their Coil browser extension as below.
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!
Top comments (2)
Artists often work with oils, acrylics, and watercolours on their artist canvas. Their choice of paint, brush, and mediums will depend on their style and technique. Materials used may include oil, acrylic, watercolour, tempera, or even micro-pens. Other tools may consist of charcoal, pencils, and micro-brushes. Depending on the medium and the artist's preference, these tools may also be used. Aside from the paint itself, artists often choose to purchase other supplies that enhance the artist's canvas.
Good Job Katie😊🎉