What Technologies Are Used in the Makeplane/Plane Project?

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 deploys via Docker and Kubernetes with GitHub Actions CI/CD.

Plane is an open-source, full-stack project management platform that blends modern web frontend tools with a battle-tested Python backend. Understanding what technologies are used in the makeplane/plane project reveals a sophisticated architecture optimized for developer experience and scalable deployment.

Frontend Architecture: React, TypeScript, and Modern Tooling

The frontend is built as a monorepo using React with TypeScript in strict mode for type-safe development. Client-side navigation is handled by React Router, while the build pipeline is orchestrated through Vite, configured in apps/web/vite.config.ts, providing fast development server startup and optimized bundling.

Build System and Monorepo Management

Dependency management relies on pnpm workspaces for efficient handling of shared packages. The monorepo task runner is TurboRepo, defined in turbo.json at the repository root, which enables parallel execution of build, lint, and type-check tasks across the apps/ and packages/ directories.

Component Library and Styling

The UI layer implements Tailwind CSS through a centralized configuration in packages/tailwind-config, delivering a utility-first, themeable design system. Shared UI primitives—including buttons, dropdowns, and modals—live in the @plane/ui package, with implementation examples visible in packages/ui/src/button.tsx. MobX powers reactive state management via the packages/shared-state package, specifically in packages/shared-state/src/store.ts, handling complex UI state for issues, cycles, and project data.

Internationalization and Utilities

The frontend supports i18n internationalization through the packages/i18n package for locale-aware string formatting. Additional utility packages include @plane/utils for helper functions, @plane/logger for request logging, and @plane/decorators for API decorators used across the frontend services.

Backend Architecture: Django and PostgreSQL

The server-side stack is built on Django with Django REST Framework, providing the core web framework, ORM, administrative interface, and REST API endpoints. The implementation resides primarily in the apps/api/ directory.

Database and Caching Infrastructure

PostgreSQL serves as the primary relational database for storing issues, cycles, modules, and user data. Redis functions as both a caching layer and message broker for background task queues. Authentication is implemented using JWT tokens via Django REST Framework SimpleJWT, providing secure token-based API access.

API Documentation

The backend auto-generates API specifications using OpenAPI/Swagger, with utilities located in apps/api/plane/utils/openapi. This enables interactive API documentation and client SDK generation directly from the Django model and view definitions.

Asynchronous Processing

Background jobs—such as sending email notifications and processing imports—are handled by Celery, configured in apps/api/plane/celery.py. The task queue connects to Redis, allowing the Django API to offload heavy processing to separate worker processes without blocking request threads.

DevOps and Deployment Architecture

Containerization and Orchestration

The entire stack is containerized using Docker, with docker-compose.yml defining services for the web frontend, API backend, PostgreSQL, and Redis. For production environments, Kubernetes manifests provide scalable orchestration. Nginx serves as the reverse proxy for HTTP termination and static asset delivery, bundled within the Docker images.

Continuous Integration and Testing

GitHub Actions workflows in .github/workflows/ automate linting, type-checking, building, and testing across the monorepo. The API test suite runs using pytest, orchestrated via docker-compose-test.yml, which spins up isolated PostgreSQL and Redis services for automated validation.

Code Examples from the Repository

React Component with Tailwind CSS

The @plane/ui package demonstrates the component patterns used throughout the frontend:

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>
);

Django Model Definition

Core data models follow Django conventions, with patterns similar to those in apps/api/plane/models/work_item.py:

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

Celery Background Task

Asynchronous tasks are defined in the API layer, utilizing the Celery configuration from apps/api/plane/celery.py:

# 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,
    )

Summary

• Frontend Technologies: React, TypeScript, Vite, Tailwind CSS, MobX, TurboRepo, and pnpm power the modern web interface
• Backend Technologies: Django REST Framework, PostgreSQL, Redis, Celery, and JWT authentication provide the server-side architecture
• DevOps Technologies: Docker, Kubernetes, Nginx, and GitHub Actions handle containerization, orchestration, and continuous integration
• Key Configuration Files: turbo.json, apps/web/vite.config.ts, apps/api/plane/celery.py, and docker-compose.yml define the core system setup

Frequently Asked Questions

Is Plane built with Next.js or plain React?

Plane uses plain React with React Router for client-side navigation, not Next.js. The build system is Vite, configured in apps/web/vite.config.ts, which handles bundling and the development server for the monorepo structure.

What database does makeplane/plane use?

PostgreSQL serves as the primary relational database for all project data, including issues, cycles, and modules. Redis is used as a caching layer and message broker for Celery background tasks.

How does the project handle background job processing?

The project uses Celery with Redis as the broker to process asynchronous tasks. Configuration resides in apps/api/plane/celery.py, handling operations like email notifications and data imports without blocking the main Django API request threads.

Can I self-host Plane using Docker?

Yes, the repository includes docker-compose.yml for single-click self-hosted deployments using Docker Compose. For production scale, Kubernetes manifests are available, and GitHub Actions workflows provide automated CI/CD pipelines for custom deployments.

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