# sahniaditya007/todo-app architecture

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

- Interactive diagram: https://gitdiagram.com/sahniaditya007/todo-app
- Repository: https://github.com/sahniaditya007/todo-app

## Overview

TaskFlow is a browser-based todo app. Users register on the landing page, which validates age and saves a profile before sending them to task management. There they can add tasks, move them among Todo, Completed, and Archived, and see counts and modification times; task data persists locally, with initial tasks fetched when none exist. The graph reflects README capabilities as well as sampled JavaScript. The main HTML files and CSS are represented from the tree and documentation; unsampled page wiring is not inferred.

Main entry points: [`js/todo-app.js`](https://github.com/sahniaditya007/todo-app/blob/main/js/todo-app.js) (Task Controller), [`app.html`](https://github.com/sahniaditya007/todo-app/blob/main/app.html) (Task Page), [`js/app.js`](https://github.com/sahniaditya007/todo-app/blob/main/js/app.js) (Registration Logic), [`index.html`](https://github.com/sahniaditya007/todo-app/blob/main/index.html) (Registration Page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["Registration"]
  node_landing["Registration Page<br/>[index.html]"]
  node_registration["Registration Logic<br/>[app.js]"]
end

subgraph group_tasks["Task Management"]
  node_mainpage["Task Page<br/>[app.html]"]
  node_todo["Task Controller<br/>[todo-app.js]"]
  node_todo_stage["Todo Stage<br/>[app.html]"]
  node_completed_stage["Completed Stage<br/>[app.html]"]
  node_archived_stage["Archived Stage<br/>[app.html]"]
  node_counters["Stage Counters<br/>[todo-app.js]"]
  node_styles["Responsive Styling<br/>[main.css]"]
end

subgraph group_state["Persistence"]
  node_storage[("Browser Storage")]
end

subgraph group_integrations["External Services"]
  node_dummyjson[("DummyJSON Tasks")]
  node_avatars["UI Avatars"]
end

node_user(("User"))

node_user -->|"registers on"| node_landing
node_landing -->|"submits form"| node_registration
node_registration -->|"saves profile"| node_storage
node_registration -->|"redirects to"| node_mainpage
node_user -->|"manages tasks"| node_mainpage
node_mainpage -->|"hosts"| node_todo
node_todo -->|"loads and saves"| node_storage
node_todo -.->|"fetches initial tasks"| node_dummyjson
node_todo -.->|"requests avatar"| node_avatars
node_todo -->|"renders tasks"| node_todo_stage
node_todo -->|"renders tasks"| node_completed_stage
node_todo -->|"renders tasks"| node_archived_stage
node_todo -->|"updates counts"| node_counters
node_mainpage -->|"styled by"| node_styles

click node_landing "https://github.com/sahniaditya007/todo-app/blob/main/index.html"
click node_registration "https://github.com/sahniaditya007/todo-app/blob/main/js/app.js"
click node_mainpage "https://github.com/sahniaditya007/todo-app/blob/main/app.html"
click node_todo "https://github.com/sahniaditya007/todo-app/blob/main/js/todo-app.js"
click node_todo_stage "https://github.com/sahniaditya007/todo-app/blob/main/app.html"
click node_completed_stage "https://github.com/sahniaditya007/todo-app/blob/main/app.html"
click node_archived_stage "https://github.com/sahniaditya007/todo-app/blob/main/app.html"
click node_counters "https://github.com/sahniaditya007/todo-app/blob/main/js/todo-app.js"
click node_styles "https://github.com/sahniaditya007/todo-app/blob/main/styles/main.css"

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_landing,node_registration,node_user toneBlue
class node_mainpage,node_todo,node_todo_stage,node_completed_stage,node_archived_stage,node_counters,node_styles toneAmber
class node_storage toneMint
class node_dummyjson,node_avatars toneRose
```

## Components

### Registration

- [Registration Page](https://github.com/sahniaditya007/todo-app/blob/main/index.html): `index.html`
- [Registration Logic](https://github.com/sahniaditya007/todo-app/blob/main/js/app.js): `js/app.js`

### Task Management

- [Task Page](https://github.com/sahniaditya007/todo-app/blob/main/app.html): `app.html`
- [Task Controller](https://github.com/sahniaditya007/todo-app/blob/main/js/todo-app.js): `js/todo-app.js`
- [Todo Stage](https://github.com/sahniaditya007/todo-app/blob/main/app.html): `app.html`
- [Completed Stage](https://github.com/sahniaditya007/todo-app/blob/main/app.html): `app.html`
- [Archived Stage](https://github.com/sahniaditya007/todo-app/blob/main/app.html): `app.html`
- [Stage Counters](https://github.com/sahniaditya007/todo-app/blob/main/js/todo-app.js): `js/todo-app.js`
- [Responsive Styling](https://github.com/sahniaditya007/todo-app/blob/main/styles/main.css): `styles/main.css`

### Persistence

- **Browser Storage**

### External Services

- **DummyJSON Tasks**
- **UI Avatars**

### Other components

- **User**

## Connections

- User → Registration Page: registers on
- Registration Page → Registration Logic: submits form
- Registration Logic → Browser Storage: saves profile
- Registration Logic → Task Page: redirects to
- User → Task Page: manages tasks
- Task Page → Task Controller: hosts
- Task Controller → Browser Storage: loads and saves
- Task Controller → DummyJSON Tasks: fetches initial tasks
- Task Controller → UI Avatars: requests avatar
- Task Controller → Todo Stage: renders tasks
- Task Controller → Completed Stage: renders tasks
- Task Controller → Archived Stage: renders tasks
- Task Controller → Stage Counters: updates counts
- Task Page → Responsive Styling: styled by