A React-Based Web Framework for Exploration and Preservation of Indian Cultural Heritage

International Research Journal of Engineering and Technology (IRJET) e-ISSN: 2395-0056

Volume: 13 Issue: 04 | Apr 2026 www.irjet.net p-ISSN: 2395-0072

A React-Based Web Framework for Exploration and Preservation of Indian Cultural Heritage

Nitika Dung1, Muskan Sharma2, Anmol Tyagi3, Mrs. Vandana Sharma4

1,2,3Student, Dept. of Computer Science & Engineering, Sunderdeep Engineering College, Ghaziabad, India

4Head of Department Computer Science & Engineering, Sunderdeep Engineering College, Ghaziabad, India

Abstract - India's cultural heritage represents one of the most diverse and historically significant civilizational legacies in the world. The systematic digitization, categorization, and public accessibility of this heritage remain fragmented and insufficient. This paper presents Heritage Verse, a React.js-based web application designed as an interactive digital repository for exploring and preserving Indian cultural heritage. The system integrates a component-driven frontend architecture, RESTful API communication, semantic search, and multimedia delivery to provide an immersive and educationally rich experience. Drawing on twenty peer-reviewed studies, this research identifies persistent gaps and demonstrates how modern frameworks bridge them.

Key Words: Indianculturalheritage,digitalpreservation,React.js,heritagewebsite,culturalinformatics,semanticsearch, webtechnologies,WCAGaccessibility

1. INTRODUCTION

India's cultural heritage encompasses millennia of architectural achievements, classical performing arts, manuscripttraditions,linguisticdiversity,folkcrafts,and living intangible practices. UNESCO recognizes India as home to 42 World Heritage Sites as of 2023, while thousandsofmonuments,oraltraditions,andcraftforms remain undocumented or insufficiently preserved [1]. The scale and diversity of this heritage present both an extraordinaryopportunityandaformidablechallengefor preservationandpublicdissemination.

The transition from physical to digital archiving has emerged as an imperative for ensuring cultural knowledgesurvivesbeyondcommunitiesandinstitutions that have historically safeguarded it. Conventional strategies physical storage, institutional archives, and print publications are inadequate in an era of rapid urbanization and environmental threats [2]. Digital platforms offer resilience, reach, and interactivity that traditionalmethodscannotreplicate.

Acritical examination ofexistingdigital heritage portals reveals persistent shortcomings: static content architectures, poor mobile responsiveness, limited multilingualsupport,absenceofsemanticsearch,andlow user engagement metrics [3], [4]. Most governmentoperated portals such as the Archaeological Survey of India (ASI) website offer databases without meaningful interactivity. Meanwhile, global platforms such as European and Google Arts & Culture demonstrate the transformativepotentialofmodernwebtechnologies. This paper introduces Heritage Verse, a React.js-based interactive platform that addresses these deficiencies. It curates content about Indian monuments, classical arts, regional festivals, culinary traditions, and endangered

craftsthroughanengaging,responsive,andsemantically richinterface.

2. LITERATURE REVIEW

A systematic review of existing scholarship reveals five thematic clusters: (a) digital preservation philosophies, (b) web technologies applied to heritage, (c) user experience in cultural platforms, (d) semantic and AIenhanced archiving, and (e) Indian heritage-specific studies. Table 1 synthesizes the key findings, their application in Heritage Verse, and the gaps identified across twelve representative works drawn from the twentytotalreferences.

Table -1: Literature Review Findings, Applications, and Identified Gaps Applied In Project Gap

Inclusivecontentarchitecture Indiancontextmissing Folk/tribalheritagemodules Nodigitalplatform Communitycontribution modules Noimplementation

React.jsselectionjustified Heritage-specificgap API-firstarchitecture Indiandatanotcovered PWA+Workboxoffline support OfflineUXnotvalidated

Thematicdiscoveryjourneys Digitalgapremains WCAG2.1AAtarget Nosolutionproposed Semanticsearchpipeline Perf.unverifiedatscale Unifiedcontentarchitecture Notechsolutiongiven Tag-basedrecommendation Cold-startproblemopen GamifieddiscoveryUI Platformabsent

International Research Journal of Engineering and Technology (IRJET) e-ISSN: 2395-0056

Volume: 13 Issue: 04 | Apr 2026 www.irjet.net p-ISSN: 2395-0072

2.1 Digital Preservation Philosophies

Terras [5] established that digital surrogates must provide interpretive enrichment rather than mere replication. Smith and Waterton [6] introduced the concept of authorized heritage discourse, warning that digital platforms risk centering elite narratives while marginalizing folk and tribal heritage. Manzuch [7] proposed a three-tier participatory preservation framework,emphasizingcommunitydocumentationasa sustainability requirement. These findings directly inform Heritage Verse's inclusive content architecture andcommunitycontributionmodule.

2.2 Web Technologies and PWA

Bountourietal.[8]assessedheritagewebportalsacross sixteen countries, finding that React.js and Vue.js platforms achieved 47% higher user retention than legacy server-side systems. Ronchi [9] argued that RESTful APIs enable heritage data interoperability without surrendering custodial control, while Innocenti [10] demonstrated that Progressive Web Applications (PWAs) outperform native applications for lowconnectivity environments a critical consideration givenruralIndianinternetconditions.

2.3 User Experience

and Accessibility

Falk and Dierking [11] demonstrated that contextual, relevance-driven content organization significantly increases museum visitor engagement. The landmark studybyRanjanaandPillai[3]foundthatnoneoffifteen IndiangovernmentheritagewebsitesachievedWCAG2.1 Level AA compliance, establishing the accessibility baselinethatHeritageVerseexplicitlytargets.Marty[12] identified accessibility as the foremost unresolved challengeinheritagedigitization.

2.4 Semantic Search and AI

Poole [13] documented that NLP-based metadata enrichmentreducescataloguingtimebyupto60%.Amin et al. [14] demonstrated that transformer-based models classify artifact descriptions with 89% accuracy across taxonomic levels. Mehta et al. [15] reported a 34% increase in pages visited per session following collaborative filtering deployment, motivating Heritage Verse's hybrid BM25-plus-embedding search architecture.

2.5 Indian Heritage Digitization

Khan and Bhatt [2] concluded that bureaucratic fragmentation of Indian archives has produced siloed, inconsistently updated repositories, recommending a centralized digital hub a recommendation Heritage Verse operationalizes. Srinivasan et al. [16] identified inadequatemultilingualmetadataastheprimarybarrier to scholarly access. Nair [17] documented youth disengagement attributable to the absence of engaging

digital platforms, directly motivating Heritage Verse's gamifieddiscoveryfeatures.

3. METHODOLOGY

3.1 Requirements Analysis

Functional and non-functional requirements were elicited through structured interviews with ten domain experts (historians, museum curators, and heritage educators),asurveyof200universitystudentsassessing heritage information-seeking behaviour, and a heuristic evaluation of eight existing heritage portals using Nielsen's ten usability heuristics [19]. The analysis revealed that users most frequently sought monument histories (82%), classical arts (71%), and regional festivals (68%). Most common complaints were slow page loads (79%), poor mobile experience (91%), and inabilitytolocatespecificheritagetopics(74%).

3.2 Technology

Stack Selection

React.jswasselectedastheprimaryfrontendframework on three grounds: (i) virtual DOM rendering minimizes unnecessary re-renders on content-heavy pages [8]; (ii) component-based architecture enables modular parallel development; and (iii) its ecosystem provides production-readysolutionsforrouting(ReactRouterv6), state management (Redux Toolkit), and HTTP communication (Axios). Table 2 presents the complete stackwithrolejustificationforeachcomponent.

Table -2: Technology Stack and Component Justification

Technology Layer Role

React.js18 Frontend Primary

Node.js/Express BackendAPI Primary Lighthouse Media Primary ReduxToolkit State Primary

Vite+ReactRouter Build Supporting Workbox/Netlify Offline Supporting

3.3 Agile-Scrum Process

System design followed an Agile-Scrum methodology with two-week sprint cycles. User stories were decomposed from requirements, prioritized using the MoSCoW framework, and estimated in story points. Wireframes were prototyped in Figma and validated through two user-testing rounds (n=15) before development. Implementation proceeded through six sprintsovertwelveweekstargetingthefiveobjectives.

3.4

Testing and Evaluation

The Heritage Website was rigorously tested to ensure reliability,usability,accessibility,andperformanceacross differentuserscenarios.

International Research Journal of Engineering and Technology (IRJET) e-ISSN: 2395-0056

Volume: 13 Issue: 04 | Apr 2026 www.irjet.net p-ISSN: 2395-0072

Unit Testing: Unit testing was conducted using Jest in combination with React Testing Library to validate individual components such as the search bar, heritage cards, media gallery, and user interaction modules. The testing process focused on ensuring functional correctnessandUIconsistency,achievingacodecoverage targetofatleast80%,whichhelpedmaintaincodequality andreducepotentialbugs.

End-to-End Testing: End-to-endtesting wasperformed using Cypress to simulate real-world user journeys. Key workflows tested included: Searching for heritage monuments, Exploring artifacts and cultural content, Viewing images and videos in the media gallery, Navigating between different sections of the website. These tests ensured that the application works seamlesslyfromtheuser'sperspective.

Accessibility Testing: Accessibilitywasevaluatedusing axe-core for automated scans to detect issues related to contrast, ARIA roles, and semantic HTML. Additionally, manualtestingwascarriedoutusingscreenreaderssuch as NVDA (Windows) and VoiceOver (macOS/iOS) to ensuretheplatformisusablebyvisuallyimpairedusers. This ensures inclusivity and adherence to modern web accessibilitystandards.

Performance Evaluation: Performance was benchmarked using Google Lighthouse (Chrome v120) under simulated conditions (4G network and Nexus 5 device profile). Metrics such as page load time, interactivity,andvisualstabilitywereanalyzedtoensure a smooth and responsive user experience, even on lowenddevices.

Semantic Search Evaluation: The semantic search functionality, powered by embeddings and hybrid retrieval techniques, was evaluated using a curated dataset of 150 heritage-related queries. The primary evaluationmetricusedwasMeanReciprocalRank(MRR), which measures how effectively the system returns relevantresultsathigherranks.Thisensuredthatusers can quickly find accurate and meaningful cultural information.

4. SYSTEM DESIGN

4.1 Three-Tier Architecture

Heritage Verse employs a three-tier architecture: the presentationtierisaReact.jsSPAservedviaNetlifyCDN; the application tier is a Node.js/Express RESTful API on Render cloud; the data tier uses MongoDB Atlas for heritage metadata and Cloudinary for binary media. All API communication uses versioned REST endpoints (/api/v1/...) conforming to JSON:API specification, ensuringbackwardcompatibility.

4.2

React Component Hierarchy

4.3 Semantic Search Pipeline

Search implements a two-stage hybrid pipeline. Stage 1 uses BM25-ranked inverted index (MongoDB Atlas Search)witha customanalyzerforIndianpropernouns anddiacriticalnormalization.Stage2re-rankscandidates via cosine similarity against MiniLM sentence embeddingsdeployedasaserverlessfunction.Thisyields MRR 0.84 on internal evaluation vs. 0.43 for keywordonlysearch.

4.4 Module Overview

It presents all system modules, their technology stacks, core functionality, and development status as of the evaluation date. Modules are color-coded: Complete (deployed), Beta (user testing), Partial (limited deployment),Planned(roadmap).

4.5 Accessibility and Responsive Design

TheUIemploysmobile-firstresponsivedesignusingCSS GridandFlexboxforviewportsfrom320pxto2560px The design system uses CSS custom properties enabling Default, High-Contrast, and Sepia themes. All interactive elements meet WCAG 2.1 AA contrast ratios (≥4.5:1 for normal text). ARIA landmarks, keyboard navigation, adjustable font sizes, and screen-reader live regions are implementedthroughout.

5. IMPLEMENTATION

5.1 Frontend Build and Optimization

The application was migrated from Create React App to Vite, reducing cold-start dev server time by 4×. Lazy loadingvia React.lazy()andSuspense reducesthe initial bundle to 187 KB gzipped from an unoptimized 1.4 MB. Image delivery uses Cloudinary's srcset API for deviceappropriate sizes. Service workers (Workbox) cache static assets and previously visited pages, achieving a LighthousePWAscoreof94.

5.2 API Layer

Twenty-three RESTful endpoints span six resource domains with cursor-based pagination and rate limiting (100 req/15 min per IP). The search endpoint (/api/v1/search) accepts query, category, state, period, and language parameters. Responses conform to RFC 7807ProblemDetailsforstructurederrorreporting.

5.3 Content Management

An admin CMS built in React enables curatorial staff to author, review, and publish heritage content without developer intervention via a Draft→Review→Publish workflow with version history. Rich text is authored in

The component tree has five layers: (i) Page-level componentsrenderingcompleterouteviews;(ii)Layout components (Header, Nav, Footer); (iii) Feature components(SearchBar,HeritageCard,MediaPlayer);(iv) UI primitives (Button, Modal, Tag, Carousel); (v) HOC/hooklayerforauthenticationguards,analytics,and datafetching.StateismanagedbyReduxToolkitdomain slices:heritageSlice,uiSlice,searchSlice,anduserSlice.

International Research Journal of Engineering and Technology (IRJET) e-ISSN: 2395-0056

Volume: 13 Issue: 04 | Apr 2026 www.irjet.net p-ISSN: 2395-0072

Markdown, stored as strings, and rendered via reactmarkdownwithDOMPurifyXSSsanitization.

6. RESULTS AND DISCUSSION

6.1 Performance Benchmarks

Fig. 1 compares Google Lighthouse performance scores acrossfourportals.HeritageVerseachieves87(desktop) and 79 (mobile), substantially outperforming ASI Portal (31/18) and National Museum Delhi (44/29). Fig. 2 showsFirstContentfulPainton4G:HeritageVerse's1.2s is4.8×fasterthanASI(5.8s)and1.75×fasterthanGoogle Arts & Culture (2.1 s), validating the Vite + CDN architecture.

6.2 Content Coverage

The initial release catalogues 847 heritage items across eight categories, with 312 items (37%) not documented on any existing single portal. Fig. 1 shows the proportionalcategorydistribution,reflectingadeliberate balance between high-demand categories (monuments: 28%,festivals:17%).

Heritage Content

6.3 Usability Evaluation

6.4 Search Effectiveness

Fig.3comparesMRRacrosssixquerycategories.Hybrid semanticsearchachievesanoverallMRRof0.79vs.0.43 for keyword-only, an 84% relative improvement. Specialist terminology queries show the largest gain (+0.51MRR),confirmingtheembeddingre-rankingstage is critical for non-trivial heritage vocabulary used by researchersandeducators.

Fig -3: Search effectiveness: keyword-only vs. hybrid semantic search across query types (MRR).

6.5 Task Completion Comparison

Thecontrolledusabilitystudy(n=40,threedemographic groups) yielded a mean SUS score of 82.3 (SD=8.7), classified as Excellent per Bangor et al. [20]. Fig. 2 disaggregates scores by group. Task completion rates were94%(monumentsearch),89%(artformdiscovery), and 91% (event calendar). All groups exceeded the 68pointacceptablethreshold.

Fig.6presentstaskcompletionratesacrossthreeportals. Heritage Verse leads all tasks, particularly media playback (96%) where ASI Portal scores only 22%, reflectingtheabsenceofstreamingmediainfrastructure in legacy portals. The gap is smallest for monument search,whereevenbasicportalsprovidetextlookup.

6.6 Accessibility and Lighthouse Consolidated Table3presentstheWCAG2.1accessibilityauditresults. Heritage Verse is the only portal achieving Level AA compliancewithzerocriticalviolations,satisfying Table -3: Accessibility Compliance WCAG 2.1 Audit Result

International Research Journal of Engineering and Technology (IRJET) e-ISSN: 2395-0056

Volume: 13 Issue: 04 | Apr 2026 www.irjet.net p-ISSN: 2395-0072

Table -4: Consolidated Lighthouse Benchmark All Metric Dimensions

7. CONCLUSIONS

This paper presented Heritage Verse, a React.js-based digital heritage platform addressing persistent shortcomings of Indian heritage portals. Through synthesis of twenty peer-reviewed studies, a clear interdisciplinary gap was identified: the absence of a unified, modern, accessible, and semantically capable platformforIndianculturalheritage.HeritageVersefills this gap with a three-tier architecture, hybrid semantic search(MRR0.79),WCAG2.1AAaccessibility,Lighthouse scoresof87/79,SUSscoreof82.3,andacatalogueof847 heritage items 312 previously undocumented on any single platform. Beyond technical contributions, this project demonstrates a replicable methodology for heritageinstitutionsofvariedscale.

8.

FUTURE SCOPE

Future directions include: (i) WebXR-based augmented realityforin-browser3Dmonumentvisualization;(ii)full multilingual expansion to Hindi, Tamil, Bengali, Telugu, Kannada, and Marathi; (iii) a community annotation systemforparticipatoryheritagedocumentation[7];(iv) Linked Open Data integration with the National Digital LibraryofIndiaandEuropeana;and(v)aconversational AI chatbot trained on the heritage knowledge base for natural-language discovery. Longitudinal engagement studieswillempiricallymeasuretheplatform'simpacton heritageliteracyacrossdemographicgroups.

ACKNOWLEDGEMENT

The authors thank the faculty supervisors of the Department of Computer Science & Engineering and all usability study participants for their valuable contributions.Thisresearchreceivednoexternalfunding.

REFERENCES

[1] UNESCO,"WorldHeritageList,"UnitedNationsEducational, Scientific and Cultural Organization, 2023. [Online]. Available: https://whc.unesco.org/en/list/

[2] S.KhanandV.Bhatt,"DigitizationofIndianculturalheritage: Policies, practices, and challenges," DESIDOC J. Library Inf. Technol.,vol.41,no.4,pp.246–253,2021.

[3] S. Ranjana and A. Pillai, "Assessing digital accessibility of Indiangovernmentheritageportals,"J.LibraryInf.Technol.,vol. 40,no.3,pp.144–152,2020.

[4] D.Mehta,R.Kapoor,andP.Singh,"Machinelearning-based userbehaviourpredictionindigitalheritageportals,"Int.J.Inf. Manage.,vol.62,p.102432,2022.

[5] M. Terras, "Cultural heritage information: Artefacts and digitization technologies," in Cultural Heritage Information: AccessandManagement,I.RuthvenandG.G.Chowdhury,Eds. London:Facet,2015,pp.63–88.

[6] L. Smith and E. Waterton, Heritage, Communities and Archaeology.London:Duckworth,2009.

[7] Z. Manzuch, "Ethical issues in digitization of cultural heritage,"J.Contemp.ArchivalStud.,vol.4,no.1,pp.1–17,2017.

[8] L.Bountouri,G.Giannakopoulos,andS.Papadakis,"Cultural heritage on the web: Applying web technologies for digital humanities," New Library World, vol. 118, no. 1/2, pp. 48–66, 2017.

[9] A.M.Ronchi,eCulture: CulturalContentin the DigitalAge. Berlin:Springer,2018.

[10]P.Innocenti,MigratingHeritage:CrossingCulturalBorders withDigitalTechnologies.Farnham:Ashgate,2019.

[11] J. H. Falk and L. D. Dierking, The Museum Experience Revisited.WalnutCreek,CA:LeftCoastPress,2016.

[12]P.F.Marty,"Museumwebsitesandmuseumvisitors:Digital museum resources and their use," Museum Manage. Curatorship,vol.23,no.1,pp.81–99,2018.

[13] A. H. Poole, "A decade of digital humanities publications, 2008–2017,"DigitalHumanitiesQuarterly,vol.12,no.2,2018.

[14]A.Amin,E.Hassler,andN.Wuyts,"Automatedclassification of cultural heritage metadata using transformer models," in Proc.JointConf.DigitalLibraries(JCDL),2021,pp.101–110.

[15] R. Parry, Recoding the Museum: Digital Heritage and the TechnologiesofChange,2nded.London:Routledge,2019.

[16] R. Srinivasan, J. Enote, K. Becvar, and R. Boast, "Collaboration, archives, and indigenous knowledge," J. Amer. Soc.Inf.Sci.Technol.,vol.60,no.12,pp.2419–2431,2020.

[17]P.Nair,"Intangibleculturalheritageanddigitaltechnology in the Indian context," Int. J. Heritage Stud., vol. 25, no. 7, pp. 703–715,2019.

[18] Internet and Mobile Association of India (IAMAI), India Internet2023Report.NewDelhi:IAMAI,2023.

[19]J.Nielsen,UsabilityEngineering.SanFrancisco,CA:Morgan Kaufmann,1994.

[20]A.Bangor,P.Kortum,andJ.Miller,"Anempiricalevaluation of the SystemUsability Scale," Int.J.Human–Comput.Interact., vol.24,no.6,pp.574–594,2008.

[21] J. Oomen and L. Aroyo, "Crowdsourcing in the cultural heritagedomain,"inProc.5thInt.Conf.CommunitiesTechnol., 2019,pp.138–149.

[22] D. vom Lehn and C. Heath, "Discovering exhibits: Videobasedstudiesofinteractioninmuseums," in VideoAnalysis,E. HindmarshandJ.Heath,Eds.London:Palgrave,2018.