Designing and building a learning tool during the emergence of AI-assisted development
Melodicus transforms any YouTube video into a focused practice environment. It brings the buried and disparate clips feature to the forefront of the interface and removes rabbit-hole inducing recommended content.
I started this project to build myself a helpful tool and learn some React concepts. It began with pre-AI methods of research / self-education and evolved into an AI-assisted development project. It also evolved to include some brand design concepts.
genesis
Despite an abundance books, videos, and workshops on how to learn the language of jazz and bebop, every teacher I've had says the same thing in the end: transcribe the solos of the masters.
YouTube provides an excellent, free catalog for this task, but the playback interface has drawbacks. YouTube is designed to enable exploration, not focus. The Clips feature, which enables looping content, has a high interaction cost and every Clip opens in a new tab.
Along with every new tab comes more recommendations and advertisements. The result is the absence of a unified interface for isolating, deconstructing, playing-back, and learning the various aspects of a song or solo.
my vibe
This project marked a transition in my development approach from traditional Stack Overflow, Google, and various forum searches, to leaning into AI-assisted programming through ChatGPT and Claude.
The shift to AI assistance accelerated my problem-solving. I think the time I spent teaching myself before the boon of AI tools helped position me perfectly for AI to truly 10x my output.
When I first started tinkering with this concept in 2023 I chose Chakra UI for my frontend out of sheer curiosity.
At the time of this writing (2025), I'd probably start with Shadcn and Tailwind as I'm more familiar with those UI patterns and syntax. Do I smell a refactor in the air?
I have a working branch with a Supabase integration for authentication, saving songs, and saving loops to a user record. But wanting to keep things simple and free, I have been exploring using Base64 URL encoding and unique URLs for users to keep track of their loops (this functionality is still a work in progress).
Every side project presents an opportunity for some amount of brand design.
Although Melodicus is meant to improve one's ear, I wanted to try and incorporate a symbol from standard musical notation into a logo.
I landed on this combination of the repeat symbol with the M letterform. This has enough character as a stand alone logo while easily fitting into a wordmark lockup.
YouTube thumbnails for the kind of music I'm interested in often feature images of original vinyl album covers. I wanted these classic covers to stand out on the song page.
I limited the color palette to off-whites and a deep charcoal, plus a couple of accent colors for system call outs.
The minimalist approach allows each song page to feel unique while maintining a unified core identity. I stuck with sans-serif system fonts for a contemporary, utilitarian, and approachable feel.
reflection
I have a sketch in my notes app from 2023 with the seed of an idea that became Melodicus. This project is a working example of the kind of unique, personalized software that AI enables.
Melodicus is a full-stack design and development accomplishment that leverages a little bit of every part of my intellect, creativity, curiousity, and dedication to growth.