Role:
Full Stack Developer
Timeline:
6 weeks
Tools:
Python, HTML, CSS, Figma, Django, Webflow
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
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
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.
Webflow Development
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.
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.