0% found this document useful (0 votes)
37 views55 pages

CodeHive Group 32

CodeHive is a real-time collaborative coding platform designed to enhance the coding experience for developers, students, and educators through features like AI-assisted suggestions, live chat, and a collaborative whiteboard. Built with modern web technologies, it supports multiple programming languages and offers utilities such as code export and syntax highlighting while ensuring security and performance. The project aims to unify code development, communication, and visualization in a seamless environment for remote collaboration and online teaching.
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
37 views55 pages

CodeHive Group 32

CodeHive is a real-time collaborative coding platform designed to enhance the coding experience for developers, students, and educators through features like AI-assisted suggestions, live chat, and a collaborative whiteboard. Built with modern web technologies, it supports multiple programming languages and offers utilities such as code export and syntax highlighting while ensuring security and performance. The project aims to unify code development, communication, and visualization in a seamless environment for remote collaboration and online teaching.
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 55

CodeHive – Real-time

Collaborative Coding Platform


A Project Submitted
In partial fulfilment of the requirement for the
award of

Master of Computer Applications


By

Jay Prakash 2023CA48


Kirtibala Verma 2023CA53
Rajeev Ranjan 2023CA78

Under the
guidance of

Dr. Vibhav Prakash Singh


to the

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING


MOTILAL NEHRU NATIONAL INSTITUTE OF
TECHNOLOGY, ALLAHABAD

May 2025
UNDERTAKING

We declare that the work presented in this report titled “CodeHive – A


RealTime Collaborative Coding Platform” submitted to the Computer
Science and Engineering Department, Motilal Nehru National Institute of
Technology Allahabad, Prayagraj, for the award of the Master of Computer
Applications degree, is our original work. We have not plagiarized or submitted
the same work for the award of any other degree. In case this undertaking is
found incorrect, we accept that our degree may be unconditionally withdrawn.

May 2025, Allahabad Jay Prakash(2023CA48)

Kirtibala Verma (2023CA53)

Rajeev Ranjan (2023CA78)


CERTIFICATE

This is to certify that Jay Prakash, Kirtibala Verma and Rajeev Ranjan have
successfully carried out the completion of the project entitled “CodeHive -A
RealTime Collaborative Coding Platform” under my supervision during
session 2024-25 and all the requirements of the project have been met.

May 2025 Dr. Vibhav Prakash Singh


Allahabad CSED, MNNIT Allahabad,
Prayagraj
ACKNOWLEDGMENT

We would like to give our sincere thanks to our mentor, Dr. Vibhav
Prakash Singh, who guided us throughout our project “CodeHive – A
RealTime Collaborative Coding Platform” in every possible way with his
invaluable advice and valuable suggestions. Our project would not have
been possible without his constant guidance, support, and encouragement
that helped us complete our project on time. We feel honoured and
privileged to work under him.

Jay Prakash (2023CA48)


Kirtibala Verma (2023CA53)
Rajeev Ranjan (2023CA78)
Abstract

CodeHive is a real-time collaborative code editor designed to enhance the way


developers, students, and educators write, share, and discuss code in a live, interactive
environment. Built using modern web technologies such as React.js, Node.js,
Socket.io, and MongoDB, the platform supports multiple programming languages, AI-
assisted code suggestions, and real-time group collaboration features. It offers
modules like a collaborative whiteboard, real-time chat, and intelligent code
autocompletion powered by OpenAI's GPT-4 and Codex APIs, making it a versatile
solution for remote development, online teaching, and pair programming.

The platform also integrates essential developer-friendly utilities such as code export,
syntax highlighting, screenshot capture, and shimmer UI for seamless user experience.
Security is maintained through validated Room IDs and username constraints, while
performance is optimized with indexed database queries and automated room cleanup.
CodeHive aims to provide a single platform that unifies code development,
communication, and visualization to streamline the collaborative programming
process in both academic and professional settings.

Content

S. No. Topic Page No.

1 Introduction of Project 1-4


2. Motivation and Objective of the Project 5-7
3. System Requirement, Gathering & Analysis
- Software Requirements Specification (SRS)
- Project Perspective
8-17
- Project Category
- Hardware & Software Requirements
- Software Development Life Cycle Model
4. System Design and Implementation
- Gantt Chart
- PERT Chart
- ER Diagram
- DFD Diagram
- Sequence Diagram 18-42
- UI Design
- AI Assistance Module
- System Management Module
- System Design
- Data Modelling - Module Design

5. Testing
- Testing Objective 43-45
- Testing Plan Used
6. Maintenance & Future Scope of The Project 46
7. Limitations of the Project 47
8. Conclusion 48
9. Bibliography/References 49
1. Introduction of Project
❖ Introduction

My project is a platform for real-time code collaboration – CodeHive, a real-time web-based


coding platform that allows multiple users to collaborate simultaneously on the same codebase. It
integrates state-of-the-art features like real-time code editing, AI-assisted suggestions, live group
chat, and an interactive whiteboard—all aimed at enhancing the collaborative software development
experience. The platform supports multiple programming languages and is built using modern
technologies such as React, Redux, Socket.io, and OpenAI's GPT-4 API.
CodeHive allows users to not only write and compile code but also to learn, teach, and brainstorm
together using its collaborative drawing board and real-time communication tools. Whether you're
an educator, student, or software developer, CodeHive is tailored to provide a seamless and
productive environment for writing, reviewing, and executing code.

❖ Product Perspective

CodeHive is a standalone web-based collaborative code editing platform developed to bridge the
gap between isolated development environments and modern collaborative workflows. Unlike
traditional IDEs or single-user code editors, CodeHive centralizes the development, communication,
and visualization processes into a single interactive interface that is accessible through any modern
web browser.

The product functions as a real-time collaborative coding environment, offering seamless


synchronization of code changes, chat messages, AI-generated suggestions, and drawing board
inputs among all active users in a virtual "coding room." Each room is uniquely identified by a
randomly generated secure Room ID and managed through real-time WebSocket connections.

❖ Product Features and Modules

CODEHIVE includes the following core modules and features-

Code Editor Module


• Real-time collaborative editing using Socket.io.
• Real-time code preview and execution.
• AI-based code completions with OpenAI Codex/GPT-4
• Multi-language support via Piston API (C, C++, Java, Python, JS)
• Export code files directly to local system.
• Auto complete and suggestions.

1
AI Assistant Module:
• AI-based code completions with OpenAI Codex/GPT-4 • Inline suggestions for bug fixes
and optimizations.
• Natural language to code conversion
• Instant feedback and error explanation

Whiteboard Module
• Shared collaborative drawing space for diagrams, flowcharts, and brainstorming for Real-
Time Synchronization.
• Multi-Tool Drawing Interface like Pen, Eraser, Highlighter, shapes.
• Colour and Size Customization, Undo/Redo Functionality, Screenshot
Capture

Group Chat Module


• Live chat for room participants.
• Used for queries, updates, and coordination.

Session & Room Management


• Random 20-character Room ID generation.
• Input validation for Room IDs and usernames.

Data Persistence Module


• MongoDB stores code history, session logs, and user activity.
• Rooms inactive for 7+ days are auto deleted.
• Indexed DB queries for faster access.

Screenshot Module
• Capture drawing board and save as an image.

UI/UX and State Management


• Built using React, Redux, and Code Mirror.
• Shimmer loading screens, responsive design, dark/light modes.

2
❖ Software and Hardware Requirements

Software Requirements

• Web Server: The web server plays a crucial role in hosting the CODEHIVE platform. It
stores and delivers all necessary components such as HTML, JavaScript, CSS, and media
assets, as well as backend files and APIs. The server can run on either Windows or Linux
operating systems, depending on deployment preferences. It handles all client requests and
responses efficiently to ensure a seamless collaborative coding experience.

• Server Software: The CODEHIVE server is built using Node.js with Express.js, which
processes client requests and manages real-time data communication via Socket.io. The
server interacts with the database and the OpenAI API to handle real-time collaboration, AI-
assisted coding, user management, and code execution, responding dynamically to all
frontend actions.

• Web Tools: The frontend of CODEHIVE is developed using React.js, enhanced with modern
libraries such as Monaco Editor, Code Mirror, and React Router DOM. These tools offer
a responsive, interactive, and user-friendly interface for coding, chat, and whiteboard
collaboration. Tools like Redux Toolkit and Vite ensure efficient development workflows
and state management.

• Database System: CODEHIVE uses MongoDB as its primary database system to store
persistent user data, session information, code history, chat messages, and room metadata.
The database ensures high-speed performance with indexed Room IDs and is capable of
cleaning up inactive rooms automatically, improving storage efficiency and application
responsiveness.

• Domain Names: Domain names link to a company or a brand. Successful ecommerce


companies have recognizable domain names. If a business becomes successful online, it is
important to protect the brand by doing multiple registrations of domain names such
as .com, .net, .uk, .org, .co

In brief Software Requirements for CodeHive is as follow:

• Frontend: React.js, Redux, Code Mirror, Vite


• Backend: Node.js, Express.js, Socket.io
• AI Integration: OpenAI GPT-4o-mini/Codex API
• Database: MongoDB with Mongoose

Hardware Requirements

3
• Processor: To efficiently handle real-time communication, AI processing, and multi-user
collaboration features of CODEHIVE, a processor with solid multitasking capability is
essential. A Core i3 processor with a base clock speed of 1.4 GHz or higher is suitable for
both client and server-side operations during development and testing. It supports core
functionalities such as real-time data processing, socket connections, and concurrent user
requests.

• RAM: For smooth performance of the collaborative code editor, whiteboard module, and
background processes like chat and AI integration, the system requires a minimum of 4GB of
RAM. This ensures efficient handling of the application's state management, rendering, and
code execution tasks.

• Hard Disk: To store source code, node modules, dependencies, MongoDB data, and other
related assets, at least 500GB of hard disk space is recommended. This provides sufficient
storage for the project files, logs, and historical user data managed by the application.

• Cache Memory: A minimum of 128KB cache memory is required to improve performance


by speeding up repeated access to frequently used program instructions. This is especially
beneficial during compilation, syntax checking, and rendering processes that require high
responsiveness.

• Network Card: Since CODEHIVE heavily relies on real-time communication, including


WebSocket’s for live coding and chat, a reliable internet connection is critical. A network
interface card supporting the 802.11ax (Wi-Fi 6) standard is recommended for high-speed
and low latency connectivity, ensuring optimal collaboration between distributed users.

In brief Hardware Requirements for CodeHive is as follow:

• Processor: Intel Core i3 or above (1.5GHz+)


• RAM: Minimum 4 GB (8 GB recommended)
• Storage: 500 MB free disk space
• Network: Stable broadband internet connection
• Platform: Works on Windows, macOS, Linux with any modern browser

4
2. Motivation and Objective of the Project

❖ Motivation
In today’s software development landscape, collaboration is essential— whether for remote
teams, coding interviews, hackathons, or educational purposes. However, most existing tools
have limitations:

• Lack of real-time synchronization – Many platforms suffer from delays, making


simultaneous editing difficult.
• No integrated AI assistance – Developers manually search for solutions instead of getting
instant suggestions.
• Limited interactivity – Few tools combine coding with visual aids (like whiteboards) for
better explanations.
• Risk of accidental code loss – Refreshing or closing the tab can erase unsaved work.

These challenges inspired CodeHive, a platform designed to enhance real-time collaboration


with AI-powered features, interactive tools, and a seamless coding experience.

❖ Need for CodeHive


• Modern coding and education environments demand platforms that support remote
collaboration, real-time feedback, and AI augmentation. Traditional IDEs lack built-in
collaborative features, and switching between tools (Zoom for communication, VS Code for
coding, Google Docs for feedback) disrupts workflow.

• Efficiency: CODEHIVE is designed to maximize development efficiency through real-time


WebSocket-based collaboration, enabling instant updates across users. The integration of AI-
powered code suggestions significantly reduces manual coding effort and improves
productivity. Additionally, the intuitive UI and streamlined workflows contribute to a smooth
and efficient user experience.

• Security: Security is ensured through the implementation of secure, randomized 20-


character Room IDs and input validation mechanisms for usernames and room identifiers,
which help prevent misuse and injection attacks. The backend uses environment-protected
variables for sensitive data, and MongoDB is configured with strict access controls to
safeguard user and session data.

5
• Performance: To maintain high performance, CODEHIVE utilizes a lightweight and optimized
React frontend that delivers fast loading times and seamless user interactions. Server-side
indexing of Room IDs enhances data retrieval speed, while automatic cleanup of inactive
rooms ensures optimal database performance and memory usage over time.

• Control: Users have extensive control over their sessions, with features like undo/redo
functionality, code loss prevention alerts before refresh, and persistent data logging for
future reference. Additionally, the platform allows session hosts or educators to manage
collaborative tools such as the whiteboard, giving them full control over access and
participation.

❖ Objective
The primary objective of the CodeHive project is to develop a real-time collaborative code editor
that enhances remote software development and learning experiences. The platform aims to provide
seamless multi-user code editing, AI-powered code assistance, and real-time communication
through integrated chat and drawing board features. With support for multi-language code
execution, persistent session storage, and an intuitive UI/UX, CodeHive empowers developers,
educators, and teams to collaborate efficiently. It leverages modern web technologies and ensures
code safety, user-friendly interactions, and optimized performance throughout the development
lifecycle.

❖ Purpose
The purpose of the CodeHive project is to create a real-time, collaborative coding environment that
supports multiple users working simultaneously. It is designed to enhance productivity, enable peer
learning, and simplify remote collaboration among developers. The integration of AI-driven code
assistance, a drawing board, and live chat features aims to make collaborative coding more
interactive, efficient, and user-friendly for teams and individuals alike.

❖ Project Scope
CodeHive is a full-stack collaborative code editor designed to support real-time code sharing, multi-
language execution, AI-powered suggestions, and team communication. It includes core features
such as a synchronized code editor, live chat, drawing board, and persistent room-based data storage
using MongoDB. The project supports developers, educators, and students in pair programming,
team projects, and online teaching sessions. It also includes room validation, user prompts, and
performance optimization.

6
❖ Document Conventions

This document follows standard software engineering conventions. Terminologies like API, UI/UX,
WebSocket, Redux, and modules refer to their commonly accepted definitions in the development
community. Technical elements such as file paths, components, and configurations are written in
code-style formatting where necessary. All headings are structured hierarchically for clarity.
Diagrams, code samples, and references, if any, will be annotated and presented using consistent
formatting.

❖ Intended Audience

This document is intended for developers, project supervisors, evaluators, educators, and any
stakeholders involved in the planning, development, or deployment of the CodeHive platform. It is
also useful for technical writers documenting the system and for QA engineers testing the
application's features. Familiarity with web technologies like React, Node.js, MongoDB, and
WebSocket’s will help readers better understand the technical aspects of the system.

❖ Additional Information

CodeHive is built using React for the frontend and Node.js with Express for the backend. It utilizes
Socket.io for real-time updates and MongoDB for persistent data storage. The platform integrates
OpenAI APIs for AI code assistance and the Piston API for multi-language code execution. ESLint
ensures code quality during development. Vite is used as the front-end build tool to deliver fast and
efficient bundling and development experiences.

3. System Requirement Gathering & Analysis


7
❖ Software Requirements Specification (SRS)

A System Requirements Specification (SRS) (also known as a Software Requirements


Specification) is a document or set of documentation that describes the features and behaviour of a
system or software application. It includes a variety of elements (see below) that attempt to define
the intended functionality required by the customer to satisfy their different users.

1. Project Perspective

CodeHive enables users to collaboratively edit code in real-time, with features such as code
suggestions, version control, and communication tools. Users can seamlessly collaborate on coding
projects, execute code, and manage versions. The project scope is vast, offering features that
enhance usability, understanding, and modification

✓ Real-time collaborative coding.


✓ No need for manual version management.
✓ AI-driven code suggestions and feedback.
✓ Improved accuracy and efficiency in coding workflows.
✓ Real-time chat and drawing board for team discussions.

2. Project Category

Domain: Web Application

A web application (or web app) is software that runs in a web browser, unlike traditional software
that operates locally on a device’s operating system. CodeHive is delivered through the World Wide
Web, accessible by users with an active internet connection, providing a seamless coding and
collaboration experience across different platforms.

3. Hardware & Software Requirements

Hardware Requirements (Recommended):

• Processor: Intel Core i3 or higher


• RAM:4 GB or more
• Hard Disk: Minimum 10 GB of free space

Software Requirements (Recommended):

• Operating system: Linux, Windows 10 or more recent versions


8
• Server: Nginx web server.
• Application Software: Google Chrome, Mozilla Firefox, Microsoft Edge and many more.

Tools Used (Recommended):

• Code Editor - Visual Studio Code


• UI Designing & Prototyping Software - Figma
• Web Hosting Domain – Render (render.com)
• API testing tool – Postman
• Version control and source code management tool – GitHub

Programming Languages and Frameworks Used (Front-end):

• HTML
• CSS
• JavaScript
• React.Js

Programming Languages and Frameworks Used (Back-end):

• Node.js
• Express.js
• MongoDB Database

Special Requirement (Mandatory):

• Internet Connection

GitHub: GitHub is a web-based platform for version control and collaboration, allowing multiple
users to work on projects simultaneously. It uses Git for source code management and provides
features like access control, bug tracking, task management, and collaboration tools. GitHub
integrates continuous integration and supports features like wikis for project documentation. Since
2018, GitHub has been a subsidiary of Microsoft, widely used for managing Code Hive’s source
code and collaboration.

HTML: HTML (Hypertext Markup Language) is the standard language for creating web pages in
CodeHive. It defines the structure and content of the web pages that users interact with, such as the
interface to search doctors, book appointments, and send messages. HTML5 is the version used,

9
offering improved markup elements, APIs, and the Document Object Model (DOM), ensuring
dynamic interaction and seamless integration with other web technologies.

CSS: CSS (Cascading Style Sheets) is used in CodeHive to define the look and feel of the web
pages. It controls the design, layout, and responsiveness, ensuring that the platform provides an
optimal experience across various devices and screen sizes. By using CSS, we enhance the user
interface, making it more visually appealing while maintaining accessibility and responsiveness.

JavaScript: JavaScript is the primary scripting language in CodeHive, enabling dynamic features
like form validation, real-time interaction, and client-side processing. It is essential for user
interactions such as submitting forms, handling asynchronous requests, and dynamically updating
the UI based on user actions. JavaScript helps make the web pages interactive and ensures smooth
user experiences without needing to refresh the page.

React.js: React.js is a popular JavaScript library for building user interfaces, especially single-page
applications where you need a fast, interactive user experience. React makes it easier to build and
maintain complex UIs in a declarative way by breaking them into reusable components. In
CodeHive, React.js powers the front-end interface, allowing users to easily navigate, interact, and
book appointments.

Node.js: Node.js is a server-side JavaScript runtime built on Chrome's V8 JavaScript engine. It is


designed for building scalable network applications and can handle many concurrent connections
with high efficiency. In CodeHive, Node.js is used to build the backend server that

Express: Express is a minimalist web framework for Node.js. It simplifies the creation of web
servers and API endpoints, providing robust features for handling HTTP requests and responses. In
the CodeHive project, Express is used to build the backend APIs that facilitate communication
between the front-end and the MongoDB database.

MongoDB: MongoDB is a NoSQL database that stores data in a flexible, JSON-like format.
It is designed for scalability and high availability. CodeHive uses MongoDB to store and manage
user data, doctor information, appointments, and other system-related data, providing a robust and
scalable solution to meet the project’s needs.

4. Product Functions

• Users can join rooms, collaborate in real time, and share code.
• Participants can access and edit a shared code editor with real-time updates.
• Users can send and receive messages in the chat system.
• The project integrates a feature to save all relevant data (e.g., code, language, version,
console text, and chat messages) in MongoDB.
• Real-time saving of data ensures that all changes are updated immediately and
reflected for all users in the room.

10
5. Constraints:
• Only authorized users can access or modify room-specific code, chat, and data to ensure
secure collaboration.
• The application must maintain low latency and high responsiveness for real-time code
editing and messaging.
• Multiple users should be able to access and edit the same code simultaneously without
conflict.
• Real-time syncing and database integration must ensure consistency and integrity of all
shared data.

6. Assumptions and Dependencies

• A stable internet connection is assumed for real-time code collaboration and data
synchronization.
• MongoDB, Node.js with Express, and React.js are properly configured and deployed on
Render for backend and frontend services.

7. Specific Requirements

• Functional Requirements
• Non-Functional Requirement

7.1 Functional Requirements

Functional requirements identified for this system are listed below:


a. User can create a new room for real-time code collaboration.
b. Other users can join the room using a room ID or shared link.
c. All participants can collaboratively edit code in real-time.
d. Users can change programming language and version used in the editor.
e. A console feature is available to view outputs or errors.
f. A real-time chat panel is included for team communication.
g. A whiteboard or drawing board is included to help with collaborative visual
explanation.
h. All room data (code, language, console output, chat, etc.) is saved in
MongoDB and fetched back when a user rejoins the same room.

7.2 Non-Functional Requirements:

11
Non - Functional requirements identified for this system are listed below:

1. Usability Requirements:
• A clean and minimal UI design is provided to enhance ease of use.
• The application is accessible to users without requiring an account or prior technical
knowledge.

2. Performance Requirements:
• The system supports real-time synchronization of code, chat, and whiteboard across
multiple users simultaneously.
• All user inputs and changes are updated in the backend instantly and broadcast to other
users.

3. Reliability
• The room data is auto saved in MongoDB, ensuring users can continue their work even
after a page refresh.
• Data sync between users is handled using WebSocket’s (Socket.io) for smooth
collaboration.

4. Portability
• CodeHive is a web-based app accessible on any device with an internet connection and a
modern browser.
• Supports multiple operating systems like Windows, macOS, Linux, etc.

5. Security Techniques
• Each room is uniquely identified, and access is limited to users who have the room ID.
• All data transmission is secured using HTTPS protocol

8. Software Development Life Cycle Model

SDLC Model Used: Iterative Waterfall Model

12
Why Iterative Waterfall Model?
In the development of CodeHive, a collaborative real-time code editor, the classical waterfall model
posed limitations due to its rigid, non-adaptive structure. Therefore, the Iterative Waterfall Model
was adopted, as it allows for incremental improvements while maintaining a structured development
approach.

Since CodeHive involves multiple components like room creation, collaborative code editing, real-
time data sync, and chat, it was important to have flexibility in revisiting earlier stages when issues
or new requirements were discovered during later phases such as integration or testing.

The Iterative Waterfall Model provided feedback paths from each stage (e.g., requirement
gathering, system design, implementation) to its previous stages. This allowed for refining the
system without restarting the whole process. For instance, during the testing phase, if a
synchronization bug was found in real-time updates, it was possible to revisit the design or
implementation phase and fix the issue effectively.
This approach ensured that each iteration of CodeHive’s development was more robust, resulting in
a system that is scalable, responsive, and user-friendly—ideal for a collaborative coding platform.

Additional Factors Why We Chose Iterative Waterfall Model:

• Simple – Iterative waterfall model is very simple to understand and use. That’s why it is one
of the most widely used software development models.

• Cost-Effective – It is highly cost-effective to change the plan or requirements in the model.


Moreover, it is best suited for agile organizations.

13
• Well-organized – In this model, less time is consumed on documenting and the team can
spend more time on development

❖ Software Development Life Cycle

Computer software experts have adapted several approaches from older engineering fields, and for
developing new ones. For instance, divide and conquer a widely known technique for handling
more complex problems, is used in a few ways in software engineering.

The software engineering process, for example, is normally divided into phases. SDLC is a series of
steps which provides a model for development and lifecycle management of software. It varies
across industry and organization. But it has a standard. For this several system development life
cycle models have been created. Some of them are waterfall, spiral, fountain, build and fix.

Figure 01: Software Development Life Cycle

Following are the different phases of software development life cycle:

- Feasibility Study
- Requirement Definition
- System Specification
- System Design
- Program, Design, Coding

14
- Implementation
- Testing
- Changing Request Definition

➢ Feasibility Study
In the first stage of SDLC I must make measure feasibility study for the proposed system. There are
basically five parts to any effective Feasibility Study:

1. The Project Scope: I defined the project scope earlier. Users can write code, collaborate in real
time, and chat with others in the same room. Users can also run their code, draw on a whiteboard,
and use AI suggestions to improve code. This project has a large scope as it has the following
features which help in making it easy to use, understand and modify it.

• Easily collaborate on code • No need to switch between apps.


• To reduce errors using AI code suggestions
• To increase the accuracy and efficiency of the procedure
• Management of session, chat, and code data

2. The Current Analysis: In various platforms we must write code and share updates manually
through messages or screenshots. It is time-consuming and not efficient. Users must collect and
update information using separate tools. It needs multiple apps and takes input by human effort,
and there is a lot of interaction which is not efficiently done. If any modifications or updating is
required, it must be done separately. So, it is prone to error.

3. Requirements: User requires using the system simply a laptop, PC, or mobile phone to access
internet. Using the internet, it is very easy to write and execute code collaboratively.

4. Evaluation: In evaluation examine cost effectiveness of the system. It is cost effective as users
do not need to open multiple tools for sharing and executing code. Time is also saved. One can
collaborate and run code directly from home using internet.

5. Review: From the above analysis it may be concluded that the system would be useful, cost
effective, easy to use and will solve the manual system faults.

6. Testing:
Testing is the process of examining a software product to find errors. This process is crucial not only
for the code but for all the associated lifecycle products, including documentation and user manuals.

In the CodeHive project, the software testing process is divided into several phases. The first phase
involves unit testing, where individual components like code editing features, real-time

15
synchronization, and AI code suggestions are tested by developers. The second phase is integration
testing, where various modules (e.g., chat, drawing board, and real-time code updates) are
combined and tested as a group.

System testing is done on the entire platform, ensuring that all features work together seamlessly,
including code editing, collaboration, AI integration, and real-time communication. Acceptance
testing is performed by the intended users (e.g., developers and instructors) to ensure that the
system meets their expectations.
The basic unit of testing is the test case, which defines the specific aspect of the system being
tested, along with test conditions (input values), the environmental state (system setup), and the
expected behaviour given those conditions.

7. Implementation
The implementation stage of the CodeHive project is a critical phase that determines the success or
failure of the system. It involves the process of installing the system and making it operational in a
production environment. This phase begins once the system has been thoroughly tested and
accepted by the users.

In the SDLC model for CodeHive, the implementation involves deploying the system on a live
server environment, ensuring that all collaborative coding features, real-time chat, AI-driven
suggestions, and the drawing board are fully functional. The system is then made accessible to
users, allowing them to collaborate on coding projects seamlessly. User access, data
synchronization, and system performance are continuously monitored to ensure a smooth
experience.

8. Changing Request Definition


If any advanced or updated requirements arise after the delivery of the CodeHive system, this phase
addresses the processing of changes to the delivered system. In this stage, updates or modifications
to the system are analysed and incorporated based on user feedback or emerging needs. This kind of
changeable maintenance is crucial for keeping the system up-to-date and aligned with user
expectations.

For CodeHive, this might include adding new programming language support, improving AI
features, or enhancing real-time collaboration capabilities. The process ensures that the system
remains flexible and adaptable to meet evolving demands.

16
4. System Design and Implementation

▪ Gantt Chart

17
▪ PERT Chart

18
▪ ER Diagram

19
▪ Data Flow Diagram

A Data Flow Diagram (DFD) is a diagram that describes the flow of data and the processes that
change data throughout a system. It’s a structured analysis and design tool that can be used for
flowcharting in place of or in association with information. Oriented and process-oriented
system flowcharts. Four basics symbols are used to construct data flow diagrams. They are
symbols that represent data source, data flows, and data transformations and data storage.

▪ 0 Level DFD

20
• 1 Level DFD

 2 level DFD

21
Sequence Diagram:

22
• System Design
The architecture of CodeHive is engineered around the principles of consistency and completeness,
ensuring seamless real-time collaboration and robust data persistence. The CodeHive system is

23
engineered with core architectural principles of Consistency and Completeness to ensure seamless
performance in a collaborative, real-time environment.

• Consistency guarantees that all modules (code editor, chat, drawing board, etc.) interact
reliably across all user sessions.
• Completeness ensures that both frontend and backend behaviours are fully aligned, enabling
real-time collaboration and data persistence without functional gaps.

CodeHive is structured into the following core modules:

♦ User Module: Enables users to instantly create or join collaborative coding rooms, edit and
share code in real-time using Socket.io, communicate via group chat, collaborate visually on
a drawing board, export code, and receive pre-refresh alerts.

• AI Assistance Module: Integrates intelligent code suggestions and completions powered by


OpenAI’s GPT-4o-mini/Codex API. It provides live code review and debugging within the
coding environment.

24
• System Management Module: Handles secure generation and validation of 20-character
room IDs and usernames, maintains real-time global state synchronization via Redux, stores
and retrieves room data in MongoDB, cleans up inactive rooms after 7 days, and enables
screenshot capture of the drawing board.

• Data Modelling: Room-related data is stored in MongoDB, with each room’s state-including
code, chat logs, and user information-persisted for reliability and fast retrieval. Real-time
synchronization is achieved using Socket.io, and Indexed DB is leveraged on the front end
for rapid access to frequently used data.

• Room Collection – Data Model

25
26
• User Interface Design: The UI is designed for intuitive, responsive use across devices. Key
technologies include React.js for component-based development, Monaco Editor and Code
Mirror for rich code editing, and a focus on streamlined workflows for creating rooms,
editing code, chatting, and leveraging AI suggestions.

• Data Design: All critical data-code, user profiles, chat logs, and room metadata-are stored in
MongoDB. Real-time updates are synchronized via WebSocket (Socket.io), ensuring all users
see changes instantly. Indexed DB further accelerates frontend data access.

• Module Design

27
• Server-Side Implementation: The backend, built with Node.js and Express.js, processes
client requests, manages real-time data via Socket.io, interfaces with MongoDB, and
communicates with the OpenAI API for AI driven features.

• Real-time Collaboration: Socket.io ensures seamless synchronization of code edits, chat


messages, AI suggestions, and drawing board inputs across all users in a room, with each
room managed via real-time WebSocket connections.

28
• Multi-language Execution: Piston API enables execution and testing of code in multiple
programming languages within the platform.

29
• Implementation

The implementation stage of the CodeHive project is a critical phase that determines the success or
failure of the system. It involves the process of installing the system and making it operational in a
production environment. This phase begins once the system has been thoroughly tested and
accepted by the users.
In the SDLC model for CodeHive, the implementation involves deploying the system on a live
server environment, ensuring that all collaborative coding features, real-time chat, AI-driven
suggestions, and the drawing board are fully functional. The system is then made accessible to
users, allowing them to collaborate on coding projects seamlessly. User access, data
synchronization, and system performance are continuously monitored to ensure a smooth
experience.

❖ UI Implementation (Desktop)

30
Fig. 1. This is the Join Room Page

Fig. 2. Enter the Room Id and Username then click on Join Room
You can also generate a Random Room Id

31
Fig. 3. Ensure that the Room ID is under 40 characters or it will not be accepted.

Fig. 4 Please enter a Room ID with fewer than 40 characters to proceed.

32
Fig. 5 This is the Room Page code.

33
Fig 6: You can code in any language (JavaScript, Python, Java, C++, C) of your choice
and You can Copy the Room Id

• Share your Room Id with People whom you want to work with in the same room.
• They will join in the same room. You all can code together at Real Time

34
Fig. 7: When user with same Room Id joins that room its visible there.

35
Fig. 8: Automatic Code Suggestions

Fig.9: After Completing the program execute it and See the Output.

36
Fig. 10: All users will see the same things on their screen.
This is exactly what A Coding platform where users can Collaboratory Work at Real Time.
Every Changes by any Member of the Room is visible to other Members.

Fig. 11. You can also Download the Code File. It will the downloaded in the extension of the language
you are coding in.

37
Fig. 12. This is the Drawing Board having functionality like

▫ Pen & Highlighter with multiple color options and size scaling.
▫ Pan to move the image
▫ All the Members of the room will see this at real time
▫ Redo Undo the Drawing, draw shapes
▫ Take Screenshot and clear the board

38
Fig. 13 Drawing Board

Fig. 14: Real Time drawing

39
Fig. 15: This is the Chat Box

Fig. 16: This is how messages appear in the chat box

40
Fig. 17 Chat notifications and new members can also see the previous chats

Fig.18: Ask AI tool

41
Fig. 18 This is the AI Tool to seek help from AI.

5. Testing

42
Testing is the process of examining a software product to find errors. This process is crucial not only
for the code but for all the associated lifecycle products, including documentation and user manuals.

The objectives of the testing phase were:


• All critical tasks executed without bugs.
• Room creation and collaboration states were clearly visible.
• All input factors resulted in distinct, appropriate outputs.
• Functional simplicity and ease of use was validated.
• Security controls worked effectively.
In the CodeHive project, the software testing process is divided into several phases. The first phase
involves unit testing, where individual components like code editing features, real-time
synchronization, and AI code suggestions are tested by developers. The second phase is integration
testing, where various modules (e.g., chat, drawing board, and real-time code updates) are
combined and tested as a group.
System testing is done on the entire platform, ensuring that all features work together seamlessly,
including code editing, collaboration, AI integration, and real-time communication. Acceptance
testing is performed by the intended users (e.g., developers and instructors) to ensure that the
system meets their expectations.

The basic unit of testing is the test case, which defines the specific aspect of the system being
tested, along with test conditions (input values), the environmental state (system setup), and the
expected behaviour given those conditions.

The testing plan used for CodeHive included the following phases:

• Unit Testing
• Integration Testing
• System Testing
• Acceptance Testing

Unit Testing:
This was conducted for individual modules such as the code editor component, chat system, and
room ID generation functions. Each unit was tested in isolation using Jest and Mocha to ensure
correctness in core logic without integration dependencies. For example, test cases verified whether
socket events triggered accurate state updates and whether the AI code suggestions worked as
intended.

Integration Testing:

43
After successful unit testing, modules like the WebSocket based collaboration and AI assistance
APIs were integrated. The focus here was on verifying seamless interaction between components
like the real-time whiteboard and group chat, or code execution and user session states. Bugs related
to event timing or state desynchronization were addressed during this phase

System Testing:
Once integrated, the entire CodeHive application was tested. Test cases were derived from the
functional specifications (real-time sync, multiuser collaboration, code execution, etc.) to validate
end-to-end performance. Tests evaluated parameters like the response time of real-time updates, chat
message delivery reliability, and whiteboard drawing synchronization. System testing also included:

• Stress testing to check platform performance with concurrent users.

• Security testing for verifying Room ID authentication and code history access.

• Volume testing for checking MongoDB performance during high data activity.

• Usability testing for UI responsiveness on various screen sizes and devices

Acceptance Testing:
Upon completion of system testing, the platform was handed over to end users, including peer
developers and mentors, for final validation. Acceptance testing ensured that the project met all user
requirements such as

• Real-time code and drawing collaboration


• Chat functionality
• Reliable code execution
• Screenshot capturing

Testing Techniques used in the CodeHive project included:

White Box Testing:


This was used to validate the internal logic of features like socket event handling, AI assistance
functions, and room session cleanup routines. Control flow and decision coverage were considered
for test case design.

Black Box Testing:

44
This focused on the functional outputs of CodeHive's UI components. Testers verified expected
behaviour without looking into internal code logic, ensuring that all features worked according to
the specification from an end user’s perspective

➢ Remark
The entire CodeHive system passed all defined test cases across different levels. No critical errors
were found during testing, ensuring a robust and deployable product. The project is now ready for
final release and operational use.

45
6. Maintenance and Future
Scope of the Project

As CodeHive is a fully web-based application, its maintenance is relatively simple and can be
carried out remotely with minimal system requirements. Thanks to its clean, responsive, and user-
friendly interface, both beginners and experienced developers can use the platform with ease,
without requiring any additional installations or training.

In case users encounter any bugs or functionality issues, they can reach out directly to the
development team through the built-in feedback or contact sections of the platform. Additionally,
the About Us section contains the contact details of the development team, allowing users to report
issues or suggest improvements.

The development team welcomes feedback and offers full support to help users get familiar with the
platform. As part of our maintenance plan, periodic codebase reviews, dependency updates, and
performance optimizations are scheduled to ensure long-term stability and compatibility.

In the future, we aim to expand CodeHive with several new features, including:

• Video/voice call/audio call integration for live teaching and code walkthroughs.
• GitHub integration for version control and direct repository access. • User
leaderboard and progress tracking for academic institutions
• Our own trained AI model integration.
• Coding competition platform.

7. Limitations of the Project


46
➢ The current version of CodeHive runs only on web browsers and does not support a
dedicated desktop or mobile application.
➢ The platform was developed under a limited timeframe, so certain features like voice/video
calls or Git integration were kept for future iterations.
➢ Requires a stable internet connection for full functionality, as real-time collaboration and AI
integration depend on active server communication.

8. Conclusion

Considering all the implemented features and technologies, it is evident that CodeHive offers a
modern, interactive solution for collaborative programming and education. It empowers users to

47
write, review, and execute code in real-time with the support of AI assistance and synchronized
communication tools.

The implementation of CodeHive provides an efficient and accessible development environment


that supports teamwork, improves productivity, and facilitates learning and mentorship across
distances. Its integration of tools like a collaborative whiteboard, group chat, and AI code support
makes it a valuable resource for educators, students, professionals, and tech enthusiasts alike.
This project serves as a step toward redefining how developers collaborate and learn remotely. With
planned enhancements and scaling, CodeHive has the potential to become a go-to platform for
remote programming, coding bootcamps, and virtual hackathons.

48
9.Bibliography/References
➢ Technical References
❖ [1] Socket.IO, "Real-time application framework," 2023. [Online].
Available: https://socket.io/ (For WebSocket implementation)

❖ [2] OpenAI, "GPT-4 Technical Report," 2023. [Online].


Available: https://cdn.openai.com/papers/gpt-4.pdf (For AI code assistance)

❖ [3] Piston API, "Multi-language code execution engine," 2023. [Online]. Available:
https://github.com/engineer-man/piston (For code execution in C/C++/Python/etc.) [4]
MongoDB, "NoSQL database documentation," 2023. [Online]. Available:
https://www.mongodb.com/docs/ (For data persistence and TTL cleanup)

❖ [5] React.js, "Documentation for building UIs," 2023. [Online]. Available:


https://reactjs.org/docs/getting-started.html (For frontend architecture)

49

You might also like