Inspiration
All of us love listening to music. In fact, our group was formed on Discord over a desire to make a project that combined music / art and coding! We brainstormed a dozen ideas on what to do for this hackathon. Some of our ideas included a website for DJs to find new tracks and a music-focused social media website. We eventually settled on DevBops (a play on words of “DevOps” and “Bop”), a website which makes playlists for coding tasks.
What it does
We originally planned to have 2 components to our product: a website and related VS Code Extension. The website logs you into Spotify, asks you about your listening preferences, and gets your listening history. It then creates 3 different playlists based on these inputs. The VS Code sadly could not be completed (we were only able to finish the UI), but it would provide the same functionality as the website.
How we built it
We originally tried to make a static website using JS and cookies for the core functionality, but realized this would not work with the Spotify API. We then switched to a React + Node.js stack, hosting locally on our computers.
Challenges we ran into
Jumping into the Spotify API was a brand new experience for us! We had to carefully go through the documentation, especially for the parts about logging in through Spotify and figuring out the recommendations. Handling the Spotify token was a bit of a puzzle, and getting our pages to smoothly connect with each other took some trial and error.
Accomplishments that we're proud of
We managed to create a website that really brings everything we wanted into one place! From signing in with Spotify, taking a quiz that mixes your coding vibes with your music preferences, to receiving tailored music recommendations - we made it happen. Considering we've all been pretty swamped with other commitments, we're super happy we pulled this off. Creating something that we, as developers, can use and enjoy is definitely something to be proud of.
What we learned
We learned how to integrate the Spotify api using JavaScript. We also learned how to query and receive user information which allowed us to make the specific recommendations. Additionally, we worked on making an aesthetic webpage and integrating our backend with the webpage. Finally, we worked on an extension that could be used through vscode.
What's next for DevBops :
We’d like to integrate the vscode extension into our product fully as well as increase the size of our playlists.
Log in or sign up for Devpost to join the conversation.