How alissonaraujodev/salon-app works
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: AppRoutes.jsx Protected routes · app.js Express API · agendamentosController.js Appointment controller · api.js HTTP client
Components 33
Web application
- Protected routes
frontend/src/routes/AppRoutes.jsx - Sign in
frontend/src/pages/Login.jsx - Auth context
frontend/src/context/AuthContext.jsx - Auth hook
frontend/src/hooks/useAuth.js - Dashboard
frontend/src/pages/profissional/Dashboard.jsx - Appointments UI
frontend/src/pages/profissional/Agendamentos.jsx - Clients UI
frontend/src/pages/profissional/Clientes.jsx - Services UI
frontend/src/pages/profissional/Servicos.jsx - Professionals UI
frontend/src/pages/profissional/Profissionais.jsx - Page layout
frontend/src/components/Layout.jsx - Modal
frontend/src/components/Modal.jsx - Form controls
frontend/src/components/Input.jsx - Button
frontend/src/components/Button.jsx
Web API clients
- HTTP client
frontend/src/services/api.js - Appointment client
frontend/src/services/agendamentosService.js - Client client
frontend/src/services/clientesService.js - Service client
frontend/src/services/servicosService.js - Professional client
frontend/src/services/profissionaisService.js
Backend API
- Express API
backend/src/app.js - Auth routes
backend/src/routes/authRoutes.js - Appointment controller
backend/src/controllers/agendamentosController.js - Client controller
backend/src/controllers/clientesController.js - Service controller
backend/src/controllers/servicosController.js - Professional controller
backend/src/controllers/profissionaisController.js - Auth controller
backend/src/controllers/authController.js - Auth middleware
backend/src/middlewares/authMiddleware.js
Salon domain
- Appointment service
backend/src/services/agendamentosService.js - Client service
backend/src/services/clientesService.js - Service service
backend/src/services/servicosService.js - Professional service
backend/src/services/profissionaisService.js - Authentication service
backend/src/services/authService.js
Persistence
- MySQL pool
backend/src/config/database.js
Other components
- Salon staff
Connections 44
- Salon staff → Protected routes: uses
frontend/src/routes/AppRoutes.jsx - Protected routes → Sign in: routes to
frontend/src/routes/AppRoutes.jsx - Protected routes → Dashboard: routes to
frontend/src/routes/AppRoutes.jsx - Protected routes → Appointments UI: routes to
frontend/src/routes/AppRoutes.jsx - Protected routes → Clients UI: routes to
frontend/src/routes/AppRoutes.jsx - Protected routes → Services UI: routes to
frontend/src/routes/AppRoutes.jsx - Protected routes → Professionals UI: routes to
frontend/src/routes/AppRoutes.jsx - Protected routes → Auth hook: checks session
frontend/src/routes/AppRoutes.jsx - Auth hook → Auth context: reads context
frontend/src/hooks/useAuth.js - Sign in → Auth hook: uses
frontend/src/pages/Login.jsx - Sign in → Auth context: submits sign-in
- Dashboard → Page layout: renders
frontend/src/pages/profissional/Dashboard.jsx - Clients UI → Page layout: renders
frontend/src/pages/profissional/Clientes.jsx - Appointments UI → Appointment client: calls
frontend/src/pages/profissional/Agendamentos.jsx - Clients UI → Client client: calls
frontend/src/pages/profissional/Clientes.jsx - Services UI → Service client: calls
frontend/src/pages/profissional/Servicos.jsx - Professionals UI → Professional client: calls
frontend/src/pages/profissional/Profissionais.jsx - Clients UI → Modal: renders
frontend/src/pages/profissional/Clientes.jsx - Appointments UI → Form controls: renders
frontend/src/pages/profissional/Agendamentos.jsx - Appointments UI → Button: renders
frontend/src/pages/profissional/Agendamentos.jsx - Appointment client → HTTP client: calls
frontend/src/services/agendamentosService.js - Client client → HTTP client: calls
frontend/src/services/clientesService.js - Service client → HTTP client: calls
frontend/src/services/servicosService.js - Professional client → HTTP client: calls
frontend/src/services/profissionaisService.js - HTTP client → Express API: sends HTTP
- Express API → Auth routes: mounts
backend/src/app.js - Express API → Appointment controller: mounts routes
backend/src/app.js - Express API → Client controller: mounts routes
backend/src/app.js - Express API → Service controller: mounts routes
backend/src/app.js - Express API → Professional controller: mounts routes
backend/src/app.js - Auth routes → Auth controller: routes to
backend/src/routes/authRoutes.js - Appointment controller → Appointment service: calls
backend/src/controllers/agendamentosController.js - Appointment controller → Client service: validates client
backend/src/controllers/agendamentosController.js - Appointment controller → Professional service: validates professional
backend/src/controllers/agendamentosController.js - Appointment controller → Service service: validates service
backend/src/controllers/agendamentosController.js - Client controller → Client service: calls
backend/src/controllers/clientesController.js - Service controller → Service service: calls
backend/src/controllers/servicosController.js - Professional controller → Professional service: calls
backend/src/controllers/profissionaisController.js - Professional controller → Auth middleware: protected by
backend/src/routes/profissionaisRoutes.js - Authentication service → Professional service: uses
backend/src/services/authService.js - Appointment service → MySQL pool: queries
backend/src/services/agendamentosService.js - Client service → MySQL pool: queries
backend/src/services/clientesService.js - Service service → MySQL pool: queries
backend/src/services/servicosService.js - Professional service → MySQL pool: queries
backend/src/services/profissionaisService.js