Whitney Museum of American Art — Artworks

Browse and search Whitney's collection of over 25,000 artworks.

View online

URL: [removed]
MeiliSearch is hosted on an AWS EC2 instance
Frontend is hosted on Vercel

Local setup

Prerequisites

• Node.js and npm

Setup

1. Download and launch MeiliSearch. This app works with MeiliSearch v0.20
2. Duplicate .env.example as .env and specify the MEILISEARCH_HOST value
3. Run in terminal:

npm install
npm run start # to index a dataset
npm run serve # to launch an app

Dataset

This app is based on a dataset distributed by Whitney under the CC0 License. It can be found in the museum's Open Access repository.

For use in this project the dataset has been converted to JSON and adapted. Changes:

• All <br> tags have been removed
• For element ID 61726, the title has been changed from <span style=\"color:green;\">100's</span> to 100's

Search engine

This app uses the MeiliSearch search engine (and the MeiliSearch Vue UI library).

Search settings
Searchable attributes, displayed attributes:

'artists',
'title',
'display_date',
'classification',
'medium',
'accession_number',
'dimensions',
'publication_info',
'edition',
'creidt_line',
'credit_line_repro',

Other settings haven't been customized.

Screen recordings/Screenshots

Navigation:

01.mov

Search:

02.mov

Accessibility test*:

*To further optimize for accessibility, remove autofocus from the search bar.

Note: some details may have changed since the time these recordings/screenshots were made.

Todo

• Add debounce to the input
• Find a good way to show overflown text
• Optimize the initial loading UI. In addition to the title, also display a search bar and a table header while the data is loading
• Highlight pieces of text in the table that match the query