Experimental Sequence 03
This page is constructed from YogaTube-Complete-Documentation.html and the accompanying diagrams/screenshots. It captures architecture, runtime behavior, API contracts, state/effect logic, and responsive UI walkthroughs.
YogaTube is a route-driven video discovery app that connects category browsing, search, video detail, and channel detail in one consistent interaction model.
Category browsing in the home feed
Keyword search with route-based URLs
Video playback with statistics and related content
Channel profile visualization with recent uploads
Responsive desktop/mobile behavior with a shared design language
Step 1
Application mounts, Router initializes, and Navbar remains persistent.
Step 2
Home feed starts with selectedCategory = New, then requests search results.
Step 3
User category click updates selectedCategory and re-runs Feed effect.
Step 4
Search form submit navigates to /search/:searchTerm and triggers SearchFeed effect.
Step 5
Video card click navigates to /video/:id, where metadata and related videos are fetched.
Step 6
Channel link click navigates to /channel/:id, where channel profile and uploads are fetched.
Primary Route Mapping
| Route | Page Component | Main Responsibilities |
|---|---|---|
| / | Feed | Category selection, feed fetching, and card-grid rendering |
| /search/:searchTerm | SearchFeed | Term-based search and shared card rendering |
| /video/:id | VideoDetail | ReactPlayer embedding, metadata/statistics, and related content |
| /channel/:id | ChannelDetail | Channel profile info plus latest uploads |
YouTube API Integration
Base URL: https://youtube-v31.p.rapidapi.com with x-rapidapi-host and x-rapidapi-key headers read from environment variables. Request logic is centralized to keep route components focused on state and rendering.
| Component | Endpoint Pattern | Data Used In UI |
|---|---|---|
| Feed | search?part=snippet&q={category}&maxResults=50 | thumbnail, title, and channel metadata for feed cards |
| SearchFeed | search?part=snippet&q={searchTerm}&maxResults=50 | search result cards with the same normalized card model |
| VideoDetail | videos?part=snippet,statistics&id={videoId} | title, channel metadata, views, likes, and player context |
| VideoDetail | search?part=snippet&relatedToVideoId={videoId}&type=video&maxResults=35 | related video recommendation list |
| ChannelDetail | channels?part=snippet,statistics&id={channelId} | avatar, title, and subscriber metrics |
| ChannelDetail | search?channelId={channelId}&part=snippet&order=date&type=video&maxResults=35 | latest uploads for selected channel |
State and Effect Map
| Component | State | Effect Trigger | Primary Render Output |
|---|---|---|---|
| SearchBar | searchTerm | submit event | URL navigation to /search/:searchTerm |
| Feed | selectedCategory, videos | selectedCategory change | category-aware feed cards |
| SearchFeed | videos | searchTerm route param | search result card grid |
| VideoDetail | videoDetail, videos | id route param | player panel with related videos |
| ChannelDetail | channelDetail, videos | id route param | channel profile plus uploads |
Diagrams From Documentation
Screenshot Walkthrough (01-12)
Captured with automated Playwright navigation across desktop and mobile flows.
Application build and preview flow:
Add user-facing API error states for quota and connectivity failures.
Add request caching and deduplication using React Query or SWR.
Introduce a backend proxy layer for stronger API-key isolation.