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 configurationDirectory 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.tsxKey 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.tsAll 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 page | src/app/(dashboard)/ |
| Add business logic | src/features/<name>/ |
| Add an API endpoint | src/server/routers/ |
| Add a shared component | src/components/ |
| Change database schema | src/lib/db/schema/ |
| Configure the app | src/lib/config/ |
| Change auth behavior | src/lib/auth/ |
Reference Implementation
Study the Clients feature to understand all patterns:
| What | Where |
|---|---|
| Feature module | src/features/clients/ |
| oRPC router | src/server/routers/clients.ts |
| List page | src/app/(dashboard)/clients/page.tsx |
| Detail page | src/app/(dashboard)/clients/[id]/page.tsx |
| Create page | src/app/(dashboard)/clients/new/page.tsx |
Related
- Feature Modules - Deep dive into the pattern
- Add New Feature - Step-by-step guide