# TODO — Recipe Manager

**Last Updated:** 2026-03-24  
**Current Milestone:** MVP (v0.1)

---

## 🎯 Active Tasks

### Backend Setup
- [x] Initialize Node.js backend: Create src/backend/, package.json with express, better-sqlite3, zod, vitest. Create src/backend/index.ts with "Hello World" server on port 3000. Verify: npm install && npm run dev (server starts). Commit as "feat(backend): initialize Node.js project with Express"
- [x] Set up TypeScript: Create tsconfig.json (strict mode, ES2022, Node16 module resolution). Add build script to package.json. Verify: npm run build succeeds. Commit.
- [x] Create SQLite schema: Create src/backend/db/schema.sql with recipes, tags, recipe_tags tables per ARCHITECTURE.md. Create src/backend/db/migrate.ts to apply schema using sql.js (see ADR-001). Verify: npm run migrate creates data/recipes.db. Commit.
- [x] Implement recipe CRUD API endpoints
- [x] Add Zod validation schemas
- [x] Write API integration tests

### Frontend Setup
- [x] Initialize React + Vite project
- [x] Configure Tailwind CSS
- [x] Set up React Router
- [x] Create recipe list page
- [x] Create recipe detail/edit page
- [x] Implement cook mode UI

### Features
- [x] Tag management (create, assign, filter)
- [x] Text search (title + ingredients)
- [x] Basic error handling + loading states

### DevOps
- [x] Create Dockerfile for backend
- [x] Create Dockerfile for frontend (nginx)
- [x] Write docker-compose.yml
- [ ] Test local deployment

### Documentation
- [ ] Write API documentation (docs/api.md)
- [ ] Create user guide (docs/user-guide.md)
- [ ] Add setup instructions to README
- [ ] Document first architecture decisions (ADRs)

---

## ✅ Completed Tasks

### 2026-03-24
- **Docker Compose orchestration** (Iteration 16)
  - Created docker-compose.yml with backend and frontend services
  - Backend service: Node.js API on port 3000 with named volume for SQLite persistence (recipe-data:/app/data)
  - Frontend service: nginx on port 8080, depends on backend health check
  - Configured nginx to proxy /api/* requests to backend service (http://backend:3000)
  - Updated frontend API client (services/api.ts) to use relative URLs (/api instead of http://localhost:3000/api)
  - Added Vite dev server proxy configuration for local development (proxies /api to localhost:3000)
  - Implemented health checks for both services (backend: GET /api/recipes, frontend: GET /health)
  - Configured restart policies (unless-stopped) and service dependencies
  - Created internal Docker network (recipe-network) for service communication
  - Added comprehensive documentation in docs/docker-compose.md (architecture, usage, troubleshooting, testing)
  - Supports both local development (npm run dev with Vite proxy) and production deployment (Docker Compose)
  - Verified: YAML syntax valid, all 5 files committed
  - Next: Test local deployment (docker compose up -d && docker compose ps)

- **Frontend Dockerfile implementation** (Iteration 15)
  - Created multi-stage Dockerfile for frontend build and deployment
  - Builder stage: Node.js 22 Alpine with npm ci, TypeScript compilation, Vite production build
  - Production stage: nginx Alpine serving static assets from /usr/share/nginx/html
  - Added nginx.conf with SPA routing (try_files fallback to index.html for React Router)
  - Configured gzip compression for text files (HTML, CSS, JS, JSON)
  - Added security headers (X-Frame-Options, X-Content-Type-Options, X-XSS-Protection)
  - Implemented aggressive caching for static assets (1 year expiry with immutable flag)
  - Created health check endpoint at /health for container orchestration
  - Created frontend/.dockerignore to optimize build context (exclude node_modules, dist, tests, etc.)
  - Added comprehensive documentation in docs/docker-frontend.md (build strategy, nginx config, optimization, deployment)
  - Verified: npm run build succeeds (Docker build pending Docker availability in environment)
  - Expected image size: ~50MB (nginx:alpine ~25MB + static assets ~25MB)

- **Backend Dockerfile implementation** (Iteration 14)
  - Created multi-stage Dockerfile using Node.js 22 Alpine for optimized image size
  - Builder stage: npm ci, TypeScript compilation
  - Production stage: production dependencies only, built JavaScript
  - Included database schema file (schema.sql) required by migration script
  - Created .dockerignore to exclude unnecessary files (node_modules, tests, frontend, docs)
  - Added startup command that runs migrations then starts Express server
  - Created documentation in docs/docker-backend.md with build/run instructions
  - Verified: npm build succeeds, all 34 tests pass

- **Error handling and toast notifications** (Iteration 13)
  - Created Toast component with slide-in animation for success/error/info/warning messages
  - Created useToast hook for managing toast notifications globally
  - Added ToastContext to App.tsx for sharing toast functionality across components
  - Implemented ErrorBoundary component to catch and display React errors gracefully
  - Updated RecipeDetailPage to show toast notifications for all operations (create, update, delete, tag management)
  - Updated TagSelector to use toast notifications instead of alert()
  - Added proper error handling for all API operations with user-friendly messages
  - Added loading states for delete operation
  - Added CSS animation for toast slide-in effect
  - Verified: All 34 backend tests passing (16 recipe + 18 tag tests)
  - Verified: Frontend builds successfully with TypeScript compilation

- **Text search verification** (Iteration 12)
  - Verified backend RecipeRepository searches across title, description, and ingredients using SQL LIKE
  - Confirmed Zod validation schema accepts search parameter in GET /api/recipes
  - Verified integration test coverage (search test passes in recipes.test.ts)
  - Confirmed frontend useRecipes hook passes search query to API
  - Verified UI implementation: RecipeListPage has search input with clear button
  - All 34 tests passing (16 recipe + 18 tag tests)
  - Feature was already implemented in previous iterations, now confirmed working

- **Tag management implementation**
  - Backend: Created Tag types, TagRepository, TagService
  - Backend: Implemented tag CRUD API endpoints (GET, POST, PUT, DELETE /api/tags)
  - Backend: Implemented tag assignment endpoints (POST/DELETE /api/tags/recipes/:id/tags)
  - Backend: Added 18 integration tests for tag functionality (all passing)
  - Frontend: Updated API client with tag methods
  - Frontend: Created useTags hook for tag state management
  - Frontend: Created TagSelector component for tag selection in forms
  - Frontend: Updated RecipeForm to support tag assignment
  - Frontend: Updated RecipeDetailPage to display and manage recipe tags
  - Frontend: Updated RecipeCard to display tags
  - Frontend: Added tag filter UI to RecipeListPage (note: full filtering pending backend support)
  - Verified: All 34 backend tests passing (16 recipe tests + 18 tag tests)
  - Verified: Frontend builds successfully with TypeScript compilation

- **Cook mode UI implementation**
  - Implemented full cooking interface with ingredient and step checklists
  - Added progress tracking with visual progress bars
  - Integrated Screen Wake Lock API to prevent screen sleep during cooking
  - Created touch-friendly UI with large text and clear spacing
  - Added completion celebration when all steps are done
  - Included loading and error states with navigation back to recipe detail
  - Verified TypeScript compilation and Vite build succeed

- **Recipe detail/edit page implementation**
  - Created useRecipe hook for fetching single recipe with loading/error states
  - Created RecipeForm component with full validation (title, ingredients, instructions required)
  - Implemented RecipeDetailPage with view/edit modes
  - Added create new recipe functionality (/recipe/new route)
  - Implemented edit existing recipe with form pre-population
  - Added delete recipe with confirmation dialog
  - Included metadata display (servings, prep time, cook time)
  - Added navigation to cook mode and back to list
  - Verified TypeScript compilation and Vite build succeed

- **Recipe list page implementation**
  - Created API client service (src/services/api.ts) with all CRUD operations
  - Created useRecipes hook for data fetching with search and pagination
  - Created RecipeCard component for displaying individual recipes
  - Implemented RecipeListPage with search bar, empty state, loading state, error handling
  - Added grid layout with responsive design (1-3 columns)
  - Implemented "Load More" button for pagination
  - Added recipe count display and meta information (servings, time, last cooked)
  - Verified TypeScript compilation and Vite build succeed

- **React Router setup**
  - Updated main.tsx to wrap App in BrowserRouter
  - Configured routes in App.tsx with navigation header
  - Created page components: RecipeListPage, RecipeDetailPage, CookModePage, NotFoundPage
  - Added active link highlighting in navigation
  - Defined routes: / (list), /recipe/new, /recipe/:id, /recipe/:id/cook, * (404)
  - Verified build and dev server work correctly

- **Tailwind CSS configuration**
  - Installed Tailwind CSS v4 with PostCSS and Autoprefixer
  - Installed @tailwindcss/postcss plugin for v4 compatibility
  - Created tailwind.config.js with content paths
  - Created postcss.config.js with Tailwind and Autoprefixer
  - Updated index.css with Tailwind directives
  - Updated App.tsx to demonstrate Tailwind utility classes
  - Verified build and dev server work correctly

- **Frontend initialization**
  - Created frontend/ directory with Vite + React + TypeScript
  - Installed React Router 7
  - Set up project structure (components/, hooks/, pages/, services/, types/)
  - Created Recipe and Tag TypeScript interfaces
  - Verified dev server starts successfully on port 5173
  - Added frontend README with development instructions

- **Recipe CRUD API implementation** (commit e2599b8)
  - Implemented GET /api/recipes (list with pagination & search)
  - Implemented GET /api/recipes/:id (get single recipe)
  - Implemented POST /api/recipes (create recipe)
  - Implemented PUT /api/recipes/:id (update recipe)
  - Implemented DELETE /api/recipes/:id (delete recipe)
  - Added Zod validation schemas for all endpoints
  - Created layered architecture (Routes → Services → Repositories)
  - Wrote 16 integration tests (all passing)
  - Database auto-save functionality

### 2026-03-23
- Backend initialization (Node.js + Express)
- TypeScript setup with strict mode
- SQLite schema creation with sql.js

---

## 📋 Backlog (Post-MVP)

### v1.0
- [ ] Browser extension for recipe scraping
- [ ] Recipe scaling (adjust servings)
- [ ] Print styles
- [ ] Advanced search filters
- [ ] Random recipe suggestion

### v2.0
- [ ] AI ingredient substitutions
- [ ] Meal planning
- [ ] Shopping list generation
- [ ] Fintrove cost tracking integration

---

## 🚧 Blocked / Needs Decision

- **Tag filtering in recipe list:** Currently shows UI but doesn't filter results. Need to add backend support for filtering recipes by tag_id parameter in GET /api/recipes endpoint, or implement a separate endpoint that returns recipes with their tags. (Low priority - tags work for assignment/display, just not list filtering yet)

---

## Notes for Agents

- Check this file before starting work
- Move completed tasks to "Completed" section
- Add new tasks as you discover them
- Flag blockers for Paul's attention
- Keep this file current (update after each commit)

---

_This is your working task list. Keep it honest and up-to-date._