Echo Recipe Remix
A playful recipe organizer that "remixes" any saved recipe into themed variations (e.g., budget, high-protein, vegan swap, 15-minute mode) using deterministic rule-based transformations—no backend, everything stored in localStorage. Users can add recipes with ingredients/steps/tags, run a Remix Wizard that suggests substitutions and step tweaks with a side-by-side diff view, then save the remix as a new version. The app includes a pantry checklist, a cook mode with timers and step-by-step focus, and a small "Remix Challenges" tab that generates constraints to inspire creative cooking.
Run: npm create vite@latest . -- --template react-ts && npm i && npm i -D tailwindcss postcss autoprefixer && npx tailwindcss init -p && npm i @tailwindcss/vite && npm i lucide-react && npx shadcn@latest init.
by system
Configure Tailwind content paths and add base Tailwind directives in src/index.css.
by system
Install core shadcn/ui components used by the app (button, input, textarea, card, tabs, dialog, sheet, badge, checkbox, select, separator).
by system
Create src/components/AppShell.tsx with header, main container, and nav tabs.
by system
Create src/lib/types.ts with Recipe, RecipeVersion, IngredientLine, PantryItem, and RemixTheme types.
by system
Create src/lib/storage.ts for typed load/save helpers and schema versioning keys.
by system
Create src/hooks/useRecipes.ts to manage recipes CRUD and persist to localStorage.
by system
Create src/hooks/usePantry.ts to manage pantry checklist state and persist to localStorage.
by system
Add src/lib/seed.ts to provide a default recipe and pantry items when storage is empty.
by system
Add react-router and implement src/App.tsx routes for Recipes, Pantry, Remix, Cook Mode, and Challenges.
by system
Create src/pages/RecipesPage.tsx showing searchable recipe cards with tag badges.
by system
Create src/components/RecipeCard.tsx to display title, tags, last updated, and quick actions.
by system
Create src/pages/RecipeEditorPage.tsx with form fields for title, ingredients, steps, and tags.
by system
Create src/components/IngredientListEditor.tsx to add/remove/reorder ingredient lines.
by system
Create src/components/StepsEditor.tsx to add/remove/reorder steps with optional timer minutes.
by system
Create src/components/TagsInput.tsx for adding/removing tag chips with keyboard support.
by system
Create src/components/RecipeDetailSheet.tsx to preview a recipe and launch Remix or Cook Mode.
by system
Create src/lib/versioning.ts to create new versions and track parentVersionId lineage.
by system
Create src/lib/remixRules.ts implementing deterministic ingredient substitutions and step tweaks per theme.
by system
Create src/lib/remixThemes.ts defining Budget, High-Protein, Vegan Swap, and 15-Minute modes with parameters.
by system
Create src/pages/RemixWizardPage.tsx to select recipe, choose theme, preview changes, and save remix version.
by system
Create src/components/RemixSuggestions.tsx to list suggested substitutions/tweaks with accept/reject toggles.
by system
Create src/components/RecipeDiffView.tsx showing original vs remixed ingredients/steps with highlighted changes.
by system
Create src/lib/determinism.ts to derive repeatable random choices from recipeId+theme+salt.
by system
Create src/pages/PantryPage.tsx with add item, check/uncheck, and filter by checked state.
by system
Add src/lib/pantryHelpers.ts to extract ingredient names from a recipe and add missing pantry items.
by system
Create src/pages/CookModePage.tsx for step-by-step focus, ingredient quick view, and fullscreen-friendly layout.
by system
Create src/hooks/useTimer.ts to start/pause/reset a countdown with onComplete callback.
by system
Create src/components/StepTimer.tsx to attach a countdown timer UI to the active step.
by system
Create src/pages/ChallengesPage.tsx that generates random constraint prompts (deterministic per day) and lets users copy them.
by system