# eubastosdev/gerenciador_de_tarefas architecture

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

- Interactive diagram: https://gitdiagram.com/eubastosdev/gerenciador_de_tarefas
- Repository: https://github.com/eubastosdev/gerenciador_de_tarefas

## Overview

This is a small React task manager. Users add tasks, toggle completion, delete tasks, and open a task detail page; the app keeps task state in the root component and persists it in browser localStorage. The router selects the list or detail page, with task details passed through query parameters. The README also documents these capabilities. Relationships below are limited to the shown imports, callback wiring, navigation, and storage behavior; the sample API-fetch code is disabled and is not part of the active workflow.

Main entry points: [`src/App.jsx`](https://github.com/eubastosdev/gerenciador_de_tarefas/blob/Main/src/App.jsx) (Task state and actions), [`src/components/Tasks.jsx`](https://github.com/eubastosdev/gerenciador_de_tarefas/blob/Main/src/components/Tasks.jsx) (Task list), [`src/components/AddTask.jsx`](https://github.com/eubastosdev/gerenciador_de_tarefas/blob/Main/src/components/AddTask.jsx) (Add task form), [`src/pages/TaskPage.jsx`](https://github.com/eubastosdev/gerenciador_de_tarefas/blob/Main/src/pages/TaskPage.jsx) (Task details page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_task_workflow["Task workflow"]
  node_app["Task state and actions<br/>[App.jsx]"]
  node_add_task["Add task form<br/>[AddTask.jsx]"]
  node_tasks["Task list<br/>[Tasks.jsx]"]
  node_storage[("Browser localStorage")]
end

subgraph group_navigation["Pages and navigation"]
  node_router["Route setup<br/>[main.jsx]"]
  node_detail["Task details page<br/>[TaskPage.jsx]"]
end

subgraph group_ui["Reusable interface"]
  node_input["Text input<br/>[Input.jsx]"]
  node_button["Action button<br/>[Button.jsx]"]
  node_title["Page title<br/>[Title.jsx]"]
end

node_user(("User"))

node_user -->|"enters task"| node_add_task
node_add_task -->|"renders"| node_input
node_add_task -->|"submits task"| node_app
node_app -->|"passes task state"| node_tasks
node_tasks -->|"invokes task actions"| node_app
node_tasks -->|"renders actions"| node_button
node_app -->|"renders"| node_title
node_tasks -->|"navigates with details"| node_detail
node_router -->|"routes list page"| node_app
node_router -->|"routes detail page"| node_detail
node_detail -->|"renders"| node_title
node_app -->|"loads and saves tasks"| node_storage
node_user -->|"toggles or deletes"| node_tasks

click node_app "https://github.com/eubastosdev/gerenciador_de_tarefas/blob/Main/src/App.jsx"
click node_add_task "https://github.com/eubastosdev/gerenciador_de_tarefas/blob/Main/src/components/AddTask.jsx"
click node_tasks "https://github.com/eubastosdev/gerenciador_de_tarefas/blob/Main/src/components/Tasks.jsx"
click node_router "https://github.com/eubastosdev/gerenciador_de_tarefas/blob/Main/src/main.jsx"
click node_detail "https://github.com/eubastosdev/gerenciador_de_tarefas/blob/Main/src/pages/TaskPage.jsx"
click node_input "https://github.com/eubastosdev/gerenciador_de_tarefas/blob/Main/src/components/Input.jsx"
click node_button "https://github.com/eubastosdev/gerenciador_de_tarefas/blob/Main/src/components/Button.jsx"
click node_title "https://github.com/eubastosdev/gerenciador_de_tarefas/blob/Main/src/components/Title.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_app,node_add_task,node_tasks,node_storage,node_user toneBlue
class node_router,node_detail toneAmber
class node_input,node_button,node_title toneMint
```

## Components

### Task workflow

- [Task state and actions](https://github.com/eubastosdev/gerenciador_de_tarefas/blob/Main/src/App.jsx): `src/App.jsx`
- [Add task form](https://github.com/eubastosdev/gerenciador_de_tarefas/blob/Main/src/components/AddTask.jsx): `src/components/AddTask.jsx`
- [Task list](https://github.com/eubastosdev/gerenciador_de_tarefas/blob/Main/src/components/Tasks.jsx): `src/components/Tasks.jsx`
- **Browser localStorage**

### Pages and navigation

- [Route setup](https://github.com/eubastosdev/gerenciador_de_tarefas/blob/Main/src/main.jsx): `src/main.jsx`
- [Task details page](https://github.com/eubastosdev/gerenciador_de_tarefas/blob/Main/src/pages/TaskPage.jsx): `src/pages/TaskPage.jsx`

### Reusable interface

- [Text input](https://github.com/eubastosdev/gerenciador_de_tarefas/blob/Main/src/components/Input.jsx): `src/components/Input.jsx`
- [Action button](https://github.com/eubastosdev/gerenciador_de_tarefas/blob/Main/src/components/Button.jsx): `src/components/Button.jsx`
- [Page title](https://github.com/eubastosdev/gerenciador_de_tarefas/blob/Main/src/components/Title.jsx): `src/components/Title.jsx`

### Other components

- **User**

## Connections

- User → Add task form: enters task (evidence: `src/components/AddTask.jsx`)
- Add task form → Text input: renders (evidence: `src/components/AddTask.jsx`)
- Add task form → Task state and actions: submits task (evidence: `src/App.jsx`)
- Task state and actions → Task list: passes task state (evidence: `src/App.jsx`)
- Task list → Task state and actions: invokes task actions (evidence: `src/App.jsx`)
- Task list → Action button: renders actions (evidence: `src/components/Tasks.jsx`)
- Task state and actions → Page title: renders (evidence: `src/App.jsx`)
- Task list → Task details page: navigates with details (evidence: `src/components/Tasks.jsx`)
- Route setup → Task state and actions: routes list page (evidence: `src/main.jsx`)
- Route setup → Task details page: routes detail page (evidence: `src/main.jsx`)
- Task details page → Page title: renders (evidence: `src/pages/TaskPage.jsx`)
- Task state and actions → Browser localStorage: loads and saves tasks (evidence: `src/App.jsx`)
- User → Task list: toggles or deletes (evidence: `src/components/Tasks.jsx`)