AIC's Artwork Collection
A Vue single-page application where you can browse artworks from the Art Institute of Chicago's collection
Year
2024
Type
School Project
Role
Solo Developer
Project goal
The goal was to create a simple web application of choice using the basic concepts of connecting a Vue.js front-end to a custom Lumen API which would contain a sorted listing of entries and a single entry endpoint that would be used to display data. The specifications were to make our own API through Lumen and then create basic Vue.js application with a single HTML file and a Vue instance which would be used to fetch data from the custom Lumen API, and display the sorted listing of entries on the page. We were also asked to implement a feature that allows users to click on an entry to view the details of that specific entry without navigating to a different page, these details would need to be fetched from a separate API.
Technologies Used
I used HTML and SASS for the website structure and styling, Vue.js for the single-page application and to fetch/display data from the APIs, GreenSock for animations, and the Lumen framework to create a custom API.
How it was created
Since I would need to use an external API to fetch additional details, I started off by doing some research to find an API that interested me. I came across The Art Institute of Chicago's API during my research which I really liked after reading its documentation and seeing what data I could fetch from it so I decided to go with an artwork-themed project.
I then began planning out what my custom API would look like which would include very general information on artworks such as the title and artist. I followed an in-class example to create my API which involved creating a database in phpMyAdmin, and using Lumen to create a model and controller for artworks along with the API routes. After confirming the routes were working using Postman, I then used Vue.js to create a Vue instance and fetched the data from my API.
Once I had the data displayed on the page, I started reading more in-depth documentation for The Art Institute of Chicago's API to familiarize myself with its usage and endpoints. Once I was able to make a successful call to the API, I added a method in my Vue instance that would run whenever an artwork was clicked which displayed additional details on that particular artwork. With the functionality in place, including error handling and data loading indicators, I finished off by styling the page and its components using SASS.
