# ayaz-11257/lms-frontend architecture

> Architecture diagram of the GitHub repository ayaz-11257/lms-frontend, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-26). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/ayaz-11257/lms-frontend
- Repository: https://github.com/ayaz-11257/lms-frontend

## Overview

LMS Frontend is a React learning-management interface for account creation, course discovery and administration, subscription checkout, and lecture access. The main learner flow is to browse courses, inspect a course, purchase the all-courses subscription, and then access lectures; authentication and role checks gate protected routes. Admins create courses and lectures and view course, user, and payment statistics. Redux slices provide the state/action layer, with Axios-based requests represented at the API boundary. Some slice implementations and page wiring were not sampled, so uncertain links are omitted.

Main entry points: [`src/App.jsx`](https://github.com/ayaz-11257/lms-frontend/blob/master/src/App.jsx) (Route application), [`src/Components/Auth/RequireAuth.jsx`](https://github.com/ayaz-11257/lms-frontend/blob/master/src/Components/Auth/RequireAuth.jsx) (Role guard), [`src/Helpers/axiosInstance.js`](https://github.com/ayaz-11257/lms-frontend/blob/master/src/Helpers/axiosInstance.js) (HTTP client), [`src/Pages/Payment/Checkout.jsx`](https://github.com/ayaz-11257/lms-frontend/blob/master/src/Pages/Payment/Checkout.jsx) (Subscription checkout)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_routing["App and navigation"]
  node_app["Route application<br/>[App.jsx]"]
  node_layout["Navigation layout<br/>[HomeLayout.jsx]"]
  node_auth_guard["Role guard<br/>[RequireAuth.jsx]"]
  node_store["Redux store<br/>[store.js]"]
  node_api_client["HTTP client<br/>[axiosInstance.js]"]
end

subgraph group_identity["Accounts and profiles"]
  node_account_pages["Sign-in and signup<br/>[Signup.jsx]"]
  node_profile_pages["Profile management"]
  node_auth_slice["Auth actions<br/>[AuthSlice.js]"]
end

subgraph group_learning["Courses and lectures"]
  node_courses_page["Course discovery<br/>[CourseList.jsx]"]
  node_course_detail["Course description"]
  node_course_card["Course card<br/>[CourseCard.jsx]"]
  node_course_create["Course authoring<br/>[CreateCourse.jsx]"]
  node_lecture_pages["Lecture management"]
  node_course_slice["Course actions<br/>[CourseSlice.js]"]
  node_lecture_slice["Lecture actions<br/>[LectureSlice.js]"]
end

subgraph group_commerce["Subscription payments"]
  node_checkout["Subscription checkout<br/>[Checkout.jsx]"]
  node_payment_results["Payment outcomes"]
  node_payment_slice["Payment actions<br/>[RazorpaySlice.js]"]
end

subgraph group_admin["Administration"]
  node_admin_dashboard["Admin dashboard<br/>[AdminDashboard.jsx]"]
  node_stats_slice["Statistics actions<br/>[StatSlice.js]"]
end

node_learner(("Learner"))
node_administrator(("Administrator"))
node_razorpay["Razorpay"]
node_backend["LMS backend"]

node_learner -->|"uses"| node_app
node_administrator -->|"uses"| node_app
node_app -->|"routes"| node_account_pages
node_app -->|"routes"| node_courses_page
node_app -->|"routes"| node_course_detail
node_app -->|"guards routes"| node_auth_guard
node_auth_guard -->|"allows roles"| node_profile_pages
node_auth_guard -->|"allows roles"| node_checkout
node_auth_guard -->|"allows roles"| node_lecture_pages
node_auth_guard -->|"allows admins"| node_course_create
node_auth_guard -->|"allows admins"| node_admin_dashboard
node_account_pages -->|"dispatches"| node_auth_slice
node_profile_pages -->|"dispatches"| node_auth_slice
node_layout -->|"dispatches logout"| node_auth_slice
node_app -->|"renders pages in"| node_layout
node_auth_slice -->|"requests"| node_api_client
node_api_client -->|"sends HTTP"| node_backend
node_course_card -->|"opens"| node_course_detail
node_courses_page -->|"renders"| node_course_card
node_course_create -->|"dispatches"| node_course_slice
node_courses_page -->|"course data actions"| node_course_slice
node_lecture_pages -->|"lecture actions"| node_lecture_slice
node_course_slice -->|"requests"| node_api_client
node_lecture_slice -->|"requests"| node_api_client
node_course_detail -->|"continues to purchase"| node_checkout
node_checkout -->|"dispatches"| node_payment_slice
node_payment_slice -->|"requests"| node_api_client
node_payment_slice -.->|"payment integration"| node_razorpay
node_checkout -.->|"opens checkout"| node_razorpay
node_checkout -->|"navigates on outcome"| node_payment_results
node_admin_dashboard -->|"loads and deletes courses"| node_course_slice
node_admin_dashboard -->|"loads statistics"| node_stats_slice
node_admin_dashboard -->|"loads payment records"| node_payment_slice
node_stats_slice -->|"requests"| node_api_client

click node_app "https://github.com/ayaz-11257/lms-frontend/blob/master/src/App.jsx"
click node_layout "https://github.com/ayaz-11257/lms-frontend/blob/master/src/Layouts/HomeLayout.jsx"
click node_auth_guard "https://github.com/ayaz-11257/lms-frontend/blob/master/src/Components/Auth/RequireAuth.jsx"
click node_store "https://github.com/ayaz-11257/lms-frontend/blob/master/src/Redux/store.js"
click node_account_pages "https://github.com/ayaz-11257/lms-frontend/blob/master/src/Pages/Signup.jsx"
click node_profile_pages "https://github.com/ayaz-11257/lms-frontend/tree/master/src/Pages/User"
click node_auth_slice "https://github.com/ayaz-11257/lms-frontend/blob/master/src/Redux/Slices/AuthSlice.js"
click node_courses_page "https://github.com/ayaz-11257/lms-frontend/blob/master/src/Pages/Course/CourseList.jsx"
click node_course_detail "https://github.com/ayaz-11257/lms-frontend/blob/master/src/Pages/Course/CourseDescription.jsx"
click node_course_card "https://github.com/ayaz-11257/lms-frontend/blob/master/src/Components/CourseCard.jsx"
click node_course_create "https://github.com/ayaz-11257/lms-frontend/blob/master/src/Pages/Course/CreateCourse.jsx"
click node_lecture_pages "https://github.com/ayaz-11257/lms-frontend/tree/master/src/Pages/Dashboard"
click node_course_slice "https://github.com/ayaz-11257/lms-frontend/blob/master/src/Redux/Slices/CourseSlice.js"
click node_lecture_slice "https://github.com/ayaz-11257/lms-frontend/blob/master/src/Redux/Slices/LectureSlice.js"
click node_checkout "https://github.com/ayaz-11257/lms-frontend/blob/master/src/Pages/Payment/Checkout.jsx"
click node_payment_results "https://github.com/ayaz-11257/lms-frontend/tree/master/src/Pages/Payment"
click node_payment_slice "https://github.com/ayaz-11257/lms-frontend/blob/master/src/Redux/Slices/RazorpaySlice.js"
click node_admin_dashboard "https://github.com/ayaz-11257/lms-frontend/blob/master/src/Pages/Dashboard/AdminDashboard.jsx"
click node_stats_slice "https://github.com/ayaz-11257/lms-frontend/blob/master/src/Redux/Slices/StatSlice.js"
click node_api_client "https://github.com/ayaz-11257/lms-frontend/blob/master/src/Helpers/axiosInstance.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_layout,node_auth_guard,node_store,node_api_client toneBlue
class node_account_pages,node_profile_pages,node_auth_slice toneAmber
class node_courses_page,node_course_detail,node_course_card,node_course_create,node_lecture_pages,node_course_slice,node_lecture_slice toneMint
class node_checkout,node_payment_results,node_payment_slice toneRose
class node_admin_dashboard,node_stats_slice,node_learner,node_administrator,node_razorpay,node_backend toneIndigo
```

## Components

### App and navigation

- [Route application](https://github.com/ayaz-11257/lms-frontend/blob/master/src/App.jsx): `src/App.jsx`
- [Navigation layout](https://github.com/ayaz-11257/lms-frontend/blob/master/src/Layouts/HomeLayout.jsx): `src/Layouts/HomeLayout.jsx`
- [Role guard](https://github.com/ayaz-11257/lms-frontend/blob/master/src/Components/Auth/RequireAuth.jsx): `src/Components/Auth/RequireAuth.jsx`
- [Redux store](https://github.com/ayaz-11257/lms-frontend/blob/master/src/Redux/store.js): `src/Redux/store.js`
- [HTTP client](https://github.com/ayaz-11257/lms-frontend/blob/master/src/Helpers/axiosInstance.js): `src/Helpers/axiosInstance.js`

### Accounts and profiles

- [Sign-in and signup](https://github.com/ayaz-11257/lms-frontend/blob/master/src/Pages/Signup.jsx): `src/Pages/Signup.jsx`
- [Profile management](https://github.com/ayaz-11257/lms-frontend/tree/master/src/Pages/User): `src/Pages/User`
- [Auth actions](https://github.com/ayaz-11257/lms-frontend/blob/master/src/Redux/Slices/AuthSlice.js): `src/Redux/Slices/AuthSlice.js`

### Courses and lectures

- [Course discovery](https://github.com/ayaz-11257/lms-frontend/blob/master/src/Pages/Course/CourseList.jsx): `src/Pages/Course/CourseList.jsx`
- [Course description](https://github.com/ayaz-11257/lms-frontend/blob/master/src/Pages/Course/CourseDescription.jsx): `src/Pages/Course/CourseDescription.jsx`
- [Course card](https://github.com/ayaz-11257/lms-frontend/blob/master/src/Components/CourseCard.jsx): `src/Components/CourseCard.jsx`
- [Course authoring](https://github.com/ayaz-11257/lms-frontend/blob/master/src/Pages/Course/CreateCourse.jsx): `src/Pages/Course/CreateCourse.jsx`
- [Lecture management](https://github.com/ayaz-11257/lms-frontend/tree/master/src/Pages/Dashboard): `src/Pages/Dashboard`
- [Course actions](https://github.com/ayaz-11257/lms-frontend/blob/master/src/Redux/Slices/CourseSlice.js): `src/Redux/Slices/CourseSlice.js`
- [Lecture actions](https://github.com/ayaz-11257/lms-frontend/blob/master/src/Redux/Slices/LectureSlice.js): `src/Redux/Slices/LectureSlice.js`

### Subscription payments

- [Subscription checkout](https://github.com/ayaz-11257/lms-frontend/blob/master/src/Pages/Payment/Checkout.jsx): `src/Pages/Payment/Checkout.jsx`
- [Payment outcomes](https://github.com/ayaz-11257/lms-frontend/tree/master/src/Pages/Payment): `src/Pages/Payment`
- [Payment actions](https://github.com/ayaz-11257/lms-frontend/blob/master/src/Redux/Slices/RazorpaySlice.js): `src/Redux/Slices/RazorpaySlice.js`

### Administration

- [Admin dashboard](https://github.com/ayaz-11257/lms-frontend/blob/master/src/Pages/Dashboard/AdminDashboard.jsx): `src/Pages/Dashboard/AdminDashboard.jsx`
- [Statistics actions](https://github.com/ayaz-11257/lms-frontend/blob/master/src/Redux/Slices/StatSlice.js): `src/Redux/Slices/StatSlice.js`

### Other components

- **Learner**
- **Administrator**
- **Razorpay**
- **LMS backend**

## Connections

- Learner → Route application: uses
- Administrator → Route application: uses
- Route application → Sign-in and signup: routes
- Route application → Course discovery: routes
- Route application → Course description: routes
- Route application → Role guard: guards routes
- Role guard → Profile management: allows roles
- Role guard → Subscription checkout: allows roles
- Role guard → Lecture management: allows roles
- Role guard → Course authoring: allows admins
- Role guard → Admin dashboard: allows admins
- Sign-in and signup → Auth actions: dispatches
- Profile management → Auth actions: dispatches
- Navigation layout → Auth actions: dispatches logout
- Route application → Navigation layout: renders pages in
- Auth actions → HTTP client: requests
- HTTP client → LMS backend: sends HTTP
- Course card → Course description: opens
- Course discovery → Course card: renders
- Course authoring → Course actions: dispatches
- Course discovery → Course actions: course data actions
- Lecture management → Lecture actions: lecture actions
- Course actions → HTTP client: requests
- Lecture actions → HTTP client: requests
- Course description → Subscription checkout: continues to purchase
- Subscription checkout → Payment actions: dispatches
- Payment actions → HTTP client: requests
- Payment actions → Razorpay: payment integration
- Subscription checkout → Razorpay: opens checkout
- Subscription checkout → Payment outcomes: navigates on outcome
- Admin dashboard → Course actions: loads and deletes courses
- Admin dashboard → Statistics actions: loads statistics
- Admin dashboard → Payment actions: loads payment records
- Statistics actions → HTTP client: requests