# hsai-rohit/todolist-app architecture

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

- Interactive diagram: https://gitdiagram.com/hsai-rohit/todolist-app
- Repository: https://github.com/hsai-rohit/todolist-app

## Overview

This Expo app lets a user create tasks, toggle completion, edit titles, and delete items. App.js owns task state and loads/saves it in local AsyncStorage; it also configures navigation and passes task data and callbacks to the screens. TaskListScreen handles task entry, completion, deletion, and navigation to editing; EditTaskScreen updates a task through the callback. TaskItem.js is present but is not imported by the sampled app flow. The graph reflects the excerpts and README; no external service is documented.

Main entry points: [`App.js`](https://github.com/hsai-rohit/todolist-app/blob/main/App.js) (App shell and state), [`screens/TaskListScreen.js`](https://github.com/hsai-rohit/todolist-app/blob/main/screens/TaskListScreen.js) (Task list screen), [`screens/EditTaskScreen.js`](https://github.com/hsai-rohit/todolist-app/blob/main/screens/EditTaskScreen.js) (Task editor)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App state and storage"]
  node_app["App shell and state<br/>[App.js]"]
  node_storage[("Local task storage<br/>[App.js]")]
end

subgraph group_screens["Task workflows"]
  node_list["Task list screen<br/>[TaskListScreen.js]"]
  node_edit["Task editor<br/>[EditTaskScreen.js]"]
end

subgraph group_ui["Task presentation"]
  node_item["Task item component<br/>[TaskItem.js]"]
end

node_user(("User"))

node_user -->|"opens app"| node_app
node_app -->|"routes to"| node_list
node_app -->|"routes to"| node_edit
node_app -->|"loads and saves"| node_storage
node_list -->|"calls task actions"| node_app
node_edit -->|"submits edits"| node_app

click node_app "https://github.com/hsai-rohit/todolist-app/blob/main/App.js"
click node_storage "https://github.com/hsai-rohit/todolist-app/blob/main/App.js"
click node_list "https://github.com/hsai-rohit/todolist-app/blob/main/screens/TaskListScreen.js"
click node_edit "https://github.com/hsai-rohit/todolist-app/blob/main/screens/EditTaskScreen.js"
click node_item "https://github.com/hsai-rohit/todolist-app/blob/main/components/TaskItem.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_app,node_storage,node_user toneBlue
class node_list,node_edit toneAmber
class node_item toneMint
```

## Components

### App state and storage

- [App shell and state](https://github.com/hsai-rohit/todolist-app/blob/main/App.js): `App.js`
- [Local task storage](https://github.com/hsai-rohit/todolist-app/blob/main/App.js): `App.js`

### Task workflows

- [Task list screen](https://github.com/hsai-rohit/todolist-app/blob/main/screens/TaskListScreen.js): `screens/TaskListScreen.js`
- [Task editor](https://github.com/hsai-rohit/todolist-app/blob/main/screens/EditTaskScreen.js): `screens/EditTaskScreen.js`

### Task presentation

- [Task item component](https://github.com/hsai-rohit/todolist-app/blob/main/components/TaskItem.js): `components/TaskItem.js`

### Other components

- **User**

## Connections

- User → App shell and state: opens app (evidence: `README.md`)
- App shell and state → Task list screen: routes to (evidence: `App.js`)
- App shell and state → Task editor: routes to (evidence: `App.js`)
- App shell and state → Local task storage: loads and saves (evidence: `App.js`)
- Task list screen → App shell and state: calls task actions (evidence: `screens/TaskListScreen.js`)
- Task editor → App shell and state: submits edits (evidence: `screens/EditTaskScreen.js`)