building AI start up with bolt.new within 7 days

By Beau Johnson · · 29 min · 129 views

About this video

Welcome to Build in Public! I’m a beginner on a journey to build startup ideas from scratch—one line of code at a time. Join me as I vibe-code real projects, share my detailed thought process, and document the wins, mistakes, and everything in between. If you’re learning to build your own thing or just love watching ideas come to life, you’re in the right place. Follow the journey

Transcript

Read the full transcript

0:00Who is fired up to be building in public? Am I the only one? I don't know. It's a great time to be alive. Today is day seven and we're going to keep you up to date on the progress we have made so far from idea all the way to landing page, email capture, and walking you through the stepby-step process for the people that have just subscribed to the channel. So, we have been working on this idea for only seven days now, probably about 20 to 30 hours put into it in total. and I just want to catch you up todate on where we're at. So, the idea was initially birthed from ideabrowser.com and it really resonated with me because I'm already involved in the reselling space and in the niche already. So, I knew the avatar and I knew what they were facing as far as problems. So, this

0:47is basically an app that allows people to just save more time with efficient listing onto eBay, Poshmark, Merkari, Facebook Marketplace. and you're seeing this app come to life right before your eyes. So, I'm excited to just share with you on all the process we've made so far and walk you through the day by day by day and the milestones and checkpoints we've kind of gone through. And if you're new to the channel, I have really no experience building programs, vibe coding, software, coding in general, using all these different tools. I'm new and I wanted to document the journey for people like you watching on the other end to be able to give you some tools in some inspiration that you can do this as well even if you're just learning as a

1:32beginner. So I am building this app out with the guidance from idea browser to kind of lay that foundation on direction and where to go. So on day one we ended up successfully building out the landing page. We did some domain research and as far as like a brand name and what we wanted and what was available, we went with easyflip.ai and brand packaging kind of like color scheme and tone and kind of like how we want to build out um the brand messaging around this product. So that was kind of the basics laying the foundation on day one. And I was excited because I was like this is easy. It's gonna be great. And day two through four is when we really were met with difficulty. We're

2:17using bolt new to build out the idea and we're using claude projects um folder to be able to kind of brainstorm ideas. So day two is setting up Netlefi Google console and superbase. Basically, this is just a lot of the back end where a lot of the data gets captured and stored. And we set up the Google Analytics tracking for our web uh for our landing page so we could see where people are clicking off, where are they clicking on, where are they coming from, so we could better optimize the landing page as well as go high level. Go High Level is one of my favorite tools. It's one of the best CRM out there. And we ended up actually connecting it with the GoHigh level API as well as our pipeline

3:04and um able to kind of like automatically tag people who join the weight list so they get notified if they want to become a beta tester and also any updates that we're making to the app as well. So we can kind of start to nurture these customers. 82 email signups just in the first seven days. Wow. And that just came from a simple Instagram story post and a YouTube community post. I've yet to actually make a video talking about this at all on my main reseller channel of 17,000 subscribers. So, that's pretty cool. Days four through six were met with difficulty. Um, I spent a whole day figuring out how to capture Google signins to my go high level and

3:49connecting that with superbase with the client ID secret key and the Google ID as or client ID as well. So that definitely took all day and I just came to find out I was missing one letter from the secret key which is why we were getting a bunch of errors. So double check your API key, make sure it's entered correctly. So that was a fun day. And so we set all up the policy, the buckets within Superbase, authorization, API keys, and client ID from the Google console. That was all done. And hey, it's awesome when things just work, right? And then day seven today, we have just officially applied for the eBay API developer program. And now, as we are filming this, we're going to be integrating Google Vision and Open

4:35AI API to our web app and kind of seeing how that process goes. So, here's what we have right now. Um, don't roast the landing page because this is just a blueprint. This is not a finished product. This is just kind of to get people familiar with what we're trying to build and how it all works and what the heck it even is. So, um, you can see easyflip.ai. They could join the weight list. They could join through their regular email as well. And it just gives you a good idea of like what the program is, what the app does. They could have a free pricing calculator there that needs to be improved. Um, just really the whole point of the app is to help people save time, to save time with their listings. If you've listed on eBay before, you

5:21know that the process is very tedious. lit doing listings and filling out the titles, comping out items, what is my product worth, what should I price it at, all the item specifics. It's annoying. I don't even want to get into it because it'll bore you to death. But it is a long old school process that needs to be improved upon. That's what this app does. There's actually other apps that are very similar that do the same thing. So, this is good because it kind of gives us a proof of concept that people are already wanting this feature. And that is what people struggle with the most is like spending the time to actually create listings. No one wants to do that. So, here's kind of our value proposition here. Obviously, we could tweak it a little bit, but there we go. Uh 14-day free trial and kind of like a

6:06FAQ on kind of how it all works. So, that's it. We spent most of the time figuring out how to sign in, getting it to sign in. I sign in with Google. It actually works. I use just a default email. Sets up my account. It comes up with this little dashboard. All the buttons work. The AI coach is going to be connected to the Open AI API. So, I could start to download a knowledge base based on some of my content and three years worth of Zoom calls I could feed into this as well. And uh it's going to just be an amazing feature that's going to be in addition to um people that sign up. not just listings done for you, but you're going to be able to hook in your eBay account for people who resell on eBay and be able to chat with your data

6:51and see what's selling best, what's the best profit margins, what are the slower sellers, what are the things I should avoid. That's where that comes in. Obviously, it's going to be worked on. And then also creating a listing. This is going to have the Google Vision API connected to it. So you could just snap a photo and it will analyze it and automatically fill in all the item specifics, create the title, optimize the listing, and get it listed. Um, so that's kind of what we're where we're at so far. Obviously going to work on this to become a little bit better, but here's the blueprint. Um, you know, this is version 1.7. You know, we're not even close to being there. But, uh, it's cool that, you know, everything loads and works and yeah, we've had errors. Yeah, we've had problems. But um I just wanted to bring you on here to show you the

7:36update and what we're working through. And now's the time to build what you want to build. And there's no excuse because ideas solve problems. And there's a many problems out there in the world today from simple problems to big problems. And you know, that's why I started with what I'm familiar with the most because this is what I know the most. We've been a reselling business for 5 years. And you know, I know the pain points of the customer. I know the struggles. So that's why I wanted to build this app, show you the day-by-day process, and kind of take you through a journey. Maybe we're going to be thousand days working on this. I have no idea. But for the people that are just jumping onto the channel, and if you don't know me, I going to just document the journey. I

8:22have nothing to sell you. I have nothing. No courses, no communities. I just want to be raw and real and just show you the process of a regular guy like me building an app from an idea and figuring it out. That's it. You're going to see a lot of the mistakes. Some of the videos are going to be an hour long of me just troubleshooting and figuring it out. So, like I said, I showed you the blueprint of what we got going on today and I want to walk you through the process of how kind of we're doing that and integrating the Google Vision and Open AI API because that is the next step because we are in waiting mode for access to the eBay API. So, let's get into the next steps here. The next steps I have kind of just been discussing with bolt new. Um, oh, I forgot to even

9:08mention that I'm using um I am using Claude. I have a project set up in Claude that uh helps just me along this process. I have it all the data in there on, you know, kind of what I'm trying to build and um it's been super helpful just with simple questions and kind of giving me direction on how to do this and how to set this up. So, if you're not using a Claude or a Claude agent or a Claude project to help kind of build your business or brainstorm ideas, I feel like that this would be a great advantage for you to get more clarity in your business. So, that's been super helpful. Also helps me save some credits so I'm not just asking Bolt all the time. Um, Bolt is where we actually

9:54build this out. If you're new to building Bolt, there's Lovable, there's Cursor, there's Replet. Um there's so many um programs you could use to build your idea. So this gives me a good blueprint on what to do. Um we've just recently implemented comprehensive AI vision and open AI integrations with the easy flip application. So now we need to get the APIs, connect them to Netlfi, connect them on the back end so everything communicates correctly. Um, so new netlifi function. Um, I think we're going to enter that into the environmental variables section. Um, yeah. So, all this is really intimidating and new because I have not done this before. I don't even know. Um,

10:41I have it break it down in really bite-sized pieces just to like where am I clicking? Where am I going to get this information? So, enhanced dashboard chat. We're going to be setting up all of this stuff. Really cool, really cool. and we're going to be taking you along this process and we'll see how far we get. And um just really putting it into plain words. I know I could have used Claude for this, but I've been using the discuss feature within Bolt and it doesn't cost many tokens uh compared to having that feature turned off. So I'm able to just kind of brainstorm what I've just talked to it and being more relevant on what I'm trying to do. So um I just told it okay for the next steps can you give them to me here on setting

11:27up cloud vision API step by step really easy and basic okay I can provide you with a step-by-step process on setting this up in the Google console and blah blah blah okay so this is the step by step right here setting up the Google cloud vision API go to Google cloud console open your web browser sign in with a Google account create select project at the top of the page. Okay, so we're going to do all this and get it going and just see how easy it actually is to accomplish. Okay, we're in the Google Cloud Console and it says we can create a new project or select a current project. I might just create a new one just because

12:14um new project name easy flip vision AI API. Okay, there we go. Um once your project is selected, use the search bar at the top cloud vision API. Okay. Create search uh cloud cloud vision API. Boom. And select cloud vision API from the search results. On the cloud vision API page, click the enable button. This might take a moment. Okay. After enabling the API, navigate to the credentials section. You can find

13:00this in the lefth hand navigation menu under APIs and services credentials. So credentials right here. So I'm setting up the permissions here and it told me to basically select a role drop-own menu and search for cloud vision API user. I can't find it anywhere. So I just asked it to help me with that. Um vision AI roles. Maybe that's somewhere in here that I need to pick. Um, oh, maybe vision AI admin, editor, viewer. So, yeah, sometimes, um, bolt.new is not up to date with things constantly being updated. Sometimes you just got to ask it. So, we'll see what it says. Okay,

13:46after talking to the bolt new, it said choose vision AI editor. and it says vision AI editor. The rule typically grants permissions to create, update, and delete vision AI resources, which includes the ability to make API calls for image analysis. While it might grant slightly more per permissions than strictly necessary, like managing models if you are building custom vision AI solutions, it will definitely allow your Netifi function to successfully call the Google Cloud Vision API for image analysis. Vision AI admin, which is another option. This role provides full administrative control which is excessive for just consuming the API.

14:31Best to avoid the admin role. Vision AI viewer. This role only grants read access which is insufficient for making API calls. So go ahead with vision AI editor. Okay. So we did that. We'll follow the next step. It says the next step would be download the service account JSON key. Back on the credentials page, you will see your newly created service account listed under service accounts. Click on the email address of the service account you just created. Go to the T keys tab. Add key. Create new key. Select JSON as the key type. Click create. A JSON file will be downloaded to your computer. Keep this file secure and do not share it publicly. This file contains your private key and credentials. And then we would go on to configure Netlefi environment variables. All right. Okay.

15:16Okay, after all of that and downloading the JSON file, it says to go to Netlfi environmental variables within our project so we can update it. So, we are here. Uh we're going to go to domain management. Oh, no. Project overview, project configuration, environmental variables. This is all where all your uh API keys are stored from what I remember and can tell. So, go high level um and Google client ID as well. So it says we need to um build and deploy environmental variables. Add the Google cloud project ID. Adding a variable getting the Google cloud project ID and the value. This is

16:01the ID of the Google cloud project you created and then click save. Add variable Google application credentials. And then once these steps are completed, your Netifi functions will be able to authenticate with Google Vision API using the provided credentials. That is insane. So let's get that done. After some trial and error, we got it all connected. The JSON environmental variable. We had to create two of them. One was for the service account key and one was for the project ID. And now I'm going to ask AI, I got that done. What's the next step? All right, I got all that done and created the environmental variables for Google Vision API. What would be the next step

16:50and let's see what it says. So, it's been fun. This has been a journey. So, great. Now that you've set up the vision API environment available, the next step is to configure the Open AI API. This is crucial for the reseller coach to work. Obtain open AI API key. Go to the open AI platform, create a new account. So that is awesome. Once you've completed these steps, your application will be able to utilize. Okay. Awesome. Let me Should we test the Google Vision API first? Then we can move on to the next Open AI API. What are your thoughts? when I like work when I work on

17:35something I want to see if what we did works before we move on to the next thing but we'll see um what it says that's excellent idea it's always good to practice to test each integration step by step um the plan deploy your application to Netfi since the Google vision API integration relies on Netlefy function and environmental variables configured in Netfly Netleifi you need to deploy your current changes push your local changes to your git repository and neti should automatically trigger the new build and deployment. Access your deployed application. Boom boom boom boom. Okay, let's try this. All right, it said

18:21we needed to redeploy the project and I think that's what it's doing. Uh trigger deploy deploy project. We'll see what happens. I have no idea, guys. This is all new to me. It's like learning a new language. Okay, so it said to deploy it and we did. It says access your deployed application. Once the deployment is complete, open your live Netlefi application in your browser and navigate to photo capture page in your application. and click on the new listing button. And on the photo capture page, upload a photo and initiate AI analysis. Observe the outcome. So, let's try it to see if it

19:07even works, right? We got to test it. We got to test it. All right. Sign in with Google. Let's see what happens. I probably should have cleared the cache uh my browser. I usually been using this in um incognito mode because it's really helped with exactly this. All right, let's try it in incognito mode because that didn't seem to work. Okay, so that worked here in incognito mode. Uh I don't know why that is. Possible Chrome browser extensions. You can see I need an update here as well, but lots of little bugs. So, we'll test it out here. Here we'll go to new listing. We'll upload a photo. We'll

19:54choose one of this hammer. Analyze item. That would be amazing if it worked on the first run, but I don't know. We'll see. Processing. Failed to process image. All right. Well, let's go back into Bolt and see what's going on. The reason for that error, it says the analysis failed error is a server error and it says I need to go into Netlefi and look at the function logs so it can kind of know what's going on. So we're going to do that and see what happens. Okay, so it's telling me to do something crazy, but just to give you a summary, it says that

20:41it's trying to read the JSON file in the environmental variable. It says that the the JSON content is reading it incorrectly and it's too long and that's why it's throwing the error. So I need to change how Google Vision client is initialized. Instead of using the key file name which expects a path to a file, it says you should parse the JSON content of the Google application credentials environmental variable and pass it directly as a credentials object. So it's going to give me those step-by-step process. I hope I don't age 10 years in the next 10 minutes and we'll keep you updated on how I am doing that. All right. So, it says in my actual bolt file directory within bolt I need to do this. Okay. Um,

21:29so we'll see it in real time and let's see if it works. Uh, we need to replace initialize Google vision client with we need to replace that entire block with the following updated code. This new code will parse JSON content of your Google application credentials and we'll use it directly as credentials which is the correct way to configure the client. Okay. Um so we basically need to replace this section here and just paste it. I I I don't know. That's what I did. And it says to save it. And there you go. Um, and then to save it, I think I just

22:15Yeah. hit save. Save the file. Deploy to Netlify. After saving, you will need to deploy your application to Neti again. This will ensure that the updated function code is live. Okay. Publish. Okay. I copy and pasted the updated code. Do I just hit publish so it makes changes on Netlefi after saving it? I love it. I just simple people like you and I can just ask basic stupid questions, right? Yes.

23:00After you save the changes, the next step is to deploy these changes. If your Netifi project is connected to a Git repository, you just need to commit your changes and push them to the remote repository. Netify will automatically detect the new commit and trigger the new build. If you're managing your deployment manually, no, I'm not. So, it should be good to go. Let's check it out. All right. So, back into the Netlefi dashboard. You can see it just pushed this um deployment just a minute ago. So it says is updated analyze image.js publish. So again, let's see. Probably should clear the cache again. All right. Now that we did that, we're going to sign in. Usually I test this in incognito mode

23:47just because I've been having some little issues pop up, but let's see if it even Come on now. All right, so we're going to try incognito mode. All right, we are back in the dashboard. See if this even works. Okay, now here we go. It says you're right. That's the classic already been declared error. So, it seems like I copy paste. Oh, so I have two um I just Okay, it says this happens because the const image annotator client was likely already at the very top of your an analyze image.js JS file and then I asked you to paste a block of code that included again. So open it up. You will

24:34see this. It says delete one of those lines. Keep only the very first occurrence at the top of the file. The code block you pasted should then start directly with let Google let Google credentials declaration this after the change. Holy smokes. Okay, this is really helpful though. Um, so const. Okay, so cool. All right, so we just got to delete one of these. That's it. I think that looks good. And then just hit save. And

25:21we hit save. And boom, boom, boom. Save the file, deploy. And it should resolve it. Okay, cool. Let's see what happens. And you can see back in Netlefi, it's automatically updating because it pushes to a git repository that we have connected. And that activates the whole cycle from my understanding. I know I probably explained that really bad. Okay, it has published the new change that we made. Let's see if this works. Oh my Oh my goodness. Let's go. Doesn't it feel good? Oh my goodness. It feels good. Wow. This stuff is like a huge

26:10rush for me. I don't know about you, but I love building things. I love problem solving and I love overcoming those problems. We got a framing hammer, ladies and gentlemen. A framing hammer. Amazing. It works. Oh my goodness. Jeez. And you know what I like to do? I like to tell my developer the good news, even though it's a robot. Oh my goodness, my best friend. Guess what? It works. I uploaded a hammer and it analyzed the photo as a framing hammer. Does that mean we're in the clear? What do you think? Let's go. I'm fired up. I'm fired up. I

26:56love this stuff. I love it. It's working. It's working. That's fantastic news. I'm thrilled to hear that the fix worked and the image analysis is now correctly identifying items like your framing hammer. Yes, this means we've successfully cleared the particular hurdle. The syntax error and netify function and subsequent 502 analysis error resolved, which is a crucial step for your easy flip applications core functionality. Now that the AI analysis is working, you can continue testing full flow, creating new listing. Oh my goodness, this is insane. So good. Well, let's see what happens after I continue. Can I even I don't think I can edit any of this. We still got a long ways to go. But the fact that it was able to identify it. Wow, that's

27:44cool. This might not even go to anything. We're not connected to eBay API. We We don't really even have the next step. I think it logs it um as an item. So, that's cool. Let's see if it like Let's see if we can go back. I think it uh logs it in superbase. Now we're everywhere. All right, let's see if we could just log back in. Yep, framing hammer. There it is. Cool. So, it logs it. Still got some bugs to figure out, but that's so cool, guys. I just that is so cool. So, if you like seeing ideas come to life, make sure you follow the channel. Make sure you subscribe. Feedback,

28:31comments, questions, please let me know. Tomorrow, we're going to tackle integrating the Open AI API to this whole workflow, getting things remember just 1% better. I don't know how long this is going to last, whether it takes a thousand days, 50 days, whatever. You're going to be along for the journey. I appreciate y'all. Have a blessed day.

Build this with us, live

Shipping Skool is a free community with 4 live build sessions a week. Bring your idea.

Join Shipping Skool — Free