MyVinyl

Album collection wall
Vinyl playing

Inspiration

I love the music experience that vinyl record player brought that you play one album at a time and the scratch from the groove immediately brings me into a different zone, which is very immersive experience to me.

However, the manual part is what i dont like. Each side of the record has 4-5 songs and you have to flip it or change to the next disc that just disrupted the listening experience. So, I wanted to create this interruption-free vinyl experience on people’s digital devices so that you can play your favorate vinlys anytime and anywhere.

Since vinyl is my fav device at the moment and it also gets a big trend nowadays so that’s the reason why my MVP started with vinyl device. In the future, my vision also includes to expand the nostalgic music experience to cassette, Mp3, or ipod lovers.

What it does

A fun and nostagia vinly music player for vinyl lovers who love play one album by one album without interruptions.

How we built it

Mostly, I relied on Bolt.new AI agent by giving it prompts. Login/Sign up experience by using Supabase <> Bolt.new integration. Design part, I was trying to import Figma UI link. But unfortunately, the results were far from my original UI design. Then, I ended up using AI generated UI.

Challenges we ran into

The design

When the first time i was generating the UI using a Figma link to a frame, AI did not take any component right. Not only the style looks off but aslo the shape of the vinyl record player looks completely different.
I also noticed that some style like pixel or the Mansalva font I was so excited about in my original design were compeltely gone in the first version.

sign up/ login with Supabase integration I got stuck in sign in troubles for quite some time. Issues happend:

it didnot recognize registered users.
it required multiple clicks to sign in.
it popped up some random debugging wordings on the UI.

Spotify integration

I cannot test Spotify connection in the local environment since the Redirect URL in Spotify Dev account has to be: https:// while local URL is http://. So, for solving this, I deployed to Netlify and with every prompt change, I need to deploy first to test. I wish I new a better solution at the time.
The Supabase integration made the code stuck in an infite loading page while the front end was supposed to display all the albums and songs results from Spotify. My teammate solved this by looking up online and saw other people run into the same bug with Supabase.

Accomplishments that we're proud of

Successfully shipped MVP within 2 weeks with 30M tokens.
Initially, I was thinking starting from import local music files as the MVP. But it ended up enabling Spotify integration, which makes this app able to reach broader audiences.

What we learned

I am a PM coming from B2B background and this is my first time build consumer products. Through building this product, I learned about the entire end-2-end product design from signup/login to API integration, front end display and data storage work together as a whole.

Some experience I gained from vibe coding:

start with core features first and build more nice-to-have feature later on

I included detailed user flows, especially how to what the experience would be like for Spotify integration, e.g. scenarios like first time integration, after 1st time, check Spotify premium expiration date, auto sync and when to disconnect and reconnect.

As i mentioned above, it tooks me 10M+ tokens to fix Spotify integration while the previous UI design on my music playing page was completely changed while fixing Spotify integration.

Build each major integration one at a time

I planned to be very comprehensive in the PRD so i layed out every module component and put in the first prompt all at once, including Supabase sigin/signup flow, Spotify integration and UI design. But the first prompt would be impossible get everything right. While I am fixing Spotify connection flow, and sign in feature was not working properply either, it made the debugging so much harder because with every prompt to fix Spotify connection, I need to sign in first and it then test.

Learned Figma design for the first time I also worked on Figma design for the first time though i did not have enough token to ask AI agent to replicate the exact same design i wanted. But i enjoyed so much learning about creating objects using different shapes via pen tool, abstract, union or mask features. I also fell absolutely in love with a few different styles such as pixel art, doodles, ect.as i was exploring the styles for my product’s design.

What's next for MyVinyl

Refine audio effect with arm dropping and groove needle sound
Add more nostalgia experience to walkman and ipod
Expand laptop experience to iphone and ipad for a standalone app and a lockscreen widget