Academic Project · Mixtape

Music Catalog Web App

Role

UX/UI Designer, Frontend/Backend Developer

Context

Individual Project, Academic Project

Timeline

2 weeks

Tools

React, Figma, Github, Claude Code

Overview

Mixtape is a music catalog web app for discovering albums, building your own mixtapes and writing reviews. It pulls real album data from the Deezer API and has separate experiences for visitors, signed in users and admins.

The Mixtape intro screen. An endless wall of album covers tilted in 3D that shuffle on every visit.

Research

A Figma research board. Musicboard's onboarding screens in a row, other music sites around them, and early ideas for the Mixtape pages.
Musicboard and other music apps studied before designing.

The project started with research into Musicboard and other music apps to see how they handle album pages, reviews and personal lists. The goal was to make browsing music feel personal and not like a database.

Sitemap and User Flow

Mixtape sitemap. The nav bar leads to the landing, discover, search, sign in and register pages. Signing in leads to the dashboard, profile, mixtape creation and reviews.
The full user flow from intro to dashboard.

Before any screens were designed, every page and what it holds was mapped out. Visitors can browse, search and discover. Signing in unlocks the dashboard, profile, mixtape creation and reviews.

Design Process

Most screens went through several versions in Figma before being built. Here are the ones that changed the most.

Album page

Versions of the Mixtape album page. Two early ones on top with a small cover next to the tracklist. The final one below with a large cover, more albums by the artist and reviews.
Early versions on top. The final album page below.

The album page went through three versions. The early ones kept the cover small next to the tracklist. The final one gives the cover art the full left side and adds more albums by the artist and reviews underneath.

Dashboard

A Figma board of dashboard versions with the menu, mobile screens and the screens for naming and building a mixtape.
Every dashboard version on one Figma board.

The first dashboard was a welcome message with two buttons. Later versions added the spinning vinyl, the latest albums from Deezer, popular mixtapes and reviews, so signed in users land on something to explore.

Sign in and register

Register and sign in screens. Plain white first versions on the left. Dark Mixtape versions with the red accent and logo on the right.
Left: first version. Right: final design.

The first login screens were plain white forms. They were redesigned to match the dark Mixtape look with the red accent and logo, so signing in feels like part of the app.

Profile

Five versions of the profile page side by side, with notes on what changed between them.
Five rounds of the profile page.

The profile page took five rounds of feedback in Figma. Each version moved closer to a layout that puts liked songs, saved albums and mixtapes in clear rows.

Final Product

First impression

A rotating 3D album ring, then a section that stays pinned while the feature messages scroll past.
A slide in menu with staggered links and an equalizer button for the background music.

Explore

A 3D carousel with a glow that matches each album's colors and a live audio equalizer.

Your dashboard

A spinning vinyl and carousels that highlight a new album or mixtape every few seconds.

Discover

Switch between tracks, albums and mixtapes with a springy tab pill.
Filter by genre and release year. More results load as you scroll.
Search across everything and open any album page.
Save songs and albums to your profile in one tap.

Create and review

Create a mixtape step by step with a progress bar.
Write a review and get a confirmation once it's posted.

Profile

Everything you saved, created and reviewed in one place.
Edit your profile in a pop up without leaving the page.

Behind the scenes

An admin panel to manage users, mixtapes and reviews.

Responsive

A full walkthrough on desktop.
The full experience on mobile.

Reflection

The final Mixtape app delivers a cohesive, expressive music experience that feels personal and intentional. The project strengthened my skills in full-stack development, responsive UI design, and debugging real-world cross-browser issues. The result is a platform that clearly communicates its brand personality while remaining functional, fast, and enjoyable to use on any device.

View the project

Let's Build Together!

Let's collaborate on creating unique designs and functional websites. Reach out to discuss how I can contribute to your team and help bring your ideas to life.

Let's Connect