# peanque/reactjs-todo-app architecture

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

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

## Overview

This is a small React to-do app. A user enters a task in the add form; the app creates and stores it, then passes the task list to the list component. Users can toggle completion or delete tasks, with changes saved in browser local storage. The graph focuses on runtime behavior; the shared task shape is included as an internal domain layer. Evidence is limited to the README and the source excerpts and index provided.

Main entry points: [`src/App.tsx`](https://github.com/peanque/reactjs-todo-app/blob/main/src/App.tsx) (Task state), [`src/components/addTodo.tsx`](https://github.com/peanque/reactjs-todo-app/blob/main/src/components/addTodo.tsx) (Add form), [`src/components/listTodo.tsx`](https://github.com/peanque/reactjs-todo-app/blob/main/src/components/listTodo.tsx) (Task list), [`src/main.tsx`](https://github.com/peanque/reactjs-todo-app/blob/main/src/main.tsx) (React entry)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["App runtime"]
  node_entry["React entry<br/>[main.tsx]"]
  node_app["Task state<br/>[App.tsx]"]
end

subgraph group_todo_ui["To-do interface"]
  node_add["Add form<br/>[addTodo.tsx]"]
  node_list["Task list<br/>[listTodo.tsx]"]
end

subgraph group_domain["Task domain"]
  node_task["Task shape<br/>[todoInterface.tsx]"]
end

node_user(("User"))
node_browser[("Browser local storage")]

node_entry -->|"renders"| node_app
node_app -->|"renders"| node_add
node_app -->|"renders"| node_list
node_user -->|"enters task"| node_add
node_add -->|"submits task"| node_app
node_user -->|"selects task"| node_list
node_list -->|"invokes callbacks"| node_app
node_app -->|"reads and writes"| node_browser
node_app -->|"uses type"| node_task

click node_entry "https://github.com/peanque/reactjs-todo-app/blob/main/src/main.tsx"
click node_app "https://github.com/peanque/reactjs-todo-app/blob/main/src/App.tsx"
click node_add "https://github.com/peanque/reactjs-todo-app/blob/main/src/components/addTodo.tsx"
click node_list "https://github.com/peanque/reactjs-todo-app/blob/main/src/components/listTodo.tsx"
click node_task "https://github.com/peanque/reactjs-todo-app/blob/main/src/types/todoInterface.tsx"

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_entry,node_app,node_user toneBlue
class node_add,node_list,node_browser toneAmber
class node_task toneMint
```

## Components

### App runtime

- [React entry](https://github.com/peanque/reactjs-todo-app/blob/main/src/main.tsx): `src/main.tsx`
- [Task state](https://github.com/peanque/reactjs-todo-app/blob/main/src/App.tsx): `src/App.tsx`

### To-do interface

- [Add form](https://github.com/peanque/reactjs-todo-app/blob/main/src/components/addTodo.tsx): `src/components/addTodo.tsx`
- [Task list](https://github.com/peanque/reactjs-todo-app/blob/main/src/components/listTodo.tsx): `src/components/listTodo.tsx`

### Task domain

- [Task shape](https://github.com/peanque/reactjs-todo-app/blob/main/src/types/todoInterface.tsx): `src/types/todoInterface.tsx`

### Other components

- **User**
- **Browser local storage**

## Connections

- React entry → Task state: renders (evidence: `src/main.tsx`)
- Task state → Add form: renders (evidence: `src/App.tsx`)
- Task state → Task list: renders (evidence: `src/App.tsx`)
- User → Add form: enters task (evidence: `src/components/addTodo.tsx`)
- Add form → Task state: submits task (evidence: `src/App.tsx`)
- User → Task list: selects task (evidence: `src/components/listTodo.tsx`)
- Task list → Task state: invokes callbacks (evidence: `src/App.tsx`)
- Task state → Browser local storage: reads and writes (evidence: `src/App.tsx`)
- Task state → Task shape: uses type (evidence: `src/App.tsx`)