Spotify Album Finder
Front-End Developer · UI/UX Designer
Role
Solo
Team
JavaScript, HTML/CSS, Spotify API
Tools
10 Days
Timeline
Overview​
​
The Spotify Album Finder is a web-based application that allows users to search any artist and instantly view all their albums directly from Spotify’s catalog. I designed and built this project to expand my skills with APIs, asynchronous JavaScript, and clean UI layout. The goal was to create a simple, responsive, and enjoyable tool for discovering music while demonstrating practical experience integrating third-party APIs.
Problem​
​
Searching for an artist’s full discography on Spotify typically requires navigating multiple pages, filtering views, and manually scrolling through long lists. I wanted to create a tool that cuts out those extra steps and presents the discography in one clear, visual layout.
Solution
​
​​Creating a simple, single-page tool that lets users search an artist and instantly see their full discography in one place. By pulling album data directly from the Spotify API and displaying it in a clean grid, the app removes extra navigation steps and makes discovering albums fast and effortless.
Process/Implementation
1. Set Up API Access
Registered a Spotify developer app, obtained my Client ID/Secret, and requested an access token using the Client Credentials flow. The access token would then be returned & it followed Spotify’s official documentation for working with public catalog data.
2. Build the Search Feature
Created a search bar and used Spotify’s Search endpoint to find the artist based on the user’s input. Also using the parameters:
-
q: the artist name
-
type: "artist"
3. Retrieve Albums
Pulled the artist’s albums using their Spotify ID and the “Get Artist’s Albums” endpoint. This endpoint provides a JSON response containing:
-
Album titles
-
Album cover images
-
Release dates
-
Spotify page links
-
Album types (single, album, compilation, etc.)
4. Parse and Display Data
​
After receiving the JSON response, I filtered out the key information—album name, cover image, and external Spotify link. I then used JavaScript to dynamically create album cards and inject them into the page. Each new search clears old results, ensuring the interface updates cleanly and instantly based on the user’s input.
5. Design the Interface
Built a clean, minimal layout with a responsive grid to highlight album art and improve usability.
6. Fix Issues & Iterate
Tested searches with multiple artists, resolved token errors, removed duplicate albums, and improved spacing and alignment. As the link is clicked it would take you to the specific album on Spotify.
What I Learned
Through this project, I gained hands-on experience with REST APIs, asynchronous JavaScript, and real-time data rendering. I also improved my understanding of JSON parsing, error handling, and designing simple, intuitive interfaces. Overall, it strengthened my ability to combine front-end development with thoughtful UI decisions.
Next Steps​
Moving forward, I want to refine the overall design to feel more polished and professional. This includes improving the visual hierarchy, adding smoother animations, and incorporating a cleaner card layout for albums. I also plan to introduce additional features such as sorting albums by release date, filtering by album type, and adding audio previews. These enhancements would make the app more engaging while bringing the UI closer to a fully realized, production-quality design.