# sarah-swe/hw7.week-5 architecture

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

- Interactive diagram: https://gitdiagram.com/sarah-swe/hw7.week-5
- Repository: https://github.com/sarah-swe/hw7.week-5

## Overview

This is a small React to-do list. The browser mounts the app, where users add or update tasks through the form and view, edit, delete, or complete them in the task list; the app holds task state and displays completed and uncompleted counts. Task data is held in component state, with no persistence or backend shown. The graph reflects the sampled component calls and callbacks; it does not infer additional behavior from the template README.

Main entry points: [`src/App.jsx`](https://github.com/sarah-swe/hw7.week-5/blob/main/src/App.jsx) (Task app state), [`src/main.jsx`](https://github.com/sarah-swe/hw7.week-5/blob/main/src/main.jsx) (React mount), [`src/Components/InputForm.jsx`](https://github.com/sarah-swe/hw7.week-5/blob/main/src/Components/InputForm.jsx) (Task form), [`src/Components/ListOfTasks.jsx`](https://github.com/sarah-swe/hw7.week-5/blob/main/src/Components/ListOfTasks.jsx) (Task list)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["App runtime"]
  node_mount["React mount<br/>[main.jsx]"]
  node_app["Task app state<br/>[App.jsx]"]
end

subgraph group_task_entry["Task entry"]
  node_form["Task form<br/>[InputForm.jsx]"]
end

subgraph group_task_display["Task display"]
  node_list["Task list<br/>[ListOfTasks.jsx]"]
end

node_user(("User"))

node_user -->|"opens app"| node_mount
node_mount -->|"renders"| node_app
node_app -->|"renders; passes edit state"| node_form
node_form -->|"submits task"| node_app
node_app -->|"renders tasks"| node_list
node_list -->|"invokes task actions"| node_app

click node_mount "https://github.com/sarah-swe/hw7.week-5/blob/main/src/main.jsx"
click node_app "https://github.com/sarah-swe/hw7.week-5/blob/main/src/App.jsx"
click node_form "https://github.com/sarah-swe/hw7.week-5/blob/main/src/Components/InputForm.jsx"
click node_list "https://github.com/sarah-swe/hw7.week-5/blob/main/src/Components/ListOfTasks.jsx"

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_mount,node_app,node_user toneBlue
class node_form toneAmber
class node_list toneMint
```

## Components

### App runtime

- [React mount](https://github.com/sarah-swe/hw7.week-5/blob/main/src/main.jsx): `src/main.jsx`
- [Task app state](https://github.com/sarah-swe/hw7.week-5/blob/main/src/App.jsx): `src/App.jsx`

### Task entry

- [Task form](https://github.com/sarah-swe/hw7.week-5/blob/main/src/Components/InputForm.jsx): `src/Components/InputForm.jsx`

### Task display

- [Task list](https://github.com/sarah-swe/hw7.week-5/blob/main/src/Components/ListOfTasks.jsx): `src/Components/ListOfTasks.jsx`

### Other components

- **User**

## Connections

- User → React mount: opens app (evidence: `src/main.jsx`)
- React mount → Task app state: renders (evidence: `src/main.jsx`)
- Task app state → Task form: renders; passes edit state (evidence: `src/App.jsx`)
- Task form → Task app state: submits task (evidence: `src/Components/InputForm.jsx`)
- Task app state → Task list: renders tasks (evidence: `src/App.jsx`)
- Task list → Task app state: invokes task actions (evidence: `src/Components/ListOfTasks.jsx`)