A major project
On
(ONLINE CODE EDITOR)
Online Code Editor
Batchelor’s of Computer Applications BCA(2020-
2023)
Head of Department: Prof (Dr) Kavita Gupta
Submitted to: Submitted by:
Gurpreet Kaur | E11556 Gitanshu kumar | 20BCA1699
UNIVERSITY INSTITUTE OF COMPUTING, CHANDIGARH UNIVERSITY
Mohali, NH-95, Ludhiana - Chandigarh State Highway, Punjab 140413
BONAFIDE CERTIFICATE
Certified that this project report “ONLINE CODE EDITOR” an automatic password generator
and Notes manager application” is the bonafide work of “20BCA1699(Gitanshu kumar)” who
carried out the project work under my/our supervision.
SUPERVISOR HEAD OF THE DEPARTMENT
Gurpreet Kaur Dr. Kavita Gupta
SIGNATURE SIGNATURE
Submitted for the project viva-voce examination held on_____________________
INTERNAL EXAMINER EXTERNAL EXAMINER
ACKNOWLEDGEMENT
I express my sincere regard and indebtedness to my project guide Ms. Gurpreet
Kaur, Supervisor, Department of UNIVERSITY INSTITUTE OF COMPUTING,
Chandigarh University, Punjab for his valuable time, guidance, encouragement,
support and cooperation throughout the duration of our project. I would sincerely
like to thank our Department for giving me the opportunity to work on enhancing my
technical skills while undergoing this project.
We are really thankful to all of my friends who always advised and motivated me
throughout the course.
ABSTRACT
The main objective of an online code editor is to provide
developers with a convenient and accessible platform for
writing and testing code in various programming languages.
These editors are web-based tools that allow developers to
write and edit code directly in a browser without the need
for any additional software or development environment.
Online code editors typically include features such as
syntax highlighting, auto-completion, code debugging, and
collaboration tools that enable multiple developers to work
on the same codebase simultaneously. They may also
integrate with other tools such as version control systems,
code repositories, and project management tools.
The primary benefit of an online code editor is that it
eliminates the need for developers to install and configure
complex development environments on their local
machines, which can be time-consuming and challenging,
particularly for beginners. Instead, developers can simply
log in to the online editor and start coding right away,
from any device with an internet connection. Table Of
Contents
I. Introduction A.
Background
B. Objective
C. Scope
D. Methodology
II. Literature Review
A. Overview of Online Code Editors
B. Technologies Used in Online Code Editors
C. Review of Existing Online Code Editors
III. System Analysis and Design
A. User Requirements
B. System Architecture and Design
C. Database Design
D. User Interface Design
IV. Implementation
A. Development Environment
B. Front-end Implementation
C. Back-end Implementation
D. Database Implementation
V. System Testing and Evaluation
A. Functional Testing
B. Performance Testing
C. Usability Testing
D. Evaluation Results
VI. Conclusion
Chapter: 1 Introduction
1.1 INTRODUCTION
Welcome to our online code editor project! Our goal is to
provide developers with a user-friendly platform for writing and
testing code in a variety of programming languages. Our online
code editor is a web-based tool that allows you to write and edit
code directly in your browser without the need for any
additional software or development environment.
Our editor comes equipped with powerful features such as
syntax highlighting, auto-completion, code debugging, and
collaboration tools that allow multiple developers to work on
the same codebase simultaneously. You can also integrate our
editor with other tools such as version control systems, code
repositories, and project management tools to streamline your
development workflow.
Our online code editor is perfect for beginners who want to learn
how to code without having to deal with the complexities of
setting up a development environment on their local machine.
It's also great for experienced developers who want a
lightweight and convenient platform for writing and testing
code on the go.
We are committed to providing our users with the best possible
experience, and we're constantly working to improve our editor
with new features and functionality. So, whether you're a
beginner or an experienced developer, we invite you to give our
online code editor a try and see how it can help you streamline
your coding workflow.
Why is Online Code Editor Important?
Online code editors have become increasingly important in today's
digital age because they offer numerous benefits and advantages to
developers, including:
Accessibility: One of the most significant advantages of online code
editors is their accessibility. Unlike traditional code editors, which
must be installed on your local machine, online code editors can be
accessed from any device with an internet connection, making it easy
to work on your code from anywhere.
Convenience: Online code editors eliminate the need for developers
to set up and configure complex development environments on their
local machines, which can be time-consuming and challenging,
particularly for beginners. Instead, developers can simply log in to the
online editor and start coding right away.
Collaboration: Online code editors offer robust collaboration tools
that enable multiple developers to work on the same codebase
simultaneously, making it easy to collaborate with team members,
share code, and troubleshoot issues in real-time.
Version Control: Online code editors integrate seamlessly with
version control systems, such as Git, allowing developers to track
changes to their code over time, collaborate with others, and revert to
previous versions if necessary.
Cost-Effective: Online code editors are often free to use, making them
a cost-effective solution for developers who don't want to invest in
expensive development environments.
Overall, online code editors provide developers with a convenient,
accessible, and collaborative platform for writing and testing code,
making them an essential tool for modern development workflows.
1.3 FEASIBILITY STUDY
A feasibility study is an important step in determining the viability of any
project, including an online code editor. Here are some factors to consider
in a feasibility study of an online code editor:
Market demand: Is there a significant demand for an online code editor?
Are there already established competitors in the market? Conducting
market research and analyzing trends can help answer these questions.
Target audience: Who is the target audience for the online code editor? Are
they experienced developers or beginners? What are their specific needs
and pain points? Understanding the target audience is critical to developing
a product that meets their needs.
Technical requirements: What are the technical requirements for developing
an online code editor? What programming languages and tools will be
supported? What kind of hosting and infrastructure will be needed?
Assessing these technical requirements can help determine the resources
needed to develop the editor.
Revenue model: How will the online code editor generate revenue? Will it
be through subscriptions, advertising, or other means? Analyzing the
revenue model can help determine the profitability of the project.
Operational considerations: What are the operational considerations of
running an online code editor? How will user data be secured? What kind
of support will be offered to users? Assessing these operational
considerations can help determine the ongoing costs of running the editor.
Overall, a feasibility study can help determine if an online code editor is a
viable project and provide insights into its development and operation.
Technology Stack:
Front-end: HTML, CSS
Back-end: Django
Database: Dref
The technology stack we have described is a web development stack used
to build web applications. Here is a brief description of each technology:
Front-end: HTML and CSS are front-end technologies used to build the
user interface of a web application. HTML is used to structure the content
of a web page, while CSS is used to style and layout the content.
Back-end: Django is a back-end web development framework that is
written in Python. It is used to build the server-side of a web application,
which includes handling requests, processing data, and interacting with
databases.
Database: Dref is not a commonly known database management system,
but if it is referring to Dgraph, it is a graph database that can be used to
store and manage complex relationships between data. It can be used as an
alternative to traditional relational databases.
Overall, this technology stack can be used to build a scalable and efficient
web application with a responsive user interface, a robust back-end, and a
powerful database management system.
Features:
The features implemented in the online code editor can enhance the user
experience and improve productivity. Here is a brief description of each
feature:
Syntax highlighting: This feature makes it easier for users to read and
understand code by highlighting the syntax of different programming
languages.
Code folding: This feature allows users to collapse and expand code blocks,
making it easier to navigate and read long code files.
Auto-indentation: This feature automatically indents code based on its
syntax and structure, making the code more readable and organized.
Auto-completion: This feature provides suggestions for code completion
based on the user's input, saving time and reducing errors.
Collaboration: This feature allows multiple users to work on the same code
file simultaneously, enabling real-time collaboration and reducing
communication overhead.
Version control: This feature allows users to track changes to their code
files and collaborate more efficiently using Git version control.
Customization: This feature allows users to customize the editor's settings
and preferences to suit their needs, improving usability and user
satisfaction.
Overall, these features can improve the productivity and efficiency of
developers, making the online code editor a powerful tool for building and
testing code.
Architecture:
The online code editor is built on a client-server architecture, with the
front-end and back-end components communicating via REST API calls.
The front-end is built using HTML and CSS, and interacts with the
backend Django server to perform operations such as code saving, version
control, and collaboration. The back-end server is responsible for handling
user authentication, data storage in the Dref database, and serving API
responses.
The architecture of the online code editor can be described as follows:
Client-Server Architecture: The online code editor is built on a client-server
architecture, where the front-end and back-end components are separated and
communicate via REST API calls.
Front-end: The front-end component of the editor is responsible for providing
the user interface and interacting with the user. It is built using HTML and CSS,
and uses JavaScript to handle user interactions and make API calls to the back-
end server.
Back-end: The back-end component of the editor is built using the Django web
framework. It receives API calls from the front-end and is responsible for
handling user authentication, data storage in the Dref database, and serving API
responses.
REST API: The communication between the front-end and back-end is done
using REST API calls. These calls allow the front-end to send requests to the
back-end for operations such as saving code, version control, and collaboration.
Drf Database: The Drf database is used to store user data, including code files,
user preferences, and version control history.
SCREENSHOTS-
Code-
import './Home.css' import Editor, { DiffEditor, useMonaco, loader } from
"@monaco-editor/react"; import { useRef, useState,useEffect } from 'react'; let
html={ language:'html', last_value:'none', default_value:"<html>\n
<!-- This Is The Boiler Plate For html tag --> \n \n <head>
<title>Index</title> </head> \n \n<body> \n<h1 style='color:blue;'>Index</h1> \n </body> \n\n
</html>"
} let javascript={ language:'javascript', last_value:'none',
default_value:"//Now You Can Write Code In Javascript :) \n console.log('Sheeeeeeesh')" }
let c={ language:'c', last_value:'none', default_value:"#include<stdio.h> \n
int main(void) \n { \n printf('%d','Now you can code in C :)') \n}"
} let c__={ language:'c++', last_value:'none',
default_value:"#include<iostream> \n using namespace std; \n int main() \n { \n // Now
you can code in c++ \n cout<<'hello peter' \n } "
} function
Home()
{
const[current_code_value,update_code_value]=useState("// This is Comment \n
console.log('Hello Peter')")
const[current_langauage_value,update_current_language]=useState('javascript');
// registering the language for direct access with key.
const languages={
'html':html,
'javascript':javascript,
'c':c,
'c++':c__,
} const editorRef=useRef(null)// we will assign the refrence of editor instance from
which we can get the current value of the editor
// capturing the current stage of a monaco editor instance at the time of on load.
function getEditorinstance(editor,monaco)
{
editorRef.current=editor;
} function
HandleChangeRequest(lan)
{ const ToLang=languages[lan];//javascript
const FromLang=languages[current_langauage_value];// html
// handel and save the updated code of a particular langauage. and seeing if the
value actually updated or not.
Handel_last_value(FromLang); if
(ToLang.last_value=='none'){// javascript.last_value==none false
update_code_value(ToLang.default_value);//default boilerplate of the html.
console.log('last value of ToLang :',ToLang.last_value)// last value of html will
be none. } else{ update_code_value(ToLang.last_value);//the new
value will be last value of the javascript.
}
update_current_language(ToLang.language);// html
console.log('done :)');
} function
Handel_last_value(Lang)
{ let currValue=editorRef.current.getValue();//javascript code
html code console.log('printing the curr value of editor ',
currValue); if(Lang.default_value==currValue)//htmt.default_value ==
html code
{ console.log('yeah its same
as previous'); } else{
Lang.last_value=currValue;// javascript.last_value = console.log
console.log('Updated the value !')
}
} function
handelRun()
{
// api calling
//fetch('');
return(
<div id="main" className='mt-5'>
<div className="container-fluid">
<div className="row justify-content-center">
<div className="col-8 text-start p-0" id="code-area">
<div className="row br m-0 p-0" id='section-c'>
<div className="col-auto p-0">
<div className='d-flex p-3'>
<span className='align-self-center'>
<i class='bx bx-code-block'></i>
</span>
<h3 className='align-self-center ps-3 pt-2'>Code</h3>
</div>
</div>
<div className="col-4 p-0">
<ul id='Themes' className='d-flex h-100 '>
<li id='red-color'></li>
<li id='black-color'></li>
<li id='purple-color'></li>
</ul>
</div>
<div className="col-2 align-self-center textcenter">
<select name="languages" id="selectLanguage" onChange={
(e)=>{
HandleChangeRequest(e.currentTarget.value)
}
}>
<option value="javascript">Javascript</option>
<option value="html">Html/Css</option>
<option value="c">C</option>
<option value="c++">C++</option>
</select>
</div>
<div className="col-auto align-self-center text-center">
{current_langauage_value!='html'? <button className="btn
btnsuccess ps-2 pe-3 " onClick={()=>{
console.log('sheesh')
}}>
<div className='d-flex align-items-center'
onClick={handelRun}>
<span className='me-2'><i class='bx
bxrun'></i></span>
Run
</div>
</button>: <div className='d-flex align-items-center'
id='live-code'>
<span className='me-2'><i class='bx
bxscircle'></i></span>
Live
</div> }
</div>
</div>
<div className="row h-100">
<div className="col-12">
<Editor height="100%"
language={current_langauage_value}
defaultLanguage='javascript'// value = 'current code value'
value={current_code_value} onMount={getEditorinstance}
onChange={()=>{
update_code_value(editorRef.current.getValue());
}}
></Editor>
</div>
</div>
</div>
<div className="col-3 br p-0" id="output-area">
Screenshots-
Overall, this architecture allows for efficient communication between the
frontend and back-end components, and provides a scalable and flexible
solution for building an online code editor.
Challenges:
The main challenges encountered during the development of this project
included:
Implementing real-time collaboration features, which required efficient
synchronization of code changes across multiple clients.Integrating Git version
control into the editor, which required familiarity with the Git command line
interface and proper error handling.
Configuring and deploying the Dref database on the Django server, which
required troubleshooting of connectivity issues and optimization of database
queries.
Conclusion:
In conclusion, the online code editor developed in this project provides a
user-friendly and feature-rich environment for writing and editing code in a
web browser. The editor supports multiple programming languages, realtime
collaboration, Git version control, and customization options. The architecture
of the editor is based on a client-server model, with the frontend and back-
end components communicating via REST APIs. Overall, this project has
demonstrated the feasibility and potential of online code editors for modern
software development.
