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
 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
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
 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 Snippets:

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
 Figure 8 : Problem Creation form
Code Snippets :-
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
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
 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 Snippets: -
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
 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

Figure 14 : Test Case-2

38
5.2 Validating Testing
In validating testing the code written by the user is verified and checked weather the written
popup is
shown and if syntax error or any test cases fail then warning message will popup

Figure 15 : Test Case-3

Figure 16 : Test Case-4

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 17 : Test Case-5

Figure 18 : Test Case-6

40
5.2. Tools

Figure 19: 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,
snippets, 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
 Appendix B Software Installation Procedure
1. Nodejs Installation

Step1:
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 20 :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 21 :Node js installation

Step 4: Click install to install node then click finish

47
 Figure 22 :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 23 : visual studio code website download

Step 2: Double click and run as administrator

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

48
 Figure 24 : visual studio code installation

Step 4: select installation location and then click finish

Figure 25 : visual studio code location choosing

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

Figure 26 : Running React server

2. Home Page

Figure 27 : Home Page

50
3. Registration Page

Figure 28 : Registration Page

4. Login Page

Figure 29 : Login Page

51
5. Playground and problem description

Figure 30 : Playground and problem description

6. Code successfully passed

Figure 31 : Test cases pass

52