Check it out now!

Spotty's Playback

Who we are

Arshiya

Scrum Master

Designed and Implemented the UI for the main web pages
Developed the embedded game for a more interactive experience
Ensured all pages were responsive and added effects for a dynamic website

LinkedIn: https://www.linkedin.com/in/arshiya-rahman/

Stepan

Product owner

Implemented the base for the backend
Set up CI/CD
Integrated with Gemini (LLM) and Spotify APIs
Connected to Google for authentication

LinkedIn: https://www.linkedin.com/in/stepan-shabalin-155a08237/

Cruz

Full Stack Developer

Planned application Design and Interface on figma
Integrated several application design and interface pages into front-end code
Utilized Django's Language Internalization for Language Toggling
Created a dark/light mode toggle
Developed the backend logic for exploring published Spotify Wraps

LinkedIn: https://www.linkedin.com/in/cruz-guo/

Atharva

Full Stack Developer

Planned & created the website's design and layout in Figma
Implemented pages and integrated them with back-end
Created light mode

LinkedIn: https://www.linkedin.com/in/athkal/

Katie

Frontend Developer

Worked on website design and layout in Figma
Created 3D models using Autodesk Fusion to be incorporated into website's UI
Developed frontend design for the user profile/saved wrapped page
Integrated frontend design with backend logic for website functionality

LinkedIn:

https://www.linkedin.com/in/katie-le-tran/

What we built

Live Demo

Watch Spotty's Playback in action:

Create and view wraps

Using the Spotify Web API, user's can see unique summaries of their listening history over the past month, six months, or year. User's will hear their top song throughout their wrap to increase immersion., Each summary is saved to their profile, for them to view at their leisure, or post on social media for the world to see.

Play a themed game

Inside each wrap, users have the option of playing a 3D First-Person-Shooter game to quiz themselves on their own listening history. Each level assigns answers to the targets, and the user must shoot the right target to progress. This adds another level of interaction to the Wrap experience.

Browse other people's wraps

On top of sharing their wraps to social medias, user's can view their friend's wraps in our Explore page. User's can compare their wraps with their friends, and find new music recommendations from other's listening history. This allows users to feel more connected to one another.

Be judged by Spotty

Spotty's never afraid to share his opinions. With each wrap, users will also get a sample of Spotty's take on their unique taste. Don't worry, we've asked him not to be too judgy.

Pick any langauge

Wanna share your wrap with someone halfway around the world? No problem! Language settings makes it easy to switch your wrapped experience seamlessly between 6 languages: English, Mandarin Chinese, Hindi, Spanish, Korean, and Japanese.

Share to social media

The only thing better than having great taste is being able to show others that you have great taste! Show off proudly with the share buttons. They let you post on Twitter, Facebook, Reddit, and even LinkedIn - let us know if Spotty finds you a job.

Process: Methodology

Scrum

We utilized Scrum development methodologies to allow for easier revisions, more collaboration, and higher customer satisfaction. By putting people and communication first, we're able to create a product that highlights customer needs while increasing team efficiency.

By organizing our development process into two "sprints", we can prioritize certain user stories and ensure that the product has its core functionalities. Additionally, we can dynamically revise our work flow by reflecting on the previous sprint. We split out work into two two-week sprints, where the first focused on implementing core functionalities and the second focused on styling the webpage.

Daily-Stand-Ups allow for the customer and individual team members to always be on the same page when it comes to product development. By sending updates each day on what progress has been made, we're able to always have a plan moving forward and ensure every member is pulling their weight.

See our Sprint log here

Description: How we did it

Django

We also used Django to help create the frontend and backend applications. For the backend, we used Python to create models and methods to store and retrieve the appropriate data from our database and ensured URLs of our web application were correct. For the frontend, we used HTML, CSS, and JavaScript to format the information from the backend on our web application.

A-Frame and THREE.js

Our login screen is procedurally 3D animated using THREE.js.

We used A-Frame to render our mascot, Spotty, in 3D and make his gaze follow the mouse cursor on hover. We also made our (mobile-friendly!) 3D first-person shooter game in A-Frame.

Tailwind

We focused on a minimalistic yet retro theme for the website, balancing functionality with visual interest. Taking inspiration from sites like Playground and games like Neon Drive, our website creates a streamlined user experience that's stylized to fit the fun, Spotify theme. The use of iframes and htmx allows us to make all user Wraps one page, further streamlining their experience.
All webpages were implemented using TailwindCSS, allowing for responsive and mobile friendly styling so our website looks great regardless of how the user wants to view it. This also allowed us to easily add dark/light mode toggling, based off the user's preference.
View our Figma design process here.

LLM integration

Using the Gemini Flash API, we incorporated a large language model into our project to generate personalized user descriptions based on music taste. Based on a user's top genre, Gemini Flash generates personalized LLM data, including what animal a user would be, what type of clothes the user would wear, and the user's MBTI type based on their top genre.

Github & CI/CD

We set up CI/CD for our Github repository. Upon every commit pushed to any branch, Github Actions runs the Ruff linter to check that the code has no syntax errors and is formatted correctly and then checks that the site can be deployed using Heroku CI. These conditions must be fulfilled for a pull request to be merged, and pushing straight to the main branch is prohibited, so random changes are unlikely to break the website. When someone merges a pull request, the production website is rebuilt from the main branch using Heroku's Github integration.