# lc-vidlab/vidlab-fe architecture

> Architecture diagram of the GitHub repository lc-vidlab/vidlab-fe, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-13). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/lc-vidlab/vidlab-fe
- Repository: https://github.com/lc-vidlab/vidlab-fe

## Overview

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: [`src/app/results/page.tsx`](https://github.com/lc-vidlab/vidlab-fe/blob/develop/src/app/results/page.tsx) (Search route), [`src/lib/comments/service.ts`](https://github.com/lc-vidlab/vidlab-fe/blob/develop/src/lib/comments/service.ts) (Comment service), [`src/lib/youtube/service.ts`](https://github.com/lc-vidlab/vidlab-fe/blob/develop/src/lib/youtube/service.ts) (YouTube service), [`src/features/watch/components/WatchLayout.tsx`](https://github.com/lc-vidlab/vidlab-fe/blob/develop/src/features/watch/components/WatchLayout.tsx) (Watch layout)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_discovery["Video discovery"]
  node_home["Home route<br/>[page.tsx]"]
  node_feed["Feed page<br/>[FeedPage.tsx]"]
  node_feedclient["Feed client API<br/>[api.ts]"]
  node_feedroute["Feed endpoint<br/>[route.ts]"]
  node_feedloader["Feed loader<br/>[load-feed.ts]"]
  node_searchroute["Search route<br/>[page.tsx]"]
  node_searchui["Search results"]
  node_searchapi["Search client API<br/>[api.ts]"]
  node_searchbar["Search bar<br/>[SearchBar.tsx]"]
  node_filters["Search filters<br/>[filters.ts]"]
end

subgraph group_watch["Video watch"]
  node_watchroute["Watch route<br/>[page.tsx]"]
  node_watchlayout["Watch layout<br/>[WatchLayout.tsx]"]
  node_player["Video player<br/>[VideoPlayer.tsx]"]
  node_videoloader["Video loader<br/>[load-video.ts]"]
  node_related["Related videos<br/>[RelatedVideos.tsx]"]
end

subgraph group_youtube["YouTube access"]
  node_ytservice["YouTube service<br/>[service.ts]"]
  node_ytlive["Live API client<br/>[live.ts]"]
  node_ytmock["Mock service<br/>[mock.ts]"]
end

subgraph group_comments["Anonymous comments"]
  node_commentui["Comment section<br/>[CommentSection.tsx]"]
  node_commenthook["Comment queries<br/>[useComments.ts]"]
  node_commentclient["Comment client API<br/>[comments.ts]"]
  node_commentroutes["Comment endpoints<br/>[route.ts]"]
  node_commentdelete["Delete endpoint<br/>[route.ts]"]
  node_commentservice["Comment service<br/>[service.ts]"]
  node_commentrules["Comment rules<br/>[rules.ts]"]
end

subgraph group_storage["Comment storage"]
  node_commentpg["Postgres store<br/>[postgres.ts]"]
  node_commentmock["Memory store<br/>[mock.ts]"]
  node_dbclient["Database client<br/>[client.ts]"]
end

node_viewer(("Viewer"))
node_youtube["YouTube Data API"]
node_database[("Postgres database")]

node_viewer -->|"opens"| node_home
node_home -->|"renders"| node_feed
node_feed -->|"requests pages"| node_feedclient
node_feedclient -.->|"fetches"| node_feedroute
node_feedroute -->|"calls"| node_feedloader
node_feedloader -->|"loads videos"| node_ytservice
node_viewer -->|"searches"| node_searchroute
node_searchroute -->|"renders"| node_searchui
node_searchroute -->|"reads filters"| node_filters
node_searchui -->|"fetches pages"| node_searchapi
node_searchui -->|"applies period"| node_filters
node_searchbar -->|"builds URL"| node_searchroute
node_searchapi -.->|"fetches"| node_searchroute
node_searchroute -->|"shows results"| node_searchui
node_viewer -->|"opens video"| node_watchroute
node_watchroute -->|"renders"| node_watchlayout
node_watchroute -.->|"loads details"| node_videoloader
node_watchlayout -->|"renders"| node_player
node_watchlayout -->|"shows related"| node_related
node_videoloader -.->|"loads video"| node_ytservice
node_related -.->|"requests videos"| node_ytservice
node_ytservice -->|"dispatches live mode"| node_ytlive
node_ytservice -->|"dispatches mock mode"| node_ytmock
node_ytlive -.->|"calls API"| node_youtube
node_viewer -->|"manages comments"| node_commentui
node_watchlayout -->|"renders"| node_commentui
node_commentui -.->|"uses queries"| node_commenthook
node_commenthook -->|"requests comments"| node_commentclient
node_commentclient -->|"calls endpoints"| node_commentroutes
node_commentroutes -->|"lists or creates"| node_commentservice
node_commentdelete -->|"deletes"| node_commentservice
node_commentservice -->|"validates"| node_commentrules
node_commentservice -->|"selects configured store"| node_commentpg
node_commentservice -->|"selects configured store"| node_commentmock
node_commentpg -->|"uses connection"| node_dbclient
node_dbclient -->|"connects"| node_database

click node_home "https://github.com/lc-vidlab/vidlab-fe/blob/develop/src/app/page.tsx"
click node_feed "https://github.com/lc-vidlab/vidlab-fe/blob/develop/src/features/feed/components/FeedPage.tsx"
click node_feedclient "https://github.com/lc-vidlab/vidlab-fe/blob/develop/src/features/feed/api.ts"
click node_feedroute "https://github.com/lc-vidlab/vidlab-fe/blob/develop/src/app/api/feed/route.ts"
click node_feedloader "https://github.com/lc-vidlab/vidlab-fe/blob/develop/src/features/feed/load-feed.ts"
click node_searchroute "https://github.com/lc-vidlab/vidlab-fe/blob/develop/src/app/results/page.tsx"
click node_searchui "https://github.com/lc-vidlab/vidlab-fe/blob/develop/src/features/search/components/SearchResultList.tsx"
click node_searchapi "https://github.com/lc-vidlab/vidlab-fe/blob/develop/src/features/search/api.ts"
click node_searchbar "https://github.com/lc-vidlab/vidlab-fe/blob/develop/src/features/search/components/SearchBar.tsx"
click node_filters "https://github.com/lc-vidlab/vidlab-fe/blob/develop/src/features/search/lib/filters.ts"
click node_watchroute "https://github.com/lc-vidlab/vidlab-fe/blob/develop/src/app/watch/%5Bid%5D/page.tsx"
click node_watchlayout "https://github.com/lc-vidlab/vidlab-fe/blob/develop/src/features/watch/components/WatchLayout.tsx"
click node_player "https://github.com/lc-vidlab/vidlab-fe/blob/develop/src/features/watch/components/VideoPlayer.tsx"
click node_videoloader "https://github.com/lc-vidlab/vidlab-fe/blob/develop/src/features/watch/server/load-video.ts"
click node_related "https://github.com/lc-vidlab/vidlab-fe/blob/develop/src/features/watch/components/RelatedVideos.tsx"
click node_ytservice "https://github.com/lc-vidlab/vidlab-fe/blob/develop/src/lib/youtube/service.ts"
click node_ytlive "https://github.com/lc-vidlab/vidlab-fe/blob/develop/src/lib/youtube/live.ts"
click node_ytmock "https://github.com/lc-vidlab/vidlab-fe/blob/develop/src/lib/youtube/mock.ts"
click node_commentui "https://github.com/lc-vidlab/vidlab-fe/blob/develop/src/features/watch/components/CommentSection.tsx"
click node_commenthook "https://github.com/lc-vidlab/vidlab-fe/blob/develop/src/features/watch/hooks/useComments.ts"
click node_commentclient "https://github.com/lc-vidlab/vidlab-fe/blob/develop/src/features/watch/api/comments.ts"
click node_commentroutes "https://github.com/lc-vidlab/vidlab-fe/blob/develop/src/app/api/comments/route.ts"
click node_commentdelete "https://github.com/lc-vidlab/vidlab-fe/blob/develop/src/app/api/comments/%5Bid%5D/route.ts"
click node_commentservice "https://github.com/lc-vidlab/vidlab-fe/blob/develop/src/lib/comments/service.ts"
click node_commentrules "https://github.com/lc-vidlab/vidlab-fe/blob/develop/src/lib/comments/rules.ts"
click node_commentpg "https://github.com/lc-vidlab/vidlab-fe/blob/develop/src/lib/comments/postgres.ts"
click node_commentmock "https://github.com/lc-vidlab/vidlab-fe/blob/develop/src/lib/comments/mock.ts"
click node_dbclient "https://github.com/lc-vidlab/vidlab-fe/blob/develop/src/lib/db/client.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_home,node_feed,node_feedclient,node_feedroute,node_feedloader,node_searchroute,node_searchui,node_searchapi,node_searchbar,node_filters,node_viewer toneBlue
class node_watchroute,node_watchlayout,node_player,node_videoloader,node_related,node_database toneAmber
class node_ytservice,node_ytlive,node_ytmock,node_youtube toneMint
class node_commentui,node_commenthook,node_commentclient,node_commentroutes,node_commentdelete,node_commentservice,node_commentrules toneRose
class node_commentpg,node_commentmock,node_dbclient toneIndigo
```

## Components

### Video discovery

- [Home route](https://github.com/lc-vidlab/vidlab-fe/blob/develop/src/app/page.tsx): `src/app/page.tsx`
- [Feed page](https://github.com/lc-vidlab/vidlab-fe/blob/develop/src/features/feed/components/FeedPage.tsx): `src/features/feed/components/FeedPage.tsx`
- [Feed client API](https://github.com/lc-vidlab/vidlab-fe/blob/develop/src/features/feed/api.ts): `src/features/feed/api.ts`
- [Feed endpoint](https://github.com/lc-vidlab/vidlab-fe/blob/develop/src/app/api/feed/route.ts): `src/app/api/feed/route.ts`
- [Feed loader](https://github.com/lc-vidlab/vidlab-fe/blob/develop/src/features/feed/load-feed.ts): `src/features/feed/load-feed.ts`
- [Search route](https://github.com/lc-vidlab/vidlab-fe/blob/develop/src/app/results/page.tsx): `src/app/results/page.tsx`
- [Search results](https://github.com/lc-vidlab/vidlab-fe/blob/develop/src/features/search/components/SearchResultList.tsx): `src/features/search/components/SearchResultList.tsx`
- [Search client API](https://github.com/lc-vidlab/vidlab-fe/blob/develop/src/features/search/api.ts): `src/features/search/api.ts`
- [Search bar](https://github.com/lc-vidlab/vidlab-fe/blob/develop/src/features/search/components/SearchBar.tsx): `src/features/search/components/SearchBar.tsx`
- [Search filters](https://github.com/lc-vidlab/vidlab-fe/blob/develop/src/features/search/lib/filters.ts): `src/features/search/lib/filters.ts`

### Video watch

- [Watch route](https://github.com/lc-vidlab/vidlab-fe/blob/develop/src/app/watch/%5Bid%5D/page.tsx): `src/app/watch/[id]/page.tsx`
- [Watch layout](https://github.com/lc-vidlab/vidlab-fe/blob/develop/src/features/watch/components/WatchLayout.tsx): `src/features/watch/components/WatchLayout.tsx`
- [Video player](https://github.com/lc-vidlab/vidlab-fe/blob/develop/src/features/watch/components/VideoPlayer.tsx): `src/features/watch/components/VideoPlayer.tsx`
- [Video loader](https://github.com/lc-vidlab/vidlab-fe/blob/develop/src/features/watch/server/load-video.ts): `src/features/watch/server/load-video.ts`
- [Related videos](https://github.com/lc-vidlab/vidlab-fe/blob/develop/src/features/watch/components/RelatedVideos.tsx): `src/features/watch/components/RelatedVideos.tsx`

### YouTube access

- [YouTube service](https://github.com/lc-vidlab/vidlab-fe/blob/develop/src/lib/youtube/service.ts): `src/lib/youtube/service.ts`
- [Live API client](https://github.com/lc-vidlab/vidlab-fe/blob/develop/src/lib/youtube/live.ts): `src/lib/youtube/live.ts`
- [Mock service](https://github.com/lc-vidlab/vidlab-fe/blob/develop/src/lib/youtube/mock.ts): `src/lib/youtube/mock.ts`

### Anonymous comments

- [Comment section](https://github.com/lc-vidlab/vidlab-fe/blob/develop/src/features/watch/components/CommentSection.tsx): `src/features/watch/components/CommentSection.tsx`
- [Comment queries](https://github.com/lc-vidlab/vidlab-fe/blob/develop/src/features/watch/hooks/useComments.ts): `src/features/watch/hooks/useComments.ts`
- [Comment client API](https://github.com/lc-vidlab/vidlab-fe/blob/develop/src/features/watch/api/comments.ts): `src/features/watch/api/comments.ts`
- [Comment endpoints](https://github.com/lc-vidlab/vidlab-fe/blob/develop/src/app/api/comments/route.ts): `src/app/api/comments/route.ts`
- [Delete endpoint](https://github.com/lc-vidlab/vidlab-fe/blob/develop/src/app/api/comments/%5Bid%5D/route.ts): `src/app/api/comments/[id]/route.ts`
- [Comment service](https://github.com/lc-vidlab/vidlab-fe/blob/develop/src/lib/comments/service.ts): `src/lib/comments/service.ts`
- [Comment rules](https://github.com/lc-vidlab/vidlab-fe/blob/develop/src/lib/comments/rules.ts): `src/lib/comments/rules.ts`

### Comment storage

- [Postgres store](https://github.com/lc-vidlab/vidlab-fe/blob/develop/src/lib/comments/postgres.ts): `src/lib/comments/postgres.ts`
- [Memory store](https://github.com/lc-vidlab/vidlab-fe/blob/develop/src/lib/comments/mock.ts): `src/lib/comments/mock.ts`
- [Database client](https://github.com/lc-vidlab/vidlab-fe/blob/develop/src/lib/db/client.ts): `src/lib/db/client.ts`

### Other components

- **Viewer**
- **YouTube Data API**
- **Postgres database**

## Connections

- Viewer → Home route: opens
- Home route → Feed page: renders (evidence: `src/app/page.tsx`)
- Feed page → Feed client API: requests pages (evidence: `src/features/feed/components/FeedPage.tsx`)
- Feed client API → Feed endpoint: fetches
- Feed endpoint → Feed loader: calls (evidence: `src/app/api/feed/route.ts`)
- Feed loader → YouTube service: loads videos (evidence: `src/features/feed/load-feed.ts`)
- Viewer → Search route: searches
- Search route → Search results: renders (evidence: `src/app/results/page.tsx`)
- Search route → Search filters: reads filters (evidence: `src/app/results/page.tsx`)
- Search results → Search client API: fetches pages (evidence: `src/features/search/components/SearchResultList.tsx`)
- Search results → Search filters: applies period (evidence: `src/features/search/components/SearchResultList.tsx`)
- Search bar → Search route: builds URL
- Search client API → Search route: fetches
- Search route → Search results: shows results (evidence: `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 (evidence: `src/lib/youtube/service.ts`)
- YouTube service → Mock service: dispatches mock mode (evidence: `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 (evidence: `src/features/watch/hooks/useComments.ts`)
- Comment client API → Comment endpoints: calls endpoints
- Comment endpoints → Comment service: lists or creates (evidence: `src/app/api/comments/route.ts`)
- Delete endpoint → Comment service: deletes (evidence: `src/app/api/comments/[id]/route.ts`)
- Comment service → Comment rules: validates (evidence: `src/lib/comments/service.ts`)
- Comment service → Postgres store: selects configured store (evidence: `src/lib/comments/service.ts`)
- Comment service → Memory store: selects configured store (evidence: `src/lib/comments/service.ts`)
- Postgres store → Database client: uses connection (evidence: `src/lib/comments/postgres.ts`)
- Database client → Postgres database: connects (evidence: `src/lib/db/client.ts`)