Whispering Cookbook
A playful recipe organizer where each recipe is a “card” with ingredients, steps, time, and tags, plus a built-in randomizer that generates a whimsical cooking prompt (e.g., “make something crunchy + citrus + 15 minutes”) to inspire what to cook. Users can add/edit recipes, drag-and-drop to reorder a weekly “menu board,” and filter/search by tags, time, or dietary notes; everything persists in localStorage. Includes a simple “pantry mode” where you tick ingredients you have and the app highlights recipes with the best match score, with clean shadcn/ui dialogs, tabs, and cards styled via Tailwind.
Add react-router routes for Recipes, Menu Board, Pantry, and Randomizer pages.
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-dropdown-menu class-variance-authority clsx tailwind-merge lucide-react && npx shadcn@latest init -d
by system
Configure tailwind.config.ts and src/index.css with Tailwind directives and content paths.
by system
Create src/App.tsx with a simple header + main layout container.
by system
Create a top nav component with links to each route using shadcn/ui styling.
by system
Define Recipe and related TypeScript types in src/types/recipe.ts.
by system
Implement typed load/save utilities for localStorage in src/lib/storage.ts.
by system
Create src/state/useRecipes.ts to manage recipes state with localStorage persistence.
by system
Create src/state/useMenuBoard.ts to persist weekly ordered recipe IDs in localStorage.
by system
Create src/state/usePantry.ts to store checked pantry ingredients in localStorage.
by system
Add optional first-run seed data logic in useRecipes to populate a few sample recipes.
by system
Build src/components/RecipeCard.tsx to display recipe summary (title, time, tags, notes).
by system
Create src/components/RecipeDetailsDialog.tsx using shadcn/ui Dialog to show full ingredients and steps.
by system
Implement src/components/RecipeForm.tsx for add/edit fields (title, time, tags, dietary, ingredients, steps).
by system
Create src/components/AddRecipeDialog.tsx that opens RecipeForm and calls store add.
by system
Create src/components/EditRecipeDialog.tsx that loads a recipe into RecipeForm and saves changes.
by system
Add a confirmation dialog component for deleting a recipe and removing it from stores.
by system
Create src/pages/RecipesPage.tsx with toolbar, filters area, and recipe list grid.
by system
Add a search input component that filters recipes by title/ingredients/tags.
by system
Implement a multi-select tag filter UI component for narrowing the recipe list.
by system
Create a time filter UI (e.g., max minutes select/slider) applied to recipe list.
by system
Add a dietary filter control (e.g., vegetarian/vegan/gluten-free text tags) for recipe list.
by system
Create src/lib/recipeFilters.ts with pure functions for search and filter predicates.
by system
Create src/pages/MenuBoardPage.tsx showing the weekly list with reorderable items.
by system
Implement a minimal pointer-based drag-and-drop reorder component without external services.
by system
Create a compact card component for recipes on the menu board with remove action.
by system
Add an action on RecipeCard to append/remove recipe IDs to the menu board store.
by system
Create src/pages/RandomizerPage.tsx with controls and a generated whimsical cooking prompt.
by system
Implement src/lib/promptGenerator.ts to generate random constraints (texture, flavor, time, tag).
by system
Create src/pages/PantryPage.tsx with ingredient checklist, match scores, and highlighted best recipes.
by system