International Journal of Research Publication and Reviews

Journal homepage: www.ijrpr.com ISSN 2582-7421

DevNest- An Online Coding IDE

1 2 3 4 5
Saurabh Jain G, Saravanan N, Mylesh M, Sanjay Kumar V, Sankar S
1,2,3,4
Student, CSE Department, Dhirajlal Gandhi College Of Technology Salem, India
1
[email protected], [email protected], [email protected], [email protected],
5
Assistant Professor, CSE Department, Dhirajlal Gandhi College Of Technology Salem, India
5
[email protected]

ABSTRACT

This paper presents a cutting-edge web-based online coding Integrated Development Environment (IDE) meticulously designed to empower students in
enhancing their problem-solving capabilities and honing their coding skills. The platform offers a robust coding environment encompassing a versatile code
editor, a seamless compiler, and an intuitive testing framework. These integrated tools serve as indispensable aids, enabling users to compose, test, and refine
their code with unprecedented efficiency, thus facilitating comprehensive skill development.

Moreover, the IDE boasts a plethora of advanced features, including shortcut key binding, strategically implemented to expedite code editing and navigation
processes. This ergonomic design not only enhances user experience but also fosters a conducive environment for rapid skill acquisition and mastery.

By harnessing the power of innovative web technologies, this web-based coding IDE transcends traditional learning paradigms, offering students a dynamic and
immersive learning experience. With its user-centric design and emphasis on practical skill development, the platform stands poised to revolutionize coding
education, empowering learners to navigate the complexities of programming with confidence and proficiency.

1. INTRODUCTION

In the rapidly evolving digital landscape, coding skills have emerged as an indispensable asset, transcending the boundaries of traditional computer
science domains and becoming increasingly relevant across various industries. As technology continues to permeate every aspect of modern society,
equipping students with proficiency in coding and problem-solving has become a paramount objective for educational institutions worldwide.
Recognizing the pivotal role of coding in shaping the future workforce, educational institutions are continually seeking innovative and effective
platforms to facilitate the learning and development of these critical skills. However, many students often encounter challenges in finding a suitable
platform that offers a comprehensive coding environment while simultaneously incorporating elements of competition and gamification – key factors
that can significantly enhance motivation, engagement, and overall learning outcomes.

1.1 Overview

Traditional coding environments, while functional, often lack the capacity to captivate and sustain student interest over an extended period. The absence
of interactive elements can lead to disengagement, hindering students' ability to fully immerse themselves in the learning process and develop a genuine
passion for coding. Moreover, the lack of a competitive dimension deprives students of the opportunity to benchmark their progress against their peers,
a crucial aspect of fostering a growth mindset and driving continuous self-improvement.

To address these shortcomings, the development of a web-based coding Integrated Development Environment (IDE) that seamlessly integrates a robust
coding environment with a competitive learning experience is of paramount importance. By creating a platform that caters to the diverse needs and
preferences of modern learners, educational institutions can unlock the full potential of their students, empowering them to excel in coding and
problem-solving while fostering a sense of accomplishment and lifelong learning.
The proposed web-based coding IDE aims to revolutionize the way students approach coding education by providing an immersive and engaging
learning experience. By combining a feature-rich coding environment with a competitive leaderboard system, the platform seeks to captivate students'
interest, cultivate their passion for coding, and ultimately, equip them with the skills and mindset necessary to thrive in the digital age.
Through this innovative approach, the web-based coding IDE holds the promise of transforming the coding education landscape, empowering students
to embrace the challenges and opportunities of the 21st century while fostering a lifelong love for learning and exploration in the ever-evolving realm of
technology.
.

1.2 Problem Statement and Objectives

The primary objective of this project is to develop a web-based coding IDE that provides students with a user-friendly and feature-rich coding
workspace. The platform aims to enhance students' coding abilities by offering a code editor, compiler, testing framework, and shortcut key binding for
efficient code editing and navigation. Additionally, gamification elements such as leaderboards and achievement badges will be incorporated to engage
and motivate users, fostering a competitive and enjoyable learning experience.

The IDE will feature an intuitive and user-friendly interface designed to cater to users of all skill levels, from beginners to advanced coders. Clear
navigation menus, customizable layouts, and interactive tutorials will be implemented to guide users through the platform seamlessly.The IDE will
offer a comprehensive set of coding tools, including a code editor with syntax highlighting, code completion, and error detection capabilities.
Additionally, a built-in compiler and testing framework will allow users to compile and run their code within the IDE, providing immediate feedback
on their progress.

2. REVIEW OF LITERATURE

Coding and programming have emerged as essential skills in the modern digital age, enabling the creation of software applications, process automation,
and innovative solutions to complex problems across various domains. At the heart of software development lies the Integrated Development
Environment (IDE), a crucial tool that facilitates the entire software development lifecycle, from writing and editing code to compiling, testing, and
debugging.
IDEs provide developers with a comprehensive workspace, offering a plethora of features that streamline the coding process and enhance productivity.
These environments typically incorporate code editors with syntax highlighting, code formatting, auto-completion, and code folding capabilities,
enabling developers to write and navigate code efficiently. Additionally, IDEs often integrate compilers, interpreters, and debugging tools, allowing
developers to build, run, and troubleshoot their applications within a single environment, minimizing context switching and cognitive load.
Moreover, advanced IDEs may incorporate profiling tools for performance optimization, version control integration for collaborative development, and
built-in testing frameworks for ensuring code quality and reliability. These features not only accelerate the development process but also foster best
practices and promote a more robust and maintainable codebase.

3. METHODOLOGY

3.1 Design Phase

The primary objective of this project is to develop an innovative web-based coding Integrated Development Environment (IDE) tailored to meet the
unique needs of students seeking to enhance their coding proficiency and problem-solving abilities. Recognizing the lack of a comprehensive platform
that seamlessly combines a robust coding environment with engaging gamification elements, this project aims to create an immersive and motivating
learning experience for students.

The design phase involves a meticulous conceptualization of the platform's architecture, user interface, and key features. The IDE will incorporate a
code editor equipped with advanced features such as syntax highlighting, code folding, and auto-completion, to streamline the coding process and
enhance productivity. Furthermore, a powerful compiler and a comprehensive testing framework will be integrated, enabling students to build, execute,
and thoroughly test their code within the same environment
.
To enhance efficiency and promote a seamless coding experience, the IDE will incorporate a shortcut key binding functionality, allowing users to
perform common actions and navigate the editor using intuitive keyboard shortcuts. Additionally, the platform will incorporate gamification elements,
including leaderboards and achievement badges, to foster a competitive and rewarding learning experience. These features aim to motivate students,
encourage continuous improvement, and provide a sense of accomplishment as they progress through various coding challenges and exercises.
The design phase will also encompass the development of a robust and scalable backend infrastructure capable of handling multiple concurrent users,
ensuring reliable performance and data integrity. Moreover, the platform's user interface will be meticulously crafted, adhering to principles of user-
centered design and accessibility guidelines, to ensure an intuitive and inclusive experience for students with diverse backgrounds and abilities.
.
3.2 Implementation Phase

Building upon the comprehensive design specifications, the implementation phase will involve the development of the web-based coding IDE, bringing
the envisioned features and functionalities to life. The platform will feature a welcoming home page where users can create accounts and securely log
in, facilitating personalized experiences and progress tracking.

Once authenticated, users will gain access to the code editor, a powerful and feature-rich environment where they can write, edit, and manipulate code
with ease. The integrated compiler and testing framework will enable students to seamlessly build, execute, and rigorously test their code, facilitating a
continuous cycle of coding, testing, and iterative refinement.

The implementation of the shortcut key binding feature will be a central focus, enabling efficient code editing and navigation through intuitive keyboard
shortcuts. This feature aims to streamline the coding process, reducing cognitive load and enhancing productivity, allowing students to focus on
mastering programming concepts and problem-solving techniques.

4. SYSTEM DESIGN

5. RESULT AND DISCUSSION

The web-based coding IDE provided students with a comprehensive platform to explore and enhance their problem-solving skills in coding. Through
this project, students gained exposure to various data structures and algorithms, expanding their knowledge and understanding of programming
concepts.

The platform was developed using React.js for the front-end, while Nest.js and MySQL were utilized for the back-end and database functionality. This
technology stack ensured a modern and responsive user experience while providing the necessary scalability and flexibility for future enhancements.

The online coding IDE featured a user-friendly interface that guided students through the process of participating in coding challenges or contests. The
platform streamlined the contest management process, reducing the effort and resources required for moderation and administration.

The primary focus of this project lay in creating, managing, and maintaining a secure online portal for participants. By investing efforts in developing a
robust and feature-rich platform, the project provided a cost-effective and accessible solution for students to engage in coding competitions and hone
their skills.

6. CONCLUSION

The web-based coding IDE development utilized React.js for the front-end and Nest.js with MySQL for the back-end and database functionality. This
technology stack provided a modern and efficient solution for creating the platform.

The online coding IDE streamlined the process of participating in coding challenges and contests, requiring only a few steps for entry. This approach
made it easier to independently moderate contests, reducing effort and minimizing the need for extensive human resources.
The primary focus was placed on creating, managing, and maintaining a secure online portal for participants. By investing efforts in developing a robust
and feature-rich platform, the project successfully delivered a cost-effective and accessible solution for students to engage in coding competitions and
hone their skills.

In conclusion, the web-based coding IDE facilitated an engaging and conducive environment for students to improve their coding abilities and problem-
solving techniques, ultimately enhancing their overall coding proficiency

References

● Online Integrated Development Environment (IDE) in Supporting Computer Programming Learning Process during COVID-19 Pandemic:
(https://www.researchgate.net/publication/351817694_Online_Integrated_Development_Environment_IDE_in_Supporting_Computer_Prog
ramming_Learning_Process_during_COVID-19_Pandemic_A_Comparative_Analysis)

● Online code editor on Private cloud computing

● ONLINE CODE EDITOR USING REACT