REAL-TIME CODE COLLABORATION
PLATFORM
PROJECT REPORT
Submitted by:
Rahul Ghosh (22052660)
Indulekha Das (22053430)
Aditi Gupta (2205524)
Soumyaditya Saha (22053030)
Soumyadip Maity (22053029)
School of Computer Science
Kalinga Institute of Industrial Technology, Bhubaneswar
ABSTRACT
The Real-Time Code Collaboration Platform is a web-based application designed
to facilitate collaborative coding among users. It is an online application that
allows various users to collaborate in a virtual environment/ a code editor by
providing a unique ID for the room. It ensures the synchronization of the changes
made by the users in real time and ensures that the changes are visible to each user
in real time. The members in a room can code, communicate and make changes in
the file in real time, leading to an immersive experience which can be used to solve
multiple problems in the tech industry.
The main objective of the project is to create a simulated environment of
collaborative coding like the tools currently being used by the software industry. It
is built using [Link] for the frontend, [Link] and [Link] for the backend
services, and [Link] for real-time communication. It is integrated to provide a
professional environment for coding.
This system facilitates collaboration, productivity, and the implementation of real-
time systems.
1. INTRODUCTION
With the increasing demand for remote work and collaborative development, real-
time collaboration tools have become essential in the software industry. Developers
often need to work together on the same codebase from different locations.
Traditional coding environments do not support live collaboration, leading to
inefficiencies and communication gaps.
This problem becomes even more prominent during campus recruitment and
placement seasons, where many students participate in technical interviews and
coding assessments simultaneously. In such scenarios, both students and
interviewers face several challenges.
From the student’s perspective, candidates often struggle with:
Limited ability to demonstrate their thought process in real time
Difficulty in collaborating or discussing solutions interactively with the
interviewer
Dependence on static coding platforms that do not allow shared editing or
live feedback
Increased pressure due to lack of a smooth and interactive coding
environment
From the interviewer’s perspective, several issues arise:
Inability to track how a candidate approaches problem-solving step by step
Difficulty in guiding or correcting candidates in real time
Lack of a shared workspace to test collaborative problem-solving skills
Managing multiple candidates efficiently during large-scale placement
drives
During mass recruitment drives, these limitations can lead to inefficient evaluation,
misjudgment of candidate skills, and a less engaging interview experience.
This project addresses these challenges by providing a Real-Time Code
Collaboration Platform that enables both students and interviewers to work
together in a shared coding environment. Using this platform:
Interviewers can observe the candidate’s logic and approach live
Candidates can write, edit, and improve code interactively
Both parties can collaborate in real time, similar to real-world development
scenarios
The evaluation process becomes more transparent, efficient, and interactive
By simulating a real collaborative coding environment, the platform not only
enhances the interview experience but also helps students better prepare for
technical roles where teamwork and real-time problem-solving are essential.
2. PROBLEM STATEMENT
Traditional coding platforms used during campus recruitment and technical
interviews often lack real-time collaboration features, making it difficult for both
students and interviewers to work on the same code simultaneously. In many cases,
candidates rely on screen sharing or external coding platforms, which limits
interaction and makes it hard for interviewers to observe the candidate’s thought
process clearly. This leads to inefficiencies in evaluation and reduces the overall
effectiveness of the interview process.
The problem is to design and develop a system that enables both students and
interviewers to collaborate on code in real time, ensuring instant synchronization,
active user tracking, and a smooth, interactive coding experience. Such a platform
can significantly improve the quality of technical assessments during large-scale
placement drives by allowing better communication, real-time feedback, and more
accurate evaluation of problem-solving skills.
3. OBJECTIVES
The main objectives of this project are:
To develop a real-time collaborative coding platform
To enable multiple users to join a shared coding session using a unique
Room ID
To synchronize code changes across all users instantly
To provide a professional and user-friendly code editor
To track user presence within a session
To implement real-time communication using WebSocket technology
4. SYSTEM OVERVIEW
The system follows a client-server architecture. The frontend is responsible for
displaying the user interface and code editor, while the backend manages
communication and synchronization between users.
Users connect to the server and join a room. Any changes made in the code editor
are transmitted to the server, which then broadcasts them to all other users in the
same room.
5. TECHNOLOGY STACK
Frontend
[Link]: Used for building a dynamic and responsive user interface
Tailwind CSS: Used for styling and layout design
CodeMirror: Provides code editing features such as syntax highlighting
Backend
[Link]: Runtime environment for server-side execution
[Link]: Framework for building the backend server
[Link]: Enables real-time communication between users
6. SYSTEM ARCHITECTURE
The system consists of three major components:
1. Client (Frontend)
2. Server (Backend)
3. Communication Layer ([Link])
The frontend communicates with the backend through WebSockets. The server
manages rooms and handles user connections. All updates are broadcast to users
within the same room to maintain synchronization.
7. WORKING OF THE SYSTEM
The working of the system can be described in the following steps:
1. A user opens the application and either creates or joins a room using a
unique Room ID.
2. The user is connected to the backend server using [Link].
3. When multiple users join the same room, a communication channel is
established.
4. Any code changes made by a user are sent to the server.
5. The server broadcasts these changes to all other users in the same room.
6. All users see the updated code in real time.
7. When a user leaves the room, the server updates the remaining users.
This process ensures seamless real-time collaboration.
8. MODULE DESCRIPTION
9.1 Room Management Module
This module allows users to create or join collaboration rooms using a unique
Room ID. It ensures that each session is separate and users can interact only within
their selected room.
9.2 Real-Time Synchronization Module
This module handles real-time code updates using [Link]. Any changes made by
one user are instantly reflected to all other users in the same room.
9.3 Code Editor Module
This module integrates CodeMirror to provide a coding interface with features like
syntax highlighting and smooth editing for a better user experience.
9.4 User Tracking Module
This module tracks active users in a room and updates participants when someone
joins or leaves, ensuring awareness of collaborators.
9. IMPLEMENTATION APPROACH
The project was developed in a step-by-step manner starting with project setup,
followed by backend integration and then frontend development.
Initially, the frontend was created using React and styled using Tailwind CSS. The
backend server was set up using [Link] and integrated with [Link].
After establishing communication between frontend and backend, real-time
features such as room joining and event broadcasting were implemented.
10. TESTING AND RESULTS
The system was tested by running multiple instances of the application to simulate
multiple users.
The following results were observed:
Users were able to join the same room successfully
Real-time communication between users was established
The system handled multiple connections without failure
These results confirm that the platform functions as expected.
11. ADVANTAGES
Enables real-time collaboration
Improves productivity and teamwork
Useful for remote learning and development
Provides an interactive coding environment
12. FUTURE SCOPE
The project can be enhanced further by adding:
User authentication and login system
Code execution support
Support for multiple programming languages
Database integration for saving sessions
Chat functionality for communication
13. CONCLUSION
The Real-Time Code Collaboration Platform demonstrates the implementation of a
collaborative coding environment using web technologies. The project highlights
the importance of real time communication and provides a strong foundation for
future of web-apps and platforms that encourage real time code writing and
collaboration.
14. WORK DISTRIBUTION
Rahul Ghosh (22052660): Handled backend server using Nodejs, implemented
[Link] server configuration
Aditi Gupta (2205524): Developed frontend using Reactjs, implemented UI
components and managed component structure
Indulekha Das (22053430): Implemented UI Styling using Tailwind CSS, designed
layout and responsive design
Soumyaditya Saha (22053030): Integrated CodeMirror into the React Application,
integrated syntax highlighting
Soumyadip Maity (22053029): Implemented user tracking using socket mapping
and assisted in debugging the real-time synchronization
[Link]
React Documentation: [Link]
[Link] Documentation: [Link]
[Link] Documentation: [Link]
CodeMirror Documentation: [Link]