Firsts.


For our first full-stack web application, my partner and I brainstormed a project that we felt would be reasonable to accomplish within our three-week deadline, but would also give us the ability to implement additional features in the future. Plus, we wanted to build something we would both use and enjoy.


Finally, we settled on a music application. Our moon shot was to generate a playlist based on the user's mood, but we decided to start with generating a new playlist based on the user's favorite artist, song, or genre.


Tech Stack

We used HTML5 to create the basic structure for our project, and CSS3 to style it. Bootstrap 4 provided a lovely navigation bar and some minor layout adjustments, but everything else was our own creation. We used jQuery for event handling and animating text. Express made our lives easier on the backend by providing simple route management and session data. We even incorporated Mustache for templating. Of course, this project would not have been a hit without Spotify's Web API.


We deployed our application using the Heroku CLI, and set up automatic deployments on the master branch.


Highlight Reel

One of my favorite features is a simple one: we used an iframe tag to embed a music video from YouTube as the background for our landing page.

                
          <iframe frameborder="0" height="100%" width="100%"
            src="https://www.youtube.com/embed/7BJ7MDOmLPE?
            &start=14
            &autoplay=1
            &controls=0
            &showinfo=0
            &autohide=1
            &mute=1
            &loop=1
            &playlist=7BJ7MDOmLPE"
            allow="accelerometer; autoplay; encrypted-media; 
            gyroscope; picture-in-picture">
          </iframe>
                
              

This did come with a challenge, however. After a little CSS and a lot of research, I was able to figure out how to maintain the 16:9 aspect ratio of the video, and to center it appropriately on the page. Additionally, since mobile devices do not support autoplay, I implemented media queries to display a background image instead of the video on mobile devices.

Failing Forward

Turns out, we need to know whether the user is submitting an artist, song, or genre in order to provide recommendations using Spotify API. Our original idea was to allow the user to enter an artist, song, or genre, and then we would provide a recommended playlist based on that input. However, the Spotify API must {\em know} which seed value it is receiving in order to work. Our solution to this challenge was to add a toggle switch to the main page, which allows the user to ``toggle'' between artists and songs. This way, the user can choose whether they want to get a playlist based on their favorite artist or song--thus expanding their options a bit without cluttering the main page.

If you think responsive's simple, I feel bad for you son. We got 99 viewports, but the iPhone's just one.

Compatibility with browsers and devices. One of the most challenging parts of this project was making sure each page presented well on different browsers, laptop/desktop sizes, and on mobile. We created a toggle switch for the user, which did not work on mobile. Sometimes page layout looked differently (in a bad way) on the other teammate's laptop. Our background video does not autoplay on mobile browsers. Although we attempted to make our application mobile-friendly, there are a ton of different viewports to think about, and we didn't quite get it all worked out.

Ideas for Future Work

I would enjoy adding autosuggestion capability to the input field. Ideally, I would implement this using a React component so I could get the chance to experience React.


Another feature I would like to implement is the ability to sort the playlist based on various audio features, such as tempo, danceability, acousticness, etc.


One of our users suggested that it would be nice to be able to see whether they were logged into Spotify on the main page.