Beat Map Mixer
A playful mini music toy where users build looping “beat maps” by placing sound tiles (kick, snare, hat, clap, bass, FX) onto a 16-step grid and pressing play to hear the pattern. The app includes a tiny preset gallery, per-track mute/volume controls, tempo swing slider, and a simple visualizer that animates with the current step. Users can save/load patterns to localStorage, export/import as JSON, and share a compact text code for quick swapping—all fully client-side in a single React + Vite SPA styled with Tailwind and shadcn/ui.
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 paths and add @tailwind directives in src/index.css.
by system
Add basic CSS variables/theme defaults in src/index.css for shadcn/ui styling.
by system
Implement the top-level layout shell in src/App.tsx (header, main, footer containers).
by system
Install shadcn/ui components needed (Button, Slider, Tabs, Dialog, DropdownMenu, Tooltip) into src/components/ui.
by system
Create src/lib/types.ts defining TrackId, StepIndex, Pattern, Preset, and serialization shapes.
by system
Create src/lib/tracks.ts exporting the six tracks (kick/snare/hat/clap/bass/fx) with labels/colors.
by system
Create src/lib/presets.ts with a small array of starter beat maps.
by system
Create src/lib/pattern.ts for emptyPattern(), toggleStep(), clone(), and normalize() helpers.
by system
Create src/lib/shareCode.ts to encode/decode patterns into a compact text code.
by system
Create src/lib/jsonCodec.ts to stringify/parse patterns with versioning.
by system
Create src/lib/storage.ts to save/load named patterns and last-used state from localStorage.
by system
Create src/audio/engine.ts implementing WebAudio setup and per-track sample playback (osc/noise synthesized).
by system
Create src/audio/scheduler.ts to run a 16-step loop with tempo and swing timing.
by system
Create src/hooks/useTransport.ts to manage play/stop, bpm, swing, currentStep, and connect to scheduler.
by system
Create src/hooks/useMixerState.ts for pattern state, track mute/volume, and persistence integration.
by system
Create src/components/TransportBar.tsx with Play/Stop, BPM control, and Swing slider UI.
by system
Create src/components/StepGrid.tsx rendering 6 tracks x 16 steps with clickable toggles.
by system
Create src/components/StepPlayhead.tsx to visually highlight the current playing step.
by system
Update src/components/StepGrid.tsx to use pattern helpers to toggle steps and reflect active state.
by system
Create src/components/TrackStrip.tsx with per-track mute button and volume slider.
by system
Update src/components/TrackStrip.tsx to read/write mute/volume via useMixerState.
by system
Create src/components/Visualizer.tsx that animates bars/pulses based on currentStep and active hits.
by system
Create src/components/PresetGallery.tsx listing presets and loading them into the current pattern.
by system
Create src/components/SavePatternDialog.tsx to name and save the current pattern to localStorage.
by system
Create src/components/LoadPatternMenu.tsx to browse saved patterns and load/delete them.
by system
Create src/components/ImportExportDialog.tsx for JSON export, JSON paste import, and validation errors.
by system
Create src/components/ShareCodeDialog.tsx to copy generated code and load from pasted code.
by system
Create src/pages/BeatMapPage.tsx assembling transport, grid, mixer, visualizer, presets, and dialogs.
by system
Add minimal client routing in src/main.tsx to render BeatMapPage (single-route SPA).
by system