CODESIV

Major project report submitted

in partial fulfillment of the requirement for award of the degree of

Bachelor of Technology
in
Computer Science & Engineering

By

PRASANTH A R (19UECN0004) (VTU 11824)

Under the guidance of

Dr. R. SRINIVASAN, M. E, Ph. D
PROFESSOR

DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING

SCHOOL OF COMPUTING

VEL TECH RANGARAJAN DR. SAGUNTHALA R&D INSTITUTE OF

SCIENCE & TECHNOLOGY
(Deemed to be University Estd u/s 3 of UGC Act, 1956)
Accredited by NAAC with A++ Grade
CHENNAI 600 062, TAMILNADU, INDIA

April, 2023
 CODESIV

Major project report submitted

in partial fulfillment of the requirement for award of the degree of

Bachelor of Technology
in
Computer Science & Engineering

By

PRASANTH A R (19UECN0004) (VTU 11824)

Under the guidance of

Dr. R. SRINIVASAN, M. E, Ph. D
PROFESSOR

DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING

SCHOOL OF COMPUTING

VEL TECH RANGARAJAN DR. SAGUNTHALA R&D INSTITUTE OF

SCIENCE & TECHNOLOGY
(Deemed to be University Estd u/s 3 of UGC Act, 1956)
Accredited by NAAC with A++ Grade
CHENNAI 600 062, TAMILNADU, INDIA

April, 2023
 CERTIFICATE
It is certified that the work contained in the project report titled “CODESIV” by “PRASANTH A R
(19UECN0004) (VTU 11824)” has been carried out under my supervision and that this work has not
been submitted elsewhere for a degree.

Signature of Supervisor
Dr. R. Srinivasan
Professor
Computer Science & Engineering
School of Computing
Vel Tech Rangarajan Dr. Sagunthala R&D
Institute of Science & Technology
April, 2023

Signature of Head of the Department Signature of the Dean

Computer Science & Engineering Dr. V. Srinivasa Rao
School of Computing Professor & Dean
Vel Tech Rangarajan Dr. Sagunthala R&D Computer Science & Engineering
Institute of Science & Technology School of Computing
April, 2023 Vel Tech Rangarajan Dr. Sagunthala R&D
Institute of Science & Technology
April, 2023

i
 DECLARATION

I declare that this written submission represents my ideas in my own words and where others’ ideas or
words have been included, I have adequately cited and referenced the original sources. I also declare
that I have adhered to all principles of academic honesty and integrity and have not misrepresented or
fabricated or falsified any idea/data/fact/source in my submission. I understand that any violation of
the above will be cause for disciplinary action by the Institute and can also evoke penal action from
the sources which have thus not been properly cited or from whom proper permission has not been
taken when needed.

PRASANTH A R
Date: / /

ii
 APPROVAL SHEET

This project report entitled “CODESIV” by “PRASANTH A R (19UECN0004)” is approved for the
degree of B.Tech in Computer Science & Engineering.

Examiners Supervisor

Dr. R. Srinivasan, M. E, Ph. D

Professor

Date: / /
Place:

iii
 ACKNOWLEDGEMENT

We express our deepest gratitude to our respected Founder Chancellor and President Col. Prof.
Dr. R. RANGARAJAN B.E. (EEE), B.E. (MECH), M.S (AUTO),D.Sc., Foundress President Dr.
R. SAGUNTHALA RANGARAJAN M.B.B.S. Chairperson Managing Trustee and Vice President.

We are very much grateful to our beloved Vice Chancellor Prof. S. SALIVAHANAN, for provid-
ing us with an environment to complete our project successfully.

We record indebtedness to our Professor & Dean, Department of Computer Science & Engi-
neering, School of Computing, Dr. V. SRINIVASA RAO, M.Tech., Ph.D., for immense care and
encouragement towards us throughout the course of this project.

We are thankful to our Head, Department of Computer Science & Engineering, Dr.M.S. MU-
RALI DHAR, M.E., Ph.D., for providing immense support in all our endeavors.

We also take this opportunity to express a deep sense of gratitude to our Internal Supervisor
Dr. R. SRINIVASAN, M. E, Ph. D., for his cordial support, valuable information and guidance, he
helped us in completing this project through various stages.

A special thanks to our Project Coordinators Mr. V. ASHOK KUMAR, M.Tech., Ms. C.
SHYAMALA KUMARI, M.E., for their valuable guidance and support throughout the course of the
project.

We thank our department faculty, supporting staff and friends for their help and guidance to com-
plete this project.

PRASANTH A R (19UECN0004)

iv
 ABSTRACT

An online code execution platform is a web application that allows users to write
code in their preferred programming language and execute it within the platform. It
provides a virtual workspace to write quick snippets or even large projects . The pri-
mary goal of CodeSiv is to create such an online platform that allows users to write,
run, and display the results of their code through a terminal. The front-end of the
CodeSiv platform will be powered by Monaco Editor, a browser-based code editor
that supports syntax highlighting, autocompletion, and other features. The backend
of the CodeSiv platform will use an open-source API called Judge0 for compiling
and executing programming languages. Judge0 supports over 40 different program-
ming languages, including popular languages such as Java, Python, C++, JavaScript,
and Ruby. It provides a sandboxed environment for running the code and prevents
malicious code from causing harm to the system. The CodeSiv platform will also in-
clude a database powered by Firebase for user authentication. This will enable users
to create accounts, log in, and save their code snippets and projects. The database
will be highly scalable and secure, ensuring that user data is protected. The CODE-
SIV can be used to achieve small and quick milestones without needing to install
each and every packages. Hence CODESIV is a vital tool for developers and valu-
able resource for new programmers who wish to start programming.

Keywords: rapidapi, judge0, monaco, tailwind, reactjs, code editor, cloud com-
puting

v
 LIST OF FIGURES

4.1 Architecture Diagram of CODESIV . . . . . . . . . . . . . . . . 12

4.2 DataFlow Diagram(DFD) of CODESIV . . . . . . . . . . . . . . 14
4.3 Use Case Diagram of CODESIV . . . . . . . . . . . . . . . . . . 15
4.4 Class Diagram of CODESIV . . . . . . . . . . . . . . . . . . . . 16
4.5 Sequence Diagram of CODESIV . . . . . . . . . . . . . . . . . . 17
4.6 Collaboration diagram of CODESIV . . . . . . . . . . . . . . . . 18
4.7 Activity Diagram of CODESIV . . . . . . . . . . . . . . . . . . . 19

5.1 Input Design for CODESIV . . . . . . . . . . . . . . . . . . . . . 24

5.2 Output Design for CODESIV . . . . . . . . . . . . . . . . . . . . 25
5.3 Unit Testing Result for CODESIV . . . . . . . . . . . . . . . . . 26
5.4 Unit Testing Result for CODESIV . . . . . . . . . . . . . . . . . 26
5.5 Test Input for CODESIV . . . . . . . . . . . . . . . . . . . . . . 27
5.6 Test Output 1 for CODESIV . . . . . . . . . . . . . . . . . . . . 27
5.7 Test Output 2 for CODESIV . . . . . . . . . . . . . . . . . . . . 28
5.8 Test Output 3 for CODESIV . . . . . . . . . . . . . . . . . . . . 28

6.1 Output 1 for CODESIV . . . . . . . . . . . . . . . . . . . . . . . 34

6.2 Output 2 for CODESIV . . . . . . . . . . . . . . . . . . . . . . . 34
6.3 Output 3 for CODESIV . . . . . . . . . . . . . . . . . . . . . . . 35

8.1 INTERNSHIP OFFER LETTER from VIRTUSA . . . . . . . . 38

9.1 Summary of Plagiarism Report . . . . . . . . . . . . . . . . . . . 39

10.1 Poster Presentation . . . . . . . . . . . . . . . . . . . . . . . . . 45

vi
 LIST OF TABLES

3.1 COMPARISON OF SELECTED PLATFORMS . . . . . . . . . . . 8

vii
 LIST OF ACRONYMS AND
ABBREVIATIONS

API Application Programmable Interface

AWS Amazon Web Services
CPU Central Processing Unit
CSS Cross Styling Sheet
ENV Environmental Variable
DFD Data Flow Diagram
DOM Document Object Model
GB GigaByte
HTTP Hyper Text Transfer Protocal
IDE Integrated Development Environment
IEC International Electrotechnical Commission
ISO International Organization for Standardization
MB MegaByte
OAuth Open Authentication
OCP Online Code Programmers
OPP Online Programmers
PHP Hypertext Preprocessor
RAM Random Access Memory
REST Representational state transfer
SQL Structured Query Language
UI/UX User Interface / User Experiance
URL Uniform Resource Location
XSS Cross-Site Scripting

viii
 TABLE OF CONTENTS

Page.No

ABSTRACT v

LIST OF FIGURES vi

LIST OF TABLES vii

LIST OF ACRONYMS AND ABBREVIATIONS viii

1 INTRODUCTION 1
1.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
1.2 Aim of the Project . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.3 Project Domain . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.4 Scope of the Project . . . . . . . . . . . . . . . . . . . . . . . . . . 3

2 LITERATURE REVIEW 4

3 PROJECT DESCRIPTION 7
3.1 Existing System . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
3.2 Proposed System . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
3.3 Feasibility Study . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
3.3.1 Economic Feasibility . . . . . . . . . . . . . . . . . . . . . 9
3.3.2 Technical Feasibility . . . . . . . . . . . . . . . . . . . . . 9
3.3.3 Social Feasibility . . . . . . . . . . . . . . . . . . . . . . . 10
3.4 System Specification . . . . . . . . . . . . . . . . . . . . . . . . . 10
3.4.1 Hardware Specification . . . . . . . . . . . . . . . . . . . . 10
3.4.2 Software Specification . . . . . . . . . . . . . . . . . . . . 10
3.4.3 Standards and Policies . . . . . . . . . . . . . . . . . . . . 11

4 METHODOLOGY 12
4.1 General Architecture . . . . . . . . . . . . . . . . . . . . . . . . . 12
4.2 Design Phase . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
4.2.1 Data Flow Diagram . . . . . . . . . . . . . . . . . . . . . . 14
 4.2.2 Use Case Diagram . . . . . . . . . . . . . . . . . . . . . . 15
4.2.3 Class Diagram . . . . . . . . . . . . . . . . . . . . . . . . 16
4.2.4 Sequence Diagram . . . . . . . . . . . . . . . . . . . . . . 17
4.2.5 Collaboration diagram . . . . . . . . . . . . . . . . . . . . 18
4.2.6 Activity Diagram . . . . . . . . . . . . . . . . . . . . . . . 19
4.3 Algorithm & Pseudo Code . . . . . . . . . . . . . . . . . . . . . . 20
4.3.1 Algorithm . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
4.3.2 Pseudo Code . . . . . . . . . . . . . . . . . . . . . . . . . 20
4.4 Module Description . . . . . . . . . . . . . . . . . . . . . . . . . . 22
4.4.1 Module 1: Components . . . . . . . . . . . . . . . . . . . 22
4.4.2 Module 2: Hooks . . . . . . . . . . . . . . . . . . . . . . . 22
4.4.3 Module 3: Lib . . . . . . . . . . . . . . . . . . . . . . . . 22
4.4.4 Module 4: Constants and Utils . . . . . . . . . . . . . . . . 22
4.4.5 Module 5: User Authentication . . . . . . . . . . . . . . . 22
4.4.6 Module 6: FireBase’s CloudFireStore Database . . . . . . . 22
4.5 Steps to execute/run/implement the project . . . . . . . . . . . . . . 23
4.5.1 Step 1: Clone Project into Local System . . . . . . . . . . . 23
4.5.2 Step 2: Register and Setup API keys . . . . . . . . . . . . . 23
4.5.3 Step 3: Configuring the Environmental Variables . . . . . . 23
4.5.4 Step 4: Start the Local Server . . . . . . . . . . . . . . . . 23

5 IMPLEMENTATION AND TESTING 24

5.1 Input and Output . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
5.1.1 Input Design . . . . . . . . . . . . . . . . . . . . . . . . . 24
5.1.2 Output Design . . . . . . . . . . . . . . . . . . . . . . . . 25
5.2 Testing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
5.3 Types of Testing . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
5.3.1 Unit testing . . . . . . . . . . . . . . . . . . . . . . . . . . 25
5.3.2 Integration testing . . . . . . . . . . . . . . . . . . . . . . 26

6 RESULTS AND DISCUSSIONS 29

6.1 Efficiency of the Proposed System . . . . . . . . . . . . . . . . . . 29
6.2 Comparison of Existing and Proposed System . . . . . . . . . . . . 30
6.3 Sample Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
6.3.1 App.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
6.3.2 Login.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
7 CONCLUSION AND FUTURE ENHANCEMENTS 36
7.1 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
7.2 Future Enhancements . . . . . . . . . . . . . . . . . . . . . . . . . 36

8 INDUSTRY DETAILS 37
8.1 Industry name . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
8.1.1 Duration of Internship (From Date - To Date): . . . . . . . 37
8.1.2 Duration of Internship in months: . . . . . . . . . . . . . . 37
8.1.3 Industry Address . . . . . . . . . . . . . . . . . . . . . . . 37
8.2 Internship offer letter . . . . . . . . . . . . . . . . . . . . . . . . . 38
8.3 Project Commencement Form . . . . . . . . . . . . . . . . . . . . 38
8.4 Internship Completion certificate . . . . . . . . . . . . . . . . . . . 38

9 PLAGIARISM REPORT 39

10 SOURCE CODE & POSTER PRESENTATION 40

10.1 Source Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
10.1.1 Register.js . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
10.1.2 CodeEditorWindow.js . . . . . . . . . . . . . . . . . . . . 41
10.1.3 Dashboard.js . . . . . . . . . . . . . . . . . . . . . . . . . 42
10.1.4 ThemeDropDown.js . . . . . . . . . . . . . . . . . . . . . 44
10.2 Poster Presentation . . . . . . . . . . . . . . . . . . . . . . . . . . 45

References 46
 Chapter 1

INTRODUCTION

1.1 Introduction

An online code editor is a web-based tool that allows developers to write, test,
and debug code without the need for a local development environment. It eliminates
the need for intricate installation and setup procedures and provides a consistent
development environment accessible from any internet-connected device. React is
a popular JavaScript library for creating user interfaces, and it can be leveraged to
build robust online code editors.
React-based online code editors offer a range of features that simplify and ac-
celerate the development process. These features include syntax highlighting, auto-
completion, and instant code execution. Syntax highlighting makes it easier to read
and understand code by highlighting different types of code elements with different
colors. Auto-completion provides suggestions for completing code based on what
has already been typed, reducing the likelihood of errors and speeding up the coding
process. Instant code execution allows developers to see the results of their code
changes immediately, without having to run a separate build or deploy process.
Another benefit of online code editors is their ability to facilitate collaboration
on code and projects in real-time. Many online code editors integrate with various
web applications, such as version control systems like GitHub, to allow multiple
developers to work on the same codebase simultaneously. This can increase produc-
tivity and reduce the time it takes to complete a project.
React-based online code editors can also be customized and extended to meet
specific development needs. Developers can add new features and functionality, such
as support for different programming languages or libraries, by building custom plu-
gins or components. In summary, building an online code editor using React offers
several benefits, including ease of use, convenience, collaboration, and customiza-
tion. It can simplify and accelerate the development process, making it more efficient
and productive, while also offering a consistent development environment accessible
from any internet-connected device.

1
1.2 Aim of the Project

The aim of “CODESIV” is to empower developers to write better code more

efficiently, regardless of their location or device, while also fostering collaboration
and knowledge sharing within development teams. By using React, the editor should
be able to deliver a faster output, with the ability to support multiple programming
languages. The editor should also be easily customizable and extendable, allowing
developers to add new features and functionality as needed.

1.3 Project Domain

CODESIV is a React-based online code editor that falls under the domain of
web development and software engineering. As the web continues to evolve, web
development has become a critical area of focus for developers, and the need for
efficient and productive tools for web development has increased.
CODESIV is particularly useful for developers and programmers who work on
web-based projects that involve JavaScript, React, and other popular web technolo-
gies. JavaScript is the programming language of the web, and it is used extensively
for front-end development, as well as back-end development using Node.js. React is
a widely-used JavaScript library for building user interfaces, and it has become the
de facto standard for building complex and dynamic web applications.
Web development involves a range of technologies, including HTML, CSS,
JavaScript, and various web frameworks and libraries. A robust online code editor
like CODESIV can simplify the development process by providing a browser-based
environment for writing, testing, and debugging code, eliminating the need for a
local development environment. This is particularly beneficial for developers who
need to work on different devices or while traveling, as they can access the editor
from any internet-connected device.
CODESIV’s features, such as syntax highlighting, auto-completion, and instant
code execution, make it a powerful tool for web development. Syntax highlighting
helps developers read and understand code by highlighting different types of code
elements with different colors. Auto-completion provides suggestions for complet-
ing code based on what has already been typed, reducing the likelihood of errors and
speeding up the coding process. Instant code execution allows developers to see the
results of their code changes immediately, without having to run a deploy process.

2
 Overall, the project domain for an Online Code Editor using React is a rapidly
growing and dynamic space, with new technologies and tools emerging all the time.
By building a flexible, reliable, and easy-to-use online code editor using React, de-
velopers can stay at the forefront of this exciting domain and continue to deliver
high-quality, innovative solutions for their clients and users.

1.4 Scope of the Project

The scope of an online code editor using React is vast and varied, offering
a range of features and capabilities to suit the needs of developers across different
industries and disciplines. At a minimum, the editor should offer support for multiple
programming languages, including popular languages such as JavaScript, Python,
and Ruby. It should also provide a user-friendly interface with features like syntax
highlighting, auto-completion, and real-time code execution to help streamline the
development process.
Beyond its use as a standalone tool, an online code editor using React can also
be integrated into larger web applications, such as content management systems, e-
commerce platforms, and project management tools. This integration can help to
create a more streamlined and cohesive development experience, allowing develop-
ers to work more efficiently and collaboratively with their team members. Overall,
the scope of an online code editor using React is broad and dynamic, offering a range
of possibilities for developers looking to streamline their workflow and improve their
productivity.

3
 Chapter 2

LITERATURE REVIEW

In recent years, there has been a surge in the development of online programming
platforms that provide users with a convenient way to write and test code in multiple
programming languages. These platforms offer ample opportunities for individuals
to enhance and refine their programming abilities, and they are particularly useful for
beginners who need a user-friendly interface to learn the basics. This paper presents a
review of some of the recent research and publications related to online programming
platforms and their features.

A online compiler tool developed by Sharma et al [1] provides users with a conve-
nient way to write and test code in multiple programming languages. The tool’s user-
friendly interface makes it easier for users to write optimized code, and it includes
syntax highlighting and error checking to improve code accuracy. Additionally, the
authors have utilized this tool in their studies to conduct experiments and simula-
tions, making use of cloud platforms to run simulations on large-scale datasets. This
allows researchers to conduct experiments that would have been previously difficult
or impossible to perform due to hardware limitations. The use of this tool in ex-
periments also makes it easier for researchers to collaborate with one another, share
code, and conduct remote experiments

Nishant et al [7] developed a web-based application for online programming that

allows users to select the programming language of their choice and start coding
directly in their web browser. The application was built using React, a popular
JavaScript library for building user interfaces. The authors of the paper mentioned
that their primary focus was to create a seamless and user-friendly coding environ-
ment for programmers, which eliminates the need for lengthy configuration and in-
stallation processes associated with desktop-based IDEs.

4
 Gandraß et al [6] have reviewed several online programming platforms and found
that they offer innovative techniques, including game-based programming assign-
ments, to inspire and engage users. However, none of the existing platforms tackle
crucial software engineering aspects, such as team-based programming, code qual-
ity, maintainability, adequate program architecture, and code reviews. They have
divided the platforms into two groups: Introductory OPPs and Professional OPPs.

Bau et al [2] have introduced a novel approach to coding that aims to make the
process more accessible to beginners. This is achieved through the incorporation
of block-based editing, which simplifies the task of writing code by reducing the
cognitive load required. This means that users can focus more on the logical flow
of the program rather than the syntax and structure of the code. The authors’ work
is based on earlier research into block-based programming environments such as
Scratch [9], which have been shown to be effective in teaching coding concepts to
young students. In Bau‘s approach, users are provided with a set of blocks that
represent various programming constructs such as loops, conditionals, and variables.
These blocks can be combined in a drag-and-drop manner to create functioning code.

According to Doernhoefer’s article [3], there are a variety of online resources

available that can assist software engineers in their work. These resources include
online journals, discussion groups, and software repositories. Online journals are
a great resource for software engineers who want to stay up-to-date on the latest
research and trends in the field. By reading these journals, professionals can gain
insights into new tools, techniques, and best practices. They can also learn about the
latest advancements in areas such as software testing, quality assurance, and project
management. Software repositories are yet another valuable resource for software
engineers. These repositories contain a vast array of software tools, libraries, and
frameworks that can be used to streamline development processes and improve the
quality of software products. By leveraging these resources, engineers can save time
and effort while also creating better software products. Discussion groups are an-
other useful resource for software engineering professionals. These groups provide
a forum for individuals to ask questions and seek advice on specific problems or is-

5
sues. Through these discussions, engineers can learn from their peers and gain new
insights into how to solve difficult problems.

An increasing number of high school teachers are utilizing existing mass open
online courses (MOOCs) to teach programming basics [5]. However, these courses
typically offer a limited set of tools and features for students to use, which may not
be sufficient for advanced learners. Another cloud-based online platform [4] offers
online coding services and fosters a unique social experience by enabling real-time
tracking and updates during the programming process, facilitating the discovery of
interesting and unexpected input values during internships.

Online programming platforms have become increasingly popular, providing users

with a convenient and accessible way to write and test code in multiple programming
languages. These platforms offer a range of features to help users write optimized
code, including syntax highlighting, error checking, and game-based programming
assignments. However, more work needs to be done to address crucial software
engineering aspects such as team-based programming, code quality, maintainabil-
ity, adequate program architecture, and code reviews. Overall, online programming
platforms have the potential to enhance and refine programming abilities, making it
easier for beginners to learn and advanced learners to hone their skills.

To work with program code and to hone programming skills, the student must
master the syntax and design, understand the principles and methods of problem-
solving, their context, while performing only laboratory or practical work, it is not
always sufficient. And in the case of distance learning, teachers for productive work
with students of computer specialties need, on the one hand, to take measures to
increase the cognitive activity of higher education, on the other – not to overload
students. The ideal tool, according to the authors, is to diversify the learning process
through the use of online programming simulators (or OCP)

6
 Chapter 3

PROJECT DESCRIPTION

3.1 Existing System

While there are many online code compilers have become increasingly popular,
the existing methodology have some potential disadvantages that are worth consid-
ering:

1. Limited offline functionality: An online code editor/compiler may not work

without an internet connection, which can be inconvenient for users who need
to work on their code offline.
2. Resource limitations: Online code compilers may have resource limitations
that can affect the user experience. For example, the amount of memory or
CPU time allotted to a user may be limited, which can affect the performance
of the code.

Overall, while online code compilers offer many benefits, it’s important to
consider these potential disadvantages while accessing the existing system.

3.2 Proposed System

The proposed system “CODESIV” have several advantages, including:

1. Cross-platform compatibility: React is a popular JavaScript library that is

compatible with different operating systems and web browsers. An online
code editor built with React can be used on any device with internet access.
2. Scalability: React is highly scalable and can handle a large volume of users.
An online code editor built with React can accommodate a growing user base
without sacrificing performance.
3. Security: React has built-in security features that protect against common web
application vulnerabilities like cross-site scripting (XSS) and SQL injection

7
 attacks. An online code editor built with React can be made more secure
by implementing best practices like input validation and using secure coding
techniques.

An overview of the analysed platforms and some of their properties is given in

Table 3.1
Platform L R C F V T S Q
Code Monkey 1 × ∼ × × ×
Edabit 8 × × × × × ×
LightBoat 1 × × × × × ×
HackerRank 23 × × × ×
CodeWars 27 × × ×

Table 3.1: COMPARISON OF SELECTED PLATFORMS

L: supported Languages R: Recruiting C: Competition
F: Visual Feedback V: Version Control T: Team-play
S: Supportive Editor Q: Code Quality Feedback
× : N o ∼: Partial : Yes

3.3 Feasibility Study

The development of an online code editor using React is a feasible project. Re-
act is a popular JavaScript library that can be used to build complex and interactive
user interfaces. Online code editors are in high demand, especially for programmers
who work remotely or collaborate on coding projects. By building an online code
editor using React, you can provide a seamless coding experience with real-time up-
dates and features like syntax highlighting and auto-completion.

However, before embarking on this project, it is important to consider the tech-

nical feasibility, market demand, and financial viability of the product. You will need
to ensure that the editor is scalable, secure, and has enough resources to handle a high
volume of users. Additionally, you will need to conduct market research to identify
your target audience and assess their willingness to pay for an online code editor.

Overall, with careful planning and execution, CODESIV can be a successful

and has feasibility.

8
3.3.1 Economic Feasibility

An economic feasibility study for CODESIV would include evaluating the

costs associated with developing and maintaining the online code editor platform, as
well as projecting potential revenue streams.

The development costs for an online code editor using React would likely
involve expenses for hiring developers, purchasing software licenses, and securing
servers for hosting the platform. Ongoing maintenance costs may include server and
software updates, customer support, and marketing expenses.

Revenue streams for an online code editor platform could include subscrip-
tions, paid upgrades for additional features, and partnerships with other companies
or educational institutions. To assess the feasibility of these revenue streams, market
research would be necessary to determine the target audience, potential demand, and
competitive landscape.

Overall, an economic feasibility study for an Online Code Editor Using React
would involve careful analysis of both the costs and potential revenue streams to
determine the financial viability of the project.

3.3.2 Technical Feasibility

Online code editors are increasingly popular as they allow users to write and
test code without the need for additional software installations. Using React, a pop-
ular JavaScript library, for an online code editor is technically feasible and has nu-
merous benefits.

React provides a high level of modularity and allows for the creation of
reusable UI components. It also provides efficient virtual DOM rendering, which
reduces the number of updates required when editing code in real-time. Addition-
ally, React is backed by a large and active community, providing access to a wide
range of libraries and tools.

Overall, the technical feasibility of building an online code editor using React
is high, and the library’s features and community support make it an excellent choice.

9
3.3.3 Social Feasibility

The social feasibility of an online code editor using React is very high due
to the widespread adoption of this technology by developers. React is a popular
JavaScript library that allows developers to create complex user interfaces with ease.
With the rise of remote work and the need for online collaboration, an online code
editor using React can greatly benefit developers by enabling real-time collaboration,
version control, and remote code sharing.

Additionally, an online code editor can create an inclusive and accessible en-
vironment for developers who may not have access to high-powered computers or
software, or who may not be able to work in a traditional office setting. It also allows
for a wider range of skill levels to collaborate and learn from each other in a safe and
supportive environment.

Overall, the social feasibility of an online code editor using React is high, as
it meets the demands of modern developers and promotes collaboration, inclusively,
and accessibility in the tech community.

3.4 System Specification

Minimum system requirements for running the CODESIV are:

3.4.1 Hardware Specification

• Processor: Intel Pentium 4 processor or equivalent

• Memory: 4GB RAM
• Storage: 2048MB of available hard disk space

3.4.2 Software Specification

• Operating System: Windows 8 or later, macOS 10.13 High Sierra or later, or

Linux
• Web Browser: Latest version of Google Chrome, Mozilla Firefox, Safari, or
Microsoft Edge

10
 • Front-End: React Framework, Tailwind CSS
• Back-End: NodeJS, Judge0

Note that the above requirements are minimum and may vary depending on the
speed of the internet connection and the number of users accessing the application
simultaneously. It is recommended to have a more powerful system configuration
for a smoother experience.

3.4.3 Standards and Policies

Data Protection Policies:

The online code editor should have policies and procedures in place to protect
user data, including personal information and code snippets. This may include en-
crypting data, regularly backing up data, and limiting access to sensitive data.

Open Source Policies:

If the online code editor is open source, it should adhere to open source poli-
cies, such as providing proper attribution and licensing, maintaining an active com-
munity, and following best practices for open source development.
Standard Used: ISO/IEC 27001

11
 Chapter 4

METHODOLOGY

4.1 General Architecture

Figure 4.1: Architecture Diagram of CODESIV

The Figure 4.1 is the general architecture of an CODESIV typically includes

the following components:
• Front-End: The front-end is built using React, a JavaScript library for build-
ing user interfaces. It includes the code editor window, console window, and
menu bar, as well as any additional user interface components such as settings
or preferences. The front-end communicates with the server using HTTP re-
quests.

12
 • Code Execution: The code execution component is responsible for executing
the code entered by the user. It typically includes a runtime environment such
as Node.js, a container such as Docker, or a cloud-based service such as AWS
Lambda. The output of the code execution is sent back to the front-end for
display in the console window.
• User Authentication: The user authentication component is responsible for au-
thenticating users and managing user accounts. It typically includes a database
to store user credentials, as well as an authentication server or framework such
as Passport.js or OAuth.
• Judge0 API: Judge0 API is a cloud-based platform that provides developers
with easy-to-use APIs for testing and executing code. It supports a variety
of programming languages, compilers, and interpreters. The API also allows
for custom input and output formats, and provides detailed error messages
and debugging information. Judge0 API is widely used by coding platforms,
education providers, and coding communities.
• Third-Party Libraries: The online code editor may also use third-party li-
braries and frameworks for additional functionality, such as code highlight-
ing or autocompletion. These libraries may be included in the front-end or
back-end components, depending on their functionality.
Overall, the general architecture of an online code editor using React is de-
signed to provide a user-friendly interface for writing and executing code online
while ensuring security and data protection.

13
4.2 Design Phase

4.2.1 Data Flow Diagram

Figure 4.2: DataFlow Diagram(DFD) of CODESIV

The above Figure 4.2 explains that how the user’s data flows through the ap-
plication and the code editor UI built with React is the primary interface through
which the user interacts with the system. The user’s inputs are stored in React state
variables, and when the user requests to execute the code, it is sent to the server for
execution. Once the server executes the code, the output is returned to the React
code editor UI, where it is displayed to the user.
• User interacts with the online code editor UI, which is built using React com-
ponents.
• User inputs code into the code editor UI, which is stored in a React state vari-
able.
• User requests to execute the code.
• The code is sent to the server for execution.
• The server executes the code and returns the output.

14
 • The output is displayed to the user in the UI.
Overall, this DFD illustrates how data flows through the system, starting with
user input and ending with the output displayed to the user.

4.2.2 Use Case Diagram

Figure 4.3: Use Case Diagram of CODESIV

In the Figure 4.3 , we have two types of users - registered users and unregistered
users. Registered users have access to additional use cases like creating, editing, and
deleting code files, while unregistered users have limited access to the system. Both
types of users can view a list of code files and individual code files.
There are also common use cases for both types of users, such as logging in
and viewing code files
Note that user authentication is an important aspect of this use case diagram,
as it determines which use cases are available to the user.

15
4.2.3 Class Diagram

Figure 4.4: Class Diagram of CODESIV

In the above Figure 4.4, we can see several classes that represent different
components and modules of the CODESIV system. Here’s a brief explanation of
each class:
• CodeEditorUIComponent: This class represents the main code editor compo-
nent that is rendered on the page. It handles user input and updates the code
in real time.
• LoginComponent: This class represents the user component that is respon-
sible for managing user accounts and authentication within the code editor
system. It handles user login and logout, as well as storing and retrieving user
preferences.
• CodeExecution: This class represents the service responsible for interacting
with the server-side API. It would contain methods for sending and receiving
data to and from the server.
• Firebase CloudFireStore: This class represents a user in the online code editor.
It would contain information about the user, such as their name, email, and
password.

16
4.2.4 Sequence Diagram

Figure 4.5: Sequence Diagram of CODESIV

In the Figure 4.5, the user is represented as an object that interacts with the
editor component. When the user enters code into the editor, the editor component
sends the code to the compiler component(judge0) to be compiled. The compiler
then sends the compiled result back to the editor, which then displays the result in
the output window component. If the user makes changes to the code, the process
repeats, with the updated code being sent to the compiler, and the updated result
being displayed in the output window.
Overall, this sequence diagram illustrates how the different components of an
online code editor using React work together to enable users to edit and run code in
real-time.

17
4.2.5 Collaboration diagram

Figure 4.6: Collaboration diagram of CODESIV

In the Figure 4.6, these objects can be represented as follows:

• Login: Represents the user authentication process to access the system.
• Dashboard: Represents the main screen of the application where users can
view their projects, create new projects, and collaborate with other users.
• CodeEditorWindow: Represents the window where users can write and edit
code for their projects.
• Output Window: Represents the window where users can view the output of
their code execution.
• ResultWindow: Represents the window where users can view the results of
their code execution, including any errors or warnings.
• Firebase Cloud Firestore: Represents the cloud-based database service used
for storing and retrieving user data, such as projects and user profiles.
• Judge0: Represents the API service used for testing and executing code, which
is integrated into the application to provide a seamless experience for the users.

18
4.2.6 Activity Diagram

Figure 4.7: Activity Diagram of CODESIV

The Figure 4.7 shows the flow of activities and interactions between com-
ponents in an online code editor using React. It starts with the user opening the
application and includes user actions, React components, and conditional logic to
represent different paths that the user can take based on their actions.

19
 4.3 Algorithm & Pseudo Code

4.3.1 Algorithm

1. Set up a React project using a tool like Create React App or a boilerplate of
your choice.
2. Install any necessary dependencies for the code editor, such as CodeMirror or
Ace Editor.
3. Create a component for the code editor that includes the necessary functional-
ity, such as syntax highlighting, autocompletion, and error checking.
4. Set up state in the code editor component to track the current code being
edited.
5. Use the useEffect hook to set up a listener for changes to the code in the editor.
6. When the code changes, update the state to reflect the new code.
7. Use the useState hook to track any errors or warnings that are generated as a
result of the code changes.
8. Display any errors or warnings to the user in the code editor component.
9. Add additional features to the code editor as desired, such as the ability to save
and load code, run code, or share code with others.
10. Test the code editor component thoroughly to ensure that it works as expected.
11. Deploy the code editor to a server so that it can be accessed by users.
12. Monitor usage of the code editor and make any necessary updates or improve-
ments based on feedback from users.

4.3.2 Pseudo Code

1 // Import required React libraries

2 import React, { useState, useEffect } from 'react';
3

4 // Define component
5 function CodeEditor() {
6 // Define state variables
7 const [code, setCode] = useState('');
8 const [output, setOutput] = useState('');
9

20
10 // Define function to handle changes in code
11 function handleCodeChange(event) {
12 setCode(event.target.value);
13 }
14

15 // Define function to handle code execution

16 async function handleExecute() {
17 // Send code to server for execution
18 const response = await fetch('/execute', {
19 method: 'POST',
20 body: JSON.stringify({ code }),
21 headers: {
22 'Content-Type': 'application/json'
23 }
24 });
25

26 // Parse response and update output state

27 const result = await response.json();
28 setOutput(result.output);
29 }
30

31 // Use useEffect hook to set up event listener for keyboard shortcuts

32 useEffect(() => {
33 function handleKeyDown(event) {
34 if (event.key === 'Enter' && event.ctrlKey) {
35 handleExecute();
36 }
37 }
38

39 document.addEventListener('keydown', handleKeyDown);
40

41 // Cleanup function to remove event listener

42 return () => {
43 document.removeEventListener('keydown', handleKeyDown);
44 };
45 }, []);
46

47 // Render code editor and output display

48 return (
49 <div>
50 <textarea value={code} onChange={handleCodeChange} />
51 <button onClick={handleExecute}>Execute</button>
52 <pre>{output}</pre>
53 </div>
54 );
55 }
56

57 // Export component
58 export default CodeEditor;
59

21
4.4 Module Description

4.4.1 Module 1: Components

All the components / reusable code snippets live here (Example: CodeEditor-
Window and Landing)

4.4.2 Module 2: Hooks

All the custom hooks are present here. (We are going to use keypress hooks to
compile our code using keyboard events)

4.4.3 Module 3: Lib

All the library functions live here. (We’ll create a function to define our theme
here)

4.4.4 Module 4: Constants and Utils

• All the constants like “languageOptions” and “customStyles” for dropdowns

will go here
• General utility functions to help maintain the code go here.

4.4.5 Module 5: User Authentication

• The firebase.js is configuration file that contains the necessary functions of the
user registration and login.
• These functions are exported to the appropriate components which can be
routed to the Google’s firebase API

4.4.6 Module 6: FireBase’s CloudFireStore Database

• The Firestore Realtime Database uses Firebase’s Cloud Firestore that is used
to store user information in the concept of linked-list called as collection
• Each collection contains fields which has Key-Value pair of string or any other
datatypes that is defined.

22
 4.5 Steps to execute/run/implement the project

4.5.1 Step 1: Clone Project into Local System

1 $ g i t c l o n e h t t p s : / / g i t h u b . com / p t e c h 1 2 / c o d e s i v . g i t

Clone the github repo into local system(make sure git is installed)

4.5.2 Step 2: Register and Setup API keys

Register on RapidAPI and get your API keys, by following the below steps
1. Visit https://rapidapi.com/judge0-official/api/judge0-ce
2. Login using Google or by using email-id/password
3. Subscribe for free version of Judge0
4. Under Endpoints tab, your API keys will be visible.

4.5.3 Step 3: Configuring the Environmental Variables

Create a .env file. Add the API Keys in the .env file, Similar to this given below,

1 REACT APP RAPID API URL = ”URL”

2 REACT APP RAPID API HOST = ”HOSTNAME”
3 REACT APP RAPID API KEY = ” API KEY”

4.5.4 Step 4: Start the Local Server

Run the project

1 $ npm s t a r t

23
 Chapter 5

IMPLEMENTATION AND TESTING

5.1 Input and Output

5.1.1 Input Design

Figure 5.1: Input Design for CODESIV

Text Input: This would be the primary input for the code editor where users
can enter their code. The text input would need to have features such as syntax
highlighting, code completion, and error detection to help users write their code
more efficiently. The Figure 5.1 show the simple input design case which is nothing
but the actual code that is being used to get resultant output in the dedicated window.

24
 5.1.2 Output Design

Figure 5.2: Output Design for CODESIV

The Figure 5.2 shows output design which is a dedicated window for provid-
ing the output for code and also compiler errors, warnings along with code sugges-
tions also displayed here.

5.2 Testing

5.3 Types of Testing

5.3.1 Unit testing

Unit testing is an essential part of the software development process, as it

ensures that the code behaves as expected and catches any potential issues before
they become major problems.

Input

1 {
2 ” l a n g u a g e i d ” : 52 ,
3 ” s o u r c e c o d e ” : I2luY2x1ZGUgPHN0ZGlvLmg+CgppbnQgbWFpbih2b2 ” ,
4 ” s t d i n ” : ”SnVkZ2Uw”
5 }

25
Test result

Figure 5.3: Unit Testing Result for CODESIV

Figure 5.4: Unit Testing Result for CODESIV

5.3.2 Integration testing

Integration testing is important to ensure that the different components of the

editor work together correctly. The following images will depict the integration test-
ing of two components that shares data.

26
Test result

Figure 5.5: Test Input for CODESIV

Figure 5.6: Test Output 1 for CODESIV

27
Figure 5.7: Test Output 2 for CODESIV

Figure 5.8: Test Output 3 for CODESIV

28
 Chapter 6

RESULTS AND DISCUSSIONS

6.1 Efficiency of the Proposed System

In general, using React to build an online code editor can offer several advan-
tages that can contribute to its overall efficiency:

1. Modularity and component-based architecture: React’s component-based

architecture allows for modular, reusable code that can be easily maintained
and updated. This can make it easier to add new features or improve existing
ones, reducing development time and improving the overall efficiency of the
editor.
2. Fast rendering and updating: React’s virtual DOM and efficient rendering
system can help to minimize the time it takes to render and update the editor
interface, improving the overall user experience and reducing lag or delays in
code editing.
3. Robust community and ecosystem: React has a large and active commu-
nity of developers, with a vast ecosystem of third-party libraries, tools, and
resources available to help developers build and optimize their online code
editors.

Overall, while the efficiency of an online code editor using React will depend
on many factors, using React can provide a solid foundation for building a fast,
modular, and feature-rich editor that can meet the needs of developers and users
alike.

29
6.2 Comparison of Existing and Proposed System

Existing system:
The existing system mostly contains 5 to 15 programming languages with bad
UI that most of the users and developers hates. Even though there are many popular
Online Code Editors are out there and many more are getting noticed. Because of
this, many developers gets a question about which online code editor is best, mostly
every developers have there own personal preferences so that they tend to choose the

Proposed system:
The CODESIV uses React.js, a popular JavaScript library, can offer several
advantages for developers. Here are some of the key benefits of using an online code
editor built with React:
• Fast and responsive: React is known for its fast rendering speed and efficient
updates. This means that an online code editor built with React can provide
a snappy and responsive user interface, even when handling large amounts of
code.
• Modular and reusable: React components are designed to be modular and
reusable, which makes it easier to build and maintain complex user interfaces.
This can be especially useful for an online code editor, where the user interface
can be quite complex.
• Cross-platform compatibility: React is designed to be compatible with mul-
tiple platforms and devices, which can make an online code editor built with
React accessible to a wider range of users.
• Large community and ecosystem: React has a large and active community of
developers and a robust ecosystem of libraries and tools. This can be useful
for developers building an online code editor, as they can leverage existing
solutions and get help from the community when needed.
Overall, an online code editor built with React can provide a fast, modular, cus-
tomizable, and cross-platform solution that can be tailored to the needs of developers
and their users.

30
 6.3 Sample Code

6.3.1 App.js

1 i m p o r t ” . / App . c s s ” ;
2 i m p o r t L a n d i n g from ” . / c o m p o n e n t s / L a n d i n g ” ;
3

4 import {
5 BrowserRouter as Router ,
6 Route ,
7 Routes ,
8 Navigate
9 } from ” r e a c t − r o u t e r −dom” ;
10 i m p o r t L o g i n from ” . / c o m p o n e n t s / L o g i n ” ;
11

12 i m p o r t R e g i s t e r from ” . / c o m p o n e n t s / R e g i s t e r ” ;
13 i m p o r t R e s e t from ” . / c o m p o n e n t s / R e s e t ” ;
14 i m p o r t D a s h b o a r d from ” . / c o m p o n e n t s / D a s h b o a r d ” ;
15

16 f u n c t i o n App ( ) {
17 / / r e t u r n <L a n d i n g / >;
18 return (
19 <R o u t e r >
20 <R o u t e s>
21 <R o u t e e x a c t p a t h =” / ” e l e m e n t ={<L o g i n />} />
22 { / * <R o u t e e x a c t p a t h = ” / c o d e s i v ” e l e m e n t ={<L o g i n />} /> * / }
23 <R o u t e e x a c t p a t h =” / r e g i s t e r ” e l e m e n t ={< R e g i s t e r />} />
24 <R o u t e e x a c t p a t h =” / r e s e t ” e l e m e n t ={< R e s e t />} />
25 <R o u t e e x a c t p a t h =” / d a s h b o a r d ” e l e m e n t ={<D a s h b o a r d />} />
26 <R o u t e e x a c t p a t h =” / c o d e ” e l e m e n t ={<L a n d i n g />} />
27 <R o u t e p a t h =” * ” e l e m e n t ={< N a v i g a t e t o ={ ” / c o d e s i v ” } r e p l a c e />} />
28 </ R o u t e s>
29 </ R o u t e r >
30 )
31 }
32

33 e x p o r t d e f a u l t App ;

6.3.2 Login.js

1 i m p o r t R e a c t , { u s e E f f e c t , u s e S t a t e } from ” r e a c t ” ;
2 i m p o r t { Link , u s e N a v i g a t e } from ” r e a c t − r o u t e r −dom” ;
3 i m p o r t { a u t h , s i g n I n W i t h E m a i l A n d P a s s w o r d , l o g I n W i t h E m a i l A n d P a s s w o r d , s i g n I n W i t h G o o g l e } from ” . . /
firebase ” ;
4 i m p o r t { u s e A u t h S t a t e } from ” r e a c t − f i r e b a s e − h o o k s / a u t h ” ;
5 i m p o r t ” . . / App . c s s ” ;

31
 6 i m p o r t { T o a s t C o n t a i n e r , t o a s t } from ” r e a c t − t o a s t i f y ” ;
7

9 f u n c t i o n Login ( ) {
10 c o n s t [ email , s et Em ai l ] = u s e S t a t e ( ” ” ) ;
11 c o n s t [ password , s e t P a s s w o r d ] = u s e S t a t e ( ” ” ) ;
12 const [ user , loading , e r r o r ] = useAuthState ( auth ) ;
13 const navigate = useNavigate () ;
14 u s e E f f e c t ( ( ) => {
15 i f ( loading ) {
16 / / maybe t r i g g e r a l o a d i n g s c r e e n
17 return ;
18 }
19 i f ( user ) navigate ( ” / dashboard ” ) ;
20 } , [ user , loading ] ) ;
21

22

23 c o n s t s h o w E r r o r T o a s t = ( msg , t i m e r ) => {
24 t o a s t . e r r o r ( msg | | ` S o m e t h i n g went wrong ! P l e a s e t r y a g a i n . ` , {
25 p o s i t i o n : ” top − r i g h t ” ,
26 a u t o C l o s e : t i m e r ? t i m e r : 1000 ,
27 hideProgressBar : false ,
28 closeOnClick : true ,
29 pauseOnHover : t r u e ,
30 draggable : true ,
31 progress : undefined ,
32 }) ;
33 };
34 c o n s t h a n d l e L o g i n = ( e m a i l , p a s s w o r d ) => {
35 i f ( l o g I n W i t h E m a i l A n d P a s s w o r d ( e m a i l , p a s s w o r d ) == 0 ) {
36 showErrorToast ( ” E r r o r ( a u th / user −not −found ) . ” )
37 }
38 }
39

40 return (
41 <>
42

43 <T o a s t C o n t a i n e r
44 p o s i t i o n =” t o p − r i g h t ”
45 a u t o C l o s e ={2000}
46 h i d e P r o g r e s s B a r ={ f a l s e }
47 newestOnTop ={ f a l s e }
48 closeOnClick
49 r t l ={ f a l s e }
50 pauseOnFocusLoss
51 draggable
52 pauseOnHover
53 />
54 <d i v c l a s s N a m e =” l o g i n ”>
55

32
56 <d i v c l a s s N a m e =” l o g i n c o n t a i n e r ”>
57 <h1 c l a s s N a m e =” t i t l e ”> CodeSiv </h1>
58 <p c l a s s N a m e =” mean ”> L o g i n t o t h e f u t u r e o f c o d i n g </p>
59 <b r />
60 <i n p u t
61 t y p e =” t e x t ”
62 c l a s s N a m e =” l o g i n textBox ”
63 v a l u e ={ e m a i l }
64 onChange ={( e ) => s e t E m a i l ( e . t a r g e t . v a l u e ) }
65 p l a c e h o l d e r =”E− m a i l A d d r e s s ”
66 />
67 <i n p u t
68 t y p e =” p a s s w o r d ”
69 c l a s s N a m e =” l o g i n textBox ”
70 v a l u e ={ p a s s w o r d }
71 onChange ={( e ) => s e t P a s s w o r d ( e . t a r g e t . v a l u e ) }
72 p l a c e h o l d e r =” P a s s w o r d ”
73 />
74 <b u t t o n
75 c l a s s N a m e =” l o g i n btn ”
76 o n C l i c k = { ( ) => h a n d l e L o g i n ( e m a i l , p a s s w o r d ) }
77 >
78

79 Login
80 </ b u t t o n >
81

82 <b u t t o n c l a s s N a m e =” l o g i n btn login g o o g l e ” o n C l i c k ={ s i g n I n W i t h G o o g l e}>

83 L o g i n w i t h Google
84 </ b u t t o n >
85 <d i v>
86 <L i n k t o =” / r e s e t ”>F o r g o t Password </ Link>
87 </ d i v>
88 <d i v>
89 Don ' t h a v e an a c c o u n t ? <L i n k t o = ” / r e g i s t e r ”> R e g i s t e r </ Link> now .
90 </ d i v>
91 </ d i v>
92 </ d i v>
93 </>
94 );
95 }
96 e x p o r t d e f a u l t Login ;

33
Output

Figure 6.1: Output 1 for CODESIV

Figure 6.2: Output 2 for CODESIV

34
Figure 6.3: Output 3 for CODESIV

35
 Chapter 7

CONCLUSION AND FUTURE

ENHANCEMENTS

7.1 Conclusion

An online code editor is a software application that allows developers to write

and edit code in a web browser without the need for additional software or tools.
Online code editors can be used for a variety of programming languages, including
Python, Java, C/C++, JavaScript, and many others. By integrating and enhancing
the capabilities of these essential technologies,we are introducing the “CODESIV”.
Most of the online compiler’s today are not offering much beginner-friendly UI/UX
to the user for almost every programming languages in the world. Our project pro-
vides the experience of an IDE in the web that the most developers loves to use.
The “CODESIV” is an open-source web application where collaboration is made
possible for further improvements. However, this application might have slow or no
response depending on the status of the deployment server since it may take some
time for the server to respond on the requests made.

7.2 Future Enhancements

There are many potential future enhancements that could be made to an CODE-
SIV. Here are a few ideas:
• Real-time collaboration: One major improvement could be the ability for mul-
tiple users to work on the same code file simultaneously, with changes being
synced in real-time. This could be done using websockets or other similar
technologies.
• Performance improvements: Optimizing the editor for speed and reducing
loading times could improve the overall user experience and make the editor
more usable for larger projects.

36
 Chapter 8

INDUSTRY DETAILS

8.1 Industry name

Virtusa Consultancy Services Pvt. Ltd.

8.1.1 Duration of Internship (From Date - To Date):

10/03/2023 – 10/06/2023

8.1.2 Duration of Internship in months:

8.1.3 Industry Address

SEZ, 1st floor, 5th block, 7th floor, 10th block, DLF IT Park, Shivaji Gar-
den Moonlight Stop, Nandambakam Post, Manapakam, Chennai-89

37
8.2 Internship offer letter

Figure 8.1: INTERNSHIP OFFER LETTER from VIRTUSA

8.3 Project Commencement Form

NA

8.4 Internship Completion certificate

NA

38
 Chapter 9

PLAGIARISM REPORT

Figure 9.1: Summary of Plagiarism Report

39
 Chapter 10

SOURCE CODE & POSTER

PRESENTATION

10.1 Source Code

10.1.1 Register.js

1 i m p o r t R e a c t , { u s e E f f e c t , u s e S t a t e } from ” r e a c t ” ;
2 i m p o r t { u s e A u t h S t a t e } from ” r e a c t − f i r e b a s e − h o o k s / a u t h ” ;
3 i m p o r t { Link , u s e N a v i g a t e } from ” r e a c t − r o u t e r −dom” ;
4 import {
5 auth ,
6 registerWithEmailAndPassword ,
7 signInWithGoogle ,
8 } from ” . . / f i r e b a s e ” ;
9 / / import ” . / Register . css ”;
10 i m p o r t ” . . / App . c s s ” ;
11

12 function Register () {
13 c o n s t [ email , s et Em ai l ] = u s e S t a t e ( ” ” ) ;
14 c o n s t [ password , s e t P a s s w o r d ] = u s e S t a t e ( ” ” ) ;
15 c o n s t [ name , setName ] = u s e S t a t e ( ” ” ) ;
16 const [ user , loading , e r r o r ] = useAuthState ( auth ) ;
17 // const history = useHistory () ;
18 const navigate = useNavigate () ;
19 c o n s t r e g i s t e r = ( ) => {
20 i f ( ! name ) a l e r t ( ” P l e a s e e n t e r name ” ) ;
21 r e g i s t e r W i t h E m a i l A n d P a s s w o r d ( name , e m a i l , p a s s w o r d ) ;
22 };
23 u s e E f f e c t ( ( ) => {
24 i f ( loading ) return ;
25 i f ( user ) navigate ( ” / dashboard ” ) ;
26 } , [ user , loading ] ) ;
27 return (
28 <d i v c l a s s N a m e =” r e g i s t e r ”>
29 <d i v c l a s s N a m e =” r e g i s t e r c o n t a i n e r ”>
30 <i n p u t
31 t y p e =” t e x t ”
32 c l a s s N a m e =” r e g i s t e r textBox ”
33 v a l u e ={name}

40
34 onChange ={( e ) => setName ( e . t a r g e t . v a l u e ) }
35 p l a c e h o l d e r =” F u l l Name”
36 />
37 <i n p u t
38 t y p e =” t e x t ”
39 c l a s s N a m e =” r e g i s t e r textBox ”
40 v a l u e ={ e m a i l }
41 onChange ={( e ) => s e t E m a i l ( e . t a r g e t . v a l u e ) }
42 p l a c e h o l d e r =”E− m a i l A d d r e s s ”
43 />
44 <i n p u t
45 t y p e =” p a s s w o r d ”
46 c l a s s N a m e =” r e g i s t e r textBox ”
47 v a l u e ={ p a s s w o r d }
48 onChange ={( e ) => s e t P a s s w o r d ( e . t a r g e t . v a l u e ) }
49 p l a c e h o l d e r =” P a s s w o r d ”
50 />
51 <b u t t o n c l a s s N a m e =” r e g i s t e r b t n ” o n C l i c k ={ r e g i s t e r }>
52 Register
53 </ b u t t o n >
54 <b u t t o n
55 c l a s s N a m e =” r e g i s t e r btn register google ”
56 o n C l i c k ={ s i g n I n W i t h G o o g l e }
57 >
58 R e g i s t e r w i t h Google
59 </ b u t t o n >
60 <d i v>
61 A l r e a d y h a v e an a c c o u n t ? <L i n k t o =” / ”>Login </ Link> now .
62 </ d i v>
63 </ d i v>
64 </ d i v>
65 );
66 }
67 export default Register ;

10.1.2 CodeEditorWindow.js

1 i m p o r t R e a c t , { u s e S t a t e } from ” r e a c t ” ;
2

3 i m p o r t E d i t o r from ”@monaco− e d i t o r / r e a c t ” ;
4

5 c o n s t CodeEditorWindow = ( { onChange , l a n g u a g e , code , theme } ) => {

6 c o n s t [ value , s e t V a l u e ] = u s e S t a t e ( code | | ” ” ) ;
7

8 c o n s t h a n d l e E d i t o r C h a n g e = ( v a l u e ) => {
9 setValue ( value ) ;
10 onChange ( ” c o d e ” , v a l u e ) ;

41
11 };
12

13 return (
14 <d i v c l a s s N a m e =” o v e r l a y r o u n d e d −md o v e r f l o w − h i d d e n w− f u l l h− f u l l shadow −4 x l ”>
15 <E d i t o r
16 h e i g h t =” 85 vh ”
17 w i d t h ={`100%`}
18 l a n g u a g e ={ l a n g u a g e | | ” j a v a s c r i p t ” }
19 v a l u e ={ v a l u e }
20 theme ={ theme }
21 d e f a u l t V a l u e =” / / some comment ”
22 onChange ={ h a n d l e E d i t o r C h a n g e }
23 />
24 </ d i v>
25 );
26 };
27 e x p o r t d e f a u l t CodeEditorWindow ;

10.1.3 Dashboard.js

1 i m p o r t R e a c t , { u s e E f f e c t , u s e S t a t e } from ” r e a c t ” ;
2 i m p o r t { u s e A u t h S t a t e } from ” r e a c t − f i r e b a s e − h o o k s / a u t h ” ;
3 i m p o r t { u s e N a v i g a t e , r e d i r e c t } from ” r e a c t − r o u t e r −dom” ;
4 / / import ” . / Dashboard . c s s ” ;
5 i m p o r t ” . . / App . c s s ” ;
6 i m p o r t { T o a s t C o n t a i n e r , t o a s t } from ” r e a c t − t o a s t i f y ” ;
7 i m p o r t { S c a l e L o a d e r } from ” r e a c t − s p i n n e r s ” ;
8

9 i m p o r t { a u t h , db , l o g o u t } from ” . . / f i r e b a s e ” ;
10 i m p o r t { q u e r y , c o l l e c t i o n , g e t D o c s , where } from ” f i r e b a s e / f i r e s t o r e ” ;
11 / / i m p o r t { s t a r t } from ” r e p l ” ;
12 f u n c t i o n Dashboard ( ) {
13 const [ user , loading ] = useAuthState ( auth ) ;
14 c o n s t [ name , setName ] = u s e S t a t e ( ” ” ) ;
15 const navigate = useNavigate () ;
16 c o n s t f e t c h U s e r N a m e = a s y n c ( ) => {
17 try {
18 c o n s t q = q u e r y ( c o l l e c t i o n ( db , ” u s e r s ” ) , where ( ” u i d ” , ” == ” , u s e r ? . u i d ) ) ;
19 c o n s t doc = a w a i t g e t D o c s ( q ) ;
20 c o n s t d a t a = doc . d o c s [ 0 ] . d a t a ( ) ;
21 setName ( d a t a . name ) ;
22

23 } catch ( err ) {
24 console . error ( err ) ;
25 // a l e r t ( ” An e r r o r o c c u r e d w h i l e f e t c h i n g u s e r d a t a ” ) ;
26 }
27 };

42
28 u s e E f f e c t ( ( ) => {
29 i f ( l o a d i n g ) <S c a l e L o a d e r / >;
30 i f (! user ) return navigate ( ” / ” ) ;
31 fetchUserName ( ) ;
32

33 } , [ user , loading ] ) ;
34

35 c o n s t s t a r t S i v = ( ) => {
36 n a v i g a t e ( ” / code ” )
37 }
38

39 c o n s t h a n l d e L o g o u t = ( ) => {
40 redirect ( ” / login ” )
41 logout ()
42

43 }
44 c o n s t s h o w S u c c e s s T o a s t = ( msg ) => {
45 t o a s t . s u c c e s s ( msg | | `Some e r r o r o c c u r e d ` , {
46 p o s i t i o n : ” top − r i g h t ” ,
47 a u t o C l o s e : 1000 ,
48 hideProgressBar : false ,
49 closeOnClick : true ,
50 pauseOnHover : t r u e ,
51 draggable : true ,
52 progress : undefined ,
53 }) ;
54 };
55

56 return (
57 <>
58 <T o a s t C o n t a i n e r
59 p o s i t i o n =” t o p − r i g h t ”
60 a u t o C l o s e ={2000}
61 h i d e P r o g r e s s B a r ={ f a l s e }
62 newestOnTop ={ f a l s e }
63 closeOnClick
64 r t l ={ f a l s e }
65 pauseOnFocusLoss
66 draggable
67 pauseOnHover
68 />
69 <d i v c l a s s N a m e =” d a s h b o a r d ”>
70 <d i v c l a s s N a m e =” d a s h b o a r d c o n t a i n e r ”>
71 Logged i n a s
72

73 <d i v >{name} </ d i v>

74 <d i v >{u s e r ? . e m a i l }</ d i v>
75 {name ? s h o w S u c c e s s T o a s t ( ` Welcome ${name } `) : n u l l }
76 <b u t t o n c l a s s N a m e =” d a s h b o a r d b t n ” o n C l i c k ={ s t a r t S i v }>
77 S t a r t CodeSiv

43
78 </ b u t t o n >
79 <b u t t o n c l a s s N a m e =” d a s h b o a r d b t n ” o n C l i c k ={ h a n l d e L o g o u t}>
80 Logout
81 </ b u t t o n >
82 </ d i v>
83 </ d i v>
84 </>
85 );
86 }
87 e x p o r t d e f a u l t Dashboard ;

10.1.4 ThemeDropDown.js

1 i m p o r t R e a c t from ” r e a c t ” ;
2 i m p o r t S e l e c t from ” r e a c t − s e l e c t ” ;
3 i m p o r t monacoThemes from ” monaco − t h e m e s / t h e m e s / t h e m e l i s t ” ;
4 i m p o r t { c u s t o m S t y l e s } from ” . . / c o n s t a n t s / c u s t o m S t y l e s ” ;
5

6 c o n s t ThemeDropdown = ( { handleThemeChange , theme } ) => {

7 return (
8 <S e l e c t
9 p l a c e h o l d e r ={` S e l e c t Theme `}
10 / / o p t i o n s ={ l a n g u a g e O p t i o n s }
11 o p t i o n s ={ O b j e c t . e n t r i e s ( monacoThemes ) . map ( ( [ t h e m e I d , themeName ] ) => ( {
12 l a b e l : themeName ,
13 v a l u e : themeId ,
14 key : t h e m e I d ,
15 }) ) }
16 v a l u e ={ theme }
17 s t y l e s ={ c u s t o m S t y l e s }
18 onChange ={ handleThemeChange }
19 />
20 );
21 };
22

23 e x p o r t d e f a u l t ThemeDropdown ;

44
10.2 Poster Presentation

Figure 10.1: Poster Presentation

45
 References

[1] Ashu Sharma, Ayush Dixit, Brij Upadhyay, May 2017, “ONLINE COMPILER”,
IRJET, Vol. 04 Issue. 05
[2] Bau, D. A. Droplet, 2016, “A Block-Based Editor for Text Code” journal of
computer science in colleges.
[3] Doernhoefer M, 1999, “Surfing the Net for Software Engineering Notes” , ACM
SIGSOFT Software Engineering Notes, Vol. 24, No. 3, pp. 15–24.
[4] Liao J, Chen S and Xiong H, 2017 “A cloud-based online coding platform for
learning coding related courses of computer science ICIC Express Letters”, Part
B: Applications 8 109–16
[5] Serth S, 2019, “Integrating Professional Tools in Programming Education” with
MOOCs Proceedings Frontiers in Education Conference pp 1–2
[6] Niels Gandraß, Torge Hinrichs, Axel Schmolitzky, SEUH 2020, “Towards an
Online Programming Platform Complementing Software Engineering Educa-
tion”
[7] Nishant, Neetu Raj Bharti, May 2022 , “ONLINE CODE EDITOR USING RE-
ACT”, IJIREEICE
[8] Shreyas Shridhar, Siddharth Bose, Dec 2021, “Analysis of Low Code-No Code
Development Platforms in comparison with Traditional Development Method-
ologies”, IJRASET, Vol. 09 Issue 12
[9] Resnick .M, Nov. 2009, “Scratch: Programming for All,” Communications of
the ACM, vol. 52, no. 11, pp. 60-67,
[10] Liao J, Chen S and Xiong H 2017 A cloud-based online coding platform for
learning coding related courses of computer science ICIC Express Letters, Part
B: Applications 8 109–16
[11] Medvediev M 2019 “The use of E-olymp internet portal in programming com-
petitions Olympiads” in Informatics 13 201–08

46