Frontend Engineering
Canvas to Covers
Built a React web application that recommends books inspired by artwork, combining data from the Google Books API and the Art Institute of Chicago API to create personalized reading recommendations based on artists, artistic movements, and historical periods.
01 · Context
What existed, and why it wasn't working
Art museums inspire curiosity, but discovering books that deepen an understanding of a specific artist or artwork often requires searching across multiple platforms. Existing book searches rely heavily on exact keywords and don't provide meaningful recommendations based on artistic context.
Canvas to Covers was created to bridge this gap by connecting museum artwork with relevant books, allowing users to explore literature related to artists, artistic movements, and historical periods from a single interface.
02 · Goal
A single definition of success
Create an engaging, responsive web application that transforms artwork into personalized book recommendations while providing users with a simple way to discover and save titles they want to revisit.
How might we make discovering books feel like a natural extension of exploring art?
03 · Process
How the work unfolded
The application centered around three recommendation paths: books about an artist, books related to their artistic movement, and books covering the historical period in which the artwork was created. This structure allowed recommendations to extend beyond simple title matching and provide richer discovery opportunities.
The interface was designed to encourage exploration while remaining lightweight and intuitive. Users can browse artwork individually or through randomized gallery experiences, view recommended books alongside artwork, and save favorites using persistent local storage.
Built with React and Vite, the application integrates two external REST APIs with differing response structures. I implemented data normalization to combine artwork metadata with Google Books search results, allowing recommendations to be presented through a unified interface. State management was used to coordinate artwork selection, recommendation results, and persistent favorites. Browser local storage preserves saved books across sessions without requiring user authentication.
Manual testing focused on validating API responses, handling incomplete or missing data, ensuring favorites persisted correctly across browser sessions, and verifying responsiveness across different screen sizes.
Caption: briefly describe what this shows and why it matters.
04 · Key Decision
The non-obvious call
Rather than limiting recommendations to direct searches using an artwork's title, I chose to generate recommendations using multiple dimensions of an artwork—including the artist, artistic movement, and historical period. Although this required additional API queries and more complex result handling, it produced significantly richer and more varied recommendations, creating a discovery experience instead of a traditional search interface.
05 · Outcome
Key Functionality
Canvas to Covers successfully combined two independent APIs into a unified recommendation experience, allowing users to seamlessly transition from exploring artwork to discovering relevant books.
Personalized recommendations based on artists, artistic movements, and historical periods
TPersistent favorites using browser local storage
Responsive React interface built with reusable components
Multiple browsing modes, including randomized gallery exploration
06 · Reflection
What I'd do differently
If I continued developing this project, I would improve recommendation quality by introducing a backend recommendation service rather than relying solely on keyword-based API queries. I would also migrate the project to TypeScript, implement automated testing, and introduce server-side caching to reduce redundant API requests and improve performance.
07 · Technical Highlights
Noteworthy accomplishments
• Integrated Google Books and Art Institute of Chicago REST APIs
• Normalized heterogeneous API responses into a shared data model
• Built reusable React components using Vite
• Implemented client-side persistence with Local Storage
• Managed asynchronous API requests and loading states