Johnathan Group 5
🎵 Spotify Wrapped 🎵
Rohan Chadha, Krish Mathur, Carter Tussi, Alex Salonti, Tiger Chen, Aaron Channer (Group 5)
🎵 About the Project 🎵
How can we pull someone's Spotify information to display their listening habits in a creative way?
The goal of our project was to learn how to generate a creative way to show a user's listening habits and data on Spotify. Throughout our project, we learned how to:
-
Use Git to merge large pull requests and manage merge conflicts
- Prioritize different features and split tasks strategically based on software architecture and priority
-
Use Firebase and Spotify API to display user data from their Spotify Account
-
Use Figma and UI/UX design principles to create an aesthetically pleasing but usable app
-
Follow agile methodologies and other SCRUM techniques
🎵 The Team 🎵
🎼 Rohan Chadha
Product Owner, Developer
Created and designed this Wix website.
Helped create the functionality to pull user data from Spotify API.
Created the Figma designs.
Developed the UI for the app and pulled profile data to personalize app.
Helped create and assign tasks using Trello.
Second Year, Computer Science Major
🎶 Krish Mathur
Scrum Master, Developer
Created the Spotify Authentication functionality.
Created the LLM functionality for User Story X.
Helped create and assign tasks using Trello.
Helped manage GitHub Pull Requests and Merge Conflicts.
Second Year, Computer Science Major
🎹 Carter Tussi
Technical Support, Developer
Designed this Wix website.
Helped create the functionality to pull user data from Spotify API.
Implemented the Audio Playback Feature for User Story X.
Helped pull user data for the Spotify Wrapped feature.
Helped resolve bugs and merge conflicts for GitHub pull requests.
Second Year, Computer Science Major
🎤 Alex Salontai
Project Documenter, Developer
Created the functionality and UI for the Spotify Wrapped page.
Helped resolve bugs and conflicts with the Spotify Wrapped data.
Documented important information for pulling user data and its functionality.
Second Year, Computer Science Major
🎧 Yu (Tiger) Chen
Developer
Implemented the "Manage Account" features (functionality).
Created and implemented the Firebase functionality to allow data to persist.
Created UI and functionality for the "Past Wraps" section using Firebase data.
Second Year, Computer Science Major
Second Year, Computer Science Major
🎶 Aaron Channer
Developer
Helped create the app UI.
Researched and created the dark mode UI feature.
Helped research and document for the Firebase implementation.
🎵 Process Description 🎵
i. Design Process and Ideation
Creating the Design Layout
We began our project by first focusing on the two required user stories. Here, we were able to create a basic Figma wireframe to understand the general layout of our app, including the main page. Focusing on the first two user stories allows us to create the core functionality of the app, allowing users to log in with their Spotify account, generate wraps, and then view previous wraps. It also allows them to manage their account (delete, log out)
​
Here, we focused on simply laying out the pages for each group member to later work on, and connecting each page with their respective buttons. In this stage, we were focused on building out functionality, and putting less priority on the UI of the app.
Creating the Mid-Fidelity Designs
After deciding on the layout, and creating some of the functionality of the app, we moved on to create more detailed designs and decide how to implement the interface based on the information we could pull from the Spotify API.​
​
This includes understanding button placement, margins/padding, etc. It was helpful to have one to two teammates working on the UI while some of our other teammates worked on the backend and pulling data from the API.
High-Fidelity (Final) Design Changes
After we were able to create more functionality of the app and learn more about the Spotify API, we changed some of the designs of the different pages in order to make the app seem more tailored to the user (pulling more user Data to display on the app). We also decided on final colors, typography, buttons, and fonts to create an app that is both aesthetically pleasing but also takes good UI/UX design practices into account (such as button placement and primary and secondary colors).
​
We also added more buttons and smaller designs changes to accommodate for the other user stories we added on to our app. Most of the user stories we added didn't have extensive UI to them, so it was easier to build off of this design.
ii. Our Development Process and Use of SCRUM
After we analyzed the user stories and laid out a basic flow for the app (first design iteration as shown above), we began to delegate tasks to work on the core functionality of the app. Our first priority was to create a minimum viable product (MVP) that would allow us to build out basic functionality and build on that.
Our first goal: Spotify Authentication and pulling user data from Spotify API and displaying it
For us to be able to pull user's listening habits (part of the core, required user stories), we needed to learn how to use Spotify API and pull user data. After figuring that out, we could call different parts of the API depending on what we wanted to pull. We didn't focus on pulling listening habits or the UI first—we needed to understand the functionality first before moving on to that.
After being able to successfully pull the user data onto the app, we moved on to making each page personalized with messages unique to each user (improving the UI), and working on the wrapped feature by pulling the relevant user data we needed.
Implementing Scrum:
​
Our team used Trello to divide these tasks as we went. We split up and divided tasks, first prioritizing the first two required user stories, then focusing on the other user stories. We used a backlog list on Trello to track any tasks we would need to complete in the future, a To Do list to track what we currently needed to build out to reach our sprint goal, a "Doing" column to know what each of us are currently working on, and a "Done" column to move all completed tasks to. This helped us keep organized and understand how to properly tie frontend and backend tasks together when building an app.
We constantly updated each other every day with our progress on the app and kept each other informed of any technical issues or blockers. We first prioritized functionality (MVP) as we went, and then focused on refining the UI of every feature we created. We also met in-person several times to work on features and review GitHub pull requests to merge code to the main branch. We also communicated with our team TA and kept him updated with our progress on the app features.
🎵 The App : Finished Product 🎵
Login Page:
The login page is the entry point to our app, with users being automatically directed to this page to connect to their Spotify account and authenticate the app’s access to their data. Once authenticated, the user is brought to the next page: the logged in homepage.
​
Features:
-
General Text: We display introductory text to help guide the user get logged into their Spotify account. We also have some text beneath the button emphasizing that we will be using their data to generate our wraps.
-
Login Button: Clicking the button redirects them to the Spotify login page (or authentication page if already previously logged in) to sign into their account and ask for permission to access/manipulate the users data. The user data is stored in Firebase.
​
User Stories:
-
Base User Story #1: The page allows you to log into your personal Spotify account from the app, and gives us access to your listening activity
-
Customizable User Story #12: The login and all associated user info are stored in our Firebase, which is how we implemented our backend.
Home (Logged In) Page:
This page is where users are automatically directed to right after logging into their personal Spotify account. It serves as the home page to where users can access other features. It welcomes the user, displaying their name and profile by pulling such information from the Spotify API, displays previously generated wraps, and has various buttons on the page to allow the user to generate wraps, and look at account settings (such as logging out or deleting their account).
​
Features
-
Welcome Text: We greet the user, displaying not only text welcoming them, but displaying their Spotify profile picture as well as instructions to generate a new wrap
-
Previous Wraps: We have a large section in the middle of the page dedicated to displaying users’ previous wrapped information. Once the user has actually gone and generated wraps, they will show up as summaries in the center of the page, updating as new wraps are made
-
My Account Button: Directs them to the Account page where they can log out or delete their account
-
Generate Wraps Button: Directs the user to the Wraps page where they can generate new wraps
​
User Stories
-
Base User Story #2: The page allows you to view your previous generated wraps, which are saved in a user’s profile that's registered in the Firebase database.
Wraps Page
The Wraps page is the meat of our app, allowing you to view your top tracks and artists, similar to Spotify wrapped except year-round. It is in slideshow format, displaying the image and name of the artist and/or song at the top of your listening activity. On top of that when clicking on the songs you can preview a 30 second clip of the song for a little extra spice
​
Features
-
Timeline Buttons: Each of the buttons (Current (1 month), 6 months, and 1 Year) generate a wrapped based on that span of time of a user’s top 5 artists and top 5 songs
-
The different slides guide the user through their listening habits based on the timespan they user selects.
-
The data persists using Firebase, meaning the previous wraps are stored and persist when the user logs in and out.
User Stories
-
Base User Story #1: On the page, we display your top 5 songs and top 5 artists based on the user data that we collect (about their listening habits.
-
Customizable User Story #5: When you click on each individual top track, you will be able to listen to a 30 second clip of the song, allowing you to preview
-
Customizable User Story #8: We have multiple buttons that allow for our wraps to be generated for different time spans such as a month, 6 months, and a year, which can change your overall listening activity.
Settings (My Account) Page
The settings, or My Account page, displays all the users detailed information and allows them to manage their account.
Features
-
User Profile Text: We display some more profile information such as number of followers, the profile picture, and instructions to delete or log out of their account
-
Logout Button: Clicking the button redirects them to the Spotify logout page, in which they are automatically logged out of their account.
-
Delete Account Button: Clicking the button will delete the user’s profile from our Firebase database, making them lose access to all previous wraps
User Stories
-
Base User Story #2: The page allows you to log out of your Spotify account as well as delete your account and data from our database
LLM Page
The LLM page (learning language model page) uses Google Gemini, which uses AI to generate text in response to being provided user data. In this case, after inputting the user’s listening activity in text form, we display personality traits and new artists for them to listen to so they can broaden their horizons.
​
Features
-
Generative Text: When the text is clicked on, the app uses Google Gemini to take in the user’s listening data in text form, and using an LLM, we display a description of the user’s personality based on their listening activity and recommend new songs/artists for them to listen to.
User Stories
-
Customizable User Story #3: The page allows you to receive an analysis of your personality and new recommendations for music through a learning language model, and will display different results as your music tastes change.
-
Customizable User Story #7: The page recommends the user new artists to listen to based on their listening habits.