I made AI build me a SaaS in just 8 days with No Code

0:00I'm going to walk you step by step through the process from day one to where we are at on day eight and kind of going over where we started and where we're at and kind of the vision for this project in hopes to inspire you to do the same. If you have an idea but you don't know how to put it into action. We're going to be walking you through the tools that we're using, where the idea came from, and kind of just walking you through the vision. So, no better time to be alive than now to start building. And I'm excited because 8 days ago, I didn't know anything about how to bring this idea to life. And just 8 days later, we have gotten so much progress done. The idea was inspired by ideabser.com where we initially got a foundation built of kind of how to go about

0:45building this project. It is an app that helps declutter. Basically, get your items listed onto eBay with just a few photos and a listings automatically created for you. Why I'm doing this project is because I'm already involved in the niche with already, you know, problems that are figured out with the avatar and kind of some of the things that I had problems with when I struggled reselling. So, that's why we chose this because we just already have a foundation built for reaching an audience. We already have a community. So that's why this was so attractive. There's so many ideas out there that you could be building right now, but this is the first one that we're attempting to kind of not only, you know, get it to market within just a few weeks to a few months, but also just hit the ground running. We already have a user base

1:30already over 80 emails signups for beta testing on our weight list. So that's kind of the rundown why we went with this idea. Check out ideabrowser.com if you're struggling to come up with ideas. want to go over the browser, want to go over the the dayto-day, and all of this is documented on the channel. So, day one, we built out the landing page, did some domain research, brand packaging. Days two through four, we're sitting a lot setting up a lot of the backend for email capture and collect connecting go high level and such, and the Google Analytics for monitoring traffic that goes to our landing page. Days four through six were a little bit more difficult because I had messed up one letter of my secret key from the Google

2:16console putting it into Superbase. That generated a lot of errors and that was a nightmare. Spent eight hours figuring that out. But once we got it fixed, we were then to apply for the eBay API developer account, which was just approved this morning. And now we're starting to integrate um Open AI GPT4 vision into our pro uh platform as well as today we are installing the environmental variables um which is day eight. So integrating environmental variables within Netlefi for eBay API and apply for the OpenAI GPT4 vision API and we are going to have more of a functioning app. So this is amazing. I'm excited. So if you just go here, we can just show you kind of where our landing

3:02pages. It's just the generic type of landing page that you would see generated. We're using bolt new to build this out. We are going to probably end up switching to using cloud code, but I need to learn and learn a lot. How do I even use that? So, um, bolt.new has been very nice and easy to for beginners like myself to build this out and get going. So, this is just a rough blueprint that we have built. Um, so we have the email capture system. So, that goes right into go high level. So, we could start nurturing the people that are interested in this project. So, um I don't have So, it's there's a slight bug right now where um I need to update those environmental variables to update the

3:48dashboard. cool things that we're adding into this that weren't initially in the idea browser, but I think that could be super helpful for resellers is having a basically an a reselling coach built into the platform because you're going to be able to sign into your eBay or Poshmark or Merkari, wherever you're selling your stuff and get those analytics transferred into your dashboard and you're going to be able to talk with voice commands back and forth based on your analytics saying, "Hey, what were some of my best sellers last year? what were some of my best sellers for the month? What were the best highest profit potential items? How long did these items take for to to sell? And so forth, you know, things like that. So, we'll be integrating that down the road as well as um kind of like a dashboard um a section in the dashboard

4:34where people can look up items that are like the fastest selling and you know just kind of what what items are selling for because on eBay itself is a very clunky like slow process looking all that up. So, we're kind of just going to help speed up the time in which it takes to get items listed on these platforms and just making it a little bit more of an easier experience with the use of AI. So, that's what we got going on. Wanted to give you a brief brief overview with all the people subscribing. I'm super thankful. So, let's implement these changes into Netlefi. You can see we're using bolt.ne. It's been super helpful with this process. And I'm going to get those things inputed into the environmental variables into Netlefi and then we're going to be able to take the

5:19next step and hopefully I can show you the dashboard. Those have been added and we are ready to deploy the project for the changes to take effect within Netlefi. This has been an amazing journey and I'm hoping that what we're really facing right now is we have the Google vision AI API connected. We are waiting to do the chat GPT vision API integration that is hopefully going to help with the accuracy from seeing and reading the context. Say you have a photo of a tag like a clothing tag like the Northace jacket size medium. I want it to be able to read that and add that context within the title. So that's what I'm hoping to get better in training the

6:06model. I also talked with Claude during this project. If you're not using Claude to help build out your projects, it's going to be a little bit more difficult for a beginner. So, I'm using Claude in conjunction with Bolt. New and kind of like brainstorming ideas and Claude has been super helpful. So, yesterday, last night, we were able to build out kind of a workflow for the Sup database. So it gets better over time and instead of relying on just Google Vision AI API and GPT4 vision, it's going to have also a database of its own to be able to recognize patterns of previously submitted listings. I hope that makes sense. That's how I kind of get it in my

6:51mind. Um, but I wanted to kind of just tell you that yeah, we are facing issues, but things that uh we're we're making progress on daily. So, this was just an issue that came up last night. It can identify simple objects like a hammer, a stapler, a keyboard, you know, but I wanted to take a next step further and I just told that to Claude within the project that we're working on, easyflip.ai, and it was able to kind of understand the the problems we're facing and develop a solution. So, we start training our own database on getting better. So through beta testing and through um offering this to other resellers, they're going to be able to improve the model over time before releasing it. So we have a more polished

7:37product. Okay, now we're back in Bolt and I'm simply just going to tell it that we finished up installing the environment variables and we'll see what the next step is. I have successfully inputed the environmental variables within Netlefi for eBay API. What would be the next step? All right. So, we've successfully integrated the eBay API within our Netlefi functions and all that is working. We actually have live data from eBay integrated into our dashboard which is awesome. And the next step is we need to integrate the Open AI API to have that GPT vision added to our kind of workflow to help analyze these photos. So, I just been working a lot with Claude recently to help progress this

8:25project down the field. So, I've been using Bolt as the main platform, right? But Bolt sometimes hallucinates. Bolt sometimes has a hard time when you have a lot of context. And I just felt like instead of wasting credits and tokens on Bolt um going through problems anytime we hit some type of hallucination event or getting stuck in some code um you know it it's really helpful to just copy paste the errors uh to Claude. I mean it's just been so amazing. Cloud can act as like that second brain deconstruct why the code's not working and then I just say fix this error and then help me give that fix to the developer that I'm

9:11working with. So it basically fixes all the problems and then I can give that data to Bolt to then implement it. So rather than wasting all the credits on Bolt, I can use Claude. I hope that makes sense. But it's been really helpful. Um and I wish I started it from the beginning. So using uh Claude, we're just basically going to follow the instructions on applying for the OpenAI key uh API key and then we're going to plug that into our Bolt project. So let's see uh openai.com and we're here. Let me pull this over to another tab so I can follow the instructions. And okay, so here we are. So sign up if you don't have an account. Um I think I do have an account somewhere. So, let me see. All right.

9:58So, I did have an account previously made from a while back. I'm surprised it remembered, but um we're going to go to settings, billing, and add payment method. I think we already have that set up. Let me check. All right. So, I already have the billing set up. So, that's awesome. And we basically step three is create API key. Click on your profile, select API keys, create new secret key, name it easy flip vision API and copy the key immediately and set our usage limits. So let's get the key first. All right, so we just got the key created easy flip vision API key and next we are going to go set usage limits so we can kind of not get

10:45overcharged. All right, our limits are set up. It's giving us a $120 budget, which I think should be okay. And then we have the email alert set up to when we start hitting the usage um limits. So after that, OpenAI Vision API pricing is very affordable. It says uh one cent per image. That's nice. Um and let's see for easy flip AI usage per listing. Um so very manageable cost it says um so environment variables for your developer once you get your API key. This is this and add this to your environment variables.

11:31Um okay I don't really get that part. Bring it over here. Um, so here we are. Environment variables. I'll just confirm that uh with bolt. Um, import notes. Why GPT4 vision instead of 3.5? GPT 3.5 doesn't have vision cap capabilities. Uh, vision 4 it was what we need for image recognition. Um, better results. Cool, cool, cool.

12:17All right, so let me head to Bolt and just tell them I got the um I have the OpenAI API secret key. What is the next step to create environment variables within Netlefi? Boom. All right. So, we're going to go to Netifi and add in these environmental variables. Let's go into that project overview project configuration. And then we're going to go into environmental variables. And we have a bunch set up here already.

13:04And we're gonna add variable single variable. And this one is called open AI API, I believe. Let's see. API key. Okay, here we go. And then we're going to add in that secret key as the value. Let's see. Key. And then secret key would go there. All right. And you can see the open API key has been added. So, let's go back to Bolt. And actually, I think I re I need to um I gota where am I? Okay, I have to deploy it. So, trigger deploy deploy project. Boom. While that's running, I'll go back to Bolt and tell them we

13:51are done. Thank you for confirming that I have just created the environmental variable and I have redeployed the project. What would be the next step? I think using that discuss button is really helpful to help the AI plan and just kind of understand what we're trying to do. Um, so it's also helps save you on tokens. So, uh, great. Now that you've set up the open API key, the environmental variable in Netify, and redeployed your project, the next crucial step is to retest the photo upload in the AI analysis flow. This will confirm whether the missing API key

14:37was indeed the cause of the previous issue. And uh, all right. So, looks like it is telling me to just go through the process again while it is deploying. It looks like it's pretty much almost done deploying through Netlefi and then we will test that out and see how it goes. Um, let's see. Easyflip.ai. Um, we are going to be working on making just a better landing page and a better backend. This was just all to get going to start. So, let's see. We are in. We have the dashboard. Um, we're still using the sandbox API from eBay. I haven't switched to the

15:22production API. I think that's why we're not getting fully um populated trending on eBay section. There's no photos. Um, let's see. So, that should be done on the Netlefi side. In progress. All right. It's working. It's doing its thing. And then I want to redo this whole thing, too. Um, I think it's a good blueprint, but I do want to just redo I want to be able to have dark mode as well. Um, but it works, right? It works. All we're trying to do is just test to see if the Google vision uh or if the GPT vision is

16:08working. So, let's see here. Close that out. Are we done? processing. Not quite yet. Let's just refresh. Okay, so it's done. Published. Published 32 seconds ago. Okay, let's try it and see what's going on. I like to test it in incognito mode first. Let's see. Let's sign in. Sign in with Google. All right. So, new listing, photos. I already have everything here. Test eBay photos. Boom. Boom. Boom. Boom. Let's see what happens.

16:54In theory, it should read the tag and at least know what the item is, get the size from the tag, and hopefully populate some keywords as well. See? So, nothing happened. And what I like to do when that happens is just hit F12 and it brings up the console. And I just copy paste all of this. Actually kind of happy that this happened so I could show you what I'm even talking about. So and then we go back to the deploys. Uh let's see. Boom. Boom. Boom. Something failed earlier. All right. Um and then we just go to claude

17:39and we close out of this. Uh another problem has come up. We have connected the open AI API but it just continues to come up with this error. I have pasted the console code and let's just see what happens because this has been super helpful for problem solving rather than going to bolt with the issue and having it figure it out. It's just nice to have this. Um it says I can see that the open AI function is now responding which is good but returning a 500 error instead of the previous 502. This means the function exists but something is failing inside. So it's going to kind of debug that and go through it. Um,

18:27okay. So, um, okay. I think I'm just going to be copy pasting all that into uh, Bolt. All right. It's saying that we're hitting another error, uh, 500 error, but I can go into the Netifi dashboard and view the function logs and look for the actual error that it's being that's being thrown and then we can just troubleshoot from there. So, let's go into that. Um, let's see. Functions, where are we at?

19:15functions. Here we go. And then it said click on open open AI vision analysis. I don't see it anywhere. All right. I found it under the logs and functions tab. I'm just going to copy paste this error into claude and go from there. So, I'm going to So, I'm going to give that error code to Claude and have it figure it out. So, I think that's just been the best way to go about problem solving. It's definitely just going to be the workflow from now on for me and go from there. Okay, it just says to give this entire artifact to my developer on Bolt and it

20:01will fix the problem. So, that is awesome. I love it. Let's do it. So, we copied that. go to bolt and then we hit the discuss. We want to make sure it's on discuss and then just copy paste that and then then it can start to formulate a plan on it on on its end and make sure it understands everything before we make changes. So what was causing the error? It says you're absolutely correct. The GPT4 vision preview has been depreciated and updating to a current model like GPT4 is essential for the AI word keyword optimization system to function correctly. I will implement the plan to update your Netifi functions with the corrected version you provided. Um, and

20:46I just say if you you're going through any workflow issues and getting really stuck with using like Bolt or Lovable um, you know, some of these more visual vibe coding platforms, use something like Claude or Chat GBT um, in your workflow to help analyze the problem so it can come up with a solution. So you can see here it came with a nice uh, plan and then we are going to implement this fix. All right. [snorts] And just a minute later, we have key changes made. Perfect. I've updated the Netlefi function and we are going to give this a try. And um so wait for the auto deploy. It's going to trigger the changes within Netlefi and automatically deploy. Test the flow and then monitor the console

21:33browser console for detailed logs. It says it should be working and the AI analysis should be working correctly. taking you to the item details page instead of returning to an upload screen. Let me know how the test goes. So, let's see if it's all completed in Netlifi. Go to deploys and 31 seconds to go. So, back to incognito mode. Sign in with Google. Let's see. Let's see. All right. New listing. Upload photos. I'm just trying to test it out on this one and see what happens. All right. Analyze item

22:18and let's see. Let's see. All right. So, now we go to F12. Copy paste this back in the cloud. Boom. Still getting an error. I have copy pasted the console code. Can you fix it and make it ready for me to give to my developer using bolt new so we could fix

23:04the changes? There we go. Let's see what it says. I can see now we're getting a 400 error code instead of 500, which means we're making good progress. Let me check the netifi function logs to see what's causing the 400 error and then provide you with a complete fix. This is amazing. Amazing. Okay, let's learn together. It says, I can now see we're getting a 400 error now, which is progress. The function exists and is responding. The 400 error is likely due to an image URL format issue or request structure problem. I've created a complete fix that's ready for your developer to implement into Bolt. The key changes graceful degradation, better image URL

23:50validation, robust error handling, always return success. Your app will never break. Okay, that's awesome. Okay, so for your developer, the code is ready to copy to base and bolt. They just need to replace the netfly function, update the client side error handling and test and deploy. So okay. So just copy paste that that artifact and then we're going to go back to bolt and give it to Bolt. I want to hit the discuss button feature first so we can formalize a plan and just copy paste the whole thing. See what happens. Okay. So we gave that to Bolt says, "Thank you for providing a comprehensive solution. I will implement the complete

24:36fix and should handle everything on its own." And looks like it automatically did what Claude told it to do. So that's amazing. So we are now ready to test this thing out. One thing that's been super helpful is just kind of cross-checking on Netlefi to see if it automatically depo deploys and triggers just to make sure that the changes we're making in Bolt are actually taking into effect. So that's really nice just to have this screen open to just kind of track the progress. So you can see it's published that change 35 seconds ago. So that means we can go into Bolt. We can open it up again and keep on testing. So, I I see it as we're making progress,

25:23and that's all that matters. So, uh we're going to hit new listing, upload photos. Let's see what it does with this one here. Let's just do three. Three photos. Really simple. I want the front, the tag, and the back of the item. And then analyze the item. See what happens. Same thing. Okay. So F12 going to go back to Claude.

26:09Okay, here is the next error after making those changes. Boom. See what it says. It's usually pretty quick in its response. Claude is amazing. I think it's one of the better ones. I can see the fixes are working perfectly. Here's what's happening. Your app is working perfectly. What's happening is the 502 error suggests that Netify function might be timing out or having a deployment issue. Okay. [sighs] Um,

26:54so I just explained what was going on. Um, it's creating the item successfully, but there's a navigation issue and generic AI analysis. The AI is giving generic results instead of a detailed analysis from your actual photos. Yes. So, fix it, Claude. Okay, just came up with another fix. Issue one is navigation fix looks look for this line in your code after item creation. Uh AI analysis. It's just providing a very generic uh result. So I'm just going to copy paste this into bolt and then give it the feedback with the discuss on and hit enter. See what happens.

27:41This has kind of been the process uh for me thus far is just hitting problems that I have no idea how to fix personally, but with the use of AI helps just become a little bit more clear. So, I will implement the navigation and AI analysis fixes you've outlined. This involves updating the photo capture component to correctly redirect after item creation enhancing the AI analysis in Netleifi. So, it's going to modify that and implement this fix. came up with a plan and now it's going to implement the fix. Awesome. Okay, so we have fixed those errors. Well, Bolt has and it has redeployed, so we're ready for testing again. Let's see what happens. Sign in.

28:27Go to the dashboard. New listing. Upload photos. I'm just going to use the test photos we've been doing. See what happens. Huh. All right. Same thing. Let's copy the console and give it back to Claude. Come on now. Sure

29:12there's an easier way to do that but back into claude we're going to just tell it seems like the same thing is happening on my end after uploading the photos it just goes back to the create listing tool let's check out the console code I have copy pasted it below See what happens. Perfect. I can see exactly what's happening now. The debug logs show the navigation is working correctly, but there's likely a routing issue. Let me analyze. I love it. Here's what's happening. Your app is creating the items perfectly, but there's no page to display the item

29:57details. So, the router shows a fail back or a fallback page. Once your developer adds the missing route and creates a simple items detail page component, users will be taken to their listings. Okay. All right. So, looks like I need to get this router configuration fix. Um, copy that. Go back to Bolt. Hit hit the discussion key. So, we're still having errors. So, we're still having errors. I took those errors from the console logs to

30:44Claude and it created a fix. Here's what to do. I like hitting the discuss feature first before I just have it implemented right away. That way it can develop a plan also helps save tokens like I've mentioned. All right. So it came back with this plan and diagnosed it. It says you've accurately identified a common scenario in authentication flows while you while the console log states route doesn't exist blah blah blah blah blah blah. The plan cool looks great. I probably should really read into it, but for the sake of this video, let's just have it implement the

31:29plan and go from there. Perfect. I've implemented the authentication redirect fix that resolves the navigation issue. Here's what changes accomplish. Cool, cool, cool. All right. Um, yeah, the problem we're having is after we upload the photos, they just go back to the create listing page when we should be making sure that it was analyzed correctly. So, all right, going into Netlifi deployed 25 seconds ago. Another error happening now. We can't even sign in. So, let's take this and take it to Claude. Awesome. I gave those instructions to my developer. But

32:15now this is happening after clicking Google signin. Okay, it says I can see the issue. There's a JavaScript error with the redirect path. It is not defined which is creating the Google signin flow which is breaking the Google signin flow. This happened when your developer was making the root route changes. Okay, I see the issue the error. Boom. Okay. So I'll copy that error. Go back to claw or go back to bolt. Go to the discussion and say we are getting an error after clicking Google signin. I took that error from the console to claude and came up with

33:01the solution. Here it is below. Boom. All right. So, again, came up with a solution. Um, it seems like there's a reference error related to the redirect path after clicking Google signin. So, very cool. Came up with a solution. Implement this fix. Okay. So, we're able to fix that previous issue. And let's see if the GPT vision is working. Um, this is kind of what it's been like, you know, going through these bugs, testing, testing, testing, making sure the flow works, and this is what it's

33:46like. You're getting the point of view of what it I've been going through. So, again, just takes us back to this create new listing after processing the images. So, we're going to hit F12. Just copy paste the whole thing. Go back to claude. Okay. Still getting errors. Here is the error from the Google console. Boom. See what it says. At least it analyzes it pretty quick. It says, "Excellent. I can see from the logs that the Google

34:32signin issue is now completely fixed. The authentication is working perfectly. The only remaining issue the only remaining issue is OpenAI vision 502 error which it which we already know about and your app handles gracefully with fallback keywords. Test question. When you upload photos now, does it take you to the items detail page instead of back to the upload page? It takes me to the upload page when it should be going to the item details page after analyzing the photos.

35:22I can see the issue. The logs show the navigation's working, but you're still seeing the upload page. That means the details ID route exists, but it's likely rendering the wrong component. Okay, so again, we're going to give this fix to bolt to implement the changes. Like I said, if you're not using cloud or chat GPT to help analyze some of the errors you're facing when building projects, it's going to really help with your workflow. It's going to save you a lot of time. It's also going to help you understand what are the problems you're facing broken down in plain English. For me, that is super helpful because I have no coding experience. You know, I'm still learning. So, this is really going to help fasttrack the learning process. So, you can see it came up with a fix. I guess it was just loading the wrong

36:07element or component after analyzing the photos. So, we're going to implement that and wait for the changes. All right, here it goes for the 9 millionth time. Let's see what happens. analyzing it should take us to a new screen and not just take us to the create new listing page. Did it again. All right, let's copy paste the console code and give it back to Claude. Amazing. That fix worked. I was able to get to the next page, but now the AI analysis is very generic. It says it's a pre-owned fashion item. It says it's an unknown brand and it doesn't read the size. So, also the SEO keywords are terrible.

36:55Um, but yeah, so the whole point of connecting the GPT4 Vision API was to identify these items better. I don't know what's going on. After about 4 hours of going through circles, we got it, guys. We got it. It is now able to identify items. Holy moly. And I want to walk you through the process and just take you through it. But now you could see when I go to the desktop and I upload some photos, it will analyze it. It will read the tag and then it'll put it in the title. This is what we've been trying to accomplish the whole time. Oh my

37:41goodness. This is amazing. Let's see if it goes through. I don't know. It's still really buggy, really glitchy. Sometimes we got to log out. Just the fact that it's able to read the tag. So, let's sign out. Sign in. And of course, there's still going to be a little few things we need to fix, but just the fact that the main purpose of using GPT Vision to read these tags and items and to properly analyze them and create a listing, that's the whole point. And it's so cool to see that is actually happening. Let's see. Wow. It's just it's amazing. I didn't want to make this video to be eight hours long, but you can see um it's still not reading the s the size,

38:28which the tag is not the best, but very cool. Very cool um that that we got to this point. If you like seeing startup ideas come to life, we're going to be tracking the progress every single day. Give me some feedback. Give me some ideas on what things I could be working on to get better. I'm still very new to this, but I want to show the process every step of the way. And also, we're going to be doing things like experimenting with some N8N workflows in the channel because that's something I'm going to be applying into my business. So, let me know if that's something you'd like to see. As well as the Build-in Public is launching officially this week. So, I'm going to be bringing on other people that are working on amazing projects and kind of walking us through their workflows. So, I appreciate you guys. Thank you for

39:13subscribing and we'll see you in the next one.