spotty

TABLE 22 near the sponsor booths!

Inspiration

Started with a quirky fun widget idea for my personal website where visitors can check out my currently playing song on Spotify and suggest tracks that would be put in a designated playlist. Why not make this for everyone else? Promising a friend that you will listen to their suggested tunes are just empty words, so let's give these nice friends of ours some power over our daily music intake :p

What it does

Creates a unique link for you. Anyone who has access to it can find out what kind of songs you've been listening to, and if they think you could do better, they'd drop a tune to a playlist that you've designated! It's social media for your music taste.

How I built it

ZEIT Now Serverless Functions interfacing with a MongoDB Atlas database and providing API for a Next.js front end built with sleek design in mind muach.

Challenges I ran into

• Spotify's tight authorization protocols.
• Enforcing security on the backend would take longer time than I could afford.
• Building a full fledged SSR app and all the caveats that come with it.
• Integrating SASS for the first time
• Going to unchartered territory with MongoDB (the app doesn't need a heavy weight schema based database since it only stores a couple strings for each user)
• Messy hackathon quality codebase is always a beauty.

Accomplishments that I'm proud of

• The design for the site is quite nice I'd say
• This is a site I'm so happy to share with everyone else. I can envision people putting their spotty link on their social media.
• Finally able to say I'm a Spotify API master
• Worked on this all alone

What I learned

• The messy codebase taught me about all the moving pieces in a full fledged web app. There were times I compromised certain aspects of the codebase (clean code, tests, accessibility honestly :( ) and there were times I thought compromise wasn't possible. All this process taught me more about each piece in a web app, the importance and the implementation details of each, and how everything should come together.

• SSR gets hacky just due to its nature. There are a lot of preconceived notions about how to code a web app that did not translate to Next.js. You have special Next.js ways of doing every little thing (for good reason) but it's not always intuitive.

What's next for spotty

• Security enforcements
• clean up some design elements
• Making multiple playlist links
• create a stronger more cohesive design system for the app.
• Integrate GitLab CI/CD to the codebase
• Dockerize client and server codebases (currently only local mongo instance is dockerized)

Built With

• docker
• mongodb
• next.js
• react
• serverless
• zeit