Sitzplan Abiball

Full-stack seat planning and event management application for the Abiball. The repository is split into a Vue frontend, a Fastify/Prisma backend, and shared runtime contracts.

Overview

• frontend/ contains the Vue 3 + Vite + Vuetify client.
• backend/ contains the Fastify API, Prisma schema, schedulers, and integrations.
• shared/ contains TypeScript types shared by both apps.
• db/ stores the Postgres data directory used by Docker Compose.

Prerequisites

• Node.js 20+ or a compatible LTS release.
• pnpm 10.18.2, which is pinned in the package manifests.
• Docker and Docker Compose if you want to run the stack locally in containers.

Environment Setup

The project expects a root-level .env file. Do not copy secrets from the checked-in example values. Use your own credentials and endpoints instead.

Example:

FRONTEND_PORT=3030
BACKEND_PORT=3031

BACKEND_URL=https://api.example.com
CORS_ORIGIN=https://app.example.com
ENVIRONMENT=development
DATABASE_URL=postgresql://user:password@localhost:5432/sitzplandb

BAGISTO_DB_HOST=your-bagisto-db-host
BAGISTO_DB_USER=your-bagisto-user
BAGISTO_DB_PASSWORD=your-bagisto-password
BAGISTO_DB_NAME=your-bagisto-database

CSV_AUTH_TOKEN=your-csv-token

EMAIL_HOST=smtp.example.com
EMAIL_PORT=587
EMAIL_SECURE=false
EMAIL_USER=your-smtp-user
EMAIL_PASS=your-smtp-password
EMAIL_FROM=Seat Planner <no-reply@example.com>

VITE_PICKER_DISABLED_AT=2026-06-21T22:00:00Z
VITE_BACKEND_URL=https://api.example.com
VITE_CAP_API_ENDPOINT=https://cap.example.com
CAP_SECRET_KEY=your-cap-secret
PICKER_DISABLED_AT=2026-06-21T22:00:00Z

The backend reads these variables directly:

• DATABASE_URL when connecting Prisma to Postgres in development or Docker.
• CORS_ORIGIN for API access control.
• BAGISTO_DB_HOST, BAGISTO_DB_USER, BAGISTO_DB_PASSWORD, and BAGISTO_DB_NAME for the Bagisto integration.
• CSV_AUTH_TOKEN for the CSV endpoint.
• EMAIL_HOST, EMAIL_PORT, EMAIL_SECURE, EMAIL_USER, EMAIL_PASS, and EMAIL_FROM for mail delivery.
• CAP_SECRET_KEY and CAP_API_ENDPOINT for the CAP integration.
• PICKER_DISABLED_AT for the time-based picker lockout.
• VITE_CAP_API_ENDPOINT and VITE_PICKER_DISABLED_AT are used by Docker Compose to feed the backend and frontend build from the same root .env file.

The frontend build uses these variables:

• VITE_BACKEND_URL
• VITE_CAP_API_ENDPOINT
• VITE_PICKER_DISABLED_AT

Local Development

Install dependencies in each app directory:

cd frontend
pnpm install

cd ../backend
pnpm install

Generate the Prisma client before starting the backend:

cd backend
pnpm db:generate

Run the frontend in development mode:

cd frontend
pnpm dev

Run the backend in development mode:

cd backend
pnpm start

Docker Compose

The repository includes a docker-compose.yml that starts three services:

• database runs Postgres and stores its data in ./db.
• backend starts after the database is healthy and exposes the API port.
• frontend serves the built client through Nginx.

Start the stack with:

docker compose up --build

By default, the compose file maps the frontend to port 80 and the backend to port 8080, but both can be overridden with environment variables such as FRONTEND_PORT and BACKEND_PORT.

Available Scripts

Backend

• pnpm start - start the Fastify server with tsx.
• pnpm lint - check formatting with Prettier.
• pnpm lint:fix - format backend files with Prettier.
• pnpm db:generate - generate the Prisma client.
• pnpm db:migrate - apply database migrations.
• pnpm db:reset - reset the database and reapply migrations.
• pnpm db:dev - run Prisma in development mode.
• pnpm db:push - push the schema to the database.

Frontend

• pnpm dev - start the Vite dev server.
• pnpm build - type-check and build the app.
• pnpm preview - preview the production build locally.
• pnpm build-only - build without the extra type-check wrapper.
• pnpm type-check - run the Vue TypeScript build check.
• pnpm lint - run ESLint.
• pnpm lint:fix - auto-fix lint issues.
• pnpm mcp - apply Vuetify MCP changes.
• pnpm mcp:revert - revert Vuetify MCP changes.

Root

• ./lint.sh - run the repo-wide formatting and lint checks.

Repository Structure

• backend/ - API server, Prisma schema, migrations, and integrations.
• frontend/ - user-facing Vue application.
• shared/ - TypeScript contracts shared across the stack.
• db/ - Docker-managed Postgres data volume.
• docker-compose.yml - local container orchestration.
• lint.sh - convenience script for formatting and linting.

Notes

• The frontend README in frontend/README.md comes from the Vuetify scaffold and only documents the client package.
• If you change environment variables, update both the backend and frontend build/runtime settings accordingly.