How ilp90/music-composer works
Music Composer is a browser-based camera-and-gesture instrument: users point at a circle-of-fifths overlay to play notes, then record and manage sessions. The web app also supports password and optional Google sign-in; recordings can be queued locally and uploaded to S3 through the API. The API handles identity, sessions, and recording metadata, with DynamoDB-backed repositories. The compose and upload internals are represented from documented capabilities and source-index references; unsampled implementation links are marked unverified.
Main entry points: auth.ts Authentication routes · ComposeStage.tsx Camera composition stage · app.ts Fastify application · google.ts Google OAuth routes
Components 30
Gesture composition
- Compose page
apps/web/src/features/compose/ComposePage.tsx - Camera composition stage
apps/web/src/features/compose/ComposeStage.tsx - Hand tracking
apps/web/src/features/compose/handTracking.ts - Chart and view mapping
apps/web/src/features/compose/viewMapping.ts - Note audio engine
apps/web/src/features/compose/audioEngine.ts - Session recording
apps/web/src/features/compose/recorder.ts
Recording management
- Recordings library
apps/web/src/features/recordings/RecordingsPage.tsx - Local recordings
apps/web/src/features/recordings/localStore.ts - Upload queue
apps/web/src/features/recordings/uploadQueue.ts - Multipart uploader
apps/web/src/features/recordings/uploader.ts
Identity and sessions
- Sign-in and registration
apps/web/src/features/auth/LoginPage.tsx - Web auth provider
apps/web/src/features/auth/AuthProvider.tsx - API client
apps/web/src/lib/apiClient.ts - Google sign-in UI
apps/web/src/features/auth/GoogleSignIn.tsx
API and persistence
- Fastify application
apps/api/src/app.ts - Authentication routes
apps/api/src/routes/auth.ts - Google OAuth routes
apps/api/src/routes/google.ts - Recording routes
apps/api/src/routes/recordings.ts - Session service
apps/api/src/services/sessions.ts - Token service
apps/api/src/services/tokens.ts - User repository
apps/api/src/repositories/users.ts - Refresh-token repository
apps/api/src/repositories/refreshTokens.ts - Login-attempt repository
apps/api/src/repositories/loginAttempts.ts - Recording metadata repository
apps/api/src/repositories/recordings.ts - Object storage service
apps/api/src/services/storage.ts
Other components
- Composer user
- Camera and microphone
- DynamoDB
- S3-compatible storage
- Google OAuth
Connections 39
- Composer user → Compose page: opens
- Compose page → Camera composition stage: renders
- Camera composition stage → Camera and microphone: uses feed
- Camera composition stage → Hand tracking: tracks hands
- Camera composition stage → Chart and view mapping: maps gestures
- Camera composition stage → Note audio engine: triggers notes
- Compose page → Session recording: records session
- Session recording → Note audio engine: captures audio
- Session recording → Upload queue: queues recording
apps/web/src/features/compose/useRecording.ts - Composer user → Recordings library: manages sessions
- Recordings library → Local recordings: reads local
apps/web/src/features/recordings/RecordingsPage.tsx - Recordings library → Upload queue: manages uploads
apps/web/src/features/recordings/RecordingsPage.tsx - Upload queue → Multipart uploader: dispatches upload
- Multipart uploader → API client: requests upload
- Multipart uploader → S3-compatible storage: uploads parts
- Composer user → Sign-in and registration: signs in
- Sign-in and registration → Google sign-in UI: offers option
- Web auth provider → API client: calls API
apps/web/src/features/auth/AuthProvider.tsx - API client → Fastify application: sends requests
- Fastify application → Authentication routes: registers
apps/api/src/app.ts - Fastify application → Google OAuth routes: registers
apps/api/src/app.ts - Fastify application → Recording routes: registers
apps/api/src/app.ts - Authentication routes → User repository: reads and writes
apps/api/src/routes/auth.ts - Authentication routes → Login-attempt repository: checks attempts
apps/api/src/routes/auth.ts - Authentication routes → Refresh-token repository: rotates tokens
apps/api/src/routes/auth.ts - Authentication routes → Session service: starts sessions
apps/api/src/routes/auth.ts - Authentication routes → Token service: handles tokens
apps/api/src/routes/auth.ts - Google OAuth routes → Google OAuth: authenticates
apps/api/src/routes/google.ts - Google OAuth routes → User repository: finds users
apps/api/src/routes/google.ts - Google OAuth routes → Session service: starts sessions
apps/api/src/routes/google.ts - Session service → Refresh-token repository: stores refresh family
apps/api/src/services/sessions.ts - Session service → Token service: signs access token
apps/api/src/services/sessions.ts - Recording routes → Recording metadata repository: stores metadata
apps/api/src/routes/recordings.ts - Recording routes → Object storage service: manages objects
apps/api/src/routes/recordings.ts - Recording metadata repository → DynamoDB: reads and writes
- User repository → DynamoDB: reads and writes
apps/api/src/repositories/users.ts - Refresh-token repository → DynamoDB: reads and writes
- Login-attempt repository → DynamoDB: reads and writes
- Object storage service → S3-compatible storage: manages objects
apps/api/src/services/storage.ts