Glyph Kitchen
A playful recipe organizer where each recipe is visualized as a customizable “glyph card” (simple icons + color tags for cuisine, difficulty, time, and dietary notes). Users can add/edit recipes, generate a randomized weekly menu with a constraint picker (e.g., under 30 minutes, vegetarian, no repeats), and export/share the menu as a printable card layout. Everything runs client-side with localStorage, with clear components for Recipe Form, Recipe Library grid, Filter/Tag panel, Weekly Menu generator, and Print/Export view.
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 Tailwind content paths and add Tailwind directives to src/index.css.
by system
Add shadcn/ui utils file src/lib/utils.ts and verify path aliases in tsconfig/vite config.
by system
Build src/App.tsx shell with header, main container, and simple nav tabs.
by system
Add React Router and define routes for Library, Add/Edit, Weekly Menu, and Print views in src/main.tsx.
by system
Create src/types.ts with Recipe, Tags, Dietary flags, and Menu types.
by system
Create src/lib/storage.ts with load/save utilities and schema version key.
by system
Create src/hooks/useRecipes.ts managing CRUD and persistence via localStorage.
by system
Add src/lib/seed.ts and load seed data on first run in the recipes hook.
by system
Create src/lib/tags.ts with cuisine/difficulty/time buckets and dietary tag definitions.
by system
Create src/lib/glyphs.ts mapping cuisines/dietary tags to lucide-react icons.
by system
Implement src/components/GlyphCard.tsx to render a recipe as an icon + color-tag card.
by system
Implement src/components/TagBadge.tsx for consistent colored tag chips.
by system
Implement src/components/RecipeGrid.tsx showing a responsive grid of GlyphCards.
by system
Implement src/pages/LibraryPage.tsx to list recipes with search and basic actions.
by system
Add inline edit/delete controls for each card in src/components/RecipeCardActions.tsx.
by system
Implement src/components/DeleteRecipeDialog.tsx using shadcn Dialog and hook delete handler.
by system
Create src/lib/recipeSchema.ts with validation rules for required fields and tag constraints.
by system
Implement src/components/RecipeForm.tsx with inputs for title, notes, cuisine, difficulty, time, and dietary.
by system
Implement src/pages/AddRecipePage.tsx wiring RecipeForm submit to create recipe and navigate back.
by system
Implement src/pages/EditRecipePage.tsx to load by id, populate form, and update on submit.
by system
Create src/hooks/useRecipeFilters.ts to manage search text and selected tag filters.
by system
Implement src/components/FilterPanel.tsx with multi-select tag toggles and clear button.
by system
Wire LibraryPage to filter recipes using useRecipeFilters and pass results to RecipeGrid.
by system
Create src/typesMenu.ts defining MenuConstraint settings like max time, dietary, and no-repeats.
by system
Implement src/lib/generateWeeklyMenu.ts to select 7 recipes given constraints with deterministic shuffle option.
by system
Implement src/components/ConstraintsPicker.tsx for max time, dietary toggles, and no-repeats controls.
by system
Implement src/pages/WeeklyMenuPage.tsx to pick constraints, generate menu, and show day-by-day cards.
by system
Implement src/pages/PrintPage.tsx rendering the weekly menu as print-friendly card grid with @media print styles.
by system
Add src/components/ExportActions.tsx with Print button (window.print) and Copy-to-clipboard summary text.
by system