Sound Snackboard
A playful “audio bento box” where users assemble short sound clips (tap-to-play pads) into looping mini soundscapes, with each pad showing a simple visual meter and a label. Users can create multiple boards, set loop length, adjust per-pad volume/mute/solo, and save/share boards via a compact JSON export/import string (plus localStorage persistence). The UI is split into clear components: Board List, Pad Grid, Transport Controls (play/stop/tempo/loop), Pad Editor (label/color/volume), and Export/Import 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 content + add @tailwind directives in src/index.css.
by system
Create src/lib/utils.ts with cn() helper for Tailwind class merging.
by system
Add src/types/soundboard.ts defining Board, Pad, TransportState, and export/import schema types.
by system
Create src/data/clips.ts exporting a small list of built-in sound clip URLs/labels for pads.
by system
Add src/lib/storage.ts with load/save functions and schema versioning.
by system
Implement src/state/useBoards.ts for CRUD boards, select active board, and persist to localStorage.
by system
Implement src/state/useTransport.ts for play/stop, tempo, loop length, and playhead position.
by system
Create src/audio/engine.ts with AudioContext init, master gain, and pad player registry.
by system
Add src/audio/loadAudioBuffer.ts to fetch/decode audio into AudioBuffers in the browser.
by system
Implement src/audio/scheduler.ts to loop-trigger active pads based on transport tempo/loop length.
by system
Add src/audio/padGain.ts to apply per-pad volume and mute/solo routing into the audio graph.
by system
Create src/audio/meter.ts exposing a lightweight analyser node and function to read RMS/peak for UI.
by system
Implement src/App.tsx with a two/three-column layout wiring placeholders for main UI sections.
by system
Create src/components/BoardList.tsx to show boards, select active, add, rename, and delete.
by system
Create src/components/TransportControls.tsx with play/stop, tempo input, and loop length selector.
by system
Create src/components/PadGrid.tsx rendering pads in a responsive grid for the active board.
by system
Create src/components/PadTile.tsx for tap-to-play, label display, color, and mini meter bar.
by system
Implement src/hooks/usePadMeter.ts to subscribe to analyser updates and return normalized meter level.
by system
Add src/hooks/usePadActions.ts to handle pad trigger, toggle enabled, and select for editing.
by system
Create src/components/PadEditor.tsx to edit selected pad label, color, assigned clip, and volume.
by system
Add src/components/PadMuteSolo.tsx with per-pad mute/solo toggles integrated with pad state.
by system
Create src/components/PadVolumeSlider.tsx using shadcn Slider to edit a pad’s gain value.
by system
Create src/components/LoopLengthSelect.tsx for choosing bars/beats and updating transport state.
by system
Create src/components/TempoInput.tsx with clamped numeric input and step buttons.
by system
Implement src/lib/codec.ts to serialize/deserialize boards to a compact JSON string with validation.
by system
Create src/components/ExportImportModal.tsx with text area, copy/paste buttons, and error display.
by system
Add src/components/BoardShareButtons.tsx to open the modal and export/import the active board.
by system
Implement src/hooks/useHotkeys.ts for space play/stop and number keys to trigger pads.
by system
Add src/components/EmptyState.tsx for no boards/no pads selected and wire into App sections.
by system