# joaoptoaldo/laboratorio-rotas-react-ia architecture

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

- Interactive diagram: https://gitdiagram.com/joaoptoaldo/laboratorio-rotas-react-ia
- Repository: https://github.com/joaoptoaldo/laboratorio-rotas-react-ia

## Overview

Laboratório de Rotas is a didactic full-stack task manager with registration/login, JWT-protected task CRUD, and a React interface. A user registers or logs in, then creates, lists, edits, completes, or removes their tasks; the backend scopes task operations to the authenticated user and persists users and tasks in PostgreSQL through Drizzle. The graph separates frontend interactions, authentication, task routes, and persistence. Relationships reflect shown calls or HTTP endpoints; deployment files and unsampled implementation details are omitted.

Main entry points: [`frontend/src/App.jsx`](https://github.com/joaoptoaldo/laboratorio-rotas-react-ia/blob/main/frontend/src/App.jsx) (App state), [`backend/routes/tarefaRoute.js`](https://github.com/joaoptoaldo/laboratorio-rotas-react-ia/blob/main/backend/routes/tarefaRoute.js) (Task routes), [`backend/server.js`](https://github.com/joaoptoaldo/laboratorio-rotas-react-ia/blob/main/backend/server.js) (Auth endpoints), [`frontend/src/Auth.jsx`](https://github.com/joaoptoaldo/laboratorio-rotas-react-ia/blob/main/frontend/src/Auth.jsx) (Auth form)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Task interface"]
  node_app["App state<br/>[App.jsx]"]
  node_auth_ui["Auth form<br/>[Auth.jsx]"]
  node_task_input["Task input<br/>[input.jsx]"]
  node_task_list["Task list<br/>[TarefaList.jsx]"]
  node_task_card["Task card<br/>[TarefaList.jsx]"]
  node_theme["Theme toggle<br/>[ThemeToggle.jsx]"]
end

subgraph group_auth["Authentication"]
  node_auth_api["Auth endpoints<br/>[server.js]"]
end

subgraph group_api["Task API"]
  node_task_routes["Task routes<br/>[tarefaRoute.js]"]
end

subgraph group_data["Persistence"]
  node_db_client["Drizzle client<br/>[db.js]"]
  node_db_schema["User and task schema<br/>[schema.js]"]
end

node_user(("User"))
node_postgres[("PostgreSQL")]

node_user -->|"submits credentials"| node_auth_ui
node_user -.->|"uses task views"| node_app
node_auth_ui -->|"posts credentials"| node_auth_api
node_auth_api -->|"queries users"| node_db_client
node_auth_api -->|"uses user table"| node_db_schema
node_app -->|"renders unauthenticated"| node_auth_ui
node_app -->|"renders"| node_task_input
node_app -->|"renders"| node_task_list
node_task_input -->|"posts task"| node_task_routes
node_app -->|"fetches and toggles"| node_task_routes
node_task_card -->|"edits and deletes"| node_task_routes
node_task_list -->|"renders cards"| node_task_card
node_task_routes -->|"runs task queries"| node_db_client
node_task_routes -->|"uses task table"| node_db_schema
node_db_client -->|"connects"| node_postgres

click node_app "https://github.com/joaoptoaldo/laboratorio-rotas-react-ia/blob/main/frontend/src/App.jsx"
click node_auth_ui "https://github.com/joaoptoaldo/laboratorio-rotas-react-ia/blob/main/frontend/src/Auth.jsx"
click node_task_input "https://github.com/joaoptoaldo/laboratorio-rotas-react-ia/blob/main/frontend/src/components/input.jsx"
click node_task_list "https://github.com/joaoptoaldo/laboratorio-rotas-react-ia/blob/main/frontend/src/components/TarefaList.jsx"
click node_task_card "https://github.com/joaoptoaldo/laboratorio-rotas-react-ia/blob/main/frontend/src/components/TarefaList.jsx"
click node_theme "https://github.com/joaoptoaldo/laboratorio-rotas-react-ia/blob/main/frontend/src/components/ui/ThemeToggle.jsx"
click node_auth_api "https://github.com/joaoptoaldo/laboratorio-rotas-react-ia/blob/main/backend/server.js"
click node_task_routes "https://github.com/joaoptoaldo/laboratorio-rotas-react-ia/blob/main/backend/routes/tarefaRoute.js"
click node_db_client "https://github.com/joaoptoaldo/laboratorio-rotas-react-ia/blob/main/backend/database/db.js"
click node_db_schema "https://github.com/joaoptoaldo/laboratorio-rotas-react-ia/blob/main/backend/database/schema.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_app,node_auth_ui,node_task_input,node_task_list,node_task_card,node_theme,node_user toneBlue
class node_auth_api,node_postgres toneAmber
class node_task_routes toneMint
class node_db_client,node_db_schema toneRose
```

## Components

### Task interface

- [App state](https://github.com/joaoptoaldo/laboratorio-rotas-react-ia/blob/main/frontend/src/App.jsx): `frontend/src/App.jsx`
- [Auth form](https://github.com/joaoptoaldo/laboratorio-rotas-react-ia/blob/main/frontend/src/Auth.jsx): `frontend/src/Auth.jsx`
- [Task input](https://github.com/joaoptoaldo/laboratorio-rotas-react-ia/blob/main/frontend/src/components/input.jsx): `frontend/src/components/input.jsx`
- [Task list](https://github.com/joaoptoaldo/laboratorio-rotas-react-ia/blob/main/frontend/src/components/TarefaList.jsx): `frontend/src/components/TarefaList.jsx`
- [Task card](https://github.com/joaoptoaldo/laboratorio-rotas-react-ia/blob/main/frontend/src/components/TarefaList.jsx): `frontend/src/components/TarefaList.jsx`
- [Theme toggle](https://github.com/joaoptoaldo/laboratorio-rotas-react-ia/blob/main/frontend/src/components/ui/ThemeToggle.jsx): `frontend/src/components/ui/ThemeToggle.jsx`

### Authentication

- [Auth endpoints](https://github.com/joaoptoaldo/laboratorio-rotas-react-ia/blob/main/backend/server.js): `backend/server.js`

### Task API

- [Task routes](https://github.com/joaoptoaldo/laboratorio-rotas-react-ia/blob/main/backend/routes/tarefaRoute.js): `backend/routes/tarefaRoute.js`

### Persistence

- [Drizzle client](https://github.com/joaoptoaldo/laboratorio-rotas-react-ia/blob/main/backend/database/db.js): `backend/database/db.js`
- [User and task schema](https://github.com/joaoptoaldo/laboratorio-rotas-react-ia/blob/main/backend/database/schema.js): `backend/database/schema.js`

### Other components

- **User**
- **PostgreSQL**

## Connections

- User → Auth form: submits credentials (evidence: `frontend/src/Auth.jsx`)
- User → App state: uses task views
- Auth form → Auth endpoints: posts credentials (evidence: `frontend/src/Auth.jsx`)
- Auth endpoints → Drizzle client: queries users (evidence: `backend/server.js`)
- Auth endpoints → User and task schema: uses user table (evidence: `backend/server.js`)
- App state → Auth form: renders unauthenticated (evidence: `frontend/src/App.jsx`)
- App state → Task input: renders (evidence: `frontend/src/App.jsx`)
- App state → Task list: renders (evidence: `frontend/src/App.jsx`)
- Task input → Task routes: posts task (evidence: `frontend/src/components/input.jsx`)
- App state → Task routes: fetches and toggles (evidence: `frontend/src/App.jsx`)
- Task card → Task routes: edits and deletes (evidence: `frontend/src/components/TarefaList.jsx`)
- Task list → Task card: renders cards (evidence: `frontend/src/components/TarefaList.jsx`)
- Task routes → Drizzle client: runs task queries (evidence: `backend/routes/tarefaRoute.js`)
- Task routes → User and task schema: uses task table (evidence: `backend/routes/tarefaRoute.js`)
- Drizzle client → PostgreSQL: connects (evidence: `backend/database/db.js`)