Documentation
Documentation
Introduction

Getting Started

Getting StartedInstallationQuick StartProject Structure

Architecture

Architecture OverviewTech StacktRPC MiddlewareDesign Principles

Patterns

Code Patterns & ConventionsFeature ModulesError HandlingType Safety

Database

DatabaseSchema DefinitionDatabase OperationsMigrationsCaching

API

tRPCProceduresRouterstRPC Proxy Setup
APIsOpenAPIREST Endpoints

Auth & Access

AuthenticationConfigurationOAuth ProvidersRolesSession Management
AuthorizationUser RolesPermissions

Routing & i18n

RoutingDeclarative RoutingNavigation
InternationalizationTranslationsLocale Routing

Components & UI

ComponentsButtonsFormsNavigationDialogs
StylesTailwind CSSThemingTypography

Storage

StorageConfigurationUsageBuckets

Configuration

ConfigurationEnvironment VariablesFeature Flags

Templates

Template GuidesCreate New FeatureCreate New PageCreate Database TableCreate tRPC RouterAdd Translations

Development

DevelopmentCommandsAI AgentsBest Practices

tRPC

Type-safe API with tRPC

Overview

The primary API layer uses tRPC for type-safe client-server communication. tRPC provides end-to-end type safety from your backend procedures to your frontend components without code generation.

Architecture

src/trpc/
├── procedures/
│   ├── routers/        # Feature routers
│   ├── root.ts         # Root router combining all features
│   └── trpc.ts         # tRPC initialization, context, procedures
├── react.tsx           # React Query integration
├── server.tsx          # Server-side caller
├── openapi.ts          # OpenAPI document generation
└── tags.ts             # OpenAPI tags for grouping

Client Usage

React Components (Client)

import { api } from "@/trpc/react";

// Query
const { data, isLoading } = api.myResource.list.useQuery();

// Mutation
const utils = api.useUtils();
const mutation = api.myResource.upsert.useMutation({
  onSuccess: () => utils.myResource.invalidate(),
});

Server Components

import { api } from "@/trpc/server";

const data = await api.myResource.list();

Cache Invalidation

Always invalidate related queries after mutations:

const utils = api.useUtils();

const mutation = api.myResource.upsert.useMutation({
  onSuccess: () => {
    utils.myResource.invalidate(); // Invalidates all myResource queries
  },
});

Don't use revalidatePath with tRPC. Use client-side utils.invalidate() instead.

Next Steps

Procedures

Routers

Middleware

On this page

Overview
Architecture
Client Usage
React Components (Client)
Server Components
Cache Invalidation
Next Steps