Insecure Hosting: My Third Bootcamp Project

Crowdsourcing a party playlist

Posted by Start Bootstrap on August 24, 2014

For my last project, I chose to go it alone; mainly driven our class's insufficient full-stack experience, only having started on React 3 weeks prior, and in a group, I would be forced to choose between backend or frontend.

I set out a few clear objectives: I wanted to build the frontend in react (with smart and dumb elements), incorporate real auth (no offense to the firebase auth from the first project), spin up a mongo backend (wrong choice given how relational my data ended up), and, as always, build something I would use in the real world.

The use case was simple: allow many people to control the same playlist, rather than fighting over which song got played next, or taking turns, etc. As a host, I am often insecure about how others view my music choices, as it tends towards EDM and/or Taylor Swift, depending on the day, so would much rather have guests choose for themselves.

As luck would have it, Spotify has been working on their API library, which enabled this project (being able to control play/pause from the front end, sync playlists, etc.).

Spotify Party Remix

This was an interesting app, as it helped me understand some of the difficulties of full-stack programming, namely which logic should be handled by the backend (playlist reordering) vs frontend (search), and how to keep all the clients synchronized to each other.

I originally set a goal of "functional (but ugly) app" by the midpoint (end of the first week), as I wanted to spend about half the time on the css and design, but badly overshot that mark. Given the limited time, I more or less used bootstrap v4, but taught myself how to use an SCSS compiler (Koala) to change the colors. I went with the 80's motif, inspired by the background of those cheesy elementary school photos.

As before, more detail available in this mock pitch deck.

Parting Thoughts

  • Make socket.io carry data, not just a refresh command
  • Build in google auth (requires backend search)
  • Introduce genre-locks/exclusion lists

Spotify Party Remix