# kshitijsharma19/watchflow architecture

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

- Interactive diagram: https://gitdiagram.com/kshitijsharma19/watchflow
- Repository: https://github.com/kshitijsharma19/watchflow

## Overview

WatchFlow turns a learner’s YouTube playlist into a tracked course: the user imports or re-syncs a playlist, studies videos with resumable progress and timestamp notes, and reviews library, dashboard, and streak analytics. The graph follows the documented React-to-Express product boundary and the sampled playlist, progress, and YouTube paths. Other documented capabilities are represented at their exact enclosing paths; their internal wiring was not sampled, so uncertain calls are omitted.

Main entry points: [`server/server.js`](https://github.com/kshitijsharma19/watchflow/blob/main/server/server.js) (API router), [`client/src/App.jsx`](https://github.com/kshitijsharma19/watchflow/blob/main/client/src/App.jsx) (App routes), [`client/src/api/axios.js`](https://github.com/kshitijsharma19/watchflow/blob/main/client/src/api/axios.js) (HTTP client), [`server/controllers/playlistController.js`](https://github.com/kshitijsharma19/watchflow/blob/main/server/controllers/playlistController.js) (Playlist management)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Learning app"]
  node_app["App routes<br/>[App.jsx]"]
  node_authui["Auth experience<br/>[Auth.jsx]"]
  node_library["Playlist library<br/>[Library.jsx]"]
  node_details["Course details"]
  node_player["Learning player<br/>[PlaylistPlayer.jsx]"]
  node_dashboardui["Dashboard<br/>[Dashboard.jsx]"]
  node_settingsui["User settings<br/>[Settings.jsx]"]
  node_authcontext["Auth context<br/>[AuthContext.jsx]"]
  node_http["HTTP client<br/>[axios.js]"]
end

subgraph group_api["API services"]
  node_express["API router<br/>[server.js]"]
  node_authroutes["Auth endpoints<br/>[authRoutes.js]"]
  node_authctrl["Authentication<br/>[authController.js]"]
  node_playlistroutes["Playlist endpoints<br/>[playlistRoutes.js]"]
  node_playlistctrl["Playlist management"]
  node_detailctrl["Course details"]
  node_videoroutes["Video endpoints<br/>[videoRoutes.js]"]
  node_videoctrl["Progress tracking<br/>[videoController.js]"]
  node_noteroutes["Notes endpoints<br/>[noteRoutes.js]"]
  node_notectrl["Timestamp notes<br/>[noteController.js]"]
  node_dashboardctrl["Learning analytics"]
  node_streak["Streak tracking"]
  node_settingsctrl["Settings service"]
  node_youtube["YouTube integration<br/>[youtubeService.js]"]
end

subgraph group_data["Learning data"]
  node_user[("User records<br/>[User.js]")]
  node_playlist[("Playlist records<br/>[Playlist.js]")]
  node_video[("Video progress<br/>[Video.js]")]
  node_note[("Video notes<br/>[Note.js]")]
  node_activity[("Daily activity<br/>[DailyActivity.js]")]
end

subgraph group_external["External services"]
  node_mongo[("MongoDB")]
  node_ytapi["YouTube Data API"]
end

node_learner(("Learner"))

node_learner -->|"uses"| node_app
node_app -->|"routes"| node_authui
node_app -->|"routes"| node_library
node_app -->|"routes"| node_details
node_app -->|"routes"| node_player
node_app -->|"routes"| node_dashboardui
node_app -->|"routes"| node_settingsui
node_authui -->|"requests"| node_http
node_library -->|"requests"| node_http
node_details -->|"requests"| node_http
node_player -->|"requests"| node_http
node_dashboardui -->|"requests"| node_http
node_settingsui -->|"requests"| node_http
node_authcontext -->|"requests"| node_http
node_http -->|"HTTP API"| node_express
node_express -->|"dispatches"| node_authroutes
node_express -->|"dispatches"| node_playlistroutes
node_express -->|"dispatches"| node_videoroutes
node_express -->|"dispatches"| node_noteroutes
node_express -->|"dispatches"| node_dashboardctrl
node_express -->|"dispatches"| node_streak
node_express -->|"dispatches"| node_settingsctrl
node_authroutes -->|"dispatches"| node_authctrl
node_playlistroutes -->|"dispatches"| node_playlistctrl
node_playlistroutes -->|"dispatches"| node_detailctrl
node_videoroutes -->|"dispatches"| node_videoctrl
node_noteroutes -->|"dispatches"| node_notectrl
node_playlistctrl -->|"fetches playlist"| node_youtube
node_youtube -->|"queries"| node_ytapi
node_playlistctrl -->|"reads/writes"| node_playlist
node_playlistctrl -->|"reads/writes"| node_video
node_playlistctrl -->|"deletes"| node_note
node_detailctrl -->|"reads"| node_playlist
node_detailctrl -->|"reads"| node_video
node_videoctrl -->|"updates"| node_video
node_videoctrl -->|"updates access"| node_playlist
node_videoctrl -->|"records activity"| node_activity
node_notectrl -->|"reads/writes"| node_note
node_dashboardctrl -->|"reads"| node_playlist
node_dashboardctrl -->|"reads"| node_video
node_streak -->|"reads"| node_activity
node_authctrl -->|"reads/writes"| node_user
node_settingsctrl -->|"updates"| node_user
node_user -->|"persists"| node_mongo
node_playlist -->|"persists"| node_mongo
node_video -->|"persists"| node_mongo
node_note -->|"persists"| node_mongo
node_activity -->|"persists"| node_mongo

click node_app "https://github.com/kshitijsharma19/watchflow/blob/main/client/src/App.jsx"
click node_authui "https://github.com/kshitijsharma19/watchflow/blob/main/client/src/pages/Auth.jsx"
click node_library "https://github.com/kshitijsharma19/watchflow/blob/main/client/src/pages/Library.jsx"
click node_details "https://github.com/kshitijsharma19/watchflow/blob/main/client/src/pages/PlaylistDetails.jsx"
click node_player "https://github.com/kshitijsharma19/watchflow/blob/main/client/src/pages/PlaylistPlayer.jsx"
click node_dashboardui "https://github.com/kshitijsharma19/watchflow/blob/main/client/src/pages/Dashboard.jsx"
click node_settingsui "https://github.com/kshitijsharma19/watchflow/blob/main/client/src/pages/Settings.jsx"
click node_authcontext "https://github.com/kshitijsharma19/watchflow/blob/main/client/src/context/AuthContext.jsx"
click node_http "https://github.com/kshitijsharma19/watchflow/blob/main/client/src/api/axios.js"
click node_express "https://github.com/kshitijsharma19/watchflow/blob/main/server/server.js"
click node_authroutes "https://github.com/kshitijsharma19/watchflow/blob/main/server/routes/authRoutes.js"
click node_authctrl "https://github.com/kshitijsharma19/watchflow/blob/main/server/controllers/authController.js"
click node_playlistroutes "https://github.com/kshitijsharma19/watchflow/blob/main/server/routes/playlistRoutes.js"
click node_playlistctrl "https://github.com/kshitijsharma19/watchflow/blob/main/server/controllers/playlistController.js"
click node_detailctrl "https://github.com/kshitijsharma19/watchflow/blob/main/server/controllers/playlistDetailsController.js"
click node_videoroutes "https://github.com/kshitijsharma19/watchflow/blob/main/server/routes/videoRoutes.js"
click node_videoctrl "https://github.com/kshitijsharma19/watchflow/blob/main/server/controllers/videoController.js"
click node_noteroutes "https://github.com/kshitijsharma19/watchflow/blob/main/server/routes/noteRoutes.js"
click node_notectrl "https://github.com/kshitijsharma19/watchflow/blob/main/server/controllers/noteController.js"
click node_dashboardctrl "https://github.com/kshitijsharma19/watchflow/blob/main/server/controllers/dashboardController.js"
click node_streak "https://github.com/kshitijsharma19/watchflow/blob/main/server/controllers/streakController.js"
click node_settingsctrl "https://github.com/kshitijsharma19/watchflow/blob/main/server/controllers/settingsController.js"
click node_youtube "https://github.com/kshitijsharma19/watchflow/blob/main/server/services/youtubeService.js"
click node_user "https://github.com/kshitijsharma19/watchflow/blob/main/server/models/User.js"
click node_playlist "https://github.com/kshitijsharma19/watchflow/blob/main/server/models/Playlist.js"
click node_video "https://github.com/kshitijsharma19/watchflow/blob/main/server/models/Video.js"
click node_note "https://github.com/kshitijsharma19/watchflow/blob/main/server/models/Note.js"
click node_activity "https://github.com/kshitijsharma19/watchflow/blob/main/server/models/DailyActivity.js"

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_app,node_authui,node_library,node_details,node_player,node_dashboardui,node_settingsui,node_authcontext,node_http toneBlue
class node_express,node_authroutes,node_authctrl,node_playlistroutes,node_playlistctrl,node_detailctrl,node_videoroutes,node_videoctrl,node_noteroutes,node_notectrl,node_dashboardctrl,node_streak,node_settingsctrl,node_youtube toneAmber
class node_user,node_playlist,node_video,node_note,node_activity toneMint
class node_mongo,node_ytapi toneRose
class node_learner toneIndigo
```

## Components

### Learning app

- [App routes](https://github.com/kshitijsharma19/watchflow/blob/main/client/src/App.jsx): `client/src/App.jsx`
- [Auth experience](https://github.com/kshitijsharma19/watchflow/blob/main/client/src/pages/Auth.jsx): `client/src/pages/Auth.jsx`
- [Playlist library](https://github.com/kshitijsharma19/watchflow/blob/main/client/src/pages/Library.jsx): `client/src/pages/Library.jsx`
- [Course details](https://github.com/kshitijsharma19/watchflow/blob/main/client/src/pages/PlaylistDetails.jsx): `client/src/pages/PlaylistDetails.jsx`
- [Learning player](https://github.com/kshitijsharma19/watchflow/blob/main/client/src/pages/PlaylistPlayer.jsx): `client/src/pages/PlaylistPlayer.jsx`
- [Dashboard](https://github.com/kshitijsharma19/watchflow/blob/main/client/src/pages/Dashboard.jsx): `client/src/pages/Dashboard.jsx`
- [User settings](https://github.com/kshitijsharma19/watchflow/blob/main/client/src/pages/Settings.jsx): `client/src/pages/Settings.jsx`
- [Auth context](https://github.com/kshitijsharma19/watchflow/blob/main/client/src/context/AuthContext.jsx): `client/src/context/AuthContext.jsx`
- [HTTP client](https://github.com/kshitijsharma19/watchflow/blob/main/client/src/api/axios.js): `client/src/api/axios.js`

### API services

- [API router](https://github.com/kshitijsharma19/watchflow/blob/main/server/server.js): `server/server.js`
- [Auth endpoints](https://github.com/kshitijsharma19/watchflow/blob/main/server/routes/authRoutes.js): `server/routes/authRoutes.js`
- [Authentication](https://github.com/kshitijsharma19/watchflow/blob/main/server/controllers/authController.js): `server/controllers/authController.js`
- [Playlist endpoints](https://github.com/kshitijsharma19/watchflow/blob/main/server/routes/playlistRoutes.js): `server/routes/playlistRoutes.js`
- [Playlist management](https://github.com/kshitijsharma19/watchflow/blob/main/server/controllers/playlistController.js): `server/controllers/playlistController.js`
- [Course details](https://github.com/kshitijsharma19/watchflow/blob/main/server/controllers/playlistDetailsController.js): `server/controllers/playlistDetailsController.js`
- [Video endpoints](https://github.com/kshitijsharma19/watchflow/blob/main/server/routes/videoRoutes.js): `server/routes/videoRoutes.js`
- [Progress tracking](https://github.com/kshitijsharma19/watchflow/blob/main/server/controllers/videoController.js): `server/controllers/videoController.js`
- [Notes endpoints](https://github.com/kshitijsharma19/watchflow/blob/main/server/routes/noteRoutes.js): `server/routes/noteRoutes.js`
- [Timestamp notes](https://github.com/kshitijsharma19/watchflow/blob/main/server/controllers/noteController.js): `server/controllers/noteController.js`
- [Learning analytics](https://github.com/kshitijsharma19/watchflow/blob/main/server/controllers/dashboardController.js): `server/controllers/dashboardController.js`
- [Streak tracking](https://github.com/kshitijsharma19/watchflow/blob/main/server/controllers/streakController.js): `server/controllers/streakController.js`
- [Settings service](https://github.com/kshitijsharma19/watchflow/blob/main/server/controllers/settingsController.js): `server/controllers/settingsController.js`
- [YouTube integration](https://github.com/kshitijsharma19/watchflow/blob/main/server/services/youtubeService.js): `server/services/youtubeService.js`

### Learning data

- [User records](https://github.com/kshitijsharma19/watchflow/blob/main/server/models/User.js): `server/models/User.js`
- [Playlist records](https://github.com/kshitijsharma19/watchflow/blob/main/server/models/Playlist.js): `server/models/Playlist.js`
- [Video progress](https://github.com/kshitijsharma19/watchflow/blob/main/server/models/Video.js): `server/models/Video.js`
- [Video notes](https://github.com/kshitijsharma19/watchflow/blob/main/server/models/Note.js): `server/models/Note.js`
- [Daily activity](https://github.com/kshitijsharma19/watchflow/blob/main/server/models/DailyActivity.js): `server/models/DailyActivity.js`

### External services

- **MongoDB**
- **YouTube Data API**

### Other components

- **Learner**

## Connections

- Learner → App routes: uses
- App routes → Auth experience: routes
- App routes → Playlist library: routes
- App routes → Course details: routes
- App routes → Learning player: routes
- App routes → Dashboard: routes
- App routes → User settings: routes
- Auth experience → HTTP client: requests
- Playlist library → HTTP client: requests
- Course details → HTTP client: requests
- Learning player → HTTP client: requests
- Dashboard → HTTP client: requests
- User settings → HTTP client: requests
- Auth context → HTTP client: requests
- HTTP client → API router: HTTP API
- API router → Auth endpoints: dispatches
- API router → Playlist endpoints: dispatches
- API router → Video endpoints: dispatches
- API router → Notes endpoints: dispatches
- API router → Learning analytics: dispatches
- API router → Streak tracking: dispatches
- API router → Settings service: dispatches
- Auth endpoints → Authentication: dispatches
- Playlist endpoints → Playlist management: dispatches
- Playlist endpoints → Course details: dispatches
- Video endpoints → Progress tracking: dispatches
- Notes endpoints → Timestamp notes: dispatches
- Playlist management → YouTube integration: fetches playlist
- YouTube integration → YouTube Data API: queries
- Playlist management → Playlist records: reads/writes
- Playlist management → Video progress: reads/writes
- Playlist management → Video notes: deletes
- Course details → Playlist records: reads
- Course details → Video progress: reads
- Progress tracking → Video progress: updates
- Progress tracking → Playlist records: updates access
- Progress tracking → Daily activity: records activity
- Timestamp notes → Video notes: reads/writes
- Learning analytics → Playlist records: reads
- Learning analytics → Video progress: reads
- Streak tracking → Daily activity: reads
- Authentication → User records: reads/writes
- Settings service → User records: updates
- User records → MongoDB: persists
- Playlist records → MongoDB: persists
- Video progress → MongoDB: persists
- Video notes → MongoDB: persists
- Daily activity → MongoDB: persists