Soundless Beatbox
A playful rhythm game where users build short beat patterns on a 16-step grid using visual “mouth-sound” icons (kick, snare, hi-hat) and then press play to watch an animated metronome and step highlight (no real audio required). Include tempo control, swing toggle, pattern length (8/16), and a library of saved patterns stored in localStorage with rename/duplicate/delete. Add a simple “challenge mode” that shows a target pattern to recreate within a time limit, making it easy to split into components like sequencer grid, transport controls, pattern manager, and challenge viewer.
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 base Tailwind directives in src/index.css.
by system
Generate Button, Card, Dialog, Input, Select, Switch, Slider, Tabs, Tooltip components via shadcn.
by system
Create src/App.tsx layout with header and two tabs/sections: Sequencer and Challenge.
by system
Add src/lib/icons.tsx exporting simple “mouth-sound” SVG/React icons for kick/snare/hihat.
by system
Create src/lib/types.ts defining Step, Instrument, Pattern, and default constants.
by system
Create src/lib/patternCodec.ts for normalize/clone/validate and localStorage-safe serialization.
by system
Create src/lib/patternStore.ts implementing CRUD (list/create/update/delete/duplicate/rename) in localStorage.
by system
Create src/hooks/usePatterns.ts to wrap patternStore with React state syncing.
by system
Create src/hooks/useSequencer.ts managing current pattern, play state, step index, tempo, swing, length.
by system
Create src/components/TransportControls.tsx with Play/Pause/Stop, BPM slider/input, swing toggle, length toggle.
by system
Create src/components/Metronome.tsx showing animated pendulum/beat pulse synced to current step.
by system
Create src/components/StepIndicator.tsx rendering 8/16 step markers and highlighting active step.
by system
Create src/components/SequencerCell.tsx for a single step/instrument toggle with icon and active styling.
by system
Create src/components/SequencerGrid.tsx rendering 3 rows (kick/snare/hihat) x 8/16 columns with click toggles.
by system
Create src/components/GridHeader.tsx showing step numbers and bar separators for readability.
by system
Implement step-advance timing in useSequencer.ts using setInterval/RAF with BPM and swing applied.
by system
Ensure playhead resets on Stop and clamps when switching pattern length (16→8 trims, 8→16 extends).
by system
Create src/components/PatternSelect.tsx to choose current pattern from saved library.
by system
Create src/components/PatternActions.tsx with Rename/Duplicate/Delete buttons and dialogs.
by system
Create src/components/NewPatternButton.tsx to create a blank pattern and set it active.
by system
Create src/components/PatternLibraryPanel.tsx combining selector and actions with a scrollable list.
by system
Store and restore the last active pattern id and transport settings (BPM/swing/length) in localStorage.
by system
Create src/lib/challenge.ts to generate target patterns by difficulty and compare to user pattern.
by system
Create src/hooks/useChallenge.ts to manage timer, target pattern, start/reset, and completion status.
by system
Create src/components/ChallengeViewer.tsx to display target grid read-only with icons and step grouping.
by system
Create src/components/ChallengeControls.tsx with Start, difficulty select, time limit display, and Reset.
by system
Create src/components/ChallengeResult.tsx to show success/fail states and remaining time.
by system
Wire Challenge tab to reuse SequencerGrid for user input and live-compare to target for completion.
by system
Adjust App layout and component spacing for mobile/desktop using Tailwind and shadcn Card sections.
by system