The Problem

While platforms like Discogs exist for vinyl collectors, they're primarily built as marketplace tools - focused on buying, selling, and cataloging for commercial purposes. What I wanted was something more personal: a simple, beautiful interface just for viewing and organising my own collection, without the complexity of marketplace features I don't need.

The challenge was building something that balanced my design sensibilities with my developing technical capabilities, while leveraging the rich data available through the Discogs API.

Design Approach

Coming from a product design background, I approached this project with user experience at the forefront - except in this case, I was designing for myself as the primary user.

Key design decisions:

• Clean, minimal interface that puts album artwork front and centre - records are visual objects, so the design needed to honour that
• Simple navigation and filtering to make it easy to browse my collection by artist, genre, or year
• Responsive layout that works whether I'm browsing on my laptop or checking something on my phone while in a record shop
• Fast, lightweight experience leveraging Astro's static site generation for performance

Design process insights: I started with high-fidelity designs in Figma, working through layout options, visual hierarchy, and component structure before writing any code. This allowed me to iterate quickly on the visual design and explore different approaches without the friction of implementation. Once I had a design direction I was confident in, I moved into development.

The transition from Figma to code was revealing - some designs that looked straightforward required more technical complexity than anticipated, while others were simpler to implement than expected. This process reinforced the value of designing with technical feasibility in mind, and taught me to identify potential implementation challenges earlier in the design phase. It's now changed how I annotate designs and communicate with developers at work.

Technical Implementation

Discogs API Integration: The Discogs API provides incredibly rich data about vinyl releases - everything from tracklists to pressing details to album artwork. Learning to work with this API taught me about authentication, rate limiting, data fetching, and how to handle API responses. I had to think through when to fetch data, how to handle loading states, and what to do when API calls fail - all considerations I now better understand when designing for API-dependent features at work.

Key technical challenges:

• Managing asynchronous data fetching and building appropriate loading states
• Structuring components to be reusable and maintainable
• Understanding the developer workflow: version control, debugging, deployment
• Balancing my designer instincts with what was realistically achievable with my current technical skills