dbdbcf43fa
Backend: - Add Tag type definitions (Tag, CreateTagInput, UpdateTagInput) - Implement TagRepository with CRUD and recipe assignment methods - Implement TagService with business logic and validation - Create tag API routes (GET, POST, PUT, DELETE /api/tags) - Add recipe-tag assignment endpoints (POST/DELETE /api/tags/recipes/:id/tags) - Write 18 integration tests for tag functionality (all passing) - Mount tag routes in main Express app Frontend: - Extend API client with tag CRUD and assignment methods - Create useTags hook for tag state management - Create TagSelector component for tag selection with inline tag creation - Update RecipeForm to accept initialTags and pass selected tags to onSubmit - Update RecipeDetailPage to fetch, display, and manage recipe tags - Update RecipeCard to display tags with custom colors - Add tag filter UI to RecipeListPage (note: backend filtering pending) - Display tags in recipe detail view with color styling Testing: - All 34 backend tests passing (16 recipe + 18 tag tests) - Frontend builds successfully with TypeScript strict mode - Tag assignment and removal working end-to-end Note: Tag filtering in recipe list shows UI but doesn't filter results yet. Backend support for tag-based filtering can be added in future iteration. |
||
|---|---|---|
| .. | ||
| public | ||
| src | ||
| .gitignore | ||
| README.md | ||
| eslint.config.js | ||
| index.html | ||
| package-lock.json | ||
| package.json | ||
| postcss.config.js | ||
| tailwind.config.js | ||
| tsconfig.app.json | ||
| tsconfig.json | ||
| tsconfig.node.json | ||
| vite.config.ts | ||
README.md
Recipe Manager - Frontend
React + TypeScript frontend for the Recipe Manager application.
Tech Stack
- React 19 - UI framework
- TypeScript - Type safety
- Vite - Build tool and dev server
- React Router 7 - Client-side routing
Development
# Install dependencies
npm install
# Start dev server (http://localhost:5173)
npm run dev
# Build for production
npm run build
# Preview production build
npm run preview
# Lint code
npm run lint
Project Structure
src/
├── components/ # Reusable UI components
├── hooks/ # Custom React hooks
├── pages/ # Route pages
├── services/ # API client and business logic
├── types/ # TypeScript interfaces
├── App.tsx # Root component
└── main.tsx # Application entry point
Next Steps
- Configure Tailwind CSS
- Set up React Router
- Create recipe list page
- Create recipe detail/edit page
- Implement cook mode UI
Architecture
See /ARCHITECTURE.md for full system architecture and patterns.