# nitasha18/eth-todo-list architecture

> Architecture diagram of the GitHub repository nitasha18/eth-todo-list, 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/nitasha18/eth-todo-list
- Repository: https://github.com/nitasha18/eth-todo-list

## Overview

eth-todo-list is a browser-based Ethereum todo app: users view tasks, create tasks, and toggle completion through a web interface backed by a deployed smart contract. The sampled client code shows account setup, contract loading, task reads, and transaction calls. The contract source is present in the tree but was not sampled, so its internal state model and detailed behavior are not expanded here.

Main entry points: [`src/app.js`](https://github.com/nitasha18/eth-todo-list/blob/master/src/app.js) (Browser app), [`src/index.html`](https://github.com/nitasha18/eth-todo-list/blob/master/src/index.html) (Todo interface), [`contracts/TodoList.sol`](https://github.com/nitasha18/eth-todo-list/blob/master/contracts/TodoList.sol) (Todo contract)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Browser client"]
  node_page["Todo interface<br/>[index.html]"]
  node_app["Browser app<br/>[app.js]"]
end

subgraph group_contract["On-chain application"]
  node_todo["Todo contract<br/>[TodoList.sol]"]
end

node_user(("User"))
node_wallet["Ethereum wallet"]
node_ethereum[("Ethereum network")]

node_user -->|"uses"| node_page
node_page -->|"triggers actions"| node_app
node_app -->|"updates DOM"| node_page
node_app -->|"requests account"| node_wallet
node_wallet -->|"provides provider"| node_app
node_app -->|"reads and transacts"| node_todo
node_todo -->|"executes on"| node_ethereum
node_ethereum -->|"stores contract state"| node_todo

click node_page "https://github.com/nitasha18/eth-todo-list/blob/master/src/index.html"
click node_app "https://github.com/nitasha18/eth-todo-list/blob/master/src/app.js"
click node_todo "https://github.com/nitasha18/eth-todo-list/blob/master/contracts/TodoList.sol"

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_app,node_user toneBlue
class node_todo,node_ethereum toneAmber
class node_wallet toneIndigo
```

## Components

### Browser client

- [Todo interface](https://github.com/nitasha18/eth-todo-list/blob/master/src/index.html): `src/index.html`
- [Browser app](https://github.com/nitasha18/eth-todo-list/blob/master/src/app.js): `src/app.js`

### On-chain application

- [Todo contract](https://github.com/nitasha18/eth-todo-list/blob/master/contracts/TodoList.sol): `contracts/TodoList.sol`

### Other components

- **User**
- **Ethereum wallet**
- **Ethereum network**

## Connections

- User → Todo interface: uses
- Todo interface → Browser app: triggers actions
- Browser app → Todo interface: updates DOM
- Browser app → Ethereum wallet: requests account
- Ethereum wallet → Browser app: provides provider
- Browser app → Todo contract: reads and transacts
- Todo contract → Ethereum network: executes on
- Ethereum network → Todo contract: stores contract state