Beat Bento
A playful micro music studio where users build short loops by dragging “sound tiles” (kick, snare, hat, bass, synth) into a 16-step grid and hitting play. The app includes a tiny mixer (mute/solo/volume per track), tempo control, and a randomizer that generates new grooves with one click. Loops can be saved as named presets in localStorage and shared via a compact export/import text code.
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 and src/index.css with Tailwind directives and a minimal app theme.
by system
Add React Router and define routes for Studio and Presets pages in a single router file.
by system
Build a responsive AppLayout component with header, main, and footer slots.
by system
Implement a Header component with app title and navigation links.
by system
Create a types module for Track, Step, Pattern, Preset, and ExportCode shapes.
by system
Add a constants module that defines the 5 default tracks (kick/snare/hat/bass/synth).
by system
Implement a useAudioEngine hook using Web Audio API to schedule 16-step playback at a given BPM.
by system
Implement simple synth/drum sound functions (kick/snare/hat/bass/synth) using oscillators/noise/envelopes.
by system
Create a small state store hook (useReducer) for BPM, playing, currentStep, pattern grid, and mixer settings.
by system
Build Play/Stop and current step indicator component wired to the studio store.
by system
Create a BPM slider/input component that updates the store and reconfigures playback.
by system
Render a 5x16 grid component with clickable steps to toggle on/off per track.
by system
Add visual playhead highlighting for the active step column based on currentStep.
by system
Create a tile palette component listing draggable tiles for each track sound.
by system
Implement HTML5 drag/drop so dragging a tile onto a grid cell turns that step on for that track.
by system
Add minimal visual feedback for drag-over cells and active drop targets.
by system
Build a MixerStrip component with volume slider and Mute/Solo toggles for one track.
by system
Render a MixerPanel that lists one MixerStrip per track in a compact layout.
by system
Implement solo priority and mute behavior in the audio engine scheduling.
by system
Route each track through a GainNode and apply per-track volume from the mixer state.
by system
Implement a randomizePattern function that generates musical-ish probabilities per track.
by system
Add a Randomize button component that dispatches the randomize action.
by system
Create helper functions to serialize/deserialize presets and validate schema.
by system
Implement a presets storage module (list/add/update/delete) backed by localStorage.
by system
Add a SavePresetDialog (shadcn/ui) to name and save the current loop to localStorage.
by system
Create a PresetsPage that lists saved presets with load and delete actions.
by system
Implement compact export/import code functions (base64 JSON + version prefix) for patterns and mixer/BPM.
by system
Add an ExportImportModal to copy an export code and paste an import code to load a loop.
by system
Create the StudioPage that composes transport, tempo, tiles, grid, mixer, randomizer, and save/export UI.
by system