Projectstructuur

my-app/
├── apps/
│   ├── api/                  Hono API on Cloudflare Workers
│   │   ├── src/
│   │   │   ├── db/           Drizzle schema + client
│   │   │   ├── lib/          integrations (auth, email, stripe…)
│   │   │   ├── orpc/         oRPC procedure implementations
│   │   │   └── index.ts      worker entry + routing
│   │   ├── migrations/       generated D1 migrations
│   │   └── wrangler.jsonc    Workers + D1 config
│   └── web/                  TanStack Start app on Workers
│       └── src/
│           ├── components/   UI + feature components
│           ├── routes/       file-based routes
│           └── paraglide/    generated i18n runtime
├── packages/
│   ├── backend-contract/     oRPC contract (shared types)
│   ├── ui/                   Base UI components + brand config
│   └── transactional/        react-email templates
├── messages/                 i18n message catalogs
└── turbo.json                task pipeline

Apps

• apps/api: de Hono-API-worker. Routes staan in src/index.ts; businesslogica wordt als oRPC-procedures aangeboden in src/orpc. Datatoegang gebruikt Drizzle op D1.
• apps/web: de TanStack Start-webapp, ook een Worker. Bestandsgebaseerde routes in src/routes renderen server-side en hydrateren op de client.

Packages

• @my-app/backend-contract: het oRPC-contract. Het declareert in- en uitvoer van procedures met Zod, en beide apps hangen ervan af, dus een wijziging aan het contract is aan beide kanten een compileerfout tot het is opgelost.
• @my-app/ui: gedeelde Base UI-componenten, de globale stylesheet en je Config.brand-instellingen.
• @my-app/transactional: react-email-templates, door de e-mailmodule naar HTML gerenderd.

Packages vallen onder de naamruimte van je projectnaam. Importeer ze met de alias, bijv. @my-app/ui/components/ui/button.

De oRPC-contractflow

Een API-endpoint toevoegen raakt drie plekken, allemaal volledig getypeerd:

1. Declareer de procedure in packages/backend-contract (naam, Zod in-/uitvoer).
2. Implementeer hem in apps/api/src/orpc.
3. Roep hem aan vanuit de webapp via de getypeerde backend-client, inclusief autocomplete en typecontrole.

Welke mappen bestaan hangt af van de gekozen modules, zie Modules.