# ak4409/full_stack_project architecture

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

- Interactive diagram: https://gitdiagram.com/ak4409/full_stack_project
- Repository: https://github.com/ak4409/full_stack_project

## Overview

This is a React frontend for Cloud Code, an LMS. The main user journey is browsing course listings and details, then using student dashboards, course lessons, and quizzes; instructors can create/manage courses and administrators manage users and courses. The graph also shows shared authentication state and the local course and learning datasets. Evidence is limited to the supplied excerpts, SOURCE INDEX references, and README; unsampled page behavior is not inferred beyond those references.

Main entry points: [`LMS_Frontend/src/App.tsx`](https://github.com/ak4409/full_stack_project/blob/main/LMS_Frontend/src/App.tsx) (Route application), [`LMS_Frontend/src/data/courses.ts`](https://github.com/ak4409/full_stack_project/blob/main/LMS_Frontend/src/data/courses.ts) (Course data), [`LMS_Frontend/src/data`](https://github.com/ak4409/full_stack_project/tree/main/LMS_Frontend/src/data) (Learning data), [`LMS_Frontend/src/componets/layout/DashboardLayout.tsx`](https://github.com/ak4409/full_stack_project/blob/main/LMS_Frontend/src/componets/layout/DashboardLayout.tsx) (Dashboard layout)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_discovery["Course discovery"]
  node_home["Home<br/>[Home.tsx]"]
  node_catalog["Course catalog<br/>[Courses.tsx]"]
  node_course_detail["Course details<br/>[CourseDetails.tsx]"]
  node_course_grid["Course grid<br/>[CourseGrid.tsx]"]
end

subgraph group_learning["Student learning"]
  node_student_dashboard["Student dashboard<br/>[Dashboard.tsx]"]
  node_my_courses["My courses<br/>[MyCourses.tsx]"]
  node_course_learn["Lesson player<br/>[CourseLearn.tsx]"]
  node_quiz["Quizzes<br/>[Quiz.tsx]"]
end

subgraph group_operations["Platform operations"]
  node_instructor_create["Course authoring<br/>[CreateCourse.tsx]"]
  node_instructor_courses["Instructor courses<br/>[Courses.tsx]"]
  node_admin_courses["Course administration<br/>[Courses.tsx]"]
  node_admin_users["User administration<br/>[Users.tsx]"]
end

subgraph group_shared["Shared runtime and data"]
  node_app["Route application<br/>[App.tsx]"]
  node_auth["Authentication state<br/>[AuthContext.tsx]"]
  node_course_data["Course data<br/>[courses.ts]"]
  node_learning_data["Learning data"]
  node_course_components["Course presentation"]
  node_dashboard_layout["Dashboard layout"]
end

node_visitor(("Learner or visitor"))

node_visitor -->|"opens"| node_app
node_app -->|"routes to"| node_home
node_app -->|"routes to"| node_catalog
node_app -->|"routes to"| node_course_detail
node_app -->|"routes to"| node_student_dashboard
node_app -->|"routes to"| node_my_courses
node_app -->|"routes to"| node_course_learn
node_app -->|"routes to"| node_quiz
node_app -->|"routes to"| node_instructor_create
node_app -->|"routes to"| node_instructor_courses
node_app -->|"routes to"| node_admin_courses
node_app -->|"routes to"| node_admin_users
node_home -->|"renders"| node_course_grid
node_home -->|"reads"| node_course_data
node_course_grid -->|"uses"| node_course_components
node_course_detail -->|"reads"| node_course_data
node_student_dashboard -->|"reads"| node_auth
node_student_dashboard -->|"reads"| node_learning_data
node_course_learn -->|"reads"| node_course_data
node_course_learn -->|"reads"| node_learning_data
node_quiz -->|"reads"| node_learning_data
node_instructor_create -.->|"reads"| node_learning_data
node_instructor_create -->|"uses"| node_dashboard_layout
node_instructor_courses -->|"reads"| node_course_data
node_instructor_courses -->|"uses"| node_dashboard_layout
node_admin_courses -->|"reads"| node_course_data
node_admin_courses -->|"uses"| node_dashboard_layout
node_admin_users -->|"uses"| node_auth
node_admin_users -->|"uses"| node_dashboard_layout

click node_app "https://github.com/ak4409/full_stack_project/blob/main/LMS_Frontend/src/App.tsx"
click node_home "https://github.com/ak4409/full_stack_project/blob/main/LMS_Frontend/src/pages/Home.tsx"
click node_catalog "https://github.com/ak4409/full_stack_project/blob/main/LMS_Frontend/src/pages/Courses.tsx"
click node_course_detail "https://github.com/ak4409/full_stack_project/blob/main/LMS_Frontend/src/pages/CourseDetails.tsx"
click node_course_grid "https://github.com/ak4409/full_stack_project/blob/main/LMS_Frontend/src/componets/course/CourseGrid.tsx"
click node_student_dashboard "https://github.com/ak4409/full_stack_project/blob/main/LMS_Frontend/src/pages/student/Dashboard.tsx"
click node_my_courses "https://github.com/ak4409/full_stack_project/blob/main/LMS_Frontend/src/pages/student/MyCourses.tsx"
click node_course_learn "https://github.com/ak4409/full_stack_project/blob/main/LMS_Frontend/src/pages/student/CourseLearn.tsx"
click node_quiz "https://github.com/ak4409/full_stack_project/blob/main/LMS_Frontend/src/pages/student/Quiz.tsx"
click node_instructor_create "https://github.com/ak4409/full_stack_project/blob/main/LMS_Frontend/src/pages/instructor/CreateCourse.tsx"
click node_instructor_courses "https://github.com/ak4409/full_stack_project/blob/main/LMS_Frontend/src/pages/instructor/Courses.tsx"
click node_admin_courses "https://github.com/ak4409/full_stack_project/blob/main/LMS_Frontend/src/pages/admin/Courses.tsx"
click node_admin_users "https://github.com/ak4409/full_stack_project/blob/main/LMS_Frontend/src/pages/admin/Users.tsx"
click node_auth "https://github.com/ak4409/full_stack_project/blob/main/LMS_Frontend/src/context/AuthContext.tsx"
click node_course_data "https://github.com/ak4409/full_stack_project/blob/main/LMS_Frontend/src/data/courses.ts"
click node_learning_data "https://github.com/ak4409/full_stack_project/tree/main/LMS_Frontend/src/data"
click node_course_components "https://github.com/ak4409/full_stack_project/tree/main/LMS_Frontend/src/componets/course"
click node_dashboard_layout "https://github.com/ak4409/full_stack_project/blob/main/LMS_Frontend/src/componets/layout/DashboardLayout.tsx"

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_home,node_catalog,node_course_detail,node_course_grid toneBlue
class node_student_dashboard,node_my_courses,node_course_learn,node_quiz toneAmber
class node_instructor_create,node_instructor_courses,node_admin_courses,node_admin_users toneMint
class node_app,node_auth,node_course_data,node_learning_data,node_course_components,node_dashboard_layout toneRose
class node_visitor toneIndigo
```

## Components

### Course discovery

- [Home](https://github.com/ak4409/full_stack_project/blob/main/LMS_Frontend/src/pages/Home.tsx): `LMS_Frontend/src/pages/Home.tsx`
- [Course catalog](https://github.com/ak4409/full_stack_project/blob/main/LMS_Frontend/src/pages/Courses.tsx): `LMS_Frontend/src/pages/Courses.tsx`
- [Course details](https://github.com/ak4409/full_stack_project/blob/main/LMS_Frontend/src/pages/CourseDetails.tsx): `LMS_Frontend/src/pages/CourseDetails.tsx`
- [Course grid](https://github.com/ak4409/full_stack_project/blob/main/LMS_Frontend/src/componets/course/CourseGrid.tsx): `LMS_Frontend/src/componets/course/CourseGrid.tsx`

### Student learning

- [Student dashboard](https://github.com/ak4409/full_stack_project/blob/main/LMS_Frontend/src/pages/student/Dashboard.tsx): `LMS_Frontend/src/pages/student/Dashboard.tsx`
- [My courses](https://github.com/ak4409/full_stack_project/blob/main/LMS_Frontend/src/pages/student/MyCourses.tsx): `LMS_Frontend/src/pages/student/MyCourses.tsx`
- [Lesson player](https://github.com/ak4409/full_stack_project/blob/main/LMS_Frontend/src/pages/student/CourseLearn.tsx): `LMS_Frontend/src/pages/student/CourseLearn.tsx`
- [Quizzes](https://github.com/ak4409/full_stack_project/blob/main/LMS_Frontend/src/pages/student/Quiz.tsx): `LMS_Frontend/src/pages/student/Quiz.tsx`

### Platform operations

- [Course authoring](https://github.com/ak4409/full_stack_project/blob/main/LMS_Frontend/src/pages/instructor/CreateCourse.tsx): `LMS_Frontend/src/pages/instructor/CreateCourse.tsx`
- [Instructor courses](https://github.com/ak4409/full_stack_project/blob/main/LMS_Frontend/src/pages/instructor/Courses.tsx): `LMS_Frontend/src/pages/instructor/Courses.tsx`
- [Course administration](https://github.com/ak4409/full_stack_project/blob/main/LMS_Frontend/src/pages/admin/Courses.tsx): `LMS_Frontend/src/pages/admin/Courses.tsx`
- [User administration](https://github.com/ak4409/full_stack_project/blob/main/LMS_Frontend/src/pages/admin/Users.tsx): `LMS_Frontend/src/pages/admin/Users.tsx`

### Shared runtime and data

- [Route application](https://github.com/ak4409/full_stack_project/blob/main/LMS_Frontend/src/App.tsx): `LMS_Frontend/src/App.tsx`
- [Authentication state](https://github.com/ak4409/full_stack_project/blob/main/LMS_Frontend/src/context/AuthContext.tsx): `LMS_Frontend/src/context/AuthContext.tsx`
- [Course data](https://github.com/ak4409/full_stack_project/blob/main/LMS_Frontend/src/data/courses.ts): `LMS_Frontend/src/data/courses.ts`
- [Learning data](https://github.com/ak4409/full_stack_project/tree/main/LMS_Frontend/src/data): `LMS_Frontend/src/data`
- [Course presentation](https://github.com/ak4409/full_stack_project/tree/main/LMS_Frontend/src/componets/course): `LMS_Frontend/src/componets/course`
- [Dashboard layout](https://github.com/ak4409/full_stack_project/blob/main/LMS_Frontend/src/componets/layout/DashboardLayout.tsx): `LMS_Frontend/src/componets/layout/DashboardLayout.tsx`

### Other components

- **Learner or visitor**

## Connections

- Learner or visitor → Route application: opens (evidence: `LMS_Frontend/src/App.tsx`)
- Route application → Home: routes to (evidence: `LMS_Frontend/src/App.tsx`)
- Route application → Course catalog: routes to (evidence: `LMS_Frontend/src/App.tsx`)
- Route application → Course details: routes to (evidence: `LMS_Frontend/src/App.tsx`)
- Route application → Student dashboard: routes to (evidence: `LMS_Frontend/src/App.tsx`)
- Route application → My courses: routes to (evidence: `LMS_Frontend/src/App.tsx`)
- Route application → Lesson player: routes to (evidence: `LMS_Frontend/src/App.tsx`)
- Route application → Quizzes: routes to (evidence: `LMS_Frontend/src/App.tsx`)
- Route application → Course authoring: routes to (evidence: `LMS_Frontend/src/App.tsx`)
- Route application → Instructor courses: routes to (evidence: `LMS_Frontend/src/App.tsx`)
- Route application → Course administration: routes to (evidence: `LMS_Frontend/src/App.tsx`)
- Route application → User administration: routes to (evidence: `LMS_Frontend/src/App.tsx`)
- Home → Course grid: renders (evidence: `LMS_Frontend/src/pages/Home.tsx`)
- Home → Course data: reads (evidence: `LMS_Frontend/src/pages/Home.tsx`)
- Course grid → Course presentation: uses (evidence: `LMS_Frontend/src/componets/course/CourseGrid.tsx`)
- Course details → Course data: reads (evidence: `LMS_Frontend/src/pages/CourseDetails.tsx`)
- Student dashboard → Authentication state: reads (evidence: `LMS_Frontend/src/pages/student/Dashboard.tsx`)
- Student dashboard → Learning data: reads (evidence: `LMS_Frontend/src/pages/student/Dashboard.tsx`)
- Lesson player → Course data: reads (evidence: `LMS_Frontend/src/pages/student/CourseLearn.tsx`)
- Lesson player → Learning data: reads (evidence: `LMS_Frontend/src/pages/student/CourseLearn.tsx`)
- Quizzes → Learning data: reads (evidence: `LMS_Frontend/src/pages/student/Quiz.tsx`)
- Course authoring → Learning data: reads (evidence: `LMS_Frontend/src/pages/instructor/CreateCourse.tsx`)
- Course authoring → Dashboard layout: uses (evidence: `LMS_Frontend/src/pages/instructor/CreateCourse.tsx`)
- Instructor courses → Course data: reads (evidence: `LMS_Frontend/src/pages/instructor/Courses.tsx`)
- Instructor courses → Dashboard layout: uses (evidence: `LMS_Frontend/src/pages/instructor/Courses.tsx`)
- Course administration → Course data: reads (evidence: `LMS_Frontend/src/pages/admin/Courses.tsx`)
- Course administration → Dashboard layout: uses (evidence: `LMS_Frontend/src/pages/admin/Courses.tsx`)
- User administration → Authentication state: uses (evidence: `LMS_Frontend/src/pages/admin/Users.tsx`)
- User administration → Dashboard layout: uses (evidence: `LMS_Frontend/src/pages/admin/Users.tsx`)