paulh
/
recipe-manager
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
recipe-manager/TODO.md

11 KiB
Raw Blame History

TODO — Recipe Manager

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

🎯 Active Tasks

Backend Setup

  • 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"
  • Set up TypeScript: Create tsconfig.json (strict mode, ES2022, Node16 module resolution). Add build script to package.json. Verify: npm run build succeeds. Commit.
  • 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.
  • Implement recipe CRUD API endpoints
  • Add Zod validation schemas
  • Write API integration tests

Frontend Setup

  • Initialize React + Vite project
  • Configure Tailwind CSS
  • Set up React Router
  • Create recipe list page
  • Create recipe detail/edit page
  • Implement cook mode UI

Features

  • Tag management (create, assign, filter)
  • Text search (title + ingredients)
  • Basic error handling + loading states

DevOps

  • Create Dockerfile for backend
  • Create Dockerfile for frontend (nginx)
  • 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.