Technologies Used

  • Python
  • SQLite3
  • HTML/CSS
  • MusicBrainz Database
  • https://coverartarchive.org
Music Collection App

Building a Dynamic One-Page Music Collection App: From Concept to Completion

Introduction: Turning a Personal Need into a Professional Showcase

The journey to build my music collection app began with a personal frustration: keeping track of an extensive CD collection. Without an organized system, I frequently found myself wondering if I already owned certain albums, especially when browsing through music stores. The need was simple yet critical—an easily searchable, visually engaging, and mobile-friendly catalog of my collection.

This project evolved far beyond its initial purpose. What started as a way to keep track of albums became a showcase for my skills in front-end development, database management, and iterative problem-solving. The final result is a one-page application, combining sleek design with robust functionality, powered by HTML5, CSS3, and JavaScript, and backed by an SQLite database.

Project History: A Journey Through Iteration

Version 1: The Foundations with MusicBrainz

The first version of the app focused on gathering and organizing data. I chose SQLite as the database because of its simplicity and portability, and I integrated the MusicBrainz API to fetch metadata for each album using barcodes.

Challenges:

  • API Rate Limits: The MusicBrainz API had strict rate limits, necessitating the use of caching and retry mechanisms.
  • Incomplete Data: Some albums lacked metadata, leading to the creation of a missing.jpg placeholder for cover art.

Key Code Snippet: Fetching Metadata

import requests

def fetch_album_metadata(barcode):
url = f"https://musicbrainz.org/ws/2/release/?query=barcode:{barcode}&fmt=json"
response = requests.get(url)
if response.status_code == 200:
data = response.json()
if data['releases']:
return {
'artist': data['releases'][0]['artist-credit'][0]['artist']['name'],
'album_name': data['releases'][0]['title'],
'release_year': data['releases'][0].get('date', '').split('-')[0],
'cover_art_url': f"https://coverartarchive.org/release/{data['releases'][0]['id']}/front"
}
return None

This initial phase taught me the importance of handling edge cases (like missing data) and set the groundwork for a robust database.

Version 2: Adding Visual Appeal

With the data in place, the second version introduced an HTML page to display the collection. Initially, the layout was basic—a long, unorganized table.

Improvements:

  • Card Layout: I replaced the table with a grid of “cards,” each featuring album art, artist name, and album title.
  • Dynamic Styling: I used CSS to make the cards visually appealing and responsive.

Challenges:

  • Handling non-square images without distortion required CSS tweaks:
.card img {
width: 100%;
height: auto;
object-fit: cover;
}

Version 3: Filters and Sorting

As the collection grew, navigating it became cumbersome. This led to the introduction of filters (e.g., by genre or rating) and sorting options.

JavaScript for Dynamic Filters:

function filterList() {
const genre = document.getElementById('genre-filter').value;
const rows = document.querySelectorAll('#album-list tbody tr');
rows.forEach(row => {
const matchesGenre = !genre || row.cells[3].textContent === genre;
row.style.display = matchesGenre ? '' : 'none';
});
}

Key Learning: Users value intuitive filtering and sorting. Implementing these features improved both usability and performance.

Version 4: Image Management and Optimization

Downloading, resizing, and renaming album cover images became a significant focus. I wrote a Python script to handle this automatically, ensuring consistency and optimal file sizes for mobile viewing.

Challenges Solved:

  • Naming issues with special characters were resolved by sanitizing filenames.
  • Resizing images to avoid excessive file sizes while preserving quality:

from PIL import Image

def resize_image(input_path, output_path):
with Image.open(input_path) as img:
img.thumbnail((300, 300))
img.save(output_path)

Final Version: The One-Page App

The final iteration consolidated all features into a single, dynamic HTML page with:

  1. Statistics at a Glance: Total albums, average rating, and genre count displayed prominently.
  2. Searchable and Filterable Table: Users can filter by genre, search by keywords, and sort by artist or rating.
  3. Responsive Design: The app is fully functional on both desktops and mobile devices.

Technical Highlights

Final HTML Snippet

<section id="stats-filters">
<div class="stat-dropdown">
<select id="genre-filter" onchange="filterList()">
<option value="">Genres: 12</option>
<option value="Rock">Rock</option>
<option value="Jazz">Jazz</option>
</select>
</div>
<div class="stat">Total Albums: 250</div>
</section>
<section id="search">
<input type="text" id="search-bar" placeholder="Search...">
</section>
<table id="album-list">
<thead>
<tr>
<th>Image</th>
<th>Artist</th>
<th>Album</th>
<th>Genre</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="images/example.jpg" alt="Album Art"></td>
<td>The Beatles</td>
<td>Abbey Road</td>
<td>Rock</td>
<td>1969</td>
</tr>
</tbody>
</table>
.stat {
background-color: #27374D;
color: #66FCF1;
padding: 15px;
border-radius: 10px;
text-align: center;
}
#search-bar {
width: 80%;
padding: 10px;
margin: 20px auto;
display: block;
}

Lessons Learned

  1. Iterative Development:
    • Building in iterations allowed for incremental improvements and quick problem-solving.
  2. Scalability and Performance:
    • Optimizing image sizes and using JavaScript for filtering improved load times significantly.
  3. User Experience:
    • A single-page design with intuitive filters and responsive design provided the best experience for my needs.

Future Enhancements

  1. Editable Fields:
    • Allow in-page editing for ratings and notes, with changes synced to the database.
  2. Enhanced Visuals:
    • Incorporate animations and transitions for a more engaging UI.
  3. Cloud Integration:
    • Sync the database and images to the cloud for access across devices.

Conclusion

This project started as a simple way to manage my CD collection and evolved into a dynamic, mobile-friendly app that showcases my technical expertise. From integrating APIs to managing a database and designing a responsive UI, every aspect of this project reflects thoughtful planning and execution. Whether for personal use or as part of a professional portfolio, this app demonstrates how iterative development and a focus on user experience can turn an idea into a polished solution.

View Website