Echo Recipe Radio
A playful recipe organizer presented like a retro radio: users add recipes as “tracks” with ingredients, steps, tags, and a prep/cook timer, then queue them into a cooking “playlist” that advances step-by-step. The app includes a built-in ingredient scaler, a smart checklist that highlights the current step, and a minimalist “Now Cooking” view for hands-free mode (big buttons + optional sound cues). Everything is client-side with localStorage, and the UI splits cleanly into components like Library, Recipe Editor, Playlist Queue, Now Cooking, and Settings.
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 && npx shadcn@latest add button card dialog dropdown-menu input label textarea tabs badge separator sheet slider switch toast
by system
Configure src/index.css with Tailwind directives and a minimal retro-friendly CSS baseline.
by system
Create src/types.ts with Recipe, Ingredient, Step, PlaylistItem, and Settings TypeScript types.
by system
Create src/lib/storage.ts with typed load/save helpers and versioned keys.
by system
Create src/state/useRecipes.ts for CRUD recipes synced to localStorage.
by system
Create src/state/usePlaylist.ts for queue operations and persistence to localStorage.
by system
Create src/state/useSettings.ts for sound/handfree/timer prefs persisted to localStorage.
by system
Implement src/App.tsx with a two-pane radio layout and top-level state wiring.
by system
Create src/components/RadioHeader.tsx for branding, nav tabs, and subtle retro styling.
by system
Create src/pages/LibraryPage.tsx showing recipe list area and detail/editor area.
by system
Create src/components/RecipeList.tsx to render searchable recipe “tracks” with selection.
by system
Add search + tag filter UI to src/components/RecipeList.tsx.
by system
Create src/components/RecipePreviewCard.tsx to display ingredients summary and tags.
by system
Create src/components/RecipeEditor.tsx with controlled form layout and save/cancel.
by system
Implement title, notes, tags, and servings inputs inside src/components/RecipeEditor.tsx.
by system
Create src/components/IngredientsEditor.tsx for adding/removing/editing ingredient rows.
by system
Create src/components/StepsEditor.tsx for adding/removing/reordering step text items.
by system
Create src/components/TimersEditor.tsx for prep/cook timer minutes and optional step timers.
by system
Create src/lib/scale.ts to scale ingredient quantities from base servings to target servings.
by system
Create src/components/IngredientScaler.tsx to set target servings and show scaled amounts.
by system
Create src/pages/PlaylistPage.tsx to show current queue and controls to start cooking.
by system
Create src/components/AddToQueueButton.tsx to enqueue selected recipe from the library.
by system
Create src/components/QueueList.tsx to reorder, remove, and clear queued playlist items.
by system
Create src/pages/NowCookingPage.tsx as a minimalist hands-free view with big controls.
by system
Create src/state/useNowCooking.ts to manage current recipe, current step index, and progression.
by system
Create src/components/StepChecklist.tsx that highlights the active step and supports checking off.
by system
Create src/components/CookTimer.tsx for start/pause/reset with countdown display.
by system
Create src/lib/sound.ts using Web Audio API beeps for step advance and timer done (optional).
by system
Create src/pages/SettingsPage.tsx for toggles like sound cues, keep screen awake hint, and defaults.
by system
Implement a simple client-side view switch in src/App.tsx between Library, Playlist, Now Cooking, and Settings.
by system