How andrej-polujanskij/feedback-board works
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: App.vue Vue app · db.ts Database connection · index.ts Backend startup · routes.ts Feedback routes
Components 18
Feedback UI
- Vue app
frontend/src/App.vue - Feedback form
frontend/src/components/FeedbackForm.vue - Feedback list
frontend/src/components/FeedbackList.vue - Feedback state
frontend/src/composables/useFeedback.ts - Feedback API client
frontend/src/api/feedback.ts - HTTP client
frontend/src/api/http.ts - UI error mapping
frontend/src/errors.ts
Feedback API
- Express app
backend/src/app.ts - Feedback routes
backend/src/feedback/routes.ts - Input validation
backend/src/feedback/validation.ts - API errors
backend/src/errors.ts - Backend startup
backend/src/index.ts
Database
- Database connection
backend/src/db.ts - Table schema
backend/src/feedback/schema.ts - Feedback repository
backend/src/feedback/repository.ts - MySQL
Other components
- User
- nginx proxy
frontend/nginx.conf
Connections 26
- 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