# obsonferreira/js-agenda architecture

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

- Interactive diagram: https://gitdiagram.com/obsonferreira/js-agenda
- Repository: https://github.com/obsonferreira/js-agenda

## Overview

Agenda is a browser-based contact manager: users create and validate contacts, then browse, search, edit, or delete them. The main flow runs from the cadastro form through shared form processing and validation to the agenda service and repository, which keeps the contact list in localStorage. The agenda page reads and displays stored contacts and provides editing and deletion interactions. The README also mentions pagination and sorting, but the sampled source does not establish their implementation or wiring; the infrastructure database work is explicitly described as in development.

Main entry points: [`src/interface/agenda/agendaEventos.js`](https://github.com/obsonferreira/js-agenda/blob/main/src/interface/agenda/agendaEventos.js) (Agenda events), [`src/servicos/agendaService.js`](https://github.com/obsonferreira/js-agenda/blob/main/src/servicos/agendaService.js) (Agenda service), [`src/interface/compartilhado/formulario.js`](https://github.com/obsonferreira/js-agenda/blob/main/src/interface/compartilhado/formulario.js) (Shared forms), [`src/repositorio/agendaRepositorio.js`](https://github.com/obsonferreira/js-agenda/blob/main/src/repositorio/agendaRepositorio.js) (Agenda repository)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_interface["User interface"]
  node_cadastro_page["Cadastro page<br/>[index.html]"]
  node_agenda_page["Agenda page<br/>[agenda.html]"]
  node_cadastro_events["Cadastro events<br/>[cadastroEventos.js]"]
  node_agenda_events["Agenda events<br/>[agendaEventos.js]"]
  node_shared_form["Shared forms<br/>[formulario.js]"]
  node_agenda_table["Agenda table<br/>[agendaTabela.js]"]
  node_agenda_form["Agenda form"]
  node_dialog["Dialogs<br/>[dialog.js]"]
end

subgraph group_application["Application flow"]
  node_service["Agenda service<br/>[agendaService.js]"]
end

subgraph group_domain["Contact domain"]
  node_validator["Contact validators<br/>[validaPessoa.js]"]
  node_duplicate_validator["Duplicate check"]
  node_contact_model["Contact model<br/>[contato.js]"]
  node_person_model["Person model<br/>[pessoa.js]"]
  node_agenda_model["Agenda collection<br/>[agenda.js]"]
end

subgraph group_storage["Contact storage"]
  node_repository["Agenda repository"]
  node_local_storage[("Browser localStorage")]
end

node_user(("User"))

node_user -->|"opens"| node_cadastro_page
node_user -->|"opens"| node_agenda_page
node_cadastro_page -->|"loads"| node_cadastro_events
node_agenda_page -->|"loads"| node_agenda_events
node_cadastro_events -->|"processes form"| node_shared_form
node_cadastro_events -->|"shows result"| node_dialog
node_shared_form -->|"creates"| node_contact_model
node_shared_form -->|"validates"| node_validator
node_shared_form -->|"checks duplicates"| node_service
node_service -->|"checks duplicates"| node_duplicate_validator
node_service -->|"saves or edits"| node_repository
node_service -->|"creates"| node_contact_model
node_service -->|"creates"| node_person_model
node_agenda_events -->|"lists, searches, deletes"| node_repository
node_agenda_events -->|"renders contacts"| node_agenda_table
node_agenda_events -->|"handles edits"| node_agenda_form
node_agenda_events -->|"shows prompts"| node_dialog
node_repository -->|"updates collection"| node_agenda_model
node_repository -->|"loads and saves"| node_local_storage

click node_cadastro_page "https://github.com/obsonferreira/js-agenda/blob/main/index.html"
click node_agenda_page "https://github.com/obsonferreira/js-agenda/blob/main/paginas/agenda.html"
click node_cadastro_events "https://github.com/obsonferreira/js-agenda/blob/main/src/interface/cadastro/cadastroEventos.js"
click node_agenda_events "https://github.com/obsonferreira/js-agenda/blob/main/src/interface/agenda/agendaEventos.js"
click node_shared_form "https://github.com/obsonferreira/js-agenda/blob/main/src/interface/compartilhado/formulario.js"
click node_agenda_table "https://github.com/obsonferreira/js-agenda/blob/main/src/interface/agenda/agendaTabela.js"
click node_agenda_form "https://github.com/obsonferreira/js-agenda/blob/main/src/interface/agenda/agendaFormulario.js"
click node_dialog "https://github.com/obsonferreira/js-agenda/blob/main/src/interface/compartilhado/dialog.js"
click node_service "https://github.com/obsonferreira/js-agenda/blob/main/src/servicos/agendaService.js"
click node_validator "https://github.com/obsonferreira/js-agenda/blob/main/src/validadores/validaPessoa.js"
click node_duplicate_validator "https://github.com/obsonferreira/js-agenda/blob/main/src/validadores/validaDuplicidade.js"
click node_contact_model "https://github.com/obsonferreira/js-agenda/blob/main/src/modelos/contato.js"
click node_person_model "https://github.com/obsonferreira/js-agenda/blob/main/src/modelos/pessoa.js"
click node_agenda_model "https://github.com/obsonferreira/js-agenda/blob/main/src/modelos/agenda.js"
click node_repository "https://github.com/obsonferreira/js-agenda/blob/main/src/repositorio/agendaRepositorio.js"

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_cadastro_page,node_agenda_page,node_cadastro_events,node_agenda_events,node_shared_form,node_agenda_table,node_agenda_form,node_dialog,node_user toneBlue
class node_service toneAmber
class node_validator,node_duplicate_validator,node_contact_model,node_person_model,node_agenda_model toneMint
class node_repository,node_local_storage toneRose
```

## Components

### User interface

- [Cadastro page](https://github.com/obsonferreira/js-agenda/blob/main/index.html): `index.html`
- [Agenda page](https://github.com/obsonferreira/js-agenda/blob/main/paginas/agenda.html): `paginas/agenda.html`
- [Cadastro events](https://github.com/obsonferreira/js-agenda/blob/main/src/interface/cadastro/cadastroEventos.js): `src/interface/cadastro/cadastroEventos.js`
- [Agenda events](https://github.com/obsonferreira/js-agenda/blob/main/src/interface/agenda/agendaEventos.js): `src/interface/agenda/agendaEventos.js`
- [Shared forms](https://github.com/obsonferreira/js-agenda/blob/main/src/interface/compartilhado/formulario.js): `src/interface/compartilhado/formulario.js`
- [Agenda table](https://github.com/obsonferreira/js-agenda/blob/main/src/interface/agenda/agendaTabela.js): `src/interface/agenda/agendaTabela.js`
- [Agenda form](https://github.com/obsonferreira/js-agenda/blob/main/src/interface/agenda/agendaFormulario.js): `src/interface/agenda/agendaFormulario.js`
- [Dialogs](https://github.com/obsonferreira/js-agenda/blob/main/src/interface/compartilhado/dialog.js): `src/interface/compartilhado/dialog.js`

### Application flow

- [Agenda service](https://github.com/obsonferreira/js-agenda/blob/main/src/servicos/agendaService.js): `src/servicos/agendaService.js`

### Contact domain

- [Contact validators](https://github.com/obsonferreira/js-agenda/blob/main/src/validadores/validaPessoa.js): `src/validadores/validaPessoa.js`
- [Duplicate check](https://github.com/obsonferreira/js-agenda/blob/main/src/validadores/validaDuplicidade.js): `src/validadores/validaDuplicidade.js`
- [Contact model](https://github.com/obsonferreira/js-agenda/blob/main/src/modelos/contato.js): `src/modelos/contato.js`
- [Person model](https://github.com/obsonferreira/js-agenda/blob/main/src/modelos/pessoa.js): `src/modelos/pessoa.js`
- [Agenda collection](https://github.com/obsonferreira/js-agenda/blob/main/src/modelos/agenda.js): `src/modelos/agenda.js`

### Contact storage

- [Agenda repository](https://github.com/obsonferreira/js-agenda/blob/main/src/repositorio/agendaRepositorio.js): `src/repositorio/agendaRepositorio.js`
- **Browser localStorage**

### Other components

- **User**

## Connections

- User → Cadastro page: opens
- User → Agenda page: opens
- Cadastro page → Cadastro events: loads
- Agenda page → Agenda events: loads
- Cadastro events → Shared forms: processes form
- Cadastro events → Dialogs: shows result
- Shared forms → Contact model: creates
- Shared forms → Contact validators: validates
- Shared forms → Agenda service: checks duplicates
- Agenda service → Duplicate check: checks duplicates
- Agenda service → Agenda repository: saves or edits
- Agenda service → Contact model: creates
- Agenda service → Person model: creates
- Agenda events → Agenda repository: lists, searches, deletes
- Agenda events → Agenda table: renders contacts
- Agenda events → Agenda form: handles edits
- Agenda events → Dialogs: shows prompts
- Agenda repository → Agenda collection: updates collection
- Agenda repository → Browser localStorage: loads and saves