Music is a huge part of my life, so naturally I listen to a lot of Spotify. I always admired Spotify's clean and simple interface. Not only does it look great, it's also very easy to use. Their UX and UI was on point. I was inspired by this, so I decided to create my own music interface. I named it Euterpe, after the Greek goddess of music. The goal of this project was to create my own music interface and strengthen my skills in React, React Router, Redux and Material UI.
In order to create this interface, I needed an API to let me access song names, artists, cover art, and other metadata. I decided to use the Spotify API which has a huge library of over four million songs and met all my criteria. After I had met these needs, I could begin designing the interface itself. I decided to use React, along with Material-UI. React makes developing web applications easier, and vastly improves the performance of said web apps. Material-UI provides some premade React Components that implement Google’s Material Design Guidelines. I used Redux to make API requests to Spotify and store it in a Redux Store, that way I could access the API call responses from anywhere within the app. For the content of the songs, I just put in some copyright-free beach sounds.
Over the next few months, I built a music interface that was inspired by Spotify, but I put my own spin on it. I added my own favorite colors, a cursive-font logo, and organized everything to my liking. Building Euterpe helped me understand and utilize various APIs, React, Redux, and Material-UI. I can confidently say I’ve created an app that I'm proud of.