prevthumb/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
2ead15a7fb10018c78306ca7a90500f71f7a942e
frontend/specs/002-youtube-design-preview/tasks.md
Andre bdb1759c81 feat: youtube preview
2026-01-29 21:05:41 -03:00

12 KiB
Raw Blame History

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

  • T001 [P] Add new type definitions (PreviewMode, ThemeMode, VideoMetadata, UploadedThumbnail) in frontend/src/types/index.ts
  • T002 [P] Create YouTube style constants module with extracted CSS tokens in frontend/src/lib/youtube-styles.ts
  • T003 [P] Update CSS variables with precise YouTube values from research in frontend/src/index.css
  • T004 [P] Create useLocalStorage hook for state persistence in frontend/src/hooks/useLocalStorage.ts
  • 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

  • T006 Update previewStore with new state shape (themeMode, persistence) in frontend/src/store/previewStore.ts
  • T007 Add localStorage persistence integration to previewStore in frontend/src/store/previewStore.ts
  • T008 [P] Create ThemeToggle component with light/dark switch in frontend/src/components/ThemeToggle.tsx
  • T009 [P] Create PreviewModeSelector component (desktop/mobile/sidebar) in frontend/src/components/PreviewModeSelector.tsx
  • T010 Update ThumbnailUploader with 5MB limit and format validation (JPG/PNG/WebP) in frontend/src/components/ThumbnailUploader.tsx
  • 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

  • T012 [US1] Refactor YouTubeVideoCard desktop variant with exact YouTube dimensions (360x202px, 12px radius) in frontend/src/components/YouTubeVideoCard.tsx
  • T013 [US1] Update desktop title typography (Roboto 16px/500, line-height 22px, 2-line clamp) in frontend/src/components/YouTubeVideoCard.tsx
  • T014 [US1] Update channel name and metadata typography (12px, #606060/#aaaaaa) in frontend/src/components/YouTubeVideoCard.tsx
  • T015 [US1] Update avatar display (36x36px circle) in frontend/src/components/YouTubeVideoCard.tsx
  • 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
  • T017 [US1] Add hover states (watch later, add to queue icons on hover) in frontend/src/components/YouTubeVideoCard.tsx
  • T018 [US1] Add metadata spacing (12px thumbnail-to-meta gap, 12px avatar-to-text gap) in frontend/src/components/YouTubeVideoCard.tsx
  • T019 [US1] Integrate desktop preview with ThemeToggle for light/dark mode switching in frontend/src/pages/ToolPage.tsx
  • 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

  • T021 [US2] Update YouTubeVideoCard mobile variant with full-width thumbnail (100%, 16:9 ratio, 0px radius) in frontend/src/components/YouTubeVideoCard.tsx
  • T022 [US2] Update mobile metadata layout (avatar 36x36, title below thumbnail) in frontend/src/components/YouTubeVideoCard.tsx
  • T023 [US2] Update mobile typography (match YouTube mobile app sizes) in frontend/src/components/YouTubeVideoCard.tsx
  • T024 [US2] Update mobile spacing (gap between metadata elements) in frontend/src/components/YouTubeVideoCard.tsx
  • T025 [US2] Add mobile container wrapper with max-width constraint in frontend/src/pages/ToolPage.tsx
  • 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

  • T027 [US3] Update YouTubeVideoCard sidebar variant with exact dimensions (168x94px thumbnail, 8px radius) in frontend/src/components/YouTubeVideoCard.tsx
  • T028 [US3] Update sidebar horizontal layout (thumbnail left, metadata right) in frontend/src/components/YouTubeVideoCard.tsx
  • T029 [US3] Update sidebar title typography (14px/500, 2-line clamp) in frontend/src/components/YouTubeVideoCard.tsx
  • T030 [US3] Update sidebar metadata (channel name, views, time below title) in frontend/src/components/YouTubeVideoCard.tsx
  • T031 [US3] Update sidebar spacing (8px thumbnail-to-text gap, 8px between cards) in frontend/src/components/YouTubeVideoCard.tsx
  • T032 [US3] Remove avatar from sidebar variant (YouTube sidebar has no avatar) in frontend/src/components/YouTubeVideoCard.tsx
  • 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

  • T034 [P] [US4] Create Playwright configuration file in frontend/playwright.config.ts
  • T035 [P] [US4] Create visual test utilities (screenshot comparison, diff generation) in frontend/tests/visual/utils.ts
  • T036 [P] [US4] Copy reference screenshots to test directory in frontend/tests/visual/reference/
  • T037 [US4] Create desktop visual test (light mode) in frontend/tests/visual/desktop.spec.ts
  • T038 [US4] Add desktop visual test (dark mode) in frontend/tests/visual/desktop.spec.ts
  • T039 [US4] Create mobile visual test (light/dark modes) in frontend/tests/visual/mobile.spec.ts
  • T040 [US4] Create sidebar visual test (light/dark modes) in frontend/tests/visual/sidebar.spec.ts
  • T041 [US4] Create reference screenshot capture script in scripts/capture-youtube-reference.ts
  • 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

  • T043 [P] Add responsive breakpoints matching YouTube (6→5→4→3→2→1 column) in frontend/src/components/PreviewGrid.tsx
  • T044 [P] Add edge case handling: non-standard aspect ratio thumbnails (crop to 16:9) in frontend/src/components/ThumbnailUploader.tsx
  • T045 [P] Add edge case handling: long titles (ellipsis truncation per mode) in frontend/src/components/YouTubeVideoCard.tsx
  • T046 [P] Add edge case handling: missing metadata ("No views", "Just now") in frontend/src/components/YouTubeVideoCard.tsx
  • T047 [P] Add localStorage cleanup (limit 10 recent thumbnails) in frontend/src/store/previewStore.ts
  • T048 Performance optimization: lazy load thumbnails, optimize re-renders in frontend/src/components/YouTubeVideoCard.tsx
  • 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

# 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

# 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/
Reference in New Issue View Git Blame Copy Permalink