# Technologies Used in the Makeplane Plane Project: Complete Stack Breakdown

> Explore the makeplane plane project's tech stack: React, TypeScript, Vite, Tailwind CSS, Django, Python, PostgreSQL, Redis, Docker, Kubernetes, and GitHub Actions.

- Repository: [Plane/plane](https://github.com/makeplane/plane)
- Tags: technology-stack
- Published: 2026-06-19

---

**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`](https://github.com/makeplane/plane/blob/main/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`](https://github.com/makeplane/plane/blob/main/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`](https://github.com/makeplane/plane/blob/main/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`](https://github.com/makeplane/plane/blob/main/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`](https://github.com/makeplane/plane/blob/main/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`](https://github.com/makeplane/plane/blob/main/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`](https://github.com/makeplane/plane/blob/main/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`](https://github.com/makeplane/plane/blob/main/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`](https://github.com/makeplane/plane/blob/main/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:

```tsx
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`](https://github.com/makeplane/plane/blob/main/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/`:

```python
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`](https://github.com/makeplane/plane/blob/main/apps/api/plane/models/work_item.py).

### Celery Background Task

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

```python

# 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`](https://github.com/makeplane/plane/blob/main/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`](https://github.com/makeplane/plane/blob/main/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`](https://github.com/makeplane/plane/blob/main/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`).