ProcessX
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)
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).
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.
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
1 Introduction 1 20/07/24
6 Conclusion 69 16/09/24
7 Bibliography 72 16/09/24
1. INTRODUCTION
1.1 Background
1
1.2 OBJECTIVE
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.
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.
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
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
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
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
18
Figure 11: Context Diagram
19
Figure 12: Data Flow Diagram (Level 1)
20
Figure 14: Package 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() {
22
setIsLoading(false)
})
}
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>
</>
)
}
23
Javascript.jsx
function Javascript() {
btn.addEventListener('click',()=>{
consoleOutput.innerHTML = "";
});
console.log = consoleLoghandler;
return ()=>{
btn.removeEventListener('click',()=>{
consoleOutput.innerHTML = "";
});
console.log = originalConsoleLog;
};
},[]);
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>
</>
)
}
26
LangList.jsx
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>
</>
)
}
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('');
try{
}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}`);
}
}
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
}
Voice2Text.jsx
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' });
}
useEffect(() => {
processTranscript(transcript);
}, [transcript]);
if (!browserSupportsSpeechRecognition) {
return <span>Browser doesnt support speech recognition.</span>;
}
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>
</>
)
}
32
Feedback.jsx
function Feedback() {
let name,value;
const postUserData = (event)=>{
name = event.target.name;
value= event.target.value;
setUserData({...userData,[name]:value});
}
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' />
Footer.jsx
function Footer() {
const date = new Date();
const year = date.getFullYear();
return (
<>
<div class="wave-container wave">
</div>
</>
)
}
LandingPage.jsx
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>
)
}
index.jsx
import * as Yup from "yup";
Errorpage.jsx
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;
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() {
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';
function Login() {
// 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
})
})
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>
</>
)
}
Logout.jsx
function Logout() {
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>
)
}
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';
function Register() {
let name,value;
41
const handleChange = (e)=>{
console.log(e)
name = e.target.name;
value = e.target.value;
setUser({...user,[name]:value})
}
// history1.push("/login",{replace:true});
history1("/login");
}
}
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';
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
function Header() {
Usereducer.jsx
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './Components/App';
conn.js
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')
module.exports = User;
auth.js
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}`)
})
}
})
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}`);
}
if(!username || !password){
return res.status(403).json({Error:"Please fill the data"});
}
if(userLogin){
const isMatch = await bcrypt.compare(String(password), String(userLogin.password));
if(!isMatch){
res.status(402).json({error:"Password Wrong"});
}
else{
res.status(200).json({message:"user login successfully"});
}
}
else{
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
generatePy.js
const fs = require('fs')
const path = require('path');
const {v4:uuid} = require('uuid')
app.js
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'));
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
generate.py
const fs = require('fs')
const path = require('path');
const {v4:uuid} = require('uuid')
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.
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.
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]));
}
59
5. Program Listing
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)
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
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)
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