AIC Explorer is a web application to explore and save artworks from the Art Institute of Chicago and use them to create custom collections. It's built with a Ruby on Rails back end to make API calls and store data, and a React/Redux front end to provide an API interface.
You can see a demo version of this application deployed to Railway here: https://art-institute-explorer.up.railway.app/
AIC Explorer leverages the Art Institute of Chicago API, a comprehensive API that makes data on all of the museum's artworks publically accessible (with documentation available here, along with its GitHub page). Using this API, the application allows users to browse and search through the museum's artworks, save artworks to their account, and use artworks to create collections which can then be shared and commented upon by other users.
The application relies on the external API to provide data including images for artworks which are then displayed on the front end. Data for artworks is only stored in the database when users choose to save an artwork or add it to a collection.
- Browse Artworks - Look through the most popular artworks from the Art Institute of Chicago.
- Search Artworks - Type custom searches to query the AIC and find artworks that you're looking for.
- Examine Artworks - Get more detailed information about a particular artwork through its show page.
- Save Artworks - Save an artwork to your account for later use.
- Add Artworks to Collections - Create custom collections of artworks to share with other users.
- Add Comments to Collections - Leave a comment and allow users to discuss a collection.
- Like Collections - Like a collection and see a collection's popularity.
- Examine Users - Get more information about a particular user and their saved artworks and created collections through their show page.
The application uses an MVC (Model, View, Controller) paradigm using the Rails back end. Instead of Rails templates, it uses Jbuilder templates to serialize data from the model layer and respond with JSON that can be consumed ascynchronously by the front end. Authentication is handled using BCrypt for Ruby. External API requests are handled by the Faraday gem.
React is used to create a single-page, responsive, JavaScript based front end. Redux is used to keep a central store for the application's state and store data received from the back end. React Router is used for front end routing, Redux Thunk is used to assist in Redux actions and API calls, and Framer Motion is used for animations. Font Awesome is used for icons and buttons.
Initial planning for the application was documented on this GitHub repository's wiki. Here, you can find info on the database schema, back end routes, front end routes, and a sample Redux state shape.
Gemfile - Rails related back-end dependencies.
package.json - Front end dependencies for Webpacker (React, Redux, etc).
/config/routes.rb - Back end routes are defined here.
/app/controllers - Rails controllers are configured to function as an internal API for the front end to interface with. These controllers are responsible for managing users, authentication, creating resources (such as Artworks and Collections) and perpetuating data using the PostgreSQL database.
/db - Database migrations, seeds, and schema can be found in this directory.
/app/models - Models for application resources (such as Users, Artworks, and Collections) are defined in this directory. In the files, relationships (such as has_many or belongs_to) are defined, as well as data validations and class or instance methods used to perform various tasks (such as returning data).
/app/views - From here, JBuilder templates will be called from the controllers and serialize data for the models, returning JSON responses to the client.
/spec - Back end tests written using RSpec are stored here.
All front end files are stored under /app/javascript/packs.
index.jsx - This is the entrypoint file for the front end of the application. It loads the React application and sets up the Redux store. The file is loaded by application.js to be compiled by Webpack, along with all other imported files.
/components - All React components are stored in separate directories and allow for a modular approach to constructing the front end pages.
/reducers - The Redux reducers take data and apply it to the Redux store. They also initialize a state for the store.
/actions - Redux actions are used to submit data to the store.
/util - Utility functions are stored here, mostly used to assist in making API requests to the Rails back end.
/styles - Default Sass stylesheets are kept here, while the stylesheets for individual React components are stored in their respective component directories. All stylesheets have to be loaded into Webpacker using the manifest file.
To build the application, install back end dependencies from the Gemfile via Bundler by running bundle install. Ruby version 3.1.3 was used to develop the application and is specified in the Gemfile as well as the .ruby-version file.
Since the application uses PostgreSQL, you need to have it installed locally on your machine with a user that has table creation privileges. You can get further instructions here.
Create the database with bundle exec rails db:create and run migrations with bundle exec rails db:migrate, then run bundle exec rails db:seed to populate the database.
To run the application in development mode after installation, run bundle exec rails s.
Front end dependencies are managed by Yarn with the package.json file, so you must have Yarn installed. Dependencies are built by Webpack via the Webpacker gem. Run yarn install to install front end dependencies. Custom JavaScript code for React/Redux is located in the app/javascript/packs directory where front end assets are imported.
The back end test suite is developed using RSpec via the rspec-rails gem with shoulda-matchers. Model factories are set up with FactoryBot. Since the application is dependant on an external API, the test suite utilizes VCR to record and replay responses for tests.
Tests are located under the /spec folder. Test coverage includes requests, models, and routing. In order to run tests, run bundle exec rspec followed by an optional folder or file under the /spec directory (for example, if you only want to test models, run bundle exec rspec spec/models).
This project is open source under the terms of the MIT License.