All Projects

Spotify Wrapper

Full Stack Developer · Fall 2024

Objects and Design

Overview

A team web app that creates custom Spotify Wrapped-style reviews using the Spotify API, built with Django by a team of five over three scrum sprints.

Highlights

  • Collaborated with a team of 4 other Computer Science and Computational Media students to develop a web app using the Django framework, writing backend code in Python and frontend code with HTML, JavaScript, and tailwindcss.
  • Completed the project using the scrum development process in 3 two-week sprints, creating in-depth plans and retrospectives for each sprint.
  • Communicated with TAs (posing as clients) for design requirements and project updates, managed and assigned project tasks using Notion.
  • Designed a storage scheme for user data allowing for efficient management of user profiles, songs, artists, and stats.
  • Maintained the codebase using GitHub for version control.
Spotify Wrapper web app

The Project

Spotify Wrapper was the second team project in Georgia Tech’s CS 2340, Objects and Design. The brief was to build a Spotify Wrapped-style website with Django and the Spotify Web API. One rule shaped a lot of the work: wrapper libraries like Spotipy weren’t allowed, so every request to Spotify, including the OAuth login flow, had to be written by hand.

Every team had to complete four base user stories: a slideshow summary of the user’s listening taste, accounts that save past wraps, an aesthetic and responsive UI, and no secrets committed to GitHub. On top of those, we picked at least 21 story points from a menu of optional features. A mentor TA acted as our client and graded the result.

The Spotify Wrapper web app

What It Does

  • Spotify login: users create an account and link it to Spotify with a “Log in with Spotify” button.
  • Stats page: shows the user’s top 50 tracks and artists and top 10 albums and genres, with a play button for song previews.
  • Adjustable time range: stats and wraps can cover the last month, six months, or year, matching Spotify’s short, medium, and long term data.
  • The Wrap: an animated slideshow of top genres, albums, and tracks, ending with a “unique or basic” reveal of the user’s taste. It has a higher-or-lower game built from the user’s top items, and the user’s own songs play in the background.
  • Saved wraps: every wrap is stored and can be reopened or deleted later.
  • Sharing: one-click sharing to X, Reddit, or a copied link.
  • Extras: dark mode, a mobile-friendly layout, a page for contacting the developers, and account settings with account deletion.

The app is running again at denayeisnotokay.pythonanywhere.com.

My Role

I was one of two full-stack developers on a team of five. The team site sums up my main contribution as building wrap generation on the back end and the animations that present it on the front end. I also owned or co-owned most of our optional user stories, and often helped teammates on the front end and back end when they got stuck.

Generating the Wrap

Spotify’s top-items endpoint returns only tracks and artists. I wrote the requests that fetch the extra data behind the stats page and the wrap, like top albums and genres, then built the stats page itself. With Camtien Nguyen, our front-end developer, I designed the wrap slides in Figma and implemented the wrap display in code.

Linking Spotify accounts

I connected our Django user accounts to Spotify, so each user’s data could be pulled from the API. Since every other feature depends on Spotify data, this was one of the first things we finished in Sprint 1.

Animation and audio

I owned the transition animations story, using GSAP for the transitions between wrap slides and our UI library for hover effects. For the song clips story, I added the preview button on the stats page and the background music that plays during a wrap.

Responsive UI and dark mode

I owned the phone-friendly UI story, worth 8 points and the largest one we completed. I built the responsive grid layout that the main pages use. I also owned dark mode, including picking the dark color palette and building the theme switcher. With Camtien, I mocked up the site’s pages in Figma and implemented them.

Sharing and contact

I implemented the share links for each social platform and wrote the back end for the contact page, which sends visitors’ messages to the team.

Process

We ran the project as three two-week Scrum sprints, from October 14 to November 25, 2024. Elijah Rabinovich was our Scrum master and Matthew Nehme-Haily was product owner. Each sprint began with a written plan and ended with individual and team retrospectives, which shaped the plan for the next sprint.

How we organized

  • Notion as the hub: every user story from the spec went into a prioritized backlog. Before starting work, we split each story into tasks with an owner and a due date, which gave the Scrum master a clear view of what should be finishing when.
  • Twice-weekly reports: each member posted progress in our Discord twice a week. We moved these from Monday and Wednesday to Tuesday and Saturday after Sprint 1, because those days fit better around when people actually got work done.
  • Pairs and subgroups: we split into small groups for individual features, so people could share skills and work in parallel. I paired with Camtien on most of the front end.
  • Client check-ins: we met with our TA client every class and set up extra meetings to show mini-demos and get design feedback.
  • Decisions: made as a group by two-thirds vote, with another teammate mediating any disagreement.

How the sprints went

Sprint 1 · Oct 14–28

We set an ambitious goal: all four base stories plus enough optional stories to pass 21 points. We didn’t finish everything, partly because of the time spent learning Django and the Spotify API, but we built the foundation: accounts, Spotify linking, the visual theme, and the page structure. Three stories were fully done, and two of them, dark mode and transition animations, were mine.

Sprint 2 · Oct 28–Nov 11

We carried over the unfinished stories and added hosting, holiday wraps, and Duo-Wrapped, expecting to work faster now that the base was in place. Exams and extracurriculars hit the whole team at once, and most of this sprint’s work slipped. Our retrospective was honest about it, and the main takeaway was simple: schedule time to work together.

Sprint 3 · Nov 11–25

We focused on the core stories, the wrap itself and saved wraps, and planned group work sessions instead of relying on everyone finding time alone. Wrap generation, song clips, time ranges, sharing, the contact page, and hosting all landed in this sprint. We dropped holiday wraps and Duo-Wrapped rather than ship them half-done.

By the numbers

  • 3 two-week sprints, 5 developers
  • 4 of 4 base user stories completed
  • Over 21 optional story points completed, across phone-friendly UI, hosting, song clips, time ranges, dark mode, sharing, transitions, the contact page, and an in-wrap game
  • I was assigned to 6 of those optional stories, plus 3 of the 4 base stories

Supplemental Resources