Soundless Beatbox
A playful rhythm trainer where users build short beat patterns on a 16-step grid using silent “mouth-sound” icons (kick, snare, hi-hat, clap) and watch a bouncing playhead animate timing without playing audio. It includes pattern saving/loading via localStorage, a tempo control, and a challenge mode that generates random target patterns for users to recreate by eye with instant correctness feedback. The UI is split into clear components: step sequencer grid, transport/tempo controls, pattern library, and challenge panel.
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
Implement a simple responsive shell in src/App.tsx with header and 2-column main.
by system
Create src/lib/types.ts with Instrument, StepIndex, Pattern, and ChallengeResult types.
by system
Add src/lib/instruments.ts exporting the four instruments with labels and simple icon metadata.
by system
Create src/lib/storage.ts with load/save/remove utilities and safe JSON parsing.
by system
Add src/lib/tempo.ts to convert BPM to step interval ms for a 16-step loop.
by system
Create src/lib/patternMath.ts with functions to compare patterns and count matching steps.
by system
Implement src/hooks/useSequencer.ts to manage grid state, active step, and play/pause.
by system
Implement src/hooks/useTempo.ts to manage BPM with clamping and change handlers.
by system
Implement src/hooks/usePatternLibrary.ts to persist named patterns in localStorage.
by system
Implement src/hooks/useChallenge.ts to generate targets and compute correctness feedback.
by system
Create src/components/StepCell.tsx for a single toggleable step with active/playhead styling.
by system
Create src/components/InstrumentRow.tsx rendering 16 StepCell items for one instrument.
by system
Create src/components/SequencerGrid.tsx rendering all instrument rows and wiring toggle events.
by system
Add CSS/logic in src/components/Playhead.tsx to visually indicate the current step without audio.
by system
Create src/components/TransportControls.tsx with Play/Pause, Stop, and Clear actions.
by system
Create src/components/TempoControl.tsx with shadcn Slider/Input to edit BPM.
by system
Create src/components/SavePatternDialog.tsx to prompt for a name and trigger save.
by system
Create src/components/PatternLibrary.tsx listing saved patterns with load/overwrite/delete.
by system
Create src/components/PatternPreview.tsx to render a compact read-only pattern thumbnail.
by system
Create src/components/ChallengePanel.tsx with target preview, New Challenge, and status.
by system
Create src/components/CorrectnessBadge.tsx showing match %, exact match, and mismatch state.
by system
Create src/components/TargetPatternView.tsx to display the challenge target pattern read-only.
by system
Create src/components/ComparisonView.tsx to highlight per-step matches vs mismatches.
by system
Connect hooks and components in src/App.tsx to form the full sequencer/controls/library layout.
by system
Install and use minimal shadcn/ui components (button, card, dialog, input, slider) where needed.
by system
Add src/hooks/useHotkeys.ts to support Space play/pause and C clear without conflicting inputs.
by system
Add small UI states for no saved patterns, invalid stored data, and challenge not started.
by system
Refine Tailwind styling across components for spacing, alignment, and consistent visual hierarchy.
by system