Echo Recipe Remix
A playful recipe organizer that lets users save simple recipes (ingredients + steps) and then “remix” them with constraint cards like “5-Ingredient Mode,” “Spicy Swap,” or “No-Oven Version” to generate a modified cooking plan and shopping list. The app includes a searchable recipe library, a remix workspace showing before/after diffs for each step, and a one-click consolidated grocery list that can be checked off and saved in localStorage.
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-icons class-variance-authority clsx tailwind-merge && npx shadcn@latest init -d
by system
Configure Tailwind content paths and add @tailwind directives plus CSS variables in src/index.css.
by system
Add src/lib/utils.ts with cn() helper for Tailwind class merging.
by system
Add shadcn components (button, input, textarea, card, badge, checkbox, tabs, separator, dialog, scroll-area) into src/components/ui.
by system
Create src/types.ts defining Recipe, Ingredient, Step, ConstraintCard, RemixResult, GroceryItem, and IDs.
by system
Create src/lib/storage.ts with typed load/save utilities and versioned keys.
by system
Create src/data/seed.ts exporting a small starter recipe set and default constraint cards.
by system
Create src/state/useRecipes.ts as a localStorage-backed hook for CRUD on recipes.
by system
Create src/state/useConstraints.ts as a localStorage-backed hook for enabling/disabling constraint cards.
by system
Create src/state/useGrocery.ts to manage current list, checked state, and persistence.
by system
Create src/components/AppShell.tsx with header, main container, and responsive layout.
by system
Create src/components/AppNav.tsx using shadcn Tabs to switch Library, Remix, and Grocery views.
by system
Create src/components/RecipeSearch.tsx with a controlled Input and debounced query state.
by system
Create src/components/RecipeList.tsx rendering searchable recipe cards and select callbacks.
by system
Create src/components/RecipeCardItem.tsx to display name, tags, and quick actions.
by system
Create src/components/RecipeEditorDialog.tsx for add/edit recipe metadata, ingredients, and steps.
by system
Create src/components/IngredientsEditor.tsx for editing ingredient lines (name, qty, unit) with add/remove.
by system
Create src/components/StepsEditor.tsx for editing ordered steps with add/remove/reorder.
by system
Create src/pages/LibraryPage.tsx wiring search, list, selection, and editor dialog together.
by system
Create src/components/ConstraintCards.tsx to toggle available remix constraints.
by system
Create src/lib/remix.ts implementing pure functions to apply constraints and produce RemixResult with step diffs and ingredient changes.
by system
Create src/components/StepDiff.tsx to render before/after for a single step with inline highlights.
by system
Create src/components/RemixWorkspace.tsx showing selected recipe, chosen constraints, and generated before/after steps.
by system
Create src/lib/grocery.ts to consolidate ingredients from a remix result into normalized GroceryItem entries.
by system
Create src/components/AddToGroceryButton.tsx to push current remix grocery items into the persisted grocery store.
by system
Create src/components/GroceryList.tsx rendering items with checkboxes, grouping, and counts.
by system
Create src/components/GroceryActions.tsx for clear checked, clear all, and save snapshot actions.
by system
Create src/pages/GroceryPage.tsx wiring grocery store state to list and actions.
by system
Create src/pages/RemixPage.tsx wiring recipe selection, constraints, workspace, and add-to-grocery flow.
by system
Update src/App.tsx to mount AppShell, AppNav, and the three pages with shared selection state.
by system