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

> Explore the React frontend application in makeplane/plane. Discover its Vite, React Router, and MobX architecture. Set up your development environment easily.

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

---

**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`](https://github.com/makeplane/plane/blob/main/apps/web/react-router.config.ts), the application is explicitly configured as a client-only bundle:

```typescript
// 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`](https://github.com/makeplane/plane/blob/main/apps/web/vite.config.ts), while [`apps/web/package.json`](https://github.com/makeplane/plane/blob/main/apps/web/package.json) exposes development and production scripts:

```bash

# 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`](https://github.com/makeplane/plane/blob/main/apps/web/app/dashboard/page.tsx):

```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`](https://github.com/makeplane/plane/blob/main/apps/web/core/services/api.service.ts) configures Axios interceptors and base URLs:

```typescript
// 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`](https://github.com/makeplane/plane/blob/main/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`](https://github.com/makeplane/plane/blob/main/apps/web/styles/globals.css)

## Running the Frontend Locally

To start the development server from the repository root:

```bash

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