Browse and search Whitney's collection of over 25,000 artworks.
URL: [removed]
MeiliSearch is hosted on an AWS EC2 instance
Frontend is hosted on Vercel
- Download and launch MeiliSearch. This app works with MeiliSearch v0.20
- Duplicate
.env.example
as.env
and specify theMEILISEARCH_HOST
value - Run in terminal:
npm install
npm run start # to index a dataset
npm run serve # to launch an app
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>
to100's
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.
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.
- 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