Frontend Application in the makeplane/plane Repository: Architecture and Setup Guide

The makeplane/plane repository contains a complete React-based frontend application located in the apps/web directory, built as a single-page application using Vite, React Router, and MobX state management.

The makeplane/plane repository ships with a full-featured client-side web application that serves as the primary interface for the Plane project management platform. This frontend application lives under apps/web and is architected as a modern React single-page application (SPA) that communicates with the backend API. Understanding the frontend structure is essential for contributors looking to customize the UI or extend functionality.

Location and Project Structure

The frontend application resides in apps/web/ within the monorepo structure. This directory functions as a standalone application that imports shared utilities from the @plane/* namespace while maintaining its own routing, state management, and build configuration.

Key directories include:

• apps/web/app/ - File-system routed pages and layouts
• apps/web/core/store/ - MobX state management stores
• apps/web/core/services/ - API service layer for backend communication
• apps/web/styles/ - Global CSS and Tailwind configuration

Technology Stack and Build Configuration

The application uses React Router v7 (framework mode) configured for client-side rendering only, bundled with Vite.

In apps/web/react-router.config.ts, the application is explicitly configured as a client-only bundle:

// apps/web/react-router.config.ts
export default {
  ssr: false,
  // Additional configuration
} satisfies Config;

The build pipeline is defined in apps/web/vite.config.ts, while apps/web/package.json exposes development and production scripts:

# Development server on port 3000

pnpm dev  # Runs react-router dev --port 3000

# Production build

pnpm build  # Creates static client bundle

Routing Architecture

The frontend implements file-system based routing under apps/web/app/. React Router automatically generates routes from files in this directory, supporting layouts, nested routes, and dynamic parameters.

Example route file at apps/web/app/dashboard/page.tsx:

// apps/web/app/dashboard/page.tsx
import { useEffect } from "react";
import { observer } from "mobx-react";

export const DashboardPage = observer(() => {
  useEffect(() => {
    // Load user data via the shared service
    import("@plane/services/user").then(({ userService }) => {
      userService.fetchCurrentUser();
    });
  }, []);

  return <h1>Welcome to Plane Dashboard</h1>;
});

State Management with MobX

State management is centralized in apps/web/core/store/ using MobX stores organized by domain. Key stores include workspace, project, issue, and UI state management.

The store architecture follows a modular pattern where each domain maintains its own observable state, actions, and computed values. Stores are imported and used within React components via the mobx-react observer pattern, as demonstrated in the dashboard example above.

API Integration and Services

The service layer in apps/web/core/services/ handles all HTTP communication with the backend (apps/api). The base API configuration in apps/web/core/services/api.service.ts configures Axios interceptors and base URLs:

// apps/web/core/services/api.service.ts
import axios from "axios";

export const api = axios.create({
  baseURL: "/api",
  withCredentials: true,
});

export async function getWorkspace(id: string) {
  const { data } = await api.get(`/workspaces/${id}`);
  return data;
}

UI Components and Styling

The frontend consumes a shared design system through the internal @plane/ui package, while application-specific styles reside in apps/web/styles/. Global styles including Tailwind directives are defined in apps/web/styles/globals.css.

The styling approach combines:

• Tailwind CSS for utility-first styling
• CSS modules for component-scoped styles
• Global CSS for theme variables and resets in apps/web/styles/globals.css

Running the Frontend Locally

To start the development server from the repository root:

# Install all workspace packages

pnpm install

# Start the React SPA development server

pnpm --filter=web dev

This command initializes the Vite development server on http://localhost:3000, proxying API requests to the backend service. The --filter=web flag ensures only the apps/web package and its dependencies are processed.

Summary

• The makeplane/plane repository contains a complete frontend application in apps/web built as a React SPA
• React Router handles file-system based routing in apps/web/app/ with SSR explicitly disabled in react-router.config.ts
• MobX stores in apps/web/core/store/ provide observable state management for workspace, project, and issue data
• Vite bundles the application, with development scripts configured to run on port 3000
• API services in apps/web/core/services/ use Axios to communicate with the backend at /api
• UI components are sourced from the internal @plane/ui package with additional Tailwind CSS styling

Frequently Asked Questions

What port does the Plane frontend run on by default?

The development server starts on port 3000 as configured in apps/web/package.json. The dev script executes react-router dev --port 3000, which initializes the Vite server on this port. You can modify this by changing the port flag or setting environment variables in your local configuration.

Does the Plane frontend use Server-Side Rendering (SSR)?

No, the frontend is explicitly configured as a client-only application. The apps/web/react-router.config.ts file sets ssr: false, which generates a static single-page application bundle that hydrates entirely in the browser after the initial HTML load.

How does the frontend handle state management?

State is managed through MobX stores located in apps/web/core/store/. The architecture separates concerns into domain-specific stores (workspace, project, issue) that provide observable state and actions. Components consume these stores using the observer pattern from mobx-react, ensuring reactive updates when state changes.

What UI component library does Plane use?

Plane uses an internal design system package called @plane/ui that contains shared React components. These components are imported across the monorepo, while the web app applies additional application-specific styling through Tailwind CSS utility classes and global CSS files in apps/web/styles/.

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