https://github.com/german-cobian/art-gallery

A React-Redux app that fetches artworks from the Art Institute of Chicago's API according to the user's search criteria, displays them, and then, on the artwork of the user's choice, displays more detailed information.
https://github.com/german-cobian/art-gallery

api css html javascript react redux

Last synced: 12 days ago
JSON representation

A React-Redux app that fetches artworks from the Art Institute of Chicago's API according to the user's search criteria, displays them, and then, on the artwork of the user's choice, displays more detailed information.

• Host: GitHub
• URL: https://github.com/german-cobian/art-gallery
• Owner: German-Cobian
• License: mit
• Created: 2022-03-15T15:12:01.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2023-10-04T20:45:50.000Z (over 1 year ago)
• Last Synced: 2024-11-22T23:44:06.219Z (about 2 months ago)
• Topics: api, css, html, javascript, react, redux
• Language: JavaScript
• Homepage:
• Size: 3.85 MB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Art-Gallery

This React-Redux app fetches artworks from the [Art Institute of Chicago API](https://api.artic.edu/api/v1/artworks).

From the home page the user can input a term related to the artwork that they are searching for (could be the name of the artwork, the artist, the style, etc.).

![AIC Home](/src/assets/Screenshot1.png?raw=true "AIC Home")

The app will then render a listing of all the artworks that match the search criteria, displaying their image as well as their title and creator data. 

![Search results](/src/assets/Screenshot2.png?raw=true "Search results")

It also allows for the user to select a specific artwork by clicking on it, then goes on to display more information on that artwork ( date, type of artwork, dimensions, medium, provenance of artist, category in which the artwork is included).

![Artwork in detail](/src/assets/Screenshot3.png?raw=true "Artwork in detail")

### Live Demo

https://elaborate-sunflower-63cbfb.netlify.app/

### Video Demo of the Project

https://www.loom.com/share/d720b95281004009babba124e75916cd

### Setup and Install

* Open your terminal - Windows: `Win + R`, then type `cmd` | Mac: `Command + space`, then type `Terminal`

* Navigate to a directory of your choosing using the `cd` command

* Run this command in your OS terminal: `git clone [email protected]:German-Cobian/Artworks.git` to get a copy of the project

* Navigate to the project's directory using the `cd` command

* In the clone folder, run `npm install`

* To fire up the server run `npm start`

* Visit `http://localhost:3001/` in your browser to get into the app

## Built With

* Semantic HTML

* JavaScript

* React

* Redux

* Github workflow

* Linters(stylelint, Webhint, eslint)

## Author

👤 **German Cobian**

* GitHub: [@German Cobian](https://github.com/German-Cobian)

* Twitter: [@GermanCobian1](https://twitter.com/GermanCobian1)

* LinkedIn: [@German Cobian](https://www.linkedin.com/in/german-cobian/)

## 🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the [issues page](https://github.com/German-Cobian/Art-Gallery/issues).

## Show your support

Give a ⭐️ if you like this project!

## Acknowledgments

* Microverse

* Code reviewer(s)

* Art Institute of Chicago

* Original design idea by Nelson Sakwa

## 📝 License

[MIT licensed](https://github.com/German-Cobian/Art-Gallery/blob/main/LICENSE).