This is a Single Page (React) App live site link that uses the Art Institute of Chicago's public API to search its database for artworks. The user can search for artworks, keywords, genres, mediums, processes, movements, eras, etc. The core motivation for building this app was to test and grow my skills as a developer by building a Single Page (React) Application that pulls data from an API with useEffect and updates the view using useState React Hooks. My personal motivation was to do this using an API that aligned with my interests and sensibilities, while being open/accessible/user friendly. I also wanted to use the Agile method (and challenge myself) by focusing on core functionality before I try to do the things I "dream about" like interactive/creative coding. This IS planned for the future. I do plan on expanding the app to incorporate the p5.js Library and React npm packages that integrate p5.js into the React ecosystem. What do I plan on doing? Remixing works from the collection to create "glitch art."
This app is built using React, JSX, and CSS. It is scaffolded using [Vite. It relies on the Art Institute of Chicago's public API and axios to fetch the data from said API.
The Art Institute's API is deep and extensive. That is both a blessing and a curse. It became the best and the most challenging aspect of building the app. While their documentation is extensive, not everything is spelled out explicitly. In particular, the URL scheme has many options for the parameters one can feed it. When using the "search" parameter, the only data that I could use in the view was the artwork title (even though there are literally hundreds of objects available in the JSON), so I needed "fields". The moment I'm most proud of in navigating these parameters literally hinges on a single character: "&" in the "fields" portion of the URL scheme, which returned the data I needed. I'm still working on returning pagination data from the API. I would also like to implement authentication.
The design mimics Art Institute of Chicago's own search results page, with a few exceptions that are my own preferences. The goal is a minimal, clean, beautiful display of the search results and visual cues that point to functionality (link animations and color changes, for example).
Typefaces include Topaz (serif text) and Lato (serif text). The Art Institute uses Topaz for serif text and Ideal Sans for sans-serif text.
For when we're looking at this live, by telling me what to search for!
This app would not have been possible without the amazing help from all of the below.
Thank you to Per Scholas for living out its mission and providing the tuition-free tech training that has enabled me in so many ways.
Big thanks to Katherine Saung, my classmate, for helping without knowing she did. Some of the searches I tried based off of an informal discussion led to several UX and back end improvements. And thank you to my cohort at large. Discord people: "you know what it is!"
I used the LinkedIn Learning platform and Chicago Public Library's subscription to the service for research, reinforcement of React concepts, and to learn new things in building this app. I'll continue to do so as I further it.
Thank you to the Art Institute of Chicago for being a world-class institution in general, and specifically for the technology department for building such great resources that further its mission and making those resources publicly available and accessible, like the API this app is built on.
2023 © Copyright: Andrew Doak mrandrewdoak@gmail.com