Feature: Real-Time Collaboration
Relevant source files
The following files were used as context for generating this wiki page:Real-Time Collaboration is a key feature of the eefashionita platform, designed to allow team members to work together on 3D garment designs. The user interface for this feature is fully implemented in the CollaborationScreen, providing a "Collaboration Hub" for managing projects, teams, and recent activity.
While the front-end components are complete, the backend integration for real-time functionality is architected as a "backdoor" or "hook," ready for future implementation. The system is controlled by a feature flag and has placeholder API endpoints defined, indicating a future-proof design for enabling live collaboration and cloud synchronization.
Sources: README.md, src/screens/CollaborationScreen.js, TASK_4_DISCUSSION.md, TASK_4_SUMMARY.md
Architecture and State
The collaboration feature is currently in a UI-complete state with a planned, but not yet implemented, backend architecture. The system is designed to be enabled via feature flags and will rely on a set of dedicated API services for full functionality.
Sources: TASK_4_DISCUSSION.md, TASK_4_SUMMARY.md, src/config/constants.js
Feature Flag Configuration
The entire collaboration feature, along with its real-time capabilities, is controlled by a feature flag configuration. This allows the feature to be enabled or disabled without code changes. The documentation indicates that real-time collaboration is currently disabled by default.
Sources: TASK_4_SUMMARY.md, TASK_4_DISCUSSION.md
The following table details the configuration found in the proposed architecture:
| Category | Feature | Default Value | Description |
|---|---|---|---|
COLLABORATION | ENABLED | false | Enables the overall collaboration feature. |
COLLABORATION | REAL_TIME | false | Enables live, real-time updates for users. |
CLOUD_SYNC | ENABLED | false | A prerequisite for collaboration and saving. |
Sources: TASK_4_DISCUSSION.md, src/config/constants.js:184-191
API Endpoints
Placeholder API endpoints for collaboration have been defined in the application's constants. These endpoints outline the intended RESTful communication for managing projects and inviting collaborators.
| Endpoint Path | HTTP Method (Inferred) | Description |
|---|---|---|
/projects | GET / POST | List or create new projects. |
/projects/:id/invite | POST | Invite a user to a project. |
Sources: src/config/constants.js:129-133
UI Components
The CollaborationScreen.js file contains the main user interface for the Collaboration Hub. It is composed of several key child components and manages the view for Projects, Team, and Activity.
Sources: src/screens/CollaborationScreen.js
This diagram shows the component structure of the Collaboration Hub screen.
Sources: src/screens/CollaborationScreen.js
Collaboration Hub Screen
The main screen, CollaborationScreen, acts as the central hub. It uses local state to manage the active tab (projects, team, or activity) and the visibility of modals for creating projects or inviting users.
Sources: src/screens/CollaborationScreen.js:220-224
Key features of the screen include:
- A header with a title, notification button, and search button.
- A tabbed interface to switch between different views.
- A floating "Create New Project" button on the Projects tab.
- A search bar on the Team tab to find collaborators.
ProjectCard
The ProjectCard component displays a summary of a single collaborative project. It uses Animated.Value to animate the progress bar on render.
Sources: src/screens/CollaborationScreen.js:90-159
The data structure for a project is as follows:
| Field | Type | Description | Example |
|---|---|---|---|
id | String | Unique identifier for the project. | '1' |
title | String | The name of the project. | 'Summer Collection 2024' |
description | String | A brief description of the project. | 'Beachwear and casual summer designs' |
icon | String | Name of the MaterialCommunityIcon to display. | 'weather-sunny' |
colors | Array | A pair of hex codes for the card's gradient. | ['#FFD93D', '#FF6B6B'] |
status | String | The current status of the project. | 'Active' |
progress | Number | A percentage (0-100) of project completion. | 75 |
members | Array | A list of member names. | ['Alice', 'Bob', 'Carol'] |
messages | Number | The count of messages in the project. | 45 |
files | Number | The count of files in the project. | 12 |
deadline | String | The project's deadline. | 'Mar 15' |
Sources: src/screens/CollaborationScreen.js:226-259
CollaboratorCard
This component displays information about a team member or a potential collaborator. It includes an online status indicator and a list of skills.
Sources: src/screens/CollaborationScreen.js:18-72
The data structure for a collaborator is as follows:
| Field | Type | Description | Example |
|---|---|---|---|
id | String | Unique identifier for the collaborator. | '1' |
name | String | The full name of the collaborator. | 'Sarah Johnson' |
role | String | The collaborator's role in the team. | 'Fashion Designer' |
skills | Array | A list of the collaborator's skills. | ['Sketching', '3D Design'] |
isOnline | Boolean | Indicates if the user is currently online. | true |
Sources: src/screens/CollaborationScreen.js:261-285
ActivityItem
The ActivityItem component shows a single entry in the recent activity feed, such as a comment or file upload.
Sources: src/screens/CollaborationScreen.js:162-199
The data structure for an activity is as follows:
| Field | Type | Description | Example |
|---|---|---|---|
icon | String | Name of the MaterialCommunityIcon. | 'comment' |
text | String | The description of the activity. | 'Sarah commented on Summer Collection' |
time | String | A relative timestamp for the activity. | '2 mins ago' |
color | String | A hex code to style the icon. | '#6C63FF' |
Sources: src/screens/CollaborationScreen.js:287-308
User Flows
The UI supports several key user flows, though the backend logic is not yet connected.
Creating a New Project
This flow shows how a user creates a new project from the Collaboration Hub.
Inviting a Collaborator
This flow outlines the process of inviting a team member to a project. The interaction is defined in the UI, with backend logic pending.
Conclusion
The Real-Time Collaboration feature is a cornerstone of the application's vision, with a well-designed and fully-implemented user interface in CollaborationScreen.js. The architecture is prepared for future backend integration through defined feature flags and API endpoint placeholders. The current implementation uses mock data to render projects, team members, and activities, providing a clear blueprint for the data models required. The next phase of development will involve implementing the services in sync.api.js and connecting the UI to a real-time backend service like Supabase, as suggested in the project's planning documents.
Sources: src/screens/CollaborationScreen.js, TASK_4_SUMMARY.md, TASK_4_DISCUSSION.md