Technologies Used in the Makeplane Plane Project: Complete Stack Breakdown

The makeplane/plane project combines a React and TypeScript frontend built with Vite and Tailwind CSS, a Django and Python backend powered by PostgreSQL and Redis, and a DevOps pipeline using Docker, Kubernetes, and GitHub Actions.

Plane is an open-source, full-stack project management platform developed by the makeplane organization. Understanding the technologies used in the makeplane/plane project reveals a modern architecture that blends a Vite-powered React frontend with a battle-tested Django API backend. This article examines the specific frameworks, libraries, and infrastructure tools defined in the source code, including file paths and configuration details extracted directly from the repository.

Frontend Technologies in Plane

The frontend architecture is built as a monorepo with strict TypeScript enforcement and modern build tooling.

React and TypeScript Foundation

The user interface is built with React and React Router for client-side navigation, as specified in apps/web/package.json. The entire frontend is written in TypeScript with strict mode enabled, providing static type safety across all packages. This combination delivers a type-safe development experience while maintaining the flexibility of the React ecosystem.

Build Tooling and Monorepo Management

The project uses Vite as the primary build tool, configured in apps/web/vite.config.ts, for fast development server startup and optimized bundling. Dependency management runs on pnpm workspaces for efficient disk space usage, while TurboRepo (defined in turbo.json) orchestrates parallel task execution and caching across the monorepo packages. This setup allows the team to build and test multiple packages simultaneously with minimal overhead.

Styling and State Management

Tailwind CSS provides utility-first styling through the packages/tailwind-config package, enabling rapid UI development with consistent design tokens. For reactive state management, the codebase implements MobX in packages/shared-state/src/store.ts. Shared UI primitives including buttons, dropdowns, and modals live in the @plane/ui package (packages/ui/src/button.tsx), while i18n handles internationalization and locale-aware formatting in packages/i18n.

Backend Technologies in Plane

The backend stack centers on Django with supporting infrastructure for data persistence and asynchronous processing.

Django and Python Core

The API layer is powered by Django with Django REST Framework, as confirmed by the dependencies in apps/api/package.json and the project's README. It runs on Python 3 and handles core logic including authentication via JWT tokens using Django REST Framework SimpleJWT. This combination provides a robust ORM, admin interface, and RESTful API endpoints out of the box.

Database and Caching Layer

PostgreSQL serves as the primary relational database for storing issues, cycles, modules, and project data. Redis functions as both a caching layer and the message broker for the background job queue, ensuring high performance for read-heavy operations and real-time features.

Background Processing and API Documentation

Asynchronous tasks such as sending email notifications are handled by Celery, configured in apps/api/plane/celery.py. The API documentation is auto-generated using OpenAPI/Swagger specifications found in apps/api/plane/utils/openapi, providing interactive documentation for frontend developers. The testing suite uses pytest alongside Docker-Compose test configurations in docker-compose-test.yml.

DevOps and Deployment Technologies

The infrastructure layer supports both local development and production scalability through containerization.

Containerization and Orchestration

The entire stack is containerized using Docker with docker-compose.yml defining services for the web frontend, API backend, PostgreSQL database, and Redis cache. Production deployments can be orchestrated with Kubernetes using the provided deployment manifests. Nginx serves as the reverse proxy for HTTP termination and static asset serving within the Docker images.

CI/CD Pipeline

Continuous integration and deployment are managed through GitHub Actions, with workflow definitions located in .github/workflows/. These pipelines handle linting, type-checking, building, and testing on every pull request. The infrastructure supports single-click self-hosted setups through Docker-Compose configurations, making it easy for teams to deploy their own instances.

Code Examples from the Repository

Below are concrete implementations demonstrating the technologies used in the makeplane/plane project.

React Component with Tailwind

The UI components use Tailwind CSS classes for styling, as seen in the @plane/ui package:

import React from "react";

export const WelcomeCard = () => (
  <div className="rounded-xl bg-gray-50 p-6 shadow-md">
    <h2 className="text-xl font-semibold text-gray-800">
      Welcome to Plane!
    </h2>
    <p className="mt-2 text-gray-600">
      Track issues, run cycles, and manage roadmaps—all in one place.
    </p>
  </div>
);

This pattern mirrors the actual implementation in packages/ui/src/button.tsx, where shared UI primitives are defined with Tailwind utility classes.

Django Model Definition

The backend follows Django's ORM patterns for data modeling, as implemented in apps/api/plane/models/:

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

User = get_user_model()

class WorkItem(models.Model):
    title = models.CharField(max_length=255)
    description = models.TextField(blank=True)
    assignee = models.ForeignKey(User, null=True, on_delete=models.SET_NULL)
    created_at = models.DateTimeField(auto_now_add=True)

    def __str__(self):
        return self.title

This structure aligns with the actual model definitions found in apps/api/plane/models/work_item.py.

Celery Background Task

Asynchronous processing is handled through Celery tasks defined in the API application:

# apps/api/plane/tasks.py

from celery import shared_task
from django.core.mail import send_mail

@shared_task
def send_notification_email(recipient: str, subject: str, body: str):
    send_mail(
        subject,
        body,
        "no-reply@plane.so",
        [recipient],
        fail_silently=False,
    )

The Celery configuration in apps/api/plane/celery.py wires these tasks to the Redis broker for processing outside the main request thread.

Summary

• The frontend combines React, TypeScript, Vite, and Tailwind CSS within a pnpm/TurboRepo monorepo structure
• MobX handles reactive state management while @plane/ui provides shared component primitives
• The backend relies on Django REST Framework with Python 3, using PostgreSQL for data and Redis for caching
• Celery processes background jobs asynchronously with OpenAPI auto-generated documentation
• Docker and Kubernetes enable containerized deployment and scaling
• GitHub Actions powers the continuous integration and deployment pipeline

Frequently Asked Questions

What frontend framework does Plane use?

Plane uses React with TypeScript for the frontend, styled with Tailwind CSS and managed by MobX for state management. The build system uses Vite and TurboRepo to manage the monorepo structure defined in turbo.json.

Does Plane use PostgreSQL or MongoDB for its database?

Plane uses PostgreSQL as its primary relational database, configured alongside Redis for caching and message brokering. The Django ORM in apps/api/plane/models/ defines the schema for issues, cycles, and modules.

What handles background jobs in the Plane backend?

Celery processes asynchronous tasks like email notifications and background jobs, configured in apps/api/plane/celery.py. It uses Redis as the message broker to queue tasks for processing outside the main HTTP request cycle.

How is the Plane codebase organized as a monorepo?

The project uses pnpm workspaces combined with TurboRepo to manage dependencies and build orchestration across packages. The structure includes separate apps for web (frontend) and api (backend), with shared packages for UI components (@plane/ui), state management (shared-state), and internationalization (i18n).

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}