In today's digital age, music is more accessible than ever before. With streaming services like Spotify, people have access to millions of songs at their fingertips. However, with so much music available, it can be challenging to find new music or share your favorite songs with others. This was the inspiration for my CS5610 Web Development final project in the last semester of my Masters of Science at Northeastern University.
I, along with two classmates, built a web application that allows users to like and comment on music, as well as create different types of users, such as admins, regular users, and musicians. The application integrates with Spotify to provide users with a vast collection of music to browse and like.
The Commentify front page
Backend Service and Architecture
As the primary backend developer, my role was to manage the backend service, field user requests using the Express Javascript framework, validate user requests, interface with the Spotify API, interface with MongoDB, and help design our data. We used NodeJS to support our backend, implementing a REST-ful API for our front-end clients to interact with.
To integrate with Spotify, I used my personal Spotify Developer account from my first endeavor into building web apps, About A Playlist. After setting up the OAuth 2 flow from the backend to the Sptofiy API, we were able to fetch music metadata and user data at will (within certain rate-limits per the free Spotify API subscription).
A details page for Elton John's "I'm Still Standing" with a comment and a like from the logged in user
We also stored user data in a remote instance of MongoDB, including relationships between users, user comments, user likes, and even a user's music for those users that are also officially registered with Spotify. However, since we could rely on the Spotify API to pull image data and artist, track, and album metadata, we would try to capture references to anything we could call dynamically and store it as it related to our users so that we did not have to provide the memory to store this data in our own system, thus reducing operation overhead for the project.
A list of followers and hyperlinks to their profiles for the user "firstUser"
Frontend Service
Our frontend was written in ReactJS, which is a popular JavaScript library for building user interfaces. The ReactJS library allowed us to create a modular and reusable component-based architecture for building our application.
To interact with the backend endpoints, we used the Axios library, which is a promise-based HTTP client for JavaScript. Axios allowed us to make HTTP requests to the backend service, and we could handle the responses asynchronously. I assisted in the design of our request methodology at the front-end to ensure reliable and consistent integration with the backend service.
The front page of Commentify in a smaller window. Our application had to be fit for all screen sizes 560px or greater.
Conclusion
Overall, our music-liking web application with Spotify integration is a great example of how to build a modern web application using ReactJS and NodeJS. With the application, users can easily discover new music and share their favorite songs with others. We believe that the application has great potential to help music lovers connect and share their passion for music and exceeded the expectations for the assignment (we received full marks, if only there was extra credit).
Note: Originally the back-end and DB services were hosted on Heroku, but Heroku has since removed their free-pricing plan, and so the website is no longer live. However, the repos are still available for inspection and can be run locally using a local instance of MongoDB on its default port.
Front-end Github Repo: https://github.com/MildMax/web-dev-final-project
Back-end Github Repo: https://github.com/MildMax/web-dev-final-project-backend
Comments