# What Technologies Are Used in the Makeplane/Plane Project?

> Explore the technologies behind the makeplane/plane project. Discover its React TypeScript frontend Vite Tailwind CSS, Python Django backend PostgreSQL Redis, and Docker Kubernetes deployment.

- Repository: [Plane/plane](https://github.com/makeplane/plane)
- Tags: internals
- Published: 2026-06-26

---

**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`](https://github.com/makeplane/plane/blob/main/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`](https://github.com/makeplane/plane/blob/main/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`](https://github.com/makeplane/plane/blob/main/packages/ui/src/button.tsx). **MobX** powers reactive state management via the `packages/shared-state` package, specifically in [`packages/shared-state/src/store.ts`](https://github.com/makeplane/plane/blob/main/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`](https://github.com/makeplane/plane/blob/main/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`](https://github.com/makeplane/plane/blob/main/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`](https://github.com/makeplane/plane/blob/main/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:

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

```

### Django Model Definition

Core data models follow Django conventions, with patterns similar to those in [`apps/api/plane/models/work_item.py`](https://github.com/makeplane/plane/blob/main/apps/api/plane/models/work_item.py):

```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

```

### Celery Background Task

Asynchronous tasks are defined in the API layer, utilizing the Celery configuration from [`apps/api/plane/celery.py`](https://github.com/makeplane/plane/blob/main/apps/api/plane/celery.py):

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

```

## 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`](https://github.com/makeplane/plane/blob/main/turbo.json), [`apps/web/vite.config.ts`](https://github.com/makeplane/plane/blob/main/apps/web/vite.config.ts), [`apps/api/plane/celery.py`](https://github.com/makeplane/plane/blob/main/apps/api/plane/celery.py), and [`docker-compose.yml`](https://github.com/makeplane/plane/blob/main/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`](https://github.com/makeplane/plane/blob/main/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`](https://github.com/makeplane/plane/blob/main/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`](https://github.com/makeplane/plane/blob/main/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.