Raccoon Pantry
A playful “use-what-you-have” recipe remixer: users add pantry ingredients (plus dietary tags), and the app generates quick recipe prompts by combining ingredients into themed templates (tacos, stir-fry, soup, snack board) with adjustable constraints like time, difficulty, and “weirdness.” It includes a weekly leftover plan view, a favorites board, and a shopping “missing items” list that’s computed from chosen prompts—all saved in localStorage with clean component boundaries (Pantry Manager, Prompt Generator, Plan Board, Favorites, 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
by system
Configure src/index.css with Tailwind directives and set a basic app background/text style.
by system
Create src/lib/utils.ts with cn() helper (clsx + tailwind-merge).
by system
Create src/types.ts for Ingredient, DietaryTag, Prompt, PlanDay, Favorites, and AppState types.
by system
Create src/hooks/useLocalStorageState.ts for typed state persisted to localStorage.
by system
Create src/state/useAppState.ts to hold pantry, settings, favorites, plan, and derived shopping list.
by system
Add src/state/seed.ts with a small default pantry + settings for first load.
by system
Create src/logic/templates.ts with themed prompt templates (tacos, stir-fry, soup, snack board).
by system
Create src/logic/generatePrompt.ts to combine ingredients + settings into a Prompt.
by system
Create src/logic/constraints.ts to map time/difficulty/weirdness into prompt text variations.
by system
Create src/logic/computeMissingItems.ts to produce a shopping list from selected prompts vs pantry.
by system
Create src/logic/plan.ts for adding/removing prompts to days and clearing the week.
by system
Create src/logic/favorites.ts for toggling and ordering favorite prompts.
by system
Create src/components/AppShell.tsx with header, main container, and responsive layout.
by system
Create src/components/NavTabs.tsx for switching between Pantry, Generator, Plan, Favorites, Settings.
by system
Create src/pages/PantryPage.tsx that composes pantry input + pantry list components.
by system
Create src/components/pantry/IngredientForm.tsx to add ingredient name, quantity note, and tags.
by system
Create src/components/pantry/PantryList.tsx to render ingredients with edit/delete actions.
by system
Create src/components/pantry/TagPicker.tsx for selecting dietary tags (vegan, gluten-free, etc.).
by system
Create src/components/pantry/EditIngredientDialog.tsx using shadcn Dialog to update an item.
by system
Create src/pages/GeneratorPage.tsx that composes controls + generated prompt card list.
by system
Create src/components/generator/GeneratorControls.tsx for theme, time, difficulty, weirdness inputs.
by system
Create src/components/generator/PromptCard.tsx to display prompt text with favorite/plan actions.
by system
Wire GeneratorControls to call generatePrompt() and append results in GeneratorPage.
by system
Create src/pages/PlanPage.tsx that renders a 7-day board and selected prompts per day.
by system
Create src/components/plan/PlanDayColumn.tsx to show a day header and its prompt list.
by system
Add in-card controls to move/remove prompts within the weekly plan.
by system
Create src/pages/FavoritesPage.tsx to display favorited prompts in a grid/list.
by system
Create src/pages/ShoppingPage.tsx to show computed missing items with checkboxes and clear.
by system
Create src/pages/SettingsPage.tsx for default constraints, tags behavior, and reset localStorage.
by system