# mariem-712/task_management_depi architecture

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

- Interactive diagram: https://gitdiagram.com/mariem-712/task_management_depi
- Repository: https://github.com/mariem-712/task_management_depi

## Overview

Smart Task Manager is a React frontend backed by a Spring Boot API for JWT-authenticated task assignment and progress tracking. The main flow is login, role-gated admin or employee views, and task or comment actions through the API. The README also describes Docker, Nginx, Kubernetes, and Prometheus/Grafana deployment and monitoring, but those runtime/deployment details are only documented or represented by infrastructure files; backend implementation excerpts were not provided.

Main entry points: [`app/src/App.js`](https://github.com/mariem-712/task_management_depi/blob/main/app/src/App.js) (Routes and shell), [`Task_Management/src/main/java/com/example/Task_Management`](https://github.com/mariem-712/task_management_depi/tree/main/Task_Management/src/main/java/com/example/Task_Management) (Spring Boot API), [`app/src/components/Login/Login.jsx`](https://github.com/mariem-712/task_management_depi/blob/main/app/src/components/Login/Login.jsx) (Login), [`k8s`](https://github.com/mariem-712/task_management_depi/tree/main/k8s) (Container and ingress)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Web client"]
  node_router["Routes and shell<br/>[App.js]"]
  node_layout["Navigation layout<br/>[Layout.jsx]"]
  node_home["Home view<br/>[Home.jsx]"]
end

subgraph group_identity["Identity and access"]
  node_authctx["Auth context"]
  node_guard["Role guard<br/>[ProtectedRoot.jsx]"]
  node_login["Login<br/>[Login.jsx]"]
  node_register["Registration<br/>[Register.jsx]"]
  node_navbar["Role navigation<br/>[Navbar.jsx]"]
end

subgraph group_work["Task workflows"]
  node_admin_dash["Admin dashboard<br/>[AdminDashboard.jsx]"]
  node_employee_dash["Employee dashboard"]
  node_create_task["Task creation<br/>[CreateTask.jsx]"]
  node_edit_task["Task editing<br/>[EditTask.jsx]"]
  node_admin_comment["Admin comments<br/>[CreateComment.jsx]"]
  node_employee_comment["Employee comments"]
  node_user_table["User management<br/>[UserTable.jsx]"]
end

subgraph group_platform["Runtime platform"]
  node_api["Spring Boot API"]
  node_database[("MySQL database")]
  node_deploy["Container and ingress"]
  node_monitor["Monitoring stack"]
end

node_user(("Admin or employee"))

node_user -->|"uses"| node_router
node_router -->|"routes through"| node_layout
node_router -->|"provides auth"| node_authctx
node_router -->|"protects routes"| node_guard
node_router -->|"routes to"| node_home
node_router -->|"routes to"| node_login
node_router -->|"routes to"| node_register
node_router -->|"routes to"| node_admin_dash
node_router -->|"routes to"| node_employee_dash
node_router -->|"routes to"| node_create_task
node_router -->|"routes to"| node_edit_task
node_router -->|"routes to"| node_admin_comment
node_router -->|"routes to"| node_employee_comment
node_router -->|"routes to"| node_user_table
node_layout -->|"renders"| node_navbar
node_login -->|"sets session"| node_authctx
node_navbar -->|"reads session"| node_authctx
node_login -->|"authenticates via"| node_api
node_register -->|"registers via"| node_api
node_admin_dash -->|"manages tasks via"| node_api
node_employee_dash -->|"loads and updates via"| node_api
node_create_task -->|"creates tasks via"| node_api
node_edit_task -->|"reads and updates via"| node_api
node_admin_comment -->|"loads and posts via"| node_api
node_employee_comment -->|"loads and posts via"| node_api
node_user_table -.->|"manages users via"| node_api
node_api -.->|"persists data"| node_database
node_deploy -.->|"hosts service"| node_api
node_deploy -.->|"hosts storage"| node_database
node_monitor -.->|"observes runtime"| node_deploy

click node_router "https://github.com/mariem-712/task_management_depi/blob/main/app/src/App.js"
click node_layout "https://github.com/mariem-712/task_management_depi/blob/main/app/src/components/Layout/Layout.jsx"
click node_home "https://github.com/mariem-712/task_management_depi/blob/main/app/src/components/Home/Home.jsx"
click node_authctx "https://github.com/mariem-712/task_management_depi/blob/main/app/src/components/Context/authenticationContext.js"
click node_guard "https://github.com/mariem-712/task_management_depi/blob/main/app/src/components/ProtectedRoot/ProtectedRoot.jsx"
click node_login "https://github.com/mariem-712/task_management_depi/blob/main/app/src/components/Login/Login.jsx"
click node_register "https://github.com/mariem-712/task_management_depi/blob/main/app/src/components/Register/Register.jsx"
click node_navbar "https://github.com/mariem-712/task_management_depi/blob/main/app/src/components/Navbar/Navbar.jsx"
click node_admin_dash "https://github.com/mariem-712/task_management_depi/blob/main/app/src/components/AdminDashboard/AdminDashboard.jsx"
click node_employee_dash "https://github.com/mariem-712/task_management_depi/blob/main/app/src/components/EmployeeDashboard/EmployeeDashboard.jsx"
click node_create_task "https://github.com/mariem-712/task_management_depi/blob/main/app/src/components/CreateTask/CreateTask.jsx"
click node_edit_task "https://github.com/mariem-712/task_management_depi/blob/main/app/src/components/EditTask/EditTask.jsx"
click node_admin_comment "https://github.com/mariem-712/task_management_depi/blob/main/app/src/components/CreateComment/CreateComment.jsx"
click node_employee_comment "https://github.com/mariem-712/task_management_depi/blob/main/app/src/components/EmployeeComment/EmployeeComment.jsx"
click node_user_table "https://github.com/mariem-712/task_management_depi/blob/main/app/src/components/UserTable/UserTable.jsx"
click node_api "https://github.com/mariem-712/task_management_depi/tree/main/Task_Management/src/main/java/com/example/Task_Management"
click node_deploy "https://github.com/mariem-712/task_management_depi/tree/main/k8s"

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_router,node_layout,node_home toneBlue
class node_authctx,node_guard,node_login,node_register,node_navbar toneAmber
class node_admin_dash,node_employee_dash,node_create_task,node_edit_task,node_admin_comment,node_employee_comment,node_user_table toneMint
class node_api,node_database,node_deploy,node_monitor toneRose
class node_user toneIndigo
```

## Components

### Web client

- [Routes and shell](https://github.com/mariem-712/task_management_depi/blob/main/app/src/App.js): `app/src/App.js`
- [Navigation layout](https://github.com/mariem-712/task_management_depi/blob/main/app/src/components/Layout/Layout.jsx): `app/src/components/Layout/Layout.jsx`
- [Home view](https://github.com/mariem-712/task_management_depi/blob/main/app/src/components/Home/Home.jsx): `app/src/components/Home/Home.jsx`

### Identity and access

- [Auth context](https://github.com/mariem-712/task_management_depi/blob/main/app/src/components/Context/authenticationContext.js): `app/src/components/Context/authenticationContext.js`
- [Role guard](https://github.com/mariem-712/task_management_depi/blob/main/app/src/components/ProtectedRoot/ProtectedRoot.jsx): `app/src/components/ProtectedRoot/ProtectedRoot.jsx`
- [Login](https://github.com/mariem-712/task_management_depi/blob/main/app/src/components/Login/Login.jsx): `app/src/components/Login/Login.jsx`
- [Registration](https://github.com/mariem-712/task_management_depi/blob/main/app/src/components/Register/Register.jsx): `app/src/components/Register/Register.jsx`
- [Role navigation](https://github.com/mariem-712/task_management_depi/blob/main/app/src/components/Navbar/Navbar.jsx): `app/src/components/Navbar/Navbar.jsx`

### Task workflows

- [Admin dashboard](https://github.com/mariem-712/task_management_depi/blob/main/app/src/components/AdminDashboard/AdminDashboard.jsx): `app/src/components/AdminDashboard/AdminDashboard.jsx`
- [Employee dashboard](https://github.com/mariem-712/task_management_depi/blob/main/app/src/components/EmployeeDashboard/EmployeeDashboard.jsx): `app/src/components/EmployeeDashboard/EmployeeDashboard.jsx`
- [Task creation](https://github.com/mariem-712/task_management_depi/blob/main/app/src/components/CreateTask/CreateTask.jsx): `app/src/components/CreateTask/CreateTask.jsx`
- [Task editing](https://github.com/mariem-712/task_management_depi/blob/main/app/src/components/EditTask/EditTask.jsx): `app/src/components/EditTask/EditTask.jsx`
- [Admin comments](https://github.com/mariem-712/task_management_depi/blob/main/app/src/components/CreateComment/CreateComment.jsx): `app/src/components/CreateComment/CreateComment.jsx`
- [Employee comments](https://github.com/mariem-712/task_management_depi/blob/main/app/src/components/EmployeeComment/EmployeeComment.jsx): `app/src/components/EmployeeComment/EmployeeComment.jsx`
- [User management](https://github.com/mariem-712/task_management_depi/blob/main/app/src/components/UserTable/UserTable.jsx): `app/src/components/UserTable/UserTable.jsx`

### Runtime platform

- [Spring Boot API](https://github.com/mariem-712/task_management_depi/tree/main/Task_Management/src/main/java/com/example/Task_Management): `Task_Management/src/main/java/com/example/Task_Management`
- **MySQL database**
- [Container and ingress](https://github.com/mariem-712/task_management_depi/tree/main/k8s): `k8s`
- **Monitoring stack**

### Other components

- **Admin or employee**

## Connections

- Admin or employee → Routes and shell: uses (evidence: `app/src/App.js`)
- Routes and shell → Navigation layout: routes through (evidence: `app/src/App.js`)
- Routes and shell → Auth context: provides auth (evidence: `app/src/App.js`)
- Routes and shell → Role guard: protects routes (evidence: `app/src/App.js`)
- Routes and shell → Home view: routes to (evidence: `app/src/App.js`)
- Routes and shell → Login: routes to (evidence: `app/src/App.js`)
- Routes and shell → Registration: routes to (evidence: `app/src/App.js`)
- Routes and shell → Admin dashboard: routes to (evidence: `app/src/App.js`)
- Routes and shell → Employee dashboard: routes to (evidence: `app/src/App.js`)
- Routes and shell → Task creation: routes to (evidence: `app/src/App.js`)
- Routes and shell → Task editing: routes to (evidence: `app/src/App.js`)
- Routes and shell → Admin comments: routes to (evidence: `app/src/App.js`)
- Routes and shell → Employee comments: routes to (evidence: `app/src/App.js`)
- Routes and shell → User management: routes to (evidence: `app/src/App.js`)
- Navigation layout → Role navigation: renders (evidence: `app/src/components/Layout/Layout.jsx`)
- Login → Auth context: sets session (evidence: `app/src/components/Login/Login.jsx`)
- Role navigation → Auth context: reads session (evidence: `app/src/components/Navbar/Navbar.jsx`)
- Login → Spring Boot API: authenticates via (evidence: `app/src/components/Login/Login.jsx`)
- Registration → Spring Boot API: registers via (evidence: `app/src/components/Register/Register.jsx`)
- Admin dashboard → Spring Boot API: manages tasks via (evidence: `app/src/components/AdminDashboard/AdminDashboard.jsx`)
- Employee dashboard → Spring Boot API: loads and updates via (evidence: `app/src/components/EmployeeDashboard/EmployeeDashboard.jsx`)
- Task creation → Spring Boot API: creates tasks via (evidence: `app/src/components/CreateTask/CreateTask.jsx`)
- Task editing → Spring Boot API: reads and updates via (evidence: `app/src/components/EditTask/EditTask.jsx`)
- Admin comments → Spring Boot API: loads and posts via (evidence: `app/src/components/CreateComment/CreateComment.jsx`)
- Employee comments → Spring Boot API: loads and posts via (evidence: `app/src/components/EmployeeComment/EmployeeComment.jsx`)
- User management → Spring Boot API: manages users via
- Spring Boot API → MySQL database: persists data
- Container and ingress → Spring Boot API: hosts service
- Container and ingress → MySQL database: hosts storage
- Monitoring stack → Container and ingress: observes runtime