Roast My Last.fm Used AI

The first major step was implementing the new pre-roast scanner animation. The primary goal was to transform the initial data-loading phase from a static waiting period into an entertaining and interactive experience. This feature cycles through a selection of the user's top albums and recent tracks, and to power it, a new API endpoint was created to generate a unique, snarky comment for each item as it appears.

After building this core feature, I shifted focus to refining the final screen where the roast is delivered, ensuring the layout was clean and the presentation was impactful.

Finally, to tie everything together, I integrated framer-motion. This was a crucial step to ensure the transitions between the different stages of the intro sequence were seamless. Specifically, it smoothed out the flow between the initial Welcome message, the Getting your data... text, the scanner animation itself, and the final Alright, I've seen your data. Ready to face the music? prompt. This added the necessary layer of visual polish, creating a cohesive and professional-feeling experience without any jarring jumps between states.

I reworked how the AI-powered roast actually talks to users. I wanted the experience to feel much more like a real, snarky conversation, rather than a set of canned responses. This meant a full rewrite of the flow that generates questions and handles user replies. Now, the system uses AI to come up with personalized, witty questions on the fly and stitches together the conversation based on both the user’s data and their answers. The logic for image-based choices, sliders, and multiple choice questions all got smarter, and the responses are shorter, punchier, and much funnier. There’s even a series of custom intro, “no data”, and outro messages, all written to roast or dismiss the user in creative ways.

Finally, I gave the entire UI a makeover to match the new personality of the app. The look is much cleaner and more distinctive, with a premium red, warm off-white, and cool gray palette, and elegant typography using Playfair Display and Montserrat. On top of that, I added a typing animation for the AI’s messages, making the conversation feel more alive and interactive. The result is a much more engaging and visually cohesive experience, one that feels both playful and polished from start to finish.

The project started as just a simple idea. I began by setting up the bare bones of the application, authorization, and fetching the data from Last.FM's API

My first real task was tackling a security issue. I needed to connect to the Last.fm API to get user data, but I had to make sure my API key was kept secret and not exposed in the browser for anyone to see. I quickly reworked how the app gets its data, creating a secure, server-side channel that protected my key while still fetching all the music information I needed.

Once the connection was secure, I turned my attention to the data itself. The Last.fm API sends a lot of information, much of which I didn't need, like image links, tags and lists of similar artists. To keep things fast and focused, I started trimming this down, stripping out the unnecessary fields. I then cleaned up the artist bios, which were often messy, to make sure the data the data for AI was neat and consistent.

Then came the most challenging and exciting part: bringing the AI to life. My vision was for an interactive experience where the AI wouldn't just spit out a generic roast but would actually engage with the user without having a large database of prepared roasts and jokes, like the judge-my-music on pudding.cool does. Getting the AI to properly ask all the different types of questions was tricky. The last thing I did was write a detailed README file.