# durvanalawade746-creator/sct_wd_4 architecture

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

- Interactive diagram: https://gitdiagram.com/durvanalawade746-creator/sct_wd_4
- Repository: https://github.com/durvanalawade746-creator/sct_wd_4

## Overview

TaskBloom is a browser-based to-do and productivity app. Users navigate task views, search or filter tasks, create and edit tasks, and see the updated task list; task and list data plus settings are persisted in browser storage. The supplied excerpt also shows theme controls, toast feedback, and JSON backup export. The README is empty and app.js is partial, so the graph focuses on evidenced responsibilities and omits uncertain wiring for unsampled features.

Main entry points: [`app.js`](https://github.com/durvanalawade746-creator/sct_wd_4/blob/main/app.js) (App controller), [`index.html`](https://github.com/durvanalawade746-creator/sct_wd_4/blob/main/index.html) (App page), [`styles.css`](https://github.com/durvanalawade746-creator/sct_wd_4/blob/main/styles.css) (Page styles)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_interface["App interface"]
  node_page["App page<br/>[index.html]"]
  node_styles["Page styles<br/>[styles.css]"]
  node_feedback["Toast feedback<br/>[app.js]"]
  node_theme["Theme settings<br/>[app.js]"]
end

subgraph group_workflows["Task workflows"]
  node_app["App controller<br/>[app.js]"]
  node_task_actions["Task actions<br/>[app.js]"]
  node_list_actions["List actions<br/>[app.js]"]
  node_task_views["Task views<br/>[app.js]"]
end

subgraph group_state["State and persistence"]
  node_state["App state<br/>[app.js]"]
  node_storage[("Browser storage")]
  node_backup["JSON backup<br/>[app.js]"]
end

node_user(("User"))

node_user -->|"uses"| node_page
node_user -->|"triggers controls"| node_app
node_app -->|"binds DOM"| node_page
node_styles -->|"styles"| node_page
node_app -->|"initializes"| node_state
node_app -->|"renders"| node_task_views
node_task_views -->|"reads tasks and lists"| node_state
node_app -->|"dispatches task actions"| node_task_actions
node_app -->|"dispatches list actions"| node_list_actions
node_task_actions -->|"updates tasks"| node_state
node_list_actions -->|"updates lists"| node_state
node_app -->|"toggles theme"| node_theme
node_theme -->|"updates settings"| node_state
node_app -->|"shows messages"| node_feedback
node_task_actions -->|"reports actions"| node_feedback
node_app -->|"loads and saves"| node_storage
node_state -->|"persists state"| node_storage
node_app -->|"exports data"| node_backup
node_backup -->|"downloads JSON"| node_user

click node_page "https://github.com/durvanalawade746-creator/sct_wd_4/blob/main/index.html"
click node_styles "https://github.com/durvanalawade746-creator/sct_wd_4/blob/main/styles.css"
click node_app "https://github.com/durvanalawade746-creator/sct_wd_4/blob/main/app.js"
click node_task_actions "https://github.com/durvanalawade746-creator/sct_wd_4/blob/main/app.js"
click node_list_actions "https://github.com/durvanalawade746-creator/sct_wd_4/blob/main/app.js"
click node_task_views "https://github.com/durvanalawade746-creator/sct_wd_4/blob/main/app.js"
click node_feedback "https://github.com/durvanalawade746-creator/sct_wd_4/blob/main/app.js"
click node_theme "https://github.com/durvanalawade746-creator/sct_wd_4/blob/main/app.js"
click node_state "https://github.com/durvanalawade746-creator/sct_wd_4/blob/main/app.js"
click node_backup "https://github.com/durvanalawade746-creator/sct_wd_4/blob/main/app.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_page,node_styles,node_feedback,node_theme,node_user toneBlue
class node_app,node_task_actions,node_list_actions,node_task_views toneAmber
class node_state,node_storage,node_backup toneMint
```

## Components

### App interface

- [App page](https://github.com/durvanalawade746-creator/sct_wd_4/blob/main/index.html): `index.html`
- [Page styles](https://github.com/durvanalawade746-creator/sct_wd_4/blob/main/styles.css): `styles.css`
- [Toast feedback](https://github.com/durvanalawade746-creator/sct_wd_4/blob/main/app.js): `app.js`
- [Theme settings](https://github.com/durvanalawade746-creator/sct_wd_4/blob/main/app.js): `app.js`

### Task workflows

- [App controller](https://github.com/durvanalawade746-creator/sct_wd_4/blob/main/app.js): `app.js`
- [Task actions](https://github.com/durvanalawade746-creator/sct_wd_4/blob/main/app.js): `app.js`
- [List actions](https://github.com/durvanalawade746-creator/sct_wd_4/blob/main/app.js): `app.js`
- [Task views](https://github.com/durvanalawade746-creator/sct_wd_4/blob/main/app.js): `app.js`

### State and persistence

- [App state](https://github.com/durvanalawade746-creator/sct_wd_4/blob/main/app.js): `app.js`
- **Browser storage**
- [JSON backup](https://github.com/durvanalawade746-creator/sct_wd_4/blob/main/app.js): `app.js`

### Other components

- **User**

## Connections

- User → App page: uses
- User → App controller: triggers controls
- App controller → App page: binds DOM
- Page styles → App page: styles
- App controller → App state: initializes
- App controller → Task views: renders
- Task views → App state: reads tasks and lists
- App controller → Task actions: dispatches task actions
- App controller → List actions: dispatches list actions
- Task actions → App state: updates tasks
- List actions → App state: updates lists
- App controller → Theme settings: toggles theme
- Theme settings → App state: updates settings
- App controller → Toast feedback: shows messages
- Task actions → Toast feedback: reports actions
- App controller → Browser storage: loads and saves
- App state → Browser storage: persists state
- App controller → JSON backup: exports data
- JSON backup → User: downloads JSON