buildwithmeraj/course-tube

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.