A

Project Report
On
ONLINE CODE EDITOR
Submitted by
Omkar dharker-210510110009
Ruchi Rai- 210510112001
Hitesh Vaishnav- 210510106033

as
Partial fulfilment of Semester VI of
Bachelors of Computer Applications
for A.Y. 2023-2024

Under the Guidance of Manish

Joshi

Submitted To
Parul Institute of Computer Application,
Faculty of IT & Computer Science
Parul University
 Online Code Editor 2023-2024

PARUL INSTITUTE OF COMPUTER APPLICATION

CERTIFICATE

This is to certify that Omkar Dharkar, Ruchi Rai, Hitesh Vaishnav the
student of Parul Institute of Computer Application, has satisfactorily completed
the project entitled “ONLINE CODE EDITOR” as a part of course curriculum
in BCA semester-VI for the academic year 2023-2024 under guidance of

Enrollment Number: 210510112019

Enrollment Number: 210510110009

Enrollment Number: 210510106033

Quality of work Grade Sign of Internal

guide

Poor / Average / B /B+ / A / A+

Good /

Excellent

Date of submission:

HOD, Principal,

Dr. Hina Chokshi Dr Priya Swaminarayan

 Online Code Editor 2023-2024

Acknowledgement
The success and outcome of this project required a lot of guidance and assistance from many
people and we are extremely privileged to have got this all along the completion of our
project. All that we have done is only due to such supervision and assistance and we would
not forget to thank them.

We respect and thank Dr Priya Swaminarayan, Dean, FITCS for providing us an opportunity
to do the project work in BCA and giving us all support and guidance, which made us
complete the project duly. We are extremely thankful to Mam for providing her support and
guidance, although she had busy schedule managing the academic affairs.

We would not forget to remember Dr. Hina Chokshi, HOD, BCA department for her
encouragement and more over for her timely support and guidance till the completion of our
project work.

We owe our deep gratitude to our project guide, who took keen interest on our project work
and guided us all along, till the completion of our project work by providing all the necessary
information for developing a good system.

We are thankful to and fortunate enough to get constant encouragement, support and
guidance from our Parents, all Teaching staffs of BCA Department which helped us in
successfully completing our project work. Also, we would like to extend our sincere esteems
to all staff in laboratory for their timely support.
 Online Code Editor 2023-2024

INDEX
Content Page No.

1. Project Profile 01 - 05

1.1 Project Description 02

1.2 Existing System 02

1.3 Problem Statement 03

1.4 Proposed System 03

1.5 Scope & Outcomes 04

1.6 Tools & Technology 04

1.7 Project Plan 05

2. Requirement Analysis 06

2.1 Feasibility Study 06

a) Market Feasibility 07

b) Technical Feasibility 07

c) Financial Feasibility 07

d) Operational Feasibility 08

2.2 Users 09

2.3 Modules 09

2.4 Processed Model 10

2.5 Hardware & Software Requirements 10

3. System Flow Diagram 11

4. Data Flow Diagram (All Levels of DFDs) 12

 Online Code Editor 2023-2024

5. Use Case Diagram 16

6. Object Oriented Analysis and Design 17

6.1. Class Diagram 17

6.2. Sequence Diagram 18

6.3. Activity Diagram

7. Screenshots of Development Phase -1 15

8. Screenshots of Development Phase -2 16

9. Screenshots of Development Phase -3 16

10. Future Enhancement 17

11. Conclusion 18

12. References 24
 Online Code Editor 2023-2024

Chapter 1
Online Code Editor

1.1 Description
An online code editor is a web-based tool that allows developers to write, edit, debug,
and run code directly within a web browser without the need for installing any
specific software or integrated development environment (IDE) on their local
machine. These online editors are especially convenient for collaboration, quick
testing, learning, and coding on the go. Here are some key features and aspects of
online code editors:.

1.2 Existing System

A code editor in a project can encompass several aspects, functionalities, and
integrations that facilitate coding, debugging, collaboration, and project management.
Here's a breakdown of elements that might constitute the existing system within a
code editor

1.3 Problem Statements

an online code editor context identifies the challenges or issues that users,
developers, or the platform itself might encounter. Here are several problem
statements commonly associated with online code editors

1.4 Proposed System

An online code editor aims to address the identified challenges and improve the
overall functionality, usability, and efficiency of the platform. Here are some features
and improvements that could be part of a proposed system for an online code editor

Page | 1
 Online Code Editor 2023-2024

1.5 Scope & Outcomes

An online code editor pertain to the areas of improvement, goals, and expected
results that the platform aims to achieve. Here are scopes and potential outcomes in an
online code editor context
• Performance Enhancement: Scope: Improve loading times,
responsiveness, and execution speed for a smoother coding experience.
Reduced latency, faster code execution, and enhanced user satisfaction.
• Feature Enrichment: Introduce advanced features like debugging tools,
language support, integrated terminal, and collaboration functionalities.
Expanded capabilities, increased productivity, and a more comprehensive
development environment.
• Usability and Accessibility: Enhance user interface, navigation, and
accessibility features to cater to developers of varying skill levels.
Improved user experience, decreased learning curve, and increased
adoption rate.
• Collaboration and Teamwork: Strengthen real-time collaboration tools,
version control, and communication channels for seamless teamwork.
Streamlined collaborative workflows, clearer version tracking, and
enhanced productivity among teams.
• Security Measures: Implement robust security protocols, encryption, and
authentication mechanisms to safeguard user data and code. Enhanced data
protection, minimized security vulnerabilities, and increased user trust.

Page | 2
 Online Code Editor 2023-2024

1.6 Tools and Technology

Android Studio (Flamingo) Firebase (2022)

Java (JDK 17)

Page | 3
 Online Code Editor 2023-2024

1.7 Project Plan

The following shows the timing required for each module to be tested and successfully
operated in any type of device.
Development 75 Days Duration
phase
0to10 11to20 21to30 31to40 41to50 51to75 N
days day days days (days)
Days s days
Requirement 07

Gathering
Analysis 09

Design 10

Development 13
Phase 1

Development 13
Phase 2

Development 13
Phase 3

Documentation 10

Total time 75

(Days)

Project Kickoff and Planning 10-12-2023 to 15-12-2023

UI/UX Design 16-12-2023 to 15-01-2024

Backend Development 16-01-2024 to 28-02-2024

Frontend Development 01-03-2024 to 15-03-2024

Testing and debugging 16-03-24 to 23-03-2024

Deployment and Launch 24-03-24 to 31-03-24

Page | 4
 Online Code Editor 2023-2024

Chapter 2
Requirement Analysis

2.1 Feasibility Study

an online code editor involves assessing various aspects to determine the practicality,
viability, and potential success of such a platform. Here are the key components of a
feasibility study for an online code editor
2.1.1 Technical Feasibility:
Evaluate the technical requirements for hosting the online code editor, including
servers, databases, and other necessary infrastructure. Assess whether the platform
can handle simultaneous user access, large codebases, and real-time collaboration
without compromising performance. Ensure compatibility with different browsers,
devices, operating systems, and internet speeds to provide a seamless user experience.
2.1.2 Market Feasibility:
Evaluate existing online code editors, their features, strengths, weaknesses, and
market positioning to understand the competitive landscape. Understand user
preferences, pain points, and requirements to tailor the platform's features and
functionalities accordingly.

2.1.3 Financial Feasibility:

Estimate the costs involved in development, maintenance, infrastructure, security,
marketing, and ongoing updates. Determine potential revenue streams, such as
subscription plans, freemium models, advertisements, or enterprise licensing, to
ensure financial sustainability.

Page | 5
 Online Code Editor 2023-2024

2.2 Users of The System

In an online code editor, various types of users interact with the platform, each with
distinct needs, purposes, and roles. Understanding these user categories helps in tailoring
features and functionalities to cater to diverse user requirements. Here are some typical
user roles in an online code editor
2.2.1 Developers/Programmers:
Use the online code editor for personal projects, learning, experimenting, or quick
coding tasks. Utilize the editor for writing, editing, debugging, and collaborating on
larger projects or work-related tasks.

2.2.2 Students/Educational Users:

Use the editor for educational purposes, practicing coding exercises, assignments, or
following tutorials. Employ the platform for teaching coding, creating exercises,
sharing code examples, and assessing student work.

2.2.3 Teams/Collaborators:

Collaborate in real-time on coding projects, work together on codebases, share

feedback, and track changes. Work on group assignments or shared coding tasks
within an educational or professional setting.

2.3 Modules of The System

2.3.1 File Management Models:

Allows users to create new files or projects, specifying file types, names, and
locations. Enables users to select and open existing files or projects from their storage
or cloud accounts.

2.3.2 Settings and Preferences Modals:

Allows users to customize the editor's settings, such as themes, font size, indentation
preferences, and keyboard shortcuts. Provides options to set language specific
preferences or code formatting settings.

2.3.3 Confirmation Modals:

Prompts users to confirm the deletion of a file, folder, or code block to prevent
accidental removal. Appears when saving a file with an existing name, asking whether
to overwrite the existing file.

Page | 6
 Online Code Editor 2023-2024

2.4 Process Model

A process modal within an online code editor refers to a pop-up window or dialog box that
guides users through a specific workflow or process, providing step-by-step instructions or
options to complete a particular task. These modals help users navigate complex procedures
within the editor interface. Here are some examples of process modals that could be
incorporated into an online code editor

2.4.1 Code Collaboration Workflow:

A modal guiding user through the process of inviting others to collaborate on a
project. It might include options to send email invitations or generate shareable links.

2.4.2 Project Setup or Initialization:

A step-by-step modal that assists users in setting up a new project by defining project
details, selecting frameworks, configuring libraries, and choosing project templates.

2.4.3 Debugging Assistance:

Providing a modal with troubleshooting steps and tips for debugging code, including
setting breakpoints, inspecting variables, and using debugging tools effectively.

2.4.4 Task Management and Issue Tracking:

Assisting users in assigning tasks, setting priorities, adding descriptions, and
deadlines within a project management tool integrated into the editor.

2.4.5 Multi-File Operations:

A modal guiding user through the process of renaming multiple files or folders within
a project, ensuring consistency and preventing errors.

Page | 7
 Online Code Editor 2023-2024

2.2 Hardware Requirement

Hardware Components Specification

Processor Intel core I3, /I5

RAM 4GB/8GB

Hard disk 512GB/1TB

Monitor 15.6 color monitor or advance

Device Keyboard, Mouse

2.3 Software Requirement

Name of component Specification

Operating System Windows XP, windows10

Control Panel Node (NPM) must be installed.

Software development kit Google Chrome, Internet Explorer,

Mozilla Firefox (any appropriate
or suitable browser)

Programming Language PHP, HTML, JAVASCRIPT

Server Node.js Web Server

Page | 8
 Online Code Editor 2023-2024

Chapter 3
System Flow Diagram

Page | 9
 Online Code Editor 2023-2024

Chapter 4 Data Flow Diagram (All Levels)

Data Flow Diagram “Level 0”

Figure 4.1. Data Flow Diagram of Online Code Editor

Page | 10
 Online Code Editor 2023-2024

Data Flow Diagram “Level 1”

<Figure 4.2>. Data Flow Diagram of Online Code Editor

Page | 11
 Online Code Editor 2023-2024

Data Flow Diagram “Level 2” Code Execution Process

<Figure 4.3>. Data Flow Diagram of Online Code Editor “Level 2”

Page | 12
 Online Code Editor 2023-2024

Data Flow Diagram “Level 3”

<Figure 4.4>. Data Flow Diagram of Online Code Editor “Level 3”

Page | 13
 Online Code Editor 2023-2024

Chapter 5
Use Case Diagram (User Only)

<Figure 5>. Use Case Diagram of Online Code Editor

Page | 14
 Online Code Editor 2023-2024

Chapter 6
Object-Oriented Analysis and Design (OOAD)

<Figure 6>Class Diagram of Online Code Editor

Page | 15
 Online Code Editor 2023-2024

Sequence Diagram

<Figure 6.1> Sequence Diagram of Online Code Editor

Page | 16
 Online Code Editor 2023-2024

Chapter 7

7.1 Screenshot of Development Phase 1

Figure 7.1 UI Design

7.2 Code : Frontend

Figure 7.1.2 Design Code

Page | 17
 Online Code Editor 2023-2024

Chapter 8

8.1 Screenshot of Development Phase 2

Figure 8.1 UI Design

7.2 Code : Frontend

Figure 8.1.2 Frontend code

Page | 18
 Online Code Editor 2023-2024

Chapter 9

9.1 Screenshot of Development Phase 3

Figure 8.1 UI Design

9.2 Code : Backend Side

Figure 9.1.2 Backend code

Page | 19
 Online Code Editor 2023-2024

Chapter 10

10.1 Future Enhancements:

1. File Saving Feature: Implementing a file saving feature would allow users to store their
code projects directly within the online editor, providing convenience and ensuring that
work is preserved between sessions.

2. Git Integration: Integrating with Git version control would enhance collaboration and
streamline the development process by enabling users to commit, pull, and push changes
directly from the editor interface.

3. Font Customization: Offering easy-to-use font customization options, including the

ability to adjust font type, size, and style, would provide users with greater flexibility in
tailoring their coding environment to their preferences and needs.

Page | 20
 Online Code Editor 2023-2024

Chapter 11

Conclusion
Using an online code editor has many advantages, especially for people learning to code. It's
like having a super easy way to start coding without any setup hassle. You can watch coding
tutorials on YouTube and code at the same time, all in your web browser. Plus, you don't have to
wait for a big program like VS Code to load – you can just switch tabs and start coding right
away. It's quick, convenient, and lets you learn at your own pace, making coding more
accessible and fun for everyone.
Efficiency and Accessibility: Online code editors streamline coding by bypassing setup hassles,
enabling users to start coding instantly from any browser, thus lowering barriers for beginners.
Enhanced Learning: Users can watch coding tutorials on platforms like YouTube while coding
simultaneously in the browser, facilitating real-time application of knowledge and expediting
the learning curve.
Seamless Transition: Unlike traditional desktop IDEs with longer startup times, online code
editors provide instant access, allowing users to seamlessly switch between tabs for
uninterrupted coding and tutorial watching.
Time Efficiency: Online code editors eliminate the frustration of waiting for IDEs to load,
maximizing coding time and productivity.
Flexibility: Accessible from any internet-enabled device, online code editors offer unparalleled
flexibility, empowering users to code wherever and whenever inspiration strikes.

Page | 21
 Online Code Editor 2023-2024

References

[1] W. Kimpan, T. Meebunrot and B. Sricharoen, "Online code editor on Private cloud
computing," 2013 International Computer Science and Engineering Conference (ICSEC),
Nakhonpathom, Thailand, 2013, pp. 31-36, doi: 10.1109/ICSEC.2013.6694748.

[2] A Review on Server Based Code Editor Sonali R. Gujarkar, Samprada D.Nimrad,
Shital Meshram INTERNATIONAL JOURNAL FOR RESEARCH IN EMERGING
SCIENCE AND TECHNOLOGY, SPECIALISSUE-1-JAN-2017

[3] Kurniawan, Aditya & Soesanto, Christine & Wijaya, Joe. (2015). CodeR: Real-time
Code Editor Application for Collaborative Programming. Procedia Computer Science.
59. 510-519. 10.1016/j.procs.2015.07.531.

[4] International Research Journal of Engineering and Technology (IRJET), BROWSER

BASED CODE EDITOR https://www.irjet.net/archives/V8/i5/IRJET-V8I5440.pdf

[5] Special thanks to Mr. Ankit Patidar for his valuable guidance and
mentorship in training our team on the “MERN stack” During the
Internship period at Amplify Technologies.

Page | 22