I am excited to announce my hackathon project called Music Maestro 🎵
Music Maestro is a site that helps you craft custom playlists. The architecture uses AI to create tailored playlists based on any search criteria
🌐 View the live version of the site at https://musicmaestro.io/
💻 Check out the GitHub repo at https://github.com/Cool-Runningz/music-maestro
✨How it Works
When you arrive at the landing page, you will need to login to Spotify. After you've successfully logged in, you will be presented with a search input and some sample prompts like "90's nostalgia" or "Jazz vibes for a rainy day".
Search based on any criteria and in a matter of seconds the UI will display a custom generated playlist. If you have a Spotify premium account, you will be able to play the songs directly in the browser.
💡 How I Came up with the Idea
I waffled back and forth on ideas for this hackathon. With AI, the possibilities are endless, so I almost had too many options to choose from. Some potential ideas ranged from an image alt text generator, since I'm all about accessibility, to an app that generates timestamps for your podcast since my sister and I co-host a podcast together called Culture in Between.
Eventually, I had a lightbulb moment when I thought back to a time when I couldn't decide what songs I wanted to play. I've been a Spotify premium member for years, and although their app has a great search feature, searching for something vague like "capture the vibe of 'Feels like Summer' by Childish Gambino" isn't going to yield the best results.
At the time I had that fleeting thought, I didn't think of creating this myself. It wasn't until I saw the "AI for Tomorrow" hackathon pop up on my feed and noodled on myriads of ideas for a few days that I finally realized this might be a feasible (and interesting!) project.
🛠️ Tech Stack
Next.js (Full-stack web framework)
Tailwind CSS (Utility-first CSS framework)
Tailwind UI (Premium UI components designed with Tailwind CSS)
Catalyst (Modern UI Kit written by the Tailwind team)
Spotify API (Enables the creation of applications that can interact with Spotify's streaming service)
OpenAI (Platform for building AI products)
Heroicons (SVG icons)
SWR (React Hooks for Data Fetching)
NextAuth v5 (Authentication for Next.js)
TypeScript (JavaScript with syntax for types)
👷🏽♀️ Implementation Details
In the following sections, I will describe how I went about implementing this project and will provide a deeper dive into the technical details. The first detail I will share is that this project is still a work in progress. By default, Spotify apps have to get approved before they can be used by a wider audience so if you're interested in using this, let me know and I will try my best to get you early beta access.
🔐 Phase 1: Authentication
Connecting to Spotify is the crux of this project so I started with auth. I don't have previous experience working with authentication and I seldom work on the backend so this was all new territory. In the interest of time and ensuring I didn't screw this process up, I went with next-auth since it has a Spotify Provider that made authenticating with Spotify more manageable.
🎨 Phase 2: Scaffolding the UI
The second major thing I focused on was building out the UI. Design is not my strong suit so I leveraged one of the templates from Tailwind UI and tweaked it to suit the projects needs. Since the site consists of a single page, I went with a theme that would allow me to showcase the two main sections of the app: the search widget and the playlist.
I also leveraged Catalyst, which I would describe as Tailwinds take on a component library. I honestly forgot that I had access to that when I paid for the Tailwind UI package so being able to leverage pre-made, accessible, and aesthetically pleasing components, really expedited the UI process.
🚂 Phase 3: The Core Functionality
Now that user could login and view hardcoded results on the UI, I tackled the engine of the app - the generate functionality.
Once a user enters in a prompt and clicks 'generate', the UI makes an API call that hits the Next.js route handler. This is my first time working with the new Next.js app router so I learned a lot of terms and patterns along the way - like working with server components in React!
Anyway, the first thing the route handles does is initiate a call to OpenAI's chat completions API. I have a specific prompt that I pass to the system role and a longer more descriptive prompt that I pass to the user role. This whole process felt very similar to how one would interact with ChatGPT in the browser.
In addition to prompt engineering, I leveraged function calling to improve the output from OpenAI. I wanted a very specific JSON response but for some reason OpenAI has issues with returning properly formatted JSON. Before implementing function calling, there was approximately a 40% - 50% chance of receiving JSON. After the addition of functional calling, the consistency of JSON output improved to about 80% - 90%.
Once the app gets back a list of recommendations from OpenAI, the list is sanitized to remove any faulty JSON. Then it extracts out the info needed to search for the proper tracks in the Spotify search endpoint. Once the list of tracks is returned from Spotify, I flatten the response to only contain the necessary fields and return that back to the UI to interact with Spotify's Web Playback SDK. User's with a Spotify Premium account are then able to interact with the playback controls within their browser.
Phew! That's quite a few moving parts so here is a sketch of the general architecture of the app:
🔮 MVP and Beyond
I am super proud of what I’ve been able to accomplish for the hackathon, however, there are many more improvements that I would like to make in the future. Below is a list of some items that I would like to add post-MVP.
Refresh tokens - Spotify's access tokens expire every hour so I manually set the session to expire at the same interval. Ideally, I would like the token to be refreshed in the background so that the user has a seamless experience without having to login and logout so often.
Save & Shuffle Playlists - It would be cool to expand the playlist functionality so that users could save a playlist if they liked what was generated. Inversely, if the user doesn't love the generated playlist but wants to keep the same prompt, they could "shuffle" the songs to get different results.
Train a model to generate more accurate results - The current suggestions that OpenAI provides are decent but it can lack variety and diversity. Utilizing a model that is more tailored to music recommendations would allow for better playlists.
El Fin 👋🏽
Thanks for reading about the journey to create this project. This has been a great learning experience and has taught me a lot about what it takes to implement a legit MVP.
As always, thank you for reading, and happy coding! Again, feel free to check out the site and view the GitHub repository.