A Mini Project Report On

“CRYPTO TUBE”

Guided By

[Link] Yenurkar

Department of Computer Technology

Submitted By

Mr. Rishabh Hudekar

YESHWANTRAO CHAVAN COLLEGE OF ENGINEERING, NAGPUR

SESSION 2024-2025 (ODD TERM)

Page | 1
 Session 2024-2025
ACKNOWLEDGEMENT

We would like to express our deep and sincere thanks to our Principal Dr. U. P. Waghe,
Head of Computer Technology Department Dr. Kavita Singh for their tremendous support
and valuable guidance.

We would like to express our deep sense of gratitude and whole hearted thanks to our Guide
[Link] Yenurkar under his guidance this work has been carried out. It has keen interest
encouraging disposition full co-operation that has made it possible for me to complete this
project work.

GitHub Links:
Github: [Link]
Blockchain: [Link]
Production: [Link]

Mr. Rishabh Hudekar

Page | 2
 CONTENTS

1. Introduction
2. Problem Statement
3. Methodology
4. Code
5. GUI & Backend Connectivity
6. Output
7. Future Scope

Page | 3
Introduction

This project is a comprehensive RCE (Remote Code Execution) System application,

developed with a [Link] 14frontend styled using Tailwind CSS and leveraging the
MERN stack (MongoDB, Express, React, [Link]) for robust backend support. The
application includes a user-friendly interface and a data-driven backend, making it easy for
users to navigate and manage metro ticket information.

Project Overview

The Metro Portal project enables:

1. Ticket Management: Users enter a 3-digit ticket number to view or modify ticket
information.
2. Ticket Details: Essential ticket information includes:
a. Ticket Number (Primary Key)
b. Source and Destination
c. Platform Number
d. Return Ticket Option
e. Date of Travel
f. Ticket Cost
3. Features:
a. View Details: Retrieve ticket details by entering a ticket number.
b. Update Details: Users can update ticket information as needed.
c. Delete Entry: Allows users to remove a ticket entry, which refreshes the
display automatically.
d. Real-time Updates: Using the RCE System and the MERN stack, changes
in ticket information are reflected in real-time for enhanced user experience.
4. Technology Stack:
a. Frontend: Built with [Link] 14 for server-side rendering and Tailwind
CSS for styling, delivering a fast, responsive, and modern UI.
b. Backend: Uses the MERN stack:
i. MongoDB for the database, storing ticket details.
ii. Express and [Link] to manage server-side logic and API requests.
iii. React in the [Link] framework to handle UI components
dynamically.
c. RCE System: Facilitates secure and remote execution of commands to
manage data, enhancing system performance and maintainability.
5. CRUD Operations:
a. Create: Add new ticket entries through the [Link] interface.
b. Read: View ticket details by entering the ticket number.
c. Update: Modify ticket information as needed.
d. Delete: Remove ticket entries with confirmation.
6. Deployment and Testing:
a. Ensure MongoDB, [Link], and [Link] are configured correctly on the
server.
b. Use testing frameworks within the MERN stack to validate database
connections and RCE operations.

Page | 4
This setup provides a highly interactive and flexible metro ticketing system with real-time
capabilities and a modern web-based interface. Let me know if you need further details on
specific components!

Problem Statement

In today's digital landscape, users often face challenges in executing code remotely while
ensuring security and efficiency. The proposed solution is a Remote Code Execution
(RCE) system that allows users to safely submit and execute code snippets across multiple

Page | 5
programming languages. By leveraging a modern web interface built with the MERN stack
and styled using Tailwind CSS, this project aims to provide an intuitive, responsive
platform for real-time code execution and feedback, enhancing user experience and
accessibility in coding environments.

Page | 6
Code :
import axios from "axios";
import Homee from "./components/Homee"
export default function Home(){

// just to start the server

[Link](`[Link]
.then((response) => {})
.catch((error) => {});
return (
<div>
<Homee/>
</div>
)
}

import type { Metadata } from "next";

import { Inter } from "next/font/google";
import "./[Link]";
import Navbar from "./components/Navbar";
import Footer from "./components/Footer";
import { Toaster } from "@/components/ui/sonner"

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {

title: "Codify",
description: "Generated by Piyush Production",
};

export default function RootLayout({

children,
}: Readonly<{
children: [Link];
}>) {
return (
<html lang="en">
<body>
<div className={[Link]}>
<Navbar/>
{children}</div>
<Toaster/>
<Footer/>
</body>
</html>
);
}

"use client"
import { useEffect,useState } from "react"
import axios from 'axios'

Page | 7
import Image from "next/image"
import { ScrollArea } from "@/components/ui/scroll-area"
import Link from "next/link"
import { toast } from "sonner"

export default function ProblemInfo(props: any){

const [question,setQuesion] = useState({
id: "1",
name: "Name ",
difficulty : "infinite",
description : "description",
Constraints : "Constraints",
timeComplexity : "O()",
like : "111",
dislike : "222",
example1: {
Input: "strs = [\"flower\",\"flow\",\"flight\"]",
Output: "\"fl\"",
Explanation: "The longest common prefix is \"fl\"."
},
example2: {
Input: "strs = [\"flower\",\"flow\",\"flight\"]",
Output: "\"fl\"",
Explanation: "The longest common prefix is \"fl\"."
},
Accepted: "",
Submissions: "",
sampleInput : "",
sampleOutput : ""
})
useEffect(
()=>{
[Link](`[Link]
//[Link](`[Link]
.then((response)=>{
setQuesion([Link])
})
.catch((error)=>{
toast("Wait for while ...")
})
},[]
)

return <div>
<button className="p-4 inline-flex items-center bg-gray-800 justify-center rounded-md text-sm font-medium
text-white">
<Link href="/problems"> {`<`}</Link></button>
<ScrollArea>
<div className="container mx-auto p-4">
<h1 className="text-2xl font-bold mb-4">{[Link]} . {[Link]}</h1>
<div className="mb-4">
<p className="text-sm flex gap-3">
<code>{[Link]}</code>
<code className="flex px-2"><Image src={"/images/[Link]"} alt={"like"} width={20}
height={20}/>{[Link]}</code>
<code className="flex px-2"><Image src={"/images/[Link]"} alt={"like"} width={20}
height={10}/>{[Link]}</code>
</p>

Page | 8
<p className="text-sm mt-2 py-5">
<code>{[Link]}</code>
</p>
<p className="text-sm mt-2">
You can return the answer in any order.
</p>
</div>
<div className="mb-4">
</div>

<div className="mb-4 bg-white shadow-lg p-3">

<h2 className="text-xl font-semibold">Example 1:</h2>

<p className="text-sm p-1"><strong>Input : </strong>{[Link]} </p>
<p className="text-sm p-1"><strong>Output : </strong>{[Link]}</p>
<p className="text-sm p-1"><strong>Explanation : </strong>{[Link]}</p>
</div>
<div className="mb-4 bg-white shadow-lg p-3">

<h2 className="text-xl font-semibold">Example 2:</h2>

<p className="text-sm p-1"><strong>Input : </strong>{[Link]} </p>
<p className="text-sm p-1"><strong>Output : </strong>{[Link]}</p>
<p className="text-sm p-1"><strong>Explanation : </strong>{[Link]}</p>
</div>

<div>
<h2 className="text-xl font-semibold">Constraints:</h2>
<div className="text-sm"><code>{[Link]}</code></div>

<div className="py-4 text-xl font-semibold ">

Sample Input Output:
</div>
<div className=" flex md:flex-row flex-col gap-[50px]">
<div><textarea className="h-[200px]" value={[Link]} readOnly/> </div>
<div ><textarea className="h-[200px]" value={[Link]} readOnly/></div>
</div>

<div className="text-sm py-2">

<code>{([Link])? <div><strong>Time Complexity Expected :
</strong>{[Link]}</div>:<div></div>}</code>
</div>
<div className="text-sm flex flex-col py-5">
<div><strong><code>▷ Submissions : </code></strong>{[Link]}</div>
<div><strong><code>▷ Accepted : </code></strong>{[Link]}</div>
</div>
</div>
</div>
</ScrollArea>
</div>
}

import { ScrollArea } from "@/components/ui/scroll-area"

import { useState,useEffect } from "react";

Page | 9
import axios from "axios";
import SkeletonCard from "./skelatonCard";
interface OutputProps {
output: string;
accepted: boolean;
index : string
visibility : boolean
Vpartial : boolean
}

export default function Output({ output, accepted , index , visibility ,Vpartial}: OutputProps) {

const [sampleOutput,setSmapleOutput] = useState({

sampleOutput : ""
})

useEffect(
()=>{
[Link](`[Link]
// [Link](`[Link]
.then((response)=>{
setSmapleOutput([Link])
})
.catch((error)=>{
[Link]("Output Area ! ")
})
},[]
)

return (
<div className="bg-gray-100 rounded-lg ">
<div className="p-3 h-fit">
<label>
{visibility ? <div>{accepted? <div>{Vpartial ? <div className="text-green-500">Accepted :</div>:<div
className=" text-slate-500">Exectued </div> }</div>: <div className="text-red-500">Not Accepted :</div>}
</div>:<div className=" text-gray-500" >Queued...</div> }
</label>
{accepted ? (
<div className="p-2 inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium
ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring
focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50">
<ScrollArea>
<div className="px-6 py-3 text-left font-medium text-gray-500 uppercase tracking-wider">
<label>Desired Output :</label>
<textarea value={[Link]} className="ml-[32px] h-[100px] w-[210px]" readOnly />
</div>
<div className="px-6 py-3 text-left font-medium text-gray-500 uppercase tracking-wider">
<label>Your Output :</label>

{Vpartial ? <div>{visibility ? <textarea className="ml-[170px] h-[100px] w-[210px]" readOnly value={output} />

:<textarea className="ml-[170px] h-[100px] w-[210px]" readOnly value="Wait..." /> }</div>:
<div>{visibility ? <textarea className="ml-[170px] h-[100px] w-[210px]" readOnly value={"Failed test
cases(Need more accurate answer)\n\n"+output} /> :<textarea className="ml-[170px] h-[100px] w-[210px]"
readOnly value="Wait..." /> }</div>
}
</div>

Page | 10
</ScrollArea>
</div>
):(
<div className="py-2 ">
<textarea className="w-[400px] h-[950px]" readOnly value={output} />
</div>
)}
</div>
</div>
)
}

import Link from 'next/link';

import { SetStateAction, useEffect, useState } from 'react';
import axios from 'axios';
import SkeletonCard from './skelatonCard';
import {
Pagination,
PaginationContent,
PaginationItem,
PaginationLink,
PaginationNext,
PaginationPrevious,
} from "@/components/ui/pagination";
import { toast } from 'sonner';

export default function ProblemList() {

const [showElement, setShowElement] = useState(false);
const [questions, setQuestions] = useState<any[]>([]);
const [originalQuestions, setOriginalQuestions] = useState<any[]>([]);
const [currentPage, setCurrentPage] = useState(1);
const itemsPerPage = 15;

useEffect(() => {

toast("Wait for while Slow Backend ;(")

[Link](`[Link]
//[Link](`[Link]
.then((response) => {
setQuestions([Link]);
setOriginalQuestions([Link]);
})
.catch((error) => {
});

const timer = setTimeout(() => {

setShowElement(true);
}, 2000);

return () => clearTimeout(timer);

}, []);

const indexOfLastItem = currentPage * itemsPerPage;

Page | 11
const indexOfFirstItem = indexOfLastItem - itemsPerPage;
let currentItems = [Link](indexOfFirstItem, indexOfLastItem);
const totalPages = [Link]([Link] / itemsPerPage);

const handlePageChange = (pageNumber: SetStateAction<number>) => {

setCurrentPage(pageNumber);
};

const handleOnChange = (e: any) => {

const value = [Link]();
const filtered = [Link](item =>
[Link]().includes(value)
);
setQuestions(filtered);
setCurrentPage(1);
};

return (
<div className='w-[400px] md:w-[700px] md:h-[925px] h-fir shadow-xl mt-3 px-6 py-3 text-left text-xs font-
medium text-gray-900 uppercase tracking-wider rounded-[5px]'>
<div className='flex flex-row p-3'>
<label className="block text-gray-700 text-l font-bold mb-2 p-2">Search</label>
<input
onChange={handleOnChange}
type="text"
className="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded px-1
leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
placeholder="Search ..."
/>
</div>

<div>
<table className='w-[370px] p-2'>
<thead className='border-2 text-sm h-fit'>
<tr>
<td className='md:px-2'>[Link]</td>
<td className='md:px-[150px]'>Name</td>
<td className='md:px-5'>Difficulty</td>
<td className='md:px-9'>Code</td>
</tr>
</thead>
{showElement ?
<tbody>
{[Link]((value, index) => (
<tr key={index} className='border-2 text-center'>
<td>{indexOfFirstItem + index + 1}</td>
<td className='p-4 text-left'>{[Link]}</td>
<td>{[Link]}</td>
<td className='text-blue-500'><Link href={`/problems/${[Link]-1}`}>{`>`}</Link></td>
</tr>
))}
</tbody>
:
<tbody>
{[Link]({ length: itemsPerPage }).map((_, index) => (
<tr key={index} className='border-2 text-center'>
<td><SkeletonCard /></td>

Page | 12
<td className='p-4 text-left'><SkeletonCard /></td>
<td><SkeletonCard /></td>
<td className='text-blue-500'><SkeletonCard /></td>
</tr>
))}
</tbody>
}
</table>

<Pagination>
<PaginationContent>
<PaginationItem>
<PaginationPrevious href="#" onClick={() => handlePageChange([Link](currentPage - 1, 1))} />
</PaginationItem>
{[Link]({ length: totalPages }).map((_, pageNumber) => (
<PaginationItem key={pageNumber + 1}>
<PaginationLink
href="#"
onClick={() => handlePageChange(pageNumber + 1)}
isActive={pageNumber + 1 === currentPage}
>
{pageNumber + 1}
</PaginationLink>
</PaginationItem>
))}
<PaginationItem>
<PaginationNext href="#" onClick={() => handlePageChange([Link](currentPage + 1, totalPages))} />
</PaginationItem>
</PaginationContent>
</Pagination>
</div>
</div>
);
}

Backend :

import app from './[Link]';

import connectDB from './db/[Link]';
import dotenv from "dotenv";
[Link]({path : './env'})

connectDB()
.then(()=>{
[Link]([Link] || 8000,()=>{
[Link]("Server is Connected at port ",[Link] )
})
})
.catch((error)=>{
[Link]("MONGO db Connection failed !!!",error);
})

Page | 13
import fs from 'fs';
import { exec } from 'child_process';
import { asyncHandlers } from '../utils/[Link]';
import { questions } from './[Link]';

const executeCode = (fileName, command, inputFileName, res, index) => {

const output = questions[index].sampleOutput
try {
exec(command, (error, stdout, stderr) => {
[Link](fileName);
if (inputFileName) [Link](inputFileName);
if (error) {
return [Link](500).json({ error: [Link], stderr });
}
// code exected
if ([Link]() === [Link]()) {
[Link]({ output: stdout, stderr });
}
else {
const textCaseError = {
message : "Failed to match Test Case : "+output
}
[Link]({ output: stdout, stderr ,textCaseError});
}
});
} catch (err) {
[Link](500).json({ error: 'Error executing code' });
}
};

// To handle the restart of server and make them start again

[Link]('uncaughtException', (err) => {});
[Link]('unhandledRejection', (reason, promise) => {});

const solve = asyncHandlers(async (req, res) => {

const { code, language, index } = [Link];
// sample Input from question and index
let input = questions[index].sampleInput
let fileName;
let command;
let inputFileName;
switch (language) {
case 'py':
fileName = '[Link]';
[Link](fileName, [Link]('\n'));
if (input) {
inputFileName = '[Link]';
[Link](inputFileName, input);
command = `python3 ${fileName} < ${inputFileName}`;
} else {
command = `python3 ${fileName}`;
}
executeCode(fileName, command, inputFileName, res,index);
break;
case 'cpp':

Page | 14
fileName = '[Link]';
[Link](fileName, [Link]('\n'));
const execName = '[Link]';
if (input) {
inputFileName = '[Link]';
[Link](inputFileName, input);
command = `g++ ${fileName} -o ${execName} && ./${execName} < ${inputFileName}`;
} else {
command = `g++ ${fileName} -o ${execName} && ./${execName}`;
}
executeCode(fileName, command, inputFileName, res,index);
break;
case 'java':
fileName = '[Link]';
[Link](fileName, [Link]('\n'));
if (input) {
inputFileName = '[Link]';
[Link](inputFileName, input);
command = `javac ${fileName} && java Main < ${inputFileName}`;
} else {
command = `javac ${fileName} && java Main`;
}
executeCode(fileName, command, inputFileName, res,index);
break;
default:
[Link](400).json({ message: 'Unsupported language' });
}
});

export { solve };

// Import required modules

import { Question } from "../models/[Link]";
import { asyncHandlers } from "../utils/[Link]";
import { questions as demoQuestions } from "./[Link]"; // Assuming demoQuestions is an array of questions

// Define the controller function

const questions = asyncHandlers(async (req, res) => {
try {
// Clear existing data (optional, if needed)
await [Link]();
const insertedQuestions = await [Link](demoQuestions);
const question = await [Link]().sort({ createdAt: -1 });
[Link](question);
} catch (error) {
[Link]('Error importing data:', error);
[Link](500).json({ message: 'Failed to import questions', error: [Link] });
}
});

export { questions };

Page | 15
Page | 16
Methodology:

1. Frontend with Tailwind CSS and Shadcn UI:

a. React and [Link]: The frontend is built using React, possibly integrated into the
[Link] framework for server-side rendering and faster page load times.
b. Tailwind CSS: Tailwind CSS is used to style components efficiently, ensuring a
responsive and modern UI.
c. Shadcn UI: By integrating Shadcn UI, you gain access to a rich set of reusable
components that align well with Tailwind's utility-first approach. This library
enhances the styling capabilities, providing refined components that can be easily
customized to fit the design requirements of the RCE system.
2. Backend with MERN Stack:
a. MongoDB: Serves as the database to store and manage code execution requests,
user data, and other relevant information.
b. Express: Handles server-side logic, API routing, and middleware functions. It
provides endpoints for executing code, retrieving results, and managing system
requests.
c. [Link]: The server runtime manages incoming requests, executes code securely,
and handles asynchronous processes efficiently.
d. React (on the frontend): Paired with [Link] and Shadcn UI, React provides a
dynamic and interactive user interface where users can enter code, request
execution, and view results.
3. Key Features of the RCE System:
a. Code Input: Users can input code in a dedicated area, using Shadcn UI
components for text areas or code editors.
b. Execution and Feedback: Once submitted, the backend safely processes and
executes the code. The frontend displays results or errors in a styled output section.
c. Error and Status Messages: Feedback to the user is managed by Shadcn
components like alerts and notifications, enhancing clarity and usability.
d. Real-time Updates: Using WebSocket or polling, the frontend can update users on
the status of their code execution in real-time.
4. Security Considerations:
a. Sandboxed Execution: Code is executed within a secure sandbox to prevent
unauthorized access to the system.
b. Input Validation: Inputs are sanitized to prevent malicious code execution and
potential injection attacks.
c. Access Controls: Implement role-based access controls to restrict code execution
and system access as necessary.
5. Styling and Layout:
a. Responsive Design: Using Tailwind CSS’s responsive utility classes ensures the
RCE system is usable on different devices.
b. Shadcn UI Customization: Components are easy to customize and theme, making
the application visually appealing and easy to navigate.
6. Code Organization and Modularity:
a. Components: Divide the frontend into reusable components using Shadcn UI for
forms, modals, alerts, and feedback.
b. APIs and Routes: Organize backend API routes to separate functionality logically,
such as routes for code execution, result retrieval, and user management.

Page | 17
GUI & Backend Connectivity
import mongoose from "mongoose";
import { DB_NAME } from "../[Link]";

const connectDB = async ()=>{

try{
const db = await [Link](`${[Link].MONGODB_URL}/${DB_NAME}`)
[Link](`\n MongoDB Connected !!! Host Name : ${[Link]}`)
}
catch(error){
[Link](error)
[Link](1)
}
}
export default connectDB

Page | 18
Output

Problem Section:

Problem Info:

Solution:

Page | 19
MongoDb:

Deployment:

Page | 20
Page | 21
Future Scope :

1. Enhanced Code Execution Features

• Multi-Language Support: Extend support to multiple programming languages

(e.g., Python, JavaScript, Java, C++), allowing users to choose their preferred
language for code execution.
• Runtime Customization: Let users specify custom runtime configurations like
memory limits, CPU usage, or timeouts, enabling more flexible and scalable
execution options.
• Sandboxing and Isolation: Invest in more secure sandboxing using technologies
like Docker or Firecracker to isolate code execution in secure environments,
preventing any impact on system resources.

2. Integrated Code Editor

• Advanced Editor: Integrate a feature-rich code editor like Monaco Editor or

CodeMirror that offers syntax highlighting, auto-completion, error checking, and
code formatting.
• Collaboration and Sharing: Allow users to share code snippets or collaborate on
code in real time, with multi-user support, live edits, and comment features.

3. User Authentication and Authorization

• OAuth Integration: Enable login via popular OAuth providers (e.g., Google,
GitHub) to improve access control and ease of use.
• Role-Based Access Control (RBAC): Introduce role-based permissions (e.g.,
Admin, Moderator, User) to limit access to certain functionalities, such as
executing privileged commands or viewing execution logs.

4. Real-Time Monitoring and Analytics

• Execution Logs and History: Implement a system for users to view their past code
submissions, including execution results, runtime statistics, and errors.
• Performance Metrics: Provide performance insights (e.g., memory usage,
execution time) to help users optimize their code. Consider offering visual analytics
for aggregate usage statistics, popular languages, and error trends.
• WebSocket Integration: Use WebSockets for real-time feedback on code
execution status, so users receive immediate updates on long-running or complex
code submissions.

5. Scaling and Optimization

• Load Balancing: Introduce load balancing to handle multiple code execution

requests efficiently, ensuring high availability and performance under heavy usage.

Page | 22
 • Asynchronous Execution Queue: Use a message queue (like RabbitMQ or Redis)
to manage and prioritize code execution requests, enabling efficient handling of
multiple users and requests.
• Caching Mechanism: Implement caching for frequently accessed data or results to
reduce database load and speed up response times.

6. Enhanced UI/UX with Tailwind CSS and Shadcn UI

• Theming and Customization: Allow users to switch between light and dark
themes or customize the interface to fit their preferences.
• User-Friendly Error Feedback: Implement detailed and visually distinct error
messages using Shadcn components to guide users in troubleshooting common
errors (e.g., syntax issues, runtime exceptions).
• Mobile Responsiveness: Optimize the layout and design further for mobile and
tablet users, making code input and execution results easier to view and manage on
smaller screens.

7. Security Enhancements

• Advanced Input Sanitization: Implement enhanced input validation to prevent

XSS, SQL injection, and other potential attack vectors.
• Secure Execution Environment: Improve sandboxing to ensure each execution
runs in a secure environment with limited permissions, isolating processes from
system resources.
• Audit Logs: Maintain a secure audit log of executed code and user actions for
monitoring and tracking any unauthorized or harmful usage patterns.

8. AI and ML-Based Code Analysis

• Error Suggestions and Auto-Fixes: Leverage machine learning to suggest

solutions for common code errors, improving the user’s debugging experience.
• Code Optimization Recommendations: Offer AI-driven code optimization tips to
help users improve efficiency, reduce runtime, and use best practices.
• Code Quality Analysis: Analyze code for common quality issues, like unused
variables, complexity, and style adherence, helping users maintain clean and
efficient code.

9. API Access for External Integrations

• Public API: Develop a public API that enables other applications to access the
RCE system programmatically. This could include endpoints for submitting code,
checking execution status, and retrieving results.
• Integration with Learning Platforms: Partner with e-learning platforms or
development tools to provide integrated code execution services, allowing users to
execute code snippets directly within other educational environments.

10. Support for Additional Use Cases

Page | 23
• Testing and Simulation: Extend the platform to support test cases, allowing users
to run code with predefined inputs to verify outputs automatically.
• Algorithm Challenges and Competitions: Implement features for coding
challenges, where users can submit code to solve specific problems and receive
feedback based on correctness and efficiency.

Page | 24
Page | 25