Swing music library manager 📁🎵

View code on Github

Swing music is a beautiful and blazingly-fast self-hosted music player and library manager based on the client-server architecture.

■ Music■ Self hosted■ Vue3■ Pinia■ Python■ Flask■ SQLite■ 2021 - Present

Artist page banner showing Bob Dylan

⭐Project Objective and Purpose

I love music and I have a huge collection of music that I have collected over the years. I found it very hard to find and play the music that I wanted to listen to. The available music players were either too basic or too complicated. None of them was visually appealing to me either. I also needed smart playlists that would be generated based on my listening habits. Smart mixes based on a particular artist, album, genre were also on top of my list.

Finding all these features in one app was very hard and using multiple apps for different features was not something I was willing to do.

Combining all these features into one app was the main objective of this project. All the features of a typical music player, smart mixes and playlists based on my listening activity combined with a cool and easy to use interface was the main thing that I was going for.

Section in artist page showing albums by Bob Dylan

🛠️Web Stack and Explanation

The main stack of this project is Python, Flask, and Vue 3.

This project has 2 parts, the backend and the frontend. The backend is written in Python. I decided to use Python because it was the language I was most comfortable with. I also wanted to learn more about Python and Flask.

The frontend is written in Vue 3. I decided to use Vue 3 because it is a very performant framework and is easy to pickup as a web dev newbie.

Section in artist page showing top tracks by Bob Dylan

🪨Challenges

The main challenge in general was coming up with a simple, cool and intuitive UI. Understanding colors and spacing was rocket science to me at first. I overcame this challenge by taking a few "UI design for developers" 101s at YouTube university. Looking at other people's UI designs at Dribbble also helped me improve my UI design skills.

Most of the other challenges (like 90%) I faced were optimization problems. For example, reading tags from music files is a very slow and CPU intensive task, I had to find a way to optimize it. I used multiprocessing to spawn multiple processes to read tags from music files. This reduced the time taken to read tags from music files by a huge margin.

I had zero experience with CSS before this project. I had to learn CSS from scratch and apply it to this project. Using CSS grids to structure the UI was hectic. Maintaining a responsive design was also a challenge. Learning CSS layouts in depth helped me understand how the browser works and how to build a responsive design.

Album page banner showing an album by Bob Dylan

💡Insights

Taking on this project has helped me learn a lot of things about software development and life in general.

When I started this project, I had no idea how to build a web app. I had very little Javascript and Python knowledge. I had to learn UI design, Git, Typescript, CSS, Vue3, SQL, APIs, Testing, Pinia, multiprocessing, and more from scratch.

Taking on a project this big can be very overwhelming and can take ages.

I have been working on this project since December 2021. I made the first release on January 2023. The time difference between the first commit and the first release is 1 year and 640 commits on the main branch. I have spent sleepless nights and weekends working on this project and I almost ditched it when everything was breaking. The only thing that kept me going ... was my passion for using software to solve problems.

THE END

← Go back