Skip to main content

​
Monorepo Structure

Plane is organized as a monorepo using Turborepo for orchestration and pnpm workspaces for package management. This structure allows for efficient code sharing and streamlined development across multiple applications and packages. 
plane/
├── apps/           # Applications
├── packages/       # Shared packages and libraries
├── docker-compose-local.yml
├── docker-compose.yml
└── package.json    # Root workspace configuration

​
Applications

The apps/ directory contains the main applications that make up the Plane platform:

​
Web App

Location: apps/web
Port: 3000
Description: Main user-facing application for project management
  • Built with React and React Router
  • Includes features like work items, cycles, modules, views, pages, and analytics
  • Uses MobX for state management
  • Integrates with the rich text editor for content creation
Tech Stack:
  • React Router for navigation
  • React Hook Form for form handling
  • MobX for reactive state management
  • Recharts for data visualization
  • Tailwind CSS for styling

​
Admin App

Location: apps/admin
Port: 3001
Description: Instance administration interface (God Mode)
  • Manage instance-level settings and configurations
  • User and workspace administration
  • System monitoring and maintenance
  • Lighter dependency footprint compared to the web app

​
Space App

Location: apps/space
Port: 3002
Description: Public-facing interface for sharing project information
  • Public project views
  • Share issues and roadmaps externally
  • Server-side rendering capabilities with React Router
  • Simplified UI for external stakeholders

​
API

Location: apps/api
Description: Backend API server powering all Plane applications
  • Built with Django and Python
  • RESTful API architecture
  • Handles authentication, authorization, and business logic
  • Integrates with PostgreSQL and Redis
Additional Services:
  • apps/live - Real-time collaboration features
  • apps/proxy - Proxy service for handling requests

​
Shared Packages

The packages/ directory contains reusable code shared across applications:

​
Core Libraries

  • @plane/ui - Shared UI components library with Storybook
  • @plane/types - TypeScript type definitions used across the platform
  • @plane/constants - Shared constants and configuration values
  • @plane/utils - Common utility functions
  • @plane/hooks - Reusable React hooks

​
Feature Packages

  • @plane/editor - Rich text editor component
  • @plane/i18n - Internationalization and localization support
  • @plane/shared-state - MobX stores for reactive state management
  • @plane/services - API service layer and HTTP clients
  • @plane/propel - Propel analytics integration

​
Developer Tools

  • @plane/tailwind-config - Shared Tailwind CSS configuration
  • @plane/typescript-config - Shared TypeScript configurations
  • @plane/logger - Logging utilities
  • @plane/decorators - TypeScript decorators
  • @plane/codemods - Code transformation scripts

​
Technology Stack

​
Frontend

  • Framework: React 19+
  • Routing: React Router 7
  • State Management: MobX
  • Styling: Tailwind CSS
  • Forms: React Hook Form
  • Data Fetching: SWR
  • Build Tool: Vite
  • Monorepo Tool: Turborepo

​
Backend

  • Framework: Django (Python)
  • Database: PostgreSQL v14
  • Cache: Redis v6.2.7
  • API: RESTful architecture

​
Development Tools

  • Package Manager: pnpm
  • Linting: OxLint
  • Formatting: oxfmt
  • Type Checking: TypeScript (strict mode)
  • Containerization: Docker & Docker Compose

​
Code Organization Principles

​
Workspace Dependencies

Plane uses a specific pattern for managing dependencies:
  • Internal packages: Use workspace:* protocol 
    "@plane/ui": "workspace:*"
  • External dependencies: Use catalog: for version management 
    "react": "catalog:"

​
TypeScript Configuration

  • Strict mode enabled across all packages
  • Shared base configurations in @plane/typescript-config
  • All files must be properly typed

​
State Management Pattern

  • MobX stores centralized in packages/shared-state
  • Reactive patterns for UI updates
  • Observable state with computed values and actions

​
Component Development

  • UI components built in @plane/ui package
  • Storybook for isolated component development
  • Run Storybook: pnpm --filter=@plane/ui storybook (port 6006)

​
Build & Deployment

​
Development Build

pnpm dev
Starts all development servers with hot module replacement:
  • Web app on port 3000
  • Admin app on port 3001
  • Space app on port 3002 (when needed)

​
Production Build

pnpm build
Builds all packages and applications for production deployment.

​
Docker Deployment

Plane uses Docker for containerized deployment: 
# Local development
docker compose -f docker-compose-local.yml up

# Production
docker compose up

​
Next Steps

Build docs developers (and LLMs) love

Get started for freeTalk to us