# ishratjahanesha21/programming_learning_esz architecture

> Architecture diagram of the GitHub repository ishratjahanesha21/programming_learning_esz, 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/ishratjahanesha21/programming_learning_esz
- Repository: https://github.com/ishratjahanesha21/programming_learning_esz

## Overview

1. **Overall shape**
   - This is a **Next.js 14 App Router** application written in **TypeScript**.
   - The repo is organized around three main surfaces: the **marketing/home experience**, the **authenticated learning area** (`courses`, `profile`, `lessons`), and a **compiler/playground** area backed by an API route.

2. **Client/server boundary**
   - Pages under `src/app/**/page.tsx` are the route entry points and are mostly **server components** that decide access and compose the page.
   - The interactive UI lives in separate `*Client.tsx` components and CSS Modules, which handle browser-side state, modals, forms, and user interaction.
   - This split is important for the diagram: server pages gate access, while client components render the visible experience and handle events.

3. **Authentication subsystem**
   - Auth is implemented with **NextAuth.js v5** via `src/auth.ts` and the route handler at `src/app/api/auth/[...nextauth]/route.ts`.
   - The README indicates the current login model supports **Google, GitHub, and a demo credentials account**, with a mock user store for development.
   - Session typing is extended in `src/types/next-auth.d.ts`, so authentication affects both runtime behavior and TypeScript types.

4. **Route protection**
   - Protected areas are primarily `/courses/[id]` and `/profile`.
   - Protection happens in two layers: **server-side checks in page components** and **edge-level enforcement in `src/middleware.ts`**.
   - That means access control is not only a UI concern; it is enforced before the page content renders.

5. **Home/marketing experience**
   - The homepage (`src/app/page.tsx`) is assembled from reusable sections in `src/components/home/*`.
   - These sections cover the landing narrative: hero, marquee, languages, scenarios, featured courses, compiler teaser, testimonials, FAQ, and CTA.
   - The layout shell (`src/app/layout.tsx`) adds shared chrome via `Navbar` and `Footer`.

6. **Course discovery and auth gating**
   - Course cards come from `src/components/courses/CourseCard.tsx` and the course listing/detail pages under `src/app/courses`.
   - The onboarding behavior is intentional: if the user is not signed in, clicking a course opens the **auth modal** rather than navigating directly.
   - The modal state is shared through `src/lib/auth-modal-context.tsx`, which acts as a cross-cutting UI state boundary between course cards and the auth UI.

7. **Course detail and lesson delivery**
   - `/courses/[id]` is the entry into a course detail page, and nested lesson routes live under `/courses/[id]/lessons/[lessonId]`.
   - Lesson-specific UI is split into `LessonClient.tsx` and `ProGate.tsx`, indicating some lesson content is premium or access-controlled.
   - In diagram terms, the course tree is the authenticated content hub, with lesson access potentially constrained further by the “Pro” gate component.

8. **Compiler subsystem**
   - There is a dedicated compiler page under `src/app/compiler` and a server endpoint at `src/app/api/compile/route.ts`.
   - The architecture suggests a browser-based coding experience where user code is sent to the API route for server-side compilation/execution orchestration.
   - This keeps compilation off the client and separates the playground flow from the rest of the learning content.

9. **Shared data model**
   - Most course and language content appears to come from `src/lib/data.ts`.
   - That file is likely the single source of truth for home-page modules, course cards, lesson metadata, and language lists.
   - For the architecture diagram, this is the repo’s main **content/data boundary**: content is centralized and then consumed by multiple route trees and sections.

10. **Styling and design system**
   - Styling is handled with **CSS Modules** per component plus `src/styles/globals.css` for shared tokens and utilities.
   - The README calls out a “Playful Geometric” design system, so visual consistency is achieved through shared tokens rather than a heavy component framework.
   - Fonts and iconography are also part of the visual layer: **Outfit** and **Plus Jakarta Sans**, plus **Devicons via CDN**.

11. **External services and infrastructure**
   - The only clearly material external service in the current architecture is **NextAuth-backed OAuth providers**: Google and GitHub.
   - The repo includes `src/lib/supabase.ts` and `src/lib/db.ts`, but the README says persistence is still mock/in-memory and real database integration is future work.
   - So the current production shape is mostly stateless app-server logic plus auth provider callbacks, not a fully database-driven backend.

12. **Operational boundaries**
   - Public assets live under `public/`, including the main preview image.
   - `next.config.js`, `middleware.ts`, and the API routes are the key runtime boundaries to show in a diagram: request routing, auth interception, and server-side execution.
   - The app is deployable as a typical Next.js app on Vercel, but the current architecture is still centered on app routes, auth, and static content composition rather than a separate backend service.

Main entry points: [`src/auth.ts`](https://github.com/ishratjahanesha21/programming_learning_esz/blob/main/src/auth.ts) (Auth config), [`src/lib/data.ts`](https://github.com/ishratjahanesha21/programming_learning_esz/blob/main/src/lib/data.ts) (Content data), [`src/app/profile/page.tsx`](https://github.com/ishratjahanesha21/programming_learning_esz/blob/main/src/app/profile/page.tsx) (Profile page), [`src/app/api/auth/[...nextauth]/route.ts`](https://github.com/ishratjahanesha21/programming_learning_esz/blob/main/src/app/api/auth/[...nextauth]/route.ts) (Auth API)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_grp_app["App routes"]
  node_node_layout["Root layout<br/>app shell<br/>[layout.tsx]"]
  node_node_home["Home page<br/>server route<br/>[page.tsx]"]
  node_node_login["Login page<br/>auth route<br/>[page.tsx]"]
  node_node_pricing["Pricing page<br/>route page<br/>[page.tsx]"]
  node_node_profile["Profile page<br/>protected route<br/>[page.tsx]"]
  node_node_courses_index["Courses page<br/>catalog route<br/>[page.tsx]"]
  node_node_course_detail["Course detail<br/>course client"]
  node_node_lesson_page["Lesson page<br/>lesson route<br/>[page.tsx]"]
  node_node_lesson_client["Lesson client<br/>[LessonClient.tsx]"]
  node_node_pro_gate["Pro gate<br/>access gate<br/>[ProGate.tsx]"]
  node_node_compiler_page["Compiler page<br/>playground route<br/>[page.tsx]"]
  node_node_compiler_client["Compiler UI<br/>playground client<br/>[CompilerPage.tsx]"]
  node_node_nextauth_route["Auth API<br/>route handler<br/>[route.ts]"]
  node_node_compile_api["Compile API<br/>route handler<br/>[route.ts]"]
end

subgraph group_grp_ui["UI components"]
  node_node_navbar["Navbar<br/>layout nav<br/>[Navbar.tsx]"]
  node_node_footer["Footer<br/>[Footer.tsx]"]
  node_node_auth_modal["Auth modal<br/>ui modal<br/>[AuthModal.tsx]"]
  node_node_course_card["Course card<br/>discovery card<br/>[CourseCard.tsx]"]
  node_node_home_sections["Home sections<br/>landing modules<br/>[HeroSection.tsx]"]
end

subgraph group_grp_core["Core logic"]
  node_node_auth["Auth config<br/>[auth.ts]"]
  node_node_middleware["Middleware<br/>edge guard<br/>[middleware.ts]"]
  node_node_data[("Content data<br/>content source<br/>[data.ts]")]
  node_node_auth_state(("Auth state<br/>ui state"))
end

subgraph group_grp_ext["External services"]
  node_node_google(("Google<br/>oauth provider"))
  node_node_github(("GitHub<br/>oauth provider"))
end

node_node_layout -->|"includes"| node_node_navbar
node_node_layout -->|"includes"| node_node_footer
node_node_home -->|"composes"| node_node_home_sections
node_node_home_sections -->|"reads"| node_node_data
node_node_courses_index -->|"lists"| node_node_course_card
node_node_course_card -->|"opens auth"| node_node_auth_state
node_node_auth_state -->|"controls"| node_node_auth_modal
node_node_login -->|"renders"| node_node_auth_modal
node_node_profile -->|"protected by"| node_node_middleware
node_node_courses_index -->|"protected by"| node_node_middleware
node_node_course_detail -->|"reads"| node_node_data
node_node_lesson_page -->|"composes"| node_node_lesson_client
node_node_lesson_client -->|"checks"| node_node_pro_gate
node_node_lesson_page -->|"reads"| node_node_data
node_node_compiler_page -->|"composes"| node_node_compiler_client
node_node_compiler_client -->|"submits code"| node_node_compile_api
node_node_nextauth_route -->|"uses"| node_node_auth
node_node_auth -->|"provider"| node_node_google
node_node_auth -->|"provider"| node_node_github
node_node_auth -->|"hydrates session"| node_node_profile
node_node_middleware -->|"delegates auth"| node_node_nextauth_route
node_node_profile -->|"reads"| node_node_data
node_node_login -->|"authenticates via"| node_node_nextauth_route

click node_node_layout "https://github.com/ishratjahanesha21/programming_learning_esz/blob/main/src/app/layout.tsx"
click node_node_home "https://github.com/ishratjahanesha21/programming_learning_esz/blob/main/src/app/page.tsx"
click node_node_login "https://github.com/ishratjahanesha21/programming_learning_esz/blob/main/src/app/login/page.tsx"
click node_node_pricing "https://github.com/ishratjahanesha21/programming_learning_esz/blob/main/src/app/pricing/page.tsx"
click node_node_profile "https://github.com/ishratjahanesha21/programming_learning_esz/blob/main/src/app/profile/page.tsx"
click node_node_courses_index "https://github.com/ishratjahanesha21/programming_learning_esz/blob/main/src/app/courses/[id]/page.tsx"
click node_node_course_detail "https://github.com/ishratjahanesha21/programming_learning_esz/blob/main/src/app/courses/[id]/CourseDetailClient.tsx"
click node_node_lesson_page "https://github.com/ishratjahanesha21/programming_learning_esz/blob/main/src/app/courses/[id]/lessons/[lessonId]/page.tsx"
click node_node_lesson_client "https://github.com/ishratjahanesha21/programming_learning_esz/blob/main/src/app/courses/[id]/lessons/[lessonId]/LessonClient.tsx"
click node_node_pro_gate "https://github.com/ishratjahanesha21/programming_learning_esz/blob/main/src/app/courses/[id]/lessons/[lessonId]/ProGate.tsx"
click node_node_compiler_page "https://github.com/ishratjahanesha21/programming_learning_esz/blob/main/src/app/compiler/page.tsx"
click node_node_compiler_client "https://github.com/ishratjahanesha21/programming_learning_esz/blob/main/src/app/compiler/CompilerPage.tsx"
click node_node_navbar "https://github.com/ishratjahanesha21/programming_learning_esz/blob/main/src/components/layout/Navbar.tsx"
click node_node_footer "https://github.com/ishratjahanesha21/programming_learning_esz/blob/main/src/components/layout/Footer.tsx"
click node_node_auth_modal "https://github.com/ishratjahanesha21/programming_learning_esz/blob/main/src/components/auth/AuthModal.tsx"
click node_node_course_card "https://github.com/ishratjahanesha21/programming_learning_esz/blob/main/src/components/courses/CourseCard.tsx"
click node_node_home_sections "https://github.com/ishratjahanesha21/programming_learning_esz/blob/main/src/components/home/HeroSection.tsx"
click node_node_auth "https://github.com/ishratjahanesha21/programming_learning_esz/blob/main/src/auth.ts"
click node_node_middleware "https://github.com/ishratjahanesha21/programming_learning_esz/blob/main/src/middleware.ts"
click node_node_data "https://github.com/ishratjahanesha21/programming_learning_esz/blob/main/src/lib/data.ts"
click node_node_auth_state "https://github.com/ishratjahanesha21/programming_learning_esz/blob/main/src/lib/auth-modal-context.tsx"
click node_node_nextauth_route "https://github.com/ishratjahanesha21/programming_learning_esz/blob/main/src/app/api/auth/[...nextauth]/route.ts"
click node_node_compile_api "https://github.com/ishratjahanesha21/programming_learning_esz/blob/main/src/app/api/compile/route.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_node_layout,node_node_home,node_node_login,node_node_pricing,node_node_profile,node_node_courses_index,node_node_course_detail,node_node_lesson_page,node_node_lesson_client,node_node_pro_gate,node_node_compiler_page,node_node_compiler_client,node_node_nextauth_route,node_node_compile_api toneBlue
class node_node_navbar,node_node_footer,node_node_auth_modal,node_node_course_card,node_node_home_sections toneAmber
class node_node_auth,node_node_middleware,node_node_data,node_node_auth_state toneMint
class node_node_google,node_node_github toneRose
```

## Components

### App routes

Next.js route entry points and request boundaries

- [Root layout](https://github.com/ishratjahanesha21/programming_learning_esz/blob/main/src/app/layout.tsx): app shell · Global app frame with shared navigation and footer · `src/app/layout.tsx`
- [Home page](https://github.com/ishratjahanesha21/programming_learning_esz/blob/main/src/app/page.tsx): server route · Marketing landing page assembled from reusable sections · `src/app/page.tsx`
- [Login page](https://github.com/ishratjahanesha21/programming_learning_esz/blob/main/src/app/login/page.tsx): auth route · Entry page for sign-in flows and auth modal handoff · `src/app/login/page.tsx`
- [Pricing page](https://github.com/ishratjahanesha21/programming_learning_esz/blob/main/src/app/pricing/page.tsx): route page · Pricing surface rendered through a client component · `src/app/pricing/page.tsx`
- [Profile page](https://github.com/ishratjahanesha21/programming_learning_esz/blob/main/src/app/profile/page.tsx): protected route · Authenticated user profile area guarded on server and edge · `src/app/profile/page.tsx`
- [Courses page](https://github.com/ishratjahanesha21/programming_learning_esz/blob/main/src/app/courses/[id]/page.tsx): catalog route · Course listing and discovery entry point · `src/app/courses/[id]/page.tsx`
- [Course detail](https://github.com/ishratjahanesha21/programming_learning_esz/blob/main/src/app/courses/[id]/CourseDetailClient.tsx): course client · Interactive course detail experience for signed-in users · `src/app/courses/[id]/CourseDetailClient.tsx`
- [Lesson page](https://github.com/ishratjahanesha21/programming_learning_esz/blob/main/src/app/courses/[id]/lessons/[lessonId]/page.tsx): lesson route · Nested lesson route that composes lesson access and content · `src/app/courses/[id]/lessons/[lessonId]/page.tsx`
- [Lesson client](https://github.com/ishratjahanesha21/programming_learning_esz/blob/main/src/app/courses/[id]/lessons/[lessonId]/LessonClient.tsx): lesson client · Browser-side lesson viewer and interaction layer · `src/app/courses/[id]/lessons/[lessonId]/LessonClient.tsx`
- [Pro gate](https://github.com/ishratjahanesha21/programming_learning_esz/blob/main/src/app/courses/[id]/lessons/[lessonId]/ProGate.tsx): access gate · Premium or restricted lesson access boundary · `src/app/courses/[id]/lessons/[lessonId]/ProGate.tsx`
- [Compiler page](https://github.com/ishratjahanesha21/programming_learning_esz/blob/main/src/app/compiler/page.tsx): playground route · Browser coding experience entry point · `src/app/compiler/page.tsx`
- [Compiler UI](https://github.com/ishratjahanesha21/programming_learning_esz/blob/main/src/app/compiler/CompilerPage.tsx): playground client · Interactive compiler and editor experience · `src/app/compiler/CompilerPage.tsx`
- [Auth API](https://github.com/ishratjahanesha21/programming_learning_esz/blob/main/src/app/api/auth/[...nextauth]/route.ts): route handler · NextAuth route handler for sign-in and session callbacks · `src/app/api/auth/[...nextauth]/route.ts`
- [Compile API](https://github.com/ishratjahanesha21/programming_learning_esz/blob/main/src/app/api/compile/route.ts): route handler · Server-side compile orchestration endpoint · `src/app/api/compile/route.ts`

### UI components

Reusable interactive and presentational components

- [Navbar](https://github.com/ishratjahanesha21/programming_learning_esz/blob/main/src/components/layout/Navbar.tsx): layout nav · Primary site navigation shell · `src/components/layout/Navbar.tsx`
- [Footer](https://github.com/ishratjahanesha21/programming_learning_esz/blob/main/src/components/layout/Footer.tsx): layout footer · Shared site footer · `src/components/layout/Footer.tsx`
- [Auth modal](https://github.com/ishratjahanesha21/programming_learning_esz/blob/main/src/components/auth/AuthModal.tsx): ui modal · Cross-cutting sign-in modal used from course flows · `src/components/auth/AuthModal.tsx`
- [Course card](https://github.com/ishratjahanesha21/programming_learning_esz/blob/main/src/components/courses/CourseCard.tsx): discovery card · Clickable course entry that can trigger auth gating · `src/components/courses/CourseCard.tsx`
- [Home sections](https://github.com/ishratjahanesha21/programming_learning_esz/blob/main/src/components/home/HeroSection.tsx): landing modules · Hero, marquee, languages, scenarios, testimonials, FAQ, CTA, and compiler teaser · `src/components/home/HeroSection.tsx`

### Core logic

Authentication, shared state, and content sources

- [Auth config](https://github.com/ishratjahanesha21/programming_learning_esz/blob/main/src/auth.ts): nextauth config · NextAuth setup and provider/session wiring · `src/auth.ts`
- [Middleware](https://github.com/ishratjahanesha21/programming_learning_esz/blob/main/src/middleware.ts): edge guard · Edge-level request interception for protected areas · `src/middleware.ts`
- [Content data](https://github.com/ishratjahanesha21/programming_learning_esz/blob/main/src/lib/data.ts): content source · Central content and metadata source for courses, lessons, and home modules · `src/lib/data.ts`
- [Auth state](https://github.com/ishratjahanesha21/programming_learning_esz/blob/main/src/lib/auth-modal-context.tsx): ui state · Shared auth-modal context bridging course cards and login flows · `src/lib/auth-modal-context.tsx`

### External services

Third-party providers and runtime integrations

- **Google**: oauth provider · OAuth sign-in provider
- **GitHub**: oauth provider · OAuth sign-in provider

## Connections

- Root layout → Navbar: includes · Global layout renders shared navigation
- Root layout → Footer: includes · Global layout renders shared footer
- Home page → Home sections: composes · Homepage is assembled from landing sections
- Home sections → Content data: reads · Landing sections consume shared content data
- Courses page → Course card: lists · Course listing renders course cards
- Course card → Auth state: opens auth · Unauthenticated course clicks trigger the auth modal
- Auth state → Auth modal: controls · Shared state drives modal visibility
- Login page → Auth modal: renders · Login surface can present the auth modal experience
- Profile page → Middleware: protected by · Profile route is guarded before render
- Courses page → Middleware: protected by · Course area is intercepted at the edge when needed
- Course detail → Content data: reads · Course detail pulls structured course content
- Lesson page → Lesson client: composes · Lesson route renders the interactive lesson client
- Lesson client → Pro gate: checks · Lesson UI passes through premium access gating
- Lesson page → Content data: reads · Lesson route uses lesson metadata from shared data
- Compiler page → Compiler UI: composes · Compiler route wraps the interactive playground UI
- Compiler UI → Compile API: submits code · Client sends code to the server compile endpoint
- Auth API → Auth config: uses · Auth route is backed by shared NextAuth configuration
- Auth config → Google: provider · Google OAuth is enabled for sign-in
- Auth config → GitHub: provider · GitHub OAuth is enabled for sign-in
- Auth config → Profile page: hydrates session · Session typing and auth state affect protected views
- Middleware → Auth API: delegates auth · Edge guard relies on auth session behavior
- Profile page → Content data: reads · Profile and learning views reuse shared content definitions
- Login page → Auth API: authenticates via · Login flow reaches the NextAuth route handler