🗺️ MVP Roadmap

Initialize React project with TypeScript

Vite + React 18 + TypeScript template

Set up Cloudflare Pages deployment

Configure wrangler.toml, CI/CD pipeline

Create AudioContext manager singleton

Handle browser autoplay policies, sample rate config

Integrate Tone.js for transport

Install tone.js, configure Transport singleton

Implement basic transport controls

Play, pause, stop, seek functionality

Create audio file loader (WAV, MP3)

Use Tone.Buffer, handle decoding errors

Build waveform generator (Web Workers)

Offload to worker, return peak data

Create audio playback test page

Load sample, display waveform, play back

Set up PIXI.js v8 for timeline canvas

WebGL renderer, stage setup, resize handling

Create timeline grid renderer

Beat/bar lines, zoom levels, time ruler

Build track lane component (React)

Track header with name, controls, color

Implement clip rendering on timeline

Waveform sprites in PIXI, positioned by time

Add playhead cursor

Animated playhead synced to transport

Implement horizontal scroll/zoom

Mouse wheel zoom, drag to scroll

Create clip drag-and-drop

Move clips on timeline, snap to grid

Implement clip resize (trim)

Drag edges to resize, maintain audio offset

Set up Zustand state store

Project state, tracks, clips, transport

Connect state to audio engine

State changes trigger audio graph updates

Create 16-pad drum interface

4x4 grid, MPC-style layout

Implement pad triggering (mouse + keyboard)

QWERTY mapping, visual feedback

Add velocity sensitivity

Keyboard velocity layers, mouse Y-axis

Build 16-step sequencer

Step grid per pad, pattern length control

Implement pattern playback

Sync to Tone.js Transport, loop patterns

Add swing/groove control

Adjustable swing percentage

Create kit loader

Load preset drum kits, assign to pads

Include 3 default hip-hop kits

Boom bap, trap, lo-fi kits

Create channel strip component

Vertical strip with fader, pan, meters

Implement volume faders

Smooth automation, dB scale

Add pan knobs

Rotary control, center detent

Create mute/solo buttons

Solo logic (exclusive/additive)

Build VU meters

Peak + RMS visualization, clip indicator

Create master bus channel

Final output with master fader

Add basic 3-band EQ per channel

Low, mid, high shelves

Connect mixer to audio graph

GainNode, PannerNode, routing

Support 8 tracks minimum

Scrollable mixer for more tracks

Add track add/remove functionality

Dynamic track management

Set up R2 bucket for samples

Create bucket, configure CORS

Upload initial government sound library

10K samples, organized by category

Create D1 sample metadata schema

name, path, bpm, key, tags, duration

Build sample browser UI

Category tree, list view, grid view

Implement instant preview

Click to preview, auto-stop on next

Add tempo-synced preview

Time-stretch preview to project BPM

Implement drag-to-timeline

Drag sample, create clip on drop

Add favorites system

Star samples, filter by favorites

Set up Vectorize index

896-dim embeddings, cosine similarity

Create embedding pipeline (Workers AI)

BGE embeddings for sample metadata

Embed all sample metadata

Batch process 10K samples

Build search API endpoint

Query -> embed -> search -> rank

Implement hybrid search (keyword + semantic)

RRF fusion of D1 and Vectorize results

Add BPM range filter

Slider for BPM range filtering

Add key/scale filter

Filter by musical key

Create "similar samples" feature

Find similar to selected sample

Set up Workers AI Whisper integration

API endpoint for audio transcription

Create microphone capture component

Push-to-talk, visual feedback

Implement audio recording and upload

MediaRecorder -> R2 -> Whisper

Set up Llama 4 Scout for intent classification

Classify: transport, mixer, sample, etc.

Create command parser

Extract entities: track names, values

Implement basic commands

"play", "stop", "mute track 1", "set BPM 90"

Add visual command feedback

Show recognized command, success/error

Create voice activation indicator UI

Waveform visualization, status indicator

Set up Gemini 3 Flash API integration

API key, error handling, rate limiting

Configure AI Gateway for caching

Cache common queries, reduce costs

Create chat panel UI

Side panel, message bubbles, input

Build system prompt with DAW context

Include project state, capabilities

Implement streaming responses

Real-time token streaming in chat

Add context awareness

Include current track, selection, tempo

Create suggestion chips

Quick action suggestions based on context

Implement smart model routing

Llama for simple, Gemini for complex

Add conversation history (KV storage)

Persist chat history per session

Implement offline rendering

OfflineAudioContext for export

Create WAV export (24-bit)

High-quality lossless export

Add MP3 export (320kbps)

lamejs for MP3 encoding

Build export progress UI

Progress bar, cancel button

Create project JSON schema

Serializable project structure

Implement project save to D1/R2

Metadata to D1, audio refs to R2

Implement project load

Restore full state from saved project

Add auto-save (every 2 minutes)

Background save, conflict detection

Create projects list page

View, open, delete saved projects

Add local backup (IndexedDB)

Fallback storage for offline

Cross-browser testing (Chrome, Firefox, Edge)

Test all features in each browser

Performance profiling

Lighthouse, DevTools, 60fps verification

Memory leak testing

Extended usage, AudioBuffer cleanup

API rate limit testing

Verify AI endpoints handle load

Fix critical bugs

Address blocking issues from testing

Create landing page

Marketing page with features, signup

Set up authentication (OAuth)

Google, Discord login

Configure production environment

Environment variables, secrets

Deploy to production

Final Cloudflare Pages deploy

Beta launch to 100 users

Invite beta testers, collect feedback