TuneFlow: iTunes Clone
TuneFlow is a music platform for artists to showcase and sell their music. I initially built this for my web and product design course, but expanded it further in my free time with additional pages and features. The project uses a simple front-end tech stack, with a stronger focus on product design principles like user flow optimization, intuitive navigation, and visual hierarchy.
Key features include a landing page, user authentication using local storage (I could’ve used a database, but it was beyond the scope of this project), a discover page, a payment and checkout flow, music upload (also stored locally), and an artist dashboard. The project was built using React.js and Material-UI, with all design work done in Figma.
Design
I started by mapping out the main flow from artist sign-up to music upload and purchase. Early on, I created wireframes to sketch out the layout and structure of key screens like the landing page, login, dashboard, and checkout. Once the flow felt clear, I moved into Figma to create high-fidelity mockups with attention to layout, spacing, and consistency.
The dashboard went through a few iterations to find the right balance between showing content and keeping it easy to navigate. For the upload and checkout pages, I focused on clarity and keeping the number of steps minimal.
Design
Landing Page
Login/Registration Page:
Artist Dashboard Page:
Upload Page:
Checkout Page:
Had a lot of fun building this out. I learned a lot about user flows, UI/UX, and building a product from scratch—mostly what those early design choices should be.
If you’re curious feel free to checkout the github below: