# athus27/linketinderfrontend architecture

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

- Interactive diagram: https://gitdiagram.com/athus27/linketinderfrontend
- Repository: https://github.com/athus27/linketinderfrontend

## Overview

This is a browser-based ToDo board with ToDo, Doing, and Done stages, task editing and movement, due dates, and alarms. The main workflow is that the browser entry point loads saved tasks, renders the board, handles user actions through the task and board models, and persists changes in local storage. Alarm checks run periodically and display due alarms. The source excerpts show this control flow; the tree and SOURCE INDEX identify the main UI, model, and helper modules.

Main entry points: [`script.js`](https://github.com/athus27/linketinderfrontend/blob/main/script.js) (App Entry), [`scripts/task.js`](https://github.com/athus27/linketinderfrontend/blob/main/scripts/task.js) (Task Actions), [`models/BoardModel.js`](https://github.com/athus27/linketinderfrontend/blob/main/models/BoardModel.js) (Board Model), [`models/TaskModel.js`](https://github.com/athus27/linketinderfrontend/blob/main/models/TaskModel.js) (Task Model)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_ui["Board UI"]
  node_header["Header<br/>[Header.js]"]
  node_board_view["Board View<br/>[Board.js]"]
  node_task_card["Task Card<br/>[TaskCard.js]"]
end

subgraph group_app["Application"]
  node_entry["App Entry<br/>[script.js]"]
  node_task_actions["Task Actions<br/>[task.js]"]
end

subgraph group_domain["Task Domain"]
  node_board_model["Board Model<br/>[BoardModel.js]"]
  node_task_model["Task Model<br/>[TaskModel.js]"]
  node_alarm_model["Alarm Model<br/>[AlarmModel.js]"]
end

subgraph group_persistence["Storage and Alarms"]
  node_storage["Board Storage<br/>[storage.js]"]
  node_local_storage[("Browser Storage")]
  node_alarm_checker["Alarm Checker<br/>[alarm.js]"]
end

node_user(("User"))

node_user -->|"uses"| node_entry
node_entry -->|"renders"| node_header
node_entry -->|"renders"| node_board_view
node_board_view -->|"renders"| node_task_card
node_entry -->|"manages"| node_board_model
node_entry -->|"loads and saves"| node_storage
node_storage -->|"reads and writes"| node_local_storage
node_entry -->|"restores tasks"| node_task_model
node_entry -->|"handles task actions"| node_task_actions
node_task_actions -->|"creates tasks"| node_task_model
node_task_actions -->|"adds tasks"| node_board_model
node_task_actions -->|"saves tasks"| node_storage
node_board_model -->|"updates task state"| node_task_model
node_task_model -->|"creates alarms"| node_alarm_model
node_entry -->|"creates alarms"| node_alarm_model
node_entry -->|"checks due alarms"| node_alarm_checker
node_alarm_checker -->|"reads tasks"| node_board_model
node_entry -->|"shows alarm alerts"| node_user

click node_entry "https://github.com/athus27/linketinderfrontend/blob/main/script.js"
click node_header "https://github.com/athus27/linketinderfrontend/blob/main/components/ui/Header.js"
click node_board_view "https://github.com/athus27/linketinderfrontend/blob/main/components/Board.js"
click node_task_card "https://github.com/athus27/linketinderfrontend/blob/main/components/TaskCard.js"
click node_task_actions "https://github.com/athus27/linketinderfrontend/blob/main/scripts/task.js"
click node_board_model "https://github.com/athus27/linketinderfrontend/blob/main/models/BoardModel.js"
click node_task_model "https://github.com/athus27/linketinderfrontend/blob/main/models/TaskModel.js"
click node_alarm_model "https://github.com/athus27/linketinderfrontend/blob/main/models/AlarmModel.js"
click node_storage "https://github.com/athus27/linketinderfrontend/blob/main/scripts/storage.js"
click node_alarm_checker "https://github.com/athus27/linketinderfrontend/blob/main/scripts/alarm.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_header,node_board_view,node_task_card,node_user toneBlue
class node_entry,node_task_actions toneAmber
class node_board_model,node_task_model,node_alarm_model toneMint
class node_storage,node_local_storage,node_alarm_checker toneRose
```

## Components

### Board UI

- [Header](https://github.com/athus27/linketinderfrontend/blob/main/components/ui/Header.js): `components/ui/Header.js`
- [Board View](https://github.com/athus27/linketinderfrontend/blob/main/components/Board.js): `components/Board.js`
- [Task Card](https://github.com/athus27/linketinderfrontend/blob/main/components/TaskCard.js): `components/TaskCard.js`

### Application

- [App Entry](https://github.com/athus27/linketinderfrontend/blob/main/script.js): `script.js`
- [Task Actions](https://github.com/athus27/linketinderfrontend/blob/main/scripts/task.js): `scripts/task.js`

### Task Domain

- [Board Model](https://github.com/athus27/linketinderfrontend/blob/main/models/BoardModel.js): `models/BoardModel.js`
- [Task Model](https://github.com/athus27/linketinderfrontend/blob/main/models/TaskModel.js): `models/TaskModel.js`
- [Alarm Model](https://github.com/athus27/linketinderfrontend/blob/main/models/AlarmModel.js): `models/AlarmModel.js`

### Storage and Alarms

- [Board Storage](https://github.com/athus27/linketinderfrontend/blob/main/scripts/storage.js): `scripts/storage.js`
- **Browser Storage**
- [Alarm Checker](https://github.com/athus27/linketinderfrontend/blob/main/scripts/alarm.js): `scripts/alarm.js`

### Other components

- **User**

## Connections

- User → App Entry: uses (evidence: `script.js`)
- App Entry → Header: renders (evidence: `script.js`)
- App Entry → Board View: renders (evidence: `script.js`)
- Board View → Task Card: renders (evidence: `components/Board.js`)
- App Entry → Board Model: manages (evidence: `script.js`)
- App Entry → Board Storage: loads and saves (evidence: `script.js`)
- Board Storage → Browser Storage: reads and writes (evidence: `scripts/storage.js`)
- App Entry → Task Model: restores tasks (evidence: `script.js`)
- App Entry → Task Actions: handles task actions (evidence: `script.js`)
- Task Actions → Task Model: creates tasks (evidence: `scripts/task.js`)
- Task Actions → Board Model: adds tasks (evidence: `scripts/task.js`)
- Task Actions → Board Storage: saves tasks (evidence: `scripts/task.js`)
- Board Model → Task Model: updates task state (evidence: `models/BoardModel.js`)
- Task Model → Alarm Model: creates alarms (evidence: `models/TaskModel.js`)
- App Entry → Alarm Model: creates alarms (evidence: `script.js`)
- App Entry → Alarm Checker: checks due alarms (evidence: `script.js`)
- Alarm Checker → Board Model: reads tasks (evidence: `scripts/alarm.js`)
- App Entry → User: shows alarm alerts (evidence: `script.js`)