# omaremad20/course-management-dashboard architecture

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

- Interactive diagram: https://gitdiagram.com/omaremad20/course-management-dashboard
- Repository: https://github.com/omaremad20/course-management-dashboard

## Overview

This is an Angular course-management dashboard. Users browse, search, filter, and page through courses, then view details or add, edit, and delete records; form validation and confirmation/notification flows support those actions. The graph follows the documented capabilities and the sampled route, page, service, and delete-action code. Some reusable UI and API behavior is documented but not sampled, so those links rely on the README where stated; unsampled internals are not inferred.

Main entry points: [`src/app/features/courses/pages/course-list/course-list.ts`](https://github.com/omaremad20/course-management-dashboard/blob/main/src/app/features/courses/pages/course-list/course-list.ts) (Course list), [`src/app/app.routes.ts`](https://github.com/omaremad20/course-management-dashboard/blob/main/src/app/app.routes.ts) (Route dispatch), [`src/app/features/courses/pages/course-form/course-form.ts`](https://github.com/omaremad20/course-management-dashboard/blob/main/src/app/features/courses/pages/course-form/course-form.ts) (Course form), [`src/app/features/courses/services/courses/deleteCourseAction/delete-course-action.ts`](https://github.com/omaremad20/course-management-dashboard/blob/main/src/app/features/courses/services/courses/deleteCourseAction/delete-course-action.ts) (Delete action)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application"]
  node_shell["App shell<br/>[app.ts]"]
  node_routing["Route dispatch<br/>[app.routes.ts]"]
end

subgraph group_courses["Course workflows"]
  node_list["Course list<br/>[course-list.ts]"]
  node_details["Course details<br/>[course-details.ts]"]
  node_form["Course form<br/>[course-form.ts]"]
  node_models["Course models<br/>[ICourse.ts]"]
  node_cards["Course cards<br/>[course-card.ts]"]
  node_empty["Empty courses"]
  node_delete["Delete action"]
  node_guard["Form exit guard<br/>[form-exit-guard.ts]"]
end

subgraph group_shared["Shared UI"]
  node_table["Generic table<br/>[generic-table.ts]"]
  node_feedback["Error states<br/>[error-state.ts]"]
  node_formfield["Form fields<br/>[form-field.ts]"]
  node_confirm["Confirm dialog<br/>[confirm-dialog.ts]"]
  node_navbar["Navigation bar<br/>[navbar.ts]"]
end

subgraph group_services["Services"]
  node_courseapi["Courses service<br/>[courses.ts]"]
  node_dialogservice["Dialog service<br/>[dialog.ts]"]
  node_snackbar["Snackbar service<br/>[snackbar.ts]"]
end

node_user(("Course manager"))
node_backend["Course REST API"]

node_user -->|"uses"| node_shell
node_shell -->|"renders"| node_navbar
node_shell -->|"hosts routes"| node_routing
node_routing -->|"routes to"| node_list
node_routing -->|"routes to"| node_details
node_routing -->|"routes to"| node_form
node_routing -->|"guards forms"| node_guard
node_list -->|"fetches courses"| node_courseapi
node_list -->|"renders"| node_table
node_list -->|"renders"| node_cards
node_list -->|"renders"| node_empty
node_list -->|"renders"| node_feedback
node_list -->|"requests deletion"| node_delete
node_details -->|"fetches course"| node_courseapi
node_details -->|"requests deletion"| node_delete
node_form -->|"loads and saves"| node_courseapi
node_form -->|"uses fields"| node_formfield
node_form -->|"confirms updates"| node_dialogservice
node_form -->|"notifies"| node_snackbar
node_delete -->|"confirms deletion"| node_dialogservice
node_delete -->|"deletes course"| node_courseapi
node_delete -->|"notifies"| node_snackbar
node_dialogservice -->|"opens"| node_confirm
node_guard -->|"prompts user"| node_dialogservice
node_courseapi -->|"calls REST API"| node_backend

click node_shell "https://github.com/omaremad20/course-management-dashboard/blob/main/src/app/app.ts"
click node_routing "https://github.com/omaremad20/course-management-dashboard/blob/main/src/app/app.routes.ts"
click node_list "https://github.com/omaremad20/course-management-dashboard/blob/main/src/app/features/courses/pages/course-list/course-list.ts"
click node_details "https://github.com/omaremad20/course-management-dashboard/blob/main/src/app/features/courses/pages/course-details/course-details.ts"
click node_form "https://github.com/omaremad20/course-management-dashboard/blob/main/src/app/features/courses/pages/course-form/course-form.ts"
click node_models "https://github.com/omaremad20/course-management-dashboard/blob/main/src/app/features/courses/models/ICourse.ts"
click node_cards "https://github.com/omaremad20/course-management-dashboard/blob/main/src/app/features/courses/components/course-card/course-card.ts"
click node_empty "https://github.com/omaremad20/course-management-dashboard/blob/main/src/app/features/courses/components/empty-courses-state/empty-courses-state.ts"
click node_delete "https://github.com/omaremad20/course-management-dashboard/blob/main/src/app/features/courses/services/courses/deleteCourseAction/delete-course-action.ts"
click node_courseapi "https://github.com/omaremad20/course-management-dashboard/blob/main/src/app/features/courses/services/courses/courses.ts"
click node_table "https://github.com/omaremad20/course-management-dashboard/blob/main/src/app/shared/components/generic-table/generic-table.ts"
click node_feedback "https://github.com/omaremad20/course-management-dashboard/blob/main/src/app/shared/components/error-state/error-state.ts"
click node_formfield "https://github.com/omaremad20/course-management-dashboard/blob/main/src/app/shared/components/form-field/form-field.ts"
click node_dialogservice "https://github.com/omaremad20/course-management-dashboard/blob/main/src/app/core/services/dialog/dialog.ts"
click node_confirm "https://github.com/omaremad20/course-management-dashboard/blob/main/src/app/shared/components/confirm-dialog/confirm-dialog.ts"
click node_snackbar "https://github.com/omaremad20/course-management-dashboard/blob/main/src/app/core/services/snackbar/snackbar.ts"
click node_guard "https://github.com/omaremad20/course-management-dashboard/blob/main/src/app/features/courses/guards/form-exit/form-exit-guard.ts"
click node_navbar "https://github.com/omaremad20/course-management-dashboard/blob/main/src/app/shared/components/navbar/navbar.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_shell,node_routing toneBlue
class node_list,node_details,node_form,node_models,node_cards,node_empty,node_delete,node_guard toneAmber
class node_table,node_feedback,node_formfield,node_confirm,node_navbar,node_backend toneMint
class node_courseapi,node_dialogservice,node_snackbar toneRose
class node_user toneIndigo
```

## Components

### Application

- [App shell](https://github.com/omaremad20/course-management-dashboard/blob/main/src/app/app.ts): `src/app/app.ts`
- [Route dispatch](https://github.com/omaremad20/course-management-dashboard/blob/main/src/app/app.routes.ts): `src/app/app.routes.ts`

### Course workflows

- [Course list](https://github.com/omaremad20/course-management-dashboard/blob/main/src/app/features/courses/pages/course-list/course-list.ts): `src/app/features/courses/pages/course-list/course-list.ts`
- [Course details](https://github.com/omaremad20/course-management-dashboard/blob/main/src/app/features/courses/pages/course-details/course-details.ts): `src/app/features/courses/pages/course-details/course-details.ts`
- [Course form](https://github.com/omaremad20/course-management-dashboard/blob/main/src/app/features/courses/pages/course-form/course-form.ts): `src/app/features/courses/pages/course-form/course-form.ts`
- [Course models](https://github.com/omaremad20/course-management-dashboard/blob/main/src/app/features/courses/models/ICourse.ts): `src/app/features/courses/models/ICourse.ts`
- [Course cards](https://github.com/omaremad20/course-management-dashboard/blob/main/src/app/features/courses/components/course-card/course-card.ts): `src/app/features/courses/components/course-card/course-card.ts`
- [Empty courses](https://github.com/omaremad20/course-management-dashboard/blob/main/src/app/features/courses/components/empty-courses-state/empty-courses-state.ts): `src/app/features/courses/components/empty-courses-state/empty-courses-state.ts`
- [Delete action](https://github.com/omaremad20/course-management-dashboard/blob/main/src/app/features/courses/services/courses/deleteCourseAction/delete-course-action.ts): `src/app/features/courses/services/courses/deleteCourseAction/delete-course-action.ts`
- [Form exit guard](https://github.com/omaremad20/course-management-dashboard/blob/main/src/app/features/courses/guards/form-exit/form-exit-guard.ts): `src/app/features/courses/guards/form-exit/form-exit-guard.ts`

### Shared UI

- [Generic table](https://github.com/omaremad20/course-management-dashboard/blob/main/src/app/shared/components/generic-table/generic-table.ts): `src/app/shared/components/generic-table/generic-table.ts`
- [Error states](https://github.com/omaremad20/course-management-dashboard/blob/main/src/app/shared/components/error-state/error-state.ts): `src/app/shared/components/error-state/error-state.ts`
- [Form fields](https://github.com/omaremad20/course-management-dashboard/blob/main/src/app/shared/components/form-field/form-field.ts): `src/app/shared/components/form-field/form-field.ts`
- [Confirm dialog](https://github.com/omaremad20/course-management-dashboard/blob/main/src/app/shared/components/confirm-dialog/confirm-dialog.ts): `src/app/shared/components/confirm-dialog/confirm-dialog.ts`
- [Navigation bar](https://github.com/omaremad20/course-management-dashboard/blob/main/src/app/shared/components/navbar/navbar.ts): `src/app/shared/components/navbar/navbar.ts`

### Services

- [Courses service](https://github.com/omaremad20/course-management-dashboard/blob/main/src/app/features/courses/services/courses/courses.ts): `src/app/features/courses/services/courses/courses.ts`
- [Dialog service](https://github.com/omaremad20/course-management-dashboard/blob/main/src/app/core/services/dialog/dialog.ts): `src/app/core/services/dialog/dialog.ts`
- [Snackbar service](https://github.com/omaremad20/course-management-dashboard/blob/main/src/app/core/services/snackbar/snackbar.ts): `src/app/core/services/snackbar/snackbar.ts`

### Other components

- **Course manager**
- **Course REST API**

## Connections

- Course manager → App shell: uses (evidence: `README.md`)
- App shell → Navigation bar: renders (evidence: `src/app/app.ts`)
- App shell → Route dispatch: hosts routes
- Route dispatch → Course list: routes to (evidence: `src/app/app.routes.ts`)
- Route dispatch → Course details: routes to (evidence: `src/app/app.routes.ts`)
- Route dispatch → Course form: routes to (evidence: `src/app/app.routes.ts`)
- Route dispatch → Form exit guard: guards forms (evidence: `src/app/app.routes.ts`)
- Course list → Courses service: fetches courses (evidence: `src/app/features/courses/pages/course-list/course-list.ts`)
- Course list → Generic table: renders (evidence: `src/app/features/courses/pages/course-list/course-list.ts`)
- Course list → Course cards: renders (evidence: `src/app/features/courses/pages/course-list/course-list.ts`)
- Course list → Empty courses: renders (evidence: `src/app/features/courses/pages/course-list/course-list.ts`)
- Course list → Error states: renders (evidence: `src/app/features/courses/pages/course-list/course-list.ts`)
- Course list → Delete action: requests deletion (evidence: `src/app/features/courses/pages/course-list/course-list.ts`)
- Course details → Courses service: fetches course (evidence: `src/app/features/courses/pages/course-details/course-details.ts`)
- Course details → Delete action: requests deletion (evidence: `src/app/features/courses/pages/course-details/course-details.ts`)
- Course form → Courses service: loads and saves (evidence: `src/app/features/courses/pages/course-form/course-form.ts`)
- Course form → Form fields: uses fields (evidence: `src/app/features/courses/pages/course-form/course-form.ts`)
- Course form → Dialog service: confirms updates (evidence: `src/app/features/courses/pages/course-form/course-form.ts`)
- Course form → Snackbar service: notifies (evidence: `src/app/features/courses/pages/course-form/course-form.ts`)
- Delete action → Dialog service: confirms deletion (evidence: `src/app/features/courses/services/courses/deleteCourseAction/delete-course-action.ts`)
- Delete action → Courses service: deletes course (evidence: `src/app/features/courses/services/courses/deleteCourseAction/delete-course-action.ts`)
- Delete action → Snackbar service: notifies (evidence: `src/app/features/courses/services/courses/deleteCourseAction/delete-course-action.ts`)
- Dialog service → Confirm dialog: opens (evidence: `src/app/core/services/dialog/dialog.ts`)
- Form exit guard → Dialog service: prompts user (evidence: `src/app/features/courses/guards/form-exit/form-exit-guard.ts`)
- Courses service → Course REST API: calls REST API (evidence: `src/app/features/courses/services/courses/courses.ts`)