# Core Technologies Used in the Plane Project: Full Stack Architecture

> Discover the core technologies behind the Plane project. Explore its TypeScript React monorepo, Python Django backend, Turborepo, MobX, and custom ProseMirror editor.

- Repository: [Plane/plane](https://github.com/makeplane/plane)
- Tags: architecture
- Published: 2026-08-23

---

**Plane is an open-source project management platform built as a TypeScript React monorepo with a Python Django backend, utilizing Turborepo for task orchestration, MobX for reactive state management, and a custom ProseMirror-based editor for rich-text capabilities.**

Plane is a modern, full-stack project management application developed by MakePlane that enables teams to track issues, manage cycles, and collaborate in real time. The codebase follows a monorepo architecture under the `makeplane/plane` repository, separating the frontend React application from the Python backend services. Understanding the core technologies used in the Plane project is essential for developers contributing to the ecosystem, self-hosting the platform, or evaluating the stack for similar enterprise applications.

## Frontend Stack: React, TypeScript, and Vite

The frontend is a single-page application (SPA) built with React 18 and TypeScript, bundled using Vite for rapid hot module replacement (HMR) and optimized production builds. Unlike many modern React codebases, Plane deliberately avoids Next.js, opting instead for client-side rendering orchestrated by React Router v6. The entry point and dependency manifest are defined in [`apps/web/package.json`](https://github.com/makeplane/plane/blob/main/apps/web/package.json), which declares the React ecosystem dependencies and Vite configuration.

### UI Components and Tailwind CSS

Interface consistency is enforced through the internal `@plane/ui` package located in `packages/ui/`. This library provides reusable React primitives—buttons, modals, tables, and form inputs—styled with Tailwind CSS. The Tailwind configuration is centralized in `packages/tailwind-config/`, ensuring theme coherence across all frontend applications. Components leverage utility-first CSS classes for responsive design, as implemented in the button components that combine `rounded-md`, `bg-indigo-600`, and `hover:bg-indigo-500` for interactive states.

### Reactive State Management with MobX

Plane replaces traditional Redux or Context API patterns with MobX for observable state management. The [`packages/shared-state/src/index.ts`](https://github.com/makeplane/plane/blob/main/packages/shared-state/src/index.ts) file contains stores that utilize `makeAutoObservable` to track project data, issue states, and user sessions across the application. This reactive approach simplifies state mutations and automatic UI updates without boilerplate reducer logic.

```typescript
// packages/shared-state/src/index.ts
import { makeAutoObservable } from "mobx";

export class ProjectStore {
  projects = [] as Project[];

  constructor() {
    makeAutoObservable(this);
  }

  addProject(p: Project) {
    this.projects.push(p);
  }
}

```

### Client-Side Routing

Navigation between project boards, issue lists, and settings views is handled by React Router v6, configured declaratively in the main application entry. This routing solution integrates with MobX stores to preload data via route loaders, ensuring smooth transitions without full-page refreshes.

## Backend Infrastructure: Django, DRF, and PostgreSQL

The backend API is a Python application residing in `apps/api/`, built on Django and Django REST Framework (DRF). It exposes RESTful endpoints for CRUD operations on projects, issues, cycles, and modules. The system uses PostgreSQL as the primary relational database, with Django ORM managing schema migrations and complex query relationships defined in [`apps/api/models.py`](https://github.com/makeplane/plane/blob/main/apps/api/models.py).

### Real-Time Communication with Django Channels

For live board updates, comment notifications, and collaborative cursors, Plane implements WebSocket connections using Django Channels. This asynchronous layer runs alongside the standard WSGI application, handling persistent connections for real-time features while the REST API manages standard request-response cycles.

```python

# apps/api/models.py

from django.db import models
from django.contrib.auth import get_user_model

User = get_user_model()

class Project(models.Model):
    name = models.CharField(max_length=255)
    owner = models.ForeignKey(User, on_delete=models.CASCADE)
    created_at = models.DateTimeField(auto_now_add=True)

```

## Monorepo Orchestration: Turborepo and pnpm

The repository structure is defined by [`pnpm-workspace.yaml`](https://github.com/makeplane/plane/blob/main/pnpm-workspace.yaml) at the root, which includes `apps/*` and `packages/*` directories. Turborepo manages the build pipeline and task dependencies, enabling optimized caching and parallel execution across the `@plane/ui`, `@plane/editor`, and `@plane/shared-state` packages. This setup ensures that changes in shared packages automatically trigger dependent rebuilds in the web and API consumers, with dependency management handled by pnpm for deterministic installs.

## Rich Text Editing: ProseMirror Implementation

Plane features a sophisticated rich-text editor packaged as `@plane/editor` in [`packages/editor/src/lib.ts`](https://github.com/makeplane/plane/blob/main/packages/editor/src/lib.ts). Built on the ProseMirror framework, this custom implementation supports markdown export, drag-and-drop media embedding, and table manipulation. The editor integrates seamlessly with the MobX state layer to persist content changes to the Django backend, providing a Notion-like experience for issue descriptions and comments.

## Internationalization (i18n) Support

Multi-language capabilities are provided by the `@plane/i18n` package, which uses JSON-based translation files and React hooks for runtime language detection. This architecture allows the frontend to switch locales without reloading, storing user preferences via the Django API and ensuring accessible global deployment.

```typescript
// Example: Fetching data with axios in a React component
import axios from "axios";
import { useEffect, useState } from "react";

export const ProjectList = () => {
  const [projects, setProjects] = useState<Project[]>([]);

  useEffect(() => {
    axios.get("/api/projects/").then((res) => setProjects(res.data));
  }, []);

  return (
    <ul>
      {projects.map((p) => (
        <li key={p.id}>{p.name}</li>
      ))}
    </ul>
  );
};

```

## Summary

- **Frontend**: React 18, TypeScript, and Vite power the SPA, styled with Tailwind CSS via the `@plane/ui` component library.
- **State Management**: MobX (`mobx-react`) provides reactive stores in `packages/shared-state/`, avoiding Redux boilerplate.
- **Routing**: React Router v6 handles client-side navigation, not Next.js.
- **Backend**: Python Django with Django REST Framework serves REST APIs from `apps/api/`, using PostgreSQL for data persistence.
- **Real-Time**: Django Channels enable WebSocket connections for live updates and notifications.
- **Monorepo**: Turborepo and pnpm workspaces coordinate builds across `packages/` and `apps/` directories.
- **Editor**: A custom ProseMirror-based rich-text editor in `packages/editor/` supports markdown and collaborative features.

## Frequently Asked Questions

### Does Plane use Next.js for server-side rendering?

No, Plane explicitly avoids Next.js. The frontend is a React single-page application built with Vite and uses React Router v6 for client-side navigation, as configured in [`apps/web/package.json`](https://github.com/makeplane/plane/blob/main/apps/web/package.json). This architecture prioritizes client-side state management andSPA performance over server-side rendering.

### What state management solution does Plane employ?

Plane uses **MobX** for reactive state management instead of Redux or Zustand. The `packages/shared-state/` directory contains observable stores that utilize `makeAutoObservable` to track application state, enabling automatic UI updates when data changes without complex reducer logic.

### Which database does the Plane backend use?

The backend uses **PostgreSQL** as its primary relational database. The Django ORM in [`apps/api/models.py`](https://github.com/makeplane/plane/blob/main/apps/api/models.py) defines the schema for projects, issues, users, and cycles, handling migrations and complex query relationships through Django's database abstraction layer.

### How is the Plane repository organized as a monorepo?

Plane uses **Turborepo** combined with **pnpm workspaces** to manage its monorepo structure. The [`pnpm-workspace.yaml`](https://github.com/makeplane/plane/blob/main/pnpm-workspace.yaml) file defines the workspace boundaries across `apps/*` (containing the web frontend and API) and `packages/*` (containing shared UI components, state stores, and utilities), enabling optimized build caching and task orchestration across the codebase.