# fastapi-practices/fastapi-best-architecture-ui architecture

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

- Interactive diagram: https://gitdiagram.com/fastapi-practices/fastapi-best-architecture-ui
- Repository: https://github.com/fastapi-practices/fastapi-best-architecture-ui

## Overview

This is the Vue admin frontend for FastAPI Best Architecture. An operator enters through authentication, then uses the routed admin workspace for account, access-control, monitoring, scheduling, and plugin functions backed by API modules. The sampled source confirms application initialization, request-client behavior, and route-generation helpers; most screen-to-API wiring is not sampled, so those links are omitted rather than assumed.

Main entry points: [`apps/web-antdv-next/src/main.ts`](https://github.com/fastapi-practices/fastapi-best-architecture-ui/blob/master/apps/web-antdv-next/src/main.ts) (App initialization), [`apps/web-antdv-next/src/router/index.ts`](https://github.com/fastapi-practices/fastapi-best-architecture-ui/blob/master/apps/web-antdv-next/src/router/index.ts) (Router), [`apps/web-antdv-next/src/api/core/auth.ts`](https://github.com/fastapi-practices/fastapi-best-architecture-ui/blob/master/apps/web-antdv-next/src/api/core/auth.ts) (Authentication API), [`apps/web-antdv-next/src/bootstrap.ts`](https://github.com/fastapi-practices/fastapi-best-architecture-ui/blob/master/apps/web-antdv-next/src/bootstrap.ts) (App bootstrap)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_shell["Application shell"]
  node_main["App initialization<br/>[main.ts]"]
  node_bootstrap["App bootstrap<br/>[bootstrap.ts]"]
  node_app["Vue app root<br/>[app.vue]"]
  node_layouts["Layouts<br/>[index.ts]"]
end

subgraph group_access["Access and navigation"]
  node_router["Router<br/>[index.ts]"]
  node_guard["Route guard<br/>[guard.ts]"]
  node_access_routes["Route access<br/>[access.ts]"]
  node_route_generation["Dynamic routes"]
  node_login["Login screens<br/>[login.vue]"]
  node_auth_store["Auth state<br/>[auth.ts]"]
end

subgraph group_domains["Admin domains"]
  node_system_admin["System administration<br/>[index.vue]"]
  node_system_api["System APIs"]
  node_logs["Audit logs<br/>[index.vue]"]
  node_monitor["System monitoring<br/>[index.vue]"]
  node_scheduler["Job scheduling<br/>[index.vue]"]
  node_plugins["Plugin management<br/>[index.vue]"]
  node_plugin_api["Plugin API<br/>[plugin.ts]"]
end

subgraph group_platform["Frontend services"]
  node_auth_api["Authentication API<br/>[auth.ts]"]
  node_request["HTTP client<br/>[request-client.ts]"]
  node_preferences["User preferences<br/>[preferences.ts]"]
end

node_operator(("Operator"))
node_backend[("FastAPI backend")]

node_operator -->|"opens app"| node_main
node_main -->|"initializes"| node_preferences
node_main -->|"starts app"| node_bootstrap
node_bootstrap -->|"mounts"| node_app
node_app -->|"renders routes"| node_router
node_router -->|"uses layouts"| node_layouts
node_router -->|"checks navigation"| node_guard
node_guard -->|"checks access"| node_access_routes
node_access_routes -->|"generates routes"| node_route_generation
node_operator -->|"submits credentials"| node_login
node_login -->|"requests login"| node_auth_api
node_auth_api -->|"sends request"| node_request
node_request -->|"HTTP requests"| node_backend
node_auth_store -->|"uses authentication"| node_auth_api
node_operator -->|"manages records"| node_system_admin
node_system_admin -->|"uses domain APIs"| node_system_api
node_operator -->|"reviews activity"| node_logs
node_operator -->|"views health"| node_monitor
node_operator -->|"manages jobs"| node_scheduler
node_operator -->|"manages plugins"| node_plugins
node_plugins -->|"uses plugin API"| node_plugin_api

click node_main "https://github.com/fastapi-practices/fastapi-best-architecture-ui/blob/master/apps/web-antdv-next/src/main.ts"
click node_bootstrap "https://github.com/fastapi-practices/fastapi-best-architecture-ui/blob/master/apps/web-antdv-next/src/bootstrap.ts"
click node_app "https://github.com/fastapi-practices/fastapi-best-architecture-ui/blob/master/apps/web-antdv-next/src/app.vue"
click node_layouts "https://github.com/fastapi-practices/fastapi-best-architecture-ui/blob/master/apps/web-antdv-next/src/layouts/index.ts"
click node_router "https://github.com/fastapi-practices/fastapi-best-architecture-ui/blob/master/apps/web-antdv-next/src/router/index.ts"
click node_guard "https://github.com/fastapi-practices/fastapi-best-architecture-ui/blob/master/apps/web-antdv-next/src/router/guard.ts"
click node_access_routes "https://github.com/fastapi-practices/fastapi-best-architecture-ui/blob/master/apps/web-antdv-next/src/router/access.ts"
click node_route_generation "https://github.com/fastapi-practices/fastapi-best-architecture-ui/blob/master/packages/utils/src/helpers/generate-routes-backend.ts"
click node_login "https://github.com/fastapi-practices/fastapi-best-architecture-ui/blob/master/apps/web-antdv-next/src/views/_core/authentication/login.vue"
click node_auth_store "https://github.com/fastapi-practices/fastapi-best-architecture-ui/blob/master/apps/web-antdv-next/src/store/auth.ts"
click node_auth_api "https://github.com/fastapi-practices/fastapi-best-architecture-ui/blob/master/apps/web-antdv-next/src/api/core/auth.ts"
click node_request "https://github.com/fastapi-practices/fastapi-best-architecture-ui/blob/master/packages/effects/request/src/request-client/request-client.ts"
click node_system_admin "https://github.com/fastapi-practices/fastapi-best-architecture-ui/blob/master/apps/web-antdv-next/src/views/system/user/index.vue"
click node_logs "https://github.com/fastapi-practices/fastapi-best-architecture-ui/blob/master/apps/web-antdv-next/src/views/log/login/index.vue"
click node_monitor "https://github.com/fastapi-practices/fastapi-best-architecture-ui/blob/master/apps/web-antdv-next/src/views/monitor/server/index.vue"
click node_scheduler "https://github.com/fastapi-practices/fastapi-best-architecture-ui/blob/master/apps/web-antdv-next/src/views/scheduler/manage/index.vue"
click node_plugins "https://github.com/fastapi-practices/fastapi-best-architecture-ui/blob/master/apps/web-antdv-next/src/views/system/plugin/index.vue"
click node_plugin_api "https://github.com/fastapi-practices/fastapi-best-architecture-ui/blob/master/apps/web-antdv-next/src/api/plugin.ts"
click node_preferences "https://github.com/fastapi-practices/fastapi-best-architecture-ui/blob/master/apps/web-antdv-next/src/preferences.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_main,node_bootstrap,node_app,node_layouts toneBlue
class node_router,node_guard,node_access_routes,node_route_generation,node_login,node_auth_store,node_backend toneAmber
class node_system_admin,node_system_api,node_logs,node_monitor,node_scheduler,node_plugins,node_plugin_api toneMint
class node_auth_api,node_request,node_preferences toneRose
class node_operator toneIndigo
```

## Components

### Application shell

- [App initialization](https://github.com/fastapi-practices/fastapi-best-architecture-ui/blob/master/apps/web-antdv-next/src/main.ts): `apps/web-antdv-next/src/main.ts`
- [App bootstrap](https://github.com/fastapi-practices/fastapi-best-architecture-ui/blob/master/apps/web-antdv-next/src/bootstrap.ts): `apps/web-antdv-next/src/bootstrap.ts`
- [Vue app root](https://github.com/fastapi-practices/fastapi-best-architecture-ui/blob/master/apps/web-antdv-next/src/app.vue): `apps/web-antdv-next/src/app.vue`
- [Layouts](https://github.com/fastapi-practices/fastapi-best-architecture-ui/blob/master/apps/web-antdv-next/src/layouts/index.ts): `apps/web-antdv-next/src/layouts/index.ts`

### Access and navigation

- [Router](https://github.com/fastapi-practices/fastapi-best-architecture-ui/blob/master/apps/web-antdv-next/src/router/index.ts): `apps/web-antdv-next/src/router/index.ts`
- [Route guard](https://github.com/fastapi-practices/fastapi-best-architecture-ui/blob/master/apps/web-antdv-next/src/router/guard.ts): `apps/web-antdv-next/src/router/guard.ts`
- [Route access](https://github.com/fastapi-practices/fastapi-best-architecture-ui/blob/master/apps/web-antdv-next/src/router/access.ts): `apps/web-antdv-next/src/router/access.ts`
- [Dynamic routes](https://github.com/fastapi-practices/fastapi-best-architecture-ui/blob/master/packages/utils/src/helpers/generate-routes-backend.ts): `packages/utils/src/helpers/generate-routes-backend.ts`
- [Login screens](https://github.com/fastapi-practices/fastapi-best-architecture-ui/blob/master/apps/web-antdv-next/src/views/_core/authentication/login.vue): `apps/web-antdv-next/src/views/_core/authentication/login.vue`
- [Auth state](https://github.com/fastapi-practices/fastapi-best-architecture-ui/blob/master/apps/web-antdv-next/src/store/auth.ts): `apps/web-antdv-next/src/store/auth.ts`

### Admin domains

- [System administration](https://github.com/fastapi-practices/fastapi-best-architecture-ui/blob/master/apps/web-antdv-next/src/views/system/user/index.vue): `apps/web-antdv-next/src/views/system/user/index.vue`
- **System APIs**
- [Audit logs](https://github.com/fastapi-practices/fastapi-best-architecture-ui/blob/master/apps/web-antdv-next/src/views/log/login/index.vue): `apps/web-antdv-next/src/views/log/login/index.vue`
- [System monitoring](https://github.com/fastapi-practices/fastapi-best-architecture-ui/blob/master/apps/web-antdv-next/src/views/monitor/server/index.vue): `apps/web-antdv-next/src/views/monitor/server/index.vue`
- [Job scheduling](https://github.com/fastapi-practices/fastapi-best-architecture-ui/blob/master/apps/web-antdv-next/src/views/scheduler/manage/index.vue): `apps/web-antdv-next/src/views/scheduler/manage/index.vue`
- [Plugin management](https://github.com/fastapi-practices/fastapi-best-architecture-ui/blob/master/apps/web-antdv-next/src/views/system/plugin/index.vue): `apps/web-antdv-next/src/views/system/plugin/index.vue`
- [Plugin API](https://github.com/fastapi-practices/fastapi-best-architecture-ui/blob/master/apps/web-antdv-next/src/api/plugin.ts): `apps/web-antdv-next/src/api/plugin.ts`

### Frontend services

- [Authentication API](https://github.com/fastapi-practices/fastapi-best-architecture-ui/blob/master/apps/web-antdv-next/src/api/core/auth.ts): `apps/web-antdv-next/src/api/core/auth.ts`
- [HTTP client](https://github.com/fastapi-practices/fastapi-best-architecture-ui/blob/master/packages/effects/request/src/request-client/request-client.ts): `packages/effects/request/src/request-client/request-client.ts`
- [User preferences](https://github.com/fastapi-practices/fastapi-best-architecture-ui/blob/master/apps/web-antdv-next/src/preferences.ts): `apps/web-antdv-next/src/preferences.ts`

### Other components

- **Operator**
- **FastAPI backend**

## Connections

- Operator → App initialization: opens app
- App initialization → User preferences: initializes
- App initialization → App bootstrap: starts app
- App bootstrap → Vue app root: mounts
- Vue app root → Router: renders routes
- Router → Layouts: uses layouts
- Router → Route guard: checks navigation
- Route guard → Route access: checks access
- Route access → Dynamic routes: generates routes
- Operator → Login screens: submits credentials
- Login screens → Authentication API: requests login
- Authentication API → HTTP client: sends request
- HTTP client → FastAPI backend: HTTP requests
- Auth state → Authentication API: uses authentication
- Operator → System administration: manages records
- System administration → System APIs: uses domain APIs
- Operator → Audit logs: reviews activity
- Operator → System monitoring: views health
- Operator → Job scheduling: manages jobs
- Operator → Plugin management: manages plugins
- Plugin management → Plugin API: uses plugin API