Role:

Full Stack Developer

Timeline:

6 weeks

Tools:

Python, HTML, CSS, Figma, Django, Webflow

Tarotify Wrapped

OVERVIEW

This project is a Django-based web app that showcases personalized Spotify listening insights. It features dynamic Spotify Wrapped-style slides, user accounts for saving past summaries, mobile-friendly design, and interactive elements like games and Duo-Wrapped comparisons. Throughout development, we followed Scrum methodology, implemented CI/CD pipelines, and hosted the app for public access.

My role was fullstack developer, and my main contributions centered around designing the UI assets and connecting the frontend code to the backend

This project is a Django-based web app that showcases personalized Spotify listening insights. It features dynamic Spotify Wrapped-style slides, user accounts for saving past summaries, mobile-friendly design, and interactive elements like games and Duo-Wrapped comparisons. Throughout development, we followed Scrum methodology, implemented CI/CD pipelines, and hosted the app for public access.

My role was fullstack developer, and my main contributions centered around designing the UI assets and connecting the frontend code to the backend

CONSTRAINTS

The project was required to include:

  • A login system where users must authenticate to access personalized content

  • Integration with Spotify to read user listening history

  • The ability for users to generate and manage customized Spotify “wraps”

  • A responsive and intuitive navigation structure

  • Visual customization options for accessibility and personalization

  • Localization support for multiple languages

  • Dedicated pages for team information and user feedback


To meet (and build beyond) those constraints, we delivered:

  • Account Authentication: Full login/logout, account creation, and account deletion functionality

  • Spotify Connectivity:

 Seamless OAuth connection to pull authorized listening data

  • Wrap Generation & History:

 Users can generate, save, revisit, and delete Spotify wrap summaries

  • Smart Navigation:

 Logo-as-home-button, clear routing to Account, Wraps, and Contact pages

  • Theme Personalization:

 Automatic light/dark mode based on system preferences, manual toggling, and a playful Rainbow Mode

  • Multilingual Support:

 UI available in three languages with quick switching

  • Community & Transparency:

 About page showcasing the team and a Contact page for submitting feedback

The project was required to include:

  • A login system where users must authenticate to access personalized content

  • Integration with Spotify to read user listening history

  • The ability for users to generate and manage customized Spotify “wraps”

  • A responsive and intuitive navigation structure

  • Visual customization options for accessibility and personalization

  • Localization support for multiple languages

  • Dedicated pages for team information and user feedback


To meet (and build beyond) those constraints, we delivered:

  • Account Authentication: Full login/logout, account creation, and account deletion functionality

  • Spotify Connectivity:

 Seamless OAuth connection to pull authorized listening data

  • Wrap Generation & History:

 Users can generate, save, revisit, and delete Spotify wrap summaries

  • Smart Navigation:

 Logo-as-home-button, clear routing to Account, Wraps, and Contact pages

  • Theme Personalization:

 Automatic light/dark mode based on system preferences, manual toggling, and a playful Rainbow Mode

  • Multilingual Support:

 UI available in three languages with quick switching

  • Community & Transparency:

 About page showcasing the team and a Contact page for submitting feedback

Background Color Toggle

PROCESS

Our team of four adopted an iterative, user-focused workflow grounded in Scrum methodology. We had 2-3 weekly standups in which we discussed what progress had been made, what needed to be done, and our goals for the rest of the week. Keeping constant communication in this way allowed us to adjust quicky as new needs emerged.

To keep a log of these standups and visualize our progress, we used Trello. For communication between members and our client/mentor TA, we used Discord. Throughout development, we emphasized collaboration, planning, and continuous refinement to ensure a smooth and intentional build. It was necessary to communicate with our client as much as possible to ensure a product that satisfied their desired outcome and reflected any needed changes. Each member was individually assigned a core user story to complete before we worked together to integrate them seamlessly.

Our team of four adopted an iterative, user-focused workflow grounded in Scrum methodology. We had 2-3 weekly standups in which we discussed what progress had been made, what needed to be done, and our goals for the rest of the week. Keeping constant communication in this way allowed us to adjust quicky as new needs emerged.

To keep a log of these standups and visualize our progress, we used Trello. For communication between members and our client/mentor TA, we used Discord. Throughout development, we emphasized collaboration, planning, and continuous refinement to ensure a smooth and intentional build. It was necessary to communicate with our client as much as possible to ensure a product that satisfied their desired outcome and reflected any needed changes. Each member was individually assigned a core user story to complete before we worked together to integrate them seamlessly.

Webflow Development

Prior to development, we set the stage by creating:

  • wireframes

  • UI Flow diagrams

  • feature maps

Prior to development, we set the stage by creating:

  • wireframes

  • UI Flow diagrams

  • feature maps

UI Flow Diagram

This early planning allowed us to share the vision we had for the end product and ensure that it matched our initial intent. This resulted in a smoother development pipeline with fewer redesigns that saved time and allowed for a more cohesive user experience. Every team member contributed input on visual direction, using user appeal and clarity as our guiding metrics. Open communication helped us quickly resolve blockers and continuously refine both interface and functionality.

This early planning allowed us to share the vision we had for the end product and ensure that it matched our initial intent. This resulted in a smoother development pipeline with fewer redesigns that saved time and allowed for a more cohesive user experience. Every team member contributed input on visual direction, using user appeal and clarity as our guiding metrics. Open communication helped us quickly resolve blockers and continuously refine both interface and functionality.

This early planning allowed us to share the vision we had for the end product and ensure that it matched our initial intent. This resulted in a smoother development pipeline with fewer redesigns that saved time and allowed for a more cohesive user experience. Every team member contributed input on visual direction, using user appeal and clarity as our guiding metrics. Open communication helped us quickly resolve blockers and continuously refine both interface and functionality.

Figma Prototypes

FINAL PRODUCT

Wrapped Slides

DEMO VIDEO
TAKEAWAYS

This project allowed me to learn greatly in both hard and soft skills.

I better understood software architecture through my work in connecting the frontend and backend code. I saw how important clean code is for large projects, how to manage multiple dependencies, and how to establish a workflow from backend to frontend. This experience helped me to think more holistically about projects—to understand that each feature was not isolated, but part of a larger interdependent structure.

Additionally, being a collaborative project reliant on 4 group members meant that communicating every step of the way and optimizing our joint skill set was crucial. Working across different strengths reinforced the importance of translating ideas between technical and conceptual perspectives and I learned to adapt my role as new needs emerged.

These takeaways continue to inform how I design and build, grounding technical decisions in clarity, collaboration, and long-term structure rather than isolated solutions. Ultimately, this project reinforced that strong outcomes come from both thoughtful technical foundations and intentional collaboration.

This project allowed me to learn greatly in both hard and soft skills.

I better understood software architecture through my work in connecting the frontend and backend code. I saw how important clean code is for large projects, how to manage multiple dependencies, and how to establish a workflow from backend to frontend. This experience helped me to think more holistically about projects—to understand that each feature was not isolated, but part of a larger interdependent structure.

Additionally, being a collaborative project reliant on 4 group members meant that communicating every step of the way and optimizing our joint skill set was crucial. Working across different strengths reinforced the importance of translating ideas between technical and conceptual perspectives and I learned to adapt my role as new needs emerged.

These takeaways continue to inform how I design and build, grounding technical decisions in clarity, collaboration, and long-term structure rather than isolated solutions. Ultimately, this project reinforced that strong outcomes come from both thoughtful technical foundations and intentional collaboration.