250 lines
12 KiB
Markdown
250 lines
12 KiB
Markdown
# Tasks: YouTube Design Preview Replica
|
|
|
|
**Input**: Design documents from `/specs/002-youtube-design-preview/`
|
|
**Prerequisites**: plan.md, spec.md, research.md, data-model.md, contracts/
|
|
|
|
**Tests**: Visual regression tests included as User Story 4 (P2) per specification requirements.
|
|
|
|
**Organization**: Tasks are grouped by user story to enable independent implementation and testing of each story.
|
|
|
|
## Format: `[ID] [P?] [Story] Description`
|
|
|
|
- **[P]**: Can run in parallel (different files, no dependencies)
|
|
- **[Story]**: Which user story this task belongs to (e.g., US1, US2, US3, US4)
|
|
- Include exact file paths in descriptions
|
|
|
|
## Path Conventions
|
|
|
|
- **Frontend**: `frontend/src/`
|
|
- **Tests**: `frontend/tests/visual/`
|
|
- **Scripts**: `scripts/`
|
|
|
|
---
|
|
|
|
## Phase 1: Setup (Shared Infrastructure)
|
|
|
|
**Purpose**: Project initialization, type definitions, and shared utilities
|
|
|
|
- [x] T001 [P] Add new type definitions (PreviewMode, ThemeMode, VideoMetadata, UploadedThumbnail) in `frontend/src/types/index.ts`
|
|
- [x] T002 [P] Create YouTube style constants module with extracted CSS tokens in `frontend/src/lib/youtube-styles.ts`
|
|
- [x] T003 [P] Update CSS variables with precise YouTube values from research in `frontend/src/index.css`
|
|
- [x] T004 [P] Create useLocalStorage hook for state persistence in `frontend/src/hooks/useLocalStorage.ts`
|
|
- [x] T005 Install Playwright as dev dependency: `cd frontend && npm install -D @playwright/test`
|
|
|
|
---
|
|
|
|
## Phase 2: Foundational (Blocking Prerequisites)
|
|
|
|
**Purpose**: Core infrastructure that MUST be complete before ANY user story can be implemented
|
|
|
|
**⚠️ CRITICAL**: No user story work can begin until this phase is complete
|
|
|
|
- [x] T006 Update previewStore with new state shape (themeMode, persistence) in `frontend/src/store/previewStore.ts`
|
|
- [x] T007 Add localStorage persistence integration to previewStore in `frontend/src/store/previewStore.ts`
|
|
- [x] T008 [P] Create ThemeToggle component with light/dark switch in `frontend/src/components/ThemeToggle.tsx`
|
|
- [x] T009 [P] Create PreviewModeSelector component (desktop/mobile/sidebar) in `frontend/src/components/PreviewModeSelector.tsx`
|
|
- [x] T010 Update ThumbnailUploader with 5MB limit and format validation (JPG/PNG/WebP) in `frontend/src/components/ThumbnailUploader.tsx`
|
|
- [x] T011 Add error messages for file validation failures in `frontend/src/components/ThumbnailUploader.tsx`
|
|
|
|
**Checkpoint**: Foundation ready - user story implementation can now begin in parallel
|
|
|
|
---
|
|
|
|
## Phase 3: User Story 1 - Desktop Video Preview (Priority: P1) 🎯 MVP
|
|
|
|
**Goal**: Pixel-perfect YouTube desktop grid layout preview with all metadata elements
|
|
|
|
**Independent Test**: Upload a thumbnail, select desktop mode, verify visual match with YouTube homepage grid card
|
|
|
|
### Implementation for User Story 1
|
|
|
|
- [x] T012 [US1] Refactor YouTubeVideoCard desktop variant with exact YouTube dimensions (360x202px, 12px radius) in `frontend/src/components/YouTubeVideoCard.tsx`
|
|
- [x] T013 [US1] Update desktop title typography (Roboto 16px/500, line-height 22px, 2-line clamp) in `frontend/src/components/YouTubeVideoCard.tsx`
|
|
- [x] T014 [US1] Update channel name and metadata typography (12px, #606060/#aaaaaa) in `frontend/src/components/YouTubeVideoCard.tsx`
|
|
- [x] T015 [US1] Update avatar display (36x36px circle) in `frontend/src/components/YouTubeVideoCard.tsx`
|
|
- [x] T016 [US1] Update duration badge styling (rgba(0,0,0,0.8), 12px/500, 4px radius, 3px 4px padding) in `frontend/src/components/YouTubeVideoCard.tsx`
|
|
- [x] T017 [US1] Add hover states (watch later, add to queue icons on hover) in `frontend/src/components/YouTubeVideoCard.tsx`
|
|
- [x] T018 [US1] Add metadata spacing (12px thumbnail-to-meta gap, 12px avatar-to-text gap) in `frontend/src/components/YouTubeVideoCard.tsx`
|
|
- [x] T019 [US1] Integrate desktop preview with ThemeToggle for light/dark mode switching in `frontend/src/pages/ToolPage.tsx`
|
|
- [x] T020 [US1] Add metadata editor UI for customizing title, channel, views, duration in `frontend/src/components/UserInfoInputs.tsx`
|
|
|
|
**Checkpoint**: Desktop preview should match YouTube homepage grid exactly - test with side-by-side comparison
|
|
|
|
---
|
|
|
|
## Phase 4: User Story 2 - Mobile Video Preview (Priority: P1)
|
|
|
|
**Goal**: Pixel-perfect YouTube mobile app layout preview with full-width thumbnails
|
|
|
|
**Independent Test**: Switch to mobile mode, verify full-width layout matches YouTube mobile app
|
|
|
|
### Implementation for User Story 2
|
|
|
|
- [x] T021 [US2] Update YouTubeVideoCard mobile variant with full-width thumbnail (100%, 16:9 ratio, 0px radius) in `frontend/src/components/YouTubeVideoCard.tsx`
|
|
- [x] T022 [US2] Update mobile metadata layout (avatar 36x36, title below thumbnail) in `frontend/src/components/YouTubeVideoCard.tsx`
|
|
- [x] T023 [US2] Update mobile typography (match YouTube mobile app sizes) in `frontend/src/components/YouTubeVideoCard.tsx`
|
|
- [x] T024 [US2] Update mobile spacing (gap between metadata elements) in `frontend/src/components/YouTubeVideoCard.tsx`
|
|
- [x] T025 [US2] Add mobile container wrapper with max-width constraint in `frontend/src/pages/ToolPage.tsx`
|
|
- [x] T026 [US2] Add responsive viewport simulation for mobile preview in `frontend/src/pages/ToolPage.tsx`
|
|
|
|
**Checkpoint**: Mobile preview should match YouTube mobile app - test on mobile device or devtools
|
|
|
|
---
|
|
|
|
## Phase 5: User Story 3 - Sidebar/Related Videos Preview (Priority: P2)
|
|
|
|
**Goal**: Pixel-perfect YouTube sidebar (related videos) preview with compact horizontal layout
|
|
|
|
**Independent Test**: Switch to sidebar mode, verify compact card layout matches YouTube watch page sidebar
|
|
|
|
### Implementation for User Story 3
|
|
|
|
- [x] T027 [US3] Update YouTubeVideoCard sidebar variant with exact dimensions (168x94px thumbnail, 8px radius) in `frontend/src/components/YouTubeVideoCard.tsx`
|
|
- [x] T028 [US3] Update sidebar horizontal layout (thumbnail left, metadata right) in `frontend/src/components/YouTubeVideoCard.tsx`
|
|
- [x] T029 [US3] Update sidebar title typography (14px/500, 2-line clamp) in `frontend/src/components/YouTubeVideoCard.tsx`
|
|
- [x] T030 [US3] Update sidebar metadata (channel name, views, time below title) in `frontend/src/components/YouTubeVideoCard.tsx`
|
|
- [x] T031 [US3] Update sidebar spacing (8px thumbnail-to-text gap, 8px between cards) in `frontend/src/components/YouTubeVideoCard.tsx`
|
|
- [x] T032 [US3] Remove avatar from sidebar variant (YouTube sidebar has no avatar) in `frontend/src/components/YouTubeVideoCard.tsx`
|
|
- [x] T033 [US3] Add sidebar list container with vertical stacking in `frontend/src/pages/ToolPage.tsx`
|
|
|
|
**Checkpoint**: Sidebar preview should match YouTube watch page related videos section
|
|
|
|
---
|
|
|
|
## Phase 6: User Story 4 - Visual Accuracy Validation with Playwright (Priority: P2)
|
|
|
|
**Goal**: Automated visual regression testing to ensure 98% match with YouTube reference screenshots
|
|
|
|
**Independent Test**: Run `npx playwright test` and verify all visual tests pass with 98% threshold
|
|
|
|
### Implementation for User Story 4
|
|
|
|
- [x] T034 [P] [US4] Create Playwright configuration file in `frontend/playwright.config.ts`
|
|
- [x] T035 [P] [US4] Create visual test utilities (screenshot comparison, diff generation) in `frontend/tests/visual/utils.ts`
|
|
- [x] T036 [P] [US4] Copy reference screenshots to test directory in `frontend/tests/visual/reference/`
|
|
- [x] T037 [US4] Create desktop visual test (light mode) in `frontend/tests/visual/desktop.spec.ts`
|
|
- [x] T038 [US4] Add desktop visual test (dark mode) in `frontend/tests/visual/desktop.spec.ts`
|
|
- [x] T039 [US4] Create mobile visual test (light/dark modes) in `frontend/tests/visual/mobile.spec.ts`
|
|
- [x] T040 [US4] Create sidebar visual test (light/dark modes) in `frontend/tests/visual/sidebar.spec.ts`
|
|
- [x] T041 [US4] Create reference screenshot capture script in `scripts/capture-youtube-reference.ts`
|
|
- [x] T042 [US4] Add npm script for visual tests: `"test:visual": "playwright test"` in `frontend/package.json`
|
|
|
|
**Checkpoint**: All visual tests should pass with 98%+ match against YouTube references
|
|
|
|
---
|
|
|
|
## Phase 7: Polish & Cross-Cutting Concerns
|
|
|
|
**Purpose**: Improvements that affect multiple user stories
|
|
|
|
- [x] T043 [P] Add responsive breakpoints matching YouTube (6→5→4→3→2→1 column) in `frontend/src/components/PreviewGrid.tsx`
|
|
- [x] T044 [P] Add edge case handling: non-standard aspect ratio thumbnails (crop to 16:9) in `frontend/src/components/ThumbnailUploader.tsx`
|
|
- [x] T045 [P] Add edge case handling: long titles (ellipsis truncation per mode) in `frontend/src/components/YouTubeVideoCard.tsx`
|
|
- [x] T046 [P] Add edge case handling: missing metadata ("No views", "Just now") in `frontend/src/components/YouTubeVideoCard.tsx`
|
|
- [x] T047 [P] Add localStorage cleanup (limit 10 recent thumbnails) in `frontend/src/store/previewStore.ts`
|
|
- [x] T048 Performance optimization: lazy load thumbnails, optimize re-renders in `frontend/src/components/YouTubeVideoCard.tsx`
|
|
- [x] T049 Run ESLint and fix any errors: `cd frontend && npm run lint`
|
|
- [ ] T050 Manual validation against quickstart.md test scenarios
|
|
|
|
---
|
|
|
|
## Dependencies & Execution Order
|
|
|
|
### Phase Dependencies
|
|
|
|
- **Setup (Phase 1)**: No dependencies - can start immediately
|
|
- **Foundational (Phase 2)**: Depends on Setup completion - BLOCKS all user stories
|
|
- **User Stories (Phase 3-6)**: All depend on Foundational phase completion
|
|
- User stories can then proceed in parallel (if staffed)
|
|
- Or sequentially in priority order (US1 → US2 → US3 → US4)
|
|
- **Polish (Phase 7)**: Depends on all user stories being complete
|
|
|
|
### User Story Dependencies
|
|
|
|
- **User Story 1 (P1)**: Can start after Foundational (Phase 2) - No dependencies on other stories
|
|
- **User Story 2 (P1)**: Can start after Foundational (Phase 2) - No dependencies on other stories
|
|
- **User Story 3 (P2)**: Can start after Foundational (Phase 2) - No dependencies on other stories
|
|
- **User Story 4 (P2)**: Can start after US1/US2/US3 have implementations to test
|
|
|
|
### Within Each User Story
|
|
|
|
- Core styling before hover states
|
|
- Layout before typography fine-tuning
|
|
- Component implementation before page integration
|
|
- Story complete before moving to next priority
|
|
|
|
### Parallel Opportunities
|
|
|
|
- All Setup tasks T001-T004 can run in parallel
|
|
- Foundational tasks T008, T009 can run in parallel
|
|
- User Stories 1, 2, 3 can be worked on in parallel after Foundational
|
|
- Visual test setup (T034-T036) can run in parallel
|
|
- All Polish tasks marked [P] can run in parallel
|
|
|
|
---
|
|
|
|
## Parallel Example: Setup Phase
|
|
|
|
```bash
|
|
# Launch all setup tasks in parallel:
|
|
Task: "Add new type definitions in frontend/src/types/index.ts"
|
|
Task: "Create YouTube style constants in frontend/src/lib/youtube-styles.ts"
|
|
Task: "Update CSS variables in frontend/src/index.css"
|
|
Task: "Create useLocalStorage hook in frontend/src/hooks/useLocalStorage.ts"
|
|
```
|
|
|
|
## Parallel Example: User Stories After Foundational
|
|
|
|
```bash
|
|
# With multiple developers after Phase 2:
|
|
Developer A: User Story 1 (Desktop) - T012-T020
|
|
Developer B: User Story 2 (Mobile) - T021-T026
|
|
Developer C: User Story 3 (Sidebar) - T027-T033
|
|
# Then User Story 4 (Visual Tests) once implementations exist
|
|
```
|
|
|
|
---
|
|
|
|
## Implementation Strategy
|
|
|
|
### MVP First (User Story 1 Only)
|
|
|
|
1. Complete Phase 1: Setup (T001-T005)
|
|
2. Complete Phase 2: Foundational (T006-T011)
|
|
3. Complete Phase 3: User Story 1 - Desktop (T012-T020)
|
|
4. **STOP and VALIDATE**: Side-by-side comparison with YouTube
|
|
5. Deploy/demo if ready
|
|
|
|
### Incremental Delivery
|
|
|
|
1. Setup + Foundational → Foundation ready
|
|
2. Add User Story 1 (Desktop) → Test independently → Demo (MVP!)
|
|
3. Add User Story 2 (Mobile) → Test independently → Demo
|
|
4. Add User Story 3 (Sidebar) → Test independently → Demo
|
|
5. Add User Story 4 (Visual Tests) → Automated validation
|
|
6. Polish phase → Production ready
|
|
|
|
### Parallel Team Strategy
|
|
|
|
With multiple developers:
|
|
|
|
1. Team completes Setup + Foundational together
|
|
2. Once Foundational is done:
|
|
- Developer A: User Story 1 (Desktop)
|
|
- Developer B: User Story 2 (Mobile)
|
|
- Developer C: User Story 3 (Sidebar)
|
|
3. All developers: User Story 4 (Visual Tests)
|
|
4. Team: Polish phase
|
|
|
|
---
|
|
|
|
## Notes
|
|
|
|
- [P] tasks = different files, no dependencies
|
|
- [Story] label maps task to specific user story for traceability
|
|
- Each user story should be independently completable and testable
|
|
- Commit after each task or logical group
|
|
- Stop at any checkpoint to validate story independently
|
|
- YouTube CSS values from research.md are the source of truth
|
|
- Reference screenshots in specs/002-youtube-design-preview/reference/
|