# What Functionality Does the Plane Space Application Provide?

> Discover the Plane space application functionality. This React frontend for the open-source Plane project management platform offers issue tracking, sprint cycles, publishing workflows, and user management.

- Repository: [Plane/plane](https://github.com/makeplane/plane)
- Tags: overview
- Published: 2026-08-22

---

**Plane Space is the React-based frontend client for the open-source Plane project management platform, delivering a TypeScript single-page application that handles issue tracking, sprint cycles, publishing workflows, and user management through a centralized MobX state architecture.**

Plane Space serves as the primary user interface for the Plane ecosystem within the `makeplane/plane` repository, located at `apps/space/`. This self-hosted project planning tool implements a comprehensive UI layer that communicates with the Django backend API, offering real-time collaborative features and fully type-checked code in strict TypeScript mode. The application entry point is defined in [`apps/space/package.json`](https://github.com/makeplane/plane/blob/main/apps/space/package.json), which configures the React build tooling and dependencies for the frontend client.

## Three-Layer Architecture

The Plane Space application is built upon a modular architecture consisting of three core concepts that separate concerns between data, logic, and presentation. This design pattern ensures that API communication, UI state, and rendering remain decoupled while maintaining strict TypeScript type safety throughout the codebase.

### State Management with MobX

At the foundation lies a centralized, reactive state layer implemented using **MobX** stores. These stores encapsulate API communication, caching strategies, and derived values:

- **[`apps/space/store/issue.store.ts`](https://github.com/makeplane/plane/blob/main/apps/space/store/issue.store.ts)** – Manages issue data, filters, and pagination
- **[`apps/space/store/cycle.store.ts`](https://github.com/makeplane/plane/blob/main/apps/space/store/cycle.store.ts)** – Handles sprint cycles and time-boxed iterations  
- **[`apps/space/store/publish.store.ts`](https://github.com/makeplane/plane/blob/main/apps/space/store/publish.store.ts)** – Controls publishing lists for external sharing

### Reusable Logic via Hooks

The application exposes store functionality through custom React hooks that encapsulate reusable UI logic. These hooks handle data fetching, timers, intersection observers, and mention parsing:

- **[`apps/space/hooks/store/use-issue.ts`](https://github.com/makeplane/plane/blob/main/apps/space/hooks/store/use-issue.ts)** – Provides issue data to components
- **[`apps/space/hooks/store/use-cycle.ts`](https://github.com/makeplane/plane/blob/main/apps/space/hooks/store/use-cycle.ts)** – Exposes cycle management functions
- **[`apps/space/hooks/store/publish/use-publish.ts`](https://github.com/makeplane/plane/blob/main/apps/space/hooks/store/publish/use-publish.ts)** – Handles publishing operations

### Component Layer

UI components render store data and handle user interactions. Key components include the main navigation, issue detail views, and the "peek-over-view" panel located in paths like [`apps/space/components/views/header.tsx`](https://github.com/makeplane/plane/blob/main/apps/space/components/views/header.tsx) and [`apps/space/components/issues/peek-overview/issue-details.tsx`](https://github.com/makeplane/plane/blob/main/apps/space/components/issues/peek-overview/issue-details.tsx). The styling leverages Tailwind CSS combined with the custom `@plane/ui` component library.

## Core Functional Areas

Plane Space delivers five primary functional domains that constitute the complete project management experience. These capabilities cover the entire workflow from issue creation to external stakeholder communication, all implemented within the React frontend.

### Issue Tracking and Management

The application provides comprehensive issue lifecycle management through [`apps/space/store/issue.store.ts`](https://github.com/makeplane/plane/blob/main/apps/space/store/issue.store.ts). Users can create, edit, comment, and react to issues using the built-in reaction system. Issues display in list views with advanced filters for assignee, label, and state. The **peek-over-view** feature at [`apps/space/components/issues/peek-overview/issue-details.tsx`](https://github.com/makeplane/plane/blob/main/apps/space/components/issues/peek-overview/issue-details.tsx) renders a full-screen overlay showing activity feeds, property editors, and emoji reactions without navigating away from the current context.

### Cycle (Sprint) Management

Time-boxed development cycles are managed through [`apps/space/store/cycle.store.ts`](https://github.com/makeplane/plane/blob/main/apps/space/store/cycle.store.ts), allowing teams to group issues into sprints and track progress across iterations. The system supports moving issues between cycles and visualizing sprint boundaries through the cycle store's derived values and filtering capabilities.

### Publishing and External Sharing

The publishing module, controlled by [`apps/space/store/publish.store.ts`](https://github.com/makeplane/plane/blob/main/apps/space/store/publish.store.ts), enables creation of "publish lists"—curated collections of issues that can be shared with external stakeholders. This functionality bridges internal project management with external communication, managed through the publish store's API integration.

### User Preferences and Theming

User customization resides in dedicated preference stores, accessible via hooks like `useTheme` for light/dark mode toggling. The application handles OAuth authentication flows and persists layout preferences, saved filters, and theme selections to provide a personalized experience across sessions.

### Real-Time UI Features

Plane Space implements several real-time interaction mechanisms including inline mention parsing for user notifications, automatic timers for time-tracking via [`apps/space/helpers/date-time.helper.ts`](https://github.com/makeplane/plane/blob/main/apps/space/helpers/date-time.helper.ts), and clipboard-write permission handling. These features integrate with helper utilities in [`apps/space/helpers/issue.helper.ts`](https://github.com/makeplane/plane/blob/main/apps/space/helpers/issue.helper.ts) to provide immediate feedback without full page reloads.

## API Integration and Type Safety

All frontend functionality communicates with the **Plane API** (the Django backend in `apps/api`) through typed request helpers located in `apps/space/helpers/`. The application maintains `strict` TypeScript mode throughout, ensuring type safety from API responses through to UI components. Routing configuration in [`apps/space/react-router.config.ts`](https://github.com/makeplane/plane/blob/main/apps/space/react-router.config.ts) manages client-side navigation for the single-page application architecture.

## Implementation Examples

### Fetching Issues with the useIssue Hook

The following pattern demonstrates how components access issue data through the custom hook defined in [`apps/space/hooks/store/use-issue.ts`](https://github.com/makeplane/plane/blob/main/apps/space/hooks/store/use-issue.ts):

```tsx
import { useIssue } from '@/hooks/store/use-issue';
import IssueCard from '@/components/issues/IssueCard';

export default function OpenIssues() {
  const { issues, loading, error } = useIssue({ status: 'open' });

  if (loading) return <p>Loading…</p>;
  if (error)   return <p>Failed to load issues.</p>;

  return (
    <section>
      {issues.map(issue => (
        <IssueCard key={issue.id} issue={issue} />
      ))}
    </section>
  );
}

```

### Creating Cycles via the Publish Store

This example shows cycle creation using the publish store hook at [`apps/space/hooks/store/publish/use-publish.ts`](https://github.com/makeplane/plane/blob/main/apps/space/hooks/store/publish/use-publish.ts):

```tsx
import { usePublish } from '@/hooks/store/publish/use-publish';

export default function CreateCycle() {
  const { createCycle } = usePublish();

  const handleCreate = async () => {
    await createCycle({
      name: 'Sprint 42',
      start_date: new Date(),
      end_date: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000),
    });
  };

  return <button onClick={handleCreate}>New Cycle</button>;
}

```

### Theme Switching Implementation

User preferences are managed through dedicated hooks, as shown in this theme toggle implementation:

```tsx
import { useTheme } from '@/hooks/store/use-theme';

export default function ThemeToggle() {
  const { theme, toggleTheme } = useTheme();

  return (
    <button onClick={toggleTheme}>
      Switch to {theme === 'light' ? 'dark' : 'light'} mode
    </button>
  );
}

```

## Summary

- **Plane Space** is a React/TypeScript single-page application serving as the frontend for the Plane project management platform, located in `apps/space/` of the `makeplane/plane` repository
- The architecture relies on **MobX stores** ([`issue.store.ts`](https://github.com/makeplane/plane/blob/main/issue.store.ts), [`cycle.store.ts`](https://github.com/makeplane/plane/blob/main/cycle.store.ts), [`publish.store.ts`](https://github.com/makeplane/plane/blob/main/publish.store.ts)) for centralized state management, exposed to components through custom hooks like `useIssue` and `useCycle`
- Core functionality includes **issue tracking** with peek-over-view details, **cycle management** for sprints, **publishing lists** for external sharing, and comprehensive **user preference** handling
- The application communicates with a Django backend API using typed helpers in `apps/space/helpers/` and maintains strict TypeScript type safety throughout
- UI components leverage Tailwind CSS and `@plane/ui`, with real-time features including mention parsing, emoji reactions, and automatic time tracking

## Frequently Asked Questions

### What is the primary purpose of the Plane Space application?

Plane Space serves as the frontend client for Plane, an open-source, self-hosted project planning tool. It is a single-page React application written in TypeScript that implements the complete user interface for managing projects, issues, cycles, and user settings, communicating with the Django-based Plane API backend.

### How does Plane Space manage application state?

Plane Space uses **MobX** for centralized, reactive state management. The stores located in `apps/space/store/` (including [`issue.store.ts`](https://github.com/makeplane/plane/blob/main/issue.store.ts), [`cycle.store.ts`](https://github.com/makeplane/plane/blob/main/cycle.store.ts), and [`publish.store.ts`](https://github.com/makeplane/plane/blob/main/publish.store.ts)) encapsulate API calls, caching logic, and derived values. These stores are exposed to React components through custom hooks in `apps/space/hooks/store/` that handle data fetching, timers, and intersection observers.

### Can Plane Space be deployed independently of the Plane API?

While Plane Space is a separate application within the `apps/space/` directory, it is designed to function as the frontend client for the Plane API backend located in `apps/api/`. The application requires the Django backend to handle data persistence, authentication via OAuth, and business logic, making it dependent on the full Plane stack for operation.

### What styling and component system does Plane Space use?

Plane Space utilizes **Tailwind CSS** for utility-first styling alongside a custom internal component library called `@plane/ui`. The component layer in `apps/space/components/` includes specialized views like the issue peek-over-view in [`apps/space/components/issues/peek-overview/issue-details.tsx`](https://github.com/makeplane/plane/blob/main/apps/space/components/issues/peek-overview/issue-details.tsx) and navigation headers in [`apps/space/components/views/header.tsx`](https://github.com/makeplane/plane/blob/main/apps/space/components/views/header.tsx), all styled with Tailwind's responsive utilities.