← Back to home

Architecture Guide

Understand how Craft projects are structured and how different architectural patterns adapt to your quality level.

Monorepo Structure

Craft uses Turborepo to manage a monorepo with multiple packages. This allows you to share code between different apps while maintaining clear boundaries.

project/
ā”œā”€ā”€ apps/                    # Applications
│   ā”œā”€ā”€ web/                # Next.js web app
│   └── mobile/             # React Native app (Web+Mobile only)
│
ā”œā”€ā”€ packages/               # Shared packages
│   ā”œā”€ā”€ api/               # tRPC routers
│   ā”œā”€ā”€ database/          # Prisma schema & client
│   ā”œā”€ā”€ validators/        # Zod validation schemas
│   └── ui/                # Shared UI components
│
ā”œā”€ā”€ tooling/               # Development tools
│   └── typescript/        # Shared TypeScript config
│
└── .claude/               # AI Skills
    └── skills/            # Claude Code skills

Tech Stack

Frontend

  • •Next.js 15 - React framework with App Router
  • •React 19 - UI library
  • •TypeScript 5.3+ - Type safety
  • •Tailwind CSS 3.4+ - Utility-first CSS
  • •shadcn/ui - Beautiful components

Backend

  • •tRPC 11+ - End-to-end type-safe APIs
  • •Prisma 6+ - Type-safe ORM
  • •Supabase - PostgreSQL + Auth + Storage
  • •Zod 3+ - Runtime validation
  • •TanStack Query 5+ - Data fetching & caching

Payments & Communication

  • •Stripe - Payment processing
  • •Resend + React Email - Transactional emails

Testing & Quality

  • •Vitest - Unit & integration tests
  • •React Testing Library - Component tests
  • •ESLint + Prettier - Code quality

Adaptive Architecture

One of Craft's unique features is its adaptive architecture. The structure of your code changes based on your chosen quality level:

šŸš€ Rapid - Flat Architecture

Perfect for MVPs and rapid prototyping. Business logic lives directly in tRPC routers.

packages/api/routers/
└── product.ts   // All logic here (up to 100 lines)
Best for: 0-100 users, 3-6 months lifespan

āš–ļø Balanced - 3-Layer Architecture

Pragmatic separation of concerns. Clean architecture without over-engineering.

packages/
ā”œā”€ā”€ api/routers/
│   └── product.ts         // Thin orchestration (< 20 lines)
ā”œā”€ā”€ services/
│   └── product.service.ts // Business logic (< 50 lines)
└── database/repositories/
    └── product.repo.ts    // Data access
Best for: 100-10K users, 1-3 years lifespan

šŸ† Crafted - Hexagonal DDD

Enterprise-grade architecture built to last 10+ years. Full Domain-Driven Design.

packages/
ā”œā”€ā”€ domain/              // Pure business logic (ZERO deps)
│   ā”œā”€ā”€ entities/
│   ā”œā”€ā”€ value-objects/
│   ā”œā”€ā”€ use-cases/
│   └── repositories/   // Interfaces only
ā”œā”€ā”€ api/routers/        // Application layer (< 10 lines)
└── infrastructure/     // Implementations
    ā”œā”€ā”€ database/
    └── external/
Best for: 10K+ users, enterprise scale

Data Flow

Understanding how data flows through your Craft application:

Client (React)
    ↓
tRPC Router (Type-safe API)
    ↓
Service Layer (Business Logic)
    ↓
Repository (Data Access)
    ↓
Prisma ORM
    ↓
PostgreSQL (Supabase)

All layers are fully type-safe thanks to TypeScript + tRPC + Prisma. You get autocomplete and type checking end-to-end.

Key Principles

Type Safety Everywhere

From database to UI, every piece of data is type-checked. Catch errors at compile time, not runtime.

Separation of Concerns

Each layer has a single responsibility. Easy to test, easy to maintain.

Scalable by Design

Start simple with Rapid, seamlessly upgrade to Balanced or Crafted as you grow.

Developer Experience

Fast HMR, type autocomplete, instant feedback. Built for productivity.

šŸ’” Architecture Migration

You can upgrade from one quality level to another using the Craft CLI. The migration tool will automatically refactor your code to match the new architecture pattern.