Getting Started

Project Structure

Understanding the Straktur codebase organization

Project Structure

TL;DR: Feature-first architecture. All code for a feature lives in /src/features/<name>/.

Overview

src/
├── app/                      # Next.js App Router (pages)
├── features/                 # Feature modules (business logic)
├── server/                   # oRPC routers (API layer)
├── components/               # Shared UI components
└── lib/                      # Utilities and configuration

Directory Details

/src/app/ - Pages & Routes

Next.js App Router structure:

app/
├── (auth)/                   # Auth pages (login, register)
│   ├── login/
│   ├── register/
│   ├── forgot-password/
│   └── reset-password/

├── (dashboard)/              # Main app (requires auth)
│   ├── dashboard/
│   ├── clients/
│   │   ├── page.tsx          # List page
│   │   ├── new/page.tsx      # Create page
│   │   └── [id]/page.tsx     # Detail page
│   ├── contacts/
│   ├── activities/
│   ├── files/
│   ├── users/
│   └── settings/

├── api/
│   ├── auth/[...all]/        # better-auth handler
│   └── rpc/[[...rest]]/      # oRPC endpoint (single API entry)

└── layout.tsx

Key patterns:

  • (auth) and (dashboard) are route groups (no URL impact)
  • [id] is a dynamic segment
  • [[...rest]] is a catch-all route

/src/features/ - Business Logic

Each feature is self-contained:

features/
├── clients/
│   ├── index.ts              # Client-safe exports (types, hooks, UI)
│   ├── server.ts             # Server-only exports (queries, actions)
│   ├── queries.ts            # Database read operations
│   ├── actions.ts            # Database write operations
│   ├── validation.ts         # Zod schemas
│   ├── types.ts              # Domain types (optional)
│   ├── hooks/                # Custom React hooks (optional)
│   └── ui/                   # Feature-specific components
│       ├── ClientCard.tsx
│       └── ContactSheet.tsx

├── activities/
├── dictionaries/
├── files/
├── invitations/
└── users/

Import rules:

// ✅ Client Components - import from index.ts
import { ClientCard, useClients } from "@/features/clients"

// ✅ Server/Routers - import from server.ts
import { listClients, createClient } from "@/features/clients/server"

// ❌ NEVER import server.ts from Client Components

/src/server/ - API Layer (oRPC)

server/
├── orpc.ts                   # Procedure definitions (authedProcedure, etc.)
└── routers/
    ├── index.ts              # AppRouter - aggregates all routers
    ├── clients.ts
    ├── contacts.ts
    ├── activities.ts
    ├── files.ts
    ├── users.ts
    ├── dictionaries.ts
    └── invitations.ts

All routers are combined in index.ts and exposed via single /api/rpc endpoint.

/src/components/ - Shared UI

components/
├── ui/                       # shadcn/ui primitives
│   ├── button.tsx
│   ├── input.tsx
│   ├── dialog.tsx
│   └── ...

├── data-table/               # Table system
│   ├── DataTable.tsx
│   ├── DataTableToolbar.tsx
│   ├── DataTablePagination.tsx
│   └── ...

├── detail-page/              # Detail page layout
│   ├── DetailPageWrapper.tsx
│   ├── SectionCard.tsx
│   └── PropertyRow.tsx

├── detail-sheet/             # Side panel forms
│   ├── DetailSheetForm.tsx
│   └── SheetHeader.tsx

├── inline-edit/              # Inline editing
│   ├── EditableText.tsx
│   └── EditableSelect.tsx

└── layout/                   # App shell
    ├── AppSidebar.tsx
    ├── Header.tsx
    └── EntityHeader.tsx

/src/lib/ - Utilities

lib/
├── orpc/
│   └── client.ts             # orpcUtils - TanStack Query integration

├── auth/
│   ├── index.ts              # Main auth exports
│   ├── roles.ts              # RBAC (owner, admin, member, viewer)
│   ├── session.ts            # Session helpers
│   └── providers/            # Auth provider implementations

├── db/
│   ├── index.ts              # Drizzle client
│   └── schema/               # Database tables
│       ├── auth.ts
│       ├── clients.ts
│       ├── activities.ts
│       └── ...

├── config/
│   ├── index.ts              # appConfig (central configuration)
│   ├── navigation.ts         # Nav items
│   └── colors.ts             # Theme colors

├── storage/                  # File storage adapters
├── email/                    # Email adapters
├── url-state/                # URL state management
└── env.ts                    # Environment variables (T3 Env)

File Reference

Need to...Look in...
Add a pagesrc/app/(dashboard)/
Add business logicsrc/features/<name>/
Add an API endpointsrc/server/routers/
Add a shared componentsrc/components/
Change database schemasrc/lib/db/schema/
Configure the appsrc/lib/config/
Change auth behaviorsrc/lib/auth/

Reference Implementation

Study the Clients feature to understand all patterns:

WhatWhere
Feature modulesrc/features/clients/
oRPC routersrc/server/routers/clients.ts
List pagesrc/app/(dashboard)/clients/page.tsx
Detail pagesrc/app/(dashboard)/clients/[id]/page.tsx
Create pagesrc/app/(dashboard)/clients/new/page.tsx

On this page