Development Workflow

A repo-aligned day-to-day workflow for building features.

Start the app

pnpm compose:dev:up
pnpm dev

Organize feature code

Typical feature layout (file-based routing):

apps/web/src/routes/_authenticated/feature/
├── index.tsx          # route: loader + component
└── $id.tsx            # dynamic route segment
apps/web/src/components/feature/   # UI components (kebab-case)
apps/web/src/lib/feature/          # server functions, loaders, schemas

Common naming:

  • server functions/actions: *.functions.ts
  • schemas: *.schema.ts
  • loaders: route loader, optionally backed by a *.loader.ts helper

When a feature grows beyond the app, extract it into a workspace package under packages/ (e.g. packages/organization/) following the existing split of core (server/services), ui (components), and shared schemas.

When to create a package

Create a shared workspace package only if the code needs a stable boundary or will be reused across apps/packages. Put it under packages/ or an existing grouped family like packages/account/ or packages/organization/.

Suggested flow

  1. create or update validation schema
  2. update database code if needed
  3. add loader or server function
  4. build UI
  5. verify with repo checks

Checks

pnpm typecheck
pnpm lint:fix
pnpm format:fix
pnpm test:unit

pnpm healthcheck is useful too, but it does not replace pnpm test:unit.

Next: Adding Features →