Plane

# MISSION: Scaffold "Plane" 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 **Plane**.
---
## 1. PROJECT SPECIFICATIONS & BENCHMARK
- **Reference Architecture**: Plane
- **What It Does**: Plane is an open-source, AGPL-3.0 project management platform (a Jira/Linear/ClickUp alternative) with a Django/Python API, React Router v7 frontend apps, and a dedicated Hocuspocus/Yjs service for realtime collaborative editing.
- **Domain & Category**: Project Management
- **Production Scale**: 6-20 people
- **Development Mode**: CLASSIC
- **Architectural Rationale**: Splitting web, admin, space, live, and api into independently buildable pnpm/Turborepo packages, and moving Yjs-based collaborative editing into its own Hocuspocus service, keeps the Django API and Node frontends decoupled while still shipping from a single monorepo.
- **Live Website Reference**: https://plane.so
- **Source Repository**: https://github.com/makeplane/plane
---
## 2. PRODUCTION TECH STACK
- **Full Stack Array**: TypeScript, Python, Django, React Router, PostgreSQL, Valkey, RabbitMQ, MinIO, Docker, MobX, Tiptap, Turborepo
- **Primary Language(s)**: TypeScript, Python
- **License of the reference repo**: AGPL-3.0
- **Frontend**: React Router — apps/web, apps/admin, and apps/space each run react-router dev/build (framework mode), not Next.js.; Tiptap — packages/editor wraps Tiptap extensions (mention, task list, collaboration) into the shared rich text editor.; MobX — apps/web depends on mobx, mobx-react, and mobx-utils for client state instead of Redux or Zustand.
- **Backend & APIs**: Django — apps/api is a Python/Django service; pyproject.toml names the project "Plane" and configures ruff for it.; Yjs — apps/live depends on yjs and y-prosemirror to represent the collaborative Tiptap document as a CRDT.; Hocuspocus — apps/live wires @hocuspocus/server with the database, redis, and logger extensions as the realtime editor backend.
- **Data & persistence**: PostgreSQL — plane-db runs postgres:15.7-alpine as the primary datastore for the Django API.; Valkey — plane-redis runs valkey/valkey:7.2.11-alpine, a Redis-compatible store used for caching and pub/sub.
- **Infrastructure & deploy**: RabbitMQ — plane-mq runs rabbitmq:3.13.6-management-alpine as the task/message broker alongside the Celery-style workers.; MinIO — plane-minio provides S3-compatible object storage for uploads in the self-hosted stack.; Docker — Every service (web, admin, space, api, worker, beat-worker, migrator, live, proxy) has its own Dockerfile wired through docker-compose.yml.; Turborepo — turbo.json defines the build/dev/check task graph shared by all pnpm workspace packages.
---
## 3. KEY ARCHITECTURAL DECISIONS (audited from https://github.com/makeplane/plane @ f9ced58)
1. **Five deployable apps share one pnpm/Turborepo monorepo**: web, admin, space, live, and api sit as separate directories under apps/ with their own package.json (or pyproject.toml for api), coordinated by a root pnpm-workspace.yaml and turbo.json rather than being split into separate repositories.
2. **Frontend apps use React Router v7 framework mode, not Next.js**: apps/web, apps/admin, and apps/space all define "dev": "react-router dev" and "build": "react-router build" in their package.json scripts, with Vite only present as the underlying bundler (vite-tsconfig-paths) rather than driving routing directly.
3. **Realtime collaborative editing is its own Node service, not part of the Django API**: apps/live is a standalone Express/express-ws service that combines @hocuspocus/server, yjs, y-prosemirror, and the shared @plane/editor package to sync Tiptap documents, keeping CRDT and websocket concerns out of apps/api entirely.
4. **The Python backend is Django, decoupled from the JS workspace**: apps/api/pyproject.toml declares the Plane project and its ruff lint config, and apps/api/requirements.txt simply points at requirements/production.txt, so the API dependency chain is managed with pip/requirements files rather than being part of the pnpm workspace.
5. **Self-hosting ships four separate deployment methods**: The deployments/ directory contains aio (all-in-one image), cli, kubernetes, and swarm subfolders in addition to the docker-compose.yml at the repo root, giving operators a choice of install path instead of a single supported method.
6. **The local/self-hosted stack composes four separate stateful services behind a proxy**: docker-compose.yml defines plane-db (Postgres 15.7), plane-redis (Valkey 7.2.11), plane-mq (RabbitMQ 3.13.6 with the management plugin), and plane-minio (S3-compatible storage), all sitting behind a custom proxy container built from apps/proxy.
7. **Shared UI and domain logic are split into scoped workspace packages**: packages/ui, packages/hooks, packages/types, packages/utils, packages/services, packages/constants, packages/i18n, and packages/editor are each independent @plane/* workspace packages consumed by web, admin, and space via workspace:* dependencies rather than duplicated per app.
---
## 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, Valkey): 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.