Echo Recipe Remix
A playful recipe organizer that lets users paste or type a recipe, then “remix” it into variations using client-side rules (e.g., vegetarian swap, pantry-limited mode, spicy boost, low-sugar tweak) and a configurable ingredient substitution library. Users can save original recipes and remixes to localStorage, compare versions side-by-side (ingredients + steps), and generate a tidy shopping list from any chosen version. The UI is split into clear components: Recipe Editor/Parser, Remix Controls, Substitution Manager, Version Compare, and Shopping List.
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 -d
by system
Configure src/index.css with Tailwind directives and set CSS variables required by shadcn/ui.
by system
Implement src/App.tsx with a header and a responsive 2-column main layout shell.
by system
Add shadcn/ui components (button, input, textarea, card, tabs, dialog, table, separator, badge) used across the app.
by system
Create src/lib/types.ts defining Recipe, RecipeVersion, IngredientLine, Step, SubstitutionRule, and RemixPreset types.
by system
Create src/lib/storage.ts with typed load/save helpers and versioned storage keys.
by system
Create src/lib/defaultSubstitutions.ts exporting an initial substitution library for common swaps.
by system
Create src/lib/parser.ts that converts pasted recipe text into title, ingredient lines, and step list using simple heuristics.
by system
Create src/lib/normalize.ts to normalize ingredient strings (case/trim) and extract a best-effort ingredient name token.
by system
Create src/lib/remixEngine.ts applying preset rules to ingredients/steps using the substitution library.
by system
Create src/lib/presets.ts defining built-in presets (vegetarian, pantry-limited, spicy boost, low-sugar) with parameters.
by system
Create src/lib/shoppingList.ts that aggregates ingredient lines into a de-duplicated checklist by normalized name.
by system
Create src/components/RecipeEditor.tsx with title input, raw text textarea, and a parse button.
by system
Create src/components/RecipePreview.tsx to render parsed ingredients and steps in a readable card.
by system
Create src/components/RemixControls.tsx with preset selection and toggles/sliders for preset parameters.
by system
Wire RemixControls to call remixEngine and emit a new RecipeVersion object without mutating originals.
by system
Create src/components/VersionList.tsx showing saved recipes and their versions with selection controls.
by system
Implement save/load flows in src/lib/storage.ts usage so versions persist to localStorage.
by system
Add rename/delete actions for a selected version in VersionList with confirmation dialog.
by system
Create src/components/SubstitutionManager.tsx listing substitution rules with add/edit/remove controls.
by system
Create src/components/SubstitutionEditorDialog.tsx for creating/updating a SubstitutionRule with validation.
by system
Load/save the substitution library to localStorage and fall back to defaults on first run.
by system
Create src/components/VersionCompare.tsx to display two selected versions side-by-side (ingredients + steps).
by system
Add selectors in VersionCompare to choose left/right versions and handle same-version edge cases.
by system
Implement simple added/removed/changed highlighting for ingredient lines between compared versions.
by system
Create src/components/ShoppingList.tsx that renders an aggregated checklist for the chosen version.
by system
Add a version selector in ShoppingList to choose which version generates the list.
by system
Persist checked shopping items per version in localStorage so users can resume later.
by system
Create src/components/ImportExportDialog.tsx to export/import all app data as JSON text.
by system
Create src/lib/state.ts (or a small context) to coordinate selected recipe/version, substitutions, and UI panels in App.
by system