Artega is a virtual art exhibition app. It is an app that any art lover can enjoy, but it was specifically created for users who may have difficulties attending an art exhibition in person. In creating Artega, our goal was to make the experience of visiting an art exhibition accessible, easy, and enjoyable. With accessibility in mind, we focused on including large, easy to understand icons for navigation and included a text-to-speech feature for any large blocks of text so users do not have to read large amounts of text to enjoy the app.
Current features include a virtual exhibition of the Rijksmuseum, which can be enjoyed from the Gallery page. After a user visits the Gallery page, they are able to click on individual pieces of art to obtain more information about that specific piece of art. From the detailed view, a user has the ability to add favorite pieces of art to review again before leaving the virtual exhibition. Additional exhibitions from other museums can be added in future incarnations of the app.
Another feature that can be accessed from the VideoTour page are two collections of art-focused, educational videos: Learn From Masters and Great Art Explained. By allowing users to access these curated videos directly from the app, it takes the guesswork and potential frustration out of having to search through countless videos online to find content that is focused exclusively on learning about and appreciating art. The Learn From Masters collection includes videos dedicated to exploring the works and lives of some of the greatest artists in history such as Van Gogh and Michelangelo. The Great Art Explained collection includes videos dedicated to exploring some of the world's most iconic and captivating works of art, including the Mona Lisa and Klimt's The Kiss.
- React
- Express
- Node.js
- Bootstrap
- MySQL
This project was bootstrapped with Create React App.
In the source, we created a components and a pages folder.
The components folder contains 7 files which include the following: The Footer.jsx file contains the code for the footer for the entire app. The NavBar.jsx file contains the code for the navigation bar for the entire app. There are also CSS and logo files.
The pages folder contains 8 files which include the following: The Home.jsx page contains the code for the homepage, including the images for the slider and an introduction to the Artega app. The Gallery.jsx page is accessed from the navigation bar and from the Explore button in the Home page. It includes an introduction to the Rijksmuseum museum and fetches data from the Rijksmuseum API. This page displays the Rijksmuseum's entire collection of art in batches, using a masonry gallery layout. A Load more button at the button of the page allows a user to see more art. Clicking on an individual piece of art directs the user to the ArtView for details on the individual piece of artwork. The ArtView.jsx page is accessed by clicking on an image from the Gallery. It fetches data from the Rijksmuseum API and provides further details on each piece of art in the Rijksmuseum collection. The VideoTour.jsx page contains the code to enable a users to explore the Learn From Masters and Great Art Explained video collections without having to search for them on YouTube.
React styled components are used instead of a global CSS file.
In the project directory, you can run:
Run npm install in the project folder to install dependencies related to Express.
Go to client folder cd client and run npm install to install dependencies related to React.
Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.
The page will reload when you make changes.
You may also see any lint errors in the console.
You can test your API in http://localhost:5002
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
Access the MySQL interface in terminal by running mysql -u root -p
Create a new database called 'art': create database art
Add a .env file to root containing MySQL authentication information:
DB_HOST = localhost
DB_USER = root
DB_PASS = YOUR MYSQL PASSWORD
DB_NAME = art
- Run
npm run migratein the root folder in a new terminal window. This will create table 'favorites'.
We utilized the Rijksmuseum API to obtain data for the Gallery and ArtView. For the Gallery, the route used is https://www.rijksmuseum.nl/api/en/collection?key=${API_KEY}&hasImage=true&p=10.000&ps=100
For the Artview, the route used is https://www.rijksmuseum.nl/api/en/collection/${params.objectNumber}?key=${API_KEY} and the data used from the API includes the scLabelLine which provides the title, artist information, materials, and date of creation and the label.description which provides a short description of the piece of art such as subject matter.
To obtain Rijksmuseum API Key, you will have to sign up to the museum website: https://www.rijksmuseum.nl/en/register?redirectUrl=https://www.rijksmuseum.nl You will then have to ask for the key from your profile section: https://www.rijksmuseum.nl/en/rijksstudio/my/profile
-Add a new .env file, this time to your client folder, containing:
- REACT_APP_API_KEY=YOUR_KEY
This is a student project that was created at CodeOp, a full stack development bootcamp in Barcelona.