https://github.com/ghadaabassi/art_gallery_project
React application that allows users to explore the diverse collection of artworks from the Art Institute of Chicago
https://github.com/ghadaabassi/art_gallery_project
art-institute-of-chicago-api bootstrap css html javascript reactjs threejs
Last synced: 2 months ago
JSON representation
React application that allows users to explore the diverse collection of artworks from the Art Institute of Chicago
- Host: GitHub
- URL: https://github.com/ghadaabassi/art_gallery_project
- Owner: ghadaabassi
- Created: 2024-05-12T09:40:54.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-09-19T11:35:41.000Z (almost 2 years ago)
- Last Synced: 2025-07-15T00:16:32.990Z (11 months ago)
- Topics: art-institute-of-chicago-api, bootstrap, css, html, javascript, reactjs, threejs
- Language: JavaScript
- Homepage:
- Size: 23.4 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Art Gallery
The objective of this project is to create a multi-component React application that allows users to explore the diverse collection of artworks from **the Art Institute of Chicago**.
## I.The Art Institute of Chicago's API
The Art Institute of Chicago, established in 1879, is one of the oldest and largest art museums in the United States, located in Chicago, Illinois.
The Institute is popular for its vast collection of works from diverse periods and cultures, including notable works by Monet, Van Gogh, and Grant Wood.
The Art Institute of Chicago's API provides access to the institute's art collection data, including information on artworks, artists, and exhibitions.
Data is accessible via HTTP requests and returned in JSON format. For this project, we used the endpoint that retrieves information about artworks.
## II. Role of Each Component
**App:** The main component that manages the global state of the application and
orchestrates other components.
**NavBar:** Component for the application's navigation bar, including search functionality
and 3D visualization.
**InputWithLabel:** Reusable component for input fields with labels.
**Artworks:** Component responsible for fetching data from the API, filtering, and displaying a list of artworks.
**Artwork:** Reusable component that displays the details of an individual artwork and
allows removal of artworks.
**Flower:** Reusable component that represents a 3D flower with rotating animation.
We used also:
**CSS Stylesheets:** App.css, ArtCard.css and NavBar.css to custom styles for the application.