Beat Grid Chef
A playful rhythm-based cooking planner where you build “recipes” as 8–16 step beat patterns (kick/snare/hat-style lanes mapped to ingredients or actions like chop, stir, bake). Tap to play the loop with simple synthesized sounds, name and save patterns in localStorage, and generate a randomized “mystery dish” prompt that you can refine into a playable grid. The app includes a pattern editor, playback controls (tempo, swing, mute/solo), a recipe library with search/tags, and an export view that turns the grid into a shareable text/image card.
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 src/index.css with Tailwind directives and a minimal app background/text base style.
by system
Add src/lib/utils.ts with cn() helper (clsx + tailwind-merge).
by system
Implement src/App.tsx with a header, main container, and placeholder sections for editor/library/export.
by system
Create src/components/TopNav.tsx with tabs/buttons to switch between Editor, Library, and Export views.
by system
Add src/hooks/useView.ts to manage current view with a simple enum and setter.
by system
Create src/types/beatgrid.ts with Pattern, Lane, Step, Tag, and PlaybackSettings TypeScript types.
by system
Add src/data/defaultLanes.ts exporting 3–5 lanes mapping drum roles to cooking actions/ingredients.
by system
Add src/lib/patternFactory.ts to generate a new 8/16-step pattern with default lanes and metadata.
by system
Add src/lib/storage.ts with typed load/save helpers and versioned key names.
by system
Add src/state/patternStore.ts with in-memory state + localStorage persistence for saved patterns.
by system
Create src/pages/EditorPage.tsx composing PatternEditor, PlaybackControls, and PatternMetaForm.
by system
Create src/pages/LibraryPage.tsx composing LibrarySearchBar and PatternList.
by system
Create src/pages/ExportPage.tsx composing ExportCardPreview and ExportActions.
by system
Create src/components/PatternMetaForm.tsx to edit pattern name and tags using shadcn Input/Badge.
by system
Create src/components/TagsInput.tsx for add/remove tag chips with keyboard support.
by system
Create src/components/PatternEditor.tsx rendering lanes x steps grid with clickable toggles.
by system
Create src/components/StepCell.tsx as a single step button with active/current-step styling.
by system
Create src/components/LaneRow.tsx to render lane label plus its StepCell row.
by system
Add src/components/StepsLengthToggle.tsx to switch between 8 and 16 steps for the current pattern.
by system
Add src/audio/audioEngine.ts implementing WebAudio click/synth voices per lane and a tick scheduler.
by system
Add src/hooks/useTransport.ts managing play/stop, current step, and scheduling against audioEngine.
by system
Create src/components/PlaybackControls.tsx with Play/Stop, BPM slider, Swing slider, and step indicator.
by system
Create src/components/MuteSoloPanel.tsx to toggle per-lane mute/solo states.
by system
Wire mute/solo state into audio playback so muted lanes skip and solo restricts to selected lanes.
by system
Create src/components/LibrarySearchBar.tsx with text search and tag filter chips.
by system
Create src/components/PatternList.tsx showing saved patterns with load, duplicate, and delete actions.
by system
Add src/lib/mysteryDish.ts to generate a random prompt + starter pattern template from curated word lists.
by system
Create src/components/MysteryDishModal.tsx to display the prompt and apply the generated pattern into the editor.
by system
Create src/components/ExportCardPreview.tsx rendering a printable/shareable card view of name, tags, and grid.
by system
Create src/components/ExportActions.tsx to copy a text representation to clipboard and download the card as PNG via canvas.
by system