Impressionist Artworks at The Art Institute of Chicago is a coding challenge for MIT xPRO Front-End Development with React program.
This exercise has the following goals:
- Fetch, and render data from external source with React
- Have practice with Axios library
- Have practice with useEffect and useReducer React hooks
- Create client-side pagination
The data for this project is retrieved from Art Institute of Chicago API.
Impressionist Artworks at The Art Institute of Chicago project has the following features:
- Users are able to select impressionist artists from dropdown list
- List of artworks for selected artist is downloaded using Art Institute of Chicago API
- Images are downloaded using
- Data is paginated with one artwork per page
- For each artwork, title and image are displayed
- Each artwork's title is a link to the page with more detailed information about the artwork
To get the list of artworks for an artist, the following API query is used:
https://api.artic.edu/api/v1/artworks/search?q={artist}&&fields=id,title,image_id
The response looks like this:
"data": [
{
"_score": 254.86807,
"id": 16568,
"image_id": "3c27b499-af56-f0d5-93b5-a7f2f1ad5813",
"title": "Water Lilies"
}
]
To get images, the following URL is used:
https://www.artic.edu/iiif/2/{image_id}/full/843,/0/default.jpg
To run the project locally,
- Clone this repo.
cd
into current directory.- Run
index.html
on local server.