This web application was created with the objective of using collate art information from multiple sources and allow a user to create their own collection/exhibitions. An online version of ArtiQuest may be found at [https://artiquest.netlify.app]
How to install & run the ArtiQuest
As stated in the project background, the web-based application is designed to allow a user to create their own collections/exhibits from across multiple eras, medium, etc.
ArtiQuest allows the user to search artwork from across two API sources. It allows the user to filter the results received and view more in-depth information on a specific artwork.
ArtiQuest was created using the following frameworks and plugins: Firebase for a non-relational back end solution and React for the front end. The Cleveland Museum of Art Open Access API [https://openaccess-api.clevelandart.org/] and The Metropolitan Museum of Art Collection API [https://metmuseum.github.io/] for the artwork information. Axios is used to fetch data from the two APIs. TailwindCSS is used to develop/create the CSS for the project. Here is a list of the resources used.
- Axios
- Firebase
- React-icons
- React Router
- TailwindCSS
More information on the above can be found in our Links.
To run ArtiQuest locally, you will need to clone the repo:
git clone https://github.com/EmoryBrock/ArtExhibitCurator.git
Once cloned, navigate to the "ArtExhibitCurator" folder inside the project folder and install the necessary dependencies:
npm install
This should update your local repo with all the dependencies needed to run ArtiQuest.
In case you are still missing dependencies, I have listed the individual ones below:
Axios
npm i axios
Firebase
npm install --save firebase
React Icons
npm install react-icons --save
React Router
npm install react-router-dom@latest
TailwindCSS
npm install -D tailwindcss postcss autoprefixer
With the dependencies installed, you are now ready to create the .env file for your local application. Place this file in the first level of the Front End folder and copy the below text block into it. This will allow you to connect to the Firebase database for ArtiQuest.
To start the using ArtiQuest, confirm that you have navigated in your terminal to the ArtCurator folder. There you will enter the following prompt
npm run dev
Follow the prompts to view the application in a web browser.
When first accessing ArtiQuest, the user will be asked to Sign In or Sign Up via the buttons provided.
For a new user, the user will select Sign Up. On this screen, the user will need to provide a email and password. Both of these have validation checks. Upon completion, the user will click on "Click Here to Proceed". ArtiQuest will then redirect the user to the sign in page and the process will be the same as an existing user.
For a returning user, the user will select Sign In. On this screen the user will need to provide their username and password credentials and click on the Click Here to Proceed button. From here, ArtiQuest will navigate the user to the Profile page.
On the Home page the user will have the ability to navigate across the entire site using the navigation bar. Additionally the user can search for artwork by clicking on the Search.
To look for a particular artwork, the user can enter a search text into the search bar and choose the type of search - General, Title or Artist. Click magnifying glass and ArtiQuest will return a list of artworks related to the search terms. The user can click the artwork card to be taken to a page with more information about the artwork.
The show card for each artwork displays the following information:
- image of the artwork (or no image picture)
- artist name
- date of artwork
Each card is clickable and will take the user to a page with more information that artwork.
This page contains the a user's curated collections displayed as exhibits. The exhibits are organised as follows:
- Exhibit Name (defined by user)
- Artwork show cards as detailed in the Search description
When logged in, a user can remove artwork from an exhibit using the remove button and also delete the entire exhibit with the "Remove Exhibit" button.
Here are some features for future considerations:
- Add a User Profile page that allows the user to update passwords and a avatar
- Add the ability for a user to view the image in a larger window
- Add a Artist focused detail page for information about the artist
- Add a "Similar Artwork Section" below the artwork info on the Artwork Detail page
- Add the ability for a user to add artwork via the search results -if user is signed in
| Axios | https://axios-http.com/ |
| Firebase | https://firebase.google.com/ |
| React Icons | https://react-icons.github.io/react-icons/ |
| React Router | https://reactrouter.com/en/main |
| TailwindCSS | https://tailwindui.com/ |
Readme version 1.0