motivic Svelte Themes

Motivic

Tools for composers. Svelte SPA + Node.js and Go API microservices in a serverless monorepo hosted on Vercel

Motivic

tools for composers

This app allows users to do the following:

  1. Generate a monophonic melody, or motif one of three ways:
    • Creating a random motif with the randomizer tool
    • Importing a MIDI file (must be monophonic!)
    • Importing a JSON file (must be monophonic!)
  2. Transform that motif into a new motif using concepts from baroque composition.
  3. Layer multiple motifs to create unique melodic counterpoint.
  4. Export that new motif as a MIDI, JSON, or WAV file.

Motivic uses the Web Audio API to generate all sounds.

SERVICES

ACTIVE

  • motivic web app
    • SPA built with Svelte 3
    • consumes motivic API
    • future:
      • could be configured into a PWA
  • motivic API
    • Swagger API Doc
    • API curl test steps here
    • exposes core business logic of Motivic
    • REST API hosted as polyglot serverless funtions:
      • /api/melody/random:
        • Node.js service generates random motifs based on user input.
      • /api/melody/transform:
        • Node.js service applies musical transformations to motifs based on user input.
      • /api/convertor:
        • Golang service converts JSON and MIDI motifs to WAV audio files.
    • future:
      • core functionality will expand greatly
      • will service multiple public and private clients

INACTIVE

  • motivic_api_crud
    • REST API
    • CRUD service against hosted MongoDB instance
    • currently hosted on MongoDB Atlas
    • future:
      • will be re-animated if and when I need to model user accounts and persist user data remotely

REPOSITORY

The SPA front-end app code and the REST API code live together in one monorepo.

DEPENDENCIES:

VERCEL HOSTING

Motivic is hosted as a serverless monorepo app on cloud hosting platform Vercel. Changes can be made via the Vercel dashboard.

VERCEL SERVERLESS MONOREPO HOSTING SCHEME

  • The front-end Svelte SPA is served from public/index.html.
  • REST API hosting scheme:
    • Every directory in the ./api directory represents a url path
    • Every file in the ./api directory represents an endpoint that runs as its own serverless function:

CI/CD FLOW

Deployment works via a Vercel integration with the GitHub repository.

To Deploy To Production:

  1. Push branch to master
  2. Build stage
    1. Website assets are built
    2. Each API endpoint file is deployed to its own serverless function
  3. Deploy stage
    1. Website is deployed
    2. Each API endpoint is spun up at request time

RUNNING LOCALLY

# FRONT END APP
# install dependencies
npm install

# start local dev server with file watching and hot reloading at localhost:5000
npm run dev

# create prod build
npm run build

# run prod build
npm run start

# BACK END API
# runs serverless apis with file-watchers listening locally at localhost:3000
vercel login && vercel dev --debug

# FULL STACK
# rebuild full app
npm run build && vercel login && vercel dev --debug

Top categories

Loading Svelte Themes