64 lines
1.8 KiB
Markdown
64 lines
1.8 KiB
Markdown
# 08. Build Discover Feed with Popular Shows
|
|
|
|
meta:
|
|
id: podcast-tui-app-08
|
|
feature: podcast-tui-app
|
|
priority: P1
|
|
depends_on: [07]
|
|
tags: [discover, popular-shows, solidjs, opentui]
|
|
|
|
objective:
|
|
- Create popular shows data structure
|
|
- Build discover page component
|
|
- Display trending shows with categories
|
|
- Implement category filtering
|
|
|
|
deliverables:
|
|
- `src/data/popular-shows.ts` with trending shows data
|
|
- `src/components/DiscoverPage.tsx` with discover UI
|
|
- `src/components/CategoryFilter.tsx` with category buttons
|
|
|
|
steps:
|
|
- Create `src/data/popular-shows.ts`:
|
|
- Array of popular podcasts with metadata
|
|
- Categories: Technology, Business, Science, Entertainment
|
|
- Reverse chronological ordering (newest first)
|
|
- Include feed URLs and descriptions
|
|
- Create `src/components/DiscoverPage.tsx`:
|
|
- Title header
|
|
- Category filter buttons
|
|
- Grid/list display of popular shows
|
|
- Show details on selection
|
|
- Add to feed button
|
|
- Create `src/components/CategoryFilter.tsx`:
|
|
- Category button group
|
|
- Active category highlighting
|
|
- Filter logic implementation
|
|
- Add discover page to "Discover" navigation tab
|
|
|
|
tests:
|
|
- Unit: Test popular shows data structure
|
|
- Unit: Test category filtering
|
|
- Integration: Test discover page displays correctly
|
|
- Integration: Test add to feed functionality
|
|
|
|
acceptance_criteria:
|
|
- Discover page displays popular shows
|
|
- Category filtering works correctly
|
|
- Shows are ordered reverse chronologically
|
|
- Clicking a show shows details
|
|
- Add to feed button works
|
|
|
|
validation:
|
|
- Run application and navigate to "Discover"
|
|
- Verify popular shows appear
|
|
- Click different categories
|
|
- Click a show and verify details
|
|
- Try add to feed
|
|
|
|
notes:
|
|
- Popular shows data can be static or fetched from sources
|
|
- If sources don't provide trending, use curated list
|
|
- Categories help users find shows by topic
|
|
- Use Flexbox for category filter layout
|