Whisper Recipe Box
A cozy, audio-free “listening” recipe organizer where you add recipes and tag them with mood, time, and difficulty, then the app generates a short cooking “whisper plan” (step-by-step checklist) tailored to your available time. Browse with fast filters, a playful shuffle button, and a cooking mode that shows one step at a time with big controls and timers for steps you mark as timed. Everything is client-side with localStorage, built as a React + Vite SPA using Tailwind and shadcn/ui cards, tabs, dialogs, and toasts.
Create src/components/step-timer.tsx with start/pause/reset countdown for timed steps.
by system
Run: npm create vite@latest . -- --template react-ts && npm i && npm i -D tailwindcss postcss autoprefixer && npx tailwindcss init -p && npm i @radix-ui/react-dialog @radix-ui/react-tabs @radix-ui/react-toast class-variance-authority clsx tailwind-merge lucide-react && npx shadcn@latest init -d
by system
Configure Tailwind content + add @tailwind directives and CSS variables in src/index.css.
by system
Add src/lib/utils.ts with cn() helper for Tailwind class merging.
by system
Generate shadcn/ui components into src/components/ui for button, card, input, textarea, badge, tabs, dialog, toast.
by system
Create src/types/recipe.ts with Recipe, Step, Tag enums/unions, and TimerStep shape.
by system
Create src/lib/storage.ts to load/save recipes and app preferences via localStorage with versioning.
by system
Create src/lib/seed.ts exporting a small set of starter recipes for first run.
by system
Create src/state/recipes-store.tsx with React context + reducer for CRUD and persistence.
by system
Add src/components/toaster.tsx and mount it in src/main.tsx.
by system
Create src/components/app-shell.tsx with header, main container, and responsive padding.
by system
Create src/components/top-tabs.tsx using shadcn Tabs for Library, Add, Cook.
by system
Create src/pages/library.tsx with basic layout placeholders and wiring to recipe store.
by system
Create src/components/recipe-card.tsx showing title, tags (mood/time/difficulty), and quick actions.
by system
Create src/components/recipe-dialog.tsx (shadcn Dialog) to view full ingredients and steps.
by system
Add a delete button flow (with confirm) inside recipe dialog using store + toast.
by system
Create src/pages/add-recipe.tsx with a form container and submit wiring.
by system
Create src/components/recipe-form.tsx with title, notes, ingredients textarea, and steps editor.
by system
Create src/components/steps-editor.tsx to add/remove/reorder steps and toggle timed step + seconds.
by system
Create src/components/tag-pickers.tsx for mood/time/difficulty selection (badges or segmented buttons).
by system
Add lightweight client-side validation in recipe-form.tsx and show errors inline.
by system
Implement add flow to store from Add page and show success toast + reset form.
by system
Create src/components/filter-bar.tsx with search input and tag filters for mood/time/difficulty.
by system
Create src/lib/filtering.ts to filter/sort recipes by query and selected tags.
by system
Create src/components/shuffle-button.tsx to pick a random visible recipe and open its dialog.
by system
Create src/lib/whisper-plan.ts to generate a short step checklist tailored to available time.
by system
Create src/components/plan-settings.tsx to choose available minutes and regeneration options.
by system
Create src/pages/cook.tsx with selected recipe/plan state and cooking-mode layout.
by system
Create src/components/cook-step-viewer.tsx to show one step at a time with big next/prev/complete controls.
by system
Add src/lib/progress.ts to save/restore current cook session state (selected recipe, step index, completed steps).
by system