Inspiration
Movies and tv shows get the spotlight in mainstream media and attention, but we wanted to give the same spotlight for music and its global audience by providing it the same ranking features visual media have, too.
What it does
Listr is a website designed around the idea of growing accessibility to your favorite albums and providing a way to share your thoughts about them through a rating system, similar to other sites for movies or tv shows.
How we built it
This application essentially allows a user to rate albums they listen to, with all items being pulled from the Spotify API. Here, we have a login prompt at the header of our site that requires each user to sign in to their Spotify account in order to get access to all the albums available in Spotify’s database. After making that initial request to their API, the website then generates the top 5 most popular albums (by number of plays) for the entered query, dynamically changing its results as the entry is being edited thanks to React.js serving as our development framework. Alongside this built-in search functionality, it also lets the user add any of those listed albums to their own rating list section, where anyone can use the sliding bar positioned beside each album to numerically rank each one in their custom list. These attributes and features were implemented via HTML, CSS, and Javascript (as well as for the rest of the website) to not only rank the albums individually but also store that data, too, in the backend.
Challenges we ran into
We didn't have much web dev knowledge, so a lot of problems arose when making our React application compile and load successfully with all the attributes and components we wanted to include.
Accomplishments that we're proud of
We're proud of the fact that we got to learn a new framework and language from scratch to build a functioning website that's interesting and unique.
What we learned
How to use React.js, HTML, CSS, Javascript
What's next for Listr
Storing rating data into a database with an authenticated and protected login system; connecting users of the website with each other based on similar interests and ratings of similar music
Log in or sign up for Devpost to join the conversation.