# mariajuliasales/todo-list architecture

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

- Interactive diagram: https://gitdiagram.com/mariajuliasales/todo-list
- Repository: https://github.com/mariajuliasales/todo-list

## Overview

Todo List supports personal task creation, editing, deletion, status changes, search and filters, status counters, form validation, and a responsive web interface. The frontend’s browser workflow is coordinated by main.js and persists through LocalStorage. The Java backend is a separate console application: the sampled code shows no connection between it and the frontend. Unsampled UI modules are included only where the tree and README support their role; their internal wiring is not inferred.

Main entry points: [`frontend/js/main.js`](https://github.com/mariajuliasales/todo-list/blob/main/frontend/js/main.js) (Workflow coordinator), [`frontend/js/ui/taskList.js`](https://github.com/mariajuliasales/todo-list/blob/main/frontend/js/ui/taskList.js) (Task list and counters), [`frontend/index.html`](https://github.com/mariajuliasales/todo-list/blob/main/frontend/index.html) (Web page), [`frontend/js/ui/taskForm.js`](https://github.com/mariajuliasales/todo-list/blob/main/frontend/js/ui/taskForm.js) (Task form)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_web["Web workflow"]
  node_main["Workflow coordinator<br/>[main.js]"]
end

subgraph group_ui["User interface"]
  node_page["Web page<br/>[index.html]"]
  node_form["Task form<br/>[taskForm.js]"]
  node_modal["Modal controls<br/>[modal.js]"]
  node_filters["Search and filters<br/>[filters.js]"]
  node_list["Task list and counters<br/>[taskList.js]"]
  node_format["Display formatting<br/>[format.js]"]
  node_styles["Responsive styling<br/>[responsive.css]"]
end

subgraph group_frontdata["Frontend data"]
  node_validation["Task validation<br/>[task.js]"]
  node_taskservice["Task operations<br/>[taskService.js]"]
  node_repository["Task repository<br/>[taskRepository.js]"]
  node_storage[("Browser LocalStorage")]
end

subgraph group_java["Java console"]
  node_cli["Console menu<br/>[Main.java]"]
  node_javaservice["Task service<br/>[TarefaService.java]"]
  node_taskmodel["Task model<br/>[Tarefa.java]"]
  node_status["Task statuses<br/>[StatusEnum.java]"]
end

node_user(("User"))
node_javauser(("Console user"))

node_user -->|"uses"| node_page
node_page -->|"loads"| node_main
node_main -->|"reads form"| node_form
node_main -->|"validates"| node_validation
node_main -->|"requests tasks"| node_taskservice
node_main -->|"reads filters"| node_filters
node_main -->|"renders results"| node_list
node_main -->|"controls modal"| node_modal
node_form -->|"submits data"| node_main
node_filters -->|"signals changes"| node_main
node_list -->|"dispatches actions"| node_main
node_list -->|"formats display"| node_format
node_taskservice -->|"delegates storage"| node_repository
node_repository -->|"reads and writes"| node_storage
node_user -->|"views layout"| node_styles
node_javauser -->|"uses"| node_cli
node_cli -->|"invokes operations"| node_javaservice
node_javaservice -->|"creates and updates"| node_taskmodel
node_taskmodel -->|"uses enum"| node_status

click node_page "https://github.com/mariajuliasales/todo-list/blob/main/frontend/index.html"
click node_main "https://github.com/mariajuliasales/todo-list/blob/main/frontend/js/main.js"
click node_form "https://github.com/mariajuliasales/todo-list/blob/main/frontend/js/ui/taskForm.js"
click node_modal "https://github.com/mariajuliasales/todo-list/blob/main/frontend/js/ui/modal.js"
click node_filters "https://github.com/mariajuliasales/todo-list/blob/main/frontend/js/ui/filters.js"
click node_list "https://github.com/mariajuliasales/todo-list/blob/main/frontend/js/ui/taskList.js"
click node_validation "https://github.com/mariajuliasales/todo-list/blob/main/frontend/js/models/task.js"
click node_taskservice "https://github.com/mariajuliasales/todo-list/blob/main/frontend/js/services/taskService.js"
click node_repository "https://github.com/mariajuliasales/todo-list/blob/main/frontend/js/services/taskRepository.js"
click node_format "https://github.com/mariajuliasales/todo-list/blob/main/frontend/js/utils/format.js"
click node_cli "https://github.com/mariajuliasales/todo-list/blob/main/backend/src/main/java/Main.java"
click node_javaservice "https://github.com/mariajuliasales/todo-list/blob/main/backend/src/main/java/service/TarefaService.java"
click node_taskmodel "https://github.com/mariajuliasales/todo-list/blob/main/backend/src/main/java/model/Tarefa.java"
click node_status "https://github.com/mariajuliasales/todo-list/blob/main/backend/src/main/java/model/StatusEnum.java"
click node_styles "https://github.com/mariajuliasales/todo-list/blob/main/frontend/css/responsive.css"

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_main,node_user,node_javauser toneBlue
class node_page,node_form,node_modal,node_filters,node_list,node_format,node_styles toneAmber
class node_validation,node_taskservice,node_repository,node_storage toneMint
class node_cli,node_javaservice,node_taskmodel,node_status toneRose
```

## Components

### Web workflow

- [Workflow coordinator](https://github.com/mariajuliasales/todo-list/blob/main/frontend/js/main.js): `frontend/js/main.js`

### User interface

- [Web page](https://github.com/mariajuliasales/todo-list/blob/main/frontend/index.html): `frontend/index.html`
- [Task form](https://github.com/mariajuliasales/todo-list/blob/main/frontend/js/ui/taskForm.js): `frontend/js/ui/taskForm.js`
- [Modal controls](https://github.com/mariajuliasales/todo-list/blob/main/frontend/js/ui/modal.js): `frontend/js/ui/modal.js`
- [Search and filters](https://github.com/mariajuliasales/todo-list/blob/main/frontend/js/ui/filters.js): `frontend/js/ui/filters.js`
- [Task list and counters](https://github.com/mariajuliasales/todo-list/blob/main/frontend/js/ui/taskList.js): `frontend/js/ui/taskList.js`
- [Display formatting](https://github.com/mariajuliasales/todo-list/blob/main/frontend/js/utils/format.js): `frontend/js/utils/format.js`
- [Responsive styling](https://github.com/mariajuliasales/todo-list/blob/main/frontend/css/responsive.css): `frontend/css/responsive.css`

### Frontend data

- [Task validation](https://github.com/mariajuliasales/todo-list/blob/main/frontend/js/models/task.js): `frontend/js/models/task.js`
- [Task operations](https://github.com/mariajuliasales/todo-list/blob/main/frontend/js/services/taskService.js): `frontend/js/services/taskService.js`
- [Task repository](https://github.com/mariajuliasales/todo-list/blob/main/frontend/js/services/taskRepository.js): `frontend/js/services/taskRepository.js`
- **Browser LocalStorage**

### Java console

- [Console menu](https://github.com/mariajuliasales/todo-list/blob/main/backend/src/main/java/Main.java): `backend/src/main/java/Main.java`
- [Task service](https://github.com/mariajuliasales/todo-list/blob/main/backend/src/main/java/service/TarefaService.java): `backend/src/main/java/service/TarefaService.java`
- [Task model](https://github.com/mariajuliasales/todo-list/blob/main/backend/src/main/java/model/Tarefa.java): `backend/src/main/java/model/Tarefa.java`
- [Task statuses](https://github.com/mariajuliasales/todo-list/blob/main/backend/src/main/java/model/StatusEnum.java): `backend/src/main/java/model/StatusEnum.java`

### Other components

- **User**
- **Console user**

## Connections

- User → Web page: uses
- Web page → Workflow coordinator: loads
- Workflow coordinator → Task form: reads form
- Workflow coordinator → Task validation: validates
- Workflow coordinator → Task operations: requests tasks
- Workflow coordinator → Search and filters: reads filters
- Workflow coordinator → Task list and counters: renders results
- Workflow coordinator → Modal controls: controls modal
- Task form → Workflow coordinator: submits data
- Search and filters → Workflow coordinator: signals changes
- Task list and counters → Workflow coordinator: dispatches actions
- Task list and counters → Display formatting: formats display
- Task operations → Task repository: delegates storage
- Task repository → Browser LocalStorage: reads and writes
- User → Responsive styling: views layout
- Console user → Console menu: uses
- Console menu → Task service: invokes operations
- Task service → Task model: creates and updates
- Task model → Task statuses: uses enum