Project Report

Project title- Haxe Online IDE

Project Domain- Web Development

Group members and University Roll number

Souhardya Majumder[30101221017]
Soumyadeep Dey [30101221031]
Soumo Sengupta [30101221034]
Subham Dasgupta [30101221045]

Supervisor - Sk Sadiqur Rahaman

Co-Supervisor - Arpita Sen
 CONTENTS

1. Introduction

2. Scope and Advantages

3. Limitation

4. Feasibility study

5. Software requirement specification (SRS)

6. Work Breakdown Structure (WBS)

7. Implementation

8. Conclusion

9. Future Scope

10. References
 INTRODUCTION
Native application code editors have long been the go-to
tools for software developers, offering a range of features
tailored to coding tasks. However, these editors are not
without their share of challenges. Here are some problems
commonly faced when using native application code editors:

1.Platform Dependency: Native code editors are often designed

for specific operating systems, leading to compatibility
issues. Developers who switch between different platforms find
it challenging to maintain consistent tooling and preferences.
2. Installation and Updates: Setting up a native code editor
involves installation and configuration, which can be time-
consuming and complex.
3. Resource Intensity: Native code editors can be resource-
intensive, consuming significant memory and CPU power. This can
lead to slow performance.
4. Vendor Lock-in: Developers who heavily invest in a specific
native code editor might face vendor lock-in, making it harder
to switch to a different tool if needed.
5. High Learning Curve: Some native code editors come with a
steep learning curve due to their extensive feature set. New
developers joining a team might take longer to become
proficient, impacting overall team productivity.

However a Online Browser based IDE has the ability solve all of
the above problems. The versatility and accessibility offered
by browser-based online IDE, empowering developers to write
code from virtually anywhere with an internet connection.
These web-based editors bring a new level of flexibility to the
coding experience, allowing developers to seamlessly transition
between devices without the hassle of installations or
compatibility issues
 SCOPE AND ADVANTAGES

Browser-based IDE offer a range of advantages that

make them a compelling choice for modern software
development. Here are some key objectives that get
fulfilled by using a browser-
based code editor:
1. Accessibility: Browser-based code editors are accessible
from any device with an internet connection and a web
browser. This eliminates compatibility issues.
2. No Installation Required: Unlike native code editors,
browser-based editors require no installation. Developers
can start coding immediately without the need to download
or configure software, making onboarding and collaboration
smoother.
3. Instant Updates: Browser-based editors are often updated
automatically without requiring user intervention. This
ensures that developers always have access to the latest
features, enhancements, and bug fixes.
4. Minimal Resource Consumption: Browser-based editors
offload most of the processing to remote servers, reducing
the resource demands on the local device.
5. Reduced Learning Curve: Browser-based editors often have
intuitive user interfaces and are designed with user
experience in mind. This can lead to a shorter learning
curve for new developers.
 LIMITATIONS

While online browser-based Integrated Development

Environments (IDEs) offer numerous advantages, they also
come with certain limitations that developers and
organizations need to consider. Here are some common
limitations associated with online IDEs:

1. Internet Dependency: Online IDEs require a stable

internet connection. Developers may face challenges when
working in environments with limited or no internet access.
2. Performance: The performance of online IDEs can be
affected by factors such as internet speed and server load.
This can result in slower response times compared to
locally installed IDEs.
3. Limited Features: Online IDEs may lack certain features
present in traditional desktop IDEs. This limitation can be
a drawback for developers who require advanced tools or
specific functionalities.
4. Security Concerns: Storing code and sensitive data on
remote servers raises security concerns. Organizations must
ensure that the chosen online IDE platform employs robust
security measures to protect against data breaches.
5. Customization Restrictions: Developers may have limited
control over the customization of the online IDE
environment compared to locally installed IDEs. This can be
a drawback for those who prefer highly tailored development
environments.
 FEASIBILITY STUDY

Conducting a feasibility study for an online-based Integrated

Development Environment (IDE) involves assessing various
aspects to determine whether the project is viable and worth
pursuing. Here's a breakdown of key considerations:

1. Technical Feasibility:
a. Technology Stack:
 Web Technologies: Choose appropriate web technologies such
as HTML5, CSS, and JavaScript for the front end.

 Backend Development: Decide on the backend technology

(e.g.,PHP, Node.js, Django, Ruby on Rails) for server-side
processing and managing user data.

 Database: MySQL Database can be used to handle database.

b. Compatibility:
 Ensure compatibility with a variety of browsers (Chrome,
Firefox, Safari, Edge) to reach a broad user base.

 Test responsiveness on different devices, including

desktops, laptops, tablets, and mobile phones.

c. Performance:

 Optimize code execution for speed and responsiveness.

 Implement techniques to handle large codebases efficiently.

 Consider strategies for caching and minimizing latency.

d. Code Execution Environment:

 Evaluate options for running and executing code within the

browser securely.

 Explore containerization or virtualization for a safe and

isolated code execution environment.

2. Schedule Feasibility:

1. Development Timeframe:

 Create a realistic timeline for development, testing,

and deployment.

 Timeframe for minor project is approximately 5 months.

Frontend Programming and server-side processing can be
done in this timeframe. Backend programming may get
extended till major projext.

3. Legal Feasibility:

a. Intellectual Property:

 Ensure that the development of the online IDE uses

open-source technology and it do not infringe on any
existing patents or copyrights.

b. Compliance:

 Verify compliance with data protection regulations

(e.g., GDPR).
 SOFTWARE REQUIREMENT SPECIFICATION(SRS)

1. Introduction
1.1 Purpose
The purpose of this document is to provide a comprehensive overview
of the software requirements for the development of a Browser-Based
Online Integrated Development Environment (IDE).

1.2 Scope
The online IDE aims to provide a collaborative and feature-rich
coding environment accessible through web browsers. Users can write,
edit, compile, and debug code seamlessly, fostering efficient
development workflows.

2. Functional Requirements
2.1 Code Editing and Execution
1. The IDE shall provide a code editor with syntax
highlighting and auto-completion features.

2. Users should be able to create, open, edit, save, and

delete projects and files.

3. The system shall support the execution of code within the

browser securely.

4. Users shall have the ability to run, compile, and debug

code in Python, C/C++, Node.js.

2.2 User Interface

1. The IDE shall have an intuitive and responsive user
interface created using html, css and javascript.

2. Users should be able to customize the theme of IDE

environment based on their preferences.
3. Non-Functional Requirements
3.1 Performance
1. The system shall provide fast response times for code
execution and collaboration.

2. Load testing shall be conducted to ensure optimal

performance under various user loads.

3.2 Security
1. The IDE shall implement secure authentication protocols.

2. User data and code shall be encrypted during transmission

and storage.

3. Regular security audits and updates to address

vulnerabilities.

4. Constraints
1. The system must comply with relevant data protection
regulations (e.g., GDPR).

2. Compliance with open-source licensing for third-party

components.

5. Conclusion
This Software Requirement Specification outlines the features and
constraints for the development of a Browser-Based Online IDE. It
serves as a foundation for the development team to design, implement,
and test the system effectively. Regular updates to this document may
be necessary as the project progresses and new requirements emerge.
 Work Breakdown Structure(WBS)
1. Project Overview
1.1 Project Name:
Haxe Online IDE

1.2 Project Objectives:

 Develop a feature-rich and collaborative online IDE accessible
through web browsers.

 Enable users to write, edit, compile, and debug code seamlessly

in various programming languages.

 Facilitate real-time collaboration among multiple developers on

the same project.

1.3 Project Scope:

The project will encompass the entire software development life
cycle, including requirements analysis, design, development, testing,
deployment, and ongoing maintenance.

2. Project Team
2.1 Team Members
 Soumyadeep Dey (Backend Developer)

 Souhardya Majumder (Frontend Developers)

 Subham Dasgupta (UI/UX Designers)

 Soumo Sengupta (Quality Assurance (QA) Testers)

2.2 Roles and Responsibilities

 Frontend Developers: Responsible for developing the user
interface and code editor.

 Backend Developers: Responsible for building the server-side

logic, authentication, and code execution environment.

 UI/UX Designers: Design wireframes, mockups, and prototypes for

the user interface.
  QA Testers: Conduct thorough testing to ensure the reliability
and security of the online IDE.3. Project Timeline

3.1 Milestones
1. Project Initiation - 1 week 3 days

2. Planning and Design – 1 week

3. Development - 11 weeks

4. Testing and Quality Assurance - 1 weeks

5. Deployment - 2 weeks

6. Post-Deployment and Continuous Improvement - Ongoing

4. Risk Management
4.1 Identified Risks:
 Technical challenges in implementing external libraries and code
execution.

 Security vulnerabilities in the code execution environment.

 Delays in user acceptance testing due to evolving requirements.

4.2 Mitigation Strategies:

 Conduct a thorough feasibility study and allocate additional
time for potential challenges.

 Implement regular security audits and adhere to best practices

for secure coding.

5. Quality Assurance
5.1 Testing Approach
 Unit Testing

 Integration Testing

 User Acceptance Testing

 Continuous Testing throughout the development lifecycle

5.2 Code Reviews
 Regular code reviews to ensure code quality and adherence to
coding standards

6. Gantt Chart

7. Cost Estimation
The cost analysis of a software development project based on Lines of
Code (LOC) involves estimating various costs associated with
development, testing, deployment, and maintenance. However, it's
important to note that estimating costs solely based on LOC can be
challenging, as the complexity of the code, technologies used, team
efficiency, and project requirements also play significant roles.
Here's a simplified cost analysis assuming a cost per line of code:

Assumptions:
1. Cost per Line of Code (LOC): Rs 10 (Note: This is a
hypothetical value and may vary based on the project and its
complexity).

2. Average Developer Productivity: 20 LOC per hour (Note:

Hypothetical value Productivity rates vary widely).
Calculation:
Given LOC = 377

1. Total Development Cost:

 LOC * Cost per LOC = 377 * Rs 10 = Rs 3,770

2. Total Testing Cost:

 Assuming 50% of development time is spent on testing.

 Total Testing Cost = (Total Development Cost * 50%) = Rs

3,770 * 0.5 = Rs 1,885

3. Deployment and Infrastructure Cost:

 Assuming 10% of development cost for deployment and

infrastructure.

 Deployment Cost = Total Development Cost * 10% = Rs 3,770 *

0.1 = Rs 377

4. Documentation Cost:

 Assuming 5% of development cost for documentation.

 Documentation Cost = Total Development Cost * 5% = Rs 3,770

* 0.05 = Rs 188.50

5. Contingency (10% of Total Cost):

 Contingency Fund = Total Development Cost * 10% = Rs 3,770

* 0.1 = Rs 377

Total Project Cost:

Total Project Cost = Total Development Cost + Total Testing Cost +
Deployment Cost + Documentation Cost + Contingency Fund

Total Project Cost = Rs 3,770 + Rs 1,885 + Rs 377 + Rs 188.50 + Rs

377

Total Project Cost = Rs 6,597.50

[Note: The above Cost analysis of the project is solely based on

hypothetical value. The purpose of the representation of cost
analysis in this project was to demonstrate the methods used in the
process.]
8. Data Flow Diagram
A Data Flow Diagram (DFD) provides a visual representation of how
data flows within a system. In the context of a Browser-Based Online
IDE, the DFD illustrates the flow of data between different
components of the system. Below is a simplified Level 1 DFD for a
browser-based online IDE:
 SOFTWARE DESIGN

1. Interface Design:

Designing the interface for a Browser-Based Online IDE involves

creating a user-friendly and efficient environment that facilitates
code editing, collaboration, and other essential features. Below is a
conceptual interface design for a browser-based online IDE:

1. Header Section:
 Logo and IDE Name: Display the logo and name of the online IDE
for brand recognition.

 User Account: Provide options for user authentication, profile

settings, and logout.

2. Navigation Bar:
 File: Options for creating, opening, saving, and managing
projects and files.

 Programming language selector: Option to select or choose a

programming language

 Run/Debug: Options for running and debugging code.

 Collaboration: Real-time collaboration features, chat, and user

presence indicators.

 Help: Documentation, FAQs, and support options.

3. Code Editor Section:

 Syntax Highlighting: Clearly highlight syntax elements for
better code readability.

 Auto-Completion: Provide intelligent code suggestions for faster

coding.

 Line Numbers and Breakpoints: Aid in debugging by displaying

line numbers and allowing users to set breakpoints.
4. Console/Output Panel:
 Run Output: Display output from code execution, error messages,
and debugging information.

 Console for Logs: Provide a console for displaying logs and

messages generated during code execution

2.

Entity-Relationship diagram:
Creating an Entity-Relationship Diagram (ERD) for a Browser-Based
Online IDE involves identifying the main entities and their
relationships within the system. Below is a simplified ERD for a
browser-based online IDE:
Entities:

1. User:

 Attributes:Username (Primary Key), Email, Password.

2. Haxe IDE:

 Attributes: URL (Primary Key), Domain Name, UX/UI design,

website Contents or elements.

3. File:

 Attributes: FileName (Primary Key), FileType, FilePath.

4. Editor:

 Attributes: Language-support(Primary Key), syntax

highlighting, code folding, autocomplete
 5. Compiler/Interpreter:

 Attributes: software binary (Primary Key), Software

Version, Environment variable.

Relationships:
1. User - HaxeIDE (One-to-One):

 A user can create one Haxe Ide Website at a time.

 A WebSite is associated with one user.

2. HaxeIDE - Editor (One-to-One):

 A HaxeIDE can contain one Editor instance at a time.

3. HaxeIDE – File (One-to-Many):

 A user can create multiple files.

4. File - Compiler/Interpreter(Many-to-One):

 A Compiler can compile multiple files.

5. Compiler/Interpreter - HaxeIDE (One-to-Many):

 A compiler can show multiple outputs.

 IMPLEMENTATION
Sample Code preview for developed modules:
1. HTML

The code includes elements such as a preloader, video backgrounds,

code editor, control panel, buttons for selecting programming
languages, and pop-up windows for "About Us" and "Contact Us."

Preloader Section:
 Displays a preloader with a video background while the page is loading.
htmlCopy code
<div id="preloader">
<video id="preloader-video" autoplay muted controls>
<source src="images/loading vid.mp4" type="video/mp4">
</video>
</div>
Compiler Section:
 Contains a chatbot, control panel, code editor, button for executing code, and an output
section.
htmlCopy code
<div id="compiler">
<!-- Chatbot with a video background -->
<div class="chatbot">
<video width="395" height="727" autoplay loop muted plays-inline
class="background-clip">
<source src="images/video (online-video-cutter.com).mp4" type="video/mp4">
</video>
</div>

<!-- Control panel for selecting programming languages -->

<div class="control-panel">
Select Language:
&nbsp; &nbsp;
<select id="languages" class="languages" onchange="changeLanguage()">
<option value="python"> Python </option>
<option value="c"> C </option>
<option value="cpp"> C++ </option>
<option value="node"> Node </option>
</select>
</div>

<!-- Code editor section -->

<div class="content" id="body">
<div class="editor" id="editor"></div>
</div>

<!-- Button for running code -->

<div class="button-container">
 <button class="btn" onclick="executeCode()"> Run </button>
</div>

<!-- Output section -->

<div class="output"></div>

<!-- Sidebar with logo and icon buttons -->

<div class="container">
<div class="sidebar">
<div class="logo">
<img src="images/haxe logo.png" alt="Small Logo" class="small-logo">
<img src="images/haxe full logo.png" alt="Full Logo" class="full-logo">
</div>
<div class="icon-button-group">
<!-- Icon buttons for Folder, ChatBot, About, and Contact -->
<!-- Images and text are placeholders, replace them with actual icons and
text -->
<button class="icon-button" data-text="Folder"><img
src="images/folders.png" alt="Icon 1"><span>Folder</span></button>
<button class="icon-button" data-text="ChatBot"><img
src="images/chatgpt(1).png" alt="Icon 2"><span>ChatBot</span></button>
<button class="icon-button" data-text="About" id="about-button"><img
src="images/about.png" alt="About Icon"><span>About</span></button>
<button class="icon-button" data-text="Contact" id="contact-button"><img
src="images/contact img.png" alt="Contact Icon"><span>Contact</span></button>
</div>
</div>
</div>

</div>
Pop-up Windows for "About Us" and "Contact Us":
 Contains information about the project and a form for users to contact the team.
htmlCopy code
<div class="popup" id="about-popup">
<!-- About Us pop-up content -->
</div>

<div class="popup" id="contact-popup">

<!-- Contact Us pop-up content -->
</div>

Overall, this HTML code represents the structure of a web page with
an online IDE, including a code editor, control panel, and additional
features such as chatbot, pop-up windows, and video backgrounds

2. CSS

1. Global Styles:

 Sets the background color of the entire page to black.

cssCopy code
body {
background-color: black;
}
 2. Preloader Styles:

 Styles for a full-screen video preloader.

cssCopy code
#preloader {
/* ... */
}

#preloader-video {
/* ... */
}
3. Sidebar Styles:

 Styles for a collapsible sidebar with a logo and icon buttons.

cssCopy code
.container {
/* ... */
}

.sidebar {
/* ... */
}

.logo {
/* ... */
}

.small-logo {
/* ... */
}

.full-logo {
/* ... */
}

.icon-button-group {
/* ... */
}

.icon-button {
/* ... */
}

.icon-button img {
/* ... */
}

.icon-button span {
/* ... */
}

.popup Styles:
- Styles for pop-up windows (About Us and Contact Us).

```css
.popup {
/* ... */
}

.popup-content {
/* ... */
}

.popup-content input,
.popup-content textarea {
/* ... */
}

.close-button {
/* ... */
}
5. Chatbot Styles:

 Styles for a chatbot positioned on the right side of the page.

cssCopy code
.chatbot {
/* ... */
}

.background-clip {
/* ... */
}
6. Control Panel Styles:

 Styles for the control panel where users can select the programming language.
cssCopy code
.control-panel {
/* ... */
}

.languages {
/* ... */
}
7. Editor Styles:

 Styles for the code editor and button container.

cssCopy code
.editor {
/* ... */
}

.button-container {
/* ... */
}

.btn {
/* ... */
}
8. Output Styles:

 Styles for the output section.

cssCopy code
.output {
/* ... */
}
These styles define the layout, appearance, and behavior of various
elements on your web page, including the sidebar, pop-up windows,
chatbot, code editor, and more.

3. Javascript

Preloader Event Listener:

 Hides the preloader video when it ends and displays the website content.
javascriptCopy code
document.addEventListener("DOMContentLoaded", function () {
// ...
});
2. Sidebar Sliding:

 Adds or removes the 'active' class on the container based on the mouse position,
triggering the sidebar sliding effect.
javascriptCopy code
container.addEventListener('mousemove', (e) => {
// ...
});

container.addEventListener('mouseleave', () => {
// ...
});
3. About Button Pop-up:

 Displays the "About Us" pop-up when the user clicks the "About" button and hides it
when the close button is clicked.
javascriptCopy code
aboutButton.addEventListener('click', () => {
// ...
});

closeButton.addEventListener('click', () => {
// ...
});
4. Contact Button Pop-up:

 Displays the "Contact Us" pop-up when the user clicks the "Contact" button and hides it
when the close button is clicked.
javascriptCopy code
contactButton.addEventListener('click', () => {
// ...
});
closeContactButton.addEventListener('click', () => {
// ...
});
5. Editor Initialization:

 Initializes the Ace editor on window load, setting the theme and default mode to Python.
javascriptCopy code
window.onload = function() {
// ...
}
6. Language Change and Code Execution Functions:

 Changes the editor's mode based on the selected language and executes the code using
AJAX.
javascriptCopy code
function changeLanguage() {
// ...
}

function executeCode() {
// ...
}
7. AJAX for Code Compilation:

 Uses AJAX to send the selected language and code to the server for compilation,
updating the output section with the response.
javascriptCopy code
$.ajax({
// ...
});
These scripts handle various aspects of your webpage, including
preloading, sidebar interaction, pop-up functionality, and
integration with the Ace code editor for language selection and code
execution
Sample Output:

A Basic C program which prints a string is executed.

The output is being shown in the ouput container.

A Basic Python program which prints a string is executed.

The output is being shown in the ouput container.
 CONCLUSION
The development and implementation of the Browser-Based Online IDE
project mark a significant achievement in providing a dynamic and
accessible coding environment. Throughout this project, the team has
successfully integrated essential features, fostering a seamless
coding experience for users across different programming languages.

The preloader mechanism ensures a visually engaging and smooth

transition into the IDE, creating a positive first impression. The
sidebar, with its intuitive sliding effect triggered by user
interaction, enhances the user interface's functionality, making it a
user-friendly and dynamic workspace. The integration of a versatile
code editor, powered by the Ace library, allows users to write and
edit code effortlessly. The ability to switch programming languages
dynamically enriches the user experience, accommodating a wide range
of developers with varying language preferences.

The project goes beyond mere coding capabilities by introducing a

collaborative aspect with the integration of a chatbot. This feature
not only provides real-time assistance but also contributes to
building a supportive coding community, aligning with the project's
vision of making coding accessible and enjoyable for all.

The inclusion of pop-up windows for "About Us" and "Contact Us" adds
a personal touch to the project, providing users with insights into
the team behind the IDE and offering a direct means of communication.

Furthermore, the project exhibits robust error handling and user

feedback through pop-up messages and alerts, ensuring a smooth and
responsive user experience.

In conclusion, the Browser-Based Online IDE project successfully

combines functionality, aesthetics, and collaboration, offering a
comprehensive platform for coding enthusiasts. The team's commitment
to accessibility, user engagement, and continuous improvement
positions this project as a valuable asset in the realm of online
coding environments. As the project evolves, it holds the potential
to contribute significantly to coding education and empowerment,
fostering a community-driven approach to programming excellence.
 FUTURE SCOPE
The Browser-Based Online IDE project has laid a solid foundation for
an immersive coding experience, but its journey doesn't end here.
Looking forward, there are several avenues for enhancement and
expansion that can propel the project to greater heights:

1. Advanced Code Analysis and Debugging:

 Implement more robust code analysis tools and debugging

features to provide developers with deeper insights into
their code. Features like real-time error highlighting,
code suggestions, and step-through debugging can
significantly enhance the development process.

2. Enhanced Collaboration Features:

 Strengthen the collaborative aspect of the IDE by

introducing real-time code sharing, collaborative editing,
and more interactive features within the chatbot. The goal
is to create a virtual space where developers can
seamlessly collaborate on projects in real-time.

3. Intelligent Code Completion:

 Integrate advanced code completion mechanisms powered by

machine learning. This can include context-aware
autocompletion, suggesting entire code snippets based on
the current context, and adapting to individual coding
styles.

4. Plugin System and Customization:

 Develop a plugin system that allows users to extend the

IDE's functionality with custom plugins. This could range
from integrating third-party libraries to adding support
for specific frameworks or technologies, giving users the
flexibility to tailor the IDE to their needs.

5. Cloud Integration and Storage:

 Enable seamless integration with cloud storage services,

allowing users to save and retrieve their projects directly
 from cloud repositories. This not only enhances project
management but also ensures data security and accessibility
from multiple devices.

6. Machine Learning-Powered Assistance:

 Evolve the chatbot into an intelligent assistant by

incorporating machine learning algorithms. This could
involve natural language processing (NLP) capabilities to
understand user queries better and provide more
contextually relevant assistance.

7. Extended Language Support:

 Expand the supported programming languages to cater to a

broader user base. Regularly update language versions and
add support for emerging languages to stay relevant in the
ever-evolving landscape of programming.

8. Mobile Optimization:

 Optimize the IDE for mobile devices, ensuring a responsive

and user-friendly interface. This enables developers to
code on-the-go, fostering flexibility in their work
environment.

9. User Analytics and Feedback Mechanism:

 Implement user analytics to gather insights into user

behavior and preferences. Introduce a feedback mechanism
within the IDE to collect user suggestions and bug reports,
facilitating continuous improvement based on user input.

10. Educational Features:

 Develop features specifically designed for educational

purposes, such as interactive coding exercises, tutorials,
and integration with learning platforms. This can position
the IDE as a valuable tool for coding education.
 REFERENCES

 https://online.visual-paradigm.com/
 https://www.onlinegantt.com/
 https://www.geeksforgeeks.org/
 https://www.javatpoint.com/