# einfachilja/join architecture

> Architecture diagram of the GitHub repository einfachilja/join, 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/einfachilja/join
- Repository: https://github.com/einfachilja/join

## Overview

This is a browser-based task-management app: users can create and organize tasks, manage contacts, view a board and summary, and register or log in. The clearest sampled workflow is Add Task: the page initializes form logic, coordinates dropdown and subtask state, then submits task data to Firebase. Board editing and subtask persistence are also visible. Other feature areas are included based on the repository tree, but their internal wiring was not sampled; the README is empty.

Main entry points: [`scripts/add-task-core.js`](https://github.com/einfachilja/join/blob/main/scripts/add-task-core.js) (Form logic), [`scripts/add-task-firebase.js`](https://github.com/einfachilja/join/blob/main/scripts/add-task-firebase.js) (Task persistence), [`scripts/add-task-dropdowns.js`](https://github.com/einfachilja/join/blob/main/scripts/add-task-dropdowns.js) (Task dropdowns), [`add-task.html`](https://github.com/einfachilja/join/blob/main/add-task.html) (Add Task page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_tasks["Task creation"]
  node_addtask["Add Task page<br/>[add-task.html]"]
  node_taskcore["Form logic<br/>[add-task-core.js]"]
  node_dropdowns["Task dropdowns"]
  node_subtasks["Subtask manager"]
  node_taskdata["Task persistence"]
  node_taskutils["Task utilities<br/>[add-task-utils.js]"]
end

subgraph group_board["Task board"]
  node_boardpage["Board page<br/>[board.html]"]
  node_boardrender["Board rendering<br/>[board-render.js]"]
  node_boardstate["Board state<br/>[board-state.js]"]
  node_boardoverlay["Task overlay<br/>[board-overlay.js]"]
  node_boardsubtasks["Board subtasks<br/>[board-subtasks.js]"]
  node_boardtemplates["Board templates<br/>[board-templates.js]"]
  node_boardpersistence["Board persistence<br/>[board-firebase.js]"]
end

subgraph group_people["Contacts"]
  node_contacts["Contact management<br/>[contacts-main.js]"]
  node_contactdata["Contact persistence"]
  node_contactui["Contact UI<br/>[contacts-ui.js]"]
end

subgraph group_access["Account access"]
  node_login["Login<br/>[log-in.js]"]
  node_register["Registration<br/>[register.js]"]
end

subgraph group_overview["App pages"]
  node_summary["Task summary<br/>[summary.js]"]
  node_help["Help page<br/>[help.js]"]
end

node_user(("User"))
node_firebase[("Firebase service")]

node_user -.->|"uses"| node_addtask
node_addtask -.->|"initializes"| node_taskcore
node_taskcore -->|"uses"| node_dropdowns
node_taskcore -->|"uses"| node_subtasks
node_taskcore -->|"submits task"| node_taskdata
node_dropdowns -->|"uses"| node_taskutils
node_taskdata -->|"reads selections"| node_dropdowns
node_taskdata -->|"reads subtasks"| node_subtasks
node_taskdata -->|"fetches and writes"| node_firebase
node_boardpage -.->|"displays"| node_boardrender
node_boardoverlay -->|"updates task"| node_boardpersistence
node_boardsubtasks -->|"saves subtasks"| node_boardpersistence
node_user -.->|"uses"| node_boardpage
node_user -.->|"uses"| node_contacts
node_user -.->|"uses"| node_login
node_user -.->|"uses"| node_register
node_user -.->|"views"| node_summary
node_user -.->|"views"| node_help

click node_addtask "https://github.com/einfachilja/join/blob/main/add-task.html"
click node_taskcore "https://github.com/einfachilja/join/blob/main/scripts/add-task-core.js"
click node_dropdowns "https://github.com/einfachilja/join/blob/main/scripts/add-task-dropdowns.js"
click node_subtasks "https://github.com/einfachilja/join/blob/main/scripts/add-task-subtasks.js"
click node_taskdata "https://github.com/einfachilja/join/blob/main/scripts/add-task-firebase.js"
click node_taskutils "https://github.com/einfachilja/join/blob/main/scripts/add-task-utils.js"
click node_boardpage "https://github.com/einfachilja/join/blob/main/board.html"
click node_boardrender "https://github.com/einfachilja/join/blob/main/scripts/board-render.js"
click node_boardstate "https://github.com/einfachilja/join/blob/main/scripts/board-state.js"
click node_boardoverlay "https://github.com/einfachilja/join/blob/main/scripts/board-overlay.js"
click node_boardsubtasks "https://github.com/einfachilja/join/blob/main/scripts/board-subtasks.js"
click node_boardtemplates "https://github.com/einfachilja/join/blob/main/scripts/board-templates.js"
click node_boardpersistence "https://github.com/einfachilja/join/blob/main/scripts/board-firebase.js"
click node_contacts "https://github.com/einfachilja/join/blob/main/scripts/contacts-main.js"
click node_contactdata "https://github.com/einfachilja/join/blob/main/scripts/contacts-firebase.js"
click node_contactui "https://github.com/einfachilja/join/blob/main/scripts/contacts-ui.js"
click node_login "https://github.com/einfachilja/join/blob/main/scripts/log-in.js"
click node_register "https://github.com/einfachilja/join/blob/main/scripts/register.js"
click node_summary "https://github.com/einfachilja/join/blob/main/scripts/summary.js"
click node_help "https://github.com/einfachilja/join/blob/main/scripts/help.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_addtask,node_taskcore,node_dropdowns,node_subtasks,node_taskdata,node_taskutils,node_user toneBlue
class node_boardpage,node_boardrender,node_boardstate,node_boardoverlay,node_boardsubtasks,node_boardtemplates,node_boardpersistence,node_firebase toneAmber
class node_contacts,node_contactdata,node_contactui toneMint
class node_login,node_register toneRose
class node_summary,node_help toneIndigo
```

## Components

### Task creation

- [Add Task page](https://github.com/einfachilja/join/blob/main/add-task.html): `add-task.html`
- [Form logic](https://github.com/einfachilja/join/blob/main/scripts/add-task-core.js): `scripts/add-task-core.js`
- [Task dropdowns](https://github.com/einfachilja/join/blob/main/scripts/add-task-dropdowns.js): `scripts/add-task-dropdowns.js`
- [Subtask manager](https://github.com/einfachilja/join/blob/main/scripts/add-task-subtasks.js): `scripts/add-task-subtasks.js`
- [Task persistence](https://github.com/einfachilja/join/blob/main/scripts/add-task-firebase.js): `scripts/add-task-firebase.js`
- [Task utilities](https://github.com/einfachilja/join/blob/main/scripts/add-task-utils.js): `scripts/add-task-utils.js`

### Task board

- [Board page](https://github.com/einfachilja/join/blob/main/board.html): `board.html`
- [Board rendering](https://github.com/einfachilja/join/blob/main/scripts/board-render.js): `scripts/board-render.js`
- [Board state](https://github.com/einfachilja/join/blob/main/scripts/board-state.js): `scripts/board-state.js`
- [Task overlay](https://github.com/einfachilja/join/blob/main/scripts/board-overlay.js): `scripts/board-overlay.js`
- [Board subtasks](https://github.com/einfachilja/join/blob/main/scripts/board-subtasks.js): `scripts/board-subtasks.js`
- [Board templates](https://github.com/einfachilja/join/blob/main/scripts/board-templates.js): `scripts/board-templates.js`
- [Board persistence](https://github.com/einfachilja/join/blob/main/scripts/board-firebase.js): `scripts/board-firebase.js`

### Contacts

- [Contact management](https://github.com/einfachilja/join/blob/main/scripts/contacts-main.js): `scripts/contacts-main.js`
- [Contact persistence](https://github.com/einfachilja/join/blob/main/scripts/contacts-firebase.js): `scripts/contacts-firebase.js`
- [Contact UI](https://github.com/einfachilja/join/blob/main/scripts/contacts-ui.js): `scripts/contacts-ui.js`

### Account access

- [Login](https://github.com/einfachilja/join/blob/main/scripts/log-in.js): `scripts/log-in.js`
- [Registration](https://github.com/einfachilja/join/blob/main/scripts/register.js): `scripts/register.js`

### App pages

- [Task summary](https://github.com/einfachilja/join/blob/main/scripts/summary.js): `scripts/summary.js`
- [Help page](https://github.com/einfachilja/join/blob/main/scripts/help.js): `scripts/help.js`

### Other components

- **User**
- **Firebase service**

## Connections

- User → Add Task page: uses
- Add Task page → Form logic: initializes
- Form logic → Task dropdowns: uses (evidence: `scripts/add-task-core.js`)
- Form logic → Subtask manager: uses (evidence: `scripts/add-task-core.js`)
- Form logic → Task persistence: submits task (evidence: `scripts/add-task-core.js`)
- Task dropdowns → Task utilities: uses (evidence: `scripts/add-task-dropdowns.js`)
- Task persistence → Task dropdowns: reads selections (evidence: `scripts/add-task-firebase.js`)
- Task persistence → Subtask manager: reads subtasks (evidence: `scripts/add-task-firebase.js`)
- Task persistence → Firebase service: fetches and writes (evidence: `scripts/add-task-firebase.js`)
- Board page → Board rendering: displays
- Task overlay → Board persistence: updates task (evidence: `scripts/board-overlay.js`)
- Board subtasks → Board persistence: saves subtasks (evidence: `scripts/board-subtasks.js`)
- User → Board page: uses
- User → Contact management: uses
- User → Login: uses
- User → Registration: uses
- User → Task summary: views
- User → Help page: views