Documenso

# MISSION: Scaffold "Documenso" Production Architecture
You are an expert Senior Staff Software Architect and Full-Stack Engineer. Your mission is to scaffold and implement a production-grade, highly reliable, and modular codebase following the proven architecture of **Documenso**.
---
## 1. PROJECT SPECIFICATIONS & BENCHMARK
- **Reference Architecture**: Documenso
- **What It Does**: Documenso is an open-source, AGPL-3.0 document e-signing platform built as a React Router application with a Prisma/PostgreSQL backend, implementing PAdES-standard PDF signatures with local or Google Cloud KMS-backed keys.
- **Domain & Category**: E-signature SaaS
- **Production Scale**: 2-5 people
- **Development Mode**: AI-AGENT
- **Architectural Rationale**: Signing logic is isolated in its own package with a swappable transport (local certificate or Google Cloud KMS) so self-hosters can choose key custody, while Prisma and a generated Kysely client cover both everyday CRUD and the raw SQL that document/signature queries need.
- **Live Website Reference**: https://documenso.com
- **Source Repository**: https://github.com/documenso/documenso
---
## 2. PRODUCTION TECH STACK
- **Full Stack Array**: React, TypeScript, React Router, Prisma, PostgreSQL, tRPC, Tailwind CSS, Turborepo, Docker
- **Primary Language(s)**: TypeScript, MDX
- **License of the reference repo**: AGPL-3.0
- **Frontend**: React — UI library for the main app, rendered through React Router in framework mode.; React Router (framework mode) — Routing, SSR, and build tooling for the main app; formerly a Remix app, now on @react-router/dev and @react-router/serve.; Radix UI — Unstyled accessible primitives (dialog, dropdown-menu, select, tabs, toast, etc.) behind the design system.; Tailwind CSS — Utility-first styling shared across apps via the packages/tailwind-config workspace package.
- **Backend & APIs**: Hono — Lightweight server framework mounted inside the React Router app via hono-react-router-adapter.; tRPC — Typed API layer (packages/trpc) consumed by the React app and used for document/signing procedures.; Inngest — Background job runner for async workflows (email sending, document processing) outside the request cycle.; PAdES signing (packages/signing) — Implements PDF Advanced Electronic Signatures; supports local certificates and Google Cloud KMS as a remote signer.
- **Data & persistence**: PostgreSQL — Primary database, accessed through Prisma; schema and migrations live in packages/prisma.; Prisma — ORM and migration tool; prisma-kysely also generates a Kysely-typed client for raw query access.; Kysely — Typed SQL query builder generated from the Prisma schema via prisma-kysely, used for queries Prisma cannot express efficiently.
- **Infrastructure & deploy**: Docker — docker/Dockerfile and docker/Dockerfile.chromium build self-hosting images; docker/production holds deploy assets.; Render — One-click deploy target; render.yaml provisions the web service and a managed Postgres database.; Railway — Alternative one-click deploy target configured at the repo root.
- **Tooling, testing & ops**: Turborepo — Orchestrates builds, dev servers, and tests across the npm workspaces (apps/*, packages/*).; Playwright — End-to-end test runner for signing and document flows.; Biome — Lint and format tool run via biome check across the monorepo, replacing ESLint/Prettier.
---
## 3. KEY ARCHITECTURAL DECISIONS (audited from https://github.com/documenso/documenso @ e658cc5)
1. **The app migrated from Next.js to React Router in framework mode**: apps/remix/package.json is named @documenso/remix but depends on @react-router/dev, @react-router/serve, and react-router ^7, with build/dev scripts calling react-router build and react-router dev rather than next; a Hono server (hono-react-router-adapter) is mounted for custom routes.
2. **Signing keys can be local certificates or a remote KMS**: packages/signing depends on @google-cloud/kms and @google-cloud/secret-manager alongside its local transport, so a self-hoster can keep a signing certificate on disk or delegate signing operations to Google Cloud KMS without touching the signing call sites.
3. **Prisma is paired with a generated Kysely client for typed raw queries**: packages/prisma/package.json depends on both @prisma/client and kysely, wired together by prisma-extension-kysely and prisma-kysely, so code can use Prisma's high-level API for CRUD and drop into Kysely-typed SQL for queries Prisma's query builder cannot express well.
4. **Async work runs through Inngest, not a custom queue**: The root package.json depends on inngest and inngest-cli (with an inngest:dev script pointed at /api/jobs), so background jobs like emailing signers or post-signing processing are defined as Inngest functions rather than a bespoke Redis/BullMQ queue.
5. **Passwordless auth uses WebAuthn alongside traditional login**: apps/remix/package.json depends on @simplewebauthn/browser and @simplewebauthn/server, adding passkey-based authentication as an option next to the email/password and OAuth flows.
6. **The monorepo ships two independent one-click deploy configs**: render.yaml (Render, provisioning a managed Postgres database and running prisma migrate deploy on start) and railway.toml (Railway) both live at the repo root, so self-hosters can deploy without hand-writing infrastructure config for either platform.
---
## 4. NON-NEGOTIABLE ARCHITECTURAL GUARDRAILS
1. **Monorepo & Modular Separation**:
   - Structure as a Turborepo monorepo with strict package boundaries:
     - `apps/web`: Application UI, routing, layouts, and server endpoints.
     - `packages/ui`: Shared design tokens, CSS variables, and Radix UI primitive components.
     - `packages/db`: Database schemas, client singleton, declarative migrations, and seed scripts.
     - `packages/config`: Shared TypeScript, ESLint, and build configurations.
2. **Strict Type Safety & Zero `any` Policy**:
   - Enable `strict: true`, `noImplicitAny: true`, and `strictNullChecks: true`.
   - Validate ALL external inputs, API request bodies, and query parameters with **Zod** schemas before execution.
3. **Frontend & Rendering Guidelines**:
   - Isolate interactive UI state to leaf components. Keep core pages lightweight and performant.
4. **Design System & Aesthetics**:
   - Keep every color, radius, shadow and font in a single token file (CSS variables) and consume tokens everywhere; never hardcode hex values in components.
   - Prefer crisp 1px borders and one subtle shadow scale over blurry default shadows. Pair one sans-serif for body/headings with one monospace for tags, badges, metrics, and code.
5. **Data Layer & Reliability**:
   - Write declarative schema definitions with foreign keys, composite indexes on queried filters, and automated timestamp triggers.
   - Use connection pooling and prepared statements for serverless database execution.
---
## 5. STEP-BY-STEP SCAFFOLDING ROADMAP
- **Phase 1: Workspace & Root Config**: Initialize package manager, monorepo configuration (`turbo.json`, `tsconfig.base.json`, `package.json`).
- **Phase 2: Database Schema & Client**: Set up the data layer (PostgreSQL, Prisma, Kysely): client, connection pool, models, and migration scripts.
- **Phase 3: Design Tokens & UI Primitives**: Build accessible `Button`, `Input`, `Card`, `Badge`, and layout wrappers inside `packages/ui`.
- **Phase 4: Core Application Routes & Handlers**: Implement primary authentication, user session handling, and application routes.
- **Phase 5: Quality Assurance & Build Verification**: Run `tsc --noEmit`, ESLint, Prettier, and smoke test suites to ensure zero compilation or runtime errors.
---
## 6. EXECUTION INSTRUCTIONS
1. Review all specifications, architectural guardrails, and stack choices above.
2. Present the full monorepo directory tree structure.
3. Systematically generate the complete, production-ready codebase according to the 5-phase roadmap above — starting with the root workspace setup, followed by the database schema, UI design system package, and full-stack application routes until the repository is fully scaffolded and ready to run.