Our
Features
Addressing User Stories
As a requirement of the project, we addressed all base user stories through the development of our Spotify Wrapped product, creating accounts in our database, and carefully curating our development process.
​
In addition to those base user stories, we selected a variety of additional user stories that went above our needed total points in order to ensure we met the end requirements and created the best user experience possible.
​
Each story is discussed in further detail below.
Base User Stories
Base User Story #1
The Wrapped
The main feature of our site is the Spotify Wrapped itself, which consists of 8 interactive slides that give the user information about their top artists, listening habits, favorite genres, and more. An example of each slide is shown to the left in the order they appear on our site.
Base User Story #2
Accounts & Saving Wraps
To create an account with us, users must log in with Spotify, similar to how many sites have you log in with Google. Once the user logs in, we'll check if they have an account with us. If not, they're prompted to create one by providing a username. This enables users to set up an account assosciated with their Spotify login to access their information.
​
Once logged in, a user can save their current wrap to their account to view again later after their wrapped has changed. These saved wraps can also be deleted by the user and are automatically deleted if the account is terminated.
​
Additionally, users can log out of their account by logging out with us OR with Spotify and can delete their account and assosciated data on our site while preserving their Spotify account.
Base User Story #3
Aesthetically Pleasing & Dynamic
Among the various other themes and touch-ups done to UI for other user stories, our default site consists of a green and black theme to emphasize the close relationship with Spotify. It feaures a simplistic landing page that is easy to navigate for new users and automatically prompts logins when necessary. Our buttons respond to both hovers and clicks and the imagery on various pages uses subtle animations to bring life and responsiveness to the screen.
Base User Story #4
Development Security
In order to ensure that our API key is kept secret, we have privately shared the key and committed a placeholder 'API-KEY-HERE' to github instead. Additionally, our .gitignore file, derived from the course's EdDiscussion, serves to avoid accidentally committing unwanted files and secrets such as the API key.
Custom Selection of User Stories
User Story #3
Mobile Version [8 points]
By adding Bootstrap to our HTML, we've been able to make a site that dynamically fits a variety of screen dimensions, including mobile. Testing and demo for our mobile version has been done using chrome's inspector by switching it to mobile mode. Everything from our wrapped to games to account information will appear cleanly across devices.
User Story #5
Song Clips [3 points]
We had implemented the autoplay of some of the user's top songs during each slide of the wrapped as well as the ability to click play when the topmost song was displayed. However, due to changes in the Spotify API, this functionality is depreciated.
​
The original code remains intact and, instead, one of the slides (right image) allows users to click on their top songs to get redirected and be able to listen directly on Spotify.
User Story #7
Complex & Holiday Games [11 points]
For our complex game, we created a puzzle based on an image of one of the user's most listened to artists. The puzzle starts by randomly selecting an artist and breaking their image up in to squares, then shuffling those squares on the canvas. A user can complete the puzzle by dragging the pieces to the correct place on the canvas and completing the image.
​
For our holiday game, we made a Christmas themed hangman. All of the answers are related to Spotify Christmas music in some way and the themeing of the game features candy cane stripes and falling snowflakes.
User Story #10
Site Themes [3 points]
Our site themes are light mode, dark mode, holiday mode and halloween mode. They all can be toggled on the landing page, allowing any user to instantly customize their experience. Our light and dark modes swap their primary colors to show an opposite effect. The holiday mode utilizes a red gradient and animated snow to create a festive Christmas display. The halloween mode uses an orange and purple gradient with spooky emojis falling down. All themes are illustrated in the slides to the right.
User Story #14
Animations & Hovers [2 points]
Our Spotify wrapped showcases a variety of engaging graphics, including animations that occur when switching to a new slide, animations that loop while viewing a slide, and a graph with hover effects that allow you to see more details. These visual provide for a more immersive and eye-catching experience. Examples of all of the above can be seen in the slideshow to the left.
User Story #15
Contact the Developers [1 point]
This simplistic page of our site sort of acts as the credits. It details who worked on the project, in what capacity, and why/how we made it. Additionally, it lists our email in a clickable link (automatically opens a letter to us) so that users can easy write to the developers with feedback.
User Story #17
Wire-flow Diagram [1 point]
Presented to our TA during the first sprint, our wire-flow diagram guides frontend developers by providing a sort of layout for what the side should look like and how it can be navigated and exhibits our use of top-down software development practices.
​
See the figma prototype here
