Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/stuymedova/whitney-artworks
Browse and search Whitney’s collection of over 25,000 artworks
https://github.com/stuymedova/whitney-artworks
dataset instantsearch meilisearch search vue whitney
Last synced: 25 days ago
JSON representation
Browse and search Whitney’s collection of over 25,000 artworks
- Host: GitHub
- URL: https://github.com/stuymedova/whitney-artworks
- Owner: stuymedova
- Created: 2021-06-05T12:21:04.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-06-02T12:34:26.000Z (over 1 year ago)
- Last Synced: 2024-11-11T12:44:01.457Z (3 months ago)
- Topics: dataset, instantsearch, meilisearch, search, vue, whitney
- Language: SCSS
- Homepage:
- Size: 1.75 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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](https://nodejs.org/) and [npm](https://www.npmjs.com/)
### Setup
1. [Download and launch MeiliSearch](https://docs.meilisearch.com/learn/getting_started/installation.html). This app works with MeiliSearch v0.20
2. Duplicate `.env.example` as `.env` and specify the `MEILISEARCH_HOST` value
3. Run in terminal:
```shell
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](https://github.com/whitneymuseum/open-access/).
For use in this project the dataset has been converted to JSON and adapted. Changes:
- All `
` tags have been removed
- For element ID `61726`, the title has been changed from `100's` to `100's`
## Search engine
This app uses the [MeiliSearch](https://www.meilisearch.com) search engine (and the [MeiliSearch Vue](https://github.com/meilisearch/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:
https://user-images.githubusercontent.com/53351370/123099619-07907a00-d43b-11eb-9069-ffc6c833c0a0.mov
Search:
https://user-images.githubusercontent.com/53351370/123099647-0eb78800-d43b-11eb-9155-013bc0925d35.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