Dub

# MISSION: Scaffold "Dub" 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 **Dub**.
---
## 1. PROJECT SPECIFICATIONS & BENCHMARK
- **Reference Architecture**: Dub
- **What It Does**: Dub is an open-core link attribution platform for short links, conversion tracking, and affiliate programs, built as a Next.js and TypeScript monorepo on Prisma, PlanetScale, Upstash, and Tinybird.
- **Domain & Category**: Link & Analytics SaaS
- **Production Scale**: 2-5 people
- **Development Mode**: HYBRID
- **Architectural Rationale**: A Turborepo pnpm monorepo lets the Next.js dashboard, publishable SDKs, and embeddable widgets share code while each ships and versions independently, with click analytics offloaded to Tinybird to keep MySQL fast.
- **Live Website Reference**: https://dub.co
- **Source Repository**: https://github.com/dubinc/dub
---
## 2. PRODUCTION TECH STACK
- **Full Stack Array**: Next.js, TypeScript, Prisma, PlanetScale, Upstash, Tinybird, Tailwind CSS, Turborepo
- **Primary Language(s)**: TypeScript, JavaScript, CSS
- **License of the reference repo**: NOASSERTION
- **Frontend**: Next.js — Full-stack React framework serving the dashboard, marketing site, and route handlers in apps/web.; Tailwind CSS — Utility-first styling shared across apps/web and @dub/ui through a shared @dub/tailwind-config preset.
- **Backend & APIs**: Prisma — ORM over the primary MySQL database, queried through the PlanetScale serverless driver adapter.; NextAuth.js — Session and OAuth authentication for the dashboard, configured in apps/web.; Stripe — Billing and subscription management for workspace plans.; Resend — Transactional email delivery for the @dub/email package, built on react-email templates.; BoxyHQ SAML Jackson — Enterprise SAML/SSO identity provider integration.
- **Data & persistence**: PlanetScale — Primary MySQL-compatible database, accessed via @planetscale/database and the Prisma PlanetScale adapter.; Upstash — Serverless Redis, rate limiting, vector search, and durable workflow queues (QStash) for the API layer.; Tinybird — ClickHouse-backed analytics engine that ingests and serves link-click and event data.
- **Infrastructure & deploy**: Turborepo — Orchestrates build, dev, and test pipelines across the pnpm workspace of apps and packages.; Vercel — Hosting platform; apps/web uses Vercel-specific runtime primitives for edge config, functions, and OG image generation.
---
## 3. KEY ARCHITECTURAL DECISIONS (audited from https://github.com/dubinc/dub @ 82767f9)
1. **Turborepo pnpm monorepo separates the app from publishable packages**: pnpm-workspace.yaml scopes the workspace to apps/*, apps/web/.react-email, packages/*, and packages/embeds/*; publishable SDKs (packages/cli, packages/ui, packages/utils, packages/embeds/core, packages/embeds/react) each ship to npm independently of the apps/web dashboard via their own publish-* scripts in the root package.json.
2. **Prisma talks to MySQL through the PlanetScale serverless driver adapter**: apps/web/package.json depends on @planetscale/database and @prisma/adapter-planetscale alongside @prisma/client, so Prisma queries route through PlanetScale's HTTP-based serverless driver instead of a persistent TCP connection, which matters for connection limits on serverless/edge deploys.
3. **Click analytics are offloaded to Tinybird instead of the primary database**: A dedicated packages/tinybird workspace package plus the @chronark/zod-bird client in apps/web/package.json route high-volume click and event data into Tinybird (a ClickHouse-based analytics engine) so analytics queries do not compete with the transactional MySQL workload.
4. **Upstash covers cache, rate limiting, vector search, and workflows**: apps/web/package.json depends on @upstash/redis, @upstash/ratelimit, @upstash/vector, and @upstash/workflow together, consolidating four infrastructure concerns (caching, API rate limiting, embedding search, durable background jobs) onto one serverless-Redis-based provider instead of separate self-hosted services.
5. **Open core: AGPL-3.0 codebase with a separately licensed Enterprise Edition path**: The root package.json declares "license": "AGPL-3.0-or-later" while GitHub reports the overall repository license as NOASSERTION; the README documents a commercially licensed "ee" (Enterprise Edition) code path under apps/web/app/(ee) for enterprise-only features maintained by the core team.
6. **Embeds ship as a vanilla-JS core plus a thin React wrapper**: packages/embeds/core (@dub/embed-core) implements the dashboard-embedding script with only @floating-ui/dom as a dependency, and packages/embeds/react (@dub/embed-react) wraps it in React components that depend on @dub/embed-core, so non-React consumers are not forced to ship React.
---
## 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**:
   - Utilize Next.js 15 App Router: default to React Server Components (RSC) for data fetching. Handle mutations through Server Actions with Zod validation. Keep 'use client' directives restricted strictly to interactive leaf components.
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 (PlanetScale, Upstash, Tinybird): 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.