# glvgvzh/cozy-kanban architecture

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

- Interactive diagram: https://gitdiagram.com/glvgvzh/cozy-kanban
- Repository: https://github.com/glvgvzh/cozy-kanban

## Overview

#### Purpose and entry points
This is a Vite-powered React task-board application with task creation, editing/detail views, deletion, deadline handling, notifications, settings, and install-banner support. The browser entry path is `index.html` → `src/main.jsx` → `src/App.jsx`. A separate bot/runtime entry exists at `server/bot.js`, indicating optional server-side automation or messaging integration outside the React client.

#### Application orchestration
`src/App.jsx` is the likely state and control boundary for the board: it composes columns, task UI, modals, notifications, settings, and install prompt behavior. It coordinates user actions such as creating, selecting, updating, moving, and deleting tasks across the client-side component tree.
- `src/App.jsx`
- `src/main.jsx`
- `src/data/boardData.js`

#### Board and task presentation
The board is modeled as columns containing task cards. `Column` represents a workflow lane; `TaskCard` and `TaskCardContent` render task summaries and task-specific visual/content concerns. Detailed task interaction is separated into a modal rather than embedded in the board.
- `src/Column.jsx`
- `src/TaskCard.jsx`
- `src/TaskCardContent.jsx`

#### Modal-driven task lifecycle
Task mutations are handled through focused modal boundaries: creation, detailed inspection/editing, deletion confirmation, and user settings. `Modal` is the shared overlay/container primitive, while specific modals own their respective interaction flows and report actions upward to application state.
- `src/Modal.jsx`
- `src/CreateTaskModal.jsx`
- `src/TaskDetailsModal.jsx`
- `src/DeleteTaskConfirmationModal.jsx`
- `src/SettingsModal.jsx`

#### Persistence and initial data
The application appears client-state-centric. `src/data/boardData.js` supplies initial board/task data, and `src/hooks/useLocalStorage.js` provides browser-local persistence, allowing board and preference state to survive reloads without requiring a primary backend API.
- `src/data/boardData.js`
- `src/hooks/useLocalStorage.js`
- `src/App.jsx`

#### Deadline and notification flow
Deadline-related task data is processed by `deadlineUtilities`; notification derivation or scheduling is centralized in `notificationUtilities`. `NotificationCenter` is the UI delivery point for resulting alerts. This creates a boundary between raw task/deadline state, notification policy, and presentation.
- `src/utils/deadlineUtilities.js`
- `src/utils/notificationUtilities.js`
- `src/NotificationCenter.jsx`

#### Runtime, delivery, and styling boundaries
The main runtime is a React single-page application built and served by Vite (`vite.config.js`). CSS is organized by layout, component, modal, mobile, and theme-variable concerns rather than colocated styles. `InstallBanner` suggests Progressive Web App-oriented installation UX, though no service-worker configuration is present in the tree. The separate `server/bot.js` is the only server-side artifact and should be treated as an independent integration boundary until its transport/service dependencies are inspected.
- `vite.config.js`
- `src/InstallBanner.jsx`
- `src/styles/index.css`
- `server/bot.js`

Main entry points: [`src/App.jsx`](https://github.com/glvgvzh/cozy-kanban/blob/main/src/App.jsx) (App controller), [`src/Modal.jsx`](https://github.com/glvgvzh/cozy-kanban/blob/main/src/Modal.jsx) (Modal shell), [`src/main.jsx`](https://github.com/glvgvzh/cozy-kanban/blob/main/src/main.jsx) (React bootstrap), [`src/utils/deadlineUtilities.js`](https://github.com/glvgvzh/cozy-kanban/blob/main/src/utils/deadlineUtilities.js) (Deadline utilities)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["React client"]
  node_main["React bootstrap<br/>client entry<br/>[main.jsx]"]
  node_app{{"App controller<br/>state orchestrator<br/>[App.jsx]"}}
  node_install_banner["Install banner<br/>installation UX<br/>[InstallBanner.jsx]"]
end

subgraph group_state["State and policy"]
  node_board_data["Initial board data<br/>seed data<br/>[boardData.js]"]
  node_local_storage[("Local storage hook<br/>browser persistence<br/>[useLocalStorage.js]")]
  node_deadlines["Deadline utilities<br/>deadline policy"]
  node_notifications["Notification utilities<br/>notification policy"]
end

subgraph group_ui["Board and modal UI"]
  node_column["Workflow columns<br/>board lane<br/>[Column.jsx]"]
  node_task_card["Task cards<br/>task summary UI<br/>[TaskCard.jsx]"]
  node_task_content["Task card content<br/>task visual UI"]
  node_modal["Modal shell<br/>shared overlay<br/>[Modal.jsx]"]
  node_create_modal["Create task modal<br/>task creation flow"]
  node_details_modal["Task details modal<br/>task edit flow"]
  node_delete_modal["Delete confirmation<br/>task deletion flow"]
  node_settings_modal["Settings modal<br/>preference flow<br/>[SettingsModal.jsx]"]
  node_notification_center["Notification center<br/>alert UI"]
end

subgraph group_runtime["Runtime boundaries"]
  node_html["Browser entry<br/>HTML entry<br/>[index.html]"]
  node_vite["Vite runtime<br/>build and dev server<br/>[vite.config.js]"]
  node_bot{{"Bot runtime<br/>automation integration<br/>[bot.js]"}}
end

node_html -->|"loads"| node_main
node_main -->|"mounts"| node_app
node_vite -->|"serves/builds"| node_html
node_app -->|"initializes from"| node_board_data
node_app -->|"persists state"| node_local_storage
node_app -->|"renders"| node_column
node_column -->|"contains"| node_task_card
node_task_card -->|"renders"| node_task_content
node_app -->|"opens for creation"| node_create_modal
node_app -->|"opens for inspect/edit"| node_details_modal
node_app -->|"opens for deletion"| node_delete_modal
node_app -->|"opens for preferences"| node_settings_modal
node_create_modal -->|"uses"| node_modal
node_details_modal -->|"uses"| node_modal
node_delete_modal -->|"uses"| node_modal
node_settings_modal -->|"uses"| node_modal
node_app -->|"evaluates task deadlines"| node_deadlines
node_deadlines -->|"supplies deadline state"| node_notifications
node_notifications -->|"derives alerts for"| node_notification_center
node_app -->|"renders"| node_notification_center
node_app -->|"renders"| node_install_banner

click node_html "https://github.com/glvgvzh/cozy-kanban/blob/main/index.html"
click node_main "https://github.com/glvgvzh/cozy-kanban/blob/main/src/main.jsx"
click node_app "https://github.com/glvgvzh/cozy-kanban/blob/main/src/App.jsx"
click node_board_data "https://github.com/glvgvzh/cozy-kanban/blob/main/src/data/boardData.js"
click node_local_storage "https://github.com/glvgvzh/cozy-kanban/blob/main/src/hooks/useLocalStorage.js"
click node_deadlines "https://github.com/glvgvzh/cozy-kanban/blob/main/src/utils/deadlineUtilities.js"
click node_notifications "https://github.com/glvgvzh/cozy-kanban/blob/main/src/utils/notificationUtilities.js"
click node_column "https://github.com/glvgvzh/cozy-kanban/blob/main/src/Column.jsx"
click node_task_card "https://github.com/glvgvzh/cozy-kanban/blob/main/src/TaskCard.jsx"
click node_task_content "https://github.com/glvgvzh/cozy-kanban/blob/main/src/TaskCardContent.jsx"
click node_modal "https://github.com/glvgvzh/cozy-kanban/blob/main/src/Modal.jsx"
click node_create_modal "https://github.com/glvgvzh/cozy-kanban/blob/main/src/CreateTaskModal.jsx"
click node_details_modal "https://github.com/glvgvzh/cozy-kanban/blob/main/src/TaskDetailsModal.jsx"
click node_delete_modal "https://github.com/glvgvzh/cozy-kanban/blob/main/src/DeleteTaskConfirmationModal.jsx"
click node_settings_modal "https://github.com/glvgvzh/cozy-kanban/blob/main/src/SettingsModal.jsx"
click node_notification_center "https://github.com/glvgvzh/cozy-kanban/blob/main/src/NotificationCenter.jsx"
click node_install_banner "https://github.com/glvgvzh/cozy-kanban/blob/main/src/InstallBanner.jsx"
click node_vite "https://github.com/glvgvzh/cozy-kanban/blob/main/vite.config.js"
click node_bot "https://github.com/glvgvzh/cozy-kanban/blob/main/server/bot.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_main,node_app,node_install_banner toneBlue
class node_board_data,node_local_storage,node_deadlines,node_notifications toneAmber
class node_column,node_task_card,node_task_content,node_modal,node_create_modal,node_details_modal,node_delete_modal,node_settings_modal,node_notification_center toneMint
class node_html,node_vite,node_bot toneRose
```

## Components

### React client

Vite single-page task board.

- [React bootstrap](https://github.com/glvgvzh/cozy-kanban/blob/main/src/main.jsx): client entry · `src/main.jsx`
- [App controller](https://github.com/glvgvzh/cozy-kanban/blob/main/src/App.jsx): state orchestrator · Coordinates board state and user actions. · `src/App.jsx`
- [Install banner](https://github.com/glvgvzh/cozy-kanban/blob/main/src/InstallBanner.jsx): installation UX · `src/InstallBanner.jsx`

### State and policy

Initial data, local persistence, and deadline notification logic.

- [Initial board data](https://github.com/glvgvzh/cozy-kanban/blob/main/src/data/boardData.js): seed data · `src/data/boardData.js`
- [Local storage hook](https://github.com/glvgvzh/cozy-kanban/blob/main/src/hooks/useLocalStorage.js): browser persistence · Persists board and preference state in the browser. · `src/hooks/useLocalStorage.js`
- [Deadline utilities](https://github.com/glvgvzh/cozy-kanban/blob/main/src/utils/deadlineUtilities.js): deadline policy · `src/utils/deadlineUtilities.js`
- [Notification utilities](https://github.com/glvgvzh/cozy-kanban/blob/main/src/utils/notificationUtilities.js): notification policy · `src/utils/notificationUtilities.js`

### Board and modal UI

Task workflow presentation and interaction surfaces.

- [Workflow columns](https://github.com/glvgvzh/cozy-kanban/blob/main/src/Column.jsx): board lane · `src/Column.jsx`
- [Task cards](https://github.com/glvgvzh/cozy-kanban/blob/main/src/TaskCard.jsx): task summary UI · `src/TaskCard.jsx`
- [Task card content](https://github.com/glvgvzh/cozy-kanban/blob/main/src/TaskCardContent.jsx): task visual UI · `src/TaskCardContent.jsx`
- [Modal shell](https://github.com/glvgvzh/cozy-kanban/blob/main/src/Modal.jsx): shared overlay · `src/Modal.jsx`
- [Create task modal](https://github.com/glvgvzh/cozy-kanban/blob/main/src/CreateTaskModal.jsx): task creation flow · `src/CreateTaskModal.jsx`
- [Task details modal](https://github.com/glvgvzh/cozy-kanban/blob/main/src/TaskDetailsModal.jsx): task edit flow · `src/TaskDetailsModal.jsx`
- [Delete confirmation](https://github.com/glvgvzh/cozy-kanban/blob/main/src/DeleteTaskConfirmationModal.jsx): task deletion flow · `src/DeleteTaskConfirmationModal.jsx`
- [Settings modal](https://github.com/glvgvzh/cozy-kanban/blob/main/src/SettingsModal.jsx): preference flow · `src/SettingsModal.jsx`
- [Notification center](https://github.com/glvgvzh/cozy-kanban/blob/main/src/NotificationCenter.jsx): alert UI · `src/NotificationCenter.jsx`

### Runtime boundaries

Build delivery and independent automation entry points.

- [Browser entry](https://github.com/glvgvzh/cozy-kanban/blob/main/index.html): HTML entry · `index.html`
- [Vite runtime](https://github.com/glvgvzh/cozy-kanban/blob/main/vite.config.js): build and dev server · `vite.config.js`
- [Bot runtime](https://github.com/glvgvzh/cozy-kanban/blob/main/server/bot.js): automation integration · Independent server-side integration boundary. · `server/bot.js`

## Connections

- Browser entry → React bootstrap: loads
- React bootstrap → App controller: mounts
- Vite runtime → Browser entry: serves/builds
- App controller → Initial board data: initializes from
- App controller → Local storage hook: persists state
- App controller → Workflow columns: renders
- Workflow columns → Task cards: contains
- Task cards → Task card content: renders
- App controller → Create task modal: opens for creation
- App controller → Task details modal: opens for inspect/edit
- App controller → Delete confirmation: opens for deletion
- App controller → Settings modal: opens for preferences
- Create task modal → Modal shell: uses
- Task details modal → Modal shell: uses
- Delete confirmation → Modal shell: uses
- Settings modal → Modal shell: uses
- App controller → Deadline utilities: evaluates task deadlines
- Deadline utilities → Notification utilities: supplies deadline state
- Notification utilities → Notification center: derives alerts for
- App controller → Notification center: renders
- App controller → Install banner: renders