A little background: 'Salon' means living room. Salon-style is a way to display art, referring to the secular style primarily used for interiors of private residences. Roccoco, sometimes known as late-baroque, began in the 1730's as a reaction against formal and all too geometric display. Rocaille was a method of decoration that was used with cememnt and seashells to decorate fountains and grottos, thus the term "Roccoco style". Art would be displayed in a random fashion on a wall to accentuate it's authenticity.
This app generates a wall of art based upon terms fed into it. There are so many possibilities, as its API is the Metropolitan museum in New York City and the API hosts 43,000+ artworks to sort. Please enjoy Roccoco de l'eau, a tribute to the place where handheld devices are used when free time is actually available.
Can be accessed via it's heroku deployment for immediate enjoyment: Roccoco
Otherwise for development:
- In your terminal, clone this repository by running
git clone https://github.com/percworld/Rococo.git
- Run the command
npm install
- Run
npm start
- In your browser navigate to http://localhost:3000/
- This collection of art from the Met is populated by three terms already in storage.
- As a user, you have a favorites area you may visit with the button on the top right.
- At any point, you may revisit the home screen by clicking on the logo on the top left. Click it a few times as you enjoy the tour of this particular floor until you find a pice you really like.
- When an item is clicked on, you will be directed to a page that gives full details and an enlarged image to view.
- Here in the piece's detail view lies your favoriting area. If you wish to include this piece in your own wall, you may choose it now. If a piece is already favorited, you have the choice to unfavorite using the updated "remove from favorites" button.
- When favorites are viewed by clicking "My favorites" button from the header, you will see your own personal collection of art. As your favorites grows, this view can become a more and more unique wall with each click of the wall-rendering logo.
- Search Options: The button entitled "Search Terms" takes you to a screen that allows you to type in two words to create your own search. The possibilities are endless even with only this simple mechanism. Search a few words and start your journey through the Met by submitting them and refreshing the wall to display your search.
In this project, I researched and included React's built-in Context API and Reducer to apply state to a global context available to each Component and everywhere that gets wrapped in the Context Provider. It was a lot to take on at first but very rewarding. The initial state gets updated by way of dispatching actions with a payload to the reducer. React hooks are used less frequently in a build like this but are still available for use in Component updating. Here is some of the technology I have used in this App:
- React Hooks
- React Context API
- API Courtesy of the Metropolitan Museum
- Testing with Cypress