Workspace & Collaboration

Relevant source files

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

• apps/api/src/module/workspace/services/workspace.service.ts
• apps/portal/app/services/api/workspace.ts
• apps/portal/app/services/api/workspaceTeams.ts
• apps/portal/pages/media/workspaces/manage.tsx
• apps/portal/pages/media/workspaces/teams/[workspaceId].tsx
• apps/portal/pages/workspace/invite/[workspaceInviteId].tsx
• apps/portal/components/pagesComponents/_imagesScreen/pages/workspace/updateWorkspaceTeamModal/UpdateWorkspaceTeamModal.tsx
• apps/portal/components/containers/dashboardLayout/SidebarWorkspaces/SidebarWorkspaces.tsx
• apps/portal/pages/media/workspace/[workspaceId]/settings/index.tsx
• apps/api/src/module/workspace/Interfaces/Workspace.ts
• apps/portal/i18n/locales/en.json

Introduction

The Workspace & Collaboration feature is a core component of the Ever Rec platform, designed to facilitate teamwork and sharing of media assets. It provides a centralized environment where users can share images and videos instantly, organize content, and manage team access. The system is described as "Collaboration made easy with a workspace to share images and videos instantly."

Workspaces serve as containers for users (members), teams, and media content (screenshots and videos). Users can create new workspaces, invite others to join, and manage assets within this collaborative space. The entire feature is supported by a NestJS API backend that interacts with a Firebase Realtime Database for data persistence and Firebase Storage for file storage.

Sources: apps/portal/i18n/locales/en.json:61, README.md:8-15, apps/api/src/module/workspace/services/workspace.service.ts

Architecture Overview

The collaboration module is built around three main entities: Workspaces, Teams, and Members (Users). A Workspace contains members and teams, and teams are subgroups of workspace members. Media items like images and videos are stored within the context of a workspace.

Data Model

The relationship between these entities is stored in the Firebase Realtime Database. The diagram below illustrates the high-level schema.

This ER diagram shows the relationships between users, workspaces, and teams.

Sources: apps/api/src/module/workspace/services/workspace.service.ts:7-22, 90-103

Core IWorkspace Interface

The central data structure for a workspace is defined by the IWorkspace interface.

Field	Type	Description
id	string	Unique identifier for the workspace, generated using nanoid.
admin	string	The UID of the user who created and owns the workspace.
name	string	The display name of the workspace.
members	IAccessMember[]	An array of objects, each containing a member's id.
teams	any[]	An array of team objects associated with the workspace.
folders	IWorkspaceFolder[]	An array of folder objects for organizing content.
screenshots	any[]	An array of screenshot/image items.
videos	any[]	An array of video items.
created	number	The timestamp when the workspace was created.
avatar	string (optional)	URL to the workspace's avatar image.
thumbnail	string (optional)	URL to the workspace's thumbnail image.
inviteLinkId	string (optional)	The ID of the active invite link for this workspace.

Sources: apps/api/src/module/workspace/Interfaces/Workspace.ts, apps/api/src/module/workspace/services/workspace.service.ts:7, 90-103, 305

Workspace Management

Users can perform various management actions on workspaces, such as creation, renaming, and deletion. These actions are primarily handled by the WorkspacesService on the backend and exposed through API endpoints.

Sources: apps/api/src/module/workspace/services/workspace.service.ts, apps/portal/pages/media/workspaces/manage.tsx

Creating a Workspace

A new workspace can be created by any authenticated user. The process involves the frontend calling the API, which then creates the necessary records in Firebase.

The following sequence diagram illustrates the creation flow:

Renaming a Workspace

The workspace administrator can rename a workspace. This action updates the name property of the workspace object in the database. The UI for this is located in the workspace settings page.

• API Endpoint: PUT /api/v1/workspace/{workspaceId}/name
• Backend Logic: WorkspacesService.renameWorkspace()
• Frontend Implementation: pages/media/workspace/[workspaceId]/settings/index.tsx

Sources: apps/api/src/module/workspace/services/workspace.service.ts:320-337, apps/portal/pages/media/workspace/[workspaceId]/settings/index.tsx:43-65, apps/portal/app/services/api/workspace.ts:133-138

Deleting and Leaving a Workspace

• Leaving: Any member can choose to leave a workspace. This action removes them from the member list and any teams within that workspace.
• Deleting: Only the workspace administrator can delete a workspace. This is a destructive action that removes the workspace, all its content from storage, and disassociates all members.

Action	API Endpoint	Backend Method	User Role	Description
Leave	DELETE /api/v1/workspace/{workspaceId}/leave	leaveWorkspace	Member	Removes the user from the workspace. User's content may remain.
Delete	DELETE /api/v1/workspace/{workspaceId}/delete	deleteWorkspace	Admin	Permanently deletes the workspace, its files from storage, and removes it from all members' profiles.

Sources: apps/api/src/module/workspace/services/workspace.service.ts:223-270, 272-318, apps/portal/pages/media/workspaces/manage.tsx:77-102

Customizing Appearance

Workspace administrators can customize the workspace's avatar and thumbnail. These images are uploaded to Firebase Storage, and their URLs are stored in the workspace's database record.

• Avatar Upload: POST /api/v1/workspace/{workspaceId}/avatar
• Thumbnail Upload: POST /api/v1/workspace/{workspaceId}/thumbnail

The changeWorkspaceAvatar and changeWorkspaceThumbnail methods in WorkspacesService handle the file upload to a dedicated path (workspaces/{workspaceId}/avatar or workspaces/{workspaceId}/thumbnail) and update the workspace record with the new signed URL. A size limit of 30KB is enforced for avatars.

Sources: apps/api/src/module/workspace/services/workspace.service.ts:339-385, apps/portal/app/services/workspace.ts:211-246, apps/portal/pages/media/workspaces/manage.tsx:131-150

Team Management

Within a workspace, members can be organized into teams. This allows for more granular control over content and collaboration. Team management is restricted to the workspace administrator.

Sources: apps/portal/pages/media/workspaces/teams/[workspaceId].tsx, apps/portal/app/services/api/workspaceTeams.ts

Team Operations

Operation	API Endpoint	Description
Create Team	POST /api/v1/workspace/{id}/teams/add-team/{name}	Creates a new team within a workspace.
Update Team	PUT /api/v1/workspace/{id}/teams/{teamId}	Updates a team's name, avatar, or thumbnail.
Delete Team	DELETE /api/v1/workspace/{id}/teams/delete/{teamId}	Deletes a team from a workspace.
Get Members	GET /api/v1/workspace/{id}/teams/teams-members	Retrieves all members for all teams in a workspace.
Add Member	POST /api/v1/workspace/{id}/teams/add-member	Adds a user to a specific team.
Remove Member	POST /api/v1/workspace/{id}/teams/delete-member	Removes a member from a specific team.
Leave Team	PUT /api/v1/workspace/{id}/teams/leave-team/{teamId}	Allows a user to leave a team they are a member of.

The UI for these operations is primarily located in pages/media/workspaces/teams/[workspaceId].tsx and the UpdateWorkspaceTeamModal component.

Sources: apps/portal/app/services/api/workspaceTeams.ts, apps/extensions/src/app/services/api/workspaceTeams.ts, apps/portal/pages/media/workspaces/teams/[workspaceId].tsx:100-121, 211-224, apps/portal/components/pagesComponents/_imagesScreen/pages/workspace/updateWorkspaceTeamModal/UpdateWorkspaceTeamModal.tsx:158-182

Member Invitation System

Users are added to workspaces primarily through an invitation link system.

Invitation and Joining Flow

The following diagram shows the process of a user joining a workspace via an invite link.

This flow is implemented in the frontend at pages/workspace/invite/[workspaceInviteId].tsx and backed by the API services defined in apps/portal/app/services/api/workspace.ts. If a non-authenticated user accesses an invite link, they are first redirected to the login page.

Sources: apps/portal/pages/workspace/invite/[workspaceInviteId].tsx:62-81, apps/portal/app/services/api/workspace.ts:11-26, apps/api/src/module/workspace/services/workspace.service.ts:303-311

Summary

The Workspace & Collaboration module is a comprehensive feature set that enables multi-user interaction within the Ever Rec platform. It leverages Firebase for robust, real-time data and file management, providing a structured way for users to create shared spaces, organize into teams, and manage media assets collaboratively. The architecture is clearly divided between the frontend (Portal/Extension) and backend (API), with well-defined services and components for managing workspaces, teams, and user invitations.