/ever-co/ever-rec

Wiki directory

Browse AI-generated documentation for any repository.

Welcome to Ever Rec

Relevant source files

The following files were used as context for generating this wiki page:

Ever® Rec™ is an all-in-one platform for capturing, annotating, and sharing screen, webcam, and microphone recordings. It is designed to be a versatile tool, available as a standalone web application, a Chrome extension, and a desktop application to fit various user workflows. The platform is currently in an active development stage.

The core functionality revolves around screen capture and recording, with features for storing, annotating, and securely sharing the generated images and videos. The desktop version enhances this by converting continuous screenshots into high-quality videos, making it suitable for tutorials, gameplay recording, and workflow tracking.

Sources: README.md:9-22

Architecture and Project Structure

The Ever Rec platform is built as a monorepo managed by Turborepo. This structure contains several distinct applications that work together to provide the full suite of features.

Sources: README.md:120-121, package.json:4-6

This diagram illustrates the high-level structure of the monorepo.

Generating architecture diagram...

Sources: README.md:123-128

Applications

The monorepo is divided into the following primary applications:

Application	Path	Description
API Server	`apps/api/`	The backend service built with NestJS, handling business logic, database interactions, and external service integrations.
Web Portal	`apps/portal/`	The main web user interface, built with Next.js and React.
Desktop App	`apps/desktop/`	The cross-platform desktop application built with Electron.
Browser Extensions	`apps/extensions/`	The browser extension, primarily for Chrome, providing in-browser capture capabilities.

Sources: README.md:125-128

Technology Stack

The platform utilizes a modern technology stack for its different components.

Category	Technology
Common	TypeScript
Backend	Node.js, NestJS, Firebase
Frontend	Next.js, React, Tailwind CSS, SASS, Ant Design
Desktop App	Angular, Electron
Dev Tools	Turborepo, PNPM

Sources: README.md:104-121, package.json:56

Core Features

Ever Rec provides a comprehensive set of features for media capture and management.

Feature	Description
Web-based Platform	A full-featured web application for managing media, built with React/Next.js.
Chrome Extension	Allows users to capture their screen or record video directly from the browser.
Desktop App	An Electron-based application for Windows, macOS, and Linux that supports continuous screen capture.
Screen & Mic & Webcam Capture	Captures the user's screen, microphone audio, and webcam video.
Media Storage & Sharing	Provides storage for images and videos, with annotation and secure sharing capabilities.
Secure Video Upload	Users can upload videos directly to an S3 bucket for secure storage.

Sources: README.md:25-33

System Components

API Server (`apps/api`)

The API server is the backbone of the Ever Rec platform, built using the NestJS framework. It manages user data, authentication, file processing, and integrations with third-party services.

Framework: NestJS
Authentication: Firebase Admin SDK, @nestjs/jwt for JWT handling.
Database: Firebase Realtime Database.
Storage: Firebase Storage for direct uploads.
Integrations: Includes services for Atlassian (Jira, Trello), Slack, Dropbox, and Google Drive.
Real-time Communication: Uses @nestjs/websockets and socket.io for real-time features.

Sources: apps/api/package.json:33-72, README.md:109-111

Atlassian Integration (Jira & Trello)

The API provides integration with Atlassian products like Jira and Trello, allowing users to create issues and cards directly from captured media.

The following sequence diagram shows the flow for creating a Jira issue with an attachment.

Generating architecture diagram...

This flow is managed by AtlassianService and AtlassianApiService.

AtlassianService (atlassian.service.ts): Contains the business logic for handling requests from the user, coordinating with other services like ImageService or VideoService, and formatting data for the Atlassian API.
AtlassianApiService (atlassian.api.service.ts): A lower-level service that directly communicates with the Atlassian REST APIs for OAuth, token management, and resource creation (issues, attachments).

Sources: apps/api/src/module/atlassian/atlassian.service.ts:25-108, apps/api/src/services/atlassian/atlassian.api.service.ts:121-161

Web Portal (`apps/portal`)

The portal is the main user-facing web application, built with Next.js. It allows users to view, manage, and share their captured images and videos.

Framework: Next.js, React
UI Components: Ant Design, Tailwind CSS
State Management: Redux
Graphics/Annotation: Uses konva for canvas-based interactions.
Video Playback: hls.js and plyr-react are used for video streaming and playback.
Internationalization (i18n): The portal supports multiple languages, including English and Chinese, as evidenced by locale files.

Sources: apps/portal/package.json:17-64, apps/portal/i18n/locales/en.json, apps/portal/i18n/locales/zh.json

Browser Extension (`apps/extensions`)

The browser extension provides the core in-browser capture functionality. It is built as a standard Chrome extension and packed using Webpack.

Manifest Version: 3
Core Components:
- background.js: Service worker for background tasks.
- content.js: Injected into web pages to interact with the DOM.
- popup.html: The main UI when the extension icon is clicked.
- panel.html: A more extensive UI for managing media within the extension.
Bundler: Webpack is used to build the extension for different environments (dev, prod). The configuration defines entry points for background, content, popup, and panel scripts.

Sources: apps/extensions/src/manifest.json:6-20, apps/extensions/webpack.config.js:13-19

Extension Permissions

The extension requires several permissions to function correctly, as defined in manifest.json.

Permission	Reason
`activeTab`, `tabs`	To interact with the currently active tab.
`cookies`	To manage authentication sessions with the backend API.
`storage`	For local extension storage.
`desktopCapture`, `tabCapture`	To capture the screen, specific tabs, or the entire desktop.
`downloads`, `downloads.shelf`	To save captured media to the user's disk.
`scripting`	To execute scripts in the context of web pages.
`host_permissions: ["<all_urls>"]`	Allows the extension to run on all websites.

Sources: apps/extensions/src/manifest.json:11-21

Getting Started

To set up the development environment, you need Node.js v20+ and PNPM.

Clone the repository: `git clone https://github.com/ever-co/ever-rec%60
Install dependencies: pnpm install
Configure environments: Copy the .env.sample files in each application (apps/api, apps/portal, apps/extensions) to create environment-specific configuration files (e.g., .env.dev, .env.local).
Start development servers: pnpm dev

Sources: README.md:183-200

Environment Configuration

Each application requires specific environment variables to be set.

API (`apps/api/.env.dev`)

# Firebase Configuration
FIREBASE_API_KEY=your_api_key
FIREBASE_PROJECT_ID=your_project_id
FIREBASE_STORAGE_BUCKET=your_project.appspot.com
# ... and other Firebase settings

# Firebase Admin Configuration
FIREBASE_ADMIN_PRIVATE_KEY=your_private_key
FIREBASE_ADMIN_CLIENT_EMAIL=your_client_email

# Extension Configuration
EXTENSION_ID=your_extension_id

Sources: README.md:208-226

Portal (`apps/portal/.env.local`)

# API Configuration
NEXT_PUBLIC_API_BASE_URL=http://localhost:3000
NEXT_PUBLIC_WEBSITE_URL=http://localhost:4200

# Extension Configuration
EXTENSION_ID=your_extension_id

Sources: README.md:232-239

Extensions (`apps/extensions/.env.dev`)

EXTENSION_ID=your_extension_id
API_BASE_URL=http://localhost:3000
WEBSITE_URL=http://localhost:4200

Sources: README.md:245-252

Security

The project emphasizes security by recommending that all client-to-server communications be encrypted using HTTPS/WSS/SSL in production. Security vulnerabilities should be disclosed responsibly by emailing security@ever.co rather than creating a public GitHub issue.

Sources: SECURITY.md:3-10

Summary

Ever Rec is a multifaceted screen capture and recording platform structured as a modern monorepo. It combines a NestJS backend, a Next.js web portal, and a browser extension to deliver a seamless user experience for creating, managing, and sharing media. Its architecture is designed for extensibility, with clear separation of concerns between the different applications and integrations with key third-party services like Firebase and Atlassian.

Welcome to Ever Rec

Relevant source files

The following files were used as context for generating this wiki page:

Sources: README.md:9-22

Architecture and Project Structure

The Ever Rec platform is built as a monorepo managed by Turborepo. This structure contains several distinct applications that work together to provide the full suite of features.

Sources: README.md:120-121, package.json:4-6

This diagram illustrates the high-level structure of the monorepo.

Generating architecture diagram...

Sources: README.md:123-128

Applications

The monorepo is divided into the following primary applications:

Application	Path	Description
API Server	`apps/api/`	The backend service built with NestJS, handling business logic, database interactions, and external service integrations.
Web Portal	`apps/portal/`	The main web user interface, built with Next.js and React.
Desktop App	`apps/desktop/`	The cross-platform desktop application built with Electron.
Browser Extensions	`apps/extensions/`	The browser extension, primarily for Chrome, providing in-browser capture capabilities.

Sources: README.md:125-128

Technology Stack

The platform utilizes a modern technology stack for its different components.

Category	Technology
Common	TypeScript
Backend	Node.js, NestJS, Firebase
Frontend	Next.js, React, Tailwind CSS, SASS, Ant Design
Desktop App	Angular, Electron
Dev Tools	Turborepo, PNPM

Sources: README.md:104-121, package.json:56

Core Features

Ever Rec provides a comprehensive set of features for media capture and management.

Feature	Description
Web-based Platform	A full-featured web application for managing media, built with React/Next.js.
Chrome Extension	Allows users to capture their screen or record video directly from the browser.
Desktop App	An Electron-based application for Windows, macOS, and Linux that supports continuous screen capture.
Screen & Mic & Webcam Capture	Captures the user's screen, microphone audio, and webcam video.
Media Storage & Sharing	Provides storage for images and videos, with annotation and secure sharing capabilities.
Secure Video Upload	Users can upload videos directly to an S3 bucket for secure storage.

Sources: README.md:25-33

System Components

API Server (`apps/api`)

The API server is the backbone of the Ever Rec platform, built using the NestJS framework. It manages user data, authentication, file processing, and integrations with third-party services.

Framework: NestJS
Authentication: Firebase Admin SDK, @nestjs/jwt for JWT handling.
Database: Firebase Realtime Database.
Storage: Firebase Storage for direct uploads.
Integrations: Includes services for Atlassian (Jira, Trello), Slack, Dropbox, and Google Drive.
Real-time Communication: Uses @nestjs/websockets and socket.io for real-time features.

Sources: apps/api/package.json:33-72, README.md:109-111

Atlassian Integration (Jira & Trello)

The API provides integration with Atlassian products like Jira and Trello, allowing users to create issues and cards directly from captured media.

The following sequence diagram shows the flow for creating a Jira issue with an attachment.

Generating architecture diagram...

This flow is managed by AtlassianService and AtlassianApiService.

AtlassianService (atlassian.service.ts): Contains the business logic for handling requests from the user, coordinating with other services like ImageService or VideoService, and formatting data for the Atlassian API.
AtlassianApiService (atlassian.api.service.ts): A lower-level service that directly communicates with the Atlassian REST APIs for OAuth, token management, and resource creation (issues, attachments).

Sources: apps/api/src/module/atlassian/atlassian.service.ts:25-108, apps/api/src/services/atlassian/atlassian.api.service.ts:121-161

Web Portal (`apps/portal`)

The portal is the main user-facing web application, built with Next.js. It allows users to view, manage, and share their captured images and videos.

Framework: Next.js, React
UI Components: Ant Design, Tailwind CSS
State Management: Redux
Graphics/Annotation: Uses konva for canvas-based interactions.
Video Playback: hls.js and plyr-react are used for video streaming and playback.
Internationalization (i18n): The portal supports multiple languages, including English and Chinese, as evidenced by locale files.

Sources: apps/portal/package.json:17-64, apps/portal/i18n/locales/en.json, apps/portal/i18n/locales/zh.json

Browser Extension (`apps/extensions`)

The browser extension provides the core in-browser capture functionality. It is built as a standard Chrome extension and packed using Webpack.

Manifest Version: 3
Core Components:
- background.js: Service worker for background tasks.
- content.js: Injected into web pages to interact with the DOM.
- popup.html: The main UI when the extension icon is clicked.
- panel.html: A more extensive UI for managing media within the extension.
Bundler: Webpack is used to build the extension for different environments (dev, prod). The configuration defines entry points for background, content, popup, and panel scripts.

Sources: apps/extensions/src/manifest.json:6-20, apps/extensions/webpack.config.js:13-19

Extension Permissions

The extension requires several permissions to function correctly, as defined in manifest.json.

Permission	Reason
`activeTab`, `tabs`	To interact with the currently active tab.
`cookies`	To manage authentication sessions with the backend API.
`storage`	For local extension storage.
`desktopCapture`, `tabCapture`	To capture the screen, specific tabs, or the entire desktop.
`downloads`, `downloads.shelf`	To save captured media to the user's disk.
`scripting`	To execute scripts in the context of web pages.
`host_permissions: ["<all_urls>"]`	Allows the extension to run on all websites.

Sources: apps/extensions/src/manifest.json:11-21

Getting Started

To set up the development environment, you need Node.js v20+ and PNPM.

Clone the repository: `git clone https://github.com/ever-co/ever-rec%60
Install dependencies: pnpm install
Configure environments: Copy the .env.sample files in each application (apps/api, apps/portal, apps/extensions) to create environment-specific configuration files (e.g., .env.dev, .env.local).
Start development servers: pnpm dev

Sources: README.md:183-200

Environment Configuration

Each application requires specific environment variables to be set.

API (`apps/api/.env.dev`)

# Firebase Configuration
FIREBASE_API_KEY=your_api_key
FIREBASE_PROJECT_ID=your_project_id
FIREBASE_STORAGE_BUCKET=your_project.appspot.com
# ... and other Firebase settings

# Firebase Admin Configuration
FIREBASE_ADMIN_PRIVATE_KEY=your_private_key
FIREBASE_ADMIN_CLIENT_EMAIL=your_client_email

# Extension Configuration
EXTENSION_ID=your_extension_id

Sources: README.md:208-226

Portal (`apps/portal/.env.local`)

# API Configuration
NEXT_PUBLIC_API_BASE_URL=http://localhost:3000
NEXT_PUBLIC_WEBSITE_URL=http://localhost:4200

# Extension Configuration
EXTENSION_ID=your_extension_id

Sources: README.md:232-239

Extensions (`apps/extensions/.env.dev`)

EXTENSION_ID=your_extension_id
API_BASE_URL=http://localhost:3000
WEBSITE_URL=http://localhost:4200

Sources: README.md:245-252

Security

Sources: SECURITY.md:3-10

Welcome to Ever Rec

Architecture and Project Structure

Applications

Technology Stack

Core Features

System Components

API Server (apps/api)

Atlassian Integration (Jira & Trello)

Web Portal (apps/portal)

Browser Extension (apps/extensions)

Extension Permissions

Getting Started

Environment Configuration

API (apps/api/.env.dev)

Portal (apps/portal/.env.local)

Extensions (apps/extensions/.env.dev)

Security

Summary

Welcome to Ever Rec

Architecture and Project Structure

Applications

Technology Stack

Core Features

System Components

API Server (apps/api)

Atlassian Integration (Jira & Trello)

Web Portal (apps/portal)

Browser Extension (apps/extensions)

Extension Permissions

Getting Started

Environment Configuration

API (apps/api/.env.dev)

Portal (apps/portal/.env.local)

Extensions (apps/extensions/.env.dev)

Security

Summary

API Server (`apps/api`)

Web Portal (`apps/portal`)

Browser Extension (`apps/extensions`)

API (`apps/api/.env.dev`)

Portal (`apps/portal/.env.local`)

Extensions (`apps/extensions/.env.dev`)

API Server (`apps/api`)

Web Portal (`apps/portal`)

Browser Extension (`apps/extensions`)

API (`apps/api/.env.dev`)

Portal (`apps/portal/.env.local`)

Extensions (`apps/extensions/.env.dev`)