Turborepo Example with NestJS and Next.js

┌─────────────────┐      ┌──────────────────┐      ┌─────────────────┐
│   FRONTEND      │      │       tRPC       │      │    BACKEND      │
│   (Next.js)     │◄────►│ (Single Source   │◄────►│   (NestJS)      │
│                 │      │    of Truth)     │      │                 │
│ • Auto-inferred │      │ • Procedures     │      │ • Definitions   │
│   Types         │      │ • Zod Validation │      │ • Business Logic│
│ • Autocomplete  │      │ • Type Inference │      │ • Database      │
└─────────────────┘      └──────────────────┘      └─────────────────┘

import { Input, Mutation, Query, Router } from 'nestjs-trpc';
import { ProcessesService } from './processes.service';
import { z } from 'zod';
import { processSchema, createProcessSchema, type CreateProcessInput } from '@repo/schemas';

@Router({ alias: 'processes' })
export class ProcessesRouter {
  constructor(private readonly processesService: ProcessesService) {}

  @Query({
    output: z.array(processSchema),
  })
  getAll() {
    return this.processesService.findAll();
  }

  @Mutation({
    input: createProcessSchema,
    output: processSchema,
  })
  create(@Input() input: CreateProcessInput) {
    return this.processesService.create(input);
  }
}

'use client';
import { trpc } from '@repo/trpc/client';

export function ProcessList() {
  // ← Types are fully inferred, no duplication
  const { data: processes } = trpc.processes.getAll.useQuery();
  const createProcess = trpc.processes.create.useMutation();

  // ← TypeScript knows exactly what properties 'processes' has
  return (
    <div>
      {processes?.map((process) => (
        <div key={process.id}>{process.name}</div> // ← Autocomplete
      ))}
    </div>
  );
}

// Backend - types.ts
interface Process {
  id: string;
  name: string;
}

// Frontend - types.ts (DUPLICATED!)
interface Process {
  id: string;
  name: string; // What if the backend changes this to 'title'?
}

// Frontend - api.ts
const getProcesses = async (): Promise<Process[]> => {
  const response = await fetch('/api/processes'); // Manual URL
  return response.json(); // No validation
};

// Backend only - single definition in the router
@Query({ output: z.array(processSchema) })
getAll() {
  return this.processesService.findAll();
}

// Frontend - direct usage with full type safety
const { data } = trpc.processes.getAll.useQuery(); // Everything is automatic!

# Install dependencies from the root of the monorepo
bun install

# Configure environment variables by copying the example file
cp .env.example .env

# Edit the .env file with your DATABASE_URL
# Example:
DATABASE_URL="postgresql://user:password@localhost:5432/your_db"

# Build all shared packages and apps
bun run build

apps/backend/src/
├── main.ts                 # Application entry point
├── app.module.ts           # Main NestJS module
├── trpc-router.ts          # Standalone tRPC router definition
└── [feature]/
    ├── [feature].module.ts
    ├── [feature].service.ts
    ├── [feature].controller.ts # (Optional) REST endpoints
    └── [feature].router.ts     # tRPC procedures for the feature

# Run backend in development mode
bun run dev:backend

# Build backend for production
turbo build --filter=backend

# Run backend tests
turbo run test --filter=backend

# Lint backend code
turbo run lint --filter=backend

apps/frontend/src/
├── app/
│   ├── layout.tsx         # Root layout
│   ├── page.tsx           # Main page
│   └── (dashboard)/       # Route group for authenticated routes
│       └── [feature]/
│           ├── page.tsx
│           ├── _components/ # Feature-specific components
│           └── _lib/        # Hooks, types, and utilities
├── components/
│   ├── ui/                # Shadcn UI components
│   └── ...                # Other shared components
└── lib/
    └── ...                # Shared utilities

# Example: Install a breadcrumb component
bunx shadcn-ui@latest add breadcrumb --cwd apps/frontend

# Run frontend in development mode
bun run dev:frontend

# Build frontend for production
turbo build --filter=frontend

# Lint frontend code
turbo run lint --filter=frontend

# Generate API types from backend schema
# Note: Requires the backend dev server to be running
bun run generate-api --filter=frontend

# Generate a new migration based on schema changes
bun run db:generate

# Apply all pending migrations to the database
bun run db:migrate

# Open Drizzle Studio to view and manage data
bun run db:studio

import { TrpcProvider } from '@repo/trpc/client/providers/TrpcProvider';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <TrpcProvider>{children}</TrpcProvider>
      </body>
    </html>
  );
}

'use client';
import { trpc } from '@repo/trpc/client';

export function ProcessList() {
  const utils = trpc.useUtils();
  const { data: processes, isLoading, error } = trpc.processes.getAll.useQuery();
  const createProcess = trpc.processes.create.useMutation({
    onSuccess: () => {
      // Invalidate the query to refetch data automatically
      utils.processes.getAll.invalidate();
    },
  });

  const handleCreate = async (data: { name: string }) => {
    try {
      await createProcess.mutateAsync(data);
    } catch (error) {
      console.error('Error creating process:', error);
    }
  };

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      {processes?.map((process) => (
        <div key={process.id}>{process.name}</div>
      ))}
    </div>
  );
}

# Start all applications in development mode
bun run dev

# Build all applications for production
bun run build

# Run linters across the entire monorepo
bun run lint

# Format all code with Prettier
bun run format

# Run TypeScript type checking
bun run check-types

# Install a dependency in a specific workspace (e.g., backend)
bun add <package-name> --filter=backend

# Build only specific packages
turbo build --filter=@repo/database --filter=@repo/schemas