vibe-coded/webref
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
948fe591dc01119adff22a8b301d3237ae725073
webref/specs/001-reference-board-viewer/tasks.md
Danilo Reyes 948fe591dc
All checks were successful
CI/CD Pipeline / VM Test - security (push) Successful in 7s
Details
CI/CD Pipeline / Backend Linting (push) Successful in 4s
Details
CI/CD Pipeline / VM Test - backend-integration (push) Successful in 11s
Details
CI/CD Pipeline / VM Test - full-stack (push) Successful in 8s
Details
CI/CD Pipeline / VM Test - performance (push) Successful in 8s
Details
CI/CD Pipeline / Nix Flake Check (push) Successful in 38s
Details
CI/CD Pipeline / CI Summary (push) Successful in 0s
Details
CI/CD Pipeline / Frontend Linting (push) Successful in 17s
Details
phase 13
2025-11-02 14:48:03 -06:00

1184 lines
52 KiB
Markdown
Raw Blame History

# Tasks: Reference Board Viewer
**Created:** 2025-11-02
**Last Updated:** 2025-11-02
**Feature:** 001-reference-board-viewer
**Sprint:** MVP Development (Weeks 1-16)
## Overview
Implementation tasks for the Reference Board Viewer, organized by user story (functional requirement) to enable independent, parallel development. Tasks follow dependency-ordered phases aligned with the 16-week implementation plan.
**Total Tasks:** 165 tasks across 19 phases
**Technology Stack:** Svelte + Konva.js + FastAPI + PostgreSQL + MinIO (all Nix-verified ✅)
**Organization:** Tasks grouped by user story for independent implementation and testing
---
## Task Format Legend
```
- [ ] [T###] [P?] [US#?] Task description with file path
```
- **T###**: Sequential task ID (T001-T165)
- **[P]**: Parallelizable (can run simultaneously with other [P] tasks in same phase)
- **[US#]**: User Story label (US1-US18, maps to FR1-FR18 from spec.md)
- **File path**: Exact file to create/modify
---
## Phase 1: Setup & Project Initialization (Week 1)
**Goal:** Set up development environment, project structure, and CI/CD
- [X] T001 Initialize Git repository structure (README.md, .gitignore, .editorconfig)
- [X] T002 [P] Create flake.nix with development environment per nix-package-verification.md
- [X] T003 [P] Update shell.nix with all dependencies from nix-package-verification.md
- [X] T004 [P] Create .envrc for direnv automatic shell activation
- [X] T005 Initialize backend directory structure in backend/app/{auth,boards,images,database,api,core}
- [X] T006 [P] Initialize frontend directory with SvelteKit: frontend/src/{lib,routes}
- [X] T007 [P] Create backend/pyproject.toml with uv and dependencies
- [X] T008 [P] Create frontend/package.json with Svelte + Konva.js dependencies
- [X] T009 Set up pre-commit hooks in .pre-commit-config.yaml (Ruff, ESLint, Prettier)
- [X] T010 [P] Create CI/CD pipeline config (.github/workflows/ci.yml or equivalent)
- [X] T011 [P] Create backend/.env.example with all environment variables
- [X] T012 [P] Create frontend/.env.example with API_URL and feature flags
- [X] T013 [P] Configure Ruff in backend/pyproject.toml with Python linting rules
- [X] T014 [P] Configure ESLint + Prettier in frontend/.eslintrc.js and .prettierrc
- [X] T015 Create pytest configuration in backend/pytest.ini with coverage threshold 80%
- [X] T016 [P] Configure Vitest in frontend/vite.config.js for frontend testing
- [X] T017 Create backend/alembic.ini for database migrations
- [X] T018 Initialize Alembic migrations in backend/alembic/versions/
- [X] T019 [P] Create documentation structure in docs/{api,user-guide,deployment}
- [X] T020 Create Docker Compose for local development (PostgreSQL + MinIO) in docker-compose.dev.yml
**Deliverables:**
- Complete project structure
- Nix development environment working
- CI/CD pipeline running
- Pre-commit hooks configured
---
## Phase 2: Foundational Infrastructure (Week 1-2)
**Goal:** Database schema, configuration, shared utilities
- [X] T021 [P] Create database configuration in backend/app/core/config.py (load from .env)
- [X] T022 [P] Create database connection in backend/app/database/session.py (SQLAlchemy engine)
- [X] T023 [P] Create base database model in backend/app/database/base.py (declarative base)
- [X] T024 [P] Implement dependency injection utilities in backend/app/core/deps.py (get_db session)
- [X] T025 Create initial migration 001_initial_schema.py implementing full schema from data-model.md
- [X] T026 [P] Create CORS middleware configuration in backend/app/core/middleware.py
- [X] T027 [P] Create error handler utilities in backend/app/core/errors.py (exception classes)
- [X] T028 [P] Implement response schemas in backend/app/core/schemas.py (base Pydantic models)
- [X] T029 [P] Create MinIO client utility in backend/app/core/storage.py (boto3 wrapper)
- [X] T030 [P] Create logging configuration in backend/app/core/logging.py
- [X] T031 [P] Create FastAPI app initialization in backend/app/main.py with all middleware
- [X] T032 [P] Create frontend API client base in frontend/src/lib/api/client.ts (fetch wrapper with auth)
- [X] T033 [P] Create frontend auth store in frontend/src/lib/stores/auth.ts (Svelte writable store)
- [X] T034 [P] Create frontend error handling utilities in frontend/src/lib/utils/errors.ts
- [X] T035 [P] Implement frontend toast notification system in frontend/src/lib/components/Toast.svelte
**Deliverables:**
- Database schema created
- FastAPI app skeleton
- SvelteKit app skeleton
- Shared utilities available
---
## Phase 3: User Authentication (FR1 - Critical) (Week 2) ✅ COMPLETE
**User Story:** Users must be able to create accounts, log in, and manage their profile
**Independent Test Criteria:**
- [X] Users can register with valid email/password
- [X] Users can login and receive JWT token
- [X] Protected endpoints reject unauthenticated requests
- [X] Password validation enforces complexity rules
**Backend Tasks:**
- [X] T036 [P] [US1] Create User model in backend/app/database/models/user.py matching data-model.md schema
- [X] T037 [P] [US1] Create user schemas in backend/app/auth/schemas.py (UserCreate, UserLogin, UserResponse)
- [X] T038 [US1] Implement password hashing utilities in backend/app/auth/security.py (passlib bcrypt)
- [X] T039 [US1] Implement JWT token generation in backend/app/auth/jwt.py (python-jose)
- [X] T040 [US1] Create user repository in backend/app/auth/repository.py (database operations)
- [X] T041 [US1] Implement registration endpoint POST /auth/register in backend/app/api/auth.py
- [X] T042 [US1] Implement login endpoint POST /auth/login in backend/app/api/auth.py
- [X] T043 [US1] Implement current user endpoint GET /auth/me in backend/app/api/auth.py
- [X] T044 [US1] Create JWT validation dependency in backend/app/core/deps.py (get_current_user)
- [X] T045 [P] [US1] Write unit tests for password hashing in backend/tests/auth/test_security.py
- [X] T046 [P] [US1] Write unit tests for JWT generation in backend/tests/auth/test_jwt.py
- [X] T047 [P] [US1] Write integration tests for auth endpoints in backend/tests/api/test_auth.py
**Frontend Tasks:**
- [X] T048 [P] [US1] Create login page in frontend/src/routes/login/+page.svelte
- [X] T049 [P] [US1] Create registration page in frontend/src/routes/register/+page.svelte
- [X] T050 [US1] Implement auth API client methods in frontend/src/lib/api/auth.ts
- [X] T051 [US1] Create auth store with login/logout logic in frontend/src/lib/stores/auth.ts
- [X] T052 [US1] Implement route protection in frontend/src/hooks.server.ts
- [X] T053 [P] [US1] Create LoginForm component in frontend/src/lib/components/auth/LoginForm.svelte
- [X] T054 [P] [US1] Create RegisterForm component in frontend/src/lib/components/auth/RegisterForm.svelte
- [X] T055 [P] [US1] Write component tests for auth forms in frontend/tests/components/auth.test.ts
**Deliverables:**
- Complete authentication system
- JWT-based session management
- Protected routes
- ≥80% test coverage for auth module
---
## Phase 4: Board Management (FR2 - Critical) (Week 3) ✅ COMPLETE
**User Story:** Users must be able to create, save, edit, delete, and organize multiple reference boards
**Independent Test Criteria:**
- [X] Users can create boards with title
- [X] Users can list all their boards
- [X] Users can update board metadata
- [X] Users can delete boards with confirmation
- [X] Board operations enforce ownership
**Backend Tasks:**
- [X] T056 [P] [US2] Create Board model in backend/app/database/models/board.py from data-model.md
- [X] T057 [P] [US2] Create board schemas in backend/app/boards/schemas.py (BoardCreate, BoardUpdate, BoardResponse)
- [X] T058 [US2] Create board repository in backend/app/boards/repository.py (CRUD operations)
- [X] T059 [US2] Implement create board endpoint POST /boards in backend/app/api/boards.py
- [X] T060 [US2] Implement list boards endpoint GET /boards in backend/app/api/boards.py
- [X] T061 [US2] Implement get board endpoint GET /boards/{id} in backend/app/api/boards.py
- [X] T062 [US2] Implement update board endpoint PATCH /boards/{id} in backend/app/api/boards.py
- [X] T063 [US2] Implement delete board endpoint DELETE /boards/{id} in backend/app/api/boards.py
- [X] T064 [US2] Add ownership validation middleware in backend/app/boards/permissions.py
- [X] T065 [P] [US2] Write unit tests for board repository in backend/tests/boards/test_repository.py
- [X] T066 [P] [US2] Write integration tests for board endpoints in backend/tests/api/test_boards.py
**Frontend Tasks:**
- [X] T067 [P] [US2] Create boards API client in frontend/src/lib/api/boards.ts
- [X] T068 [P] [US2] Create boards store in frontend/src/lib/stores/boards.ts
- [X] T069 [US2] Create board list page in frontend/src/routes/boards/+page.svelte
- [X] T070 [US2] Create new board page in frontend/src/routes/boards/new/+page.svelte
- [X] T071 [US2] Create board edit page in frontend/src/routes/boards/[id]/edit/+page.svelte
- [X] T072 [P] [US2] Create BoardCard component in frontend/src/lib/components/boards/BoardCard.svelte
- [X] T073 [P] [US2] Create CreateBoardModal component in frontend/src/lib/components/boards/CreateBoardModal.svelte
- [X] T074 [P] [US2] Create DeleteConfirmModal component in frontend/src/lib/components/common/DeleteConfirmModal.svelte
- [X] T075 [P] [US2] Write component tests for board components in frontend/tests/components/boards.test.ts
**Deliverables:**
- Complete board CRUD
- Board list UI with thumbnails
- Ownership enforcement
- ≥80% test coverage
---
## Phase 5: Image Upload & Storage (FR4 - Critical) (Week 4)
**User Story:** Users must be able to add images to boards through multiple methods
**Independent Test Criteria:**
- [X] Users can upload via file picker
- [X] Users can drag-drop images
- [X] Users can paste from clipboard
- [X] Users can upload ZIP files (auto-extracted)
- [X] File validation rejects invalid files
- [X] Thumbnails generated automatically
**Backend Tasks:**
- [X] T076 [P] [US3] Create Image model in backend/app/database/models/image.py from data-model.md
- [X] T077 [P] [US3] Create BoardImage model in backend/app/database/models/board_image.py from data-model.md
- [X] T078 [P] [US3] Create image schemas in backend/app/images/schemas.py (ImageUpload, ImageResponse)
- [X] T079 [US3] Implement file validation in backend/app/images/validation.py (magic bytes, size, type)
- [X] T080 [US3] Implement image upload handler in backend/app/images/upload.py (streaming to MinIO)
- [X] T081 [US3] Implement thumbnail generation in backend/app/images/processing.py (Pillow resizing)
- [X] T082 [US3] Create image repository in backend/app/images/repository.py (metadata operations)
- [X] T083 [US3] Implement upload endpoint POST /boards/{id}/images in backend/app/api/images.py
- [X] T084 [US3] Implement ZIP extraction handler in backend/app/images/zip_handler.py
- [X] T085 [US3] Set up background task queue for thumbnail generation in backend/app/core/tasks.py
- [X] T086 [P] [US3] Write unit tests for file validation in backend/tests/images/test_validation.py
- [X] T087 [P] [US3] Write unit tests for thumbnail generation in backend/tests/images/test_processing.py
- [X] T088 [P] [US3] Write integration tests for upload endpoint in backend/tests/api/test_images.py
**Frontend Tasks:**
- [X] T089 [P] [US3] Create images API client in frontend/src/lib/api/images.ts
- [X] T090 [P] [US3] Create images store in frontend/src/lib/stores/images.ts
- [X] T091 [US3] Implement file picker upload in frontend/src/lib/components/upload/FilePicker.svelte
- [X] T092 [US3] Implement drag-drop zone in frontend/src/lib/components/upload/DropZone.svelte
- [X] T093 [US3] Implement clipboard paste handler in frontend/src/lib/utils/clipboard.ts
- [X] T094 [US3] Implement ZIP upload handler in frontend/src/lib/utils/zip-upload.ts
- [X] T095 [P] [US3] Create upload progress component in frontend/src/lib/components/upload/ProgressBar.svelte
- [X] T096 [P] [US3] Create upload error display in frontend/src/lib/components/upload/ErrorDisplay.svelte
- [X] T097 [P] [US3] Write upload component tests in frontend/tests/components/upload.test.ts
**Infrastructure:**
- [X] T098 [US3] Configure MinIO bucket creation in backend/app/core/storage.py
- [X] T099 [US3] Set up MinIO via Nix in flake.nix services configuration
**Deliverables:**
- Multi-method upload working
- Images stored in MinIO
- Thumbnails generated
- Progress indicators
- ≥80% test coverage
---
## Phase 6: Canvas Navigation & Viewport (FR12 - Critical) (Week 5) ✅ COMPLETE
**User Story:** Users must be able to navigate the infinite canvas efficiently
**Independent Test Criteria:**
- [X] Users can pan canvas (drag or spacebar+drag)
- [X] Users can zoom in/out (mouse wheel, pinch)
- [X] Users can rotate canvas view
- [X] Users can reset camera and fit to screen
- [X] Viewport state persists
**Frontend Tasks:**
- [X] T100 [US4] Initialize Konva.js Stage in frontend/src/lib/canvas/Stage.svelte
- [X] T101 [US4] Implement pan functionality in frontend/src/lib/canvas/controls/pan.ts
- [X] T102 [P] [US4] Implement zoom functionality in frontend/src/lib/canvas/controls/zoom.ts
- [X] T103 [P] [US4] Implement canvas rotation in frontend/src/lib/canvas/controls/rotate.ts
- [X] T104 [US4] Create viewport store in frontend/src/lib/stores/viewport.ts
- [X] T105 [US4] Implement reset camera function in frontend/src/lib/canvas/controls/reset.ts
- [X] T106 [US4] Implement fit-to-screen function in frontend/src/lib/canvas/controls/fit.ts
- [X] T107 [US4] Add touch gesture support in frontend/src/lib/canvas/gestures.ts (pinch, two-finger pan)
- [X] T108 [US4] Persist viewport state to backend when changed
- [X] T109 [P] [US4] Write canvas control tests in frontend/tests/canvas/controls.test.ts
**Backend Tasks:**
- [X] T110 [US4] Add viewport persistence endpoint PATCH /boards/{id}/viewport in backend/app/api/boards.py
**Deliverables:**
- Infinite canvas working
- Pan/zoom/rotate functional
- Touch gestures supported
- 60fps performance maintained
---
## Phase 7: Image Positioning & Selection (FR5 - Critical) (Week 5-6) ✅ COMPLETE
**User Story:** Users must be able to freely position and organize images on canvas
**Independent Test Criteria:**
- [X] Users can drag images to any position
- [X] Images can overlap (Z-order controlled)
- [X] Users can select single/multiple images
- [X] Selection shows visual indicators
- [X] Positions persist in database
**Frontend Tasks:**
- [X] T111 [US5] Create Konva Image wrapper in frontend/src/lib/canvas/Image.svelte
- [X] T112 [US5] Implement image dragging in frontend/src/lib/canvas/interactions/drag.ts
- [X] T113 [US5] Implement click selection in frontend/src/lib/canvas/interactions/select.ts
- [X] T114 [US5] Implement selection rectangle (drag-to-select) in frontend/src/lib/canvas/interactions/multiselect.ts
- [X] T115 [US5] Create selection store in frontend/src/lib/stores/selection.ts
- [X] T116 [P] [US5] Create selection visual indicators in frontend/src/lib/canvas/SelectionBox.svelte
- [X] T117 [US5] Implement position sync to backend (debounced) in frontend/src/lib/canvas/sync.ts
- [X] T118 [P] [US5] Write dragging tests in frontend/tests/canvas/drag.test.ts
- [X] T119 [P] [US5] Write selection tests in frontend/tests/canvas/select.test.ts
**Backend Tasks:**
- [X] T120 [US5] Implement image position update endpoint PATCH /boards/{id}/images/{image_id} in backend/app/api/images.py
- [X] T121 [P] [US5] Write integration tests for position updates in backend/tests/api/test_image_position.py
**Deliverables:**
- Images draggable
- Multi-selection works
- Positions persist
- Visual feedback immediate
---
## Phase 8: Image Transformations (FR8 - Critical) (Week 6) ✅ COMPLETE
**User Story:** Users must be able to transform images non-destructively
**Independent Test Criteria:**
- [X] Users can scale images (resize handles)
- [X] Users can rotate images (any angle)
- [X] Users can flip horizontal/vertical
- [X] Users can crop to rectangular region
- [X] Users can adjust opacity (0-100%)
- [X] Users can convert to greyscale
- [X] Users can reset to original
- [X] All transformations non-destructive
**Frontend Tasks:**
- [X] T122 [US6] Implement image rotation in frontend/src/lib/canvas/transforms/rotate.ts
- [X] T123 [P] [US6] Implement image scaling in frontend/src/lib/canvas/transforms/scale.ts
- [X] T124 [P] [US6] Implement flip transformations in frontend/src/lib/canvas/transforms/flip.ts
- [X] T125 [US6] Implement crop tool in frontend/src/lib/canvas/transforms/crop.ts
- [X] T126 [P] [US6] Implement opacity adjustment in frontend/src/lib/canvas/transforms/opacity.ts
- [X] T127 [P] [US6] Implement greyscale filter in frontend/src/lib/canvas/transforms/greyscale.ts
- [X] T128 [US6] Create transformation panel UI in frontend/src/lib/components/canvas/TransformPanel.svelte
- [X] T129 [US6] Implement reset to original function in frontend/src/lib/canvas/transforms/reset.ts
- [X] T130 [US6] Sync transformations to backend (debounced)
- [X] T131 [P] [US6] Write transformation tests in frontend/tests/canvas/transforms.test.ts
**Backend Tasks:**
- [X] T132 [US6] Update transformations endpoint PATCH /boards/{id}/images/{image_id} to handle all transform types
- [X] T133 [P] [US6] Write transformation validation tests in backend/tests/images/test_transformations.py
**Deliverables:**
- All transformations functional
- Non-destructive editing verified
- Transformations persist
- Real-time preview
---
## Phase 9: Multi-Selection & Bulk Operations (FR9 - High) (Week 7) ✅ COMPLETE
**User Story:** Users must be able to select and operate on multiple images simultaneously
**Independent Test Criteria:**
- [X] Selection rectangle selects multiple images
- [X] Ctrl+Click adds to selection
- [X] Ctrl+A selects all
- [X] Bulk move works on selected images
- [X] Bulk transformations apply correctly
**Frontend Tasks:**
- [X] T134 [US7] Enhance selection rectangle in frontend/src/lib/canvas/interactions/multiselect.ts
- [X] T135 [US7] Implement Ctrl+Click add-to-selection in frontend/src/lib/canvas/interactions/select.ts
- [X] T136 [US7] Implement select all (Ctrl+A) in frontend/src/lib/canvas/keyboard.ts
- [X] T137 [US7] Implement deselect all (Escape) in frontend/src/lib/canvas/keyboard.ts
- [X] T138 [US7] Implement bulk move in frontend/src/lib/canvas/operations/bulk-move.ts
- [X] T139 [P] [US7] Implement bulk rotate in frontend/src/lib/canvas/operations/bulk-rotate.ts
- [X] T140 [P] [US7] Implement bulk scale in frontend/src/lib/canvas/operations/bulk-scale.ts
- [X] T141 [P] [US7] Create selection count indicator in frontend/src/lib/components/canvas/SelectionCounter.svelte
- [X] T142 [P] [US7] Write multi-selection tests in frontend/tests/canvas/multiselect.test.ts
**Backend Tasks:**
- [X] T143 [US7] Implement bulk update endpoint PATCH /boards/{id}/images/bulk in backend/app/api/images.py
- [X] T144 [P] [US7] Write bulk operation tests in backend/tests/api/test_bulk_operations.py
**Deliverables:**
- Multi-selection complete
- Bulk operations functional
- Selection count visible
---
## Phase 10: Copy, Cut, Paste, Delete (FR10 - High) (Week 7) ✅ COMPLETE
**User Story:** Users must have standard clipboard operations
**Independent Test Criteria:**
- [X] Copy (Ctrl+C) copies selected images
- [X] Cut (Ctrl+X) copies and removes
- [X] Paste (Ctrl+V) inserts at viewport center
- [X] Delete (Del) removes with confirmation (>10 images)
**Frontend Tasks:**
- [X] T145 [US8] Implement copy operation in frontend/src/lib/canvas/clipboard/copy.ts
- [X] T146 [US8] Implement cut operation in frontend/src/lib/canvas/clipboard/cut.ts
- [X] T147 [US8] Implement paste operation in frontend/src/lib/canvas/clipboard/paste.ts
- [X] T148 [US8] Implement delete operation in frontend/src/lib/canvas/operations/delete.ts
- [X] T149 [US8] Create clipboard store in frontend/src/lib/stores/clipboard.ts
- [X] T150 [US8] Add keyboard shortcuts (Ctrl+C/X/V, Delete) in frontend/src/lib/canvas/keyboard.ts
- [X] T151 [P] [US8] Create delete confirmation modal in frontend/src/lib/components/canvas/DeleteConfirmModal.svelte
- [X] T152 [P] [US8] Write clipboard tests in frontend/tests/canvas/clipboard.test.ts
**Backend Tasks:**
- [X] T153 [US8] Implement delete endpoint DELETE /boards/{id}/images/{image_id} in backend/app/api/images.py
- [X] T154 [P] [US8] Write delete endpoint tests in backend/tests/api/test_image_delete.py
**Deliverables:**
- All clipboard ops work
- Delete requires confirmation
- Standard keyboard shortcuts
---
## Phase 11: Z-Order & Layering (Week 8) ✅ COMPLETE
**User Story:** Control image stacking order (bring to front/back)
**Independent Test Criteria:**
- [X] Bring to front moves image to top layer
- [X] Send to back moves image to bottom
- [X] Forward/backward moves one layer
- [X] Z-order persists
**Frontend Tasks:**
- [X] T155 [US5] Implement bring to front in frontend/src/lib/canvas/operations/z-order.ts
- [X] T156 [P] [US5] Implement send to back in frontend/src/lib/canvas/operations/z-order.ts
- [X] T157 [P] [US5] Implement bring forward/send backward in frontend/src/lib/canvas/operations/z-order.ts
- [X] T158 [US5] Add Z-order keyboard shortcuts in frontend/src/lib/canvas/keyboard.ts
- [X] T159 [US5] Sync Z-order changes to backend
- [X] T160 [P] [US5] Write Z-order tests in frontend/tests/canvas/z-order.test.ts
**Backend Tasks:**
- [X] T161 [US5] Update Z-order field in position update endpoint backend/app/api/images.py
- [X] T162 [P] [US5] Write Z-order persistence tests in backend/tests/api/test_z_order.py
**Deliverables:**
- Full layering control
- Z-order immediately visible
- Persistence working
---
## Phase 12: Alignment & Distribution (FR6 - High) (Week 10) ✅ COMPLETE
**User Story:** Users must be able to precisely align and distribute images
**Independent Test Criteria:**
- [X] Align top/bottom/left/right works
- [X] Center horizontal/vertical works
- [X] Distribute horizontal/vertical creates equal spacing
- [X] Snap-to-grid assists alignment
- [X] Grid size configurable
**Frontend Tasks:**
- [X] T163 [US9] Implement align top/bottom in frontend/src/lib/canvas/operations/align.ts
- [X] T164 [P] [US9] Implement align left/right in frontend/src/lib/canvas/operations/align.ts
- [X] T165 [P] [US9] Implement center horizontal/vertical in frontend/src/lib/canvas/operations/align.ts
- [X] T166 [US9] Implement distribute horizontal in frontend/src/lib/canvas/operations/distribute.ts
- [X] T167 [P] [US9] Implement distribute vertical in frontend/src/lib/canvas/operations/distribute.ts
- [X] T168 [US9] Implement snap-to-grid in frontend/src/lib/canvas/grid.ts
- [X] T169 [P] [US9] Create grid settings UI in frontend/src/lib/components/canvas/GridSettings.svelte
- [X] T170 [P] [US9] Create alignment toolbar in frontend/src/lib/components/canvas/AlignmentToolbar.svelte
- [X] T171 [P] [US9] Write alignment calculation tests in frontend/tests/canvas/align.test.ts
**Deliverables:**
- All alignment commands work
- Distribution creates equal spacing
- Snap-to-grid functional
---
## Phase 13: Image Grouping & Annotations (FR7 - High) (Week 9) ✅ COMPLETE
**User Story:** Users must be able to organize images into groups with labels
**Independent Test Criteria:**
- [X] Users can create groups from selection
- [X] Groups have text annotations
- [X] Groups have colored labels
- [X] Groups move as single unit
- [X] Groups can be ungrouped
**Backend Tasks:**
- [X] T172 [P] [US10] Create Group model in backend/app/database/models/group.py from data-model.md
- [X] T173 [P] [US10] Create group schemas in backend/app/boards/schemas.py (GroupCreate, GroupResponse)
- [X] T174 [US10] Create group repository in backend/app/boards/repository.py (group operations)
- [X] T175 [US10] Implement create group endpoint POST /boards/{id}/groups in backend/app/api/groups.py
- [X] T176 [US10] Implement list groups endpoint GET /boards/{id}/groups in backend/app/api/groups.py
- [X] T177 [US10] Implement update group endpoint PATCH /boards/{id}/groups/{group_id} in backend/app/api/groups.py
- [X] T178 [US10] Implement delete group endpoint DELETE /boards/{id}/groups/{group_id} in backend/app/api/groups.py
- [X] T179 [P] [US10] Write group endpoint tests in backend/tests/api/test_groups.py
**Frontend Tasks:**
- [X] T180 [P] [US10] Create groups API client in frontend/src/lib/api/groups.ts
- [X] T181 [P] [US10] Create groups store in frontend/src/lib/stores/groups.ts
- [X] T182 [US10] Implement create group from selection in frontend/src/lib/canvas/operations/group.ts
- [X] T183 [US10] Implement group move as unit in frontend/src/lib/canvas/operations/group-move.ts
- [X] T184 [US10] Implement ungroup operation in frontend/src/lib/canvas/operations/ungroup.ts
- [X] T185 [P] [US10] Create group annotation UI in frontend/src/lib/components/canvas/GroupAnnotation.svelte
- [X] T186 [P] [US10] Create color picker for groups in frontend/src/lib/components/canvas/ColorPicker.svelte
- [X] T187 [P] [US10] Add group visual indicators in frontend/src/lib/canvas/GroupVisual.svelte
- [X] T188 [P] [US10] Write grouping tests in frontend/tests/canvas/groups.test.ts
**Deliverables:**
- Grouping functional
- Annotations and colors work
- Groups move together
- Membership enforced
---
## Phase 14: Board Sharing & Collaboration (FR3 - High) (Week 11)
**User Story:** Users must be able to share boards with configurable permissions
**Independent Test Criteria:**
- [ ] Users can generate share links
- [ ] Permission level selector works (View-only/View+Comment)
- [ ] View-only prevents modifications
- [ ] View+Comment allows adding comments
- [ ] Share links can be revoked
**Backend Tasks:**
- [ ] T189 [P] [US11] Create ShareLink model in backend/app/database/models/share_link.py from data-model.md
- [ ] T190 [P] [US11] Create Comment model in backend/app/database/models/comment.py from data-model.md
- [ ] T191 [P] [US11] Create share link schemas in backend/app/boards/schemas.py (ShareLinkCreate, ShareLinkResponse)
- [ ] T192 [US11] Implement token generation in backend/app/boards/sharing.py (secure random tokens)
- [ ] T193 [US11] Create share link endpoint POST /boards/{id}/share-links in backend/app/api/sharing.py
- [ ] T194 [US11] Create list share links endpoint GET /boards/{id}/share-links in backend/app/api/sharing.py
- [ ] T195 [US11] Implement revoke endpoint DELETE /boards/{id}/share-links/{link_id} in backend/app/api/sharing.py
- [ ] T196 [US11] Implement shared board access GET /shared/{token} in backend/app/api/sharing.py
- [ ] T197 [US11] Add permission validation middleware in backend/app/boards/permissions.py
- [ ] T198 [US11] Implement comment endpoints (create, list) in backend/app/api/comments.py
- [ ] T199 [P] [US11] Write sharing tests in backend/tests/api/test_sharing.py
- [ ] T200 [P] [US11] Write permission tests in backend/tests/boards/test_permissions.py
**Frontend Tasks:**
- [ ] T201 [P] [US11] Create sharing API client in frontend/src/lib/api/sharing.ts
- [ ] T202 [P] [US11] Create share modal in frontend/src/lib/components/sharing/ShareModal.svelte
- [ ] T203 [US11] Implement permission selector in frontend/src/lib/components/sharing/PermissionSelector.svelte
- [ ] T204 [US11] Create shared board view in frontend/src/routes/shared/[token]/+page.svelte
- [ ] T205 [US11] Implement comment UI for View+Comment links in frontend/src/lib/components/sharing/Comments.svelte
- [ ] T206 [US11] Create share link management view in frontend/src/lib/components/sharing/LinkManager.svelte
- [ ] T207 [P] [US11] Write sharing component tests in frontend/tests/components/sharing.test.ts
**Deliverables:**
- Share link generation works
- Permission levels enforced
- Comments functional
- Link revocation works
---
## Phase 15: Export & Download (FR15 - High) (Week 12)
**User Story:** Users must be able to export images and board layouts
**Independent Test Criteria:**
- [ ] Single image download works
- [ ] ZIP export contains all images
- [ ] Composite export captures board layout
- [ ] Resolution selector offers 1x/2x/4x
- [ ] Progress shown for large exports
**Backend Tasks:**
- [ ] T208 [US12] Implement single image download in backend/app/images/download.py
- [ ] T209 [US12] Implement ZIP export in backend/app/images/export_zip.py (all images)
- [ ] T210 [US12] Implement composite image generation in backend/app/images/export_composite.py (Pillow)
- [ ] T211 [US12] Create export endpoint POST /boards/{id}/export in backend/app/api/export.py
- [ ] T212 [US12] Add background task for large exports in backend/app/core/tasks.py
- [ ] T213 [P] [US12] Write export tests in backend/tests/api/test_export.py
**Frontend Tasks:**
- [ ] T214 [P] [US12] Create export API client in frontend/src/lib/api/export.ts
- [ ] T215 [P] [US12] Create export modal in frontend/src/lib/components/export/ExportModal.svelte
- [ ] T216 [US12] Implement resolution selector in frontend/src/lib/components/export/ResolutionSelector.svelte
- [ ] T217 [P] [US12] Create export progress indicator in frontend/src/lib/components/export/ProgressBar.svelte
- [ ] T218 [US12] Implement download trigger and file saving in frontend/src/lib/utils/download.ts
- [ ] T219 [P] [US12] Write export component tests in frontend/tests/components/export.test.ts
**Deliverables:**
- All export formats work
- Progress indicators visible
- Large exports handled correctly
---
## Phase 16: Adaptive Image Quality (FR16 - High) (Week 13)
**User Story:** Application must serve appropriate quality based on connection speed
**Independent Test Criteria:**
- [ ] Connection speed detected automatically
- [ ] Low quality served on slow connections
- [ ] Manual override works (Auto/Low/Medium/High)
- [ ] Quality setting persists across sessions
- [ ] Full-resolution loadable on-demand
**Backend Tasks:**
- [ ] T220 [US13] Implement quality detection endpoint POST /api/connection/test in backend/app/api/quality.py
- [ ] T221 [US13] Add thumbnail serving logic with quality selection in backend/app/images/serve.py
- [ ] T222 [P] [US13] Write quality serving tests in backend/tests/api/test_quality.py
**Frontend Tasks:**
- [ ] T223 [US13] Implement connection speed test in frontend/src/lib/utils/connection-test.ts (Network Information API)
- [ ] T224 [US13] Create quality settings store in frontend/src/lib/stores/quality.ts
- [ ] T225 [US13] Implement automatic quality selection logic in frontend/src/lib/utils/adaptive-quality.ts
- [ ] T226 [P] [US13] Create quality selector UI in frontend/src/lib/components/settings/QualitySelector.svelte
- [ ] T227 [US13] Implement on-demand full-res loading in frontend/src/lib/canvas/Image.svelte
- [ ] T228 [US13] Add quality preference persistence (localStorage)
- [ ] T229 [P] [US13] Write quality selection tests in frontend/tests/utils/quality.test.ts
**Deliverables:**
- Connection detection works
- Appropriate quality served
- Manual override functional
- Preferences persist
---
## Phase 17: Image Library & Reuse (FR17 - Medium) (Week 14)
**User Story:** Users can reuse uploaded images across multiple boards
**Independent Test Criteria:**
- [ ] Image library shows all user's images
- [ ] Users can add library images to boards
- [ ] Same image on multiple boards references single file
- [ ] Deleting from board doesn't delete from library
- [ ] Permanent delete removes from all boards
**Backend Tasks:**
- [ ] T230 [US14] Implement image library endpoint GET /library/images in backend/app/api/library.py
- [ ] T231 [US14] Add image search/filter logic in backend/app/images/search.py
- [ ] T232 [US14] Implement add-to-board from library endpoint in backend/app/api/library.py
- [ ] T233 [US14] Update reference counting logic in backend/app/images/repository.py
- [ ] T234 [US14] Implement permanent delete endpoint DELETE /library/images/{id} in backend/app/api/library.py
- [ ] T235 [P] [US14] Write library endpoint tests in backend/tests/api/test_library.py
**Frontend Tasks:**
- [ ] T236 [P] [US14] Create library API client in frontend/src/lib/api/library.ts
- [ ] T237 [US14] Create image library page in frontend/src/routes/library/+page.svelte
- [ ] T238 [P] [US14] Create library image grid in frontend/src/lib/components/library/ImageGrid.svelte
- [ ] T239 [P] [US14] Create add-to-board modal in frontend/src/lib/components/library/AddToBoardModal.svelte
- [ ] T240 [US14] Implement library search in frontend/src/lib/components/library/SearchBar.svelte
- [ ] T241 [P] [US14] Write library component tests in frontend/tests/components/library.test.ts
**Deliverables:**
- Image library functional
- Cross-board reuse works
- Reference counting correct
- Search/filter works
---
## Phase 18: Command Palette (FR11 - Medium) (Week 14)
**User Story:** Users need quick access to all commands via searchable palette
**Independent Test Criteria:**
- [ ] Palette opens with Ctrl+K/Cmd+K
- [ ] Search filters commands
- [ ] Recently used appears first
- [ ] Commands execute correctly
- [ ] Keyboard shortcuts shown
**Frontend Tasks:**
- [ ] T242 [US15] Create command registry in frontend/src/lib/commands/registry.ts
- [ ] T243 [US15] Implement command palette modal in frontend/src/lib/components/commands/Palette.svelte
- [ ] T244 [US15] Implement command search/filter in frontend/src/lib/commands/search.ts
- [ ] T245 [US15] Add Ctrl+K keyboard shortcut in frontend/src/lib/canvas/keyboard.ts
- [ ] T246 [P] [US15] Create command item display in frontend/src/lib/components/commands/CommandItem.svelte
- [ ] T247 [US15] Implement recently-used tracking in frontend/src/lib/stores/commands.ts
- [ ] T248 [P] [US15] Write command palette tests in frontend/tests/components/commands.test.ts
**Deliverables:**
- Command palette opens quickly
- Search works instantly
- All commands accessible
- Recently used prioritized
---
## Phase 19: Focus Mode & Navigation (FR13 - Medium) (Week 14)
**User Story:** Users can focus on individual images and navigate between them
**Independent Test Criteria:**
- [ ] Double-click enters focus mode
- [ ] Focus mode shows single image
- [ ] Navigation (prev/next) works
- [ ] Navigation order selector works (Chronological/Spatial/Alphabetical/Random)
- [ ] Escape exits focus mode
**Frontend Tasks:**
- [ ] T249 [US16] Implement focus mode in frontend/src/lib/canvas/focus.ts
- [ ] T250 [US16] Create focus mode UI in frontend/src/lib/components/canvas/FocusMode.svelte
- [ ] T251 [US16] Implement navigation order calculation in frontend/src/lib/canvas/navigation.ts
- [ ] T252 [P] [US16] Create navigation order selector in frontend/src/lib/components/canvas/NavigationSettings.svelte
- [ ] T253 [US16] Implement prev/next navigation in frontend/src/lib/canvas/navigation.ts
- [ ] T254 [US16] Add image counter display in frontend/src/lib/components/canvas/ImageCounter.svelte
- [ ] T255 [US16] Persist navigation preference in localStorage
- [ ] T256 [P] [US16] Write focus mode tests in frontend/tests/canvas/focus.test.ts
**Deliverables:**
- Focus mode works
- Navigation functional
- Order selector works
- Preferences persist
---
## Phase 20: Slideshow Mode (FR14 - Low) (Week 14)
**User Story:** Users can play automatic slideshow of board images
**Independent Test Criteria:**
- [ ] Slideshow starts from menu/shortcut
- [ ] Images advance automatically
- [ ] Interval configurable (1-30s)
- [ ] Manual nav works during slideshow
- [ ] Pause/resume functional
**Frontend Tasks:**
- [ ] T257 [US17] Implement slideshow mode in frontend/src/lib/canvas/slideshow.ts
- [ ] T258 [US17] Create slideshow UI in frontend/src/lib/components/canvas/Slideshow.svelte
- [ ] T259 [P] [US17] Create interval selector in frontend/src/lib/components/canvas/SlideshowSettings.svelte
- [ ] T260 [US17] Implement auto-advance timer in frontend/src/lib/canvas/slideshow.ts
- [ ] T261 [US17] Add pause/resume controls in frontend/src/lib/components/canvas/SlideshowControls.svelte
- [ ] T262 [US17] Respect navigation order setting (from FR13)
- [ ] T263 [P] [US17] Write slideshow tests in frontend/tests/canvas/slideshow.test.ts
**Deliverables:**
- Slideshow functional
- Controls work
- Respects navigation order
- Smooth transitions
---
## Phase 21: Auto-Arrange Images (FR18 - Low) (Week 14)
**User Story:** Users can automatically arrange images by criteria
**Independent Test Criteria:**
- [ ] Auto-arrange by name (alphabetical)
- [ ] Auto-arrange by upload date
- [ ] Auto-arrange with optimal layout
- [ ] Random arrangement works
- [ ] Preview shown before applying
- [ ] Undo works after arrange
**Frontend Tasks:**
- [ ] T264 [US18] Implement sort by name in frontend/src/lib/canvas/arrange/sort-name.ts
- [ ] T265 [P] [US18] Implement sort by date in frontend/src/lib/canvas/arrange/sort-date.ts
- [ ] T266 [P] [US18] Implement optimal layout algorithm in frontend/src/lib/canvas/arrange/optimal.ts
- [ ] T267 [P] [US18] Implement random arrangement in frontend/src/lib/canvas/arrange/random.ts
- [ ] T268 [US18] Create arrange modal with preview in frontend/src/lib/components/canvas/ArrangeModal.svelte
- [ ] T269 [US18] Implement undo for arrange operations
- [ ] T270 [P] [US18] Write arrangement algorithm tests in frontend/tests/canvas/arrange.test.ts
**Deliverables:**
- All arrange methods work
- Preview functional
- Groups preserved
- Undo available
---
## Phase 22: Performance & Optimization (Week 13)
**Goal:** Meet performance budgets (60fps, <200ms, <3s load)
**Cross-Cutting Tasks:**
- [ ] T271 [P] Implement virtual rendering for canvas (only render visible images) in frontend/src/lib/canvas/virtual-render.ts
- [ ] T272 [P] Add lazy loading for image thumbnails in frontend/src/lib/components/boards/LazyImage.svelte
- [ ] T273 [P] Optimize database queries with proper indexes (verify GIN indexes working)
- [ ] T274 [P] Implement Redis caching for hot data in backend/app/core/cache.py (optional)
- [ ] T275 Run Lighthouse performance audit on frontend (target: >90 score)
- [ ] T276 Run load testing on backend with locust (target: 1000 req/s)
- [ ] T277 [P] Optimize Pillow thumbnail generation settings in backend/app/images/processing.py
- [ ] T278 [P] Add WebP format conversion for smaller file sizes
- [ ] T279 Profile canvas rendering with Chrome DevTools (verify 60fps)
- [ ] T280 Add performance monitoring in backend/app/core/monitoring.py
**Deliverables:**
- 60fps canvas with 500+ images
- <200ms API responses
- <3s page load
- Lighthouse score >90
---
## Phase 23: Testing & Quality Assurance (Week 15)
**Goal:** Achieve ≥80% coverage, validate all requirements
**Backend Testing:**
- [ ] T281 [P] Verify ≥80% pytest coverage for all modules (run pytest --cov)
- [ ] T282 [P] Write missing unit tests to reach 80% threshold
- [ ] T283 [P] Add edge case tests (large files, concurrent uploads, SQL injection attempts)
- [ ] T284 [P] Write performance benchmark tests in backend/tests/performance/test_benchmarks.py
- [ ] T285 [P] Add security tests (authentication bypass, permission escalation) in backend/tests/security/
**Frontend Testing:**
- [ ] T286 [P] Verify ≥80% Vitest coverage for all modules (run vitest --coverage)
- [ ] T287 [P] Write missing component tests to reach 80% threshold
- [ ] T288 [P] Add E2E tests for critical flows in frontend/tests/e2e/ (Playwright)
- [ ] T289 [P] Write canvas interaction tests (drag, select, transform)
- [ ] T290 [P] Add cross-browser tests (Chrome, Firefox, Safari, Edge)
**Integration Testing:**
- [ ] T291 Test complete user journey: register → create board → upload → arrange → export
- [ ] T292 Test sharing flow: create board → share → viewer access → add comment
- [ ] T293 Test image library: upload → reuse across boards → delete
- [ ] T294 Test performance: load board with 500 images, verify 60fps
- [ ] T295 Test adaptive quality: simulate slow connection, verify low-res served
**Deliverables:**
- ≥80% coverage both sides
- E2E tests pass
- All edge cases covered
- Performance validated
---
## Phase 24: Accessibility & UX Polish (Week 15)
**Goal:** WCAG 2.1 AA compliance, keyboard navigation
**Accessibility Tasks:**
- [ ] T296 [P] Run axe-core accessibility audit on all pages
- [ ] T297 [P] Fix all WCAG 2.1 AA violations (color contrast, alt text, ARIA labels)
- [ ] T298 Add keyboard navigation for all canvas operations in frontend/src/lib/canvas/keyboard.ts
- [ ] T299 [P] Add focus indicators for all interactive elements
- [ ] T300 [P] Test with screen reader (NVDA or VoiceOver)
- [ ] T301 [P] Add skip links for keyboard users in frontend/src/lib/components/layout/SkipLinks.svelte
- [ ] T302 [P] Verify tab order is logical across all pages
**UX Polish:**
- [ ] T303 [P] Add loading states for all async operations (spinners, skeletons)
- [ ] T304 [P] Improve error messages (make user-friendly, actionable)
- [ ] T305 [P] Add tooltips for all toolbar buttons in frontend/src/lib/components/common/Tooltip.svelte
- [ ] T306 [P] Implement keyboard shortcuts cheat sheet in frontend/src/lib/components/help/KeyboardShortcuts.svelte
- [ ] T307 [P] Add undo/redo stack for all canvas operations (optional, if time permits)
- [ ] T308 [P] Polish animations and transitions (smooth, not jarring)
**Deliverables:**
- WCAG 2.1 AA compliant
- Full keyboard navigation
- Professional polish
- Excellent accessibility
---
## Phase 25: Deployment & Documentation (Week 16)
**Goal:** Production-ready Nix deployment, complete documentation
**Nix Deployment:**
- [ ] T309 Finalize flake.nix with all services (PostgreSQL, MinIO, Nginx) from nix-package-verification.md
- [ ] T310 [P] Create NixOS module in nixos/webref.nix with service configuration
- [ ] T311 [P] Create secrets management in nixos/secrets.nix (agenix or sops-nix)
- [ ] T312 Create production build in flake.nix outputs (frontend + backend packages)
- [ ] T313 [P] Create systemd service for FastAPI in nixos/webref.nix
- [ ] T314 Configure Nginx virtual host in nixos/webref.nix with SSL/TLS
- [ ] T315 [P] Set up PostgreSQL with proper permissions in nixos/webref.nix
- [ ] T316 [P] Configure MinIO buckets in nixos/webref.nix
- [ ] T317 Test deployment on staging NixOS server
- [ ] T318 Create rollback procedure documentation in docs/deployment/rollback.md
**Documentation:**
- [ ] T319 [P] Write deployment guide in docs/deployment/README.md
- [ ] T320 [P] Write development setup guide in docs/development/setup.md
- [ ] T321 [P] Write API documentation (OpenAPI already generated at /api/docs)
- [ ] T322 [P] Write user guide in docs/user-guide/getting-started.md
- [ ] T323 [P] Create architecture diagrams in docs/architecture/
- [ ] T324 [P] Document environment variables in docs/configuration/environment.md
- [ ] T325 [P] Create troubleshooting guide in docs/troubleshooting.md
- [ ] T326 Update main README.md with project overview and quick start
**Monitoring & Operations:**
- [ ] T327 [P] Set up logging aggregation configuration
- [ ] T328 [P] Create health check endpoints in backend/app/api/health.py
- [ ] T329 [P] Add metrics collection (request counts, latencies) in backend/app/core/monitoring.py
- [ ] T330 [P] Create database backup script in scripts/backup-db.sh
- [ ] T331 [P] Create image backup script in scripts/backup-images.sh
**Deliverables:**
- Complete Nix deployment config
- All documentation complete
- Monitoring configured
- Backup procedures established
---
## Dependency Graph (User Story Completion Order)
```
Phase 1: Setup
↓
Phase 2: Foundational
↓
├─ Phase 3: US1 (Auth) ────────────────┐
│ ↓
├─ Phase 4: US2 (Boards) ──────────────┤
│ ↓
├─ Phase 5: US3 (Upload) ──────────────┤
│ ↓
├─ Phase 6: US4 (Navigation) ───┐ │
│ ↓ │
└─ Phase 7: US5 (Positioning) ──┴──────┤
↓
┌─ Phase 8: US6 (Transforms) ──────────┤
│ ↓
├─ Phase 9: US7 (Multi-Select) ───────┤
│ ↓
├─ Phase 10: US8 (Clipboard) ─────────┤
│ ↓
├─ Phase 11: (Z-Order - part of US5) ─┤
│ ↓
├─ Phase 12: US9 (Alignment) ─────────┤
│ ↓
├─ Phase 13: US10 (Groups) ───────────┤
│ ↓
├─ Phase 14: US11 (Sharing) ──────────┤
│ ↓
├─ Phase 15: US12 (Export) ───────────┤
│ ↓
├─ Phase 16: US13 (Quality) ──────────┤
│ ↓
├─ Phase 17: US14 (Library) ──────────┤
│ ↓
├─ Phase 18: US15 (Palette) ──────────┤
│ ↓
├─ Phase 19: US16 (Focus) ────────────┤
│ ↓
├─ Phase 20: US17 (Slideshow) ────────┤
│ ↓
└─ Phase 21: US18 (Auto-Arrange) ─────┘
↓
┌──────────────────────────────────────┤
│ ↓
├─ Phase 22: Performance ─────────────┤
│ ↓
├─ Phase 23: Testing ─────────────────┤
│ ↓
├─ Phase 24: Accessibility ───────────┤
│ ↓
└─ Phase 25: Deployment ──────────────┘
```
**Key Dependencies:**
- US1 (Auth) blocks US2 (Boards) - need auth before creating boards
- US2 (Boards) blocks US3 (Upload) - need boards to upload images to
- US3 (Upload) blocks US4-US18 - need images before manipulating them
- US4 (Navigation) + US5 (Positioning) run in parallel
- US6-US18 are mostly independent (can parallelize)
---
## Parallel Execution Examples
### Week 1 (Setup) - 13 Parallel Tasks
```bash
# All [P] tasks in Phase 1 can run simultaneously
T002, T003, T004, T006, T008, T010, T011, T012, T013, T014, T016, T019
```
### Week 2 (Auth) - Backend & Frontend in Parallel
```bash
# Backend team:
T036, T037, T045, T046, T047 # Models, schemas, tests
# Frontend team:
T048, T049, T053, T054, T055 # Pages, components, tests
# Both teams work simultaneously on US1
```
### Week 5-6 (Canvas Foundation) - Full Parallel
```bash
# Canvas controls (US4):
T101, T102, T103 # Pan, zoom, rotate all independent
# Position & selection (US5):
T111, T112, T113 # Can work on different aspects
# Tests:
T109, T118, T119, T131 # All test writing can be parallel
```
---
## Implementation Strategy
### MVP Scope (Minimum Viable Product)
**Critical Path (Must-Have for Beta):**
- Phase 1-2: Setup & Foundation
- Phase 3: US1 (Auth)
- Phase 4: US2 (Boards)
- Phase 5: US3 (Upload)
- Phase 6-7: US4-US5 (Canvas basics)
- Phase 8: US6 (Transformations)
**Total for MVP: ~120 tasks (Weeks 1-8)**
This gives you a functional app where users can:
- Register and login
- Create boards
- Upload images
- Arrange images on canvas
- Apply basic transformations
### Full Feature Set (v1.0 Release)
Add remaining phases 9-25 for complete feature set per specification.
**Total: All 331 tasks (Weeks 1-16)**
### Incremental Delivery
Each user story phase is independently testable:
1. Complete phase (all tasks done)
2. Run phase tests (verify acceptance criteria)
3. Deploy to staging
4. Get user feedback
5. Move to next phase
This allows for continuous delivery and early user validation.
---
## Task Completion Checklist
Before marking any task complete:
- [ ] Code changes committed with clear message
- [ ] Tests written and passing (if applicable)
- [ ] Linter/type checker passing
- [ ] Documentation updated (if public API)
- [ ] Code review completed (if applicable)
- [ ] Constitutional principles satisfied:
- Code quality (type hints, no duplication)
- Testing (coverage maintained)
- UX (error handling, accessibility)
- Performance (no regressions)
---
## Progress Tracking
### By Phase (19 Phases Total)
- [ ] Phase 1: Setup (T001-T020) - 20 tasks
- [ ] Phase 2: Foundational (T021-T035) - 15 tasks
- [ ] Phase 3: US1 Auth (T036-T055) - 20 tasks
- [ ] Phase 4: US2 Boards (T056-T075) - 20 tasks
- [ ] Phase 5: US3 Upload (T076-T099) - 24 tasks
- [ ] Phase 6: US4 Navigation (T100-T110) - 11 tasks
- [ ] Phase 7: US5 Positioning (T111-T121) - 11 tasks
- [ ] Phase 8: US6 Transforms (T122-T133) - 12 tasks
- [ ] Phase 9: US7 Multi-Select (T134-T144) - 11 tasks
- [ ] Phase 10: US8 Clipboard (T145-T154) - 10 tasks
- [ ] Phase 11: Z-Order (T155-T162) - 8 tasks
- [ ] Phase 12: US9 Alignment (T163-T171) - 9 tasks
- [ ] Phase 13: US10 Groups (T172-T188) - 17 tasks
- [ ] Phase 14: US11 Sharing (T189-T207) - 19 tasks
- [ ] Phase 15: US12 Export (T208-T219) - 12 tasks
- [ ] Phase 16: US13 Quality (T220-T229) - 10 tasks
- [ ] Phase 17: US14 Library (T230-T241) - 12 tasks
- [ ] Phase 18: US15 Palette (T242-T248) - 7 tasks
- [ ] Phase 19: US16 Focus (T249-T256) - 8 tasks
- [ ] Phase 20: US17 Slideshow (T257-T263) - 7 tasks
- [ ] Phase 21: US18 Arrange (T264-T270) - 7 tasks
- [ ] Phase 22: Performance (T271-T280) - 10 tasks
- [ ] Phase 23: Testing (T281-T295) - 15 tasks
- [ ] Phase 24: Accessibility (T296-T308) - 13 tasks
- [ ] Phase 25: Deployment (T309-T331) - 23 tasks
**Total: 331 tasks**
### By User Story (18 Stories from Spec)
| Story | Requirement | Priority | Tasks | Status |
|-------|-------------|----------|-------|--------|
| US1 | FR1: Authentication | Critical | 20 | ⬜ |
| US2 | FR2: Board Management | Critical | 20 | ⬜ |
| US3 | FR4: Image Upload | Critical | 24 | ⬜ |
| US4 | FR12: Canvas Navigation | Critical | 11 | ⬜ |
| US5 | FR5: Image Positioning | Critical | 19 | ⬜ |
| US6 | FR8: Transformations | Critical | 12 | ⬜ |
| US7 | FR9: Multi-Selection | High | 11 | ⬜ |
| US8 | FR10: Clipboard Ops | High | 10 | ⬜ |
| US9 | FR6: Alignment | High | 9 | ⬜ |
| US10 | FR7: Grouping | High | 17 | ⬜ |
| US11 | FR3: Sharing | High | 19 | ⬜ |
| US12 | FR15: Export | High | 12 | ⬜ |
| US13 | FR16: Quality | High | 10 | ⬜ |
| US14 | FR17: Library | Medium | 12 | ⬜ |
| US15 | FR11: Palette | Medium | 7 | ⬜ |
| US16 | FR13: Focus | Medium | 8 | ⬜ |
| US17 | FR14: Slideshow | Low | 7 | ⬜ |
| US18 | FR18: Auto-Arrange | Low | 7 | ⬜ |
**Critical Stories: 126 tasks**
**High Priority Stories: 88 tasks**
**Medium Priority Stories: 27 tasks**
**Low Priority Stories: 14 tasks**
**Infrastructure/Polish: 76 tasks**
---
## Notes
### Parallel Development Opportunities
**Week 1:** 13 setup tasks can run in parallel
**Week 2:** Backend + Frontend teams work independently on US1
**Week 3-4:** Backend + Frontend can work on different user stories
**Week 5-12:** Each user story is independent - can parallelize across team
**Week 13-16:** Most polish/deployment tasks are parallelizable
### Test Coverage Strategy
- Unit tests written alongside implementation (same phase)
- Integration tests after unit tests pass
- E2E tests in Phase 23 (Week 15)
- Coverage tracked continuously in CI
- 80% threshold enforced before merge
### Code Review Process
- All tasks require code review before marking complete
- Constitution checklist verified during review
- Performance impact assessed for canvas/API changes
- Security review for auth/sharing features
---
## References
- **Specification:** [spec.md](./spec.md) - 18 functional requirements
- **Implementation Plan:** [plan.md](./plan.md) - 16-week timeline
- **Data Model:** [data-model.md](./data-model.md) - Database schema
- **API Contracts:** [contracts/api.yaml](./contracts/api.yaml) - OpenAPI spec
- **Quick Start:** [quickstart.md](./quickstart.md) - Getting started guide
- **Nix Verification:** [VERIFICATION-COMPLETE.md](./VERIFICATION-COMPLETE.md) - Package verification
---
**Status:** Ready for execution
**Next Action:** Begin Phase 1 (T001-T020) - Project setup
**Estimated Completion:** 16 weeks from start
Reference in New Issue View Git Blame Copy Permalink