# colintree/tinywebdb-php-vue architecture

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

- Interactive diagram: https://gitdiagram.com/colintree/tinywebdb-php-vue
- Repository: https://github.com/colintree/tinywebdb-php-vue

## Overview

TPV is a PHP-backed database management system with a Vue interface and pluggable APIs. Users can access TinyWebDB operations from the public page or manage records, settings, accounts, and backups through the administration UI; clients can also call the APIs directly. Requests enter through the PHP dispatcher, which loads the selected API, and API handlers use the configured database provider. The README documents both TinyWebDB and leaderboard plugins. Backend excerpts are partial, so uncertain internal dispatch and storage-provider wiring are not expanded here.

Main entry points: [`backend/index.php`](https://github.com/colintree/tinywebdb-php-vue/blob/master/backend/index.php) (PHP dispatcher), [`plugins/tinywebdb/ApiTinywebdb.class.php`](https://github.com/colintree/tinywebdb-php-vue/blob/master/plugins/tinywebdb/ApiTinywebdb.class.php) (TinyWebDB API), [`plugins/leaderboard/ApiLeaderboard.class.php`](https://github.com/colintree/tinywebdb-php-vue/blob/master/plugins/leaderboard/ApiLeaderboard.class.php) (Leaderboard API), [`backend/class/db/Provider.class.php`](https://github.com/colintree/tinywebdb-php-vue/blob/master/backend/class/db/Provider.class.php) (DB provider)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Vue interface"]
  node_vue_bootstrap["Vue app setup<br/>[main.js]"]
  node_router["Page routing<br/>[index.js]"]
  node_public_page["TinyWebDB page<br/>[Index.vue]"]
  node_manage_ui["Management pages"]
end

subgraph group_backend["API runtime"]
  node_php_dispatch["PHP dispatcher<br/>[index.php]"]
  node_api_base["API response<br/>[Api.class.php]"]
  node_manage_api["Manage API<br/>[Manage.class.php]"]
end

subgraph group_storage["Database layer"]
  node_db_provider["DB provider<br/>[Provider.class.php]"]
  node_db_base["DB operations<br/>[Base.class.php]"]
  node_mysql[("MySQL store<br/>[MySQL.class.php]")]
  node_sae_kv[("SAE KV store<br/>[SaeKV.class.php]")]
end

subgraph group_plugins["API plugins"]
  node_tiny_plugin["TinyWebDB API"]
  node_leaderboard_plugin["Leaderboard API"]
  node_plugin_docs["Plugin definitions"]
end

node_user(("User"))
node_app_client(("App client"))

node_user -->|"uses interface"| node_vue_bootstrap
node_vue_bootstrap -->|"mounts routes"| node_router
node_router -->|"routes to"| node_public_page
node_router -->|"routes to"| node_manage_ui
node_public_page -->|"calls API"| node_tiny_plugin
node_manage_ui -->|"calls management API"| node_php_dispatch
node_app_client -->|"sends API requests"| node_php_dispatch
node_php_dispatch -->|"dispatches action"| node_manage_api
node_php_dispatch -->|"loads plugin API"| node_tiny_plugin
node_php_dispatch -->|"loads plugin API"| node_leaderboard_plugin
node_manage_api -->|"inherits response handling"| node_api_base
node_tiny_plugin -->|"inherits response handling"| node_api_base
node_leaderboard_plugin -->|"inherits response handling"| node_api_base
node_manage_api -->|"uses database"| node_db_provider
node_tiny_plugin -->|"uses database"| node_db_provider
node_leaderboard_plugin -->|"uses database"| node_db_provider
node_db_provider -->|"provides operations"| node_db_base
node_db_base -->|"implemented by"| node_mysql
node_db_base -->|"implemented by"| node_sae_kv
node_plugin_docs -.->|"documents plugin"| node_tiny_plugin
node_plugin_docs -.->|"documents plugin"| node_leaderboard_plugin

click node_php_dispatch "https://github.com/colintree/tinywebdb-php-vue/blob/master/backend/index.php"
click node_api_base "https://github.com/colintree/tinywebdb-php-vue/blob/master/backend/class/Api.class.php"
click node_manage_api "https://github.com/colintree/tinywebdb-php-vue/blob/master/backend/class/api/Manage.class.php"
click node_db_provider "https://github.com/colintree/tinywebdb-php-vue/blob/master/backend/class/db/Provider.class.php"
click node_db_base "https://github.com/colintree/tinywebdb-php-vue/blob/master/backend/class/db/Base.class.php"
click node_mysql "https://github.com/colintree/tinywebdb-php-vue/blob/master/backend/class/db/MySQL.class.php"
click node_sae_kv "https://github.com/colintree/tinywebdb-php-vue/blob/master/backend/class/db/SaeKV.class.php"
click node_vue_bootstrap "https://github.com/colintree/tinywebdb-php-vue/blob/master/frontend/tinywebdb-php-vue/src/main.js"
click node_router "https://github.com/colintree/tinywebdb-php-vue/blob/master/frontend/tinywebdb-php-vue/src/router/index.js"
click node_public_page "https://github.com/colintree/tinywebdb-php-vue/blob/master/frontend/tinywebdb-php-vue/src/components/Index.vue"
click node_manage_ui "https://github.com/colintree/tinywebdb-php-vue/tree/master/frontend/tinywebdb-php-vue/src/components/manage"
click node_tiny_plugin "https://github.com/colintree/tinywebdb-php-vue/blob/master/plugins/tinywebdb/ApiTinywebdb.class.php"
click node_leaderboard_plugin "https://github.com/colintree/tinywebdb-php-vue/blob/master/plugins/leaderboard/ApiLeaderboard.class.php"
click node_plugin_docs "https://github.com/colintree/tinywebdb-php-vue/tree/master/plugins"

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_vue_bootstrap,node_router,node_public_page,node_manage_ui,node_user,node_app_client toneBlue
class node_php_dispatch,node_api_base,node_manage_api toneAmber
class node_db_provider,node_db_base,node_mysql,node_sae_kv toneMint
class node_tiny_plugin,node_leaderboard_plugin,node_plugin_docs toneRose
```

## Components

### Vue interface

- [Vue app setup](https://github.com/colintree/tinywebdb-php-vue/blob/master/frontend/tinywebdb-php-vue/src/main.js): `frontend/tinywebdb-php-vue/src/main.js`
- [Page routing](https://github.com/colintree/tinywebdb-php-vue/blob/master/frontend/tinywebdb-php-vue/src/router/index.js): `frontend/tinywebdb-php-vue/src/router/index.js`
- [TinyWebDB page](https://github.com/colintree/tinywebdb-php-vue/blob/master/frontend/tinywebdb-php-vue/src/components/Index.vue): `frontend/tinywebdb-php-vue/src/components/Index.vue`
- [Management pages](https://github.com/colintree/tinywebdb-php-vue/tree/master/frontend/tinywebdb-php-vue/src/components/manage): `frontend/tinywebdb-php-vue/src/components/manage`

### API runtime

- [PHP dispatcher](https://github.com/colintree/tinywebdb-php-vue/blob/master/backend/index.php): `backend/index.php`
- [API response](https://github.com/colintree/tinywebdb-php-vue/blob/master/backend/class/Api.class.php): `backend/class/Api.class.php`
- [Manage API](https://github.com/colintree/tinywebdb-php-vue/blob/master/backend/class/api/Manage.class.php): `backend/class/api/Manage.class.php`

### Database layer

- [DB provider](https://github.com/colintree/tinywebdb-php-vue/blob/master/backend/class/db/Provider.class.php): `backend/class/db/Provider.class.php`
- [DB operations](https://github.com/colintree/tinywebdb-php-vue/blob/master/backend/class/db/Base.class.php): `backend/class/db/Base.class.php`
- [MySQL store](https://github.com/colintree/tinywebdb-php-vue/blob/master/backend/class/db/MySQL.class.php): `backend/class/db/MySQL.class.php`
- [SAE KV store](https://github.com/colintree/tinywebdb-php-vue/blob/master/backend/class/db/SaeKV.class.php): `backend/class/db/SaeKV.class.php`

### API plugins

- [TinyWebDB API](https://github.com/colintree/tinywebdb-php-vue/blob/master/plugins/tinywebdb/ApiTinywebdb.class.php): `plugins/tinywebdb/ApiTinywebdb.class.php`
- [Leaderboard API](https://github.com/colintree/tinywebdb-php-vue/blob/master/plugins/leaderboard/ApiLeaderboard.class.php): `plugins/leaderboard/ApiLeaderboard.class.php`
- [Plugin definitions](https://github.com/colintree/tinywebdb-php-vue/tree/master/plugins): `plugins`

### Other components

- **User**
- **App client**

## Connections

- User → Vue app setup: uses interface
- Vue app setup → Page routing: mounts routes
- Page routing → TinyWebDB page: routes to
- Page routing → Management pages: routes to
- TinyWebDB page → TinyWebDB API: calls API
- Management pages → PHP dispatcher: calls management API
- App client → PHP dispatcher: sends API requests
- PHP dispatcher → Manage API: dispatches action
- PHP dispatcher → TinyWebDB API: loads plugin API
- PHP dispatcher → Leaderboard API: loads plugin API
- Manage API → API response: inherits response handling
- TinyWebDB API → API response: inherits response handling
- Leaderboard API → API response: inherits response handling
- Manage API → DB provider: uses database
- TinyWebDB API → DB provider: uses database
- Leaderboard API → DB provider: uses database
- DB provider → DB operations: provides operations
- DB operations → MySQL store: implemented by
- DB operations → SAE KV store: implemented by
- Plugin definitions → TinyWebDB API: documents plugin
- Plugin definitions → Leaderboard API: documents plugin