Soundless Beatbox
A playful rhythm-composition SPA where users build beat patterns using a grid-based step sequencer with visual “instruments” (kick, snare, hat, clap) and optional Web Audio playback. Create multiple looping patterns, adjust tempo/swing, and export/share a compact text code that recreates the beat (also saved to localStorage). The UI is split into clear components: sequencer grid, transport controls, instrument panel, pattern library, and share/export modal.
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 tailwind.config.ts and src/index.css with Tailwind layers and shadcn color variables.
by system
Create src/lib/utils.ts with cn() helper for Tailwind class merging.
by system
Implement src/App.tsx with the main split layout regions (grid, controls, panel, library).
by system
Create src/components/AppShell.tsx to provide page padding, max-width, and section framing.
by system
Create src/types/sequencer.ts defining InstrumentId, StepState, Pattern, and ProjectState types.
by system
Create src/data/instruments.ts exporting kick/snare/hat/clap metadata (name, color, icon).
by system
Create src/state/useSequencerStore.ts using React context + reducer to hold patterns, transport, and settings.
by system
Create src/state/SequencerProvider.tsx to expose store and actions to the app.
by system
Wrap App in src/main.tsx with SequencerProvider.
by system
Create src/components/SequencerGrid.tsx rendering instrument rows and 16-step columns.
by system
Create src/components/StepCell.tsx as a clickable toggle button with active/hover styles.
by system
Create src/components/InstrumentRowHeader.tsx showing instrument icon/name and row color.
by system
Add reducer action to toggle a cell (instrumentId, stepIndex) in useSequencerStore.ts.
by system
Add playhead index to state and highlight current column in SequencerGrid.tsx.
by system
Create src/components/TransportControls.tsx with play/pause, stop, and current pattern label.
by system
Create src/components/TempoControl.tsx using a slider/input to edit BPM in state.
by system
Create src/components/SwingControl.tsx using a slider to edit swing percentage in state.
by system
Create src/audio/scheduler.ts implementing a timer-driven step clock (no audio yet) that advances playhead.
by system
Connect TransportControls actions to start/stop the scheduler and update playhead in store.
by system
Create src/audio/engine.ts with simple synthesized drum sounds for kick/snare/hat/clap via Web Audio.
by system
On each scheduler tick, trigger engine.ts sounds for active steps of the current pattern.
by system
Create src/components/InstrumentPanel.tsx to display instruments and per-instrument mute toggles.
by system
Add per-instrument mute state and reducer actions to useSequencerStore.ts.
by system
Create src/components/PatternLibrary.tsx listing patterns with select, add, duplicate, and delete buttons.
by system
Implement reducer actions for add/select/rename/duplicate/delete patterns in useSequencerStore.ts.
by system
Create src/share/codec.ts to encode/decode the full project state into a compact URL-safe text code.
by system
Create src/components/ShareModal.tsx (shadcn Dialog) showing export code, copy button, and import field.
by system
Create src/state/persistence.ts to save/load project state to localStorage and hydrate on startup.
by system
Wire ShareModal to codec.ts and store actions so importing code replaces state and exporting reflects current state.
by system