The Whiteboard Service is a core backend module within the ever-rec platform responsible for managing all aspects of collaborative whiteboards. It provides a RESTful API for creating, retrieving, updating, and deleting whiteboards and their associated teams. The service uses Firebase Realtime Database as its primary data store.

This service is consumed by the ever-rec-portal frontend application to deliver the whiteboard functionality to end-users. It handles user authentication via the AuthGuard and manages data persistence, ensuring that user-specific whiteboard data is handled securely and efficiently. The module also includes functionality for managing teams, allowing for collaborative features on whiteboards.

Architecture

The WhiteboardsModule encapsulates all whiteboard-related logic, including controllers for handling HTTP requests and services for business logic and data access.

Sources: apps/api/src/module/whiteboards/whiteboards.module.ts

Module Components

The module is composed of the following key NestJS components:

Component	Type	Description
`WhiteboardController`	`Controller`	Exposes API endpoints for whiteboard CRUD operations.
`WhiteboardService`	`Service`	Contains the business logic for managing individual whiteboards. Interacts with Firebase.
`WhiteboardTeamController`	`Controller`	Exposes API endpoints for managing whiteboard teams and members.
`WhiteboardTeamService`	`Service`	Contains the business logic for team creation, updates, and member management. Interacts with Firebase.
`AuthModule`	`Import`	Provides authentication guards to protect the endpoints.

Sources: apps/api/src/module/whiteboards/whiteboards.module.ts:9-12

Component Diagram

This diagram illustrates the structure of the WhiteboardsModule and its primary components.

Generating architecture diagram...

Sources: apps/api/src/module/whiteboards/whiteboards.module.ts, apps/api/src/module/whiteboards/controllers/whiteboard.controller.ts, apps/api/src/module/whiteboards/controllers/teams.controller.ts

Data Models

The service relies on two main data models: IWhiteboard for the whiteboards themselves and IWhiteboardTeam for collaborative teams.

IWhiteboard Interface

This interface defines the structure of a whiteboard object stored in Firebase.

Field	Type	Description
`id`	`string`	Unique identifier for the whiteboard.
`name`	`string`	The name of the whiteboard.
`admin`	`string`	The UID of the user who created the whiteboard.
`created`	`number`	Timestamp (ms) of when the whiteboard was created.
`trash`	`boolean`	Flag indicating if the whiteboard is in the trash.
`favorite`	`boolean`	Flag indicating if the whiteboard is marked as a favorite.
`isPublic`	`boolean`	Flag indicating if the whiteboard is publicly shareable.
`thumbnail`	`string?`	Optional URL for the whiteboard's thumbnail image.

Sources: apps/api/src/module/whiteboards/interfaces/Whiteboard.ts:1-10, apps/portal/app/interfaces/IWhiteboard.ts:1-10

IWhiteboardTeam Interface

This interface defines the structure for a whiteboard team.

Field	Type	Description
`id`	`string`	Unique identifier for the team.
`admin`	`string`	The UID of the user who created the team.
`name`	`string`	The name of the team.
`members`	`{ id: string }[]`	An array of member objects, each containing a UID.

Sources: apps/api/src/module/whiteboards/services/teams.service.ts:19-22

Database Schema

The following ER diagram shows the relationship between Users, Whiteboards, and Teams in the Firebase Realtime Database.

Generating architecture diagram...

Sources: apps/api/src/module/whiteboards/services/whiteboards.service.ts:15-21, 58-60, apps/api/src/module/whiteboards/services/teams.service.ts:13-18, 40-44

API Endpoints

The service exposes endpoints for managing whiteboards and teams. All endpoints are protected by an AuthGuard, except for get-shared.

Whiteboard API (`/api/v1/whiteboards`)

Method	Endpoint	Description
`POST`	`/new`	Creates a new whiteboard for the authenticated user.
`GET`	`/all`	Retrieves all whiteboards associated with the authenticated user.
`GET`	`/:whiteboardId/get`	Retrieves a specific whiteboard by its ID if the user has access.
`GET`	`/:whiteboardId/get-shared`	Retrieves a specific whiteboard by ID if it is public (`isPublic: true`).
`PUT`	`/:whiteboardId/update`	Updates a whiteboard's properties (`name`, `trash`, `favorite`, `isPublic`).
`DELETE`	`/:whiteboardId/delete`	Deletes a whiteboard.

Sources: apps/api/src/module/whiteboards/controllers/whiteboard.controller.ts:17-80, apps/portal/app/services/api/whiteboards.ts:5-60

Whiteboard Teams API (`/api/v1/whiteboards/teams`)

Method	Endpoint	Description
`POST`	`/add-team/:teamName`	Creates a new team with the authenticated user as the admin.
`GET`	`/`	Retrieves all teams administered by the authenticated user.
`GET`	`/:teamId/members`	Retrieves all members of a specific team.
`PUT`	`/:teamId`	Updates a team's name and/or avatar/thumbnail images.
`PUT`	`/leave-team/:teamId/:teamAdminId`	Allows a user to leave a team.
`DELETE`	`/delete/:teamId`	Deletes a team and its associated storage files.
`DELETE`	`/delete-member/:teamId/:memberId`	Removes a member from a team. The admin cannot be removed.

Sources: apps/api/src/module/whiteboards/controllers/teams.controller.ts:25-111

Core Workflows

Creating a New Whiteboard

This sequence diagram shows the process of creating a new whiteboard, from the frontend request to the database transaction.

Generating architecture diagram...

Sources: apps/portal/pages/media/whiteboards.tsx:33-40, apps/portal/app/services/whiteboards.ts:9-13, apps/api/src/module/whiteboards/services/whiteboards.service.ts:23-66

Updating a Whiteboard

The updateWhiteboardData method in WhiteboardService handles partial updates to a whiteboard document. It checks if the user owns the whiteboard before applying changes for properties like name, trash, favorite, and isPublic.

// apps/api/src/module/whiteboards/services/whiteboards.service.ts:133-157
async updateWhiteboardData(
    uid: string,
    whiteboardId: string,
    trash: boolean,
    favorite: boolean,
    isPublic: boolean,
    name?: string,
  ): Promise<IDataResponse<IWhiteboard | null>> {
    // ... user & whiteboard checks ...
    const whiteboardRef = db.ref(`${this.rootDb}/${whiteboardId}`);
    await whiteboardRef.update({
      ...(name !== undefined ? { name } : {}),
      ...(trash !== undefined ? { trash } : {}),
      ...(favorite !== undefined ? { favorite } : {}),
      ...(isPublic !== undefined ? { isPublic } : {}),
    });
    // ... return updated whiteboard ...
}

This single endpoint is used for multiple actions on the frontend, such as renaming, sharing, favoriting, and moving a whiteboard to the trash.

Sources: apps/api/src/module/whiteboards/services/whiteboards.service.ts:133-157, apps/portal/components/pagesComponents/_whiteboardsScreen/WhiteboardContainer/WhiteboardCard/WhiteboardCard.tsx:90-154

Deleting a Whiteboard

Deletion is a two-step process:

The whiteboardId is removed from the user's whiteboardIds array located at users/{uid}/whiteboardIds.
The whiteboard object itself is removed from the whiteboards/mainCollection/{whiteboardId} path in Firebase.

This ensures that the user's reference is removed before the data is deleted, maintaining data integrity.

Sources: apps/api/src/module/whiteboards/services/whiteboards.service.ts:105-131

Frontend Integration

The ever-rec-portal application consumes the Whiteboard API through a set of service functions.

API Service Layer

The file apps/portal/app/services/api/whiteboards.ts provides a clean abstraction over the raw API calls, mapping functions directly to the NestJS controller endpoints.

// apps/portal/app/services/api/whiteboards.ts
export const createNewWhiteboardAPI = async (
  name: string,
): Promise<IDataResponse<IWhiteboard | null>> => {
  return api.post(`/api/v1/whiteboards/new?name=${name}`);
};

export const getUserWhiteboardsAPI = async (): Promise<
  IDataResponse<IWhiteboard[] | null>
> => {
  return api.get(`/api/v1/whiteboards/all`);
};

// ... other API functions

Sources: apps/portal/app/services/api/whiteboards.ts

Component-Level Usage

React components, such as WhiteboardsScreen and WhiteboardCard, use these services to fetch data and dispatch actions to the Redux store, which manages the application's state for whiteboards.

pages/media/whiteboards.tsx: On component mount, it calls fetchUserWhiteboards to populate the list of whiteboards. It also handles the creation of new whiteboards via a modal.
components/.../WhiteboardCard.tsx: This component represents a single whiteboard in the UI. It contains handlers for renaming, sharing, deleting, and favoriting a whiteboard, all of which call the respective service functions and then dispatch actions to update the Redux state.
pages/whiteboard/[whiteboardID].tsx: This page fetches a single whiteboard's data using getWhiteboardById or getWhiteboardByIdShared based on the URL query parameters, allowing users to view and edit a specific board.

Sources: apps/portal/pages/media/whiteboards.tsx:42-47, apps/portal/components/pagesComponents/_whiteboardsScreen/WhiteboardContainer/WhiteboardCard/WhiteboardCard.tsx:75-181, apps/portal/pages/whiteboard/[whiteboardID].tsx:103-128

Resources

AI code review
Bug Bench
AI coding statistics
Coding standards
Agents
Wikis

View on GitHub

Back to directory

Repository

ever-co/ever-rec

Overview

Welcome to Ever Rec Project Structure

Getting Started

Development Environment Setup Environment Configuration Firebase Setup Google OAuth Configuration

System Architecture

System Architecture Overview API Backend Architecture (NestJS)Frontend Architecture (Portal & Extension)API Pipeline Module

Backend Systems (API)

Authentication & Authorization Auth Service Orchestration Workspace & Collaboration File & Folder Management Media Upload & Processing Whiteboard Service Real-time Editor Gateway

Frontend Components (Portal & Extension)

Browser Extension Overview Screen & Camera Recording Flow Image & Video Editor Whiteboard UI Media Library UI Frontend State Management

Extensibility and Integrations

Integrations Overview Atlassian (Jira) Integration Slack Integration Video Services Integration (Mux, api.video)Gauzy Integration

Deployment & Testing

Deployment Testing Strategy

Whiteboard Service

Relevant source files

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

apps/api/src/module/whiteboards/whiteboards.module.ts
apps/api/src/module/whiteboards/controllers/whiteboard.controller.ts
apps/api/src/module/whiteboards/services/whiteboards.service.ts
apps/api/src/module/whiteboards/interfaces/Whiteboard.ts
apps/portal/app/services/api/whiteboards.ts
apps/api/src/module/whiteboards/services/teams.service.ts
apps/api/src/module/whiteboards/controllers/teams.controller.ts
apps/portal/pages/media/whiteboards.tsx
apps/portal/pages/whiteboard/[whiteboardID].tsx

Architecture

The WhiteboardsModule encapsulates all whiteboard-related logic, including controllers for handling HTTP requests and services for business logic and data access.

Sources: apps/api/src/module/whiteboards/whiteboards.module.ts

Module Components

The module is composed of the following key NestJS components:

Component	Type	Description
`WhiteboardController`	`Controller`	Exposes API endpoints for whiteboard CRUD operations.
`WhiteboardService`	`Service`	Contains the business logic for managing individual whiteboards. Interacts with Firebase.
`WhiteboardTeamController`	`Controller`	Exposes API endpoints for managing whiteboard teams and members.
`WhiteboardTeamService`	`Service`	Contains the business logic for team creation, updates, and member management. Interacts with Firebase.
`AuthModule`	`Import`	Provides authentication guards to protect the endpoints.

Sources: apps/api/src/module/whiteboards/whiteboards.module.ts:9-12

Component Diagram

This diagram illustrates the structure of the WhiteboardsModule and its primary components.

Generating architecture diagram...

Sources: apps/api/src/module/whiteboards/whiteboards.module.ts, apps/api/src/module/whiteboards/controllers/whiteboard.controller.ts, apps/api/src/module/whiteboards/controllers/teams.controller.ts

Data Models

The service relies on two main data models: IWhiteboard for the whiteboards themselves and IWhiteboardTeam for collaborative teams.

IWhiteboard Interface

This interface defines the structure of a whiteboard object stored in Firebase.

Field	Type	Description
`id`	`string`	Unique identifier for the whiteboard.
`name`	`string`	The name of the whiteboard.
`admin`	`string`	The UID of the user who created the whiteboard.
`created`	`number`	Timestamp (ms) of when the whiteboard was created.
`trash`	`boolean`	Flag indicating if the whiteboard is in the trash.
`favorite`	`boolean`	Flag indicating if the whiteboard is marked as a favorite.
`isPublic`	`boolean`	Flag indicating if the whiteboard is publicly shareable.
`thumbnail`	`string?`	Optional URL for the whiteboard's thumbnail image.

Sources: apps/api/src/module/whiteboards/interfaces/Whiteboard.ts:1-10, apps/portal/app/interfaces/IWhiteboard.ts:1-10

IWhiteboardTeam Interface

This interface defines the structure for a whiteboard team.

Field	Type	Description
`id`	`string`	Unique identifier for the team.
`admin`	`string`	The UID of the user who created the team.
`name`	`string`	The name of the team.
`members`	`{ id: string }[]`	An array of member objects, each containing a UID.

Sources: apps/api/src/module/whiteboards/services/teams.service.ts:19-22

Database Schema

The following ER diagram shows the relationship between Users, Whiteboards, and Teams in the Firebase Realtime Database.

Generating architecture diagram...

Sources: apps/api/src/module/whiteboards/services/whiteboards.service.ts:15-21, 58-60, apps/api/src/module/whiteboards/services/teams.service.ts:13-18, 40-44

API Endpoints

The service exposes endpoints for managing whiteboards and teams. All endpoints are protected by an AuthGuard, except for get-shared.

Whiteboard API (`/api/v1/whiteboards`)

Method	Endpoint	Description
`POST`	`/new`	Creates a new whiteboard for the authenticated user.
`GET`	`/all`	Retrieves all whiteboards associated with the authenticated user.
`GET`	`/:whiteboardId/get`	Retrieves a specific whiteboard by its ID if the user has access.
`GET`	`/:whiteboardId/get-shared`	Retrieves a specific whiteboard by ID if it is public (`isPublic: true`).
`PUT`	`/:whiteboardId/update`	Updates a whiteboard's properties (`name`, `trash`, `favorite`, `isPublic`).
`DELETE`	`/:whiteboardId/delete`	Deletes a whiteboard.

Sources: apps/api/src/module/whiteboards/controllers/whiteboard.controller.ts:17-80, apps/portal/app/services/api/whiteboards.ts:5-60

Whiteboard Teams API (`/api/v1/whiteboards/teams`)

Method	Endpoint	Description
`POST`	`/add-team/:teamName`	Creates a new team with the authenticated user as the admin.
`GET`	`/`	Retrieves all teams administered by the authenticated user.
`GET`	`/:teamId/members`	Retrieves all members of a specific team.
`PUT`	`/:teamId`	Updates a team's name and/or avatar/thumbnail images.
`PUT`	`/leave-team/:teamId/:teamAdminId`	Allows a user to leave a team.
`DELETE`	`/delete/:teamId`	Deletes a team and its associated storage files.
`DELETE`	`/delete-member/:teamId/:memberId`	Removes a member from a team. The admin cannot be removed.

Sources: apps/api/src/module/whiteboards/controllers/teams.controller.ts:25-111

Core Workflows

Creating a New Whiteboard

This sequence diagram shows the process of creating a new whiteboard, from the frontend request to the database transaction.

Generating architecture diagram...

Sources: apps/portal/pages/media/whiteboards.tsx:33-40, apps/portal/app/services/whiteboards.ts:9-13, apps/api/src/module/whiteboards/services/whiteboards.service.ts:23-66

Updating a Whiteboard

// apps/api/src/module/whiteboards/services/whiteboards.service.ts:133-157
async updateWhiteboardData(
    uid: string,
    whiteboardId: string,
    trash: boolean,
    favorite: boolean,
    isPublic: boolean,
    name?: string,
  ): Promise<IDataResponse<IWhiteboard | null>> {
    // ... user & whiteboard checks ...
    const whiteboardRef = db.ref(`${this.rootDb}/${whiteboardId}`);
    await whiteboardRef.update({
      ...(name !== undefined ? { name } : {}),
      ...(trash !== undefined ? { trash } : {}),
      ...(favorite !== undefined ? { favorite } : {}),
      ...(isPublic !== undefined ? { isPublic } : {}),
    });
    // ... return updated whiteboard ...
}

This single endpoint is used for multiple actions on the frontend, such as renaming, sharing, favoriting, and moving a whiteboard to the trash.

Deleting a Whiteboard

Deletion is a two-step process:

The whiteboardId is removed from the user's whiteboardIds array located at users/{uid}/whiteboardIds.
The whiteboard object itself is removed from the whiteboards/mainCollection/{whiteboardId} path in Firebase.

This ensures that the user's reference is removed before the data is deleted, maintaining data integrity.

Sources: apps/api/src/module/whiteboards/services/whiteboards.service.ts:105-131

Frontend Integration

The ever-rec-portal application consumes the Whiteboard API through a set of service functions.

API Service Layer

The file apps/portal/app/services/api/whiteboards.ts provides a clean abstraction over the raw API calls, mapping functions directly to the NestJS controller endpoints.

// apps/portal/app/services/api/whiteboards.ts
export const createNewWhiteboardAPI = async (
  name: string,
): Promise<IDataResponse<IWhiteboard | null>> => {
  return api.post(`/api/v1/whiteboards/new?name=${name}`);
};

export const getUserWhiteboardsAPI = async (): Promise<
  IDataResponse<IWhiteboard[] | null>
> => {
  return api.get(`/api/v1/whiteboards/all`);
};

// ... other API functions

Sources: apps/portal/app/services/api/whiteboards.ts

Component-Level Usage

React components, such as WhiteboardsScreen and WhiteboardCard, use these services to fetch data and dispatch actions to the Redux store, which manages the application's state for whiteboards.

pages/media/whiteboards.tsx: On component mount, it calls fetchUserWhiteboards to populate the list of whiteboards. It also handles the creation of new whiteboards via a modal.
components/.../WhiteboardCard.tsx: This component represents a single whiteboard in the UI. It contains handlers for renaming, sharing, deleting, and favoriting a whiteboard, all of which call the respective service functions and then dispatch actions to update the Redux state.
pages/whiteboard/[whiteboardID].tsx: This page fetches a single whiteboard's data using getWhiteboardById or getWhiteboardByIdShared based on the URL query parameters, allowing users to view and edit a specific board.

Resources

AI code review
Bug Bench
AI coding statistics
Coding standards
Agents
Wikis

View on GitHub

Whiteboard Service

Architecture

Module Components

Component Diagram

Data Models

IWhiteboard Interface

IWhiteboardTeam Interface

Database Schema

API Endpoints

Whiteboard API (/api/v1/whiteboards)

Whiteboard Teams API (/api/v1/whiteboards/teams)

Core Workflows

Creating a New Whiteboard

Updating a Whiteboard

Deleting a Whiteboard

Frontend Integration

API Service Layer

Component-Level Usage

Whiteboard Service

Architecture

Module Components

Component Diagram

Data Models

IWhiteboard Interface

IWhiteboardTeam Interface

Database Schema

API Endpoints

Whiteboard API (/api/v1/whiteboards)

Whiteboard Teams API (/api/v1/whiteboards/teams)

Core Workflows

Creating a New Whiteboard

Updating a Whiteboard

Deleting a Whiteboard

Frontend Integration

API Service Layer

Component-Level Usage

Whiteboard API (`/api/v1/whiteboards`)

Whiteboard Teams API (`/api/v1/whiteboards/teams`)

Whiteboard API (`/api/v1/whiteboards`)

Whiteboard Teams API (`/api/v1/whiteboards/teams`)