World Archive

A gallery browser for artworks from the Art Institute of Chicago.

The app loads artwork metadata from the public Artic API, displays thumbnails in a horizontal carousel, and pairs the active piece with a CSS column layout of related frames. Components are split into small, composable pieces for the header, carousel, and frame view.

Live demo: jeds-world-archive.vercel.app

Tech stack

Frontend: React, Vite, Tailwind CSS, Motion
API: Art Institute of Chicago public API

Features

• Paginated artwork loading from the Art Institute of Chicago API
• Horizontal carousel with active-item tracking
• CSS column gallery with skeleton loading states
• Batched fetching to limit re-renders during background loads
• Motion-powered interactions

Prerequisites

• Node.js 20+
• npm

Getting started

git clone https://github.com/jvchi/world-archive.git
cd world-archive
npm install
npm run dev

Open http://localhost:5173.

Build

npm run build
npm run preview

Note

Artwork data is fetched at runtime from https://api.artic.edu. An internet connection is required.

Project structure

src/
  components/
    header.jsx         # page header
    Carousel.jsx       # thumbnail carousel
    Frame.jsx          # active artwork and column layout
    data.js            # local frame metadata
  App.jsx              # API fetching and state orchestration
  main.jsx