Computer Science and Engineering, GRD IMT DEHRADUN
Handwriting apps have revolutionized how users interact with devices, enabling the capture and recognition of handwritten input. This project focuses on designing and developinga Handwriting App using React JS for both the frontendand backend, leveragingits versatilityand performance to create a seamless user experience. Existing solution softenrely on either platform-specific applicationsorthird-partyservices,whichcan be limited in functionality and costly. Many of these fail to provide an integrated environment for capturing, storing, and processing handwriting data effectively. Our proposed solution is a fully web based hand writing application builtentirely using ReactJS.This framework allows for the development of a dynamic and efficient single-page application (SPA) capable of capturing handwritten input, saving data in real-time, and providing a responsive user interface.ReactJS’scomponent-based architecture ensuresscalability,whileitsserver-siderendering capabilities enhance performance.
Overview
Handwriting apps play a pivotal role in bridging the gap between traditional pen-and-paper methods and modern digital solutions. They facilitate digital note-taking, artistic expression, and streamlined workflows in various domains, including education, design, and personal productivity. As society becomes increasingly reliant on digital tools, the demand for versatile, efficient, and accessible handwriting solutions has grown exponentially. Traditional handwriting tools, such as physical notebooks, often fall short in offering the adaptability and convenience that digital solutions provide. On the other hand, web-based handwriting apps eliminate the need for platform-specific installations, ensuring accessibility from any device with an internet connection. Such apps also cater to diverse user needs by offering extensive customization options, including different pen styles, colours, and export functionalities. The rise of modern frameworks like ReactJS has transformed how developers create interactive and dynamic applications. ReactJS, known for its declarative and component-based approach, allows forthe development of responsive, scalable, and high-performance applications. These characteristics make ReactJS an ideal choice for building a handwriting app that prioritizes user experience and real- time performance. This project leverages ReactJS’s capabilities to develop a web-based handwriting application that overcomes the limitations of existing solutions. By focusing on real-time handwriting capture and rendering, this app ensures seamless interaction and responsiveness. Furthermore, it integrates robust backend support to securely store and manage handwriting data, offering users a comprehensive and reliable platform. In addition to addressing current limitations, the app’s modular design ensures scalability for future advancements. These may include incorporating AI-powered handwriting recognition, enabling real- time collaboration between multiple users, and integrating advanced export and sharing functionalities. The overarching goal is to create a user-friendly application that not only meets current demands but also adapts to emerging trends and technologies.
RESULT:
Implementation Screenshots
• Converting Phase:
Image Scan:
Voice Typing:
Both Segments:
2. APPENDICES
HTML code:
<!DOCTYPEhtml>
<htmllang="en">
<head>
<!--GoogleTagManager-->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
newDate().getTime(),event:'gtm.js'});varf=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-5SR6JBL');</script>
<!--EndGoogleTagManager-->
<metacharset="utf-8"/>
<linkrel="icon"href="%PUBLIC_URL%/logo.png"/>
<metaname="viewport"content="width=device-width,initial-scale=1"/>
<metaname="theme-color"content="#000000"/>
<linkrel="apple-touch-icon"href="%PUBLIC_URL%/logo.png"/>
<metaname="description"content="Converttypedtextintohandwrittenones using HandReacting"/>
<metaproperty="og:image"
content="https://raw.githubusercontent.com/hrt21/handReacting/master/src/media/ mainlogo.png">
<metaproperty="og:site_name"content="HandReacting"/>
<metaproperty="og:title"content="HandReacting"/>
<metaproperty="og:url"content="https://handreacting.web.app/"/>
<metaproperty="og:type"content="website"/>
<metaproperty="og:description"content="Converttypedtextinto handwritten ones using HandReacting"/>
<meta property="og:image"content="https://raw.githubusercontent.com/hrt21/handReacting/master/src/media/ mainlogo.png"/>
<metaproperty="og:image:width"content="1200">
<metaproperty="og:image:height"content="630">
<metaitemprop="name"content="HandReacting"/>
<metaitemprop="url"content="https://handreacting.web.app/"/>
<metaitemprop="description"content="Converttypedtextintohandwritten ones using HandReacting"/>
<metaitemprop="thumbnailUrl"
content="https://raw.githubusercontent.com/hrt21/handReacting/master/src/media/ mainlogo.png"/>
<linkrel="image_src"
href="https://raw.githubusercontent.com/hrt21/handReacting/master/src/media/mai nlogo.png"/>
<metaitemprop="image"
content="https://raw.githubusercontent.com/hrt21/handReacting/master/src/media/ mainlogo.png"/>
<metaname="twitter:site"content="@hhhrrrttt222111">
<metaname="twitter:creator"content="@hhhrrrttt222111">
<metaname="twitter:url"content="https://handreacting.web.app/"/>
<metaname="twitter:title"content="HandReacting">
<metaname="twitter:description"content="Converttypedtextinto handwritten ones using HandReacting">
<metaname="twitter:image"content="HandReacting">
<metaname="twitter:card"content="summary"/>
<metaname="twitter:creator"content="@hhhrrrttt222111"/>
<linkrel="manifest"href="%PUBLIC_URL%/manifest.json"/>
<scriptsrc='https://unpkg.com/tesseract.js@v2.0.0- alpha.13/dist/tesseract.min.js'></script>
<title>HandWritting</title>
</head>
<body>
<!--GoogleTagManager(noscript)-->
<noscript><iframesrc="https://www.googletagmanager.com/ns.html?id=GTM-5SR6JBL"
height="0"width="0"style="display:none;visibility:hidden"></iframe></noscript>
<!--EndGoogleTagManager(noscript)-->
<noscript>YouneedtoenableJavaScripttorunthisapp.</noscript>
<divid="root"></div>
<scriptsrc="js/tesseract-ocr.js"></script>
</body>
</html>
CSScode:
@import"https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font- awesome.min.css";
@importurl(https://fonts.googleapis.com/css?family=Montserrat:500);
body{
background-color:#ccff99;
}
.heading{
padding-bottom:40px;
}
.sociala{
font-size:2em;
padding:3rem;
}
.fa-instagram{
color:#ff0066;
}
.fa-facebook{
color:#0039e6;
}
.fa-instagram:hover,.fa-facebook:hover,.fa-twitter:hover{
color:#d5d5d5;;
}
.btn{
background-color:chartreuse;
}
@media(min-width:576px){
.gallery-block.transform-on-hover:hover{
transform:translateY(-10px)scale(1.02);
box-shadow:0px10px10pxrgba(0,0,0,0.15)!important;
}
}
.container{
max-width:100rem;
margin:0auto;
padding:02rem2rem;
}
.heading{
font-family:"Montserrat",Arial,sans-serif;
font-size:4rem;
font-weight:500;
line-height:1.5;
text-align:center;
padding:3.5rem0;
color:#1a1a1a;
}
.gallery{
display:flex;
flex-wrap:wrap;
margin:-1rem-1rem;
}
.gallery-item{
flex:10 24rem;
margin:1rem;
box-shadow:0.3rem0.4rem0.4remrgba(0,0,0,0.6);
overflow:hidden;
}
.gallery-image{
display:block;
width:100%;
height:100%;
object-fit:cover;
transition:transform400msease-out;
}
.gallery-image:hover{
transform:scale(1.15);
}
@supports(display:grid){
.gallery{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(24rem,1fr));
grid-gap:2rem;
}
.gallery,
.gallery-item{
margin:0;
}
}
JavaScript code:
//Thisoptionalcodeisusedtoregisteraserviceworker.
//register()isnotcalledbydefault.
//Thisletstheapploadfasteronsubsequentvisitsinproduction,andgives
//itofflinecapabilities.However,italsomeansthatdevelopers(andusers)
//willonlyseedeployedupdatesonsubsequentvisitstoapage,afterallthe
//existingtabsopenonthepagehavebeenclosed,sincepreviouslycached
//resourcesareupdatedinthebackground.
//Tolearnmoreaboutthebenefitsofthismodelandinstructionsonhowto
//opt-in,readhttps://bit.ly/CRA-PWA
constisLocalhost=Boolean(
window.location.hostname==='localhost'||
//[::1]istheIPv6localhostaddress.
window.location.hostname==='[::1]'||
//127.0.0.0/8areconsideredlocalhostforIPv4.
window.location.hostname.match(
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
)
);
exportfunctionregister(config){
if(process.env.NODE_ENV==='production'&&'serviceWorker'innavigator){
//TheURLconstructorisavailableinallbrowsersthatsupportSW.
constpublicUrl=newURL(process.env.PUBLIC_URL,window.location.href);
if(publicUrl.origin!==window.location.origin){
//Ourserviceworkerwon'tworkifPUBLIC_URLisonadifferentorigin
//fromwhatourpageisservedon.ThismighthappenifaCDNisusedto
//serveassets;seehttps://github.com/facebook/create-react- app/issues/2374
return;
}
window.addEventListener('load',()=>{
constswUrl=`${process.env.PUBLIC_URL}/service-worker.js`;
if(isLocalhost){
//Thisisrunningonlocalhost.Let'scheckifaserviceworkerstill
existsor not.
checkValidServiceWorker(swUrl,config);
//Addsomeadditionalloggingtolocalhost,pointingdeveloperstothe
//serviceworker/PWAdocumentation.
navigator.serviceWorker.ready.then(()=>{
console.log(
'Thiswebappisbeingservedcache-firstbyaservice'+
'worker.Tolearnmore,visithttps://bit.ly/CRA-PWA'
);
});
}else{
//Isnotlocalhost.Justregisterserviceworker
registerValidSW(swUrl,config);
}
});
}
}
functionregisterValidSW(swUrl,config){
navigator.serviceWorker
.register(swUrl)
.then(registration=>{
registration.onupdatefound=()=>{
constinstallingWorker=registration.installing;
if(installingWorker==null) {
return;
}
installingWorker.onstatechange=()=>{
if(installingWorker.state==='installed'){
if(navigator.serviceWorker.controller){
//Atthispoint,theupdatedprecachedcontenthasbeenfetched,
//butthepreviousserviceworkerwillstillservetheolder
//contentuntilallclienttabsareclosed.
console.log(
'Newcontentisavailableandwillbeusedwhenall'+
'tabsforthispageareclosed.Seehttps://bit.ly/CRA-PWA.'
);
//Executecallback
if(config&&config.onUpdate){
config.onUpdate(registration);
}
}else{
//Atthispoint,everythinghasbeenprecached.
//It'stheperfecttimetodisplaya
//"Contentiscachedforofflineuse."message.
console.log('Contentiscachedforofflineuse.');
//Executecallback
if(config&&config.onSuccess){
config.onSuccess(registration);
}
}
}
};
};
})
.catch(error=>{
console.error('Errorduringserviceworkerregistration:',error);
});
}
functioncheckValidServiceWorker(swUrl,config){
//Checkiftheserviceworkercanbefound.Ifitcan'treloadthepage.
fetch(swUrl,{
headers:{'Service-Worker':'script'},
})
.then(response=>{
//Ensureserviceworkerexists,andthatwereallyaregettingaJS file.
constcontentType=response.headers.get('content-type');
if(
response.status===404||
(contentType!=null&&contentType.indexOf('javascript')===-1)
){
//Noserviceworkerfound.Probablyadifferentapp.Reloadthepage.
navigator.serviceWorker.ready.then(registration=>{
registration.unregister().then(()=>{
window.location.reload();
});
});
}else{
//Serviceworkerfound.Proceedasnormal.
registerValidSW(swUrl,config);
}
})
.catch(()=>{
console.log(
'Nointernetconnectionfound.Appisrunninginofflinemode.'
);
});
CONCLUSION:
Handwriting apps play a pivotal role in bridging the gap between traditional pen-and-paper methods and modern digital solutions. They facilitate digital note-taking, artistic expression, and streamlined workflows in various domains, including education, design, and personal productivity. As society becomes increasingly reliant on digital tools, the demand for versatile, efficient, and accessible handwriting solutions has grown exponentially. Traditional handwriting tools, such as physical notebooks, often fall short in offering the adaptability and convenience that digital solutions provide. On the other hand, web-based handwriting apps eliminate the need for platform-specific installations, ensuring accessibility from any device with an internet connection. Such apps also cater to diverse user needs by offering extensive customization options, including different pen styles, colours, and export functionalities.
REFERENCE
Gaurav Pratap Singh Chauhun, Suman Rani*, An Overview of the 3-IN-1 TEXT TOOLS And Its Application, Int. J. Sci. R. Tech., 2025, 2 (5), 195-207. https://doi.org/10.5281/zenodo.15363797
10.5281/zenodo.15363797
