Architecture Overview

VibeKit uses a modern fullstack TypeScript architecture designed for maintainability and type safety.

Request flow

When a user visits your app or submits a form, the request flows through these layers:

1. Client / Browser: React 19 components in apps/web render UI using Tailwind CSS and Radix UI. Form submissions and queries call tRPC procedures via @trpc/react-query.
2. Next.js App Router: Next.js handles server rendering, flat routes (no locale prefix), layout composition, and route handlers (/api/[trpc], /api/webhooks/stripe).
3. Context & Authentication: Better Auth in packages/auth extracts and validates the auth_session cookie, loading the user session into the tRPC request context.
4. tRPC Procedures: Procedures in packages/api validate incoming inputs with Zod and apply authorization middleware (publicProcedure, protectedProcedure, adminProcedure).
5. Database Layer: Prisma Client in packages/database queries PostgreSQL with full TypeScript type inference.

Design principles

• Explicit trust boundaries: Input data is always validated with Zod on the server. Authorization checks run server-side even if the UI hides a button.
• Isolated package workspaces: Core utilities, auth logic, and payment adapters live in reusable packages without depending on web-specific globals.
• Unified database schema: schema.prisma serves as the single source of truth for database models, migrations, and derived Zod validation schemas.
• Plain language documentation: Every feature is documented with actionable commands and straightforward explanations.

Read next: Database & ORM.