TheOpenPresenter
  • Introduction
    • Welcome
    • Motivation & Challenges
    • System Architecture
    • Terminologies
    • Server Communication
    • Project Topology
  • Development
    • Quickstart
    • Static files
    • Media Storage
  • Plugins
    • Introduction
    • Official Plugins
      • Google Slides
      • Lyrics Presenter
        • Lyrics compatibility
      • Video Player
      • Audio Recorder
    • Developing a Plugin
      • Plugin API
        • Yjs
          • Awareness
          • Scene
          • Renderer
        • Backend
          • Yjs Handler
          • Loading Frontend
          • Security
        • Frontend
          • Remote
          • Renderer
        • Media
          • Server Plugin API
          • Frontend
            • Tus
            • Form Data
        • TRPC
        • Database
      • Audio
      • Viewer State
      • Notifying Errors
      • Caveats
        • Sharing dependencies
        • Cross-over between plugins
      • Performance
  • API Reference
    • Plugin Context
  • Guide
    • Playing Audio
    • Listen to scene changes
  • Scratch Pad
    • Ambition
    • Background music
  • Environment Variables
  • External
    • Page 1
Powered by GitBook
On this page
  • Core Components
  • Backend Server
  • Frontend Applications
  • Plugin System
  1. Introduction

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.

Core Components

Backend Server

  • Built with Node.js

  • Implemented in TypeScript

  • Almost everything will go through the server

We will eventually package the server so that it can be run locally by users. This will enable local use without any internet connection.

Frontend Applications

  1. Management Interface

    • Built with Next.js

    • 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

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.

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

PreviousMotivation & ChallengesNextTerminologies

Last updated 7 months ago