# alissonaraujodev/salon-app architecture

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

- Interactive diagram: https://gitdiagram.com/alissonaraujodev/salon-app
- Repository: https://github.com/alissonaraujodev/salon-app

## Overview

Salão is a salon-management application: staff sign in, then manage appointments, clients, services, and professionals through a React interface backed by an Express API and MySQL. The appointment controller validates related client, professional, and service records before creating an appointment; the domain services handle persistence. The graph includes the documented frontend and backend routes and their principal domain stages. Several links are based on the SOURCE INDEX rather than complete excerpts; the frontend-to-backend HTTP connection is shown as unverified.

Main entry points: [`frontend/src/routes/AppRoutes.jsx`](https://github.com/alissonaraujodev/salon-app/blob/main/frontend/src/routes/AppRoutes.jsx) (Protected routes), [`backend/src/app.js`](https://github.com/alissonaraujodev/salon-app/blob/main/backend/src/app.js) (Express API), [`backend/src/controllers/agendamentosController.js`](https://github.com/alissonaraujodev/salon-app/blob/main/backend/src/controllers/agendamentosController.js) (Appointment controller), [`frontend/src/services/api.js`](https://github.com/alissonaraujodev/salon-app/blob/main/frontend/src/services/api.js) (HTTP client)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_web["Web application"]
  node_routes["Protected routes<br/>[AppRoutes.jsx]"]
  node_login["Sign in<br/>[Login.jsx]"]
  node_authctx["Auth context<br/>[AuthContext.jsx]"]
  node_authhook["Auth hook<br/>[useAuth.js]"]
  node_dashboard["Dashboard<br/>[Dashboard.jsx]"]
  node_appointmentsui["Appointments UI<br/>[Agendamentos.jsx]"]
  node_clientsui["Clients UI<br/>[Clientes.jsx]"]
  node_servicesui["Services UI<br/>[Servicos.jsx]"]
  node_professionalsui["Professionals UI<br/>[Profissionais.jsx]"]
  node_layout["Page layout<br/>[Layout.jsx]"]
  node_modal["Modal<br/>[Modal.jsx]"]
  node_inputs["Form controls<br/>[Input.jsx]"]
  node_button["Button<br/>[Button.jsx]"]
end

subgraph group_webdata["Web API clients"]
  node_api["HTTP client<br/>[api.js]"]
  node_apptclient["Appointment client"]
  node_clientclient["Client client<br/>[clientesService.js]"]
  node_serviceclient["Service client<br/>[servicosService.js]"]
  node_professionalclient["Professional client"]
end

subgraph group_api["Backend API"]
  node_backend["Express API<br/>[app.js]"]
  node_authroutes["Auth routes<br/>[authRoutes.js]"]
  node_apptctrl["Appointment controller"]
  node_clientctrl["Client controller"]
  node_servicectrl["Service controller"]
  node_professionalctrl["Professional controller"]
  node_authctrl["Auth controller<br/>[authController.js]"]
  node_authmw["Auth middleware<br/>[authMiddleware.js]"]
end

subgraph group_domain["Salon domain"]
  node_apptsvc["Appointment service"]
  node_clientsvc["Client service<br/>[clientesService.js]"]
  node_servicesvc["Service service<br/>[servicosService.js]"]
  node_professionalsvc["Professional service"]
  node_authsvc["Authentication service<br/>[authService.js]"]
end

subgraph group_storage["Persistence"]
  node_database[("MySQL pool<br/>[database.js]")]
end

node_staff(("Salon staff"))

node_staff -->|"uses"| node_routes
node_routes -->|"routes to"| node_login
node_routes -->|"routes to"| node_dashboard
node_routes -->|"routes to"| node_appointmentsui
node_routes -->|"routes to"| node_clientsui
node_routes -->|"routes to"| node_servicesui
node_routes -->|"routes to"| node_professionalsui
node_routes -->|"checks session"| node_authhook
node_authhook -->|"reads context"| node_authctx
node_login -->|"uses"| node_authhook
node_login -.->|"submits sign-in"| node_authctx
node_dashboard -->|"renders"| node_layout
node_clientsui -->|"renders"| node_layout
node_appointmentsui -->|"calls"| node_apptclient
node_clientsui -->|"calls"| node_clientclient
node_servicesui -->|"calls"| node_serviceclient
node_professionalsui -->|"calls"| node_professionalclient
node_clientsui -->|"renders"| node_modal
node_appointmentsui -->|"renders"| node_inputs
node_appointmentsui -->|"renders"| node_button
node_apptclient -->|"calls"| node_api
node_clientclient -->|"calls"| node_api
node_serviceclient -->|"calls"| node_api
node_professionalclient -->|"calls"| node_api
node_api -.->|"sends HTTP"| node_backend
node_backend -->|"mounts"| node_authroutes
node_backend -->|"mounts routes"| node_apptctrl
node_backend -->|"mounts routes"| node_clientctrl
node_backend -->|"mounts routes"| node_servicectrl
node_backend -->|"mounts routes"| node_professionalctrl
node_authroutes -->|"routes to"| node_authctrl
node_apptctrl -->|"calls"| node_apptsvc
node_apptctrl -->|"validates client"| node_clientsvc
node_apptctrl -->|"validates professional"| node_professionalsvc
node_apptctrl -->|"validates service"| node_servicesvc
node_clientctrl -->|"calls"| node_clientsvc
node_servicectrl -->|"calls"| node_servicesvc
node_professionalctrl -->|"calls"| node_professionalsvc
node_professionalctrl -->|"protected by"| node_authmw
node_authsvc -->|"uses"| node_professionalsvc
node_apptsvc -->|"queries"| node_database
node_clientsvc -->|"queries"| node_database
node_servicesvc -->|"queries"| node_database
node_professionalsvc -->|"queries"| node_database

click node_routes "https://github.com/alissonaraujodev/salon-app/blob/main/frontend/src/routes/AppRoutes.jsx"
click node_login "https://github.com/alissonaraujodev/salon-app/blob/main/frontend/src/pages/Login.jsx"
click node_authctx "https://github.com/alissonaraujodev/salon-app/blob/main/frontend/src/context/AuthContext.jsx"
click node_authhook "https://github.com/alissonaraujodev/salon-app/blob/main/frontend/src/hooks/useAuth.js"
click node_dashboard "https://github.com/alissonaraujodev/salon-app/blob/main/frontend/src/pages/profissional/Dashboard.jsx"
click node_appointmentsui "https://github.com/alissonaraujodev/salon-app/blob/main/frontend/src/pages/profissional/Agendamentos.jsx"
click node_clientsui "https://github.com/alissonaraujodev/salon-app/blob/main/frontend/src/pages/profissional/Clientes.jsx"
click node_servicesui "https://github.com/alissonaraujodev/salon-app/blob/main/frontend/src/pages/profissional/Servicos.jsx"
click node_professionalsui "https://github.com/alissonaraujodev/salon-app/blob/main/frontend/src/pages/profissional/Profissionais.jsx"
click node_layout "https://github.com/alissonaraujodev/salon-app/blob/main/frontend/src/components/Layout.jsx"
click node_modal "https://github.com/alissonaraujodev/salon-app/blob/main/frontend/src/components/Modal.jsx"
click node_inputs "https://github.com/alissonaraujodev/salon-app/blob/main/frontend/src/components/Input.jsx"
click node_button "https://github.com/alissonaraujodev/salon-app/blob/main/frontend/src/components/Button.jsx"
click node_api "https://github.com/alissonaraujodev/salon-app/blob/main/frontend/src/services/api.js"
click node_apptclient "https://github.com/alissonaraujodev/salon-app/blob/main/frontend/src/services/agendamentosService.js"
click node_clientclient "https://github.com/alissonaraujodev/salon-app/blob/main/frontend/src/services/clientesService.js"
click node_serviceclient "https://github.com/alissonaraujodev/salon-app/blob/main/frontend/src/services/servicosService.js"
click node_professionalclient "https://github.com/alissonaraujodev/salon-app/blob/main/frontend/src/services/profissionaisService.js"
click node_backend "https://github.com/alissonaraujodev/salon-app/blob/main/backend/src/app.js"
click node_authroutes "https://github.com/alissonaraujodev/salon-app/blob/main/backend/src/routes/authRoutes.js"
click node_apptctrl "https://github.com/alissonaraujodev/salon-app/blob/main/backend/src/controllers/agendamentosController.js"
click node_clientctrl "https://github.com/alissonaraujodev/salon-app/blob/main/backend/src/controllers/clientesController.js"
click node_servicectrl "https://github.com/alissonaraujodev/salon-app/blob/main/backend/src/controllers/servicosController.js"
click node_professionalctrl "https://github.com/alissonaraujodev/salon-app/blob/main/backend/src/controllers/profissionaisController.js"
click node_authctrl "https://github.com/alissonaraujodev/salon-app/blob/main/backend/src/controllers/authController.js"
click node_authmw "https://github.com/alissonaraujodev/salon-app/blob/main/backend/src/middlewares/authMiddleware.js"
click node_apptsvc "https://github.com/alissonaraujodev/salon-app/blob/main/backend/src/services/agendamentosService.js"
click node_clientsvc "https://github.com/alissonaraujodev/salon-app/blob/main/backend/src/services/clientesService.js"
click node_servicesvc "https://github.com/alissonaraujodev/salon-app/blob/main/backend/src/services/servicosService.js"
click node_professionalsvc "https://github.com/alissonaraujodev/salon-app/blob/main/backend/src/services/profissionaisService.js"
click node_authsvc "https://github.com/alissonaraujodev/salon-app/blob/main/backend/src/services/authService.js"
click node_database "https://github.com/alissonaraujodev/salon-app/blob/main/backend/src/config/database.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_routes,node_login,node_authctx,node_authhook,node_dashboard,node_appointmentsui,node_clientsui,node_servicesui,node_professionalsui,node_layout,node_modal,node_inputs,node_button toneBlue
class node_api,node_apptclient,node_clientclient,node_serviceclient,node_professionalclient toneAmber
class node_backend,node_authroutes,node_apptctrl,node_clientctrl,node_servicectrl,node_professionalctrl,node_authctrl,node_authmw toneMint
class node_apptsvc,node_clientsvc,node_servicesvc,node_professionalsvc,node_authsvc toneRose
class node_database,node_staff toneIndigo
```

## Components

### Web application

- [Protected routes](https://github.com/alissonaraujodev/salon-app/blob/main/frontend/src/routes/AppRoutes.jsx): `frontend/src/routes/AppRoutes.jsx`
- [Sign in](https://github.com/alissonaraujodev/salon-app/blob/main/frontend/src/pages/Login.jsx): `frontend/src/pages/Login.jsx`
- [Auth context](https://github.com/alissonaraujodev/salon-app/blob/main/frontend/src/context/AuthContext.jsx): `frontend/src/context/AuthContext.jsx`
- [Auth hook](https://github.com/alissonaraujodev/salon-app/blob/main/frontend/src/hooks/useAuth.js): `frontend/src/hooks/useAuth.js`
- [Dashboard](https://github.com/alissonaraujodev/salon-app/blob/main/frontend/src/pages/profissional/Dashboard.jsx): `frontend/src/pages/profissional/Dashboard.jsx`
- [Appointments UI](https://github.com/alissonaraujodev/salon-app/blob/main/frontend/src/pages/profissional/Agendamentos.jsx): `frontend/src/pages/profissional/Agendamentos.jsx`
- [Clients UI](https://github.com/alissonaraujodev/salon-app/blob/main/frontend/src/pages/profissional/Clientes.jsx): `frontend/src/pages/profissional/Clientes.jsx`
- [Services UI](https://github.com/alissonaraujodev/salon-app/blob/main/frontend/src/pages/profissional/Servicos.jsx): `frontend/src/pages/profissional/Servicos.jsx`
- [Professionals UI](https://github.com/alissonaraujodev/salon-app/blob/main/frontend/src/pages/profissional/Profissionais.jsx): `frontend/src/pages/profissional/Profissionais.jsx`
- [Page layout](https://github.com/alissonaraujodev/salon-app/blob/main/frontend/src/components/Layout.jsx): `frontend/src/components/Layout.jsx`
- [Modal](https://github.com/alissonaraujodev/salon-app/blob/main/frontend/src/components/Modal.jsx): `frontend/src/components/Modal.jsx`
- [Form controls](https://github.com/alissonaraujodev/salon-app/blob/main/frontend/src/components/Input.jsx): `frontend/src/components/Input.jsx`
- [Button](https://github.com/alissonaraujodev/salon-app/blob/main/frontend/src/components/Button.jsx): `frontend/src/components/Button.jsx`

### Web API clients

- [HTTP client](https://github.com/alissonaraujodev/salon-app/blob/main/frontend/src/services/api.js): `frontend/src/services/api.js`
- [Appointment client](https://github.com/alissonaraujodev/salon-app/blob/main/frontend/src/services/agendamentosService.js): `frontend/src/services/agendamentosService.js`
- [Client client](https://github.com/alissonaraujodev/salon-app/blob/main/frontend/src/services/clientesService.js): `frontend/src/services/clientesService.js`
- [Service client](https://github.com/alissonaraujodev/salon-app/blob/main/frontend/src/services/servicosService.js): `frontend/src/services/servicosService.js`
- [Professional client](https://github.com/alissonaraujodev/salon-app/blob/main/frontend/src/services/profissionaisService.js): `frontend/src/services/profissionaisService.js`

### Backend API

- [Express API](https://github.com/alissonaraujodev/salon-app/blob/main/backend/src/app.js): `backend/src/app.js`
- [Auth routes](https://github.com/alissonaraujodev/salon-app/blob/main/backend/src/routes/authRoutes.js): `backend/src/routes/authRoutes.js`
- [Appointment controller](https://github.com/alissonaraujodev/salon-app/blob/main/backend/src/controllers/agendamentosController.js): `backend/src/controllers/agendamentosController.js`
- [Client controller](https://github.com/alissonaraujodev/salon-app/blob/main/backend/src/controllers/clientesController.js): `backend/src/controllers/clientesController.js`
- [Service controller](https://github.com/alissonaraujodev/salon-app/blob/main/backend/src/controllers/servicosController.js): `backend/src/controllers/servicosController.js`
- [Professional controller](https://github.com/alissonaraujodev/salon-app/blob/main/backend/src/controllers/profissionaisController.js): `backend/src/controllers/profissionaisController.js`
- [Auth controller](https://github.com/alissonaraujodev/salon-app/blob/main/backend/src/controllers/authController.js): `backend/src/controllers/authController.js`
- [Auth middleware](https://github.com/alissonaraujodev/salon-app/blob/main/backend/src/middlewares/authMiddleware.js): `backend/src/middlewares/authMiddleware.js`

### Salon domain

- [Appointment service](https://github.com/alissonaraujodev/salon-app/blob/main/backend/src/services/agendamentosService.js): `backend/src/services/agendamentosService.js`
- [Client service](https://github.com/alissonaraujodev/salon-app/blob/main/backend/src/services/clientesService.js): `backend/src/services/clientesService.js`
- [Service service](https://github.com/alissonaraujodev/salon-app/blob/main/backend/src/services/servicosService.js): `backend/src/services/servicosService.js`
- [Professional service](https://github.com/alissonaraujodev/salon-app/blob/main/backend/src/services/profissionaisService.js): `backend/src/services/profissionaisService.js`
- [Authentication service](https://github.com/alissonaraujodev/salon-app/blob/main/backend/src/services/authService.js): `backend/src/services/authService.js`

### Persistence

- [MySQL pool](https://github.com/alissonaraujodev/salon-app/blob/main/backend/src/config/database.js): `backend/src/config/database.js`

### Other components

- **Salon staff**

## Connections

- Salon staff → Protected routes: uses (evidence: `frontend/src/routes/AppRoutes.jsx`)
- Protected routes → Sign in: routes to (evidence: `frontend/src/routes/AppRoutes.jsx`)
- Protected routes → Dashboard: routes to (evidence: `frontend/src/routes/AppRoutes.jsx`)
- Protected routes → Appointments UI: routes to (evidence: `frontend/src/routes/AppRoutes.jsx`)
- Protected routes → Clients UI: routes to (evidence: `frontend/src/routes/AppRoutes.jsx`)
- Protected routes → Services UI: routes to (evidence: `frontend/src/routes/AppRoutes.jsx`)
- Protected routes → Professionals UI: routes to (evidence: `frontend/src/routes/AppRoutes.jsx`)
- Protected routes → Auth hook: checks session (evidence: `frontend/src/routes/AppRoutes.jsx`)
- Auth hook → Auth context: reads context (evidence: `frontend/src/hooks/useAuth.js`)
- Sign in → Auth hook: uses (evidence: `frontend/src/pages/Login.jsx`)
- Sign in → Auth context: submits sign-in
- Dashboard → Page layout: renders (evidence: `frontend/src/pages/profissional/Dashboard.jsx`)
- Clients UI → Page layout: renders (evidence: `frontend/src/pages/profissional/Clientes.jsx`)
- Appointments UI → Appointment client: calls (evidence: `frontend/src/pages/profissional/Agendamentos.jsx`)
- Clients UI → Client client: calls (evidence: `frontend/src/pages/profissional/Clientes.jsx`)
- Services UI → Service client: calls (evidence: `frontend/src/pages/profissional/Servicos.jsx`)
- Professionals UI → Professional client: calls (evidence: `frontend/src/pages/profissional/Profissionais.jsx`)
- Clients UI → Modal: renders (evidence: `frontend/src/pages/profissional/Clientes.jsx`)
- Appointments UI → Form controls: renders (evidence: `frontend/src/pages/profissional/Agendamentos.jsx`)
- Appointments UI → Button: renders (evidence: `frontend/src/pages/profissional/Agendamentos.jsx`)
- Appointment client → HTTP client: calls (evidence: `frontend/src/services/agendamentosService.js`)
- Client client → HTTP client: calls (evidence: `frontend/src/services/clientesService.js`)
- Service client → HTTP client: calls (evidence: `frontend/src/services/servicosService.js`)
- Professional client → HTTP client: calls (evidence: `frontend/src/services/profissionaisService.js`)
- HTTP client → Express API: sends HTTP
- Express API → Auth routes: mounts (evidence: `backend/src/app.js`)
- Express API → Appointment controller: mounts routes (evidence: `backend/src/app.js`)
- Express API → Client controller: mounts routes (evidence: `backend/src/app.js`)
- Express API → Service controller: mounts routes (evidence: `backend/src/app.js`)
- Express API → Professional controller: mounts routes (evidence: `backend/src/app.js`)
- Auth routes → Auth controller: routes to (evidence: `backend/src/routes/authRoutes.js`)
- Appointment controller → Appointment service: calls (evidence: `backend/src/controllers/agendamentosController.js`)
- Appointment controller → Client service: validates client (evidence: `backend/src/controllers/agendamentosController.js`)
- Appointment controller → Professional service: validates professional (evidence: `backend/src/controllers/agendamentosController.js`)
- Appointment controller → Service service: validates service (evidence: `backend/src/controllers/agendamentosController.js`)
- Client controller → Client service: calls (evidence: `backend/src/controllers/clientesController.js`)
- Service controller → Service service: calls (evidence: `backend/src/controllers/servicosController.js`)
- Professional controller → Professional service: calls (evidence: `backend/src/controllers/profissionaisController.js`)
- Professional controller → Auth middleware: protected by (evidence: `backend/src/routes/profissionaisRoutes.js`)
- Authentication service → Professional service: uses (evidence: `backend/src/services/authService.js`)
- Appointment service → MySQL pool: queries (evidence: `backend/src/services/agendamentosService.js`)
- Client service → MySQL pool: queries (evidence: `backend/src/services/clientesService.js`)
- Service service → MySQL pool: queries (evidence: `backend/src/services/servicosService.js`)
- Professional service → MySQL pool: queries (evidence: `backend/src/services/profissionaisService.js`)