How kshitijsharma19/watchflow works
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.js API router · App.jsx App routes · axios.js HTTP client · playlistController.js Playlist management
Components 31
Learning app
- App routes
client/src/App.jsx - Auth experience
client/src/pages/Auth.jsx - Playlist library
client/src/pages/Library.jsx - Course details
client/src/pages/PlaylistDetails.jsx - Learning player
client/src/pages/PlaylistPlayer.jsx - Dashboard
client/src/pages/Dashboard.jsx - User settings
client/src/pages/Settings.jsx - Auth context
client/src/context/AuthContext.jsx - HTTP client
client/src/api/axios.js
API services
- API router
server/server.js - Auth endpoints
server/routes/authRoutes.js - Authentication
server/controllers/authController.js - Playlist endpoints
server/routes/playlistRoutes.js - Playlist management
server/controllers/playlistController.js - Course details
server/controllers/playlistDetailsController.js - Video endpoints
server/routes/videoRoutes.js - Progress tracking
server/controllers/videoController.js - Notes endpoints
server/routes/noteRoutes.js - Timestamp notes
server/controllers/noteController.js - Learning analytics
server/controllers/dashboardController.js - Streak tracking
server/controllers/streakController.js - Settings service
server/controllers/settingsController.js - YouTube integration
server/services/youtubeService.js
Learning data
- User records
server/models/User.js - Playlist records
server/models/Playlist.js - Video progress
server/models/Video.js - Video notes
server/models/Note.js - Daily activity
server/models/DailyActivity.js
External services
- MongoDB
- YouTube Data API
Other components
- Learner
Connections 48
- 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