ProcessX

A Project Report
Submitted in partial fulfilment of the
Requirements for the award of the Degree of
BACHELOR OF SCIENCE (INFORMATION TECHNOLOGY)
BY
Name: Vinit Jain
UID: 22BIT018
Under the esteemed guidance of
Prof Mr. Wilson Rao
Co-ordinator
and
Ms. Tejashree Parab
Assistant Professor
DEPARTMENT OF INFORMATION AND TECHNOLOGY
JAI HIND COLLEGE

(Autonomous)
MUMBAI, 400020
MAHARASHTRA
2024-25
 JAI HIND COLLEGE
(Autonomous)

MUMBAI, 400020 MAHARASHTRA

DEPARTMENT OF INFORMATION TECHNOLOGY

CERTIFICATE

This is to certify that the project entitled, “ProcessX”, is bonafied work of Vinit
Jain bearing UID (22BIT018) submitted in partial fulfilment of the requirements
for the award of degree of BACHELOR OF SCIENCE in INFORMATION
TECHNOLOGY from Jai Hind College Autonomous (University of Mumbai).

Internal Guide: ____________ Coordinator: ____________

Date: ____________ External Examiner: ____________

College Seal
 DECLARATION

I hereby declare that the project entitled, “ProcessX” done at Jai Hind College,
has not been in any case duplicated to submit to any other university for the award
of any degree. To the best of my knowledge other than me, no one has submitted
to any other university.

The project is done in partial fullfilment of the requirements for the award of
degree of BACHELOR OF SCIENCE (INFORMATION TECHNOLOGY) to be
submitted as final semester project as part of our curriculum.

Name and Signature of the Student

 ACKNOWLEDGEMENT

I would like to express my thanks to the people who have helped me most
throughout my project. I am grateful to my guide Ms. Tejashree Parab for nonstop
support for the project. I can’t say thank you enough for her tremendous support
and help.
I owe my deep gratitude to our HOD of Information Technology Department Mr.
Wilson Rao who took keen interest in our project work and guided us all along,
till the completion of our project work by providing all the necessary information
for developing a good system.
At last but not the least I want to thank all of my friends who helped/treasured me
out in completing the project, where they all exchanged their own interesting
ideas, thoughts and made this possible to complete my project with all accurate
information. I wish to thank my parents for their personal support or attention
who inspired/encouraged me to go my own way.
 Abstract
The ProcessX System is a web-based code editor that supports multiple programming
languages, including Python and JavaScript. It allows users to write, execute, and test their
code in real-time, making it a convenient tool for developers and students. In addition to code
execution, the system integrates features like image processing (OCR), which extracts text
from images, and voice-to-text conversion, which transcribes audio input into text.
 INDEX

Sr No PARTICULARS PAGE DATE

NO.

1 Introduction 1 20/07/24

1.1 Background 1 20/07/24

1.2 Objectives 2 20/07/24

1.3 Purpose, Scope, and Applicability 3 21/07/24

1.3.1 Purpose 3 21/07/24

1.3.2 Scope 3 21/07/24

1.3.3 Applicability 3 21/07/24

1.4 Achievements 4 21/07/24

1.5 Organization of Report 4 21/07/24

2 Survey Of Technologies 6 22/07/24

3 Requirement And Analysis 7 23/07/24

3.1 Problem Definition 7 23/07/24

3.2 Requirement Specification 8 23/07/24

3.3 Planning and Scheduling 9 27/07/24

3.4 Software and Hardware Requirements 10 29/07/24

3.5 Preliminary Product Description 11 29/07/24

3.6 Conceptual Models 12 05/08/24

 3.6.1 Event Table 12 05/08/24

3.6.2 Use Case Diagram 13 06/08/24

3.6.3 Entity Relationship Diagram 14 06/08/24

3.6.4 Class Diagram 15 07/08/24

3.6.5 Object Diagram 16 10/08/24

3.6.6 Activity Diagram 17 15/08/24

3.6.7 Sequence Diagram 17 15/08/24

3.6.8 State Flow Diagram 18 18/08/24

3.6.9 Context Diagram 18 18/08/24

3.6.10 Data Flow Diagram 19 18/08/24

3.6.11 Component Diagram 19 22/08/24

3.6.12 Package Diagram 20 22/08/24

3.6.13 Deployment Diagram 20 22/08/24

4 System Coding 21 23/07/24

4.1 Code 21 23/07/24

4.2 Data Dictionary 53 30/08/24

4.3 Program Description 54 30/08/24

4.4 Naming Conventions 55 30/08/24

4.5 Validations 56 30/08/24

5 Program Listing 58 12/09/24

5.1 Cost Estimation 58 12/09/24

 5.2 Schema Design 60 12/09/24

5.3 User Manual With Screenshots 61 15/09/24

5.4 Test Cases Design 65 15/09/24

6 Conclusion 69 16/09/24

6.1 Conclusion 69 16/09/24

6.2 Limitations of the System 70 16/09/24

6.3 Future Scope of the Project 71 16/09/24

7 Bibliography 72 16/09/24
 1. INTRODUCTION

1.1 Background

ProcessX provides a comprehensive framework that allows users to organize, version,

and share code effectively. In a college setting, this project can be particularly beneficial
for students and faculty involved in software development courses or research projects.
By utilizing project, students can learn best practices in code management and
collaboration, which are essential skills in the software development industry. This can
also facilitate group projects by providing a centralized platform for team members to
work together, track changes, and maintain consistency in their codebases.

1
1.2 OBJECTIVE

The primary objectives of this project are to:

1. Improve Code Management: Implement a structured system for organizing and

maintaining code files to enhance efficiency and clarity.

2. Enhance Collaboration: Provide a centralized platform for students and faculty to

collaborate seamlessly on coding projects, promoting teamwork and effective
communication.

3. Ensure Robust Version Control: Utilize version control to document changes,

facilitate code reviews, and enable easy rollbacks to previous versions.

4. Streamline Project Setup: Simplify the process of setting up and maintaining coding
projects, reducing time and effort for developers and students.

2
1.3 PURPOSE, SCOPE AND APPLICABILITY
1.3.1 PURPOSE –

Our college/department lacks a dedicated system for efficient and organized code
management and collaboration in software development projects. This project aims to
implement the online code project to address these challenges by creating a
centralized platform for managing code files. The goal is to streamline project
workflows, enhance collaboration among students and faculty, and ensure high
standards of code quality and version control. This initiative seeks to establish a
modern, scalable solution that aligns with our institution's commitment to educational
excellence and prepares students for professional software development careers.

1.3.2 SCOPE -

• Adapting the online code editor to seamlessly fit into the current development
workflows used by students and faculty.
• Tailoring the repository to meet the specific needs of different courses and projects,
including specialized templates and configurations.
• Providing comprehensive training sessions and ongoing support for students and
faculty to ensure effective use of the repository.
• Continuously assessing the impact of the repository on project efficiency, code
quality, and collaboration, and making improvements based on feedback from users.
• Developing detailed documentation and user guides to help users navigate the
repository and utilize its features effectively.
• Ensuring the repository can support a wide range of projects, from small individual
assignments to large collaborative research projects.
• Exploring and implementing integrations with other development tools and platforms
commonly used in the academic setting to provide a cohesive development
environment.

1.3.3 APPLICABILITY –
This web application could be used by both, teachers, students, IT professionals,
Project team and to enhance the academic environment by providing a structured,
efficient, and user-friendly platform for managing code-related activities.

3
1.4 Achievements –
The main achievement of this project will be the creation of an innovative platform that
enables the dynamic execution of multiple programming languages such as Python and
JavaScript. It integrates voice-to-text conversion . This will streamline workflows,
increase productivity, and provide a valuable tool for developers, educators, and tech
enthusiasts.

1.5 ORGANISATION OF REPORT –

1.5.1 REQUIREMENT & ANALYSIS –

Front-End Technologies
1. HTML/CSS: Used for structuring and styling the user interface of the web
application. HTML provides the structure, while CSS is used for styling and layout.
2. JavaScript: For implementing interactive features on the web page. JavaScript can
handle dynamic updates, form validations, and other client-side interactions.
Back-End Technologies
1. Node.js: A JavaScript runtime built on Chrome's V8 engine, commonly used for
building scalable network applications. It allows JavaScript to be used for server-side
scripting.
2. Express.js: A web application framework for Node.js that provides robust features for
building web applications and APIs.
3. Database: MongoDB: A NoSQL database that stores data in flexible, JSON-like
documents. It is commonly used with Node.js applications for its ease of use and
scalability.
The hardware requirements for developing, testing, and running the application
include:
• Development Workstations:
Processor: Intel i5 or higher (or AMD equivalent).
• RAM: Minimum 8 GB, recommended 16 GB.
• Graphics: Integrated graphics are sufficient, though a dedicated GPU could be
beneficial for certain tasks.

This chapter shows which all conceptual models will be prepared while making the
project / system such as Use Case Diagram, Entity Relationship Diagram & many
more.

4
1.5.2 - SYSTEM DESIGN -

○ The system design is included in all conceptual schema diagrams which explains
the inter-relation between the modules and their dependencies.
○ The features, working and flow of the entire system is described in this chapter.

1.5.3- IMPLEMENTATION AND TESTING -

○ Implementation process is described in this chapter.
○ Describes which all testing approaches are going to take place in this project.

1.5.4 RESULTS AND DISCUSSION -

1.5.5 CONCLUSION -
The implementation of the online code editor within our college environment offers a
transformative approach to managing and organizing code files for both students and faculty.
By adopting this, we aim to address several key challenges and enhance the overall efficiency
of code management in academic settings and to improving educational practices, fostering
collaboration, and supporting academic excellence.

5
 2. SURVEY OF TECHNOLOGIES

HTML/CSS: Used for structuring and styling the user interface of the web application.
HTML provides the structure, while CSS is used for styling and layout.
JavaScript: For implementing interactive features on the web page. JavaScript can handle
dynamic updates, form validations, and other client-side interactions.
Node.js: A JavaScript runtime built on Chrome's V8 engine, commonly used for building
scalable network applications. It allows JavaScript to be used for server-side scripting.
Express.js: A web application framework for Node.js that provides robust features for
building web applications and APIs.
Database: MongoDB: A NoSQL database that stores data in flexible, JSON-like documents.
It is commonly used with Node.js applications for its ease of use and scalability.
Browsers (Chrome and Mozilla and Brave): Using these browsers to show the output to the
end users.
Visual Studio Code: A versatile and highly popular code editor known for its speed,
flexibility, and extensive extension library, making it a top choice for developers worldwide.

6
 3. REQUIREMENT & ANALYSIS

3.1.1 PROBLEM STATEMENT –

Currently we are facing significant challenges due to the lack of a centralized system for
managing and organizing code files for student and faculty projects. This absence leads to
several critical issues, including disorganized code management, where files are often
scattered and inconsistently maintained, making it difficult to keep projects on track. This
project aims to implement the online code editor to streamline code management, enhance
collaboration, ensure robust version control, and improve overall project efficiency, aligning
with our institution’s commitment to academic excellence.

3.1.2 EXISTING STATEMENT-

Currently there is platform where we can perform online code editing but not more than 2
language and, in my project, I’m also including voice to text & image to text feature.

3.1.3 PROPOSED SYSTEM –

The proposed system is the implementation of the online code editor, a centralized and
structured platform designed to address the challenges of code management, collaboration,
and project efficiency within our college/university. This system aims to offer a
comprehensive solution that enhances the overall academic and operational experience for
both students and faculty.

7
3.2 REQUIREMENT SPECIFICATION –
FUNCTIONAL REQUIREMENTS –
JavaScript Editor: A module for writing, editing, and executing JavaScript code.
Python Editor: A module for writing, editing, and executing Python code.
Voice to Text: A module that converts spoken words into text.
Image to Text: A module that extracts text from uploaded images.
User Authentication (Login/Register): A module for user registration and login, ensuring secure
access to the

NON-FUNCTIONAL REQUIREMENTS –
1. Performance:
• Fast processing of audio and transcriptions.
• Quick PDF generation.

2. Scalability:
• Handle many users and large data volumes.
• Easy to scale with demand.

3. Security:
• Secure storage and data transmission.
• User authentication and access control.

4. Reliability:
• Minimal downtime and high availability.
• Maintain data integrity.

5. Maintainability:
• Easy to maintain and update.
Provide documentation for users and developers.

8
3.3 Planning and Scheduling

Figure 1. Gantt Chart

Figure 2. Pert Chart

9
3.4 Software and Hardware Requirements
Software Requirements-
Front-End Technologies
3. HTML/CSS: Used for structuring and styling the user interface of the web
application. HTML provides the structure, while CSS is used for styling and layout.
4. JavaScript: For implementing interactive features on the web page. JavaScript can
handle dynamic updates, form validations, and other client-side interactions.
Back-End Technologies
4. Node.js: A JavaScript runtime built on Chrome's V8 engine, commonly used for
building scalable network applications. It allows JavaScript to be used for server-side
scripting.
5. Express.js: A web application framework for Node.js that provides robust features for
building web applications and APIs.
6. Database: MongoDB: A NoSQL database that stores data in flexible, JSON-like
documents. It is commonly used with Node.js applications for its ease of use and
scalability.

Hardware Requirements-
The hardware requirements for developing, testing, and running the application
include:
• Development Workstations:
Processor: Intel i5 or higher (or AMD equivalent).
• RAM: Minimum 8 GB, recommended 16 GB.
• Graphics: Integrated graphics are sufficient, though a dedicated GPU could be
beneficial for certain tasks.

10
3.5 Preliminary Product Description
JavaScript Editor
A module for writing, editing, and executing JavaScript code.
Python Editor
A module for writing, editing, and executing Python code.
Voice to Text
A module that converts spoken words into text.
Image to Text
A module that extracts text from uploaded images.
User Authentication (Login/Register)
A module for user registration and login, ensuring secure access to the

11
3.6 Conceptual Models

Figure 3. Event Table

12
Figure 4. Use Case Diagram

13
Figure 5. E-R Diagram

14
Figure 6. Class Diagram

15
Figure 7. Object Diagram

16
Figure 8: Activity Diagram

17
Figure 9: Sequence Diagram

Figure 10: State Diagram

18
 Figure 11: Context Diagram

Figure 12: Data Flow Diagram (Context level)

19
Figure 12: Data Flow Diagram (Level 1)

Figure 13: Component Diagram

20
 Figure 14: Package Diagram

Figure 15: Deployment Diagram

21
 4. System Coding

4.1 Coding
Image2Text.jsx
import React, { useState } from 'react'
import LangList from './LangList'
import Tesseract from 'tesseract.js';
import { toast } from "react-hot-toast"

function Image2Text() {

const [isLoading,setIsLoading] = useState(false);

const [imagePath,setImagePath] = useState("/mainLogo.png");

const [text,setText] = useState("");

const handleChange = (event) => {

toast.success('File Added.');
setImagePath(URL.createObjectURL(event.target.files[0]));
}

const handleClick = () => {

toast.loading("Coverting into Text...")
setIsLoading(true);
Tesseract.recognize(
imagePath,'eng',
{
logger: m => console.log(m)
}
)
.catch (err => {
console.error(err);
toast.remove();
toast.error("Please Check Internet Connection");
})
.then(result => {
// Get Confidence score
let confidence = result.data.confidence

let text = result.data.text

setText(text);
console.log(confidence,text);
toast.remove();
toast.success("Image Converted");

22
 setIsLoading(false)
})
}

const copyContent = ()=>{

navigator.clipboard.writeText(text);
toast.success("Copied to Clipboard")
}

const clear = ()=>{

toast.success("Output Cleared")
const box = document.querySelector("#vtext");
box.value = "";
}

return (
<>
<div className="voiceContainer">
<div className="voiceBody wholeeditorBody">
<div className="leftLang">
<LangList leftcolori="white"/>
</div>
<div className="voicePlayground">
<mark><h1>Image to Text Converter</h1></mark><br/>
<main className='imageMain'>
<img src={imagePath} className='Image-Logo' alt="logo" />
<input className='imagefiletype' type="file" onChange={handleChange} />
{/* <button onClick={handleClick} className='btn'>Convert To Text</button> */}
<div className="imagebutton">
<button className='btn btnbtn' onClick={copyContent}>Copy</button>
<input type="submit" className='btn imgbtn' onClick={handleClick}
value={isLoading? "Loading...":"Convert To Text"} />
<button className='btn btnbtn' onClick={clear}>Clear</button>
</div>

<div className="image-text-box">
{/* <p contentEditable>{text}</p> */}
<textarea name="vtext" id="vtext" placeholder='Your Text Here' value={text}
onChange={(e)=>{setText(e.target.value)}}></textarea>
</div>
</main>
</div>
</div>
</div>
</>
)
}

export default Image2Text

23
Javascript.jsx

import React, { useEffect, useState } from 'react';

import LangList from '../Editor/LangList';
import copy_icon from '../../assets/copy_icon.gif';
import download_icon from '../../assets/download_logo.png';
import { toast } from 'react-hot-toast';

const data = new Date()

let DayName;
if(data.getDay() === 1){
DayName = "Monday";
}
else if(data.getDay() === 2){
DayName = "Tuesday";
}
else if(data.getDay() === 3){
DayName = "Wednesday";
}
else if(data.getDay() === 4){
DayName = "Thursday";
}
else if(data.getDay() === 5){
DayName = "Friday";
}

else if(data.getDay() === 6){

DayName = "Saturday";
}
else if(data.getDay() === 0){
DayName = "Sunday"
}
else{
DayName = "CodoFile";
}

function Javascript() {

const [code,setcode] = useState("");

const runCode = ()=>{

try{
toast.success("Code Execution Started")
let textCode = document.querySelector(".dartpython").value;
eval(textCode);
}
catch(err){
toast.error("Please Enter Valid Code")
console.log(`${err}`);
}
};

const originalConsoleLog = console.log;

24
useEffect(()=>{
const consoleOutput = document.getElementById('consoleOutput');
const btn = document.querySelector('.btn1');

const consoleLoghandler = function(message){

const paragraph = document.createElement('p');
paragraph.textContent = message;
consoleOutput.appendChild(paragraph);
originalConsoleLog.apply(console);
};

btn.addEventListener('click',()=>{
consoleOutput.innerHTML = "";
});

console.log = consoleLoghandler;

return ()=>{
btn.removeEventListener('click',()=>{
consoleOutput.innerHTML = "";
});
console.log = originalConsoleLog;
};
},[]);

const clear = ()=>{

toast.success("Output Cleared")
const box = document.querySelector("#consoleOutput");
box.innerHTML = "";
}
// to copy code to clipboard
const copyContent = ()=>{
navigator.clipboard.writeText(code);
toast.success("Copied to Clipboard")
}
// download file
const codeToFile = ()=>{
toast.success("Download Started");

const text = document.querySelector(".dartpython").value;

const blob = new Blob([text],{type:"text/javascript"});

const link = document.createElement("a");

link.href = window.URL.createObjectURL(blob);
const FileCodeName = `CodoFile-(${DayName})`;

link.download = FileCodeName;
link.click();
}

return (
<>
<div className="jsContainer">
25
 <div className="jsBody wholeeditorBody">
<div className="leftLang">
<LangList leftcolorjs="white"/>
</div>
<div className="PlaygroundMain">
<div className='runHeaderJS'>
<div className='jsleftheaderfile jsfile'>
<mark><h2>index.js</h2></mark>
<div className='runbtn'>
<button className='vbtn'>
<img className='voicebtn' onClick={copyContent} src={copy_icon}
alt='CopyClip'/>
</button>
<button className='vbtn'>
<img className='voicebtn' onClick={codeToFile} src={download_icon}
alt='DownLoadCode'/>
</button>
{/* <button className='btn btn1' onClick={handleSubmit}>RUN</button> */}
<button className='btn btn1' onClick={runCode}>RUN</button>
</div>
</div>
<div className='jsrightheaderfile jsfile'>
<mark><p>OUTPUT</p></mark>
<button className='clear' onClick={clear}>Clear</button>
</div>
</div>
<div className='jsplayground playground'>
<div className='leftplayground snippet'>
<textarea className='dartpython' data-testid="jsTextarea" name="javascript"
id="javascript" value={code} onChange={(e)=>setcode(e.target.value)}
placeholder='console.log("Hello CodoPlayer");'></textarea>
</div>
<h1 className="invisible">
<mark>Output</mark>
</h1>
<div className='rightplayground snippet' id='consoleOutput' data-
testid="consoleOutput" >
{/* <p>{output}</p> */}
</div>
</div>
</div>
</div>
</div>
</>
)
}

export default Javascript

26
LangList.jsx

import React from 'react';

import mic from '../../assets/mic.png';
import js from '../../assets/js.png'
import python from '../../assets/python.png';
import image from '../../assets/image.png';
import { NavLink } from 'react-router-dom';

function LangList(props) {
return (
<>
<div className="LangContainer">
<div className="langSection languages">

<div className="languageBorder"
style={{'backgroundColor':`${props.leftcolorhtml}`}}>
<NavLink to="/editor/javascript"><img className={props.js} src={js}
alt="Language " /></NavLink>
</div>

<div className="languageBorder"
style={{'backgroundColor':`${props.leftcolorhtml}`}}>
<NavLink to="/editor/python"><img className={props.python} src={python}
alt="Language "/></NavLink>
</div>
</div>
<div className="FeatureSection languages">
<div className="languageBorder" style={{'backgroundColor':`${props.leftcolorv}`}}>
<NavLink to="/editor/voice2text"><img src={image} alt="feature " /></NavLink>
</div>
<div className="languageBorder" style={{'backgroundColor':`${props.leftcolori}`}}>
<NavLink to="/editor/image2text"><img src={mic} alt="feaute" /></NavLink>
</div>
</div>
</div>
</>
)
}

export default LangList

Python.jsx
import React,{ useState } from 'react';
import LangList from './LangList';
// import axios from 'axios';
import copy_icon from '../../assets/copy_icon.gif';
import download_icon from '../../assets/download_logo.png';
import { toast } from 'react-hot-toast';

function Python() {
27
const [code,setCode] = useState('');
const [output,setOutput] = useState('');

const handleSubmit = async ()=>{

toast.loading('Please Wait while File is Execuing');
const payload = {
language:"py",
code
};

try{

// const {data} = await axios.post("http://localhost:5000/runpy",payload)

const response = await fetch("http://localhost:5000/runpy",{
method:'POST',
headers:{
"Content-Type":"application/json"
},
body:JSON.stringify(payload)
})
const data = await response.json()
if(response.ok){
toast.remove();
setOutput(data.output);
toast.success("Executed Successfully.");
}
else{
setOutput(data.error);
toast.remove();
toast.error("An error Occured.");
}

}catch(err){
toast.remove();
setOutput("Error in communication with the server")
toast.error("Please Enter Valid Python Code");
console.log(`error is in python.js .The error : ${err}`);
}
}

const clear = ()=>{

toast.success('Output Cleared')
const box = document.querySelector("#consoleOutput p");
box.innerText = "";
}

const copyContent = ()=>{

toast.success("Copied")
navigator.clipboard.writeText(code);
}

const codeToFile = ()=>{

toast.success('File is Downloading...')
28
 const text = document.querySelector('#python').value;

const blob = new Blob([text],{type:"text/python"});

const link = document.createElement("a");

link.href = window.URL.createObjectURL(blob);
link.download = "codofile-python.py";
link.click();
}

return (
<>
<div className="voiceContainer">
<div className="voiceBody wholeeditorBody">
<div className="leftLang">
<LangList leftcolorpy="white"/>
</div>
<div className="PlaygroundMain">
<div className='runHeaderJS'>
<div className='jsleftheaderfile jsfile'>
<mark><h2>index.py</h2></mark>
<div className='runbtn'>
<button className='vbtn'>
<img className='voicebtn' onClick={copyContent} src={copy_icon} alt='copy'/>
</button>
<button className='vbtn'>
<img className='voicebtn' onClick={codeToFile} src={download_icon}
alt='download'/>
</button>
<button className='btn' onClick={handleSubmit}>RUN</button>
</div>
</div>
<div className='jsrightheaderfile jsfile'>
<mark><p>OUTPUT</p></mark>
<button className='clear' onClick={clear}>Clear</button>
</div>
</div>
<div className='jsplayground playground'>
<div className='leftplayground snippet'>
<textarea className='dartpython' name="python" id="python" value={code}
onChange={(e)=>setCode(e.target.value)} placeholder='print("hello codoPlayers")'></textarea>
</div>
<h1 className="invisible">
<mark>Output</mark>
</h1>
<div className='rightplayground snippet' id='consoleOutput' >
<p>{output}</p>
</div>
</div>
</div>
</div>
</div>
</>
)
29
 }

export default Python

Voice2Text.jsx

import { useEffect } from 'react';

import 'regenerator-runtime/runtime';
import useClipboard from "react-use-clipboard";
import SpeechRecognition, { useSpeechRecognition } from 'react-speech-recognition';
import React, { useState } from 'react';
import LangList from './LangList';
import { toast } from 'react-hot-toast';

function Voice2Text() {
let [textToCopy,setTextToCopy] = useState();
let [isCopied, setCopied] = useClipboard(textToCopy);

const phraseToSymbolMap = {
'semicolon': ';',
'semi colon': ';',
'comma': ',',
'colon':':',
'dot':'.',
'open parentheses':'(',
'close parentheses':')',
'open round bracket':'(',
'open roundbracket':'(',
'close round bracket':')',
'closed round bracket':')',
'close roundbracket':')',
'closed roundbracket':')',
'open curly bracket':'{',
'open curlybracket':'{',
'close curlybracket':'}',
'close curly bracket':'}',
'open squarebracket':'[',
'open square bracket':'[',
'clsoe square bracket':']',
'close squarebracket':']',
'open single codes':"'",
'open singlcodes':"'",
'close single codes':"'",
'closed single codes':"'",
'close singlcodes':"'",
'closed singlcodes':"'",
'open double codes':'"',
'open doublcuote':'"',
'close double cuote':'"',
'close doublcuote':'"'
}
30
 const startListening = () =>{
toast.success("Start Speaking");
toast.loading("Listening...",{duration:10})
SpeechRecognition.startListening({ continuous: true, language: 'en-IN' });
}

const processTranscript = (transcript) => {

// console.log('Original transcript:', transcript); // Add this line
let processedTranscript = transcript;

for (const [phrase, symbol] of Object.entries(phraseToSymbolMap)) {

const regex = new RegExp(`\\b${phrase}\\b`, 'gi'); // Use word boundary and case-insensitive
flag
processedTranscript = processedTranscript.replace(regex, symbol);
}

// console.log('Processed transcript:', processedTranscript); // Add this line

setTextToCopy(processedTranscript);
};

const { transcript,resetTranscript, browserSupportsSpeechRecognition } =

useSpeechRecognition();

useEffect(() => {
processTranscript(transcript);
}, [transcript]);

if (!browserSupportsSpeechRecognition) {
return <span>Browser doesnt support speech recognition.</span>;
}

const clearAll = ()=>{

// const tar = document.querySelector(".voiceresultclass")
// tar.innerHTML = ""
setTextToCopy("");
resetTranscript();
toast.success("Text Cleared")
}

return (
<>
<div className="voiceContainer">
<div className="voiceBody wholeeditorBody">
<div className="leftLang">
<LangList leftcolorv="white"/>
</div>
<div className="voicePlayground">
<h1 className="title">Voice to Text Converter</h1>
<div className="voiceTextContainer">
<div className="voice2TextOutput" onClick={()=>setTextToCopy(textToCopy)}>
{/* <mark><h3 contentEditable>{transcript}</h3></mark> */}
<mark><h3 className='voiceresultclass'>{textToCopy}</h3></mark>
31
 </div>
<div className="btngroup">
<button onClick={startListening}>Start</button>
<button onClick={SpeechRecognition.stopListening}>Stop</button>
<button onClick={setCopied}>{isCopied ? "Copied" : "Copy"}</button>
<button onClick={clearAll}>Clear</button>
</div>
</div>
</div>
</div>
</div>
</>
)
}
export default Voice2Text;

CodingPage.jsx
import React from 'react'
// import ImageCoding from '../../assets/JavaScript frameworks-rafiki.svg'
import { NavLink } from 'react-router-dom'

function CodingPage(props) {
return (
<>
<div className="codingContainer container">
<h1 className='title'>{props.title}</h1>
<div className="codingSection" id={props.uniId}
// style={props.poss}
>
<div className="codingInfo codingsec">
<div className="infoCoding infoDetails">
{props.info}
</div>
<NavLink to={props.path}><button
className="btn">{props.con}</button></NavLink>
</div>
<div className="codingimage codingsec">
<img
src={props.image}
alt="image1" className='CodingImg' />
</div>
</div>
</div>
</>
)
}

export default CodingPage

32
Feedback.jsx

import React, { useState } from 'react'

import blob from '../../assets/blobanimation.svg'
import { toast } from 'react-hot-toast';

function Feedback() {

const [userData,setUserData] = useState({

name: '',
email:'',
feedback:'',
});

let name,value;
const postUserData = (event)=>{
name = event.target.name;
value= event.target.value;

setUserData({...userData,[name]:value});
}

//connect with firebase

const submitData = async(e)=>{
// toast.loading('Data Processing...')
e.preventDefault();
const {name,email,feedback} = userData;
if(name && email && feedback){

const res = fetch(

'https://reactformwebsite-79b28-default-rtdb.firebaseio.com/codoFileFeedback.json',{
method:"POST",
headers:{
"Content-Type":"application/json"
},
body:JSON.stringify({
name,
email,
feedback,
}),
}
);

if(res){
toast.remove();
alert("Data Stored Successfully");
setUserData({name:"",email:"",feedback:"",})
}
else{
// alert("Please Fill the Data");
// toast.remove();
toast.error("Please Fill the Form")
}
33
 }
else{
toast.error("Please Fill the Form")
// alert("Please Fill the data")
}
};

return (
<>
<div className='container'>
<img src={blob} alt="" className='blob_a blob3' />

<h1 className='title'>Let's Work Together</h1>

<div className='feedSection'>
<div className='feedinfo'>
<p className="info">For Being <mark>Amazing</mark>.Let's Become a part of a
amazing community <mark>Codo File</mark>.You can even Tell your's <mark>Issue Related to
Website for Improving the Site</mark></p>
</div>
<div className='feedform'>
<form>
<div className="formname formDetails">
<label htmlFor='name'>Name :</label>
<input
type="text"
name="name"
id="name"
value={userData.name}
onChange={postUserData}
/>
</div>
<div className="formemail formDetails">
<label>Email :</label>
<input
type="email"
name="email"
id="email"
value={userData.email}
onChange={postUserData}
/>
</div>
<div className="formmessage formDetails">
<label>Message :</label>
<textarea name="feedback" id="feedback"
value={userData.feedback}
onChange={postUserData}
/>
</div>
<div className="formbutton formDetails">
<button type='submit' onClick={submitData} className="btn formbtn">Say a
Word?</button>
</div>
</form>
</div>
34
 </div>
</div>
</>
)
}

export default Feedback

Footer.jsx

import React from 'react'

function Footer() {
const date = new Date();
const year = date.getFullYear();
return (
<>
<div class="wave-container wave">

</div>
</>
)
}

export default Footer

LandingPage.jsx

import React from 'react'

import blob from '../../assets/blobanimation.svg'

function LandingPage() {
return (
<div className="landingContainer container">
<img src={blob} alt="" className='blob_a blob1' />
<img src={blob} alt="" className='blob_a blob2' />
<div className="landingInfo">
<h1>ProcessX</h1>
<p>Think, Speak, Code, Repeat</p>
</div>
</div>
)
}

export default LandingPage

index.jsx
import * as Yup from "yup";

export const registerSchema = Yup.object({

35
 username: Yup.string().min(2).max(25).required("Please Enter Your Name"),
email:Yup.string().email().required("Please Enter Your Email"),
pass:Yup.string().min(6).required("Please Enter Your password"),
cpass:Yup.string().required().oneOf([Yup.ref('pass'),null],"Password must be Same"),
work:Yup.string().required("Enter Your Profession"),
dom:Yup.string().required("Enter Your Domain"),
});

Errorpage.jsx

import { gsap } from 'gsap';

import { Draggable } from 'gsap/Draggable';
import { useEffect } from 'react';
import LangList from '../Editor/LangList';
// import headerImg from '../../assets/favi-removebg-preview.png'
import { NavLink } from 'react-router-dom';
gsap.registerPlugin(Draggable);

function Errorpage() {
useEffect(() => {
Draggable.create("#dragg", { type: "x,y", edgeResistance: 0.65,bounds: {left:50,top:50}});
}, []);

document.addEventListener('mousemove',function(details){
document.querySelectorAll("h1").forEach((elem)=>{
const position = elem.getAttribute("value");
var x = (window.innerWidth - details.clientX * position)/100;
var y = (window.innerHeight = details.clientY * position)/100;

elem.style.transform = `translateX(${x}px) translateY(${y}px)`;

})
})
return (
<div className="errorcontainer">
<div className="errorBody">
<div className="leftLang">
<LangList/>
</div>
<div className="errorPage">
<div className="errortextcontainer" id='dragg'>
<div className="messageEr">
<h1 value="7" >404</h1><h3 className='eerrrroorr'>The page you are looking for is out
to <span style={{fontSize:"2rem",color:"gray"}}> lunch.</span></h3>
<h3>Please come back later.</h3>
</div><br />
<NavLink to='/'><button className='btn'>Back to Home</button></NavLink>
</div>
</div>
</div>
</div>
)
}
36
 export default Errorpage

Homepage.jsx
import React from 'react'
// import Header from '../Header';
import LandingPage from '../HomepageScreen/LandingPage';
import CodingPage from '../HomepageScreen/CodingPage';
import ImageCod from '../../assets/JavaScript frameworks-rafiki.svg'
import Pycod from '../../assets/Man reading-pana.svg'
import SpeechCod from '../../assets/Speech to text-bro.svg'
import CodJava from '../../assets/Coding-bro.svg'
import ImagCod from '../../assets/Writing on the wall-rafiki.svg'
import Feedback from '../HomepageScreen/Feedback';
import Footer from '../HomepageScreen/Footer';

function Homepage() {

const width2 = window.outerWidth;

return (
<>
<div className="smallScreen">
<mark>The Screen is Visible with width more than 250px <br/><br/><hr/><br/>Screen Size:
{width2}px</mark>
</div>
<div className="container">
{/* <Header/> */}
<LandingPage/>
<CodingPage
title="JavaScript Compiler"
con="Run JavaScript"
info={<>All The <mark>Logic</mark> That you need to Learn and Practice <mark>
JavaScript </mark> will be Accomplished by this <mark> Js Text Editor </mark> .</>}
path='/editor/javaScript'
image={ImageCod}
// poss={{'flexDirection':'row'}}

/>
<CodingPage
title="Python Compiler"
con="Run Python"
path="/editor/python"
info={<>Leash out All your <mark> Logic and Understanding</mark> with the Easiest
Programming Language <mark>Python</mark> in this Super Easy Web IDE</>}
image={Pycod}
// poss={{'flexDirection':'row-reverse'}}
uniId={"uni"}
/>

<CodingPage
title="Image To Code"
37
 path='/editor/image2text'
image={ImagCod}
con="Get Started"
info={<>
Turn Your <mark>Image into Reality</mark> with this amazing Feature of <mark>Image
to Code</mark> Tool.
</>}
// poss={{'flexDirection':'row'}}
/>
<CodingPage
title="Voice To Code"
path='/editor/voice2text'
image={SpeechCod}
info={<>
<mark>"Words Speak more than Actions"</mark> let this quote get Install into your life by
our latest tool <mark>Voice to Text</mark> feature .
</>}
con="Get Started"
// poss={{'flexDirection':'row-reverse'}}
uniId={"uni"}
/>

<Feedback/>
<Footer/>
{/* <a href="http://" target="_blank" rel="noopener noreferrer"></a> */}
</div>
</>
)
}
export default Homepage;

Login.jsx
import React, { useContext, useState } from 'react'
import { NavLink, useNavigate } from 'react-router-dom'
import Login_svg from '../../assets/Back-to-work-pana.png';
import blog_svg from '../../assets/blobanimation.svg';
import { toast } from 'react-hot-toast';

import {UsedContext} from '../App'

function Login() {

const {state,dispatch} = useContext(UsedContext);

const history2 = useNavigate();

const width2 = window.outerWidth;

const [username,setUsername] = useState('');

const [password,setpassword] = useState('');

// http://localhost:3000/login
const loginUser = async (e)=>{
38
 e.preventDefault();
const res = await fetch('http://localhost:5000/login',{
method:'POST',
headers:{
"Content-Type":"application/json"
},
body:JSON.stringify({
username,
password
})
})

const data = res.json();

if(res.status === 400 || !data){

// window.alert("Invalid Credentials-Check you username and password");
toast.error('Please Enter Valid Inputs');
}
else if(res.status === 401){
toast.error("First Register Yourself");
}
else if(res.status === 402 ){
toast.error("Wrong Password.");
}
else if(res.status === 403){
toast.error("Please Fill The Details");
}
else{
dispatch({type:'USER',payload:true});
// window.alert("Login Successfully");
toast.success("Login Successfully");
history2('/');
}
}

return (
<>
<div className="smallScreen">
<mark>The Screen is Visible with width more than 250px <br/><br/><hr/><br/>Screen Size:
{width2}px</mark>
</div>
<div className="loginContainer">
<img className='blob_svg blob_a' src={blog_svg} alt="backgound-svg" />
<img className='blob_svg2 blob_a' src={blog_svg} alt="backgound-svg" />
<div className="registerSVG loginimage">
<img src={Login_svg} alt="" />
<p>Don't have an Account? <NavLink to="/register"><span
className='registerSwitch'>Create Account</span></NavLink></p>
</div>
<div className="loginDetails">
<h1 className='title logintitle'>Login</h1>
{/* <form className='LoginForm' onSubmit={handleSubmit}> */}
<form className='LoginForm' method='POST'>
39
 <div className="Loginname">
<label htmlFor=""> Username:</label><br />
<input type="text" name="username" id="username" autoComplete='off'
placeholder='codofile'
value={username}
onChange={(e)=>setUsername(e.target.value)}

/><br />
{/* {errors.username && touched.username ? (<p
className='errorlabelinput'>{errors.username}</p>) : null} */}

</div>
<div className="Loginname">
<label htmlFor=""> Password:</label><br />
<input type="password" name="pass" id="pass" autoComplete='off'
placeholder='codofile'
value={password}
onChange={(e)=>setpassword(e.target.value)}

// value={values.pass}
// onChange={handleChange}
// onBlur={handleBlur}
/><br />
{/* {errors.pass && touched.pass ? (<p className='errorlabelinput'>{errors.pass}</p>) :
null} */}

</div>
<input type="submit" name="submit" id="submit" className='btn' onClick={loginUser}
/>
</form>
</div>
</div>
</>
)
}

export default Login

Logout.jsx

import React, { useContext, useEffect } from 'react'

import { useNavigate } from 'react-router-dom'
import {UsedContext} from '../App'

function Logout() {

const {state,dispatch} = useContext(UsedContext);

const history3 = useNavigate()

useEffect(()=>{
fetch('http://localhost:5000/logout',{
40
 method:'GET',
headers:{
"Content-Type":"application/json",
Accept: "application/json",
},
credentials:"include"
}).then((res)=>{
dispatch({type:'USER',payload:false});
history3("/login")
if(!res.status === 200){
const error = new Error(res.Error)
throw error;
}
}).catch((err)=>{
console.log("error in logout", err)
dispatch({type:'USER',payload:false});
history3("/login")
})
})

return (
<mark><h1>Logout</h1></mark>
)
}

export default Logout

Register.jsx
import React, { useState } from 'react'
import Login_svg from '../../assets/Login-amico.svg';
import blog_svg from '../../assets/blobanimation.svg';
import { NavLink } from 'react-router-dom';

import {useNavigate} from 'react-router-dom'

import { toast } from 'react-hot-toast'

function Register() {

const history1 = useNavigate();

//for storing the data to sent in backend.

const [user,setUser] = useState({
username:"",
email:"",
password:"",
cpassword:"",
role:"",
// dom:"",
});

let name,value;
41
 const handleChange = (e)=>{
console.log(e)
name = e.target.name;
value = e.target.value;

setUser({...user,[name]:value})
}

const PostData = async (e)=>{

e.preventDefault();
const {username,email,password,cpassword,role,/* dom,*/} = user;
const res = await fetch("http://localhost:5000/register",{
method:"POST",
headers:{
"Content-Type":"application/json"
},
body:JSON.stringify({
username,email,password,cpassword,role,/* dom*/})
});
const data = await res.json();

if(res.status === 422 || !data){

// window.alert("Invalid Registration");
toast.error("Please Fill The Details.");
console.log("Invalid Registration");
}
else if(res.status === 421){
toast.error("Email is Already Registered");
}
else if(res.status === 420){
toast.error('Password is not Matching');
}
else{
// window.alert("Register Successsful");
toast.success('Register Successfuly');
console.log("Register Successful");

// history1.push("/login",{replace:true});
history1("/login");
}
}

const width2 = window.outerWidth;

return (
<>
<div className="smallScreen">
<mark>The Screen is Visible with width more than 250px <br/><br/><hr/><br/>Screen Size:
{width2}px</mark>
</div>
<div className="registerMainComponent">
<img className='blob_svg blob_a' src={blog_svg} alt="backgound-svg" />
<img className='blob_svg2 blob_a' src={blog_svg} alt="backgound-svg" />
<h1 className='registerTitle title'>Registration</h1><br/>
<div className="registerSection">
42
 <div className="registerForm">
{/* <form onSubmit={handleSubmit}> */}
<form>
<div className="RegisterInputField">
<div className="Registername">
<label className='registerLabels' htmlFor="username">
Username:</label><br />
<input
type="text"
name="username"
id="username"
// autoComplete='off'
placeholder='codofile'
value={user.username}
onChange={handleChange}
// onBlur={handleBlur}
/><br />
{/* {errors.username && touched.username ? (<p
className='errorlabelinput'>{errors.username}</p>) : null} */}
</div>
<div className="Registeremail">
<label className='registerLabels' htmlFor="email">Email:</label><br />
<input
type="text"
name="email"
id="email"
// autoComplete='off'
placeholder='[email protected]'
value={user.email}
onChange={handleChange}
// onBlur={handleBlur}
/><br />
{/* {errors.email && touched.email ? (<p
className='errorlabelinput'>{errors.email}</p>) : null} */}
</div>
<div className="Registerpassword">
<label className='registerLabels' htmlFor="pass">Password:</label><br />
<input
type="password"
name="password"
id="password"
// autoComplete='off'
placeholder='123456'
value={user.password}
onChange={handleChange}
// onBlur={handleBlur}
/><br />
{/* {errors.pass && touched.pass ? (<p
className='errorlabelinput'>{errors.pass}</p>) : null} */}
</div>
<div className="Registercpassword">
<label className='registerLabels' htmlFor="cpass">Confirm
Password:</label><br />
<input
43
 type="password"
name="cpassword"
id="cpassword"
// autoComplete='off'
placeholder='123456'
value={user.cpassword}
onChange={handleChange}
// onBlur={handleBlur}
/><br />
{/* {errors.cpass && touched.cpass ? (<p
className='errorlabelinput'>{errors.cpass}</p>) : null} */}
</div>
<div className="Registerdomain">
<label className='registerLabels' htmlFor="work">Profession:</label>
<input
type="text"
name="role"
id="role"
// autoComplete='off'
placeholder='Web Developer'
value={user.role}
onChange={handleChange}
// onBlur={handleBlur}
/>
{/* {errors.work && touched.work ? (<p
className='errorlabelinput'>{errors.work}</p>) : null} */}
</div>
{/* <div className="Registerdomain">
<label className='registerLabels' htmlFor="dom">You are a :</label><br />
<input
type="text"
name="dom"
id="dom"
placeholder='Student/Teacher/Learner'
value={user.dom}
onChange={handleChange}
// onBlur={handleBlur}
/>
{/* {errors.dom && touched.dom ? (<p
className='errorlabelinput'>{errors.dom}</p>) : null}
</div> */}
</div>
<input type="submit" onClick={PostData} className='btn registerbtn' />
</form>
</div>
<div className="registerSVG">
<img src={Login_svg} alt="" />
<p>Already have an Account? <NavLink to="/login"><span
className="registerSwitch">Login Now</span></NavLink></p>
</div>
</div>
</div>
</>
)
44
 }
export default Register

App.jsx
import React, { createContext, useReducer } from 'react'
import Register from './Screens/Register'
import { BrowserRouter,Routes,Route } from 'react-router-dom'
import Login from './Screens/Login';
import Voice2Text from './Editor/Voice2Text';
import Image2Text from './Editor/Image2Text';
import Python from './Editor/Python';
import JavaScript from './Editor/Javascript';
import Errorpage from './Screens/Errorpage';
import Homepage from './Screens/Homepage';
import Header from './Header';
import Logout from './Screens/Logout';
import { Toaster } from 'react-hot-toast';
import { initialState, reducer } from '../reducer/UseReducer';

export const UsedContext = createContext();

function App() {

const [state,dispatch] = useReducer(reducer,initialState)

return (
<UsedContext.Provider value={{state,dispatch}}>
<div>
<Toaster
position='top-center'
toastOptions={{
success:{
theme:{
primary:'#4aed88'
}
}
}}
/>
</div>
<BrowserRouter>
<Header/>
<Routes>
<Route path='/' element={<Homepage/>}/>
<Route path='/register' element={<Register/>} />
<Route path='/login' element={<Login/>}/>
<Route path='/logout' element={<Logout/>}/>
<Route path='/editor/python' element={<Python/>}/>
<Route path='/editor/javascript' element={<JavaScript/>}/>
<Route path='/editor/voice2text' element={<Voice2Text/>}/>
<Route path='/editor/image2text' element={<Image2Text/>}/>
<Route path='*' element={<Errorpage/>}/>
</Routes>
</BrowserRouter>
45
 </UsedContext.Provider>
)
}
export default App

Header.jsx

import React, { useContext } from 'react'

import headerImg from '../assets/favi-removebg-preview.png'
import {NavLink} from 'react-router-dom';
import {UsedContext} from './App'

function Header() {

const { state, dispatch } = useContext(UsedContext);

const RenderMenu = ()=>{

if(state){
return (
<>
{/* <NavLink to='/login'><button className='Headerbtn Headerbtn1
btn'>Login</button></NavLink>
<NavLink to='/register'><button className='Headerbtn Headerbtn2
btn'>Register</button></NavLink> */}
<NavLink to='/logout'><button className='Headerbtn Headerbtn2
btn'>Logout</button></NavLink>
</>
)
}
else{
return(
<>
<NavLink to='/login'><button className='Headerbtn Headerbtn1
btn'>Login</button></NavLink>
<NavLink to='/register'><button className='Headerbtn Headerbtn2
btn'>Register</button></NavLink>
{/* <NavLink to='/logout'><button className='Headerbtn Headerbtn2
btn'>Logout</button></NavLink> */}
</>
)
}
}
return (
<div className="headerContainer">
<div className="headerImage">
<img className='headerlogo' src={headerImg} alt="MainLogo" /><NavLink
className='headerp' to='/'>ProcessX</NavLink>
</div>
<div className="Headerbtngroup">
{/* <NavLink to='/login'><button className='Headerbtn Headerbtn1
btn'>Login</button></NavLink>
<NavLink to='/register'><button className='Headerbtn Headerbtn2
btn'>Register</button></NavLink>
46
 <NavLink to='/logout'><button className='Headerbtn Headerbtn2
btn'>Logout</button></NavLink> */}
<RenderMenu/>
</div>
</div>
)
}
export default Header

Usereducer.jsx

export const initialState = null;

export const reducer = (state,action)=>{

if(action.type === "USER"){
return action.payload;
}
return state;
}

index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './Components/App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);

conn.js

const mongoose = require('mongoose');

const DB = process.env.DB;

mongoose.connect(DB)
.then(()=>{
console.log(`Database Connected Successfully!`);
})
.catch((err)=>{
console.log(`Vinit an error occured .The Error is :${err}`);
})
47
userSchema.js
const mongoose = require('mongoose')
const bcrypt = require('bcryptjs')
const jwt = require('jsonwebtoken')

const userSchema = new mongoose.Schema({

username :{
type:String,
required:true,
},
email:{
type:String,
required:true,
},
password:{
type:String,
required:true,
},
cpassword:{
type:String,
required:true,
},
role:{
type:String,
default:"not_mentions",
},
tokens:[
{
token:{
type:String,
}
}
]
})

userSchema.pre('save', async function(next){

if(this.isModified('password')){
this.password =await bcrypt.hash(this.password,10);
this.cpassword = await bcrypt.hash(this.cpassword,10);
}
console.log(`The Hash password is :${this.password}`)
next();
})

// we are geenrating jokens

userSchema.methods.generateAuthToken = async function(){
try{
let token = jwt.sign({_id:this._id},process.env.SECRET_KEY);
this.tokens = this.tokens.concat({token:token});
await this.save();
48
 return token;
}catch(err){
console.log(`Dude there is an error :${err}`);
}
}

const User = mongoose.model("User",userSchema);

module.exports = User;

auth.js

const jwt = require('jsonwebtoken')

const express = require('express');
const router = express.Router();
const PORT = process.env.PORT;
const bcrypt = require('bcryptjs');
const {generatefile} = require('./generatePy')
const {executepy} = require("./executepy")
const {executeDart} = require('./executeDart')
const {generateDartfile} = require('./generateDart')

require('../db/conn');
const User = require('../model/userSchema')

router.get('/',(req,res)=>{
res.send("Welcome to the Home page from auth.js");
console.log(`User at URL : localhost:${PORT}${req.url}`)
})

//################ python compiler code here ##################

router.use(express.urlencoded({extended:true}))
router.post('/runpy',async(req,res)=>{
const {language="py",code="print('hello python')"} = req.body;

if(code === ""){

return res.status(400).json({success:false,error:"Please Enter Code"});
}
try{
// need to generate a py file from the request
const filepath = await generatefile(language,code)
// we need to run the file and sent response back
const output = await executepy(filepath)
return res.json({filepath,output});
}
catch(err){
// res.status(500).json({error:"Syntax Error: Please Check Your Code"});
// res.status(500).json({error:`${err}`});

const errorMessage = err.toString();

const errorPattern = /line \d+\s+([^\n]+)/;
const match = errorMessage.match(errorPattern);
const realError = match ? match[0].trim() : "Unknown error occurred";
49
 res.status(500).json({ error: `Error: ${realError}` });

}
})

// registration code here

router.post('/register',async (req,res)=>{
const {username,email,password,cpassword,role} = req.body;
if(!username || !email || !password || !cpassword && role ){
return res.status(422).send({Error: "Enter Completed Details for Processing"});
}

try{
const userExist = await User.findOne({email:email});

if(userExist){
return res.status(421).json({Error:"Email already exist"})
}
else if(password!=cpassword){
return res.status(420).json({Error:"Password are not matching"})
}
else{
const user = new User({username,email,password,cpassword,role});
await user.save();
res.status(200).json({success:"User Register Successfully"});
}
}catch(err){
console.log(`Admin There is an Error : ${err}`);
}

console.log(`Your Register password is : ${password}`);

console.log(`Your Register username is : ${username}`);
console.log(`You are a : ${role}`);
})

// login code here

router.post('/login', async (req,res)=>{
try{
let token;
let {username,password} = req.body;

if(!username || !password){
return res.status(403).json({Error:"Please fill the data"});
}

const userLogin = await User.findOne({username:username});

if(userLogin){
const isMatch = await bcrypt.compare(String(password), String(userLogin.password));

token = await userLogin.generateAuthToken();

console.log(`The new Token Generated is : ${token}`)
res.cookie("jwt_users_token",token,{
50
 expires:new Date(Date.now() + 25892000000), //it is 30 days;
httpOnly:true
});

if(!isMatch){
res.status(402).json({error:"Password Wrong"});
}
else{
res.status(200).json({message:"user login successfully"});
}
}
else{

res.status(400).json({error:"Invalid username or Password!"});

}

if(userLogin===null){
res.status(401).send("please register to login")
console.log(`Please register to login in codofile`)
}
else{
console.log(`Login Successful - Here is the Completed data`)
console.log(userLogin);
}
}catch(err){
console.log(`Admin There is an error : ${err}`);
// res.status(400).json({error:"invalid Credential"});
}
})

router.get('/logout',(req,res)=>{
console.log("Hello the account is logout");

res.status(200).send('User Logout');
})

module.exports = router

Executepy.js

const {exec} = require('child_process')

const path = require('path')

const executepy = (filepath)=>{

return new Promise((resolve,reject)=>{

const uniqueName = path.basename(filepath).split(".")[0];

// const wayName = `${__dirname}/python_runner`;
// const dirCodes = path.join(__dirname,"../python_runner");

const wayName = path.join(__dirname,"../python_runner")

51
 console.log("File Location:",wayName)
exec(
`cd ${wayName} && python ${uniqueName}.py`,
(error,stdout,stderr)=>{
if (error) {
console.error("Python execution error:", error);
reject(error);
} else if (stderr) {
console.error("Python stderr:", stderr);
reject(stderr);
} else {
console.log("Python stdout:", stdout);
resolve(stdout);
}
}
);
});
};
module.exports = {
executepy
}

generatePy.js

const fs = require('fs')
const path = require('path');
const {v4:uuid} = require('uuid')

const dirCodes = path.join(__dirname,"../python_runner");

console.log('Python files are storing at:',dirCodes)
if(!fs.existsSync(dirCodes)){
fs.mkdirSync(dirCodes,{recursive:true});
}

const generatefile = async (format,content)=>{

const jobId = uuid();

const filename = `${jobId}.${format}`
const filepath = path.join(dirCodes,filename);
await fs.writeFileSync(filepath,content);
return filepath;
}
module.exports = {
generatefile,
}

app.js

const cors = require('cors')

const dotenv = require('dotenv');
dotenv.config({path:'./config.env'});
const mongoose = require('mongoose');
const express = require('express');

52
 const app = new express();
const PORT = process.env.PORT ;

require('./db/conn');

app.use(cors());
app.use(express.json());
app.use(require('./router/auth'));

const consoleURL = (req,res,next)=>{

console.log(`User at URL : localhost:${PORT}${req.url}`);
next();
}

app.get('/',consoleURL,(req,res)=>{
// res.cookie("test","Vinit");
res.send('Hello world');
})
app.get('*',consoleURL,(req,res)=>{
res.send(`<center><h1>404 </h1><h3>The Page you are Looking for is Not
Found</h3></center>`)
})

app.listen(PORT,()=>{
console.log(`localhost:${PORT}`)
})

execute.py

const {exec} = require('child_process')

const path = require('path')

const executepy = (filepath)=>{

return new Promise((resolve,reject)=>{

const uniqueName = path.basename(filepath).split(".")[0];

const wayName = path.join(__dirname,"../python_runner")

console.log("File Location:",wayName)
exec(
`cd ${wayName} && python ${uniqueName}.py`,
(error,stdout,stderr)=>{
if (error) {
console.error("Python execution error:", error);
reject(error);
} else if (stderr) {
console.error("Python stderr:", stderr);
reject(stderr);
} else {
console.log("Python stdout:", stdout);
resolve(stdout);
53
 }
}
);
});
};
module.exports = {
executepy
}

generate.py

const fs = require('fs')
const path = require('path');
const {v4:uuid} = require('uuid')

const dirCodes = path.join(__dirname,"../python_runner");

console.log('Python files are storing at:',dirCodes)
if(!fs.existsSync(dirCodes)){
fs.mkdirSync(dirCodes,{recursive:true});
}

const generatefile = async (format,content)=>{

const jobId = uuid();

const filename = `${jobId}.${format}`
const filepath = path.join(dirCodes,filename);

await fs.writeFileSync(filepath,content);
return filepath;

}
module.exports = {
generatefile,
}

54
4.2 Data Dictionary
A data dictionary is a centralized repository containing detailed descriptions and definitions
of data elements within an organization's data environment. It provides a clear understanding
of the data's meaning, structure, and relationships.
Login & Registration table
Data Attribute Description Data Type Length Constraint
id Unique Integer 4 Bytes Primary Key,
identifier for the Auto increment
user
Username User’s login String 50 Not Null,
name Unique
Email User’s email String 100 Not Null,
address Unique, Valid
Email
Password User’s String 255 Not Null,
password Hashed
Confirm Confirmed String 255 Must match
Password password password field
Role Role of the user String 20 Default: 'user',
in the system Enum: ['user',
'admin',
'moderator']

55
4.3 Program Description:
1. Program Overview:
The project ProcessX is a web-based application that integrates multiple functionalities to
streamline coding-related tasks and user interactions. It includes user authentication, a code
editor for writing and executing code, image processing for extracting text using OCR, and
voice-to-text conversion. The system is designed to provide a seamless user experience,
enabling developers, students, and content creators to efficiently manage and process various
inputs within a unified platform.

2. Functionality: The Key Features include

▪ User Authentication: Users can securely log in and register through a user-friendly
interface. The system validates credentials and manages sessions using an integrated
authentication API.
▪ Code Execution: The platform includes a powerful code editor where users can write
and execute code in various programming languages. The submitted code is processed
on the server, and the output is returned to the user interface.
▪ Image Processing: Users can upload images to be processed using Optical Character
Recognition (OCR) technology. The extracted text is displayed to the user, facilitating
easy conversion of image data into editable text.
▪ Voice to Text Conversion: The platform allows users to submit voice recordings,
which are then processed using speech recognition technology. The converted text is
provided to the user, making it a valuable tool for transcription tasks.
▪ Seamless User Experience: The system is designed with a focus on providing a
seamless and intuitive user experience, ensuring that all functionalities—from
authentication to code execution and input processing—are easily accessible and
efficiently managed.

3. User Interface (UI):

▪ Home Page: Navigation bar, welcome message, and call-to-action buttons for login
and registration.
▪ Login/Registration Pages: Forms with input fields, submit buttons, and real-time
validation.
▪ Code Editor: A syntax-highlighted code area, run button, and output display.
▪ Image Processing: Upload button for images, text extraction options, and a display
for extracted text.
▪ Voice to Text: Record button, voice file upload option, and converted text display.
▪ Dashboard: User profile, quick access links, and recent activities.

56
4.4 Naming Conventions
LoginUser (String username, String password)
• Description: Authenticates a user by validating the provided credentials against the
database. Returns an error if the credentials are invalid, and initiates a user session on
successful authentication.
Logout ()
• Description: Logs the user out by sending a request to the server. On successful
logout, updates the user state and redirects to the login page. Handles any errors that
occur during the logout process.
Register ()
• Description: Handles user registration by collecting user details (username, email,
password, role), sending the data to the backend, and providing feedback based on the
server's response. Redirects the user to the login page upon successful registration or
displays relevant error messages if any issues occur.
Image2Text()
• Description: Converts an uploaded image to text using OCR (Optical Character
Recognition) via Tesseract. Provides user feedback throughout the process, including
notifications for loading, success, and errors. Allows users to copy the extracted text
to the clipboard or clear the output.
LangList(props)
• Description: Displays a list of programming languages and features as selectable
options, represented by images. The component uses props to dynamically set
background colors and image classes for each language or feature, and provides
navigation links to the corresponding editor pages.
Python()
• Description: Provides an interface for writing and executing Python code. The user
inputs code, which is sent to the server for execution. The resulting output is
displayed on the screen. Additional features include copying code to the clipboard,
downloading the code as a Python file, and clearing the output. The function handles
success and error responses, providing appropriate feedback via notifications.

Voice2Text()
• Description: Converts spoken words into text using speech recognition, with special
phrases automatically replaced by corresponding symbols (e.g., "semicolon" to ";").

57
 The function supports continuous listening, processes the transcript in real-time, and
allows users to copy the text or clear it. It provides feedback via notifications and
handles browser compatibility for speech recognition.

4.5: Validations

Login Validation
• Description: Checks if login credentials are valid and provides appropriate feedback.
if (res.status === 400 || !data) {
toast.error('Please Enter Valid Inputs');
} else if (res.status === 401) {
toast.error("First Register Yourself");
} else if (res.status === 402) {
toast.error("Wrong Password.");
} else if (res.status === 403) {
toast.error("Please Fill The Details");
} else {
dispatch({ type: 'USER', payload: true });
toast.success("Login Successfully");
history2('/');
}

Registration Validation
• Description: Ensures that registration details are correctly filled and not previously
used.

if (res.status === 422 || !data) {

toast.error("Please Fill The Details.");
} else if (res.status === 421) {
toast.error("Email is Already Registered");
} else if (res.status === 420) {
toast.error('Password is not Matching');
} else {
toast.success('Register Successfully');
history1("/login");
}

58
Image Upload Validation
• Description: Validates that an image is uploaded before processing.
const handleChange = (event) => {
if (event.target.files.length === 0) {
toast.error('No file selected');
return;
}
toast.success('File Added.');
setImagePath(URL.createObjectURL(event.target.files[0]));
}

Voice Input Validation

• Description: Ensures that voice recognition is supported and provides feedback
during the process.
if (!browserSupportsSpeechRecognition) {
return <span>Browser doesn't support speech recognition.</span>;
}

59
 5. Program Listing

5.1 Cost Estimation

Cost estimation
Given the following values, compute function point when all complexity adjustment factor
(CAF) and weighting factors are average.
User Input = 6
User Output = 6
User Inquiries = 2
User Files = 5
External Interface = 5

60
61
5.2 Schema Design

62
5.3 User Manual with Screenshots

63
64
65
66
67
 5.4 Test Cases Design
Authentication Module

TEST CASE TEST TEST PRE- TEST TEST EXPEC POST ACTUA STATUS
ID SCENA CASE CONDIT STEP DATA TED CONDIT L (PASS/F
RIO ION S RESULT ION RESUL AIL)
T
TC_LOGIN Verify Enter User must 1.Ente <valid User Dashboard Dashboa Pass
_001 valid valid be r usernam successfu rd
login Userna registered userna e>, lly logged
me and me 2. <valid in and
valid Enter passwor redirected
Passwor passw d> to
d ord 3. dashboar
Click d
Login
TC_LOGIN_ Verify Enter User must 1. <valid Error Error Error Pass
002 login valid be Enter usernam message message message
with Userna registered userna e>, "Invalid
invalid me and me 2. <invalid credential
password invalid Enter passwor s
Passwor passw d>
d ord 3.
Click
Login
TC_LOGIN_ Verify Enter 1. <invalid Error Error Error pass
003 login invalid Enter usernam message message message
with Userna userna e>, "Invalid
invalid me and me 2. <invalid credential
username Passwor Enter passwor s"
and d passw d>
password ord 3.
Click
Login
TC_REG_00 Verify Enter User is not 1. <new Successfu Login Login Pass
1 registrati valid registered Enter usernam l Page page
on details userna e>, registrati
for me 2. <passwo on,
registrat Enter rd> redirect
ion passw to login
ord 3.
Click
Regist
er
TC_REG_00 Verify Enter Email 1. <existin Error Registrati Registrat Pass
2 registrati email already Enter g email> message on Pag ion page
on with that is registered email "Email
existing already in the 2. already
email registere system Enter exists"
d passw
ord 3.
Click
Regist
er

68
 Code Execution Module

TEST TEST TEST PRE- TEST TEST EXPEC POST ACT STATU
CASE ID SCENA CASE CONDI STEP DATA TED CONDI UAL S
RIO TION S RESUL TION RESU
T LT (PASS/F
AIL)

TC_CODE Execute User User is 1. print("Hello Output: Code Code Pass

_001 valid submit logged Enter World") Hello output output
Python s valid in Pytho World displaye displa
code Pytho n code d yed
n code 2.
Click
"Run"

TC_COD Execute User User is 1. console.log( Output: Code Code Pass

E_002 valid submit logged Enter "Test") Test output output
JavaScr s valid in JavaS displaye displa
ipt code JavaS cript d yed
cript code
code 2.
Click
"Run"

TC_CODE Execute User User is 1. print("Hello Error Error Error Pass

_003 code submit logged Enter messag message messa
with s code in incorr e ge
syntax with a ect display
error syntax code ed
error 2.
Click
"Run"

TC_CODE Execute User User is 1. Empty code Error Error Pass

_004 empty submit logged Leave editor message message
code s an in code "Code "Code
empty editor cannot cannot
code empty be be
file 2. empty" empty "
Click

69
Image Processing Module (OCR)

TEST TEST TEST PRE- TEST TEST EXPEC POST ACTU STATUS
CASE ID SCENA CASE CONDIT STEP DAT TED CONDIT AL
RIO ION S A RESUL ION RESU (PASS/F
T LT AIL)

TC_IMG Upload User Need to 1.clic <vali Successf Text Text Pass
_001 valid upload Click k d uly displayed displa
image sa check- check check attendan yed
for OCR valid in/out -in -in ce
image button butto time> marked
for text n
extracti <vali
on. 2.che d
ck- check
out -out
butto time>
n

TC_IMG Proper Click Need to 1.clic <vali A Error Error Pass

_002 check check- Click k d message message messa
in/out in check- check check “not ge
time before in/out -in -in allowed
9pm button butto time> to
and n check-
checko <inva out”.
ut at 2.che lid
5am. ck- check
out -out
butto time>
n

TC_IMG Proper Click Need to 1.clic <inva A Error Error Pass

_003 check check- Click k lid message message messa
in/out in at check- check check “not ge
time 11pm in/out -in -in allowed
and button butto time> to
checko n check-
ut at <inva in/out”.
5am. 2.che lid
ck- check
out -out
butto time>
n

70
 Voice-to-Text Module

TEST TEST TEST PRE- TEST TEST EXPE POST ACTU STATUS
CASE ID SCENA CASE CONDIT STEPS DATA CTED CONDIT AL
RIO ION RESU ION RESUL (PASS/F
LT T AIL)

TC_VOICE Convert User User is 1. Valid Voice Text Attenda Pass

_001 valid submits logged in Record voice input displayed nce
voice valid or input succes marked
input to voice upload sfully
text input valid conve
for voice rted to
convers file 2. text
ion Click
"Conv
ert"

TC_VOICE Upload User User is 1. Invalid Error Error Error Pass

_002 unsuppo uploads logged in Uploa file messa message messag
rted invalid d format ge e
audio file for invalid "Inval
format voice- file id file
to-text format forma
2. t"
Click
"Conv
ert"

71
 6. Conclusion

6.1 Conclusion
The ProcessX System project demonstrates a robust implementation of a web-based code
editor with integrated features for code execution, image processing, and voice-to-text
conversion. By providing support for multiple programming languages and offering real-time
feedback, this system allows users to seamlessly compile and run their code. The inclusion of
additional functionalities like OCR (image-to-text) and voice input enhances the versatility of
the application, making it suitable for a wide range of users, including developers, students,
and professionals looking for an accessible coding and productivity platform.
The system is built with a clear architectural design, separating the frontend, backend, and
data storage components, ensuring scalability and maintainability. Its deployment in a web-
based environment makes it platform-independent and accessible from anywhere, further
increasing its usability.
By integrating authentication mechanisms and session management, the system also ensures
user data security and allows for personalized user experiences.

72
6.2 Limitations of the system
Scalability: The current system architecture may face challenges in scaling efficiently if user
traffic grows significantly. Handling multiple concurrent code execution requests, image
uploads, and voice inputs might require more sophisticated load balancing and resource
management.
Performance: Depending on the complexity of the code, image size, or voice input, response
times may be delayed. Especially with large code files or heavy image processing tasks,
performance optimization might be necessary.
Security: While the system incorporates user authentication and session management, there
could be risks related to user input handling (e.g., code execution in the browser). Ensuring
robust security measures to prevent code injection or other vulnerabilities is crucial.
Limited Language Support: Although the system supports JavaScript and Python, other
programming languages are only partially supported. Expanding the language support will
increase the system’s appeal and usability for a broader audience.
Mobile Responsiveness: Although the system is web-based, mobile responsiveness may be
limited, especially when handling code execution or text-based tasks, making the user
experience on mobile devices less seamless.

73
6.3 Future Scope
To address some of the limitations, future development could focus on optimizing the
performance and scalability of the system by implementing cloud-based solutions.
Additionally, expanding the support for more programming languages and enhancing mobile
responsiveness would greatly increase the system’s user base and functionality.

74
 7. Bibliography
• https://www.youtube.com/watch?v=tupa5BRHK4Q
• https://www.geeksforgeeks.org/how-to-make-live-coding-editor-
using-html-css-and-javascript/
• https://stackoverflow.com/questions/57024486/react-get-codemirror-
• https://stackoverflow.com/questions/72659453/how-to-get-a-value-from-
code-mirror-in-react-js

75