# vsalfafara/hono-vue-monorepo architecture

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

- Interactive diagram: https://gitdiagram.com/vsalfafara/hono-vue-monorepo
- Repository: https://github.com/vsalfafara/hono-vue-monorepo

## Overview

This is a full-stack task-management application: users sign in, manage their tasks, and administrators can inspect users and task metrics. The client also enforces page permissions, while the server declares authenticated task and admin endpoints and provides shared auth and database infrastructure. The tree and sampled files establish the client entry points, route contracts, and server composition; handler, store, and database-call wiring is not shown in the excerpts, so uncertain internal links are omitted.

Main entry points: [`apps/server/src/routes/index.routes.ts`](https://github.com/vsalfafara/hono-vue-monorepo/blob/master/apps/server/src/routes/index.routes.ts) (Route registry), [`apps/client/src/lib/api.utils.ts`](https://github.com/vsalfafara/hono-vue-monorepo/blob/master/apps/client/src/lib/api.utils.ts) (API utilities), [`apps/server/src/routes/tasks/tasks.routes.ts`](https://github.com/vsalfafara/hono-vue-monorepo/blob/master/apps/server/src/routes/tasks/tasks.routes.ts) (Task endpoints), [`apps/server/src/routes/dashboard/dashboard.routes.ts`](https://github.com/vsalfafara/hono-vue-monorepo/blob/master/apps/server/src/routes/dashboard/dashboard.routes.ts) (Admin endpoints)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Client application"]
  node_clientapp["Vue app<br/>[App.vue]"]
  node_taskui["Task workspace<br/>[Tasks.vue]"]
  node_tasktable["Task table<br/>[TasksTable.vue]"]
  node_taskstore["Task state<br/>[tasks.store.ts]"]
  node_adminui["Admin views"]
  node_authui["Login form<br/>[LoginForm.vue]"]
  node_clientrouter["Page routing<br/>[index.ts]"]
  node_apiutils["API utilities<br/>[api.utils.ts]"]
end

subgraph group_server["Server API"]
  node_serverapp["Server composition<br/>[app.ts]"]
  node_serverroutes["Route registry<br/>[index.routes.ts]"]
  node_taskapi["Task endpoints<br/>[tasks.routes.ts]"]
  node_adminapi["Admin endpoints"]
  node_userapi["User endpoints<br/>[users.routes.ts]"]
  node_handlers["Route handlers"]
  node_health["Health endpoint<br/>[health.routes.ts]"]
end

subgraph group_identity["Identity and permissions"]
  node_clientauth["Auth state<br/>[auth.store.ts]"]
  node_authmiddleware["Auth middleware<br/>[auth.middleware.ts]"]
  node_authconfig["Auth configuration<br/>[auth.ts]"]
end

subgraph group_data["Persistence"]
  node_dbmiddleware["DB middleware<br/>[db.middleware.ts]"]
  node_database[("Database<br/>[db.ts]")]
end

node_user(("User"))

node_user -->|"uses"| node_clientapp
node_clientapp -->|"refetches session"| node_clientauth
node_clientapp -->|"renders routes"| node_clientrouter
node_clientrouter -->|"routes tasks"| node_taskui
node_taskui -->|"shows tasks"| node_tasktable
node_tasktable -->|"fetches data"| node_taskstore
node_authui -->|"submits credentials"| node_clientauth
node_clientrouter -->|"routes admin"| node_adminui
node_adminui -->|"checks permissions"| node_clientauth
node_taskstore -->|"uses API"| node_apiutils
node_apiutils -->|"requests endpoints"| node_taskapi
node_adminui -->|"requests metrics"| node_apiutils
node_apiutils -->|"requests endpoints"| node_adminapi
node_serverapp -->|"configures auth"| node_authconfig
node_serverapp -->|"configures routes"| node_serverroutes
node_serverroutes -->|"mounts routes"| node_taskapi
node_serverroutes -->|"mounts routes"| node_adminapi
node_serverroutes -->|"mounts routes"| node_userapi
node_serverroutes -->|"mounts routes"| node_health
node_taskapi -->|"requires auth"| node_authmiddleware
node_adminapi -->|"requires admin auth"| node_authmiddleware
node_userapi -->|"requires admin auth"| node_authmiddleware
node_taskapi -->|"dispatches"| node_handlers
node_adminapi -->|"dispatches"| node_handlers
node_userapi -->|"dispatches"| node_handlers
node_dbmiddleware -->|"provides access"| node_database

click node_clientapp "https://github.com/vsalfafara/hono-vue-monorepo/blob/master/apps/client/src/App.vue"
click node_taskui "https://github.com/vsalfafara/hono-vue-monorepo/blob/master/apps/client/src/modules/dashboard/tasks/pages/Tasks.vue"
click node_tasktable "https://github.com/vsalfafara/hono-vue-monorepo/blob/master/apps/client/src/modules/dashboard/tasks/components/TasksTable.vue"
click node_taskstore "https://github.com/vsalfafara/hono-vue-monorepo/blob/master/apps/client/src/modules/dashboard/tasks/tasks.store.ts"
click node_adminui "https://github.com/vsalfafara/hono-vue-monorepo/tree/master/apps/client/src/modules/admin"
click node_authui "https://github.com/vsalfafara/hono-vue-monorepo/blob/master/apps/client/src/modules/auth/components/LoginForm.vue"
click node_clientauth "https://github.com/vsalfafara/hono-vue-monorepo/blob/master/apps/client/src/stores/auth.store.ts"
click node_clientrouter "https://github.com/vsalfafara/hono-vue-monorepo/blob/master/apps/client/src/router/index.ts"
click node_apiutils "https://github.com/vsalfafara/hono-vue-monorepo/blob/master/apps/client/src/lib/api.utils.ts"
click node_serverapp "https://github.com/vsalfafara/hono-vue-monorepo/blob/master/apps/server/src/app.ts"
click node_serverroutes "https://github.com/vsalfafara/hono-vue-monorepo/blob/master/apps/server/src/routes/index.routes.ts"
click node_taskapi "https://github.com/vsalfafara/hono-vue-monorepo/blob/master/apps/server/src/routes/tasks/tasks.routes.ts"
click node_adminapi "https://github.com/vsalfafara/hono-vue-monorepo/blob/master/apps/server/src/routes/dashboard/dashboard.routes.ts"
click node_userapi "https://github.com/vsalfafara/hono-vue-monorepo/blob/master/apps/server/src/routes/users/users.routes.ts"
click node_handlers "https://github.com/vsalfafara/hono-vue-monorepo/tree/master/apps/server/src/routes"
click node_authmiddleware "https://github.com/vsalfafara/hono-vue-monorepo/blob/master/apps/server/src/middlewares/auth.middleware.ts"
click node_authconfig "https://github.com/vsalfafara/hono-vue-monorepo/blob/master/apps/server/src/auth/auth.ts"
click node_dbmiddleware "https://github.com/vsalfafara/hono-vue-monorepo/blob/master/apps/server/src/middlewares/db.middleware.ts"
click node_database "https://github.com/vsalfafara/hono-vue-monorepo/blob/master/packages/db/src/db.ts"
click node_health "https://github.com/vsalfafara/hono-vue-monorepo/blob/master/apps/server/src/routes/health/health.routes.ts"

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_clientapp,node_taskui,node_tasktable,node_taskstore,node_adminui,node_authui,node_clientrouter,node_apiutils,node_user toneBlue
class node_serverapp,node_serverroutes,node_taskapi,node_adminapi,node_userapi,node_handlers,node_health toneAmber
class node_clientauth,node_authmiddleware,node_authconfig toneMint
class node_dbmiddleware,node_database toneRose
```

## Components

### Client application

- [Vue app](https://github.com/vsalfafara/hono-vue-monorepo/blob/master/apps/client/src/App.vue): `apps/client/src/App.vue`
- [Task workspace](https://github.com/vsalfafara/hono-vue-monorepo/blob/master/apps/client/src/modules/dashboard/tasks/pages/Tasks.vue): `apps/client/src/modules/dashboard/tasks/pages/Tasks.vue`
- [Task table](https://github.com/vsalfafara/hono-vue-monorepo/blob/master/apps/client/src/modules/dashboard/tasks/components/TasksTable.vue): `apps/client/src/modules/dashboard/tasks/components/TasksTable.vue`
- [Task state](https://github.com/vsalfafara/hono-vue-monorepo/blob/master/apps/client/src/modules/dashboard/tasks/tasks.store.ts): `apps/client/src/modules/dashboard/tasks/tasks.store.ts`
- [Admin views](https://github.com/vsalfafara/hono-vue-monorepo/tree/master/apps/client/src/modules/admin): `apps/client/src/modules/admin`
- [Login form](https://github.com/vsalfafara/hono-vue-monorepo/blob/master/apps/client/src/modules/auth/components/LoginForm.vue): `apps/client/src/modules/auth/components/LoginForm.vue`
- [Page routing](https://github.com/vsalfafara/hono-vue-monorepo/blob/master/apps/client/src/router/index.ts): `apps/client/src/router/index.ts`
- [API utilities](https://github.com/vsalfafara/hono-vue-monorepo/blob/master/apps/client/src/lib/api.utils.ts): `apps/client/src/lib/api.utils.ts`

### Server API

- [Server composition](https://github.com/vsalfafara/hono-vue-monorepo/blob/master/apps/server/src/app.ts): `apps/server/src/app.ts`
- [Route registry](https://github.com/vsalfafara/hono-vue-monorepo/blob/master/apps/server/src/routes/index.routes.ts): `apps/server/src/routes/index.routes.ts`
- [Task endpoints](https://github.com/vsalfafara/hono-vue-monorepo/blob/master/apps/server/src/routes/tasks/tasks.routes.ts): `apps/server/src/routes/tasks/tasks.routes.ts`
- [Admin endpoints](https://github.com/vsalfafara/hono-vue-monorepo/blob/master/apps/server/src/routes/dashboard/dashboard.routes.ts): `apps/server/src/routes/dashboard/dashboard.routes.ts`
- [User endpoints](https://github.com/vsalfafara/hono-vue-monorepo/blob/master/apps/server/src/routes/users/users.routes.ts): `apps/server/src/routes/users/users.routes.ts`
- [Route handlers](https://github.com/vsalfafara/hono-vue-monorepo/tree/master/apps/server/src/routes): `apps/server/src/routes`
- [Health endpoint](https://github.com/vsalfafara/hono-vue-monorepo/blob/master/apps/server/src/routes/health/health.routes.ts): `apps/server/src/routes/health/health.routes.ts`

### Identity and permissions

- [Auth state](https://github.com/vsalfafara/hono-vue-monorepo/blob/master/apps/client/src/stores/auth.store.ts): `apps/client/src/stores/auth.store.ts`
- [Auth middleware](https://github.com/vsalfafara/hono-vue-monorepo/blob/master/apps/server/src/middlewares/auth.middleware.ts): `apps/server/src/middlewares/auth.middleware.ts`
- [Auth configuration](https://github.com/vsalfafara/hono-vue-monorepo/blob/master/apps/server/src/auth/auth.ts): `apps/server/src/auth/auth.ts`

### Persistence

- [DB middleware](https://github.com/vsalfafara/hono-vue-monorepo/blob/master/apps/server/src/middlewares/db.middleware.ts): `apps/server/src/middlewares/db.middleware.ts`
- [Database](https://github.com/vsalfafara/hono-vue-monorepo/blob/master/packages/db/src/db.ts): `packages/db/src/db.ts`

### Other components

- **User**

## Connections

- User → Vue app: uses
- Vue app → Auth state: refetches session
- Vue app → Page routing: renders routes
- Page routing → Task workspace: routes tasks
- Task workspace → Task table: shows tasks
- Task table → Task state: fetches data
- Login form → Auth state: submits credentials
- Page routing → Admin views: routes admin
- Admin views → Auth state: checks permissions
- Task state → API utilities: uses API
- API utilities → Task endpoints: requests endpoints
- Admin views → API utilities: requests metrics
- API utilities → Admin endpoints: requests endpoints
- Server composition → Auth configuration: configures auth
- Server composition → Route registry: configures routes
- Route registry → Task endpoints: mounts routes
- Route registry → Admin endpoints: mounts routes
- Route registry → User endpoints: mounts routes
- Route registry → Health endpoint: mounts routes
- Task endpoints → Auth middleware: requires auth
- Admin endpoints → Auth middleware: requires admin auth
- User endpoints → Auth middleware: requires admin auth
- Task endpoints → Route handlers: dispatches
- Admin endpoints → Route handlers: dispatches
- User endpoints → Route handlers: dispatches
- DB middleware → Database: provides access