After completing my DevOps project last month, I wanted to take the app I had built and turn it into something more permanent, something with a graphical user interface that could be used outside of the terminal. I had built the app for my capstone project, but there the main focus was on the infrastructure, not on the app itself. I quickly created a program that exposed an API endpoint and returned a random song when it received a request. The song was generated through the Musixmatch API, and would include basic song properties, such as the song ID, name, album, artist, etc.
Instead of getting a random song, my new idea was to create an app that would get a random artist and display it alongside the artists discography and related artists. Every artist or album on the page would include a link to that artist / album on a music streaming service, so you could actually listen to anything you found interesting. Refreshing the page (or clicking on the next button) would load another artist, so the website could be used as a random artist generator.
After initially building out a prototype for the website that would eventually become bandDotRand, I realized that the Musixmatch API wasn’t going to cut it, and I had to find a music API that would better suit my needs. Spotify was my next choice, and after diving into their API documentation, it seemed like the right choice. The one thing Spotify didn’t have was an API endpoint to access a random artist, but after reading this article on how to get random tracks using the Spotify API, I realized I could do something similar in order to get a random artist. Once I had my random artist, I’d need to make one more API call to get the artist’s albums, and then I’d be set.
I had the artist data, now all that was left to do was to create a frontend that would display all that data nicely. I created all the React components that I needed, added some styles and tied it all together.
Lastly, I deployed the app on Heroku. Getting the frontend to communicate with the backend turned out to be way more time consuming than I thought it would be (I swear it ran on my machine), but in the end it ran just fine. “In the end”, meaning seven hours of debugging later, but nonetheless, the app is deployed.
The website is built with React on the frontend, and Node.js with Express on the backend. Both frontend and back are written in TypeScript — after watching some Pluralsight courses on the topic, I was looking for an excuse to try it out. Turns out if you’re coming from a C/C++ (or any statically typed language) background, it really isn’t that difficult to transition to from JavaScript.
All of the styling was done with TailwindCSS, which is my new favorite utility-class library. The combination of React components and utility-class styling makes building reusable components that look good really simple.
Looking ahead, I’d love to be able to integrate other streaming service API’s so that the user can be redirected to the service of their choice, instead of just Spotify. I’d have to figure out a way to match the artist on multiple platforms, like taking an artist I received from the Spotify API and finding it’s counterpart on Apple Music or Tidal. Getting the artists website and social accounts would also make a great addition, giving you more access to that new favorite (or not so favorite) band you just discovered.
You can try out bandDotRand here. Let me know what you think, and tell me which new bands you’ve discovered.
Top comments (2)
the good one search option should be there I think
Search was purposely not built into the app, the idea was to randomly discover new bands. Thanks for checking it out!