A visual, masonry-grid browser for the Cooper Hewitt, Smithsonian Design Museum collection — 215,000+ objects of design history to scroll through for inspiration.

Built on top of the museum's public GraphQL API.

• 🖼 Masonry gallery of objects with images
• 🔎 Full-text search + filters (maker, medium, country, department, year range, sort)
• 🎲 "Surprise me" pulls a random slice of the collection when you don't know what you're looking for
• 🏷 Quick presets — Chairs, Posters, Textiles, Art Nouveau, Bauhaus, Japan, 1960s, …
• 🔍 Detail modal with full description, multiple images, maker info, credit line, and deep-link to the Cooper Hewitt website
• ♾ Infinite scroll while searching
• 🔗 URL-backed: every search state is a shareable link (?q=chair&yearFrom=1900), and every object detail has a hash route (#/object/object-5773)

Rendering mermaid diagram...

• main.tsx — Hono HTTP entrypoint. Serves /, static assets, and proxies the GraphQL API at /api/*.
• frontend/index.html — HTML shell with Twind + custom masonry CSS
• frontend/index.tsx — React bootstrap
• frontend/components/
  • App.tsx — top-level state, URL sync, infinite scroll, hash-routed modal
  • Header.tsx — title + "Surprise me" button
  • SearchBar.tsx — search field, filter panel, preset chips
  • Gallery.tsx — masonry layout + IntersectionObserver sentinel
  • Card.tsx — individual object tile
  • ObjectDetail.tsx — modal with gallery, metadata, and external links
• shared/types.ts — TS types shared between client and server
• shared/helpers.ts — formatting helpers (title, maker, date, image selection)

• GET /api/objects?q=&maker=&medium=&country=&department=&yearFrom=&yearTo=&sort=&page=&size= — search
• GET /api/object/:id — detail for one object (e.g. object-5773)
• GET /api/random — a random page of objects with images
• POST /api/graphql — raw GraphQL passthrough (body: { "query": "…" })

All images and metadata © Cooper Hewitt, Smithsonian Design Museum. Many objects are licensed CC0 — see each object's detail page for its licensing status.