vibe coding with no experience to $10K MRR with bolt.new - day 6

0:00I couldn't believe we are where we are just on day six. Literally 7 days ago. We had no idea, no product, no landing pages. But if you fast forward just 6 days later, we now have all of the frontend and backend connected. And that is coming from me with no experience coding, building out landing pages. And I want to just show you documenting the journey, however many days it takes on where we are right now, and just kind of showing you how we're making progress. The first few days were huge progressions, like milestones, and it got all built out with bolt. New, but just the last two days have proven to be a little bit more difficult in building out this product. That is just due to me not having a ton of experience. But as I

0:46learn and improvise and get better, it's going to be a much smoother flow. And that's the whole reason why we're doing this on the channel is we're just documenting the progress so people like yourself can pick up these tools, use them, and be confident on building out your idea. So, I know it's a little bit of a longer video, but stick around if you don't know how to connect a lot of back-end stuff. And also, I really appreciate all the people that have subscribed. Please leave comments and feedback and I just love to hear your story on where you're at in the process. So check it out. Okay, I really can't stop working on this project. So we're gonna keep on going and we're finally getting into the meat and potatoes of this build. So today's task is going to be focusing on integrating Superbase for the back end. This is what's going to

1:31store all the data, all the user signups, and kind of handle a lot of the backend. So, um, I've only done this one other time with other another project in the past. So, I don't have a ton of experience, but let me walk you through the steps and also give you kind of like a quick update on the direction of this build is I initially thought we would start off building it as a mobile app, but now I think that I want to just start with a web app first because it's going to be the quickest way where we can go to market and launch this. So, um, I do want to do a mobile app, but we're going to have a web app first where users could basically just take a photo and it automatically uploads to the web app. So, I'll get into more detail later. It just had kind of gave

2:17me more of a revelation of like that's the quickest way to go about it. Um, then we don't need to wait for app store approval and and all that. And then as the web app is up and going and and working and functioning, we could then start to build out the mobile app version. So let's see what we got going on here. Um we have prompted Bolt that we're looking to now take the next step in this project. So it gives you kind of a quick rundown. Um your app is live. The development server is now running and you can see your app in action. Here's what you have. So currently we have a landing page with the email capture your existing weight list. We have user authentication system and we have a photo capture flow with camera

3:03upload capability AI processing simulation which is ready for real AI integration which probably going to use uh Google for that like Google lens. uh item details, editing and review, multi-platform listing preview, which we're just going to focus on eBay for now, and the dashboard with all the sales and analytics, mobile ready features, responsive design, camera integration, touchfriendly interface, the next steps to build the MVP is setting up superbase, real database and authentication, and then after that add AI vision, Google vision API for item recognition and implementation for real pricing eBay completed listings data. So, we're going to also need to um sign

3:49up for a developer account with eBay, which can take like 7 to 14 business days. So, I'm going to be working on that here pretty soon. So, that's awesome. It gives you like a quick blueprint on what we're going to be doing. So, let's see. Um let's see. So, I'm in nondiscussion mode. So, ready to connect superbase and I already have an account ready to go. So, that's going to be really helpful uh for getting this thing built out. Okay, just to give you a quick breakdown. It says it's complete, but we still have to do work on our end. So, next steps to complete this setup is get our Superbase credentials. So, go to superbase.com, create a new project, get a project URL, a nonkey from the settings API, and

4:35update your EMV file with these values. Run the database migration in your Superbase dashboard. to go to the SQL editor. Copy and paste the migration file content. Run it and keep all the tables. Run it to create all the tables. Setup storage bucket in Superbase dashboard. Go to storage. Create new bucket called item images. Make it public so images can be displayed. Key features now available. Real users accounts with subscription management. Photo upload and storage and superbase. Item creation and eding and database persistence. database dashboard or database dashboard access with login button in header Google authentication ready for easy signup ready for testing.

5:22So this is getting exciting. This this has the potential to be coming out within the next month. And as long as we keep making progress every day just like this, we're going to be getting closer and closer. I don't know if you're fired up, but I'm fired up and I love seeing this come to pass. So, let's do what they're talking about. Get the Superbase all set up and let me get logged in and get it all the information that we need. All right, here we are in Superbase. I already had a previous project set up that we're not working with. So, let's see what it says for me to do. Guys, it's been a long time since I even did this. months ago we started a project and we didn't follow through with it. So

6:07now we are let's see what's working now. Okay. So we we go to superbase create a new project. Okay. Step by step new project organization. We'll just keep it close plus stuff. I don't know. I guess that's fine. Uh easy flip. So easy easy flip. Easy flip. Uh, database password. Amazing. New project created. Very cool. And what is the next step? So, next step is copy your project URL and anon key from settings. Update your env file with these values. Okay, let's do that. So,

6:53project URL and anon key from settings. Okay. Okay. So I gave it the project URL and the anon key. Now it's getting a little more intense. Okay. So go to the Superbase dashboard. Navigate to SQL editor in the left sidebar. Copy the content from Superbase migrations complete home sale helper schema SQL. Paste it into the SQL editor and run. This will create all your tables with the proper security policies. Okay, I found the SQL editor. I don't even know what that means, honestly. Probably should, but let's go there. And then we're going to need to copy, I think, something from git onto here. And then it can populate the proper tables

7:39is what I was thinking. So, let's see. Since I don't want to go into get and get all that stuff, let's see if I could just say, give me that information. I just love it. I love it. I love using this. It's just very easy simple for people like myself to just to just use it. So I just said um you know obviously the directions were to go get that copy the content from the GitHub uh file and uh I said well just give it to me. Um so I just said um can you just give me that content from that file and it says I see you have a migration file. There we go. um in your project. Here's the content from

8:26that file and we could just copy it. Um I think wow it is it is still writing that file. That is insane. So that's a lot of information. Um so basically we copy that and then paste it into the SQL editor and run. Okay, that was intense. There is a lot of information here. So, let's copy that and put it into the SQL editor and let's keep it going. Okay, here we are in the editor and I can just copy paste and then click run. And I have no idea what is going to happen. Error. Union types, platform type, and text cannot be matched. But guess what? Here's what I

9:11like. I could copy paste this into Bolt and I can just say error when running SQL. Fix it Bolt. Come on now. All right. I have no idea. I have no idea. This is This is the trickier part of this. I see the issue. There's a type mismatch in the SQL view. The platform column is an array of platform type enum values, but we're trying to match it with text type in the union. might as well just be in Chinese. Come on now. Let me fix this by creating a correct migration file. Perfect. I've created a fix for the SQL error. Here's what to do. Run the original migration with manual fix. Copy the original migration content I

9:57provided earlier. Before running it, find this section around line 650. Replace it with Okay, so 650, replace it with this. That's pretty simple, right? Okay. Is that even selected? Okay, we did that. Also, find this line. Well, I don't know where that is. Find this line where around 650. What is that line? Uh S platform. Oh my goodness. S platform. Okay, found it. S platform. comma splot and replace it with

10:45Okay. Oh my goodness. Okay. Where is it? There we go. All right. We got it. We got it. I don't even know if that's correct. Looks kind of funky. Oh, what? Oh, man. I just Okay. Oh, good. There's I can undo it. Okay. Um I did that opt um the error because the error occurs because post gql can't automatically match platform type enum arrays with text in a union operation. The fix explicitly cast to the types to text so they match properly. Um it just says after the fix it should

11:32all work. Okay, sounds good. Run it again. Just please work. Success. Oh my god. That's what I'm talking about. Let's go. I can retire now. Just call it done. That's nice. All right. So, love going through some problem solving with you because I just want to show you the raw real things that occur when trying to build an app. So, here we go. Back to it. back to work. All right, so we got it. Um, so we do need to actually connect. Try running the migration. Okay, so I use Whisper Flow to talk to my AI. And if you don't have Whisper Flow, I know I talk about

12:18it in every video. It's probably been the most impactful thing in my workflows this year, and I've only been using it for the last month, but I basically never use this device anymore other than the F1 button, which allows me to talk to the computer. I write all my emails, all my Twitter posts, all my all my marketing copy. I just brain dump it without having to think about typing. I know it's probably bad. I'm not the best typer. 60 words per minute, but uh it just really is so helpful. So, uh check that out. It's free. So, um so yeah. So, okay, it all worked and the com the SQL ran and succeeded. So, should the next thing be connecting my Superbase to

13:05Bolt? Because I don't think I have it connected yet. It says my Superbase is already connected, but when I go to integrations, it see shows that it's not. So, I don't know. We'll see. Um, it says it's connected. It says it's it says your Superbase is already connected to your Bolt project. We set that up earlier when you updated your ENV file with your Superbase credentials. Okay. Uh, however, there's one more critical step that we need to complete. Setting up the storage bucket for image uploads. Yay. Without this, the photo capture feature will not work. Let me help you set up the storage bucket and then we can test the full connection. Okay, so set up the storage bucket. Follow the instructions above. Test the connection by signing in and creating a

13:51listing. Your app will be fully functional. Really, is it that simple? Is it really that simple? Are we fully functional? I haven't even checked out the dashboard or anything. So, um, okay. I think we are getting closer though, which is pretty cool. So, let's see. It says above setting up the storage bucket. Where is that? Okay, setting up the storage bucket in your Superbase dashboard. Go to storage, click new bucket, and name item images. Okay, so that's sounds pretty easy. Uh let's go to the home page of this project and storage.

14:37Explore storage. What does it say? Um new bucket. This is cool. This is working, y'all. Item images. Uh make it public so images can be displayed in your app. And click create bucket. public bucket standard bucket buckets are are not protected. All right. Okay. Here we go. Um and configure authentication. All right. So, let's go. Um I set up the storage bucket. Now what?

15:28This is so cool, guys. This is so cool. Just saying. This is so cool. We got it. So, testing your complete app. I just feel like we're getting closer. I mean, this is insane to be able This is day six. Technically, it's night time on day five, but I'm just going to release this on day six. This is really cool. To be able to just go from nothing, zero, to where we're at now is just so cool. And that's why I want to encourage you to take action on whatever idea that you have. You may not know anything just like me, but I know that you can do it. Just talk to the AI. Whether you use

16:13cursor, claude code, wind surf, lovable, bolt, whatever, now is the time to build your idea. If you don't do it, someone else will. That's all I'm saying. So, we've added a sign-in button. I'm excited. Let's go test the authentication. So, we're going to check the sign-in button in the header. Try signing in with Google Oath or email password. You should be redirected to the dashboard after select a successful login. Okay, cool. Test the dashboard. View your user profile and stats. Check that the dashboard loads with real data from Superbase. Navigate between different tabs.

16:58And then we can test photo upload and item creation. Obviously, it won't work because I don't we're not connected to the eBay API. So, click new listing or the camera button. Upload a photo. Okay, we're just testing the storage right now. The AI will simulate analyzing the item. Okay, it's just going to like guess. Okay. Um, interesting. Okay, we're just checking the database right now. Okay, just to see if the info goes through. So cool. This is awesome. So the first step was click the sign in button. So we're going to go to our actual website

17:46and click sign in. But I've never signed up. So obviously an error already, which I love. I just I just copy pasteed and I go this is what we got. This is what happened. We got an error when I hit the sign-in button on the live site. Here's the error. All right. Pretty cool. Um, the error indicates that Google ooth provider is not enabled in your Superbase project. Let's fix this by enabling Google authentication in your Superbase dashboard and also a fallback email password option. All right. Okay. To set up the Google Oth, I need to um update my Google secret key and Google ID into Superbase. So the Google

18:33Oath will work for the signin. Let's do that. Okay. So it wants me to go to back to the dashboard, go to authentication, and then toggle Google, which where is it? Um let's see. So find Google. Navigate to authentication providers providers. Google. Okay. This is where I put in the ID and the secret key. Very cool. Okay. So after we added that information, we had to also do the same into our Google cloud console under APIs and services

19:19and credentials and had to copy paste that. So I believe so superbase can talk with the Google console is what I'm guessing what it does. It says when a user clicks sign in to Google on your app, they're redirected to Google to sign in. After successful sign in, Google redirects them back to this callback URL. Superbase process the authentication, redex them back to the app. Okay. Um, this sounds great. So, I think that was it, right? Okay. So, let's uh now that we have that all set, let's see if it works. I mean, come on now. Oh my goodness. We have a a thing here. Um, I got to

20:06sign it up. It's kind of like weird and janky. Um, full name Bo Johnson. Email address. We'll just use my default one. And cool. So, account created. It says to check my email to verify account. Let's see if that actually goes through. All right, we got the email and we have confirmed the email. And when I confirm the email, nothing happens. It says the site cannot be reached. Okay, let's just keep going.

20:51All right. I knew that this going to be a little little uh interesting here. Let's see. Huh. Nothing happens. Okay, let's go to Bolt. Okay, I click the sign in button and I create an account. Then I got an email confirmation and then when I click the link to confirm my email, it just takes me to a page where it says the site cannot be reached. and it takes me to this URL.

21:37Okay, I create an account on easyflip.ai and it sent me an email for confirmation. I clicked confirm my email. Just just tell it like it is to bolt. I mean, I don't know, honestly. I mean, if I were doing this by myself, it would uh just be a headache. It says it's a quick fix. Go to navigation. Navigate to authentication settings. Update site URL. And we'll do that. Okay. So, authentication settings. Uh, let's see what I thought I enabled this.

22:28Okay. this. Okay, hold on. Okay, now we got the Google enabled. I wonder if that was a huge problem. We'll see. Okay, so we go to authentication, which we are at now. Um, let's see. What did it say again? Says settings. Where is settings? Um, it might have it might be worth. All right, I found it under URL configuration. Done.

23:14Um, let's see. Um, that should have worked. Let's give it a second to update. Okay, so I got all the URLs updated in the authentication settings in Superbase and then I went back to easyflip.ai and it was just stuck on signing in, wasn't doing anything. So, um, it updated on Bolt. I told that to Bolt and it fixed better state management, automatic navigation, error handling, form reset, loading states. So, refresh your page to get the updated code. Click sign in. Create a new account

23:59and go from there. Okay. So, we'll just do that and see what happens. Now, it just says loading. All right. So, it said it fixed it again. Let's go back and loading still. Comment down Oh, comment down below what you think that was. But let's sign in. Let's just create a whole new account and see what happens. Okay, so we had a little difficulties with the loop of signing up, signing in, confirming the email, and then nothing happens. So, I just turned off con uh confirm email. Users will need to confirm their email address before signing in for the first time. I don't think we really need that because we're just trying to test and kind of

24:45get a good idea of what this whole uh dashboard looks like and such. So, um, the main point of this video of moving the ball down the field was just connecting the backend superbase to our landing page and they and so that they can communicate with each other and we don't really necessarily we can add the confirmation email back as we start to flesh this thing out. So, let's see what happens now. Oh my goodness. It says loading your account. Please wait while we set up your account. Okay. Um, yeah, I knew I knew today was going to be a little bit more challenging. I know the videos thus far have been pretty basic, pretty simple for people that have built apps before.

25:31Um, we are just getting into what I believe is going to be the most challenging part on my end for building this out. But now that I've simplified it and made it a lot more easier, I think it's going to be much easier than anticipated when we first started this project. but you're seeing all the behind the scenes and um just a lot of the troubleshooting that goes into building an app. All right, so with about the last hour, we've been figuring out how to just log into the dashboard. It's been a lot of little errors and I don't want to explain kind of really what was going on. It just seems like there's some kind of miscommunication between Superbase where all the data is stored

26:16and authenticating me as a user to sign in. So, what has been helpful is I've just been hitting F12 and bringing up the dev console and I've just been copying and pasting the error from the dev console from the landing page into Bolt and it's able to figure out what is exactly going on. So, I'm hopeful this time that it actually works. So, we will see. But okay, so now nothing happened. So then we're going to go F12 and then we're going to just copy paste all of this information is just what I've been doing and it's been helpful for help like helping problem solve this. Okay, I did that and I clicked sign in, entered my credentials,

27:01hit sign in again, nothing happened. So I copy pasted the developer console below. See what happens. It's been able to problem solve this so far. It wasn't going to be a breeze. I can see the issue. The migration I created is still getting a 403 forbidden error which means the RLS policies still are not working correctly. The error JSON object requested multiple rows returned suggests there might be multiple users with the same ID or some other database issue. Let me create a new migration to completely fix it. Okay. All right. Let's It keeps telling me

27:46that. It keeps telling me this should be fixed. So, let's see. Keeps telling me. It does. It sure does. Um I don't know if it's because I created multiple signins or I don't know like no nothing. All right. So let's see. Let's try it again. See what happens. Okay. So after about probably another hour of troubleshooting. So just to kind of give you a brief overview, something between the RLS row security authentication not communicating well

28:31with Superbase. That's the best that I could explain it. I needed to go into Superbase, the SQL editor, run a line of code to disable the RLS. And now what we have, ladies and gentlemen, is I can log in to this thing. So amazing that it actually works and you can see it here. Pretty cool. And all the tabs seem to work relatively well. So let's see what it says. Okay, excellent. You're now successfully authenticated and in the dashboard. The mock user approach worked perfectly. Now that authentication is working, let's create let's test the core functionality. Try clicking on the

29:16new listing or the camera icon to test the photo capture and item analysis workflow. This will help us see if the rest of the app is working properly. Once we confirm the main features are working, we can fix the database user profile creation. Set up storage bucket for image uploads. Test the full listing creation flow. For now, the app should work with the mock user data. The dashboard shows your stats and should be able to navigate through the different sections. Let me know. Okay. So, that's our next step. Go to new listing. Nothing works. Okay. When I click on new listing, nothing

30:02happens. We have made major progress. Oh my goodness. Finally. This was fun. So, uh, let's see. Let me just show you through the workflow and see how you like it. So, uh, let me sign out. Let me get out of the console. And here's what we got. Right. Here's what we got. This was like day one, laying the foundation. We really didn't get into the the nitty-gritty part of this project until today. You know, really connecting the the database and the dashboard and everything. So, now we can officially sign in with my email. It's amazing.

30:48And um hold on. Let let me see. I think I signed in the wrong one. Official. Let's see if it saves it. Okay. So, I could go to my listings overview. Don't fail on me. New listing. Boom. So now the user can upload the photo and um let's just upload this hammer and then analyze item. Boom. Easy flip says item analyzed successfully. Your listing is now active on eBay. Cool. And it just shows under the under the listing tab it works. So I know it's very clunky, very janky, very choppy, but hey, we got the buttons to work. everything clicks and

31:35works somewhat. So, um, very cool. So, I want to give you this brief overview of what we got going on now. Um, we can we actually have that we have the photo to the listing. It's great. But the next steps are setting up the superbase storage for real image uploads. So everything is stored in the database and then connecting real AI vision API which is Google vision and open AI and then integrating the eBay API for actual listing creation and then adding the real database user profiles. So it says you have a fun fully functional MVP that demonstrates the entire user experience. Users can now sign up, upload photos, see AI analysis

32:21results and manage their listings. What is exactly what you need? which is what exactly you need to validate the concept which is really cool really cool. Another thing I did in the meantime was in the idea browser um they have a um product feature specs feature feature specs feature they have a feature specs prompt that I just gave to Claude and it just says generate comprehensive feature specifications that provide clear direction for development teams. This should include detailed user stories, acceptance, criteria, technical requirements, impleation, implementation guidelines, and I just did that into claude and it came out with an amazing

33:06amazing prompt, which I'm going to feed back into bolt just for more context that it has. Um, but it's ex it's exactly following the steps of what we're doing. Anyways, we're going to keep it really simple and we're just going to connect with eBay to start and then go from there. I'm excited. This was day six. I feel like we accomplished a lot and I'm looking forward to just making progress, guys. That's what it's all about. Comment down below. What are your thoughts, feedback, what you do, what you thinking, let me know. And uh make sure you subscribe because we're going to be doing these videos every day. And sneak peek. We're going to have some podcasts coming up with other people building amazing projects, walking us through their workflows and what they're working on. So, it's not

33:52just going to be boring old me trying to figure things out. We're going to have people coming on Building Public TBD coming up here in the next week, two, three weeks. And I'm excited. I'm excited. So, thank you for all the new subscribers. We'll see you in the next one. Enjoy your weekend. Bye-bye.