Capstone: HTML-108

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.

1. Working Prototype

Server and Database deployed to: https://glacial-forest-14425.herokuapp.com (requires Authorization)

Corresponding client repo: html-108-app

You can access a working prototype of the React app here: https://html-108.vercel.app

2. Functionality

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...

3. Technology

Front-End: HTML5, CSS3, JavaScript ES6, React, Web Audio API, Tone.js
Back-End: Node.js, Express.js, Mocha, Chai, RESTful API Endpoints, Postgres
Development Environment: Vercel (client), Heroku (server), DBeaver

4. Wireframes

Preliminary wireframes accessible as 'Greybox' HTML Wireframes

5. Front-end Struture: React Components Map

Components are stateless unless otherwise noted. In progress, as may introduce more stateful components.

Index.js
- APP.JS (STATEFUL:BRAIN)
  - Nav.js
  - Footer.js
  - Intro.js
  - Dashboard.js
  - AddTrack.js
  - DrumMachine.js (STATEFUL)
  - EditTrack.js
  - DrumMachine.js (STATEFUL)

6. Back-end Structure

Schema

Business Objects

Users (database table)
- id (primary key, auto-generated)
- username (validation: NOT NULL; UNIQUE)
- password (validation: NOT NULL; at least 8 characters, including at least one lowercase, one uppercase, one number, and one special character)
- email (validation: includes @ character and .com, .org, or .net)
- date_created (new Date())
tracks (database table)
- id (primary key, auto-generated)
- user_id (foreign key > Users.id)
- title (defaults to 'Untitled')
- date_modified (new Date())
- visible (NOT NULL, boolean default false)
- tempo (NOT NULL, numeric)
- sequence_length (NOT NULL, numeric)
- notes (NOT NULL, text) Data structure associated with step sequence
- checked (NOT NULL, BOOLEAN ARRAY)

7. API Documentation

API TOKEN Authorization required

POST
- /api/tracks create new track via /add-track URL
- /api/users create new user via /register URL
GET
- /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-in
PATCH
- /api/tracks/:trackId update track via /track/:trackId URL
- /api/users update user profile
DELETE
- /api/tracks/:trackId delete track via /dashboard URL
- /api/users delete profile

Development Roadmap (v1.x)

Scaled back the ambition and scope of project considerably for v1.o MVP release.

Anticipate future v1.x enhancements to include:

User Login via JWT Auth, with personal Dashboard
Ability to adjust time signature from 4 to 8 to 12 to 16 beats
Ability to adjust pitch
Ability to choose samples (e.g. hihat, clap, trap, bass, etc)
Ability to download mp3 file of track

Project Board featuring bugs and enhancements

How to run it (done)

Use command line to navigate into the project folder and run the following in terminal

Local React scripts

To install the react project ===> npm install
To run react (on port 3000) ===> npm start
To run tests ===> npm run test

Local Node scripts

To install the node project ===> npm install
To migrate the database ===> npm run migrate -- 1
To run Node server (on port 8000) ===> npm run dev
To run tests ===> npm run test

Init boilerplate: https://github.com/artificialarea/node-postgres-boilerplate

artificialarea/html-108-server