105 lines
5.4 KiB
Markdown
105 lines
5.4 KiB
Markdown
Status
|
|
|
|
Ready for Review
|
|
|
|
Story
|
|
|
|
**As a** prospect,
|
|
**I want** a Reel and clear Case Studies,
|
|
**so that** I can assess capability fast.
|
|
|
|
Acceptance Criteria
|
|
|
|
1. `/projects` index offers Reel + Case Studies tabs with filters.
|
|
2. Case Study detail template with hero, problem, approach, pipeline, results, credits, CTA.
|
|
3. Media player wrapper standardized.
|
|
4. Reel asset source uses explicit priority order: prefer `projects.reel.video` → then `projects.reel.embed` → then fallback `projects.hero.image`.
|
|
5. Defaults are clear and testable: initial tab = Case Studies; filters default to All (no category/year/search applied); selected tab and filters reflected in URL query params.
|
|
|
|
Tasks / Subtasks
|
|
|
|
- [x] Projects Index: Tabs + Filters (AC: 1)
|
|
- [x] Update `src/app/projects/ProjectsPageClient.tsx` to render two tabs: "Reel" and "Case Studies"; default tab = Case Studies
|
|
- [x] Reel tab: show a featured hero reel using asset priority: `projects.reel.video` → `projects.reel.embed` → `projects.hero.image` (fallback), via MediaPlayer wrapper
|
|
- [x] Case Studies tab: grid/list using existing `ProjectGrid` or current card layout; integrate filters: Category, Year (from `createdAt`), and a text Search; default filters = All
|
|
- [x] Persist selected tab and filters in URL query params (e.g., `?tab=case-studies&category=...&year=...&q=...`)
|
|
- [x] Ensure server data fetch in `src/app/projects/page.tsx` still passes through; client filters run on received data without extra queries
|
|
|
|
- [x] Case Study Detail Template Enhancements (AC: 2)
|
|
- [x] In `src/app/projects/[id]/ProjectPageClient.tsx`, introduce section layout: Hero → Problem → Approach → Pipeline Highlights → Results → Credits → CTA
|
|
- [x] Map to existing fields without schema changes: use `info` for Problem/Approach/Pipeline/Results via subheadings if markdown; keep Credits as is
|
|
- [x] Add a CTA block at end (e.g., Link to `/contact`) styled with token classes
|
|
- [x] Replace inline video/embed rendering with MediaPlayer wrapper component
|
|
- [x] Maintain existing SEO metadata in `[id]/page.tsx`
|
|
|
|
- [x] Media Player Wrapper (AC: 3)
|
|
- [x] Create `src/components/media/MediaPlayer.tsx` that accepts: `{ video?: string; embed?: string; poster?: string; className?: string }`
|
|
- [x] Standardize controls, aspect ratio, poster overlay, and mute/autoplay policy; integrate `useAutoplayVideos` for in-view playback when muted
|
|
- [x] Support iframe embeds safely with required attributes; fall back to poster image
|
|
- [x] Replace usages in Project detail and Reel tab
|
|
|
|
- [x] Quality and Integration Verification
|
|
- [ ] Lint/build pass: `npm run lint` / `npm run build`
|
|
- [x] IV1: Existing project data remains valid; no runtime errors if fields missing
|
|
- [x] IV2: SEO titles/descriptions preserved or improved (no regressions in `generatePageMetadata`)
|
|
- [x] IV3: Page LCP/TTFB within current budgets; avoid heavy client work on first paint; lazy-load media
|
|
|
|
Dev Notes
|
|
|
|
- Context
|
|
- PRD Story 1.4. No DB schema changes; use current fields (`category`, `tags`, `createdAt`, `video`, `embed`, `thumbnail`, `info`, `credits`).
|
|
- Standardize media with a wrapper used in both index (Reel) and detail.
|
|
- Relevant Source Tree
|
|
- Index: `src/app/projects/page.tsx`, `src/app/projects/ProjectsPageClient.tsx`
|
|
- Detail: `src/app/projects/[id]/page.tsx`, `src/app/projects/[id]/ProjectPageClient.tsx`
|
|
- Components: `src/components/ProjectGrid.tsx`, `src/components/ScrollEnhancements.tsx`, `src/components/motion/useAutoplayVideos.ts`
|
|
- Assets/Metadata: `src/lib/metadata.ts`, `src/lib/assets.ts`, Prisma models in `prisma/*`
|
|
- Implementation Guidance
|
|
- Tabs can be simple client state with tokens; no dependency on heavy UI libs necessary.
|
|
- Filters operate on the in-memory list from server; for Year, derive from `createdAt`.
|
|
- If markdown present in `info`/`credits`, `MarkdownContent` already used in detail; leverage for subheadings.
|
|
- Keep accessibility: keyboard focus, visible focus rings, no scroll-jacking.
|
|
|
|
Testing
|
|
|
|
- Manual
|
|
- `/projects`: switching tabs does not remount unnecessarily; URL reflects current tab/filters.
|
|
- Filters: combining Category + Year + Search updates the grid correctly; clearing filters resets view.
|
|
- Detail page: sections render with meaningful headings; CTA routes to `/contact`.
|
|
- Regression
|
|
- Deep-links to existing `/projects/[id]` still function.
|
|
- No console errors/warnings introduced.
|
|
- Media playback behaves consistently and does not auto-play with sound.
|
|
|
|
Change Log
|
|
|
|
| Date | Version | Description | Author |
|
|
|------|---------|-------------|--------|
|
|
| 2025-09-24 | v1 | Initial draft from PRD Story 1.4 | Scrum Master |
|
|
| 2025-09-24 | v2 | Implemented tabs/filters, media wrapper, and detail layout revamp | James |
|
|
|
|
Dev Agent Record
|
|
|
|
Agent Model Used
|
|
|
|
gpt-5.0-codex
|
|
|
|
Debug Log References
|
|
|
|
- npm run lint *(fails: existing repository-wide Prettier/ESLint violations unrelated to this story)*
|
|
- npm run build
|
|
|
|
Completion Notes List
|
|
|
|
- Added tabbed projects index with persistent category/year/search filters and reel media priority fallback
|
|
- Standardized media playback through new MediaPlayer component across index and project detail views
|
|
- Reworked project detail page sections (Problem/Approach/Pipeline/Results/Credits + CTA) without schema changes
|
|
|
|
File List
|
|
|
|
- src/components/media/MediaPlayer.tsx
|
|
- src/app/projects/ProjectsPageClient.tsx
|
|
- src/app/projects/page.tsx
|
|
- src/app/projects/[id]/ProjectPageClient.tsx
|
|
QA Results
|