# andrej-polujanskij/feedback-board architecture

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

- Interactive diagram: https://gitdiagram.com/andrej-polujanskij/feedback-board
- Repository: https://github.com/andrej-polujanskij/feedback-board

## Overview

Feedback Board lets users submit feedback and browse the newest saved entries. The browser form validates input, the Vue application manages list and submission state, and its API client sends requests through the frontend’s same-origin `/api` route to the Express API. The backend validates submissions and uses a MySQL repository for persistence; startup prepares the database table, while a health endpoint reports database reachability. The README also documents the nginx proxy and automatic startup schema setup; unsampled infrastructure details are represented only where documented.

Main entry points: [`frontend/src/App.vue`](https://github.com/andrej-polujanskij/feedback-board/blob/main/frontend/src/App.vue) (Vue app), [`backend/src/db.ts`](https://github.com/andrej-polujanskij/feedback-board/blob/main/backend/src/db.ts) (Database connection), [`backend/src/index.ts`](https://github.com/andrej-polujanskij/feedback-board/blob/main/backend/src/index.ts) (Backend startup), [`backend/src/feedback/routes.ts`](https://github.com/andrej-polujanskij/feedback-board/blob/main/backend/src/feedback/routes.ts) (Feedback routes)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_browser["Feedback UI"]
  node_app["Vue app<br/>[App.vue]"]
  node_form["Feedback form<br/>[FeedbackForm.vue]"]
  node_list["Feedback list<br/>[FeedbackList.vue]"]
  node_state["Feedback state<br/>[useFeedback.ts]"]
  node_api_feedback["Feedback API client<br/>[feedback.ts]"]
  node_http["HTTP client<br/>[http.ts]"]
  node_ui_errors["UI error mapping<br/>[errors.ts]"]
end

subgraph group_api["Feedback API"]
  node_backend_app["Express app<br/>[app.ts]"]
  node_routes["Feedback routes<br/>[routes.ts]"]
  node_validation["Input validation<br/>[validation.ts]"]
  node_backend_errors["API errors<br/>[errors.ts]"]
  node_startup["Backend startup<br/>[index.ts]"]
end

subgraph group_persistence["Database"]
  node_db["Database connection<br/>[db.ts]"]
  node_schema["Table schema<br/>[schema.ts]"]
  node_repository["Feedback repository<br/>[repository.ts]"]
  node_mysql[("MySQL")]
end

node_user(("User"))
node_nginx["nginx proxy<br/>[nginx.conf]"]

node_user -->|"enters feedback"| node_form
node_user -->|"views entries"| node_list
node_app -->|"renders"| node_form
node_app -->|"renders"| node_list
node_app -->|"loads and submits"| node_state
node_form -->|"emits submission"| node_app
node_list -->|"requests refresh"| node_app
node_state -->|"fetches and creates"| node_api_feedback
node_state -->|"maps error codes"| node_ui_errors
node_api_feedback -->|"sends requests"| node_http
node_http -->|"fetches /api"| node_nginx
node_nginx -->|"proxies /api"| node_backend_app
node_backend_app -->|"mounts routes"| node_routes
node_backend_app -->|"checks health"| node_db
node_routes -->|"validates submission"| node_validation
node_routes -->|"reads and creates"| node_repository
node_routes -->|"sends errors"| node_backend_errors
node_startup -->|"waits for database"| node_db
node_startup -->|"creates table"| node_schema
node_startup -->|"creates repository"| node_repository
node_startup -->|"starts server"| node_backend_app
node_schema -->|"uses pool"| node_db
node_repository -->|"executes queries"| node_db
node_db -->|"connects"| node_mysql
node_schema -->|"creates feedback table"| node_mysql
node_repository -->|"reads and writes"| node_mysql

click node_app "https://github.com/andrej-polujanskij/feedback-board/blob/main/frontend/src/App.vue"
click node_form "https://github.com/andrej-polujanskij/feedback-board/blob/main/frontend/src/components/FeedbackForm.vue"
click node_list "https://github.com/andrej-polujanskij/feedback-board/blob/main/frontend/src/components/FeedbackList.vue"
click node_state "https://github.com/andrej-polujanskij/feedback-board/blob/main/frontend/src/composables/useFeedback.ts"
click node_api_feedback "https://github.com/andrej-polujanskij/feedback-board/blob/main/frontend/src/api/feedback.ts"
click node_http "https://github.com/andrej-polujanskij/feedback-board/blob/main/frontend/src/api/http.ts"
click node_ui_errors "https://github.com/andrej-polujanskij/feedback-board/blob/main/frontend/src/errors.ts"
click node_nginx "https://github.com/andrej-polujanskij/feedback-board/blob/main/frontend/nginx.conf"
click node_backend_app "https://github.com/andrej-polujanskij/feedback-board/blob/main/backend/src/app.ts"
click node_routes "https://github.com/andrej-polujanskij/feedback-board/blob/main/backend/src/feedback/routes.ts"
click node_validation "https://github.com/andrej-polujanskij/feedback-board/blob/main/backend/src/feedback/validation.ts"
click node_backend_errors "https://github.com/andrej-polujanskij/feedback-board/blob/main/backend/src/errors.ts"
click node_startup "https://github.com/andrej-polujanskij/feedback-board/blob/main/backend/src/index.ts"
click node_db "https://github.com/andrej-polujanskij/feedback-board/blob/main/backend/src/db.ts"
click node_schema "https://github.com/andrej-polujanskij/feedback-board/blob/main/backend/src/feedback/schema.ts"
click node_repository "https://github.com/andrej-polujanskij/feedback-board/blob/main/backend/src/feedback/repository.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_app,node_form,node_list,node_state,node_api_feedback,node_http,node_ui_errors,node_user toneBlue
class node_backend_app,node_routes,node_validation,node_backend_errors,node_startup toneAmber
class node_db,node_schema,node_repository,node_mysql toneMint
class node_nginx toneTeal
```

## Components

### Feedback UI

- [Vue app](https://github.com/andrej-polujanskij/feedback-board/blob/main/frontend/src/App.vue): `frontend/src/App.vue`
- [Feedback form](https://github.com/andrej-polujanskij/feedback-board/blob/main/frontend/src/components/FeedbackForm.vue): `frontend/src/components/FeedbackForm.vue`
- [Feedback list](https://github.com/andrej-polujanskij/feedback-board/blob/main/frontend/src/components/FeedbackList.vue): `frontend/src/components/FeedbackList.vue`
- [Feedback state](https://github.com/andrej-polujanskij/feedback-board/blob/main/frontend/src/composables/useFeedback.ts): `frontend/src/composables/useFeedback.ts`
- [Feedback API client](https://github.com/andrej-polujanskij/feedback-board/blob/main/frontend/src/api/feedback.ts): `frontend/src/api/feedback.ts`
- [HTTP client](https://github.com/andrej-polujanskij/feedback-board/blob/main/frontend/src/api/http.ts): `frontend/src/api/http.ts`
- [UI error mapping](https://github.com/andrej-polujanskij/feedback-board/blob/main/frontend/src/errors.ts): `frontend/src/errors.ts`

### Feedback API

- [Express app](https://github.com/andrej-polujanskij/feedback-board/blob/main/backend/src/app.ts): `backend/src/app.ts`
- [Feedback routes](https://github.com/andrej-polujanskij/feedback-board/blob/main/backend/src/feedback/routes.ts): `backend/src/feedback/routes.ts`
- [Input validation](https://github.com/andrej-polujanskij/feedback-board/blob/main/backend/src/feedback/validation.ts): `backend/src/feedback/validation.ts`
- [API errors](https://github.com/andrej-polujanskij/feedback-board/blob/main/backend/src/errors.ts): `backend/src/errors.ts`
- [Backend startup](https://github.com/andrej-polujanskij/feedback-board/blob/main/backend/src/index.ts): `backend/src/index.ts`

### Database

- [Database connection](https://github.com/andrej-polujanskij/feedback-board/blob/main/backend/src/db.ts): `backend/src/db.ts`
- [Table schema](https://github.com/andrej-polujanskij/feedback-board/blob/main/backend/src/feedback/schema.ts): `backend/src/feedback/schema.ts`
- [Feedback repository](https://github.com/andrej-polujanskij/feedback-board/blob/main/backend/src/feedback/repository.ts): `backend/src/feedback/repository.ts`
- **MySQL**

### Other components

- **User**
- [nginx proxy](https://github.com/andrej-polujanskij/feedback-board/blob/main/frontend/nginx.conf): `frontend/nginx.conf`

## Connections

- User → Feedback form: enters feedback
- User → Feedback list: views entries
- Vue app → Feedback form: renders
- Vue app → Feedback list: renders
- Vue app → Feedback state: loads and submits
- Feedback form → Vue app: emits submission
- Feedback list → Vue app: requests refresh
- Feedback state → Feedback API client: fetches and creates
- Feedback state → UI error mapping: maps error codes
- Feedback API client → HTTP client: sends requests
- HTTP client → nginx proxy: fetches /api
- nginx proxy → Express app: proxies /api
- Express app → Feedback routes: mounts routes
- Express app → Database connection: checks health
- Feedback routes → Input validation: validates submission
- Feedback routes → Feedback repository: reads and creates
- Feedback routes → API errors: sends errors
- Backend startup → Database connection: waits for database
- Backend startup → Table schema: creates table
- Backend startup → Feedback repository: creates repository
- Backend startup → Express app: starts server
- Table schema → Database connection: uses pool
- Feedback repository → Database connection: executes queries
- Database connection → MySQL: connects
- Table schema → MySQL: creates feedback table
- Feedback repository → MySQL: reads and writes