The HTML-108 is a minimal browser-based step synthesizer.
A nostalgic nod to the synthesizer hardware of the 1980s, like the seminal Roland TR-808, that ushered in several genres of electronic music.
Personally, it also enabled me to explore the wonderful world of the Web Audio API and the Tone.js javascript framework.
You can access a working prototype of the React app here: https://html-108.vercel.app
The corresponding Node Express Sever repo here: html-108-server
Landing page introduces the application...
User is presented with an interactive step sequencer interface to create a new track...
Users can save, update, and delete their tracks...
All saved tracks are accessible via the community dashboard...
Preliminary wireframes accessible as 'Greybox' HTML Wireframes
Components are stateless unless otherwise noted. In progress, as may introduce more stateful components.
Schema
Business Objects
Users (database table)
tracks (database table)
API TOKEN Authorization required
POST
/api/tracks
create new track via /add-track
URL/api/users
create new user via /register
URLGET
/api/tracks
get all tracks/api/tracks?visible=true
get all publicly visible tracks for community /dashboard
URL/api/tracks?userId=[:userId]
get all tracks for signed-in user's /my-dashboard
URL/api/tracks/:trackId
get particular track for /track/:trackId
URL/api/users
get all users associated with /api/tracks/?visible=true
/api/users/:userId
for user to log-inPATCH
/api/tracks/:trackId
update track via /track/:trackId
URL/api/users
update user profileDELETE
/api/tracks/:trackId
delete track via /dashboard
URL/api/users
delete profileScaled back the ambition and scope of project considerably for v1.o MVP release.
Anticipate future v1.x enhancements to include:
Project Board featuring bugs and enhancements
Use command line to navigate into the project folder and run the following in terminal
npm install
npm start
npm run test
npm install
npm run migrate -- 1
npm run dev
npm run test
This project was bootstrapped with Create React App.