Arte

Classical Art Bureau & Interactive Curatorial Archive

React 19ViteTailwindCSSReact Router 7Framer MotionWeb Audio APIThe Met APILocalStorage

GitHub Repository Live Platform

↳ 360° orbit gallery + full CRUD curation + bilingual support + Web Audio API

Engineering Scope

Problem & System Purpose

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

SpecificationZero-Latency Web Audio API

Specification100% Client-Side Offline Persistence

Architecture Blueprint

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.

Execution Data Pipeline

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

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

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

04.LocalStorage Atomic Persistence & Web Audio API Sound Feedback

Subsystem Decomposition

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 Production Case

Vanguard IELTS

A1 to C1 Academic IELTS Preparation & SRS Platform

Explore Next Case