# cesarf1204/foxy-list-app architecture

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

- Interactive diagram: https://gitdiagram.com/cesarf1204/foxy-list-app
- Repository: https://github.com/cesarf1204/foxy-list-app

## Overview

This is a task-board web application with a React frontend and an Express/MongoDB backend. The primary workflow is a user managing tasks across boards: the frontend task hook performs task operations through its API client, while backend routes dispatch to controllers, services, and models. Separate branches cover account registration and session-based authentication, administrator account management, and API documentation. Many frontend-to-backend HTTP details and unsampled UI wiring are not shown, so those relationships are omitted or marked unverified.

Main entry points: [`web-backend/routes/api.routes.js`](https://github.com/cesarf1204/foxy-list-app/blob/main/web-backend/routes/api.routes.js) (API route assembly), [`web-frontend/src/App.jsx`](https://github.com/cesarf1204/foxy-list-app/blob/main/web-frontend/src/App.jsx) (Application routes), [`web-backend/server.js`](https://github.com/cesarf1204/foxy-list-app/blob/main/web-backend/server.js) (API server), [`web-backend/routes/userRoutes.js`](https://github.com/cesarf1204/foxy-list-app/blob/main/web-backend/routes/userRoutes.js) (Account routes)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Web frontend"]
  node_app["Application routes<br/>[App.jsx]"]
  node_dashboard["Task dashboard<br/>[Dashboard.jsx]"]
  node_task_hook["Task operations<br/>[useTasks.js]"]
  node_task_client["Task API client<br/>[tasks.js]"]
  node_docs_page["API docs page<br/>[ApiDocs.jsx]"]
  node_docs_client["Docs API client<br/>[docs.js]"]
end

subgraph group_api["HTTP API"]
  node_server["API server<br/>[server.js]"]
  node_api_routes["API route assembly<br/>[api.routes.js]"]
  node_user_routes["Account routes<br/>[userRoutes.js]"]
  node_task_routes["Task routes<br/>[taskRoutes.js]"]
  node_admin_routes["Admin routes<br/>[adminRoutes.js]"]
  node_auth_guard["Session authentication<br/>[authMiddleware.js]"]
  node_task_controller["Task controller<br/>[taskController.js]"]
  node_auth_controller["Account controller<br/>[authController.js]"]
  node_admin_controller["Admin controller<br/>[adminController.js]"]
  node_swagger_routes["OpenAPI routes<br/>[swaggerRoutes.js]"]
end

subgraph group_services["Domain services"]
  node_task_service["Task rules<br/>[taskService.js]"]
  node_auth_service["Account services<br/>[authService.js]"]
  node_admin_service["Admin operations<br/>[adminService.js]"]
end

subgraph group_data["Persistence"]
  node_task_model["Task model<br/>[taskModel.js]"]
  node_user_model["User model<br/>[userModel.js]"]
end

subgraph group_documentation["API documentation"]
  node_openapi["OpenAPI definition<br/>[openapi.js]"]
end

node_visitor(("User"))
node_browser_api{{"Backend HTTP API"}}
node_mongo[("MongoDB")]

node_visitor -.->|"uses"| node_app
node_app -->|"routes to"| node_dashboard
node_dashboard -.->|"uses"| node_task_hook
node_task_hook -->|"calls"| node_task_client
node_task_client -.->|"sends requests"| node_browser_api
node_browser_api -.->|"HTTP requests"| node_server
node_server -->|"mounts routes"| node_api_routes
node_api_routes -->|"registers"| node_user_routes
node_api_routes -->|"registers"| node_task_routes
node_api_routes -->|"registers"| node_admin_routes
node_user_routes -->|"dispatches"| node_auth_controller
node_user_routes -->|"guards profile routes"| node_auth_guard
node_task_routes -->|"guards routes"| node_auth_guard
node_task_routes -->|"dispatches"| node_task_controller
node_admin_routes -->|"guards routes"| node_auth_guard
node_admin_routes -->|"dispatches"| node_admin_controller
node_task_controller -->|"calls"| node_task_service
node_auth_controller -->|"calls"| node_auth_service
node_admin_controller -->|"calls"| node_admin_service
node_task_service -->|"uses"| node_task_model
node_auth_service -->|"uses"| node_user_model
node_admin_service -->|"queries"| node_user_model
node_admin_service -->|"queries"| node_task_model
node_task_model -.->|"persists tasks"| node_mongo
node_user_model -.->|"persists users"| node_mongo
node_app -->|"routes to"| node_docs_page
node_docs_page -.->|"uses"| node_docs_client
node_docs_client -.->|"requests documentation"| node_browser_api
node_server -->|"mounts"| node_swagger_routes
node_swagger_routes -->|"loads definition"| node_openapi

click node_app "https://github.com/cesarf1204/foxy-list-app/blob/main/web-frontend/src/App.jsx"
click node_dashboard "https://github.com/cesarf1204/foxy-list-app/blob/main/web-frontend/src/pages/Dashboard.jsx"
click node_task_hook "https://github.com/cesarf1204/foxy-list-app/blob/main/web-frontend/src/hooks/useTasks.js"
click node_task_client "https://github.com/cesarf1204/foxy-list-app/blob/main/web-frontend/src/api-client/tasks.js"
click node_server "https://github.com/cesarf1204/foxy-list-app/blob/main/web-backend/server.js"
click node_api_routes "https://github.com/cesarf1204/foxy-list-app/blob/main/web-backend/routes/api.routes.js"
click node_user_routes "https://github.com/cesarf1204/foxy-list-app/blob/main/web-backend/routes/userRoutes.js"
click node_task_routes "https://github.com/cesarf1204/foxy-list-app/blob/main/web-backend/routes/taskRoutes.js"
click node_admin_routes "https://github.com/cesarf1204/foxy-list-app/blob/main/web-backend/routes/adminRoutes.js"
click node_auth_guard "https://github.com/cesarf1204/foxy-list-app/blob/main/web-backend/middleware/authMiddleware.js"
click node_task_controller "https://github.com/cesarf1204/foxy-list-app/blob/main/web-backend/controllers/taskController.js"
click node_auth_controller "https://github.com/cesarf1204/foxy-list-app/blob/main/web-backend/controllers/authController.js"
click node_admin_controller "https://github.com/cesarf1204/foxy-list-app/blob/main/web-backend/controllers/adminController.js"
click node_task_service "https://github.com/cesarf1204/foxy-list-app/blob/main/web-backend/services/taskService.js"
click node_auth_service "https://github.com/cesarf1204/foxy-list-app/blob/main/web-backend/services/authService.js"
click node_admin_service "https://github.com/cesarf1204/foxy-list-app/blob/main/web-backend/services/adminService.js"
click node_task_model "https://github.com/cesarf1204/foxy-list-app/blob/main/web-backend/models/taskModel.js"
click node_user_model "https://github.com/cesarf1204/foxy-list-app/blob/main/web-backend/models/userModel.js"
click node_docs_page "https://github.com/cesarf1204/foxy-list-app/blob/main/web-frontend/src/pages/ApiDocs.jsx"
click node_docs_client "https://github.com/cesarf1204/foxy-list-app/blob/main/web-frontend/src/api-client/docs.js"
click node_swagger_routes "https://github.com/cesarf1204/foxy-list-app/blob/main/web-backend/swagger/swaggerRoutes.js"
click node_openapi "https://github.com/cesarf1204/foxy-list-app/blob/main/web-backend/swagger/openapi.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_dashboard,node_task_hook,node_task_client,node_docs_page,node_docs_client,node_visitor toneBlue
class node_server,node_api_routes,node_user_routes,node_task_routes,node_admin_routes,node_auth_guard,node_task_controller,node_auth_controller,node_admin_controller,node_swagger_routes,node_mongo toneAmber
class node_task_service,node_auth_service,node_admin_service,node_browser_api toneMint
class node_task_model,node_user_model toneRose
class node_openapi toneIndigo
```

## Components

### Web frontend

- [Application routes](https://github.com/cesarf1204/foxy-list-app/blob/main/web-frontend/src/App.jsx): `web-frontend/src/App.jsx`
- [Task dashboard](https://github.com/cesarf1204/foxy-list-app/blob/main/web-frontend/src/pages/Dashboard.jsx): `web-frontend/src/pages/Dashboard.jsx`
- [Task operations](https://github.com/cesarf1204/foxy-list-app/blob/main/web-frontend/src/hooks/useTasks.js): `web-frontend/src/hooks/useTasks.js`
- [Task API client](https://github.com/cesarf1204/foxy-list-app/blob/main/web-frontend/src/api-client/tasks.js): `web-frontend/src/api-client/tasks.js`
- [API docs page](https://github.com/cesarf1204/foxy-list-app/blob/main/web-frontend/src/pages/ApiDocs.jsx): `web-frontend/src/pages/ApiDocs.jsx`
- [Docs API client](https://github.com/cesarf1204/foxy-list-app/blob/main/web-frontend/src/api-client/docs.js): `web-frontend/src/api-client/docs.js`

### HTTP API

- [API server](https://github.com/cesarf1204/foxy-list-app/blob/main/web-backend/server.js): `web-backend/server.js`
- [API route assembly](https://github.com/cesarf1204/foxy-list-app/blob/main/web-backend/routes/api.routes.js): `web-backend/routes/api.routes.js`
- [Account routes](https://github.com/cesarf1204/foxy-list-app/blob/main/web-backend/routes/userRoutes.js): `web-backend/routes/userRoutes.js`
- [Task routes](https://github.com/cesarf1204/foxy-list-app/blob/main/web-backend/routes/taskRoutes.js): `web-backend/routes/taskRoutes.js`
- [Admin routes](https://github.com/cesarf1204/foxy-list-app/blob/main/web-backend/routes/adminRoutes.js): `web-backend/routes/adminRoutes.js`
- [Session authentication](https://github.com/cesarf1204/foxy-list-app/blob/main/web-backend/middleware/authMiddleware.js): `web-backend/middleware/authMiddleware.js`
- [Task controller](https://github.com/cesarf1204/foxy-list-app/blob/main/web-backend/controllers/taskController.js): `web-backend/controllers/taskController.js`
- [Account controller](https://github.com/cesarf1204/foxy-list-app/blob/main/web-backend/controllers/authController.js): `web-backend/controllers/authController.js`
- [Admin controller](https://github.com/cesarf1204/foxy-list-app/blob/main/web-backend/controllers/adminController.js): `web-backend/controllers/adminController.js`
- [OpenAPI routes](https://github.com/cesarf1204/foxy-list-app/blob/main/web-backend/swagger/swaggerRoutes.js): `web-backend/swagger/swaggerRoutes.js`

### Domain services

- [Task rules](https://github.com/cesarf1204/foxy-list-app/blob/main/web-backend/services/taskService.js): `web-backend/services/taskService.js`
- [Account services](https://github.com/cesarf1204/foxy-list-app/blob/main/web-backend/services/authService.js): `web-backend/services/authService.js`
- [Admin operations](https://github.com/cesarf1204/foxy-list-app/blob/main/web-backend/services/adminService.js): `web-backend/services/adminService.js`

### Persistence

- [Task model](https://github.com/cesarf1204/foxy-list-app/blob/main/web-backend/models/taskModel.js): `web-backend/models/taskModel.js`
- [User model](https://github.com/cesarf1204/foxy-list-app/blob/main/web-backend/models/userModel.js): `web-backend/models/userModel.js`

### API documentation

- [OpenAPI definition](https://github.com/cesarf1204/foxy-list-app/blob/main/web-backend/swagger/openapi.js): `web-backend/swagger/openapi.js`

### Other components

- **User**
- **Backend HTTP API**
- **MongoDB**

## Connections

- User → Application routes: uses
- Application routes → Task dashboard: routes to (evidence: `web-frontend/src/App.jsx`)
- Task dashboard → Task operations: uses
- Task operations → Task API client: calls (evidence: `web-frontend/src/hooks/useTasks.js`)
- Task API client → Backend HTTP API: sends requests
- Backend HTTP API → API server: HTTP requests
- API server → API route assembly: mounts routes (evidence: `web-backend/server.js`)
- API route assembly → Account routes: registers (evidence: `web-backend/routes/api.routes.js`)
- API route assembly → Task routes: registers (evidence: `web-backend/routes/api.routes.js`)
- API route assembly → Admin routes: registers (evidence: `web-backend/routes/api.routes.js`)
- Account routes → Account controller: dispatches (evidence: `web-backend/routes/userRoutes.js`)
- Account routes → Session authentication: guards profile routes (evidence: `web-backend/routes/userRoutes.js`)
- Task routes → Session authentication: guards routes (evidence: `web-backend/routes/taskRoutes.js`)
- Task routes → Task controller: dispatches (evidence: `web-backend/routes/taskRoutes.js`)
- Admin routes → Session authentication: guards routes (evidence: `web-backend/routes/adminRoutes.js`)
- Admin routes → Admin controller: dispatches (evidence: `web-backend/routes/adminRoutes.js`)
- Task controller → Task rules: calls (evidence: `web-backend/controllers/taskController.js`)
- Account controller → Account services: calls (evidence: `web-backend/controllers/authController.js`)
- Admin controller → Admin operations: calls (evidence: `web-backend/controllers/adminController.js`)
- Task rules → Task model: uses (evidence: `web-backend/services/taskService.js`)
- Account services → User model: uses (evidence: `web-backend/services/authService.js`)
- Admin operations → User model: queries (evidence: `web-backend/services/adminService.js`)
- Admin operations → Task model: queries (evidence: `web-backend/services/adminService.js`)
- Task model → MongoDB: persists tasks
- User model → MongoDB: persists users
- Application routes → API docs page: routes to (evidence: `web-frontend/src/App.jsx`)
- API docs page → Docs API client: uses
- Docs API client → Backend HTTP API: requests documentation
- API server → OpenAPI routes: mounts (evidence: `web-backend/server.js`)
- OpenAPI routes → OpenAPI definition: loads definition (evidence: `web-backend/swagger/swaggerRoutes.js`)