Architektur-Übersicht

VibeKit verwendet eine moderne Fullstack-TypeScript-Architektur, die auf Wartbarkeit, Skalierbarkeit und durchgängige Typsicherheit ausgelegt ist.

Anfrage-Ablauf

Wenn ein Benutzer Ihre Anwendung besucht oder ein Formular absendet, durchläuft die Anfrage folgende Schichten:

1. Client / Browser: React 19 Komponenten in apps/web rendern die Benutzeroberfläche mit Tailwind CSS und Radix UI. Formulare und Abfragen rufen tRPC-Prozeduren über @trpc/react-query auf.
2. Next.js App Router: Next.js übernimmt Server-Rendering, flache Routen (ohne Sprach-Präfix), Layout-Komposition und Route-Handler (/api/[trpc], /api/webhooks/stripe).
3. Kontext & Authentifizierung: Better Auth in packages/auth extrahiert und validiert das auth_session-Cookie und lädt die Benutzersitzung in den tRPC-Anfragekontext.
4. tRPC-Prozeduren: Prozeduren in packages/api validieren eingehende Eingaben mit Zod und wenden Autorisierungs-Middleware an (publicProcedure, protectedProcedure, adminProcedure).
5. Datenbank-Schicht: Der Prisma Client in packages/database fragt PostgreSQL mit vollständiger TypeScript-Typinferenz ab.

Design-Prinzipien

• Explizite Vertrauensgrenzen: Eingabedaten werden auf dem Server immer mit Zod validiert. Autorisierungsprüfungen laufen serverseitig ab, selbst wenn die UI eine Schaltfläche ausblendet.
• Isolierte Paket-Workspaces: Kern-Utilities, Authentifizierungslogik und Zahlungsadapter leben in wiederverwendbaren Paketen ohne Abhängigkeiten von Web-spezifischen Globals.
• Einheitliches Datenbankschema: schema.prisma dient als zentrale Quelle der Wahrheit für Datenbankmodelle, Migrationen und abgeleitete Zod-Validierungsschemata.
• Klare Dokumentation: Jede Funktion ist mit verständlichen Erklärungen und direkt ausführbaren Befehlen dokumentiert.

Weiterlesen: Datenbank & ORM.