How lc-vidlab/vidlab-fe works
Vidlab is a YouTube video-discovery web app. Its main journey is home feed or search, followed by a video detail page with embedded playback, YouTube information and related videos; viewers can also read YouTube comments and manage separate anonymous comments stored by Vidlab. The graph preserves feed, search, watch, YouTube access and comment-storage stages. Several watch and API client implementations were not excerpted, so those connections are included only where the README or source index documents them.
Main entry points: page.tsx Search route · comments/service.ts Comment service · youtube/service.ts YouTube service · WatchLayout.tsx Watch layout
Components 31
Video discovery
- Home route
src/app/page.tsx - Feed page
src/features/feed/components/FeedPage.tsx - Feed client API
src/features/feed/api.ts - Feed endpoint
src/app/api/feed/route.ts - Feed loader
src/features/feed/load-feed.ts - Search route
src/app/results/page.tsx - Search results
src/features/search/components/SearchResultList.tsx - Search client API
src/features/search/api.ts - Search bar
src/features/search/components/SearchBar.tsx - Search filters
src/features/search/lib/filters.ts
Video watch
- Watch route
src/app/watch/[id]/page.tsx - Watch layout
src/features/watch/components/WatchLayout.tsx - Video player
src/features/watch/components/VideoPlayer.tsx - Video loader
src/features/watch/server/load-video.ts - Related videos
src/features/watch/components/RelatedVideos.tsx
YouTube access
- YouTube service
src/lib/youtube/service.ts - Live API client
src/lib/youtube/live.ts - Mock service
src/lib/youtube/mock.ts
Anonymous comments
- Comment section
src/features/watch/components/CommentSection.tsx - Comment queries
src/features/watch/hooks/useComments.ts - Comment client API
src/features/watch/api/comments.ts - Comment endpoints
src/app/api/comments/route.ts - Delete endpoint
src/app/api/comments/[id]/route.ts - Comment service
src/lib/comments/service.ts - Comment rules
src/lib/comments/rules.ts
Comment storage
- Postgres store
src/lib/comments/postgres.ts - Memory store
src/lib/comments/mock.ts - Database client
src/lib/db/client.ts
Other components
- Viewer
- YouTube Data API
- Postgres database
Connections 36
- Viewer → Home route: opens
- Home route → Feed page: renders
src/app/page.tsx - Feed page → Feed client API: requests pages
src/features/feed/components/FeedPage.tsx - Feed client API → Feed endpoint: fetches
- Feed endpoint → Feed loader: calls
src/app/api/feed/route.ts - Feed loader → YouTube service: loads videos
src/features/feed/load-feed.ts - Viewer → Search route: searches
- Search route → Search results: renders
src/app/results/page.tsx - Search route → Search filters: reads filters
src/app/results/page.tsx - Search results → Search client API: fetches pages
src/features/search/components/SearchResultList.tsx - Search results → Search filters: applies period
src/features/search/components/SearchResultList.tsx - Search bar → Search route: builds URL
- Search client API → Search route: fetches
- Search route → Search results: shows results
src/app/results/page.tsx - Viewer → Watch route: opens video
- Watch route → Watch layout: renders
- Watch route → Video loader: loads details
- Watch layout → Video player: renders
- Watch layout → Related videos: shows related
- Video loader → YouTube service: loads video
- Related videos → YouTube service: requests videos
- YouTube service → Live API client: dispatches live mode
src/lib/youtube/service.ts - YouTube service → Mock service: dispatches mock mode
src/lib/youtube/service.ts - Live API client → YouTube Data API: calls API
- Viewer → Comment section: manages comments
- Watch layout → Comment section: renders
- Comment section → Comment queries: uses queries
- Comment queries → Comment client API: requests comments
src/features/watch/hooks/useComments.ts - Comment client API → Comment endpoints: calls endpoints
- Comment endpoints → Comment service: lists or creates
src/app/api/comments/route.ts - Delete endpoint → Comment service: deletes
src/app/api/comments/[id]/route.ts - Comment service → Comment rules: validates
src/lib/comments/service.ts - Comment service → Postgres store: selects configured store
src/lib/comments/service.ts - Comment service → Memory store: selects configured store
src/lib/comments/service.ts - Postgres store → Database client: uses connection
src/lib/comments/postgres.ts - Database client → Postgres database: connects
src/lib/db/client.ts