Project Talk: Spotify Code [P01]
Spotify, an app both you and I know, a name that brings into mind a green logo with three black curved lines, a name that signifies music streaming and modern music as we know it; an app that a great deal (an understatement for dramatic effect) of people use everyday, especially during these días de la Rona. Admittedly, I can say that I am one of those several Spotify users, being that I use the app almost religiously; day in and until I pass out, the app stays open, whether it be on my laptop or on phone, be it working or running, I am using it to listen to music.
The app is fast and has a great UI, but one feature that has always stuck out to me has been the Spotify codes (pictured below since we are visual learners here 😌), which is a way for listeners to share songs with one another, think Snapchat codes (the thing you see when you are trading Snapchat profiles with potential homies/partners. YKTV).
Isn’t that cool?! It’s a QR code that allows you to share songs and it looks cool as hell! Seeing this feature all the time made me want to create something that replicated what it did, minus the QR part, I was more interested in the design at the time in all honesty. With that being said, I got to work and drew out how I wanted the output to look, what things I wanted to use to make it, and then I got to working on it.
Here is the GitHub so that you can follow along.
Setting things up
Before I started coding, I made sure to do some research on the Spotify feature, checking if there was already a solution/project out there (there wasn’t), looking at different color libraries to fetch the hex colors, and seeing how I wanted to set the server up so my project could run.
Attempt #1
My mission with this project was to keep it as simple as possible, which you can tell from my my first PR, which is just setting up HTML, CSS, and JS files. My thought process was the following: set up HTML, CSS, and JS files, set up node and Express server (because you learned it from that Udemy course and you want to learn stuff), put some assets in there, get the color, and show the world it’s output reflected in the background AKA win. Turns out I had everything right, up until the get the color part.
When trying to return the color from the array of hex values I got this error:
Uncaught ReferenceError: require is not defined
which led me to do the programmer thing of frustratingly typing in different things to get it to work, which led to no avail, so I took a step back, took a break, and came back and done what I should have done in the first place, research. This lead me to this fantastic Stack Overflow post, which, in short, says “use Webpack”.
Attempt #2
I went back to the code and did as I was told, created a new branch that uses Webpack and Babel. Why babel and Webpack? Well, the funny thing about all this is that I had actually done this previously during the Udemy course and had notes on why it was good to use them and in concert with another, so I just followed those notes and did a bit of research that helped me understand what was going on a bit better.
From here on out, things went well; I was able to get things to show up and work properly (shown below).
The one thing that I noticed was that the colors weren’t exactly to the accuracy as the Spotify algorithm. For example, the Spotify code for the album above is in actually the red color, so I figured that Spotify was probably using some custom color grabbing program that probably gets the most unique or brightest color.
Was I going to create my own custom script to do as Spotify did for this project? No 😌 *, but I would like to in the future because colors in programming and data visualization are really color to me.
*Keeping it simple and learning
What did I learn from this project?
- I learned that I could do a project.
Being a newbie, you feel like you have to make this grand gesture of a project and if you make it too small then you aren’t a R E A L C O D E R, so it just becomes a “damned if you do, damned if you don’t situation”. I had those feelings before I started on this, but rather than getting bogged down by them I figured the best thing for me to do is to learn, no matter how big or small whatever I make is. - I learned more about client-sever js.
- I learned more about modern web programming.
- I learned how important application is.
Sure, I can read a Medium article or buy another Udemy course, watch a YouTube video, etc., but until I actually try it on my own, no matter who scary it may feel at the time, I will never fully understand what I am doing and what I can potentially do. Mistakes are apart of programming, mistakes can be fun, mistakes can take a jab at your confidence, mistakes can cause other mistakes, but mistakes are lessons overall, so rather than getting angry or losing interest out of fear of making a mistake, follow your nose and learn. - Doing things are fun when they are things that I want to do and things that I can learn from.
- There are several ways to to several things, but the solution is up to the person.
In conclusion, my very first side project was a fun journey that helped me learn a lot about modern web programming all while making something that I had always wanted to make. I look forward to making more things.
Thank you for reading.
— Alex
