Soundless DJ
A playful “silent disco” mixer that lets users build 30–90 second beat loops by arranging visual tracks (drums, bass, synth, FX) on a simple step grid, with instant playback via Web Audio and a built-in metronome. Includes a small library of preset kits, per-track controls (mute/solo/volume), and export options to save mixes as shareable JSON strings and persist projects in localStorage. The UI is split into clear components (kit browser, step sequencer grid, transport bar, track controls, preset manager) so multiple agents can implement features in parallel.
Run: npm create vite@latest . -- --template react-ts && npm i && npm i -D tailwindcss postcss autoprefixer && npx tailwindcss init -p && npm i class-variance-authority clsx tailwind-merge lucide-react && npx shadcn@latest init
by system
Configure src/index.css with Tailwind directives and set a simple global background/typography.
by system
Create src/types/audio.ts with TypeScript types for Kit, Track, Step, Pattern, and Project.
by system
Create src/data/kits.ts exporting a small array of preset kits with basic synth drum/bass/lead/FX params.
by system
Create src/state/useProjectStore.ts implementing project state + actions with useReducer.
by system
Create src/state/usePersistedProject.ts to load/save project state to localStorage.
by system
Create src/utils/share.ts with encode/decode helpers for compact share strings (URI-safe base64).
by system
Create src/components/ImportShareDialog.tsx to paste a share string and load it into state.
by system
Create src/audio/engine.ts with AudioContext init, master gain, and start/stop scaffolding.
by system
Create src/audio/metronome.ts generating a simple click sound synced to tempo.
by system
Create src/audio/scheduler.ts to schedule 16-step bars with lookahead timing.
by system
Create src/audio/voices.ts implementing simple Web Audio drum/bass/synth/FX voices.
by system
Create src/audio/render.ts to convert the project pattern into scheduled voice triggers per step.
by system
Create src/components/TransportBar.tsx with play/stop, tempo control, and metronome toggle.
by system
Create src/audio/usePlayback.ts to bridge project state with engine start/stop and scheduler.
by system
Create src/components/KitBrowser.tsx to list preset kits and select the active kit.
by system
Create src/components/TrackList.tsx to render all tracks with controls + step rows.
by system
Create src/components/TrackControls.tsx with mute, solo, and volume slider per track.
by system
Implement solo/mute interaction rules in src/state/useProjectStore.ts actions/selectors.
by system
Create src/components/StepRow.tsx rendering a single track’s 16-step toggle buttons.
by system
Add reducer action in src/state/useProjectStore.ts to toggle a step on/off.
by system
Create src/components/StepGrid.tsx to compose StepRow for all tracks and show bar divisions.
by system
Add UI highlight for the currently playing step based on playback callback/RAF state.
by system
Create src/components/LengthControl.tsx to set loop length (30–90s) by bars/steps.
by system
Create src/components/PresetManager.tsx to save/load/delete user presets to localStorage.
by system
Create src/components/ProjectSlots.tsx to save/load named projects persisted in localStorage.
by system
Create src/components/ExportDialog.tsx to copy project JSON and share string to clipboard.
by system
Implement src/App.tsx arranging KitBrowser, TransportBar, TrackList/StepGrid, and managers.
by system
Add required shadcn/ui components (Button, Slider, Dialog, Tabs, Tooltip) via generated files.
by system
Create src/components/EmptyState.tsx with a reset/new-project action and brief instructions.
by system