System Architecture Overview
Relevant source files
The following files were used as context for generating this wiki page:The Ever Rec platform is an all-in-one solution for screen capturing, recording, and media sharing. It is architected as a monorepo comprising several distinct but interconnected applications. This structure allows for shared code, streamlined development, and consistent tooling across the web platform, browser extensions, and backend services. The system leverages a modern technology stack, including TypeScript, React/Next.js, and NestJS, with Firebase providing core backend services like authentication, database, and storage.
The architecture is designed to be cross-platform, with a web-based portal, a Chrome extension, and a desktop application. This provides users with a flexible workflow for capturing and managing their media. The backend is built to handle secure uploads, media processing, and integrations with various third-party services like Slack, Jira, and Trello.
Sources: README.md:10-21
Monorepo Structure
The project is managed as a monorepo using Turborepo, which orchestrates the build and development processes for all applications and packages within the repository. The primary applications are located in the apps/ directory.
Sources: README.md:106-107, package.json:42-48
This diagram shows the main applications within the apps directory of the monorepo.
apps/api: A NestJS-based API server that handles business logic, data processing, and communication with Firebase and third-party services.apps/portal: The main web application, built with Next.js and React, providing the user interface for managing media, workspaces, and settings.apps/desktop: An Electron-based desktop application for continuous screen capture and video compilation.apps/extensions: Browser extensions (e.g., for Chrome) that provide in-browser screen capture and recording functionality.
Sources: README.md:110-115
Build & Dependency Management
Turborepo is configured in turbo.json to manage the dependency graph and task pipelines for the monorepo. This ensures that applications are built in the correct order and that tasks like linting, building, and development servers can be run efficiently from the root.
| Task | Description |
|---|---|
dev | Starts all applications in development mode. |
build | Builds all applications for production. |
lint | Runs the linter across all packages. |
clean | Removes build artifacts (dist and .next folders). |
Sources: turbo.json:3-23, package.json:17-29
This diagram illustrates how the root pnpm scripts trigger Turborepo to run tasks on individual applications.
Sources: package.json:17-23
Technology Stack
The platform utilizes a range of modern technologies for its frontend, backend, and development tooling.
| Category | Technology | Application(s) |
|---|---|---|
| Common | TypeScript | All |
| Backend | NestJS, Node.js, Firebase Admin | api |
| Frontend | Next.js, React, Tailwind CSS, Ant Design, SASS | portal, extensions |
| Desktop | Electron, Angular | desktop |
| Tooling | Turborepo, PNPM, Webpack, esbuild | All |
Sources: README.md:88-107, apps/api/package.json, apps/portal/package.json, apps/extensions/package.json
Core Components
High-Level Architecture
The following diagram provides a high-level overview of the system's components and their interactions.
This diagram shows how user-facing clients interact with the backend API, which in turn communicates with Firebase and other third-party services.
Sources: README.md:92-93, README.md:204-210, apps/api/package.json:44-80
API Server (apps/api)
The API server is a critical component built with the NestJS framework. It exposes a REST API for the client applications and handles all server-side logic.
Key Responsibilities:
- User authentication and authorization.
- Managing media metadata.
- Processing video uploads and interacting with services like Mux.
- Handling integrations with third-party platforms (Jira, Trello, Slack, etc.).
- Securely interacting with Firebase services using the Admin SDK.
Key Dependencies:
@nestjs/core,@nestjs/common: Core framework.firebase-admin: For backend communication with Firebase.@mux/mux-node: For video processing.@slack/bolt: For Slack integration.googleapis: For Google Drive integration.dropbox-v2-api: For Dropbox integration.axios,nestjs-http-promise: For making HTTP requests to external APIs (like Atlassian).
Sources: apps/api/package.json:44-80, apps/api/src/module/atlassian/atlassian.service.ts:1-20
Web Portal (apps/portal)
The web portal is the main user interface, built with Next.js. It allows users to manage their account, view and organize their uploaded images and videos, manage workspaces, and configure integrations.
Key Features:
- Dashboard for viewing media.
- Image and video annotation (using
konva). - Workspace and team management.
- Integration settings pages.
- Real-time communication via
socket.io-client. - Internationalization support (
i18next).
Sources: apps/portal/package.json:20-65, apps/portal/i18n/locales/en.json
Browser Extension (apps/extensions)
The browser extension provides the core functionality of screen and tab recording directly within the browser.
Key Components:
background.js: The service worker that manages the extension's state, handles events, and communicates with the API.content/content.ts: A content script injected into web pages to enable DOM interaction.popup/popup.tsx: The React component for the extension's popup UI, which appears when the extension icon is clicked.panel/panel.tsx: A more extensive UI panel for displaying user media, settings, and other features.
Sources: apps/extensions/webpack.config.js:15-21, apps/extensions/src/manifest.json:29-45
The manifest.json file defines the permissions required for the extension to function, including:
activeTab,tabs,scripting: To interact with browser tabs.cookies: To manage authentication sessions.storage: For local extension storage.desktopCapture,tabCapture: To capture the screen or individual tabs.downloads: To save files to the user's disk.
Sources: apps/extensions/src/manifest.json:13-23
Integrations
The platform integrates with several third-party services to extend its functionality. These integrations are primarily managed by the api service.
Firebase Integration
Firebase is used as the primary Backend-as-a-Service (BaaS) for several core features:
- Authentication: Manages user sign-up and sign-in using providers like Google and Email/Password.
- Realtime Database: Stores application data like user profiles and media metadata.
- Storage: Securely stores user-uploaded images and videos in a Firebase Storage bucket.
Sources: README.md:182-202
Atlassian Integration (Jira & Trello)
The system allows users to create Jira issues and Trello cards directly from captured media. The authentication flow uses OAuth 2.0, and the API interaction is handled by the AtlassianService.
The following sequence diagram illustrates the process of creating a Jira issue with an attachment.
This diagram shows the flow for creating a Jira issue, from the initial client request to the final response.
Sources: apps/api/src/module/atlassian/atlassian.service.ts:25-103
Security
Security is a key consideration. All client-server communication in a production environment is expected to be encrypted using HTTPS/WSS. The SECURITY.md file outlines the policy for responsible disclosure of security vulnerabilities.
Sources: SECURITY.md:6-12