Project Structure
Relevant source files
The following files were used as context for generating this wiki page:
The Ever Rec platform is architected as a monorepo, managed by Turborepo and PNPM workspaces. This structure houses multiple, distinct applications that work together to provide a comprehensive screen capture and sharing service. The core components include a backend API, a web-based portal, a browser extension, and a desktop application.
This monorepo approach facilitates code sharing, streamlined dependency management, and a unified development workflow across the entire platform. Each application is self-contained within the apps/ directory, with its own dependencies and build configurations, while benefiting from shared tooling and scripts defined at the root level.
Monorepo Architecture
The project utilizes a monorepo strategy to manage its various applications and packages. This is orchestrated by PNPM Workspaces and Turborepo for efficient build and task execution.
Sources: README.md:92-99, package.json:38-45
Directory Layout
The high-level structure of the monorepo is organized into an apps directory, which contains the main applications of the platform.
The following diagram illustrates the main applications within the monorepo.
Sources: README.md:94-99
Core Applications
The monorepo contains four primary applications, each serving a distinct purpose within the Ever Rec ecosystem.
| Application | Path | Description |
|---|---|---|
api | apps/api/ | The backend API server, built with NestJS. |
portal | apps/portal/ | The main web UI portal, built with Next.js. |
desktop | apps/desktop/ | The cross-platform desktop application (Electron). |
extensions | apps/extensions/ | The browser extension. |
Sources: README.md:94-99
Application Details
Each application in the apps directory is a standalone project with its own technology stack and responsibilities.
API (ever-rec-api)
The API is a backend service built with the NestJS framework. It handles business logic, data persistence with Firebase, and communication with other services.
Sources: apps/api/package.json, README.md:79-81
Key Dependencies
- Framework:
@nestjs/core,@nestjs/common - Database/Auth:
firebase-admin,@nestjs/jwt - API Documentation:
@nestjs/swagger - Real-time Communication:
@nestjs/websockets,socket.io - Integrations:
@slack/bolt,googleapis,dropbox-v2-api
Sources: apps/api/package.json:30-61
Bootstrap Process
The API server is initialized in apps/api/src/main.ts. The bootstrap process configures CORS, sets a global API prefix, enables Swagger for API documentation, and starts listening on the configured port.
This diagram shows the startup sequence of the NestJS API server.
Sources: apps/api/src/main.ts:12-53
Web Portal (ever-rec-portal)
The portal is the main frontend application, providing the user-facing web interface. It is built using Next.js and React.
Sources: apps/portal/package.json, README.md:83-88
Key Dependencies
- Framework:
next,react,react-dom - UI Components:
antd,@ant-design/icons - Styling:
tailwindcss,sass,styled-components - State Management/Data Fetching:
react-redux,swr - Internationalization:
i18next,react-i18next
Sources: apps/portal/package.json:16-63
Browser Extension (ever-rec-extension)
The extensions application is a browser extension that provides screen capture and recording functionality directly within the user's browser.
Sources: apps/extensions/package.json, README.md:98
Build Process & Structure
The extension is built using Webpack, as configured in apps/extensions/webpack.config.js. This file defines the entry points for different parts of the extension, such as the background script, content scripts, and UI panels.
The manifest.json file defines the core properties of the extension, including permissions, background service worker, content scripts, and UI actions.
This diagram shows how Webpack and the manifest file define the extension's structure.
Key Components
manifest.json: Defines permissions (desktopCapture,storage,tabs), the background service worker (background.js), content scripts, and the popup UI.webpack.config.js: Configures the build process with entry points forbackground,content/content,popup/popup, andpanel/panel. It usesesbuild-loaderfor TypeScript/JavaScript compilation and handles various assets like CSS, SASS, and images.- Internationalization: The extension supports multiple languages, with translation files located in
apps/extensions/i18n/locales/, such asen.jsonandzh.json.
Sources: apps/extensions/src/manifest.json, apps/extensions/webpack.config.js, apps/extensions/i18n/locales/zh.json
Development and Build Workflow
The monorepo uses pnpm and Turborepo to manage development tasks and builds. Scripts are defined in the root package.json to run commands across all applications.
Key Scripts
The following scripts are available at the root of the project to manage the entire platform.
| Script | Description |
|---|---|
pnpm dev | Starts all applications in development mode. |
pnpm dev:<app> | Starts a specific application (e.g., dev:api) in development mode. |
pnpm build | Builds all applications for production. |
pnpm build:<app> | Builds a specific application (e.g., build:portal) for production. |
pnpm lint | Lints all code within the monorepo. |
pnpm clean | Removes build artifacts (dist folders) from all packages. |
Sources: package.json:16-30
Environment Configuration
Each application manages its environment variables through .env files. A .env.sample file is provided in each app's directory as a template. Developers are expected to copy this to a new file (.env.dev, .env.prod, or .env.local) to configure the application for their environment.
Example Setup for api:
# For development
cp apps/api/.env.sample apps/api/.env.dev
Example Setup for portal:
cp apps/portal/.env.sample apps/portal/.env.local
Sources: README.md:162-211
Internationalization (i18n)
The project is designed to support multiple languages, with English (en) and Chinese (zh) being present in the codebase. Both the portal and extensions applications have dedicated directories for locale files.
- Portal Locales:
apps/portal/i18n/locales/ - Extension Locales:
apps/extensions/i18n/locales/
The translation files use a key-value JSON format.
Example from apps/portal/i18n/locales/en.json:
{
"workspace": {
"inviteTeammates": "Invite Teammates",
"createWorkspace": "Create Workspace",
"teamsOverview": "Teams Overview"
},
"header": {
"searchFiles": "Search files...",
"help": "Help Center",
"notifications": "Notifications"
}
}
Sources: apps/portal/i18n/locales/en.json, apps/extensions/i18n/locales/zh.json