Back to Index
Full-Stack Web
2026·Completed

Arte

Classical Art Bureau & Interactive Curatorial Archive

React 19ViteTailwindCSSReact Router 7Framer MotionWeb Audio APIThe Met APILocalStorage
Arte
GitHub RepositoryLive Platform
↳ 360° orbit gallery + full CRUD curation + bilingual support + Web Audio API

My contribution

Built the React gallery, artwork create/edit forms, curator and visitor views, bilingual interface, and browser-based persistence for a React training final project.

Engineering decisions

  • Share gallery and language state through React Context so catalog filters, artwork details and editing views use the same data.
  • Keep curation in localStorage for a self-contained demo; the curator switch changes the interface and is not a server-enforced permission boundary.
  • Pause gallery motion outside the viewport and provide keyboard-operable lightbox and confirmation dialogs.

Testing & evidence

  • GalleryContext contains artwork state, curator/visitor switching, local saves and dataset reset; ArtworkForm implements create/edit validation.
  • Lightbox and ConfirmDialog contain keyboard and focus handling; CircularGallery uses IntersectionObserver to pause off-screen motion.
  • The repository README includes desktop/mobile screenshots, form-validation examples and a recorded project presentation. These are implementation evidence, not an automated accessibility audit.

Current limitations & next steps

Curation and preferences belong to the current browser and can be lost when site data is cleared. There is no shared backend, account authentication or server-enforced curator authorization. Museum image availability depends on external hosting.

Project overview

The problem it solves

Interactive classical art archive and exhibition platform powered by The Metropolitan Museum of Art Open Access collection. Built with React 19, Vite, and Tailwind CSS. Features an infinite film-strip marquee, 360° circular orbit gallery, real-time multi-filter catalog, accessible lightbox modal, dual Curator/Visitor roles, full curatorial CRUD operations with localStorage persistence, bilingual EN/ID support, and procedural sound FX via Web Audio API.

Specification33+ Curated Open Access Masterpieces
SpecificationProcedural Web Audio feedback
SpecificationLocalStorage curation state

How it works

Client-side modular SPA architecture built on React 19 and Vite with Context API state management, accessible dialogs with keyboard focus trapping, localStorage persistence, and synthetic Web Audio API feedback.

Main flow
  1. 01

    React Router v7 Client Routing & Dual Role Switcher (Curator / Visitor)

  2. 02

    Context API State Management (Artworks Data, Cart/Favorites, Bilingual i18n)

  3. 03

    Interactive Visual Showcase (360° Orbit Gallery, Lightbox, Infinite Marquee)

  4. 04

    LocalStorage Atomic Persistence & Web Audio API Sound Feedback

Key components
360° Circular Orbit Gallery

Interactive circular orbit navigation featuring viewport-aware pause optimization via IntersectionObserver.

Curatorial CRUD Engine

Accessible Create, Read, Update, and Delete forms with strict field validation, focus-trapped dialogs, and instant persistence.

Bilingual & Audio System

Full English and Indonesian dynamic translation combined with synthetic procedural sound FX via Web Audio API.

Next Project

Vanguard IELTS

A1 to C1 Academic IELTS Preparation & SRS Platform

Explore Next Case