# buildwithmeraj/course-tube architecture

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

- Interactive diagram: https://gitdiagram.com/buildwithmeraj/course-tube
- Repository: https://github.com/buildwithmeraj/course-tube

## Overview

1. **Overall architecture**
   - This is a **Next.js App Router** application that combines public pages, authenticated user areas, admin tooling, and API routes in one repository.
   - The project is a **full-stack monolith**: UI, server routes, auth, database access, and third-party integrations all live together under `src/`.

2. **Route structure and major zones**
   - Public-facing routes live under `src/app/` for home, about, contact, privacy, categories, and course browsing.
   - Auth pages are isolated under `src/app/(auth)/` for login, register, and logout.
   - Private user/admin areas are split into `src/app/dashboard/` and `src/app/profile/`.
   - Backend endpoints are implemented as App Router route handlers under `src/app/api/`.

3. **UI composition**
   - Pages are mostly thin route shells that assemble feature components from `src/components/pages/`.
   - Shared layout elements such as the navbar, footer, theme switcher, search bar, and dock live in `src/components/shared/`.
   - Reusable primitive UI pieces like loaders, skeletons, cards, and the YouTube player are in `src/components/ui/`.
   - This separation makes the diagram naturally divide into **route layer → page components → reusable UI**.

4. **Global app state and providers**
   - `src/app/layout.js` and `src/app/providers/Providers.jsx` define the application shell and client-side providers.
   - `src/app/contexts/SearchContext.jsx` is a shared client context used for search/filter state across listing pages.
   - `src/app/globals.css` and the theme switcher indicate a global presentation layer rather than per-page styling only.

5. **Database and server-side foundation**
   - MongoDB is the primary persistence layer, accessed through `src/lib/db.js` and `src/lib/getDB.js`.
   - `src/lib/auth.js` contains the auth configuration used by the NextAuth route.
   - These `lib/` modules are the main boundary between route handlers/components and the database/auth infrastructure.

6. **Authentication and identity**
   - Authentication is handled by **NextAuth** at `src/app/api/auth/[...nextauth]/route.js`.
   - Registration is custom-built at `src/app/api/auth/register/route.js`, with password hashing via **bcryptjs** per the README.
   - The app supports both **credentials login** and **Google OAuth**, so the identity boundary spans NextAuth plus local user storage in MongoDB.

7. **Course discovery, ingestion, and sync**
   - The core domain is YouTube course playlists.
   - Client-side action helpers in `src/actions/client/` fetch playlist metadata and video lists for browser-driven workflows.
   - Server-side sync logic in `src/app/api/courses/[id]/synchronize/route.js` and `src/actions/server/getUserPlaylist.js` pulls authoritative playlist data from YouTube on the server.
   - `src/lib/youtube.js` is the integration boundary to the **YouTube Data API v3**.

8. **Course lifecycle and progress tracking**
   - Course endpoints cover CRUD, enrollment, progress, and video access: `courses`, `courses/[id]`, `enroll`, `progress`, `videos`.
   - The data flow is: user adds a playlist → course record is created → videos and metadata are synchronized → watched state is stored → progress is shown in profile/dashboard views.
   - This is the main application loop and should appear as a central data path in an architecture diagram.

9. **Approval and publication workflow**
   - User-submitted courses are initially private to the uploader.
   - Admins review them in the dashboard and can approve/reject, after which approved courses become public and searchable.
   - This creates a clear boundary between **private submissions** and **public catalog content**.

10. **Categories and catalog organization**
   - Categories are a first-class public/admin feature, with routes for listing, detail pages, and admin management.
   - Admins create categories and assign courses to them through the dashboard and category API routes.
   - The homepage also surfaces featured categories and popular courses, so categories influence both discovery and ranking surfaces.

11. **User profile and analytics**
   - The profile area shows enrolled courses, user-owned courses, and stats.
   - Stats endpoints under `src/app/api/stats/` support dashboard/profile analytics, likely derived from MongoDB course/progress records.
   - This is a read-heavy layer built on top of the core course/progress data.

12. **External integrations**
   - **Nodemailer** powers the contact form API.
   - **imgbb** is used for profile photo upload.
   - **NextAuth + Google OAuth** handles external sign-in.
   - Separate environment variables for `NEXT_PUBLIC_YOUTUBE_API` and `YOUTUBE_API_KEY` indicate distinct client/server API access patterns for YouTube.

13. **Access control and request gating**
   - `src/proxy.js` is the repo’s obvious place for route protection or middleware-style access control.
   - Combined with NextAuth and the dashboard/profile route split, the architecture enforces role-based access at the routing boundary rather than inside every component.

14. **What to show in a diagram**
   - A good diagram should center on:
     - **Browser/UI routes**
     - **Next.js API route handlers**
     - **MongoDB**
     - **YouTube Data API**
     - **Auth provider flow**
     - **Admin approval workflow**
   - The key arrows are: UI requests → API routes → MongoDB / external services → rendered lists, dashboards, and progress views.

Main entry points: [`src/app/page.js`](https://github.com/buildwithmeraj/course-tube/blob/main/src/app/page.js) (Public pages), [`src/app/api/courses/route.js`](https://github.com/buildwithmeraj/course-tube/blob/main/src/app/api/courses/route.js) (API routes), [`src/app/dashboard/page.jsx`](https://github.com/buildwithmeraj/course-tube/blob/main/src/app/dashboard/page.jsx) (Private areas), [`src/app/layout.js`](https://github.com/buildwithmeraj/course-tube/blob/main/src/app/layout.js) (App shell)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_routes["Routes"]
  node_app_shell["App shell<br/>nextjs layout<br/>[layout.js]"]
  node_public_routes["Public pages<br/>route pages<br/>[page.js]"]
  node_auth_routes["Auth pages<br/>auth routes<br/>[page.jsx]"]
  node_private_routes["Private areas<br/>dashboard/profile<br/>[page.jsx]"]
  node_api_routes["API routes<br/>route handlers<br/>[route.js]"]
end

subgraph group_ui["UI"]
  node_home_ui["Home UI<br/>landing components<br/>[Home.jsx]"]
  node_course_ui["Course UI<br/>course views<br/>[CourseList.jsx]"]
  node_category_ui["Category UI<br/>catalog views<br/>[CategoryList.jsx]"]
  node_auth_ui["Auth UI<br/>auth views<br/>[Login.jsx]"]
  node_private_ui["Private UI<br/>dashboard views<br/>[AdminDashboard.jsx]"]
  node_shared_ui["Shared UI<br/>layout widgets<br/>[Navbar.jsx]"]
  node_primitives["UI primitives<br/>reusable widgets<br/>[PlaylistCard.jsx]"]
end

subgraph group_data["Data"]
  node_client_actions["Client actions<br/>browser helpers<br/>[getPlayListData.js]"]
  node_server_actions["Server actions<br/>server sync<br/>[getUserPlaylist.js]"]
  node_db_layer[("MongoDB layer<br/>db access<br/>[db.js]")]
  node_auth_layer["Auth config<br/>[auth.js]"]
  node_youtube_api["YouTube API<br/>external api<br/>[youtube.js]"]
  node_other_integrations["Other services<br/>external services<br/>[route.js]"]
end

node_app_shell -->|"renders"| node_public_routes
node_app_shell -->|"renders"| node_auth_routes
node_app_shell -->|"protects"| node_private_routes
node_public_routes -->|"assembles"| node_home_ui
node_public_routes -->|"uses"| node_course_ui
node_public_routes -->|"uses"| node_category_ui
node_auth_routes -->|"uses"| node_auth_ui
node_private_routes -->|"uses"| node_private_ui
node_private_routes -->|"wraps"| node_shared_ui
node_public_routes -->|"wraps"| node_shared_ui
node_public_routes -->|"composes"| node_primitives
node_api_routes -->|"reads/writes"| node_db_layer
node_api_routes -->|"verifies"| node_auth_layer
node_api_routes -->|"syncs"| node_youtube_api
node_api_routes -->|"calls"| node_other_integrations
node_client_actions -->|"fetches"| node_youtube_api
node_server_actions -->|"syncs"| node_youtube_api
node_server_actions -->|"updates"| node_db_layer
node_api_routes -->|"serves"| node_private_routes
node_api_routes -->|"serves"| node_public_routes

click node_app_shell "https://github.com/buildwithmeraj/course-tube/blob/main/src/app/layout.js"
click node_public_routes "https://github.com/buildwithmeraj/course-tube/blob/main/src/app/page.js"
click node_auth_routes "https://github.com/buildwithmeraj/course-tube/blob/main/src/app/(auth)/login/page.jsx"
click node_private_routes "https://github.com/buildwithmeraj/course-tube/blob/main/src/app/dashboard/page.jsx"
click node_api_routes "https://github.com/buildwithmeraj/course-tube/blob/main/src/app/api/courses/route.js"
click node_home_ui "https://github.com/buildwithmeraj/course-tube/blob/main/src/components/pages/home/Home.jsx"
click node_course_ui "https://github.com/buildwithmeraj/course-tube/blob/main/src/components/pages/courses/CourseList.jsx"
click node_category_ui "https://github.com/buildwithmeraj/course-tube/blob/main/src/components/pages/categoreis/CategoryList.jsx"
click node_auth_ui "https://github.com/buildwithmeraj/course-tube/blob/main/src/components/pages/auth/Login.jsx"
click node_private_ui "https://github.com/buildwithmeraj/course-tube/blob/main/src/components/pages/private/AdminDashboard.jsx"
click node_shared_ui "https://github.com/buildwithmeraj/course-tube/blob/main/src/components/shared/Navbar.jsx"
click node_primitives "https://github.com/buildwithmeraj/course-tube/blob/main/src/components/ui/PlaylistCard.jsx"
click node_client_actions "https://github.com/buildwithmeraj/course-tube/blob/main/src/actions/client/getPlayListData.js"
click node_server_actions "https://github.com/buildwithmeraj/course-tube/blob/main/src/actions/server/getUserPlaylist.js"
click node_db_layer "https://github.com/buildwithmeraj/course-tube/blob/main/src/lib/db.js"
click node_auth_layer "https://github.com/buildwithmeraj/course-tube/blob/main/src/lib/auth.js"
click node_youtube_api "https://github.com/buildwithmeraj/course-tube/blob/main/src/lib/youtube.js"
click node_other_integrations "https://github.com/buildwithmeraj/course-tube/blob/main/src/app/api/contact/route.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_shell,node_public_routes,node_auth_routes,node_private_routes,node_api_routes toneBlue
class node_home_ui,node_course_ui,node_category_ui,node_auth_ui,node_private_ui,node_shared_ui,node_primitives toneAmber
class node_client_actions,node_server_actions,node_db_layer,node_auth_layer,node_youtube_api,node_other_integrations toneMint
```

## Components

### Routes

App Router pages, layouts, and route handlers.

- [App shell](https://github.com/buildwithmeraj/course-tube/blob/main/src/app/layout.js): nextjs layout · Root layout, providers, global styles, and route gating. · `src/app/layout.js`
- [Public pages](https://github.com/buildwithmeraj/course-tube/blob/main/src/app/page.js): route pages · Home, about, contact, privacy, course and category browsing. · `src/app/page.js`
- [Auth pages](https://github.com/buildwithmeraj/course-tube/blob/main/src/app/(auth)/login/page.jsx): auth routes · Login, register, and logout UI routes. · `src/app/(auth)/login/page.jsx`
- [Private areas](https://github.com/buildwithmeraj/course-tube/blob/main/src/app/dashboard/page.jsx): dashboard/profile · Authenticated dashboard and profile route trees. · `src/app/dashboard/page.jsx`
- [API routes](https://github.com/buildwithmeraj/course-tube/blob/main/src/app/api/courses/route.js): route handlers · Auth, courses, categories, stats, contact, and course progress endpoints. · `src/app/api/courses/route.js`

### UI

Route shells, shared components, and client-facing views.

- [Home UI](https://github.com/buildwithmeraj/course-tube/blob/main/src/components/pages/home/Home.jsx): landing components · Hero, CTA, featured categories, popular courses, stats, and onboarding sections. · `src/components/pages/home/Home.jsx`
- [Course UI](https://github.com/buildwithmeraj/course-tube/blob/main/src/components/pages/courses/CourseList.jsx): course views · Course listing, details, videos, and player-related presentation. · `src/components/pages/courses/CourseList.jsx`
- [Category UI](https://github.com/buildwithmeraj/course-tube/blob/main/src/components/pages/categoreis/CategoryList.jsx): catalog views · Category listing and detail presentation for browsing and admin surfaces. · `src/components/pages/categoreis/CategoryList.jsx`
- [Auth UI](https://github.com/buildwithmeraj/course-tube/blob/main/src/components/pages/auth/Login.jsx): auth views · Login and registration forms. · `src/components/pages/auth/Login.jsx`
- [Private UI](https://github.com/buildwithmeraj/course-tube/blob/main/src/components/pages/private/AdminDashboard.jsx): dashboard views · Admin dashboard, profile, enrollment, and management screens. · `src/components/pages/private/AdminDashboard.jsx`
- [Shared UI](https://github.com/buildwithmeraj/course-tube/blob/main/src/components/shared/Navbar.jsx): layout widgets · Navbar, footer, theme switcher, search, dock, and common shells. · `src/components/shared/Navbar.jsx`
- [UI primitives](https://github.com/buildwithmeraj/course-tube/blob/main/src/components/ui/PlaylistCard.jsx): reusable widgets · Cards, skeletons, loaders, not-logged-in state, and video/player UI. · `src/components/ui/PlaylistCard.jsx`

### Data

Database, auth, and external integration boundaries.

- [Client actions](https://github.com/buildwithmeraj/course-tube/blob/main/src/actions/client/getPlayListData.js): browser helpers · Browser-driven playlist lookup and video discovery helpers. · `src/actions/client/getPlayListData.js`
- [Server actions](https://github.com/buildwithmeraj/course-tube/blob/main/src/actions/server/getUserPlaylist.js): server sync · Server-side playlist retrieval and synchronization helpers. · `src/actions/server/getUserPlaylist.js`
- [MongoDB layer](https://github.com/buildwithmeraj/course-tube/blob/main/src/lib/db.js): db access · Database connection helpers and data access boundary. · `src/lib/db.js`
- [Auth config](https://github.com/buildwithmeraj/course-tube/blob/main/src/lib/auth.js): nextauth config · NextAuth setup and authentication policy boundary. · `src/lib/auth.js`
- [YouTube API](https://github.com/buildwithmeraj/course-tube/blob/main/src/lib/youtube.js): external api · YouTube playlist and video metadata integration. · `src/lib/youtube.js`
- [Other services](https://github.com/buildwithmeraj/course-tube/blob/main/src/app/api/contact/route.js): external services · Nodemailer contact delivery, imgbb uploads, and Google OAuth sign-in. · `src/app/api/contact/route.js`

## Connections

- App shell → Public pages: renders · Root app shell frames public pages.
- App shell → Auth pages: renders · Root app shell frames auth pages.
- App shell → Private areas: protects · Route protection and authenticated app areas are anchored at the shell.
- Public pages → Home UI: assembles · Public route pages compose landing and discovery components.
- Public pages → Course UI: uses · Course browsing and detail pages use course views.
- Public pages → Category UI: uses · Category browsing and detail pages use category views.
- Auth pages → Auth UI: uses · Login and register pages render auth forms.
- Private areas → Private UI: uses · Dashboard and profile pages render private management views.
- Private areas → Shared UI: wraps · Private areas reuse shared navigation and shell widgets.
- Public pages → Shared UI: wraps · Public pages reuse shared navigation, footer, search, and theme controls.
- Public pages → UI primitives: composes · Discovery pages build on reusable cards, loaders, and player components.
- API routes → MongoDB layer: reads/writes · Route handlers persist and query core application data in MongoDB.
- API routes → Auth config: verifies · Authentication and authorization are enforced through NextAuth config.
- API routes → YouTube API: syncs · Course synchronization and playlist/video endpoints pull authoritative YouTube data.
- API routes → Other services: calls · Contact delivery, profile photo upload, and OAuth-related services are integrated through routes.
- Client actions → YouTube API: fetches · Client-side helpers query playlist metadata and video lists.
- Server actions → YouTube API: syncs · Server-side helpers retrieve playlist data for authoritative updates.
- Server actions → MongoDB layer: updates · Synchronization updates courses, videos, and progress-related records.
- API routes → Private areas: serves · Dashboard and profile views consume stats, course state, and moderation endpoints.
- API routes → Public pages: serves · Public discovery pages read categories, courses, and featured content.