A MAJOR PROJECT REPORT ON

CODEVERSE-ONLINE CODING PLATFORM

A dissertation submitted in partial fulfilment of the

Requirements for the award of the degree of

BACHELOR OF TECHNOLOGY
in

INFORMATION TECHNOLOGY
Submitted by

MOHAMMAD ABDUL RAHIL (20B81A1201)

G RUSHI BHARGAV (20B81A1235)

ARRURU VARSHITH (20B81A1255)

Under the esteemed guidance of

Mr. A Seetharam Nagesh

Associate Professor, IT Department

CVR College of Engineering

DEPARTMENT OF INFORMATION TECHNOLOGY

CVR COLLEGE OF ENGINEERING

ACCREDITED BY NBA, AICTE & Affiliated to JNTU-H

Vastunagar, Mangalpalli (V), Ibrahimpatnam (M), R.R. District, PIN-501 510
2023-2024
 DEPARTMENT OF INFORMATION TECHNOLOGY

CERTIFICATE

This is to certify that the Project Report entitled “Codeverse-Online Coding platform”
is a bonafide work done and submitted by Mohammad Abdul Rahil (20B81A1201) G Rushi
Bhargav (20B81A1235), Arruru Varshith (20B81A1255), during the academic year 2023-
2024, in partial fulfilment of requirement for the award of Bachelor of Technology degree in
Information Technology from Jawaharlal Nehru Technological University Hyderabad, is a
bonafide record of work carried out by them under my guidance and supervision.

Certified further that to my best of the knowledge, the work in this dissertation has not
been submitted to any other institution for the award of any degree or diploma.

INTERNAL GUIDE HEAD OF THE DEPARTMENT

Mr. A Seetharam Nagesh Dr. Bipin Bihari Jayasingh
Associate Professor, IT Department Professor, IT Department

PROJECT COORDINATOR EXTERNAL EXAMINER

Mr. A Seetharam Nagesh
Associate Professor, IT Department
 ACKNOWLEDGEMENT

The satisfaction of completing this project would be incomplete without mentioning our
gratitude towards all the people who have supported us. Constant guidance and encouragement
have been instrumental in the completion of this project.

First and foremost, we thank the Chairman, Principal, Vice Principal for availing
infrastructural facilities to complete the major project in time.
We offer our sincere gratitude to our internal guide Mr. A Seetharam Nagesh, Associate
Professor, IT Department, CVR College of Engineering for his immense support, timely co-
operation and valuable advice throughout the course of our project work.

We would like to thank the Professor In-Charge of Projects, Dr. J. Sengathir, Professor
of Information Technology for his valuable suggestions in implementing the project.
We would like to thank the Head of Department, Professor Dr. Bipin Bihari Jayasingh,
for his meticulous care and cooperation throughout the project work.

We are thankful to A. Seetharam Nagesh, Project Coordinator, Associate Professor, IT

Department, CVR College of Engineering for her supportive guidelines and for having provided
the necessary help for carrying forward this project without any obstacles and hindrances.
We also thank the Project Review Committee Members for their valuable suggestions.
 DECLARATION

We hereby declare that the project report entitled “CODEVERSE-ONLINE CODING

PLATFORM” is an original work done and submitted to IT Department, CVR College of
Engineering, affiliated to Jawaharlal Nehru Technological University Hyderabad, Hyderabad in
partial fulfilment of the requirement for the award of Bachelor of Technology in Information
Technology and it is a record of bonafide project work carried out by us under the guidance of
Mr. A Seetharam Nagesh, Associate Professor, Department of Information Technology.

We further declare that the work reported in this project has not been submitted, either in
part or in full, for the award of any other degree or diploma in this institute or any other Institute
or University.

_________________________

Signature of the Student

(Mohammad Abdul Rahil)

(20B81A1201)

_________________________

Signature of the Student

(G Rushi Bhargav)

(20B81A1235)

_____________________

Signature of the Student

(Arruru Varshith)

(20B81A1255)
 ABSTRACT

The Coding Test Platform is a web application designed to facilitate the creation,
management, and execution of coding tests for assessing programming skills. It is a
comprehensive solution for organizations and educators to conduct coding assessments
efficiently. It addresses the needs of educational institutions and organizations by providing a
feature-rich, secure, and scalable solution for creating and conducting coding tests. With an
emphasis on user experience, real-time feedback, and data-driven analytics, the platform aims to
streamline the test creation and assessment process for various scenarios, contributing to
enhanced learning and efficient hiring processes. Leveraging using the following technologies
React, NextJS, Tailwind CSS, Type Script, Firebase, this platform offers a user-friendly interface
for administrators to design tests, and for participants to take these tests in an isolated
environment. The primary goal is to provide a seamless experience for both test creators and test
takers while ensuring robustness and security. With a focus on security, usability, and analytics,
the platform empowers users to create, manage, and evaluate coding tests effectively,
contributing to a streamlined and objective evaluation of participants' programming skills.

Frontend:
 React
 Tailwind CSS
Backend:
 NextJS
 Type script
 Firebase
 List of Figures

Figure Number Figure Name Page Number

1 ER diagram of Codeverse 17
2 Use Case diagram of Codeverse 18
3 Activity diagram of Codeverse 19
4 Sequence diagram of Codeverse 20
5 Architecture diagram of Codeverse 21
6 Login page 22
7 Registration page 23
8 Problem Creation form 26
9 List of Problems 30
10 Playground for Solving the problem 30
11 Result Page 35
12 Video Solution 36
13 Test Case-1 38
14 Test Case-2 39
15 Test Case-3 40
16 Logos of tools used 41
17 Node js website 48
18 Node js installation 48
19 Node js steps 49
20 visual studio code website download 49
21 visual studio code installation 50
22 visual studio code location choosing 50
23 Running React server 51
24 Home Page 51
25 Registration Page 52
26 Login Page 52
27 Playground and problem description 53
28 Test cases pass 53
 Table of Contents
Content Pg. No

1. Introduction………………………………………………………….…. 1
1.1 Literature Survey …………………………….……………………. 5
1.2 Proposed System……………………………………………………. 14
1.3 Problem Statement…………………………………………………. 14
1.4 Problem Discussion………………………………………………….14
2. Software Requirement Specifications ………………………………… 15
2.1 Functional Requirements……………………………………………15
2.2 Non-Functional Requirements……………………………………... 15
2.3 Hardware and Software Requirements ……………………………16
3. Design …………………………………………………………………… 17
3.1 Entity Relationship Diagram………………………………………..17
3.2 Use Case Diagram……………………………………………………18
3.3 Activity Diagram …………………………………………………….19
3.4 Sequence Diagram………………………………………………….. 20
3.5 Architecture Diagram……………………………………………… 21
4. Implementation ………………………………………………………… 22
4.1 Overview ……………………………………………………….…… 22
4.2 Authentication and Authorization………………………………… 22
4.3 Problem Creation……………………………………………………25
4.4 Problem Solving……………………………………………………. 30
4.5 Result analysis and video solution……………………… …………35
5. Testing …………………………………………………………………... 38
5.1 Credentials Testing…………………………………………………..38
5.2 Validating Testing …………………………………………………...39
5.3 Video Solution Testing ………………………………………………40
Conclusion ……………………………………………………………….42
Future Enhancements …………………………………………………..43
References ………………………………………………………………..45
Appendix A – Abbreviations ……………………………………………46
Appendix B – Software Installation procedure ………………………..47
Appendix C – Software Usages Process ………………………………..50
 Chapter 1
INTRODUCTION
A coding platform plays a crucial role in enhancing programming skills and preparing
individuals for technical interviews in the software industry. They offer a vast repository of coding
problems ranging from basic to advanced levels, covering various algorithms, data structures, and
problem-solving techniques. Engaging with these platforms allows developers to practice coding
under time constraints, improving their ability to think critically and efficiently solve problems.

Welcome to the world of Codeverse! Our innovative project is an automated coding

platform designed to transform the way students learn and assess their programming skills.
Traditional platforms like Hanker Rank and LeetCode often come with challenges such as lengthy
processes, and not providing video explanation and solution for programs, and limited feedback.
Codeverse aims to address these issues by providing a streamlined and interactive solution for
testing programming skills and video solution to help users apply their coding skills to practical
scenarios. The main objective of Codeverse is to offer students a user-friendly and efficient
platform to test their understanding of various programming skills. By leveraging innovative
technologies, including React, NextJS, Typescript, and Firebase, Codeverse provides an engaging
and dynamic programming environment. To stand out among the traditional platforms a video
solution, timer feature for self-assessment and skill improvement is incorporated in platform. Users
will be able to grasp problems more effectively, leading to better understanding and application of
coding principles. Various levels of problems have been incorporated to improve the user
confidence and develop their programming skills. The availability of challenges at various levels
will maintain user engagement by offering suitable tasks that align with their skill levels and
aspirations. Exposure to varying difficulty levels and problem domains will refine users problem-
solving abilities and expand their programming repertoire. Complex problems have been designed
to push experienced users to apply intricate coding methods and algorithms. These challenges will
encourage users to think critically and creatively, solving problems with efficient and optimized
solutions.

Codeverse utilizes React for its front-end development, enabling the creation of responsive
monad interactive user interfaces. The use of NextJS and Typescript, a powerful Node.js
framework, facilitates the seamless integration of the front-end with the back-end logic. Firebase,
a flexible and scalable NoSQL database, ensures Authentication and efficient storage and retrieval
of problems. By offering an automated and efficient video solution of problems, Codeverse
empowers students to learn and improve their skills at various levels of difficulty.

1
 REACT JS
React is chosen for the frontend of this coding
platform due to its inherent benefits in structuring and
maintaining complex user interfaces. Its component-
based architecture promotes code modularity and
reusability, allowing the development team to create
and manage distinct UI elements efficiently. The
virtual DOM optimizes rendering performance,
ensuring real-time updates and dynamic content
changes for a responsive user experience. React's declarative syntax simplifies code readability, aiding
in the creation and maintenance of a clear and understandable codebase. These features collectively
enhance the development speed and maintainability of the platform.

Moreover, React's active community and extensive ecosystem provide access to a wealth of
resources and third-party tools, facilitating faster development and integration of essential features.
The framework's suitability for building Single Page Applications (SPAs) aligns well with the coding
platform's requirements for seamless navigation and interactivity during coding assessments. React's
robust state management capabilities further support the dynamic nature of the platform, allowing for
efficient handling of user interactions and real-time updates. Overall, React's combination of
architecture, performance optimization, and community support make it a compelling choice for
building a frontend that prioritizes a streamlined and user-friendly coding assessment experience.

Tailwind CSS

Tailwind CSS is selected as the frontend styling

framework for the coding platform due to its utility-
driven and customizable approach to styling, which aligns
well with the dynamic and diverse nature of a coding
assessment interface. Tailwind CSS offers a low-level
utility-first methodology, allowing developers to quickly create and customize styles without the
need for writing extensive CSS code. This expedites the frontend development process, enabling
the team to focus more on functionality and user experience. The utility-first approach also ensures
consistency in styling across the platform, fostering a cohesive and visually appealing design.

Additionally, Tailwind CSS facilitates responsive design without the need for media
queries, making it well-suited for the varied screen sizes and devices that users might employ
during coding assessments. The framework's modular and atomic CSS classes provide flexibility,
enabling the team to efficiently manage and adapt styles as the platform evolves. The utility classes
map to predefined design patterns, promoting a standardized and maintainable codebase. By
leveraging Tailwind CSS, the coding platform benefits from a streamlined and efficient styling

2
 workflow, ensuring a visually cohesive, responsive, and user-friendly interface for both
administrators creating tests and participants taking them.

NEXT JS
Next.js is employed as the backend
framework for this coding platform to
capitalize on its robust capabilities and
seamless integration with the frontend,
ensuring a highly performant and scalable
web application. With its server-side
rendering (SSR) and static site generation
(SSG) features, Next.js significantly
enhances the platform's speed and
optimization. The ability to pre-render
pages results in faster loading times,
crucial for providing a responsive and efficient user experience during coding assessments. This
becomes especially pertinent when dealing with a large number of users simultaneously accessing the
platform.

Furthermore, Next.js, being a React framework, facilitates a cohesive development experience,

enabling the frontend and backend teams to work synergistically. The framework's support for
TypeScript adds a layer of static typing, enhancing code quality and reducing potential runtime errors.
The simplicity of Next.js in setting up API routes ensures efficient communication between the
frontend and backend components, streamlining data flow and enhancing overall system performance.
Its extensibility and versatility make Next.js an ideal choice for building a feature-rich and scalable
backend, allowing for easy adaptation to the evolving needs of the coding platform.

TYPESCRIPT
TypeScript is employed as the backend language for
the coding platform due to several key advantages
that enhance development, maintainability, and
overall system reliability. TypeScript, a statically
typed superset of JavaScript, provides strong typing,
enabling developers to catch potential errors during
the development phase rather than at runtime. This
helps in creating a more robust and error-resistant
backend codebase, critical for a coding assessment
platform where precision and accuracy are paramount.

3
 The advanced features offered by TypeScript, such as interfaces and static typing, enhance
code readability and maintainability, facilitating collaborative development among team members.
With TypeScript, the coding platform benefits from better tooling support, including intelligent
autocompletion and code navigation, which significantly speeds up development cycles. Moreover,
TypeScript's ability to compile down to plain JavaScript ensures compatibility with existing JavaScript
libraries and frameworks, allowing seamless integration with other technologies used in the platform.

Another crucial aspect is TypeScript's scalability, making it well-suited for large and
complex codebases. This is particularly important for a backend system handling various aspects of
test creation, management, and execution. The platform can leverage TypeScript's scalable architecture
to efficiently handle increased user loads, ensuring a smooth and responsive experience for
administrators and participants alike. Overall, TypeScript's combination of type safety, readability,
tooling support, and scalability makes it a strategic choice for building a reliable and maintainable
backend for the coding assessment platform.

FIREBASE
Firebase serves as the backend for the coding
platform due to its versatile and scalable features,
providing a comprehensive backend infrastructure
that aligns with the dynamic requirements of the
application. Firebase's real-time database is a key
asset, offering a NoSQL database solution that
enables seamless synchronization of data across
clients in real-time. This is particularly advantageous for a coding platform where instant feedback and
updates during assessments are critical.
Additionally, Firebase Authentication ensures a secure and reliable user authentication
system, a crucial aspect for maintaining the integrity of coding tests and user data. Its ease of integration
with other Firebase services streamlines the development process, allowing for efficient handling of
user accounts, authentication, and access management.

Firebase Cloud Functions are leveraged for serverless computing, enabling the coding platform to
execute server-side logic without managing the server infrastructure. This serverless architecture
ensures scalability and cost-effectiveness, vital for handling varying loads during peak usage times.
Furthermore, Firebase Hosting simplifies deployment, providing a fast and secure content delivery
network (CDN) for serving web assets globally. The comprehensive suite of Firebase services
collectively contributes to the coding platform's reliability, scalability, and ease of development,
making it a suitable choice for a backend solution in this context.

4
1.1 Literature Survey
The paper [1] presents a study on a web-based programming learning environment
(WPAS) designed to support cognitive development in programming. The study proposes a system
to facilitate web-based programming with online coding, debugging tools, and peer assessment. It
includes a series of programming learning activities such as programming concepts testing,
program gap filling, program debugging, coding to solve problems, and peer assessment. The study
also discusses the grading criteria for these activities and the use of an online coding tool and
annotation tool to support the learning process. Experimental results with 47 undergraduate
students showed that the WPAS system improved students' cognitive development in web-based
programming. The study suggests that teachers could design web-based programming activities
supported by the WPAS system to improve students' cognitive development in web-based
programming.

The WPAS system was designed to support web-based programming and included tools
for online coding, debugging, and peer assessment. The study proposed and conducted five
programming learning activities: programming concepts testing, program gap filling, program
debugging, coding to solve problems, and peer assessment. These activities were designed to
correspond to different cognitive levels in Bloom's taxonomy, such as evaluation, synthesis,
analysis, application, knowledge, and comprehension.

The study evaluated students' performance in programming learning activities based on

grading criteria such as correctness, efficiency, and programming style. The results showed that
the WPAS system improved students' cognitive development in web-based programming.
Additionally, the study employed the Technology Acceptance Model (TAM) to explore the
perceived usefulness and ease of use of the WPAS system.

The document also discussed the importance of well-structured and ordered learning
procedures for programming learning and the need for teachers to pay attention to the development
of cognition in conducting programming learning activities. It also highlighted the significance of
peer assessment in promoting students' higher cognitive skills.

In conclusion, the study suggests that the proposed web-based programming learning
environment, WPAS, can be used by teachers to design web-based programming activities to
enhance students' cognitive development in programming. The document provides valuable
insights into the design and implementation of a web-based programming learning environment
and its impact on students' cognitive development in programming.

The paper [2] discusses the need for web-based course support for novice computer
programmers, focusing on the problems identified through interviews and tests. The study
highlights the challenges faced by students in understanding computer programming concepts and
the inadequacies of the traditional lecture-driven approach in higher education. The test results

5
reveal that a considerable number of students lacked a basic knowledge of programming,
struggling with fundamental concepts.

The document compares the findings with related research, indicating similar difficulties
faced by novice programmers in previous studies. It emphasizes the importance of prior knowledge
and the approach to studying, attributing these factors to the problems encountered by students.
The need for web-based support is identified, with a focus on incorporating the principles of
constructivism into the learning environment.

The document recommends several strategies for implementing web-based course support,
such as stimulating prior knowledge, structuring learning, applying concepts to new situations,
promoting active constructive learning, improving communication between students and tutors,
and maintaining a database of misconceptions. It also discusses the ongoing and future research
on the implementation of course support, including the use of an "intelligent pedagogical agent"
to monitor student progress and provide personalized support.

In conclusion, the document emphasizes the need for a shift towards a constructivist
learning environment and the integration of web-based course support to address the challenges
faced by novice computer programmers. It provides comprehensive recommendations for the
implementation of web-based support based on the principles of constructivism and highlights the
ongoing research in this area.

The paper [3] introduces Codeflex, a web-based platform aimed at addressing the dearth
of programming assignments in academic environments. It recognizes the pivotal role of practice
in programming education and highlights the scarcity of assignments due to the time-consuming
nature of their evaluation. Codeflex seeks to bridge this gap by offering a repository of
programming problems for practice, learning, and competitive programming. Its key innovation
lies in real-time evaluation of user-submitted code, a crucial feature lacking in many academic
settings. This platform aims to provide a dynamic and engaging environment for students to
develop solid programming foundations.

In its development, the paper conducts a comparative analysis of existing competitive

programming platforms, identifying their strengths and weaknesses. This assessment serves as a
benchmark for Codeflex’s design and functionalities. The platform's architecture adopts a web
service model with token-based access to ensure security. The backend, powered by Java and
Spring, manages data manipulation, while code compilation and execution leverage parallel
processing for improved efficiency.

A significant aspect highlighted in the paper is the performance evaluation of Codeflex.

Comparative testing demonstrates a noteworthy 39% enhancement in submission execution time
through the adoption of parallel processing, showcasing its efficiency in real-time code evaluation.
The paper also provides an illustrative simulation of the platform's operation, presenting interfaces
for learning, problem exploration, code writing, submission, and result evaluation. This user-

6
friendly approach distinguishes Codeflex, emphasizing accessibility and engagement for users,
whether for practice or participation in competitive programming.

In conclusion, the paper asserts that Codeflex fulfils its objectives of providing a platform
for users, especially students, to enhance their programming skills through problem-solving and
engaging tournaments. It also identifies areas for future enhancements, such as bolstering the
evaluation module, implementing plagiarism detection, and improving control for tournament
organizers. Overall, Codeflex stands out for its emphasis on real-time evaluation and multifaceted
functionalities, filling a crucial void in programming education.

The paper [4] introduces a web-based programming language teaching platform aimed at
addressing challenges learners face in mastering programming languages, particularly when
encountering numerous errors that impede their learning progress. Programming requires intricate
problem-solving skills, often presenting complexities that hinder effective evaluation of learners'
abilities and provide timely assistance. To resolve this, the study devised a platform integrating a
two-tier test approach and a visualization parsing model to identify learner difficulties and aid in
debugging, ultimately enhancing learning effectiveness.

Developed to support popular programming languages like C/C++, Java, JavaScript,

Python, and PHP, this platform caters to both educators and students, facilitating teaching and
learning activities. The structure encompasses a browser-based environment enabling users to edit,
compile, and examine programming language units. This accessibility removes barriers related to
lacking or self-constructing development environments. The system automatically stores compiled
programming codes, enabling educators to review learners' logic perception and computational
thinking processes. The two-tier test strategy helps educators comprehend students'
misconceptions and errors, aiding in clarifying concepts.

The platform fosters hands-on learning via online coding, allowing learners to construct
logic perception and computational thinking abilities. Upon compiling code, learners undergo
testing and debugging, a phase critical for learning but where obstacles frequently arise. The
platform integrates a visualization parsing model, employing visualization tools to assist learners
in rectifying coding errors, thereby improving learning effectiveness.

In conclusion, the study presents a web-based programming language teaching platform

incorporating a two-tier test and visualization parsing functionality. Its goal is to evaluate learners'
abilities, identify learning hurdles in programming languages, and provide immediate feedback to
expedite debugging, reduce frustration, and bolster logic perception and computational thinking
skills. The system's development is complete, and future teaching experiments and evaluations
will validate its efficacy in enhancing programming language learning.

7
 CodeOcean [5] is an innovative web-based platform tailored for Massive Open Online
Courses (MOOCs), specifically focusing on imparting practical programming skills to beginners.
It addresses a critical gap in traditional MOOC components by emphasizing the necessity of hands-
on programming exercises and timely, automated feedback for effective learning. This platform is
designed to cater to a wide range of programming languages, scalable assessment methodologies,
user-friendly interfaces for learners with varying digital literacy levels, secure code execution
environments, and seamless integration capabilities with existing e-learning systems.

The outlined paper introduces five fundamental requirements for Code Ocean’s
functionality and success: versatility, novice-friendliness, scalability, security, and interoperability.
Its design incorporates a web-based development environment that comprises a client-side code
editor and a server-side component for executing code. This setup supports multiple files, enabling
learners to engage in more complex programming exercises while fostering a practical and
interactive learning experience.

To ensure secure code execution, CodeOcean utilizes Linux Containers (LXC) and Docker,
which offer isolated environments with controlled resource usage. This approach guarantees both
security and low latency for providing swift feedback to learners. Assessment on the platform
primarily relies on automated techniques, giving instructors the flexibility to employ various
testing frameworks or custom scripts. Additionally, the feedback loop includes explanations
provided by instructors to help learners understand and rectify their code's deficiencies,
encouraging iterative refinement of solutions.

Following initial testing in openHPI courses, CodeOcean underwent refinements to address

early challenges, proving its versatility and readiness for widespread use in production
environments. As an open-source platform, it welcomes collaboration and contributions from the
educational community, inviting educators to utilize it in their e-learning platforms and contribute
to its ongoing enhancement.

In essence, CodeOcean stands as a comprehensive, scalable, and secure platform tailored

explicitly for MOOCs, providing crucial hands-on programming experiences and automated
assessment with valuable feedback, benefiting learners from diverse backgrounds and skill levels.
The paper [6] introduces a crowdsourcing-based online programming platform designed
to cater to the learning needs of computer programming students. It addresses the challenge of fair
assessment and engages users in practical exercises with real-time feedback. The platform employs
an objective judge system that evaluates user-submitted programs, providing immediate feedback
to enhance learning. The system comprises various modules such as exercise creation, evaluation,
and solutions, all implemented through crowdsourcing.

Students utilize the platform to complete exercises that cover basic programming concepts.
These exercises, sourced from users including teachers and students, undergo verification and
contribute to a unified evaluation system. The system's core functionalities include exercise

8
creation, evaluation, and solution sharing, fostering a collaborative learning community where
users learn from each other's contributions.

The system architecture is depicted, highlighting modules for users, course groups, and the
judge system. Students join course groups to access exercises and competitions, where they solve
problems within a limited timeframe. Each exercise is abstracted as a program with standard
input/output, tested via the judge system, providing students with an objective assessment.

The platform's implementation involves JavaScript, providing a user-friendly interface for

registration, exercise completion, and competition participation. The platform promotes active
engagement through exercise creation, evaluation, and solution sharing. The results demonstrate
the platform's success, attracting thousands of users, hosting numerous exercises, solutions, and
competitions. Users' engagement levels fluctuate with academic semesters, emphasizing the
platform's effectiveness in aiding student learning.

Future work includes improving exercise detection to prevent redundancy by identifying

similar exercises created by different users, optimizing the learning experience by eliminating
duplicate problems. In essence, the paper showcases a dynamic, crowdsourced online
programming platform that facilitates collaborative learning, offers practical exercises, and fosters
a community where users actively engage in content creation and assessment. The platform's
success lies in its ability to provide a diverse range of exercises while encouraging active
participation and feedback from its user base.

The paper [7] research delves into the assessment of RoboProf, an innovative automated
learning system devised to address the burgeoning enrolment in university computer courses. With
the escalating demands on resources, especially in maintaining teaching standards and providing
adequate tutorial support, RoboProf emerges as a solution aimed at balancing these needs. Its
primary focus lies in simplifying the process of programming exercises, their assessment, and
providing real-time feedback to students, all while mitigating the strain on lecturers and tutors.

Through an extensive analysis, the study reveals critical findings. RoboProf usage
significantly impacts programming performance. Students who completed the system's exercises
demonstrated markedly better programming skills, especially those who finished promptly and
with fewer attempts. Plagiarism emerged as a detrimental factor, exerting a negative influence on
grades. Moreover, the correlation between entry qualifications and programming proficiency was
striking, indicating higher performance among those with stronger initial qualifications.

An intriguing facet unveiled in the research was the gender gap. Male students consistently
outperformed their female counterparts, both in RoboProf and subsequent traditional programming
courses. This disparity underscored the need to address gender-related issues in the learning
environment, prompting the implementation of modifications and measures. Initiatives such as
introducing more female supervisors and fostering a collaborative learning atmosphere sought to
counteract this imbalance and create a more inclusive and supportive setting.

Additionally, the study conducted a comparative analysis between students' performance

in RoboProf and their subsequent traditional computing course. The correlation observed between

9
grades achieved in both courses highlighted the consistency in performance across different
teaching methodologies.

In essence, while RoboProf demonstrated effectiveness in enhancing programming skills

and providing immediate feedback, it also illuminated significant gender differences and
plagiarism concerns. The study's insights prompted adjustments in the course structure to ensure a
fairer and more conducive learning environment for all students, aiming for greater inclusivity and
equitable academic outcomes.

The article [8] delves into the extensive history and multifaceted functionalities of online
judge systems (OJS) that have evolved over more than half a century. Initially serving as basic
web applications to aid universities in teaching and preparing students for competitive
programming, OJS have undergone significant expansion and empowerment, particularly in the
first decade of the twenty-first century. These systems emerged as platforms facilitating coding
challenges, initially used by educational institutions and later adopted by organizations hosting
programming competitions to share past challenges for preparatory purposes.

As these systems gained momentum, numerous online platforms cropped up, offering
challenges derived from competitive programming contests. This surge was propelled by the
widespread availability of internet access, allowing contestants worldwide to easily submit and
validate their solutions. Most OJS cater to users globally, focusing on enhancing algorithmic and
programming skills. However, some platforms specialize in customized contests, accommodating
challenges from both local and remote archives. To cater to specific nationalities, several systems
provide independent, localized instances, varying in contest organization, time duration, language
support, and participant groups.

Beyond their roots in competitive programming, OJS have found diverse applications in
education, recruitment, and even data mining. In educational settings, these systems automate and
accurately evaluate student assignments, enabling educators to concentrate on teaching quality.
Recent trends integrate gamification and social networking elements, engaging students in
problem-solving through innovative methods like multiplayer strategy games or specialized
programming tutorials.

Moreover, OJS have extended their utility to recruitment processes, aiding developers in
honing their skills by participating in programming competitions, thus establishing a professional
reputation within the community. Recruiters benefit from easily identifying competent
employment candidates through these platforms, some of which offer customized challenges for
specific assessments in real-time.

Additionally, OJS serve specialized fields such as data mining challenges, providing a
platform for users to submit outputs, source code, or specialized reports for assessment. The
emergence of Evaluation-as-a-Service (EaaS) integrates cloud-based evaluation, exemplifying the
evolving landscape of these systems.

Looking ahead, the article predicts a shift in the proportion of OJS, with an increasing focus
on EaaS-based systems due to the development of cloud computing. It concludes by emphasizing

10
the importance of open-source OJS that can be tailored for specific uses, exemplified by platforms
like Optil.io, which leverage crowdsourcing to tackle complex optimization problems across
various industries.

In essence, the article comprehensively explores the historical trajectory, current

functionalities, and future prospects of OJS, showcasing their significance in education, problem-
solving, recruitment, and addressing real-world challenges through technological innovation.

The paper [9] explores the potential of leveraging online programming contests as a tool
for both training individuals in programming and supporting the teaching of computer science.
With a focus on utilizing limited human resources and capitalizing on widespread access to online
contests, the paper aims to foster learning, improve programming skills, and promote computer
science education. It begins by categorizing various types of online programming contests based
on their nature and goals, which encompass diverse challenges, from algorithm efficiency to AI
development and problem-solving through programming.

Participation in these contests not only fosters competition but also serves as a platform for
contestants to enhance their programming skills. Effective support and feedback mechanisms
during these contests significantly impact the quality of learning. However, due to constraints in
human resources, providing personalized feedback to all contestants or offering detailed
explanations for every task can be challenging.

The paper proposes utilizing existing online contests as a means to support programming
skill development and promote informatics education. It advocates for categorizing these contests
based on their suitability for different training purposes. Furthermore, it introduces an online
platform intended to track contestants' performances across various contests to aid in their learning
process.

The subsequent sections delve into related works, discussing prior efforts in classifying
programming contests and utilizing online contests for teaching programming. Following this, the
paper presents its proposed classification framework for programming contests, evaluating various
existing online contests based on these criteria. It then outlines an approach to employ online
programming contests for training, drawing from experiences established in Belgium, and
highlights their potential in teaching informatics.

The conclusion underscores the potential of utilizing freely accessible online programming
contests for building programming training programs and supporting informatics education. It
introduces an online platform aimed at hosting contestant profiles to aid in leveraging online
contests for training and learning purposes.

Future endeavours include deploying the online platform, populating it with contests and
problems, and generating feedback information for these problems. Subsequent experiences and
assessments will gauge the impact of these initiatives on improving programming skills and
increasing motivation among users of the platform. The paper also suggests conducting
experiments across diverse user groups, including contest participants, school pupils learning

11
programming, and individuals seeking to enhance their programming skills, to comprehensively
evaluate the effectiveness of these approaches.

The article [10] delves into the extensive history and multifaceted functionalities of online
judge systems (OJS) that have evolved over more than half a century. Initially serving as basic
web applications to aid universities in teaching and preparing students for competitive
programming, OJS have undergone significant expansion and empowerment, particularly in the
first decade of the twenty-first century. These systems emerged as platforms facilitating coding
challenges, initially used by educational institutions and later adopted by organizations hosting
programming competitions to share past challenges for preparatory purposes.

As these systems gained momentum, numerous online platforms cropped up, offering
challenges derived from competitive programming contests. This surge was propelled by the
widespread availability of internet access, allowing contestants worldwide to easily submit and
validate their solutions. Most OJS cater to users globally, focusing on enhancing algorithmic and
programming skills. However, some platforms specialize in customized contests, accommodating
challenges from both local and remote archives. To cater to specific nationalities, several systems
provide independent, localized instances, varying in contest organization, time duration, language
support, and participant groups.

Beyond their roots in competitive programming, OJS have found diverse applications in
education, recruitment, and even data mining. In educational settings, these systems automate and
accurately evaluate student assignments, enabling educators to concentrate on teaching quality.
Recent trends integrate gamification and social networking elements, engaging students in
problem-solving through innovative methods like multiplayer strategy games or specialized
programming tutorials.

Moreover, OJS have extended their utility to recruitment processes, aiding developers in
honing their skills by participating in programming competitions, thus establishing a professional
reputation within the community. Recruiters benefit from easily identifying competent
employment candidates through these platforms, some of which offer customized challenges for
specific assessments in real-time.

Additionally, OJS serve specialized fields such as data mining challenges, providing a
platform for users to submit outputs, source code, or specialized reports for assessment. The
emergence of Evaluation-as-a-Service (EaaS) integrates cloud-based evaluation, exemplifying the
evolving landscape of these systems.

Looking ahead, the article predicts a shift in the proportion of OJS, with an increasing focus
on EaaS-based systems due to the development of cloud computing. It concludes by emphasizing
the importance of open-source OJS that can be tailored for specific uses, exemplified by platforms
like Optil.io, which leverage crowdsourcing to tackle complex optimization problems across
various industries.

12
 In essence, the article comprehensively explores the historical trajectory, current
functionalities, and future prospects of OJS, showcasing their significance in education, problem-
solving, recruitment, and addressing real-world challenges through technological innovation.

The paper [11] discusses the implementation of a system allowing students in a

programming course to submit programs for assessment without generating printed listings. This
system runs submitted programs using standard data sets and facilitates their assessment by course
instructors. The goal was to utilize feedback in four key ways: formal assessment, identifying
comprehension gaps, monitoring individual progress, and rectifying specific difficulties.

Traditionally, collecting feedback involved printed listings of programs and their outcomes,
which became cumbersome in larger classes. In response, the paper outlines the development of a
computerized system tailored for a Pascal programming course attended by around 200 students.
Handling and marking paper submissions were time-consuming, prompting the need for an
automated system.

The system primarily aimed at recording students' program submissions and their success
rates. Initially, the focus was on creating an accurate record of programs and their execution
outcomes. The system allowed students to submit programs, which were then assessed for their
functionality. The assessment process involved running submitted programs using predetermined
test data, categorizing outcomes into three possibilities: failure to compile, incomplete execution,
or successful execution.

The system's operation comprised four stages: submission, assessment, report, and
amalgamation. The submission stage involved students submitting programs through a designated
process. The assessment stage, performed as a batch job overnight, evaluated programs'
performance against test data. The report stage enabled teachers to review assessments, examine
execution results, and further assess program correctness. Finally, the amalgamation stage
consolidated assessments into printed reports for tutors.

The report program offered interactive tools for instructors to review execution results,
rectify status codes, and manage assessed program files. It facilitated understanding common
mistakes and pinpointing students' challenges. However, the system faced occasional failures and
misdirected submissions, leading to enhancements in the report program to handle such instances
effectively.

The system's structure, illustrated in the paper, delineated each stage's functionalities and
highlighted the process flow from program submission to assessment and reporting. Despite its
initial focus on basic functionalities, the system allowed for future enhancements to meet
additional teaching objectives.

13
1.2 Proposed System

 Codeverse is an automated coding platform designed to transform the way students learn and
assess their skills

 Traditional platform does not provide deep understanding of problem and its solution such as
video explanation.

 Codeverse aims to address these issues by providing a streamlined and interactive for testing
programming skills and video solutions to help user to apply their coding skills to practical
scenario.

 To stand out among the traditional platform a video solution, timer feature, for self-assessment
and skill improvement is incorporated in the platform.

 User will be able to grasp problem more efficiently leading to understanding and application
of coding principle.

 Various levels of problems have been incorporated to improve the user confidence and
develop their programming skills.

1.3 Problem Statement

Traditional platforms like Hacker Rank and LeetCode often lacks in providing a deep
understanding of problem and its solution such as video explanation. Codeverse aims to address these
issues by providing a streamlined and interactive solution for testing programming skills and video
solution to help users apply their coding skills to practical scenarios. The main objective of Codeverse
is to offer students a user-friendly and efficient platform to test their understanding of
various programming skills. To stand out among the traditional platforms a video solution, timer
feature for self-assessment and skill improvement is incorporated in platform. With a focus on
security, usability, and analytics, the platform empowers users to evaluate coding tests effectively.

1.4 Problem Discussion

The main objective of Codeverse is to offer students a user-friendly and efficient platform to
test their understanding of various programming skills. To stand out among the traditional platforms
a video solution, timer feature for self-assessment and skill improvement is incorporated
in platform. With a focus on security, usability, and analytics, the platform empowers users to
evaluate coding tests effectively.

14
 Chapter 2

SOFTWARE REQUIREMENT SPECIFICATIONS

2.1 Functional Requirements

The following are the various functional requirements of CODEVERSE

- User registration and authentication for admins and students with secure access

- Problem creation and management where admin creates question and manages the platform
for bugs

- Problem solving and rating consist of playground where student can solve given problem

- Tracking solved problems and analyzing performance user can see till where he has solved the
problem and analyze for improvements

2.2 Non-Functional Requirements

The following are various non-Functional requirements of the project:

1. Performance:
 The system should be highly responsive and provide quick quiz loading and result retrieval.
 It should handle multiple concurrent user interactions without significant performance
degradation.
 The system should have minimal latency in grading and displaying quiz results.

2. Usability:
 The user interface should be intuitive, user-friendly, and visually appealing.
 The platform should provide clear instructions and guidance for users.
 It should support different device types and screen sizes for a seamless user experience.
3. Reliability:
 The system should be highly reliable and available at all times.
 It should handle system failures gracefully and recover without data loss.
 The platform should have backup mechanisms in place to prevent data loss.
4. Security:
 The system should implement strong security measures to protect user data and ensure
confidentiality.
 User authentication and authorization should be robust to prevent unauthorized access.

15
5. Scalability:
 The platform should be scalable to accommodate a large number of users and quizzes.
 It should handle increased user load and data storage requirements effectively.
6. Maintainability:
 The codebase should be modular, well-structured, and easy to maintain.
 The system should support future enhancements and updates without significant
disruptions.
7. Compatibility:
 The platform should be compatible with modern web browsers and different operating
systems.
 It should adhere to web standards and best practices.
8. Performance Testing:
 The system should undergo performance testing to ensure it meets the expected
performance metrics
2.3 Hardware and Software Requirements
The Codeverse platform has certain hardware and software requirements to ensure its
smooth functioning. These requirements specify the minimum configuration of the hardware and
software components needed to run the system effectively. The hardware and software
requirements for Codeverse are as follows:

Hardware Requirements:
 Processor: Intel Core i3 or higher
 RAM: 4GB or higher
 Storage: 10GB or higher
 Display: 1024x768 resolution or higher
 Internet Connection: Required

Software Requirements:
 Operating System: Windows 10, macOS, or Linux
 Node.js version 12 or higher
 React version 17 or higher
 Firebase Database
 Recommended IDEs: Visual Studio Code, WebStorm, Eclipse
 Recommended Browsers: Google Chrome, Mozilla Firefox, Microsoft Edge

16
 Chapter 3

DESIGN

3.1 Entity Relationship Diagram

In this ER diagram we have three entities. They are Problem, Student and Admin. The Admin
entity have one to many relationships with Problem entity as admin creates many problems. The
Student and Problem entities have many to many relationships as many students solve many problems.
In this scenario, a student can solve multiple problems, and each problem can be solved by multiple
students.

Figure 1 : ER diagram of Codeverse

17
3.2 Use Case Diagram
The use case diagram for Codeverse, an online coding platform, illustrates various interactions
between student and admin with the system. The primary use case for student involves solving
problems, while the main use case for admin is to upload problems. Additional use cases for student
encompass liking problems, watching and uploading video solutions, tracking solved problems,
logging in, and registering. Additionally, admin have the use case to upload video solution for each
problem.

Figure 2 : Use Case diagram of Codeverse

18
3.3 Activity Diagram
The activity diagram for codeverse shows the different steps involved in solving a problem.
The first step is to log in. Once logged in, the user can select a problem to solve. Next, the user can
write code to solve the problem. If the code does not work, the user can rewrite the code or debug
the code. If the code works, the user can check the results. If the results are correct, the user can go
to the next problem. If the results are incorrect, the user can try again. The last step is to log out.

Figure 3 : Activity diagram of Codeverse

19
3.4 Sequence Diagram
This is a sequence diagram of Codeverse shows the interaction between the user, the system,
and the database. The user first signs in by entering their username and password. The system then
checks if the username is available. If it is, the system displays questions to the user. The user then
answers the questions. The system then verifies the answers and checks the test cases.

Figure 4 : Sequence diagram of Codeverse

20
3.5 Architecture Diagram
The architecture diagram of Codeverse shows the three main tiers of the system: the client
tier, the business logic tier, and the database tier. The client tier is where the user interacts with the
system. It is made up of HTML, TailwindCSS, and ReactJS. The business logic tier is where the code
that runs the system is located. It is made up of Typescript, NextJS, and an HTTP page. The database
tier is where the data that the system uses is stored. It is made up of Firebase and a database server.

Figure 5 : Architecture diagram of Codeverse

21
 Chapter 4

IMPLEMENTATION

4.1 Overview
The implementation of the Codeverse – online coding platform project involves the
development of a robust and user-friendly coding platform using a combination of front-end and
back-end technologies. The primary goal is to create an efficient system that allows students to
code and check the efficacy of the written code, while administrators can create and manage
Problems effortlessly. The project is implemented using React for the front-end, NEXT.js for the
back-end, and Firebase as the database. These technologies were chosen for their capabilities in
delivering a responsive and scalable application.

4.2. Authentication and Authorization

The Authentication and Authorization module is responsible for ensuring secure user
access to the coding platform. It allows both students to register and log in with their unique
credentials. The module includes functionalities for user registration, login, and verification of
login credentials.

Figure 6 : Login page

22
 Figure 7 : Registration page

Important Code Snippet:

1.Code Snippet for user Login

This code is a React component named `Login` that handles user authentication, likely for
a web application. It is a state management library for React, to get a function
(`setAuthModalState`) for updating the `authModalState`. It seems to be used to control the state
of an authentication modal. It initializes a state variable `inputs` using React's `useState` hook. It
holds the values of `email` and `password` input fields. It prevents the default form submission
behavior, checks if email and password are provided, then attempts to sign in the user with the
provided credentials using `signInWithEmailAndPassword`. If successful, it redirects the user to
the homepage. Otherwise, it displays an error toast.

const Login:React.FC<LoginProps> = () => {

const setAuthModalState = useSetRecoilState(authModalState);
const handleClick = (type:'login' | 'register' | 'forgotpassword') =>{
setAuthModalState((prev)=>({...prev,type}));
};
const [inputs, setInputs] = useState({ email: "", password: "" });
const router = useRouter()
const [
signInWithEmailAndPassword,
user,
loading,
error,

23
 ] = useSignInWithEmailAndPassword(auth);
const handleInputChange = (e:React.ChangeEvent<HTMLInputElement>) =>{
setInputs((prev) => ({ ...prev, [e.target.name]: e.target.value }));
}
const handleLogin = async (e:React.FormEvent<HTMLFormElement>) =>{
e.preventDefault()
if (!inputs.email || !inputs.password) return toast.warn("Please Fill All Fields", { position:
"top-left", autoClose: 3000, theme: "colored" });
try {
const newUser = await signInWithEmailAndPassword(inputs.email, inputs.password);
if (!newUser) return;
router.push("/");
} catch (error: any) {
toast.error("Invalid Credentials", { position: "top-left", autoClose: 3000, theme: "colored"
});
}
};

2.Code Snippet for user registration

This code is a React component named `Signup` responsible for user registration in a web
application. The React component named `Signup` that accepts props of type `SignupProps`.The
Recoil for state management to get a function (`setAuthModalState`) is for updating the
`authModalState`. The Function handleChangeInput handles input changes in the email, display
name, and password fields. It updates the `inputs` state accordingly. The Function handleRegister
handles the form submission for user registration. It prevents the default form submission behavior,
validates the input fields, attempts to create a new user with the provided email and password using
`createUserWithEmailAndPassword`, and then redirects the user to the homepage upon successful
registration. It also handles potential errors and displays appropriate toast messages.

const Signup:React.FC<SignupProps> = () => {

const setAuthModalState = useSetRecoilState(authModalState);

const router = useRouter()
const handleClick = () =>{
setAuthModalState((prev)=>({...prev,type:'login'}));
};

const [inputs, setInputs] = useState({ email: "", displayName: "", password: "" });
const [
createUserWithEmailAndPassword,
user,
loading,
error,

24
 ] = useCreateUserWithEmailAndPassword(auth);
const handleChangeInput = (e: React.ChangeEvent<HTMLInputElement>) => {
setInputs((prev) => ({ ...prev, [e.target.name]: e.target.value }));
};

const handleRegister = async (e:React.FormEvent<HTMLFormElement>) =>{

e.preventDefault();
if (!inputs.email || !inputs.password || !inputs.displayName) return toast.warn("Please Fill
All Fields", { position: "top-left", autoClose: 3000, theme: "colored" });
try{
toast.loading('Creating your account',{position:"top-center",toastId:"loadingToast"})
const newUser = await createUserWithEmailAndPassword(inputs.email, inputs.password)

if(!newUser) return;
const userData = {
uid : newUser.user.uid,
email : newUser.user.email,
displayName : inputs.displayName,
createdAt : Date.now(),
updatedAt : Date.now(),
likedProblems : [],
dislikedProblems : [],
solvedProblems : [],
starredProblems : [],

}
await setDoc(doc(firestore,"users",newUser.user.uid),userData)
router.push('/')
}
catch(error:any){
toast.error(error.message, { position: "top-left", autoClose: 3000, theme: "colored" });
}finally{
toast.dismiss("loadingToast")
}
}

4.3 Problem Creation

The Creation module in Codeverse allows administrators to create problem , specifying the
difficulty level, test cases, problem description, constraints, sample input and output .The module
is built using Next.js and Typescript and Firebase for data storage. The Answers given by user is
verified by the testcases given by admin

25
 Figure 8 : Problem Creation form
Code Snippet :-
1. Problem Page retrieval Code
This code is a React component named `ProblemPage`, which seems to represent a page
displaying a specific problem within a web application. The React component named
`ProblemPage` accepts a single prop `problem`, presumably containing data related to the problem
to be displayed. It utilizes TypeScript generics (`<ProblemPageProps>`) to specify the type of
props expected by the component. The code uses a custom hook `useHasMounted` to check if the
component has mounted. If the component hasn't mounted yet (`hasMounted` is false), it returns
`null`, effectively preventing rendering until the component has finished mounting. The function
is part of Next.js's SSG feature. It generates the paths for all the pages that should be pre-rendered
at build time. In this case, it generates paths for each problem based on the keys in the `problems`
object.
const ProblemPage: React.FC<ProblemPageProps> = ({ problem }) => {
const hasMounted = useHasMounted();

if(!hasMounted) return null

return (
<div>
<TopBar problemPage={true} />
<Workspace problem={problem}/>
</div>
)
}

26
export default ProblemPage;
// fetch the local data
// SSG
// getStaticPaths => it create the dynamic routes
export async function getStaticPaths() {
const paths = Object.keys(problems).map((key) => ({
params: { pid: key },
}));

return {
paths,
fallback: false,
};
}

// getStaticProps => it fetch the data

export async function getStaticProps({ params }: { params: { pid: string } }) {

const { pid } = params;
const problem = problems[pid];

if (!problem) {
return {
notFound: true,
};
}
problem.handlerFunction = problem.handlerFunction.toString();
return {
props: {
problem,
},
};
}

27
2. Problem Adding code snippet
This code defines a problem named "Container With Most Water" along with its details,
examples, constraints, and starter code for coding challenges or interview preparation. It takes a
function `fn` as an argument, likely the solution function to be tested. It executes the solution
function with predefined test cases and asserts that the results match the expected outputs. If an
error occurs during testing, it logs the error and throws it. the code provides a starter function
`maxArea` with a comment indicating not to edit the function name. It's meant for developers to
implement the solution logic within the function body. The containerWithMostWater`: This object
represents the problem "Container With Most Water". It contains various properties such as `id`,
`title`,`problemStatement`,`examples`,`constraints`,`starterCode`,`handlerFunction`,`starterFunct
ionName`, and `order`. These properties provide details about the problem, including its statement,
examples, constraints, and starter code. The problem statement describes the task: given an array
representing the heights of vertical lines, find two lines forming a container that contains the most
water. Examples demonstrate inputs and expected outputs. Constraints specify the limitations on
the input size and values. The starter code provides a template function for developers to complete.

import assert from "assert";

import { Problem } from "../types/problem";
import exampleImage from "./images/container-water.jpg";
export const containerWithMostWaterHandler = (fn: any) => {
try {
const tests = [
{ heights: [1, 8, 6, 2, 5, 4, 8, 3, 7], expected: 49 },
{ heights: [1, 1], expected: 1 },
{ heights: [4, 3, 2, 1, 4], expected: 16 },
];
for (const test of tests) {
const result = fn(test.heights);
assert.strictEqual(result, test.expected);
}
return true;
} catch (error: any) {
console.log("Error from containerWithMostWaterHandler: ", error);
throw new Error(error);
}
};
const starterCodeContainerWithMostWater = `// Do not edit function name
function maxArea(height){
// Write your code here
}`;

export const containerWithMostWater: Problem = {

id: "container-with-most-water",
title: "6. Container With Most Water",

28
 problemStatement: `
<p class="mt-3">You are given an integer array<code>n</code> non-negative integers
<code>height</code> where each represents the height of a vertical line of width
<code>1</code>, find two lines which, together with the x-axis forms a container, such that the
container contains the most water.</p>
<p class="mt-3">You may not slant the container.</p>
<p class="mt-3">Example:</p>
<p class="mt-3">
In this case, the max area of water (blue section) the container can contain is 49.
</p>
<p class="mt-3">
Note: You may assume that the input array will not contain any duplicates and that the
elements in the array are non-negative.
</p>
`,
examples: [
{
id: 0,
inputText: `height = [1,8,6,2,5,4,8,3,7]`,
outputText: `49`,
img: exampleImage.src,
},
{
id: 1,
inputText: `height = [1,1]`,
outputText: `1`,
},
{
id: 2,
inputText: `height = [4,3,2,1,4]`,
outputText: `16`,
},
],
constraints: `
<li class="mt-2"><code>n == height.length</code></li>
<li class="mt-2"><code>2 <= n <= 3 * 10^4</code></li>
<li class="mt-2"><code>0 <= height[i] <= 3 * 10^4</code></li>
`,
starterCode: starterCodeContainerWithMostWater,
handlerFunction: containerWithMostWaterHandler,
starterFunctionName: "function maxArea",
order: 6,
};

29
4.4 Problem Solving
The module allows students practice and refine their coding skills in an interactive and
supportive environment. Designed for use within a coding platform, this module provides students
with opportunities to tackle coding challenges directly within the interface. A code editor is
embedded directly within the interface, enabling students to write, test, and debug their code in
real-time. This provides a seamless and efficient coding experience, eliminating the need for
students to switch between multiple applications or platforms. After submitting their solutions,
students receive instant feedback on the correctness and efficiency of their code, helping them
identify and address any errors or optimizations. Additionally, the Coding Challenge module
includes features for time tracking, allowing students to monitor their progress and manage their
time effectively while working on coding challenges. This helps students develop time
management skills and ensures they stay on track to complete the challenges within the allotted
time.

Figure 9 : List of Problems

Figure 10 : Playground for Solving the problem

30
Code Snippet:-
1. Display of Problem description
This code is a React component that represents a problem page. The component is divided into
two main sections: a header section and a content section. The header section contains a div with
a description and a styling class. The content section contains the main problem content, including
the problem title, difficulty, status indicators (e.g., solved, liked, disliked, starred), problem
statement, examples, and constraints. Problem Title and Difficulty displayed using the
`problem?.title` and `currentProblem.difficulty` properties. Status Indicators Icons and counts for
actions such as liking, disliking, and starring the problem. These actions seem to be interactive,
triggering corresponding functions (`handleLike`, `handleDislike`, `handleStar`) on click.
Problem StatementDisplayed using the `problem.problemStatement` property. It seems to be
injected as HTML, possibly containing formatted text or images. Examples Displayed as a list,
with each example including an input text, output text, and possibly an image and explanation.
Constraints Displayed as a list of constraints, using the `problem. Constraints` .Functions like
`handleLike`, `handleDislike`, and `handleStar` handle user interactions with the like, dislike, and
star buttons. These functions are likely responsible for updating the state and possibly making API
calls to register the user’s action.

<div className=’flex h-11 w-full items-center pt-2 bg-dark-layer-2 text-white overflow-x-

hidden’>
<div className={“bg-dark-layer-1 rounded-t-[5px] px-5 py-[10px] text-xs cursor-
pointer”}>
Description
</div>
</div>

<div className=’flex px-0 py-4 h-[calc(100vh-94px)] overflow-y-auto’>

<div className=’px-5’>
{/* Problem heading */}
<div className=’w-full’>
<div className=’flex space-x-4’>
<div className=’flex-1 mr-2 text-lg text-white font-
medium’>{problem?.title}</div>
</div>
{!loading && currentProblem && (
<div className=’flex items-center mt-3’>
<div
className={`${problemDifficultyClass} inline-block rounded-[21px] bg-
opacity-[.15] px-2.5 py-1 text-xs font-medium capitalize `}
>
{currentProblem.difficulty}
</div>
{(solved || _solved) && (

31
 <div className=’rounded p-[3px] ml-4 text-lg transition-colors duration-200
text-green-s text-dark-green-s’>
<BsCheck2Circle />
</div>
)}
<div className=’flex items-center cursor-pointer hover:bg-dark-fill-3 space-x-
1 rounded p-[3px] ml-4 text-lg transition-colors duration-200 text-dark-gray-6’
onClick={handleLike}
>
{liked && !updating && <AiFillLike className=”text-dark-blue-s”/> }
{!liked && !updating && <AiFillLike/> }
{updating && <AiOutlineLoading3Quarters className=”animate-spin”/>}
<span className=’text-xs’>{currentProblem.likes}</span>
</div>
<div className=’flex items-center cursor-pointer hover:bg-dark-fill-3 space-x-
1 rounded p-[3px] ml-4 text-lg transition-colors duration-200 text-green-s text-dark-gray-6’
onClick={handleDislike}
>
{disliked && !updating && <AiFillDislike className=’text-dark-blue-s’
/>}
{!disliked && !updating && <AiFillDislike />}
{updating && <AiOutlineLoading3Quarters className=’animate-spin’
/>}

<span className=’text-xs’>{currentProblem.dislikes}</span>
</div>
<div className=’cursor-pointer hover:bg-dark-fill-3 rounded p-[3px] ml-4
text-xl transition-colors duration-200 text-green-s text-dark-gray-6 ‘
onClick={handleStar}>
{starred && !updating && <AiFillStar className=’text-dark-yellow’ />}
{!starred && !updating && <TiStarOutline />}
{updating && <AiOutlineLoading3Quarters className=’animate-spin’
/>}
</div>
</div>
)}
{loading && (
<div className=”mt-3 flex space-x-2”>
<RectangleSkeleton/>
<CircleSkeleton/>
<RectangleSkeleton/>
<RectangleSkeleton/>
<CircleSkeleton/>

</div>

32
 )}

{/* Problem Statement(paragraphs) */}

<div className=’text-white text-sm’>
<div
dangerouslySetInnerHTML={{__html:problem.problemStatement}}/>
</div>

{/* Examples */}

<div className=’mt-4’>
{problem.examples.map((example, index) => (
<div key={example.id}>
<p className=’font-medium text-white ‘>Example {index + 1}: </p>
{example.img && <img src={example.img} alt=’’ className=’mt-3’ />}
<div className=’example-card’>
<pre>
<strong className=’text-white’>Input: </strong>
{example.inputText}
<br />
<strong>Output:</strong>
{example.outputText} <br />
{example.explanation && (
<>
<strong>Explanation:</strong> {example.explanation}
</>
)}
</pre>
</div>
</div>
))}
</div>

{/* Constraints */}

<div className=’my-8 pb-2’>
<div className=’text-white text-sm font-medium’>Constraints:</div>
<ul className=’text-white ml-5 list-disc’>
<div
dangerouslySetInnerHTML={{__html:problem.constraints}}/>
</ul>
</div>
</div>
</div>
</div>
</div>
);

33
 2. Playground for solving the Problem
This code segment seems is part of a larger component or function responsible for handling
user interactions and tests related to solving a coding problem. This checks if the `handler` variable
is a function. If `handler` is a function, it executes it with `cb` as an argument. If the handler
function returns `true` (indicating success), it performs certain actions. If the handler function
returns `true`, it indicates that all tests passed successfully. It displays a success toast message. It
sets the `success` state to `true`, possibly triggering UI updates. It updates the user data in Firestore,
marking the problem as solved for the current user. If any errors occur during the execution of the
handler function, they are caught here. If the error message indicates an assertion error, it displays
a specific error message related to failed test cases. Otherwise, it displays a general error message
based on the error message received.

if(typeof handler === "function"){

const success = handler(cb);
if (success) {
toast.success("Congrats! All tests passed!", {
position: "top-center",
autoClose: 3000,
theme: "dark",
});
setSuccess(true)
setTimeout(() => {
setSuccess(false);
}, 4000);
const userRef = doc(firestore, "users", user.uid);
await updateDoc(userRef, {
solvedProblems: arrayUnion(pid),
});
setSolved(true)
}
} } catch (error: any) {
console.log(error.message);
if (
error.message.startsWith("AssertionError [ERR_ASSERTION]: Expected values to
be strictly deep-equal:")
){
toast.error("Oops! One or more test cases failed", {
position: "top-center",
autoClose: 3000,
theme: "dark",
});
} else {
toast.error(error.message, {
position: "top-center",

34
 autoClose: 3000,
theme: "dark",
});
}
}
};

4.5 Result analysis and video solution

The Grading and Results module in Codeverse is a critical component responsible for
evaluating coding submissions and offering video solutions for coding challenges. After students
submit their code solutions to coding challenges, Results module evaluates the submissions against
predefined test cases. This Module checks weather coding submission passes test cases passed by
the admin. Results module may offer video solutions for coding challenges. These video solutions
provide step-by-step explanations of how to approach and solve the coding challenge,
demonstrating best practices, common pitfalls, and debugging techniques. Video solutions
enhance the learning experience by providing visual demonstrations of coding concepts and
problem-solving strategies.

Figure 11 : Result Page

35
 Figure 12 : Video Solution
Code Snippet: -
1. Result Analysis
This `useEffect` hook is used to manage side effects in functional components, similar to
lifecycle methods in class components. It runs when the component mounts (initial render) and
whenever any of the dependencies (`pid`, `user`, `problem.starterCode`) change. It retrieves the
user's code for the current problem from local storage (`localStorage`), identified by the `pid`. If
the user is logged in (`user` exists), it sets the user's code to the stored value. Otherwise, it sets the
user's code to the problem's starter code. This function is an event handler typically used for
capturing changes in the user's code input. It updates the `userCode` state with the new code value
passed as `value`. It saves the updated code to local storage (`localStorage`) using the `pid` as a
key. This function is used to handle testing of the solution function (`fn`) for the "Container With
Most Water" problem. It defines a set of test cases, each consisting of an array of heights and the
expected result. It iterates over each test case, executes the provided function (`fn`) with the test
heights, and asserts that the result matches the expected value. If all tests pass, it returns `true`. If
an error occurs during testing, it logs the error and throws it.

[pid,user,problem.starterCode])
const onChange = (value:string)=>{
setUserCode(value);
localStorage.setItem(`code-${pid}`,JSON.stringify(value))
}
export const containerWithMostWaterHandler = (fn: any) => {
try {
const tests = [

36
 { heights: [1, 8, 6, 2, 5, 4, 8, 3, 7], expected: 49 },
{ heights: [1, 1], expected: 1 },
{ heights: [4, 3, 2, 1, 4], expected: 16 },
];
for (const test of tests) {
const result = fn(test.heights);
assert.strictEqual(result, test.expected);
}
return true;
} catch (error: any) {
console.log("Error from containerWithMostWaterHandler: ", error);
throw new Error(error);
}
};

2. Video Solution
The modal for displaying the YouTube video is conditionally rendered based on the state
variable `youtubePlayer.isOpen`. When the modal is open (`youtubePlayer.isOpen` is `true`), it
covers the entire screen and displays a semi-transparent background overlay and the YouTube
video player. Clicking the close icon (`<IoClose>`) or the background overlay triggers the
`closeModal` function to close the modal.

{youtubePlayer.isOpen && (
<tfoot className='fixed top-0 left-0 h-screen w-screen flex items-center justify-
center'>
<div
className='bg-black z-10 opacity-70 top-0 left-0 w-screen h-screen absolute'
onClick={closeModal}
></div>
<div className='w-full z-50 h-full px-6 relative max-w-4xl'>
<div className='w-full h-full flex items-center justify-center relative'>
<div className='w-full relative'>
<IoClose
fontSize={"35"}
className='cursor-pointer absolute -top-16 right-0'
onClick={closeModal}
/>
<YouTube
videoId={youtubePlayer.videoId}
loading='lazy'
iframeClassName='w-full min-h-[500px]'
opts={{
playerVars: {
autoplay: 1, // Autoplay the video

37
 Chapter 5

TESTING

5.1 Credentials Testing

It a process of verifying and validating the credentials or authentication mechanisms used in
software applications, particularly in the context of security and access control. If any user who is not
registered in the application tries to write any code he will be unable to do so any error saying invalid
credentials will pop-up at left hand side corner

Figure 13 : Test Case-1

38
5.2 Validating Testing
In validating testing the code written by the user is verified and checked weather the written
code is correct or not. If all the test cases pass then an congratulation’s message will be popup is
shown and if syntax error or any test cases fail then warning message will popup

Figure 14 : Test Case-2

39
5.3 Video Solution Testing
In video Solution Testing if the video is not available then a coming soon message will be
displayed instead of icon and if video is available then YouTube video logo is visible to the user
and video will be displayed in popup

Figure 15 : Test Case-3

40
5.4. Tools

Figure 16: Logos of tools used

The various tools used for the project are listed below along with them
Descriptions

1.Visual Studio Code

Visual Studio Code is a free source-code editor made by Microsoft for Windows, Linux and
macOS. Features include support for debugging, syntax highlighting, intelligent code completion,
Snippet, code refactoring, and embedded Git.

2.Github

GitHub is a code hosting platform for version control and collaboration. It lets you and others work
together on projects from anywhere.

41
 CONCLUSION
In conclusion, the development of the Coding Test Platform and Codeverse represents a
significant step forward in the realm of programming education and assessment. By leveraging
cutting-edge technologies such as React, NextJS, Tailwind CSS, Type Script, and Firebase, these
platforms offer a robust and feature-rich solution for organizations, educators, and students alike.
With a strong emphasis on user experience, real-time feedback, and data-driven analytics, these
platforms streamline the process of creating, managing, and executing coding tests, contributing
to enhanced learning outcomes and more efficient hiring processes.

One of the key strengths of these platforms lies in their ability to address the shortcomings
of traditional coding assessment platforms. By incorporating features such as video explanations,
timer functionalities for self-assessment, and a wide range of problem difficulty levels, Codeverse
sets itself apart from its predecessors. These features not only enhance users' understanding of
programming concepts but also empower them to apply their skills to practical scenarios with
confidence.

Moreover, the emphasis on security, usability, and analytics ensures that both test creators
and test takers can interact with the platforms in a secure and efficient manner. With features like
user authentication, problem creation and management, problem-solving and rating functionalities,
as well as result analysis and video solutions, these platforms offer a comprehensive solution for
assessing programming skills.

The modular design of these platforms further enhances their usability and scalability. Each
module, from user authentication to problem creation and result analysis, is seamlessly integrated
to provide a cohesive user experience. This modular approach not only simplifies the development
and maintenance of the platforms but also allows for future expansion and customization to meet
the evolving needs of users.

Overall, the Coding Test Platform and Codeverse represent a significant advancement in
the field of programming education and assessment. By providing a user-friendly, efficient, and
comprehensive solution for testing programming skills, these platforms empower students to
enhance their understanding and application of coding principles. With their emphasis on security,
usability, and analytics, these platforms are poised to revolutionize the way programming skills
are assessed and evaluated in educational institutions and organizations worldwide.

42
 FUTURE ENHANCEMENTS
Multiple Languages: By introducing support for multiple languages, the platforms can cater to a
broader audience with varying skill sets and preferences. For example, including languages such
as Python, Java, C++, and others would enable users to engage with the platforms using the
languages they are most comfortable and proficient in. Moreover, supporting multiple languages
enhances the versatility of the platforms, making them applicable across a wide range of
educational settings and professional contexts. the integration of multiple language support opens
up opportunities for collaborative learning and skill development.

Quiz: the integration of quiz functionalities emerges as a valuable addition to enrich the learning
and assessment experience. The incorporation of quizzes offers several benefits for users. Firstly,
quizzes provide a structured format for assessing theoretical knowledge, concepts, and best
practices related to programming languages, algorithms, data structures, and software
development methodologies. Furthermore, quizzes enable users to engage in active recall and
spaced repetition, two cognitive strategies proven to enhance learning and retention.

Dynamic Problem Uploading: This feature would empower administrators and educators to
upload new coding challenges and quizzes dynamically, enabling the platforms to adapt and evolve
in response to changing educational needs and industry trends. By providing a user-friendly
interface for problem creation, specification of difficulty levels, and inclusion of multimedia
elements such as images and videos, dynamic problem uploading enhances the platforms'
versatility and relevance. Additionally, incorporating version control and collaboration features
would facilitate seamless collaboration among educators and content creators, ensuring the
continuous refinement and enrichment of the platforms'

Enhanced UI: An upgraded UI can significantly elevate the user experience by incorporating
modern design principles, intuitive navigation, and interactive elements. This enhancement would
not only improve usability but also foster user engagement and satisfaction. By prioritizing
aesthetics, functionality, and accessibility, the platforms can create a visually appealing and user-
friendly environment that enhances learning, assessment, and collaboration for students, educators,
and professionals alike.

Certification and Badges: Another significant enhancement for both the Coding Test Platform
and Codeverse could involve the implementation of certification and badges systems. By
introducing these features, users can earn recognition for their achievements and demonstrate their
proficiency in coding skills and programming concepts. Certification programs can be designed to
validate users' mastery of specific languages, algorithms, or software development practices, while
badges can signify completion of courses, projects, or competency levels. These digital credentials
not only serve as tangible evidence of users' skills and knowledge but also provide incentives for
continuous learning and engagement with the platforms. Additionally, incorporating certification

43
and badges can enhance the platforms' appeal to educational institutions, employers, and
professional organizations seeking to validate and credentialed users' programming abilities.

Code Sharing: By enabling users to easily share their code Snippet, solutions, and projects with
peers, mentors, and the broader community, these platforms foster collaboration, peer learning,
and knowledge sharing. Whether it's seeking feedback on a coding challenge, collaborating on a
group project, or showcasing coding accomplishments, the ability to share code facilitates
communication and collaboration within the programming community. Implementing code
sharing features may involve creating user profiles, implementing version control systems, and
providing secure sharing options, ultimately enhancing the platforms' value as dynamic learning
and networking hubs for aspiring and seasoned developers alike.

Interview Questions: In envisioning future enhancements for the Coding Test Platform and
Codeverse, the integration of interview question functionalities emerges as a valuable addition to
simulate real-world scenarios and enhance users' preparation for technical interviews. By
incorporating a curated repository of interview questions spanning various topics such as
algorithms, data structures, system design, and problem-solving techniques, users can simulate
interview conditions, practice articulating their solutions, and receive feedback on their
performance. Additionally, features such as mock interviews, interview scheduling, and
interviewer feedback mechanisms can further enrich the interview preparation experience,
empowering users to confidently navigate technical interviews and succeed in their career
aspirations.

Leader Board: In addition to the existing features, implementing a leaderboard functionality

emerges as a compelling future enhancement for both the Coding Test Platform and Codeverse. A
leaderboard provides users with a transparent and motivating way to benchmark their performance
against peers, fostering healthy competition and incentivizing active participation. By displaying
rankings based on factors such as coding accuracy, completion time, and quiz scores, the
leaderboard encourages users to strive for excellence, track their progress, and engage more deeply
with the platforms' learning and assessment activities. Moreover, a leaderboard can serve as a
source of recognition and encouragement, celebrating users' achievements and fostering a sense of
community and camaraderie among learners and educators alike.

44
 REFERENCES
[1] Wu-Yuin Hwang a , Chin-Yu Wang b,*, Gwo-Jen Hwang c , Yueh-Min Huang d ,
Susan Huang a. A web-based programming learning environment to support
cognitive development.

[2] Affleck, G., Smith, T., 1999. Identifying a need for web-based course support. In:
Proceedings of Conference of the Australasian Society for Computers in Learning
in Tertiary Education, Brisbane, Australia, Online.

[3] Miguel Brito, Celestino Gonçalves. Codeflex: A Web-based Platform for Competitive
Programming.

[4] Shih-Chieh Su, Chih-Chang Yu, Chan-Hsien Lin. Development of a web-based

programming learning platform

[5] Thomas Staubitz, Hauke Klement, Ralf Teusner, Jan Renz, Christoph Meinel.
CodeOcean - A Versatile Platform for Practical Programming Excercises in Online
Environments.

[6] Pei Zhang1, You Song1, Biaobiao Kang1, Wei Chen2. Online Programming
Platform Based on Crowdsourcing.

[7] Charlie Daly and Jane M. Horgan. An Automated Learning System for Java
Programming.

[8] SZYMON WASIK, * Poznan University of Technology and Polish Academy of

Sciences MACIEJ ANTCZAK,* JAN BADURA, ARTUR LASKOWSKI, and
TOMASZ STERNAL, Poznan University of Technology. Online Judge Systems and
Their Applications.

[9] S. Combéfis and J. Wautelet, "Programming Trainings and Informatics Teaching

Through Online Contests," Olympiads in Informatics, vol. 8, pp. 21-34, 2014.

[10] E. Verdú, L. M. Regueras, M. J. Verdú, J. P. Leal, J. P. de Castro e R. Queirós, “A

distributed system for learning programming on-line,” Computers & Education, vol.
58(1), pp. 1-10, 2012.

[11] A. J. Cowling and J. J. McGregor, “HANDIN—A system for helping with the
teaching of programming,” Software—Practice and Experience, vol. 15, no. 6, pp.
611–622, 1985

[12] S. Combéfis and J. Wautelet, "Programming Trainings and Informatics Teaching Through
Online Contests", Olympiads in Informatics, vol. 8, pp. 21-34, 2014.

45
[13] C. Wilcox, "Testing strategies for the automated grading of student
programs", Proceedings of the 47th ACM Technical Symposium on Computing Science
Education, 2016.

[14] S. H. Edwards, Z. Shams, and C. Estep. Adaptively identifying non-terminating code when
testing student programs. In Proceedings of the 45th ACM Technical Symposium on
Computer Science Education, SIGCSE '14, pages 15--20, New York, NY, USA, 2014.
ACM.

[15] J. Spacco, D. Hovemeyer, W. Pugh, F. Emad, J. K. Hollingsworth, and N. Padua-Perez.

Experiences with Marmoset: Designing and Using an Advanced Submission and Testing
System for Programming Courses. In Proc. of the 11th Annual SIGCSE Conf. on Innovation
and Technology in Computer Science Education, ITICSE '06, pages 13--17, New York, NY,
USA, 2006. ACM.

[16] T.-C. Yang, G.J. Hwang, Yang, S. J. H. and G.-H. Hwang, A Two-Tier Test-based Approach
to Improving Students' Computer-Programming Skills in a Web-Based Learning
Environment Educational Technology & Society, vol. 18, no. 1, pp. 198-210, 2015.

[17] Philip J. Guo, "Online Python Tutor: Embeddable Web-Based Program Visualization for CS
Education", In Proceedings of the ACM Technical Symposium on Computer Science
Education (SIGCSE), March 2013.

[18] V. Pieterse, "Automated Assessment of Programming Assignments", Proceedings of the

3rd Computer Science Education Research Conference on Computer Science Education
Research, pp. 45-56, 2013.

[19] P. Ihantola, T. Ahoniemi, V. Karavirta and O. Seppälä, "Review of Recent Systems for
Automatic Assessment of Programming Assignments", Proceedings of the 10th Koli Calling
International Conference on Computing Education Research, pp. 86-93, 2010.

[20] C. Douce, D. Livingstone and J. Orwell, "Automatic Test-Based Assessment of

Programming: A Review", J. Educ. Resour. Comput. JERIC, vol. 5, no. 3, pp. 4, 2005.

46
 Appendix A – Abbreviations
1. UI - User Interface
2. API - Application Programming Interface
3. DBMS - Database Management System
4. JWT - JSON Web Token
5. HTTP - Hypertext Transfer Protocol
6. URL - Uniform Resource Locator
7. CSS - Cascading Style Sheets
8. HTML - Hypertext Markup Language
9. JS – JavaScript

47
 Appendix B – Software Installation Procedure
1. Nodejs Installation

Step1: Downloading the Node.js ‘.msi’ installer.The first step to install Node.js on windows is to
download the installer. Visit the official Node.js website i.e) https://nodejs.org/en/download/ and
download the .msi file according to your system environment (32-bit & 64-bit). An MSI installer
will be downloaded on your system.

Figure 17 :Node js website

Step 2: Now Double click on the and run it as Administrator

Step 3 : Click yes and agree to all terms and conditions

Figure 18 :Node js installation

Step 4: Click install to install node then click finish

48
 Figure 19 :Node js steps

2 . Visual studio code App installation

Step 1: Download the Visual Studio code app from official website
https://code.visualstudio.com/download

Figure 20 : visual studio code website download

Step 2: Double click and run as administrator

Step 3: click continue then click next and then click finish

49
 Figure 21 : visual studio code installation

Step 4: select installation location and then click finish

Figure 22 : visual studio code location choosing

50
 Appendix C – Software Usage Process
1. Open Visual Studio Code and run React server

Figure 23 : Running React server

2. Home Page

Figure 24 : Home Page

51
3. Registration Page

Figure 25 : Registration Page

4. Login Page

Figure 26 : Login Page

52
5. Playground and problem description

Figure 27 : Playground and problem description

6. Code successfully passed

Figure 28 : Test cases pass

53