# webnoureddine/taskmangement architecture

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

- Interactive diagram: https://gitdiagram.com/webnoureddine/taskmangement
- Repository: https://github.com/webnoureddine/taskmangement

## Overview

TaskFlow is a browser-based project and task manager. Users register or sign in, then work from a dashboard to create projects and manage, search, filter, and track tasks; project detail provides task management within one project. The frontend calls an external API for authentication, project and task data, and task statistics, while storing session tokens and user details in browser local storage. The graph reflects sampled page and library code; Navbar and Sidebar are included only as tree-listed UI components, with no assumed behavior beyond their use.

Main entry points: [`app/dashboard/page.js`](https://github.com/webnoureddine/taskmangement/blob/main/app/dashboard/page.js) (Dashboard), [`lib/auth.js`](https://github.com/webnoureddine/taskmangement/blob/main/lib/auth.js) (Auth helpers), [`app/projects/[id]/page.js`](https://github.com/webnoureddine/taskmangement/blob/main/app/projects/%5Bid%5D/page.js) (Project detail), [`lib/api.js`](https://github.com/webnoureddine/taskmangement/blob/main/lib/api.js) (API client)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["Entry and auth"]
  node_home["Home redirect<br/>[page.js]"]
  node_login["Sign-in page<br/>[page.js]"]
  node_register["Registration page<br/>[page.js]"]
  node_auth["Auth helpers<br/>[auth.js]"]
end

subgraph group_workspace["Task workspace"]
  node_dashboard["Dashboard<br/>[page.js]"]
  node_project_detail["Project detail<br/>[page.js]"]
end

subgraph group_ui["Workspace UI"]
  node_navbar["Navbar<br/>[Navbar.js]"]
  node_sidebar["Sidebar<br/>[Sidebar.js]"]
  node_project_card["Project card<br/>[ProjectCard.js]"]
  node_task_card["Task card<br/>[TaskCard.js]"]
  node_project_modal["Project form<br/>[ProjectModal.js]"]
  node_task_modal["Task form<br/>[TaskModal.js]"]
end

subgraph group_integration["API integration"]
  node_api_client["API client<br/>[api.js]"]
end

node_user(("User"))
node_browser_store[("Browser storage")]
node_backend["TaskFlow API"]

node_user -->|"opens"| node_home
node_user -->|"signs in"| node_login
node_user -->|"registers"| node_register
node_home -->|"checks session"| node_auth
node_home -->|"routes unauthenticated"| node_login
node_home -->|"routes authenticated"| node_dashboard
node_login -->|"logs in"| node_auth
node_register -->|"registers and logs in"| node_auth
node_auth -->|"requests auth"| node_api_client
node_auth -->|"stores session"| node_browser_store
node_dashboard -->|"checks session"| node_auth
node_dashboard -->|"loads and mutates data"| node_api_client
node_dashboard -->|"renders"| node_navbar
node_dashboard -->|"renders"| node_sidebar
node_dashboard -->|"renders projects"| node_project_card
node_dashboard -->|"renders tasks"| node_task_card
node_dashboard -->|"opens project form"| node_project_modal
node_dashboard -->|"opens task form"| node_task_modal
node_project_detail -->|"checks session"| node_auth
node_project_detail -->|"loads and mutates data"| node_api_client
node_project_detail -->|"renders"| node_navbar
node_project_detail -->|"renders"| node_sidebar
node_project_detail -->|"renders tasks"| node_task_card
node_project_detail -->|"opens task form"| node_task_modal
node_api_client -->|"reads and refreshes tokens"| node_browser_store
node_api_client -->|"sends API requests"| node_backend

click node_home "https://github.com/webnoureddine/taskmangement/blob/main/app/page.js"
click node_login "https://github.com/webnoureddine/taskmangement/blob/main/app/login/page.js"
click node_register "https://github.com/webnoureddine/taskmangement/blob/main/app/register/page.js"
click node_auth "https://github.com/webnoureddine/taskmangement/blob/main/lib/auth.js"
click node_dashboard "https://github.com/webnoureddine/taskmangement/blob/main/app/dashboard/page.js"
click node_project_detail "https://github.com/webnoureddine/taskmangement/blob/main/app/projects/%5Bid%5D/page.js"
click node_navbar "https://github.com/webnoureddine/taskmangement/blob/main/components/Navbar.js"
click node_sidebar "https://github.com/webnoureddine/taskmangement/blob/main/components/Sidebar.js"
click node_project_card "https://github.com/webnoureddine/taskmangement/blob/main/components/ProjectCard.js"
click node_task_card "https://github.com/webnoureddine/taskmangement/blob/main/components/TaskCard.js"
click node_project_modal "https://github.com/webnoureddine/taskmangement/blob/main/components/ProjectModal.js"
click node_task_modal "https://github.com/webnoureddine/taskmangement/blob/main/components/TaskModal.js"
click node_api_client "https://github.com/webnoureddine/taskmangement/blob/main/lib/api.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_home,node_login,node_register,node_auth,node_user toneBlue
class node_dashboard,node_project_detail,node_browser_store toneAmber
class node_navbar,node_sidebar,node_project_card,node_task_card,node_project_modal,node_task_modal toneMint
class node_api_client,node_backend toneRose
```

## Components

### Entry and auth

- [Home redirect](https://github.com/webnoureddine/taskmangement/blob/main/app/page.js): `app/page.js`
- [Sign-in page](https://github.com/webnoureddine/taskmangement/blob/main/app/login/page.js): `app/login/page.js`
- [Registration page](https://github.com/webnoureddine/taskmangement/blob/main/app/register/page.js): `app/register/page.js`
- [Auth helpers](https://github.com/webnoureddine/taskmangement/blob/main/lib/auth.js): `lib/auth.js`

### Task workspace

- [Dashboard](https://github.com/webnoureddine/taskmangement/blob/main/app/dashboard/page.js): `app/dashboard/page.js`
- [Project detail](https://github.com/webnoureddine/taskmangement/blob/main/app/projects/%5Bid%5D/page.js): `app/projects/[id]/page.js`

### Workspace UI

- [Navbar](https://github.com/webnoureddine/taskmangement/blob/main/components/Navbar.js): `components/Navbar.js`
- [Sidebar](https://github.com/webnoureddine/taskmangement/blob/main/components/Sidebar.js): `components/Sidebar.js`
- [Project card](https://github.com/webnoureddine/taskmangement/blob/main/components/ProjectCard.js): `components/ProjectCard.js`
- [Task card](https://github.com/webnoureddine/taskmangement/blob/main/components/TaskCard.js): `components/TaskCard.js`
- [Project form](https://github.com/webnoureddine/taskmangement/blob/main/components/ProjectModal.js): `components/ProjectModal.js`
- [Task form](https://github.com/webnoureddine/taskmangement/blob/main/components/TaskModal.js): `components/TaskModal.js`

### API integration

- [API client](https://github.com/webnoureddine/taskmangement/blob/main/lib/api.js): `lib/api.js`

### Other components

- **User**
- **Browser storage**
- **TaskFlow API**

## Connections

- User → Home redirect: opens
- User → Sign-in page: signs in
- User → Registration page: registers
- Home redirect → Auth helpers: checks session
- Home redirect → Sign-in page: routes unauthenticated
- Home redirect → Dashboard: routes authenticated
- Sign-in page → Auth helpers: logs in
- Registration page → Auth helpers: registers and logs in
- Auth helpers → API client: requests auth
- Auth helpers → Browser storage: stores session
- Dashboard → Auth helpers: checks session
- Dashboard → API client: loads and mutates data
- Dashboard → Navbar: renders
- Dashboard → Sidebar: renders
- Dashboard → Project card: renders projects
- Dashboard → Task card: renders tasks
- Dashboard → Project form: opens project form
- Dashboard → Task form: opens task form
- Project detail → Auth helpers: checks session
- Project detail → API client: loads and mutates data
- Project detail → Navbar: renders
- Project detail → Sidebar: renders
- Project detail → Task card: renders tasks
- Project detail → Task form: opens task form
- API client → Browser storage: reads and refreshes tokens
- API client → TaskFlow API: sends API requests