Curated by Taste, Built with AI
How a free weekend of Lovable helped bring a passion project to life.
A good friend of mine loves making playlists, I love listening to them, and I also love designing things. The playlist titles typically come in series and follow themes related to food and other consumable items. I had an idea to make a website to showcase this friend's playlists and call it The Pantry, in hopes of making it easier to share the 100+ playlists they’ve created.
Luckily for me, I had a decent amount of free time this weekend, and it just so happened that Lovable was running an AI Showdown over Father’s Day weekend. This meant free access to Lovable for the next 48 hours, an opportunity I couldn’t pass up.
I hadn’t used Lovable much before, but this felt like the perfect time to get my hands dirty with the product. I already had a vision for what I wanted the site to look like, so I started in Figma to give the AI builder something to reference and speed up the process.
I knew I wanted the following:
A Visual First UI to showcase the cover art for the playlist.
An embedded Spotify player on the website.
A way to filter the playlist.
The PantrySpotify API access to pull playlist data
And a responsive website of course
The prompt was as followed:
“I want to build a Spotify playlist gallery site with a sleek, glassy UI that supports both light and dark modes. The color palette should use cool greys as the primary tones, giving it a modern, refined look.
The main feature should be a centered carousel that displays playlists using their cover art. Users can click left or right to navigate through the carousel.
Each playlist cover should have a hover effect that slightly lifts and extends it out of the stack, creating a 3D-like emphasis. When a user clicks on a cover, it should smoothly reveal the embedded Spotify playlist directly beneath the carousel, allowing users to play and explore the playlist without leaving the page.”
Combined with a quick Figma mockup, we were off to the races and after some refinements, this is where I landed. Not bad at all. The next major task was getting access to the Spotify API. I signed up for a developer account and used Supabase to connect to it. I had never used Supabase before, and my experience with databases is very limited. Thankfully, it wasn’t too difficult, and I was able to pull the playlist data into the website.
Titles, cover art, and embed links for all 100 playlists, just like that! With this in place, I was able to build out the filter feature. Using Lovable, I prompted it to print the playlist titles to the console. I then returned that data and instructed it to filter based on thematic similarities in the titles: fruit, bread, beverages, and more. While this isn’t a typical way to filter music, I felt it made the website more fun and engaging to use.
So there you have it.
Check out the website below and enjoy the music. This was a really fun project to build. AI is changing a lot right now, and while the future of design may be uncertain, being able to create something like this in under two hours is incredibly empowering.