> For the complete documentation index, see [llms.txt](https://docs.theopenpresenter.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.theopenpresenter.com/introduction/system-architecture.md).

# System Architecture

TheOpenPresenter is a web-based application built with a modular, multi-component architecture. The system comprises a robust backend server and specialized frontend applications, each serving distinct purposes. We also wrap the system as apps/desktop software.

## Core Components

### Backend Server

* Built with Node.js
* Implemented in TypeScript
* Almost everything will go through the server

{% hint style="info" %}
We will eventually package the server so that it can be run locally by users. This will enable local use without any internet connection.
{% endhint %}

### Frontend Applications

1. **Management Interface**
   * Built with React & Vite
   * Primary functions:
     * User account management
     * Project management
     * Landing page presentation
     * System navigation
2. **Remote Control Interface**
   * Built with React & Vite
   * Serves as a wrapper for plugin-based control functionality
   * Provides presentation control capabilities
   * Designed for use on mobile devices or tablets in additional to standard desktop use
3. **Renderer Interface**
   * Built with React & Vite
   * Handles content display and rendering
   * Acts as a wrapper for plugin-based rendering functionality
   * Designed for display screens/projectors
4. **Landing page**
   * Build with Astro
   * Handles everything in the landing page

Simply put, the **Remote** is used to control the presentations. And **Renderer** is used to show the presentation. Meanwhile, the Next.js management interface is used to navigate/open/create the correct Remote & Renderer. All of them communicates with the server to get the data it needs.

{% @mermaid/diagram content="graph TD
subgraph Admin Device
MI\[Management Interface<br/>Laptop/Desktop]
end

```
subgraph Control Device
    RC[Remote Control<br/>Phone/Tablet]
end

subgraph Display Screen
    RD[Renderer<br/>TV/Projector]
end

subgraph Backend Infrastructure
    NS[Node.js Server]
    DB[(Database)]
end

MI -->|"Opens"| RD
MI -->|"Opens"| RC
MI <-->|"Project/User Data"| NS

RC -->|"Sends control commands"| NS

RD <-->|"State updates"| NS

NS <-->|Data persistence| DB

style MI fill:#f9f,stroke:#333
style RC fill:#bbf,stroke:#333
style RD fill:#bfb,stroke:#333
style NS fill:#fb9,stroke:#333

classDef device fill:#f9f,stroke:#333,stroke-width:2px
classDef display fill:#bfb,stroke:#333,stroke-width:2px
classDef server fill:#fb9,stroke:#333,stroke-width:2px" %}
```

### Plugin System

TheOpenPresenter is powered by a plugin architecture.. All presentation features (e.g., video playback, slide shows) are implemented as plugins. This means that adding a functionality like playing videos is just a plugin away. Our core system provides various API that can be used to integrated the plugin to our system.

Here's the topology of a plugin:

* **Server-Side**
  * Written in Typescript
  * Runs on the backend
  * Integrates with core system APIs
* **Client-Side**:
  * Can include both remote control and renderer aspects
  * Supports any browser-compatible frontend technology
  * Integrates seamlessly with main interfaces