# jvivekvardhan/ocms-project architecture

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

- Interactive diagram: https://gitdiagram.com/jvivekvardhan/ocms-project
- Repository: https://github.com/jvivekvardhan/ocms-project

## Overview

OCMS is a React frontend for student course discovery and enrollment, lesson viewing, and admin course and lesson management. The main flow starts in App, which selects the registration/login view or a role-specific dashboard using browser-stored credentials. Student views fetch courses, submit enrollments, and display lessons; admin actions create and delete courses and add lessons. The sampled pages make direct Axios requests to the documented backend. The backend is represented as an external service; its internal behavior is outside this repository.

Main entry points: [`src/App.js`](https://github.com/jvivekvardhan/ocms-project/blob/main/src/App.js) (Role-based App), [`src/pages/Login.js`](https://github.com/jvivekvardhan/ocms-project/blob/main/src/pages/Login.js) (Login), [`src/pages/Courses.js`](https://github.com/jvivekvardhan/ocms-project/blob/main/src/pages/Courses.js) (Course Catalog), [`src/pages/Register.js`](https://github.com/jvivekvardhan/ocms-project/blob/main/src/pages/Register.js) (Registration)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_shell["Application Shell"]
  node_app["Role-based App<br/>[App.js]"]
  node_navbar["Navigation and Logout<br/>[Navbar.js]"]
end

subgraph group_identity["Identity"]
  node_register["Registration<br/>[Register.js]"]
  node_login["Login<br/>[Login.js]"]
end

subgraph group_learning["Student Learning"]
  node_catalog["Course Catalog<br/>[Courses.js]"]
  node_mycourses["Enrolled Courses<br/>[MyCourses.js]"]
  node_content["Lesson Viewer<br/>[CourseContent.js]"]
end

subgraph group_admin["Administration"]
  node_adminui["Course and Lesson Admin<br/>[AdminDashboard.js]"]
end

subgraph group_services["State and Services"]
  node_localstorage[("Browser Local Storage")]
  node_backend["OCMS Backend"]
end

node_student(("Student"))
node_administrator(("Administrator"))

node_student -->|"uses"| node_app
node_administrator -->|"uses"| node_app
node_app -->|"renders"| node_navbar
node_app -->|"renders when signed out"| node_register
node_app -->|"renders when signed out"| node_login
node_app -->|"renders for students"| node_catalog
node_app -->|"renders for students"| node_mycourses
node_app -->|"renders for admins"| node_adminui
node_localstorage -->|"provides token and role"| node_app
node_student -->|"submits details"| node_register
node_student -->|"submits credentials"| node_login
node_login -->|"stores session"| node_localstorage
node_navbar -->|"reads and clears"| node_localstorage
node_register -->|"posts registration"| node_backend
node_login -->|"posts login"| node_backend
node_student -->|"browses and enrolls"| node_catalog
node_catalog -->|"fetches and enrolls"| node_backend
node_catalog -->|"renders selected course"| node_content
node_content -->|"fetches lessons"| node_backend
node_mycourses -->|"fetches enrollments"| node_backend
node_administrator -->|"manages courses"| node_adminui
node_adminui -->|"lists and manages courses and lessons"| node_backend

click node_app "https://github.com/jvivekvardhan/ocms-project/blob/main/src/App.js"
click node_navbar "https://github.com/jvivekvardhan/ocms-project/blob/main/src/pages/components/Navbar.js"
click node_register "https://github.com/jvivekvardhan/ocms-project/blob/main/src/pages/Register.js"
click node_login "https://github.com/jvivekvardhan/ocms-project/blob/main/src/pages/Login.js"
click node_catalog "https://github.com/jvivekvardhan/ocms-project/blob/main/src/pages/Courses.js"
click node_mycourses "https://github.com/jvivekvardhan/ocms-project/blob/main/src/pages/MyCourses.js"
click node_content "https://github.com/jvivekvardhan/ocms-project/blob/main/src/pages/CourseContent.js"
click node_adminui "https://github.com/jvivekvardhan/ocms-project/blob/main/src/pages/AdminDashboard.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_navbar toneBlue
class node_register,node_login toneAmber
class node_catalog,node_mycourses,node_content toneMint
class node_adminui toneRose
class node_localstorage,node_backend,node_student,node_administrator toneIndigo
```

## Components

### Application Shell

- [Role-based App](https://github.com/jvivekvardhan/ocms-project/blob/main/src/App.js): `src/App.js`
- [Navigation and Logout](https://github.com/jvivekvardhan/ocms-project/blob/main/src/pages/components/Navbar.js): `src/pages/components/Navbar.js`

### Identity

- [Registration](https://github.com/jvivekvardhan/ocms-project/blob/main/src/pages/Register.js): `src/pages/Register.js`
- [Login](https://github.com/jvivekvardhan/ocms-project/blob/main/src/pages/Login.js): `src/pages/Login.js`

### Student Learning

- [Course Catalog](https://github.com/jvivekvardhan/ocms-project/blob/main/src/pages/Courses.js): `src/pages/Courses.js`
- [Enrolled Courses](https://github.com/jvivekvardhan/ocms-project/blob/main/src/pages/MyCourses.js): `src/pages/MyCourses.js`
- [Lesson Viewer](https://github.com/jvivekvardhan/ocms-project/blob/main/src/pages/CourseContent.js): `src/pages/CourseContent.js`

### Administration

- [Course and Lesson Admin](https://github.com/jvivekvardhan/ocms-project/blob/main/src/pages/AdminDashboard.js): `src/pages/AdminDashboard.js`

### State and Services

- **Browser Local Storage**
- **OCMS Backend**

### Other components

- **Student**
- **Administrator**

## Connections

- Student → Role-based App: uses (evidence: `src/App.js`)
- Administrator → Role-based App: uses (evidence: `src/App.js`)
- Role-based App → Navigation and Logout: renders (evidence: `src/App.js`)
- Role-based App → Registration: renders when signed out (evidence: `src/App.js`)
- Role-based App → Login: renders when signed out (evidence: `src/App.js`)
- Role-based App → Course Catalog: renders for students (evidence: `src/App.js`)
- Role-based App → Enrolled Courses: renders for students (evidence: `src/App.js`)
- Role-based App → Course and Lesson Admin: renders for admins (evidence: `src/App.js`)
- Browser Local Storage → Role-based App: provides token and role (evidence: `src/App.js`)
- Student → Registration: submits details (evidence: `src/pages/Register.js`)
- Student → Login: submits credentials (evidence: `src/pages/Login.js`)
- Login → Browser Local Storage: stores session (evidence: `src/pages/Login.js`)
- Navigation and Logout → Browser Local Storage: reads and clears (evidence: `src/pages/components/Navbar.js`)
- Registration → OCMS Backend: posts registration (evidence: `src/pages/Register.js`)
- Login → OCMS Backend: posts login (evidence: `src/pages/Login.js`)
- Student → Course Catalog: browses and enrolls (evidence: `src/pages/Courses.js`)
- Course Catalog → OCMS Backend: fetches and enrolls (evidence: `src/pages/Courses.js`)
- Course Catalog → Lesson Viewer: renders selected course (evidence: `src/pages/Courses.js`)
- Lesson Viewer → OCMS Backend: fetches lessons (evidence: `src/pages/CourseContent.js`)
- Enrolled Courses → OCMS Backend: fetches enrollments (evidence: `src/pages/MyCourses.js`)
- Administrator → Course and Lesson Admin: manages courses (evidence: `src/pages/AdminDashboard.js`)
- Course and Lesson Admin → OCMS Backend: lists and manages courses and lessons (evidence: `src/pages/AdminDashboard.js`)