A

Capstone Project Report

On

Collaborative Design Platform

Submitted during 6th semester in partial fulfilment of the requirements for the
award of degree of

Bachelor of Technology
in

Computer Engineering
by

Raj Singh (21001003109)

Under supervision of

Dr. Parul Gupta

Department of Computer Engineering

FACULTY OF INFORMATICS & COMPUTING

J.C. Bose University of Science & Technology, YMCA

Faridabad – 121006

May 2024
 CANDIDATE’S DECLARATION

I hereby certify that the work being presented in this Project titled “Collaborative Design

Platform” in partial fulfilment of the requirements for the degree of Bachelor of Technology in

Computer Engineering and being submitted to “J.C. Bose University of Science and Technology,

YMCA, Faridabad”, is an authentic record of my own work carried out under the supervision of

Dr Parul Gupta.

The work contained in this project has not been submitted to any other University or Institute for

the award of any degree or diploma by me.

Student’s Signature
Student’s Name

Supervisor Name and Signature

 TABLE OF CONTENTS

Candidate’s Declaration

Chapter 1: Introduction

1.1 Brief of the Project

1.2 Technologies Used

Chapter 2: Proposed Work

2.1 Problem Formulation

2.2 Objectives

2.3. Methodology

Chapter 3: Result Analysis and Future scope

 CHAPTER 1

1.1 BRIEF OF THE PROJECT :

Our project introduces a collaborative design platform aimed at facilitating effective real-
time collaboration among users in designing digital content. Drawing inspiration from
popular tools like, our platform offers a seamless and intuitive interface for users to create,
edit, and collaborate on designs remotely.

Key features of the platform include real-time collaboration, allowing multiple users to
work on the same design simultaneously, thereby fostering instant feedback and interaction
among team members. Version control functionality ensures that changes are tracked and
documented, empowering users to revert to previous versions if needed. The platform
boasts a range of flexible design tools, including drawing tools, shapes, text, and image
manipulation, catering to diverse design needs.

1.2 TECHNOLOGIES USED :

 Next.js

 Typescript

 Liveblocks

 Fabric.js

 Shadcn

 Tailwind Css
 CHAPTER 2

2.1 PROBLEM FORMULATION:

In the realm of digital design, collaboration among team members is often hindered by
geographical constraints and software limitations. Traditional design tools lack the capability for
real-time collaboration, leading to inefficiencies, version control issues, and communication
barriers among team members located in different locations. Thus, the need arises for a user-
friendly, cost-effective, and feature-rich collaborative design platform that enables seamless real-
time collaboration, supports multiple users working on the same design simultaneously,
maintains version control, and fosters effective communication and feedback among team
members.

2.2 Objectives:

The primary objectives of the Collaborative Design Platform project are as follows:

 Develop a User-friendly Interface: Design and implement an intuitive and easy-to-use

interface for the collaborative design platform, ensuring accessibility for users of all skill
levels.

 Enable Real-time Collaboration: Implement features that allow multiple users to work
on the same design simultaneously, enabling seamless real-time collaboration and
interaction.

 Ensure Version Control: Incorporate version control mechanisms to track changes

made to design projects, enabling users to revert to previous versions and maintain
project integrity.
.
2.3 METHODOLOGY:

2.3.1 Setting up LiveBlocks:-

 Sign Up and Create an Account: Visit the Liveblocks website and sign up for an
account. Follow the instructions to create your account and verify your email address.

 Create a New Project: Once logged in, create a new project by navigating to your
dashboard or project management section. Provide a name for your project and any other
required information. Get Your API Key: After creating your project, you'll need to
obtain your API key. This key is crucial for authenticating your requests to the
Liveblocks API. Locate the section in your project settings or dashboard where you can
find your API key. Copy the API key to use it in your application.

 Install Liveblocks SDK: Depending on the platform you're working with (web, iOS,
Android), install the Liveblocks SDK for that platform.

 Start Using Liveblocks: With Liveblocks initialized in your application, you can start
using its features for real-time collaboration. Explore the Liveblocks documentation and
guides to learn about the different features and how to implement them in your
application. Typically, you'll be working with concepts like shared state, presence, and
events to enable real-time collaboration features in your app.

2.3.2 Live Cursor

  Set Up Liveblocks in Your Application: Ensure that you have Liveblocks initialized in
your application as described in the previous steps.

 Track Cursor Positions: In your application, track the cursor positions of each user who
is collaborating in real-time. You can use event listeners to detect mouse movements or
touch events, depending on the platform.

 Send Cursor Position Updates to Liveblocks: When a user's cursor position changes,
send an update to Liveblocks with the new cursor position. This typically involves using
Liveblocks methods to update a shared state object that contains the cursor positions of
all users. Receive

 Cursor Position Updates: Set up listeners in your application to receive cursor position
updates from Liveblocks. When updates are received, update the cursor positions of other
users in your application's UI.

 Display Live Cursors: Use the cursor position data received from Liveblocks to display
live cursors for each user in your application's UI. This could involve creating dynamic
cursor elements or updating existing cursor elements with the new positions.

 Handle User Presence: Consider implementing user presence functionality to track

when users join or leave the collaboration session. This can help ensure that cursors are
only displayed for active users who are currently collaborating.

 Test and Debug: Thoroughly test your implementation to ensure that live cursors are
displayed accurately and that cursor position updates are synchronized in real-time for all
users. Debug any issues that arise during testing.

2.3.3 Active Users

  Initialize Liveblocks: Make sure Liveblocks is properly initialized in your application,
as described in the previous steps.

 Track User Presence: Utilize Liveblocks' presence feature to track when users join or
leave the collaboration session. Liveblocks provides methods to detect user presence
changes, such as onUserJoined and onUserLeft events.

 Update Active User List: Maintain a list of active users in your application. When a user
joins the collaboration session, add them to the active user list. When a user leaves,
remove them from the list.

 Display Active Users: Update your application's UI to display the list of active users.
This could be done by showing avatars, usernames, or other relevant information to
indicate who is currently active in the collaboration session.

 Synchronize Active User Data: Use Liveblocks to synchronize the active user data
across all clients in real-time. When a user joins or leaves, update the shared state in
Liveblocks to reflect the changes, ensuring that all clients receive the updates
simultaneously.

 Handle User Interaction: Consider implementing features that allow users to interact
with active users, such as initiating chats, viewing profiles, or assigning tasks. Use the
active user data from Liveblocks to enable these interactions in real-time.

 Test and Debug: Thoroughly test your implementation to ensure that user presence
changes are detected accurately and that the active user list is synchronized correctly
across all clients. Debug any issues that arise during testing.

 Optimize Performance: Depending on the complexity of your application and the

number of active users, you may need to optimize the performance of your user tracking
implementation. Consider strategies such as minimizing network traffic, optimizing data
structures, or implementing caching to improve performance.

2.3.3 Real Time Feature

  Initialization and Setup: Initialize Liveblocks in your application as described earlier.
Set up your canvas component and any necessary event listeners for user interaction.

 Track Canvas Data: Define the structure of your canvas data, which may include
elements like strokes, shapes, text, etc. Store the canvas data in a shared state object that
can be synchronized with Liveblocks.

 Real-time Synchronization: When a user interacts with the canvas (e.g., draws a stroke),
send updates to Liveblocks to update the shared canvas data. Use Liveblocks methods to
update the shared state object with the new canvas data.

 Receive Updates: Set up listeners in your application to receive updates from Liveblocks
whenever the canvas data changes. When updates are received, update the canvas in your
application's UI to reflect the changes made by other users.

 Optimistic UI Updates: Implement optimistic UI updates to provide a seamless user

experience. When a user performs an action on the canvas, update the UI immediately
and then wait for confirmation from Liveblocks. If Liveblocks confirms the update, no
further action is needed. If there is a conflict or error, handle it accordingly (e.g., by
reverting the UI update).

 Conflict Resolution: Implement conflict resolution mechanisms to handle cases where

multiple users make changes to the canvas simultaneously. Liveblocks provides conflict
resolution features to help resolve conflicts automatically or provide notifications to users
to resolve conflicts manually.

 Testing and Debugging: Thoroughly test your real-time synchronization implementation

to ensure that canvas updates are propagated instantly and accurately among all
connected clients. Debug any issues that arise during testing, such as synchronization
delays or conflicts.

2.3.3 Export to Pdf

 Canvas Content to PDF: Use a library like html2canvas or jsPDF to capture the content
of your canvas and convert it into a PDF document. html2canvas can capture the content
of a DOM element (including the canvas) and convert it into a canvas element, which can
then be used by jsPDF to generate a PDF. Alternatively, you can directly draw the canvas
content onto a PDF using jsPDF's canvas API.

 Export Functionality: Implement a UI control (e.g., a button) that triggers the export to
PDF functionality when clicked. When the export button is clicked, capture the content of
the canvas and generate a PDF document using the selected method (html2canvas, jsPDF,
etc.).

 Download or Save PDF: Once the PDF document is generated, provide users with
options to download or save the PDF. You can use browser APIs like Blob and
URL.createObjectURL to create a downloadable link for the PDF.

 User Feedback: Provide feedback to users to indicate that the export process is in
progress and when it's complete. This could be done through UI elements such as loading
spinners or success messages.

 Testing and Debugging: Thoroughly test the export to PDF functionality to ensure that
the generated PDF accurately reflects the content of the canvas. Debug any issues that
arise during testing, such as rendering inconsistencies or errors in the generated PDF.

 Optimization: Optimize the PDF generation process to minimize file size and improve
performance. Consider strategies such as compressing images, reducing the resolution, or
optimizing the content layout for printing.

CHAPTER 3
3.1 RESULT ANALYSIS: -

In this now we can use various shapes and design collaboratively. Its various design tools are: -

1.Shapes: -Using the shapes Menu we can select various shapes and design them using shapes.

Using This we can select any Shape and also images in canvas and design them using the right
sidebar.

2.Text box: - Text Box can to used to insert any text in canvas and also can be designed using
the right sidebar.
3.Comment Bubble: - Using Comment Bubble user can chat and share their thoughts with other
collaborators.

4.Live Reactions: - A user can press ‘E’ and use reaction to show his view about a design.
Example of a design created using this tool by multiple users:-
3.2 FUTURE SCOPE:-

 Real-time Collaboration Tools: Figma's success is largely attributed to its real-time

collaboration features. By integrating Liveblocks, which facilitates real-time
collaboration, into your Figma clone, you're tapping into a growing demand for
collaborative tools.

 Learning Experience: Developing a project using Next.js, a popular React framework,

alongside Liveblocks, provides valuable hands-on experience with cutting-edge
technologies. This experience can be leveraged in future endeavors, whether in academia
or industry, as proficiency in modern web development frameworks and real-time
communication technologies is highly sought after.

 Potential Industry Applications: Your Figma clone with real-time collaboration

capabilities could attract interest from industries beyond design, such as software
development, architecture, or multimedia production. Customizing the platform to cater
to the specific needs of these industries could open up opportunities for
commercialization or collaboration with industry partners.

 Community Engagement: Open-sourcing your project and actively participating in

relevant communities can foster collaboration and innovation. Contributing to the
development of Liveblocks or Next.js plugins/extensions, or sharing insights from your
project through blog posts or presentations, can enhance your visibility within the
developer community and potentially lead to future opportunities, such as internships or
job offers.

 AI-powered Features: Investigate the integration of artificial intelligence (AI)

technologies to automate repetitive tasks, suggest design improvements, and provide
personalized recommendations based on user behavior and preferences, enhancing the
overall design process.