Vibe Coding 101: How To Turn Your Ideas Into Apps

Hello, everybody. I am KP, and I'm so excited to kick off this live build session, one of a kind special podcast episode that I wanted to produce with my friend Conor here joining us from Spain. This is a very new take on the typical Build in Public podcast where usually like I do a fireside chat style conversation with the founder or builder. This case, I actually Wanted to record, screen record, and wanted Conor to show us, you know, all the beautiful things he's been building. He's one of my favorite accounts to follow on Twitter. I'll drop the link to his account and his website and his course in the show notes so you can all go check him out. But this is all about vibecoding, which is the new trend, the new rage, new everything lately. And I've had so many pings in the last week. From my friends, from my connections online on Twitter and on, you know, in the podcast audience who are like, KP, we want to get started. We see you building, we see you building, you know, Vibe Coding, you see building Bolt. Like, what's the best resource to get started? Like, how do you go from 0 to 1? Hopefully this video will act as that inspiration, uh, both from an information point of view but also from examples and practical builds. So with that said, Conor, welcome to the show.

Thank you. Thank you very much, KP, for having me. Uh, I just want to say thanks to KP for having me, and the whole idea of the hackathon, the Bolt.new hackathon, was incredible, and I'm like super excited about that. So thanks for that idea as well.

Thank you. I'm, I'm still pinching myself, man. I can't believe it. Like, anytime I have to share that with any like family members or friends, you know, they're like, you're making this up, right? I'm like, no, it's not. You know, go to hackathon.dev and go— I think right now, last night I checked, it was close to 100K. Yeah, let's pull up— why don't you pull up— actually, you have a— you have the screen in front of you. Go to hackathon.dev and let's see how many participants we have. If you click on register on the top, yeah, it goes to DevPost. Let's see how many participants we have in the hackathon. 90—

Oh, 98,494.

How crazy is that? And a million-dollar prize almost. I feel like the million-dollar prize is like less impressive than getting 100K people to take part in something like this.

That's true. That's true.

That's insane. And by the way, the original tweet that I made with the vision, the manifestation was 100K. And I definitely did not imagine that would happen. It was almost like a very, like, shoot my shot hypothetical scenario. And so I'm so glad it's coming to life and grateful for the Bold team for pulling this off. Cool. So let's— I wanted to ask about sort of you and your background. You've been sort of super deep, at least from my vantage point, You've been super deep into the Bolt ecosystem and the vibecoding ecosystem. So give me a quick sense of like what brought you, what background did you have and what brought you to vibecoding?

Sure. Well, I started working online about 7, 8 years ago and I was teaching English and then I got into like SEO and building websites with WordPress and all of that. And yeah, I've kind of like, I was kind of a publisher then for about 4 or 5 years and then Google kind of changed their algorithm and yeah, a lot of my websites got hit. It was, yeah, it was kind of devastating, but then Because like when bolts.new came out, like the first time I used it, I was like just mind blown because, yeah, I mean, there's so many use cases as like an SEO, as someone who makes websites and, you know, I would just be writing, writing, writing blog posts nonstop, but then it's like, whoa, I can like create tools and like there's just so many things that you can add to your website that—

And you're a non-technical business owner. Builder, right? You're, you're basically, uh, you're, you, you— I mean, you do, you know how to code? Can you go deep? No.

No,

I'm like that too. This is why I'm like, you know, I'm so fascinated and, and impressed by Bolt and Lovable and, you know, the wave of these, um, uh, vibe coding tools, because finally I feel like our time has come. Exactly. Sam Waltzman made a blog post the other day. Did you see that?

I saw that.

Yeah, finally it's the idea guys era. I'm like, yes, I've been waiting for this.

Me too.

So I'm excited. So tell me, while the audience are watching this, probably, can you kind of point to the— you had the course website, so can you quickly show the course website? Just kind of see if somebody's interested, they can go deep into that bold.new course thing you had.

Sure. Yeah.

And this is a shameless plug, but I have to do this because I admire him and I respect what he's been doing.

Thank you. Yeah. So actually, one of the things, I've made a lot of courses before online and you use Udemy and Skillshare and stuff like that. So I actually built like this course platform with Bolt.

Nice. That's mad.

Yeah, exactly. So I was like, I made a course about Bolt and then, you know, it was like, okay, all the things you can do with Bolt is like all the different types of things you can do, you know, for SEO and just any type of websites that, you know, you might be able to make. And I was like, okay, you can make like affiliate marketing websites, free tool traffic, free tools to drive traffic, you know, and all different types of websites you can make. So I was like, Why don't I just build this out and then people can, you know, follow along. And, uh, you know, the next ones are the more complicated ones like the AI SaaS, which I'm gonna do as well. So yeah.

Nice. That's awesome. This is at boltnewcourse.com, correct?

Yeah, exactly.

Awesome. I'm gonna go grab one of these, uh, after this because this is great. So let's get into, uh, vibe coding and, and, you know, some of the tools we've been talking about. So first and foremost, everybody's wondering, okay, what does vibe coding really mean? What's your definition to it? Because I'll, I'll share mine after yours.

Sure. Yeah. And actually I think people have different definitions of this, which is quite interesting. For me, it's like the whole idea of this vibe is like AI does the executing. Like that's just like the most important thing is like AI is doing a lot of the work and you're just like guiding it and kind of manipulating it in the way that you want. You're at, some people say you're adding taste. For me, it's just like, you know, it's that human thing that comes in and just changes, makes the little tweaks to To give it polish, I suppose.

I couldn't agree more. The way I would define it is I was very active in the no-code movement in 2017, '18, '19, those 3, 4 years. And my first Silicon Valley job at On Deck was because of the no-code activity I did and built no-code projects at On Deck. I mean, which resulted in my job at On Deck and ran the no-code fellowship. So, I'm very much in the no-code ecosystem. So when AI coding came out, especially the vibe coding came out, I was like, whoa, this is like 2.0, right? All of what I've done there. The big difference here though, the definition of vibe coding for me is like you can actually achieve probably 100x more use cases and in terms of sheer power that you could do with AI because of how versatile the backend is. I mean, how versatile, like, AI obviously is. Like, if you use Claude and ChatGPT, you know, like, it's so versatile. It can scroll there, you know, it can, like, crawl through the internet, it can do API calls, it can do all these things, which, you know, I know no-code tools also can do, but it's so much easier because it's prompting and you're really asking questions and, you know, having conversations. I found this to be, like, stunning when I first got the chance to see it. And yeah, so my definition would be basically like using simple English language prompts and conversing with AI and getting it to do what you want. The challenge though, the slight nuance is that you should guide it in a way because it's got sheer power and it'll do its own thing without proper specific instructions. So there's still a lot of like taming the beast that needs to happen. Yeah. Like you need to kind of rein it in, like tame the beast and use it, like give specific instructions and go like, But they're all English. You're not writing syntax. The alternative is like syntax or spinning up servers. So that is mind-blowing to me. Like someone non-technical like you and I, you don't need to worry about servers and database and spinning up any of that stuff. We just use these tools that are on top of all of that and just converse in English and get them to build websites and apps, right? How cool is that?

Yeah, exactly. And yeah, it's kind of like manipulating, but manipulate is not quite the right word. It's just like, just do the thing for me.

Being puppeteers, right, to AI. So let's talk about some of the prominent tools in the market. So what are like some wide coding tools someone should check out?

So the 2 main beginner tools are bold.new and lovable.dev. They look similar like this. Both of them are quite similar. I suppose I just have a slight preference for bold.new. Just because I think the technology, some of the technology behind is a little bit more powerful. And yeah, I mean, they're, they're both quite similar. There's another one called Base44 as well. That's quite good as well, especially if you struggle with some of the parts that, you know, can be the parts that we'll show you in a minute now that it can be a little bit difficult. If you struggle with some of them, then that's, you know, even more beginner friendly. And then there's other tools that are a bit more complex, like Cursor and WinCert. Cursor. Yeah, you're starting to, yeah, really get into like coding at that point, even though they, they have agents as well that do a lot of the work for you.

Yeah, I think even Replit is worth mentioning in the lineup like you shared. Um, I— my first ever vibe coding app was on Replit, so, uh, I think it's, it's also just as good as these, but I feel like, uh, it's maybe somewhere I would put it personally a little bit in the spectrum of beginner-friendly to like advanced. know, developer-centric. Cursor and Vinsurf are like, you know, somewhere close to the developer-centric side of the spectrum. And then I think Replit's somewhere in maybe a little bit in the middle or close to the beginner. And I think Lovable's the absolute beginner-friendly, but you have like a lot of limitations in my view, you know, or the output, the design output is not to me at least as great as Bolt and versatile as Bolt. So I've chosen Bolt and stuck with it. I think my advice here to anyone watching is Spend like basically date before you commit, right? Like, so spend some time on these tools, like spend like an hour or 2 hours on each of them. Prompt, see the output, see what you feel. Over time you'll get a sense of like, what is your taste? You know, hopefully your taste is bold 'cause that's what I love and Connor loves. And today we're gonna show a lot of bold examples. Yeah. But we've spent some time on all these tools. Even now I'm very open-minded and curious. So it's not, it's not that like, you know, I still try and play with Replit. I still, anytime like Lovable drops a new thing, I'll go and play with it. But right now a lot of my projects are built on Bolt. So, okay, so people are wondering at this point, like, okay, show us some real examples of the output. Like, show us some real vibe-coded apps and tools. What do you got? I have a couple names I can bring up, but what do you got that you can share, Conor?

Yeah, I mean, there's tons and tons of things. I made this one as like an Irish tax calculator. So this is kind of a, Yeah, I mean, it's like, I always look at things in an SEO way, friendly first, you know? So it's like something that somebody would be searching for on Google.

And then, you know, right, Irish tax calculator.

Yeah. So this is for self-employed people. So it's, it's, you know, I did this in like one prompt, like this whole website, right? And you'll see, yeah, it looks kind of simple here. So you just put in your income here, your little few variables here. And then you calculate the tax and then it all comes out there. So it like, it looks pretty cool. And then, you know, I put in like, I know an accountant so I can send him the leads. So you put in your information there and then, you know, it's like a lead generation tool as well.

I see the true marketer in you, man. Like that's, I love that. Like, you know, it's not just vibe coding, it's vibe marketing too. Exactly. I don't think I would've gone to that final step.

Yeah.

So what I would've done is maybe like sent a report to their email, but I think that's very smart, you know, connect with the, And it's, you know, you're recommending someone that you trust or like someone who's, you know, who's great.

Yeah, exactly.

And it's stupid, still great. Yeah.

Yeah. You can just like automate this. So this saves into the Supabase database and then you can use like make.com or something like that to automate like the email. So

you

don't have to, like, you can just leave it here and it's like collecting leads. So if you think about for your own business, maybe this could be really powerful.

Love it. I love that. So can you pull up my examples? Go to fileforge. By the way, this was built— the one you shared was built on Bolt. Yeah, fileforge.in.

I

was cheap. I got like a dollar domain.

This one?

Yes. So this was built using Replit.

Okay.

The core idea was basically I was trying to convert like some file, maybe some— I forgot it was some HEIC, some kind of Apple file into like PDF. And I was so frustrated because it was some kind of a screenshot of a report or some electric bill. I forgot what it is, but I was like, I need this PDF thing. And it was, I tried to go to file converter online and I think I was doing either that or I was doing some file conversion, like size down when it's like 10 MB. Some websites don't upload, let you upload more than 2 MB, right? Right. So I was trying to convert, compress it and it was like a mess, as you know, like some of these websites are like, it looked like they're going to install virus on your And their pop-ups are annoying. Um, and the pro— and for no reason, they're like so clunky. And so I thought, you know, I'm gonna screw this. I'm like, I'm gonna build my own, you know, like you can just do things. And I, I spent like a day because it was first time for me and I would probably take like, you know, half an hour, but I spent a day and built this using Replit. I felt so proud. You know, you can, uh, yeah, you can kind of try out— anyone in the audience want to try it out, you know, fileforge.in, upload any file like PNG, go to, you know, PDF. And so on and so forth. There's some examples there. But, um, so that was my first one. Then there's another one called Agency Hunt. If you go to agencyhunt.xyz, and you may have seen this when I was sort of promoting it like a couple weeks ago. XYZ. Yeah. And this one was built with Bolt.

Oh, cool.

Uh, so it's a directory slash curated, uh, collection.

Oh, cool.

And all the agencies, and as you know, you know, as a SEO expert, like marketing expert, you know, agencies love leads.

Yeah. Yeah.

So it was very easy to get customers because, you know, some of these agencies, for example, like the top 3 featured ones, their lead value is like in hundreds of dollars. So for them, like, you know, spending like, I don't know, like $150 or $200 per month advertising on this, which is no-brainer, 'cause even if they get one lead, it's like, Break even.

Exactly, exactly. Yeah.

And so that was the core idea. There's so many use cases like this which I feel, Connor, right, that are like low-hanging fruit. This, by the way, is not the next Uber, the next Netflix idea.

No, no. Yeah.

But it's so easy. And if you think, like, if you reverse engineer, um, like, you know, who might have, um, you know, a willingness to pay, who may have a pain point, like, who may need pipeline, it's so easy to build things that serve You know, that purpose. Exactly. To click on one of those, open, like, let's say you'll see another page open up. Um, oh

cool,

nice profile page of company, and then there's a little founder.

Nice, that's really cool. Yeah, yeah, very cool.

And, um, so yeah, it was so much fun. This is when I was sort of exploring Supabase in the backend. I did not know the power of Supabase. I think I used a scratch, like 1% of the power with this. And then I watched your videos on YouTube, and then the way you made me, uh, there's a video on where you built a nutrition app.

Yeah, yeah.

That was one of my favorite videos because it uses OpenAI's API. Blew my mind. I was like, what?

Yeah.

You can actually build something that's powered by OpenAI API, and it was that easy. It took me like 5 minutes to build it.

Yeah, exactly. Yeah.

I'll plug that link in the— for the audience because it's mind-blowing because you think of like how many crazy use cases OpenAI can do right now, like ChatGPT, right? And you're releasing, licensing that for your product. It's like,

what? That's— I think every website in the world could use OpenAI for something. No, it's like something.

I mean, I feel like we have now— I joke with my wife that I actually have now, like, I mean, now where we are, like, we have more use cases and more things to build than time, like, than hours in the day, right? So—

Totally, totally.

Anyway, so let's go to the live builds. So I know, um, people are probably at this point wondering, these are great examples, uh, of the final end products. Show us the process. Show us how to get there. So we have 2 use cases in mind for all of you, um, and Connor is going to do a live build to both of them. The first one is, um, Connor, is it going to be a gratitude journal?

Yeah, maybe we'll do that one after. I was thinking of doing the work one first.

So, the work one. So, we divided broadly the use case into 2 examples. One would be a work-related project, like a tool, and the other one would be a personal tool. So, Connor's going to demo the work one first. So, let's get started.

So, yeah, I was thinking that it could be cool based on a lot of the news recently to do like an import duty. Like, this could be a real case, right? Everybody needs— like, I'm sure people are going to ChatGPT and saying, what's— what is the import duty for? Whatever. I just chose Mexico to the US, but I'm sure every country needs this and so many people need this. So my first tip really, and this is what I do every single time, is use ChatGPT to help me, right? To get started with my ideas, break the project down because it's best to go step by step at the moment. You don't want to do something too complicated and give Bolt 57 things to do. It's going to get a bit lost. So you have to just go feature by feature. And step by step.

And what do you do for that? Like, what's your initial prompt to ChatGPT about? Do you speak to it? Like, you basically like say it out, what kind of project you want to build?

Yeah, exactly.

I've kind of trained my ChatGPT. I specifically ask, you know, give me a prompt for Bolt.new based on the project idea that I have. And I give out the idea.

Exactly. Like, I've kind of trained my ChatGPT. So now that no matter what I'm talking about, it just starts like, I didn't even ask for this, but it's like meta prompt for Bolt.new. I like taught my ChatGPT everything about Pulse.new and what it is and like, yeah, it just like saved that to memory. So now I didn't even ask for this, like, but it just gives me these prompts.

What was your initial starting point for this conversation? Like, I'm just curious. Did you just say like, I want to build a—

Yeah, I think I was on something else, kind of like, uh, I was thinking about a, like a product manager app and then I was like, maybe that's a bit complicated or something like that. Well. Basically for this demo, I was like, I didn't want to start connecting too many APIs and stuff for just this first one. So I was like, okay, maybe something like the Irish tax calculator where the information is already there. Right. That's what I thought. As we don't have to keep going back and forth to find, well, that would be version 2.0 of the one that we're going to build now. Right. But let's say, you know, anything. The simpler, the better really to start off with.

Yeah. Of course.

Yeah. So that's kind of what I did. And then I was like, okay, what, think of a regulation-driven calculator niche, right? So like a fishing quota calculator or something like that where it's, you know, something you need to check.

So meta that even for a demo use case, you actually consulted AI to give ideas, which is what I did last night too, right? That's how I got my list of ideas I shared with you. Um, you're so AI native, man. Like, you know, it's crazy.

Yeah, I mean, I can't do anything without consulting first. And a few weeks ago I did something and I, and I started, went down the kind of the rabbit hole and I got a bit lost and like, I was like, oh, why didn't I consult with AI at the start before I started doing all of this? It was like, I just wasted 3 hours because I didn't, you know.

Anyway, so you, so the, the takeaway for people is that speak to ChatGPT or Claude and, and mention that, you know, the, the project that you have in mind, uh, should be simple and blah, blah, blah. And make sure that, you know, it spits out a prompt for bold.new. You have to specifically call that out. And then let's say you end up with, what's the final prompt like? The one you showed me?

Oh, like, yeah, I was just talking to, I use dictation, like ChatGPT has a dictation tool down the bottom there. And yeah, I was just like, okay, maybe, you know, just talking to it like I would talk to you and just say, okay, maybe let's do this. And you know, it's nothing, no technical language at all.

Yeah.

And it's just talking to it and then it comes up with everything that I might need.

And then the prompt. So you take this, do you take this prompt and go to Bolt?

Yeah, so I would just copy that and then just go into Bolt and paste it in like this. And that's it. But it probably needs a bit of checking because, you know, maybe we don't want this real-time updates. So, you know, in this case, I don't really know.

One tip here for anyone watching would be basically try to, um, you know, kind of build a stack. I mean, basically, like, try to what's the right phrase? Like try to have a, you know, V1, V2, V3, V4 evolution of your product, right? Don't overwhelm with the requests that are so complicated in one prompt. So what I do, which is, you know, what I think you're trying to do is like, I look at the final prompt that, you know, generates. Mm-hmm. And I would say, I would try to remove some of the stuff and like, you know, make it simple enough to get started. And then I'll do like, okay, for V2, let's build this and V3, let's build this, you know? Exactly.

Exactly. Yeah. So like it says no external APIs because I don't want to start doing that. That's something that will be a little bit more complicated. And so, yeah, I mean, I don't know much about, you know, import duty. So let's just see what it does here. It's going to start spinning up here. So the important thing to know about this is it's not, you know, on your computer or anything like this. It's just being spun up in the web. So.

Yeah. On the browser, which is crazy.

On your browser.

By the way, for context, anyone watching, uh, usually to spin up, like to basically write code and like, uh, generate results, like you need an IDE, integrated developer environment, right? So something like VS Code or whatever. And then that's— you require installation, require plugins, required like all kinds of things, which is very, very complicated. Uh, all of that happening within the browser is a huge innovation.

Yeah.

And that's one of the things that the modern, um, Wipe coding tools have done.

Exactly. So it's doing all the things that you used to have to do as a developer to find, which I couldn't get past when I tried to learn how to code like 10, 15 years ago. I was like, you know, you have to install all of this type of thing into your computer. But sure, I did. Yeah, I didn't know what that was or I didn't know how to do it. So it's like it's doing all of that for us here. We don't need to think about that.

It is so magical to watch the left window, man. Like when I keep watching, Because I try to like follow with, you know, follow up with what's it doing. And I'm like, wow, it's installing packages. You know, I'm like, wow, it's wild.

Yeah. It's creating components. So these are the different sections of the website, right?

So usually there's about a 2-minute, 3-minute, you know, time period. So expect that because it's a very complicated, you know, it's, it has to do all these things, which normally would have taken like, you know, 4 or 5 hours to set up. For any project before writing coding.

Yeah. I think this is probably a bit more complicated than even the one that I made here. You know, this didn't even take that long at all because there's less variables and stuff. It just, I just copied in, you know, the tax rate and all of that. So it got all that, like here it is. It actually put all the taxes here. So if you think about your own job, what I think about is like, if you, if you are going to ChatGPT and doing something over and over again, or calculating something or whatever the task is, you can just build it here. So you just tell it.

Yes.

Type in the variables every single time. And then

remember, there was a great sort of meta-learning during the SaaS era where a lot of the SaaS products were built based on this insight. The insight is if an employee at a company, a mid-market company or enterprise company, has a spreadsheet that he or she reports to leadership about, And which means they frequently go visit and update their spreadsheet. That could be a SaaS tool.

Yeah.

And a lot of companies, so many SaaS products were built based on that unique insight. Like, what is a spreadsheet? I had a lot of founders in Atlanta who'd go around talking to other people, like, you know, who worked at Delta Airlines or somewhere else and be like, they would do user interviews and ask them like, hey, what are some spreadsheets that you would use? Like, what are you, you know, reporting on? And because the insight was if there was a spreadsheet, that means there could be a SaaS app built on top of it. You know, I think the modern version of that is if you're talking to chat, what I do also is that if I go back and look at Claude and ChatGPT logs of what are the questions I'm asking over and over again. And if I find, like you said earlier, if I find a question 2 or 3 times, I'm like, okay, that should be an app. That could be a use case.

Exactly. Yeah. And

there you go. Ta-da!

Let's see how we get on.

Saying I've curated a, created a comprehensive US import duty. Ooh.

Oh, we have a problem.

First, uh, error. Let's open up. Okay, what it says. Okay,

and so it says terminal error.

To be expected. Uh, yeah, this is fine.

I mean, you can get like— you don't need to panic when you see this or whatever. You just click attempt fix if you don't understand and just keep trying this. If it happens more than, you know, 2 or 3 times, then, you know, you've got yourself into a bit of a problem.

Yeah, then you may have to resize the scope and then make it, you know, break it down to The main insight here is that make sure that you spoon-feed AI bit by bit, right? Yeah. Don't like shove like a buffet of things into, you know, into it.

Yeah. To be honest, I probably gave it too much information here.

I feel— I felt the same when I saw the first prompt. I'm like, man, that prompt is like overwhelming. Usually what I do is I do is like things like, oh, let's start a SaaS dashboard and it should look like blah, blah, blah. It should do the blah, blah, blah. And then I say like, wait for my next instructions. Oh

yeah,

there we go. It fixed itself. Awesome.

Yeah.

US import duty calculator. Nice.

Okay, so we have a little website here that we can calculate the results.

Oh, did it, did it get the logic too, or is it just the UI? Oh, logic. Wow.

So

let's find out.

0.25. And okay, well, that, that part, I suppose we can't really get the codes. And let's see, I do that, and then yeah, you can get your results here.

There we go. It shows the calculation logic. Nice.

Yeah. So, I guess like this is a little bit more, you know, complicated, I suppose, of calculation because it's very You know, niche-specific, as in very

niche-specific. I mean, if you are into logistics and shipping logistics, then you probably— yeah, you know, the terms that they're looking for. No, I think still, it's still a great, great starting point. I would, I would actually, if you don't mind, I would go to Bolt or as we speak, like, show the, show the real magic. Like, do something like a gratitude journal, you know. You want— I feel like the lightest version of it, um, could be built Easily without going to complicated, um,

I think

so. Yes.

So

yeah,

again, I, I went to ChatGPT for my, uh, so this one I just gave it a simple prompt. Yeah, it's like, can you give me the main features of a cool gratitude journal app? Um, and then it gave like core features and voice-to-text journaling.

The cool— the crazy thing is it's like voice-to-text is like next level, but it's like adding it into the, you know, mix.

That's true. That would be a little bit, uh, well, it's not that complicated really. It's, it's kind of a little bit, but so it, it like goes through all the different things and it's like, and then I said, give me a meta prompt for the first prompt in Bolt.new so I can build feature 1. So then it like gives me the prompt here. Um, yeah, I think that's pretty cool. It's like you can view your past entries.

I think let's do this, the V1, that, that's just the, the feature 1 part and the rest, you know, I think we'll do this one. Yeah. And no login needed. I mean, of course, like to save everything, we have to use Supabase and all those things, right? But like for now, just to show the UI feature.

Yeah, exactly. I think this one is—

And that's where your course and your YouTube tutorials will come into play for anything like V2, V3. Yeah, exactly. We can watch.

Yeah, I think that it is important to know what like you can do as well. I think that's, you know, you can't really, yeah, like the more complicated it's gonna be, the more you need to know about Bolt and stuff like that. You know, if you wanna save information, if you wanna add payments, stuff like that. They do have integrations with like Stripe and Supabase. So that is kind of like level 2 of using Bolt.

Yeah. Level 1 is just the frontend stuff, which is, which means every time you refresh the page, you lose the data because that's frontend, right? Like you're, you know, or if you don't have authentication, right? Like you, it's like the lightweight tools, like calculators are examples of that. My FileForge thing is an example. Like every time I refresh, I'm not saving the file anywhere. So you lose that file. So hopefully you download your conversion before you refresh the page. Even Agency Hunt, the directories, when I built them, that one was just an informational front-end heavy thing. But that's the first layer, right? The first wave or the first kind of category of products. Second one would have authentication.

Yeah.

Where you save user information, user preferences, you build a profile on the user, and then like when they log in, then they can see all of that content back again.

Exactly.

Damn, look at that.

So we have our daily gratitude.

Look at how cool the design is.

It's pretty cool. Isn't it nice? Yeah.

I have a document that I use called prompt engineering, which is sort of my Mishmash collection of all kinds of prompts I find on Twitter. I'm gonna share one of those with you to make the design look a little bit different. I wanna see how it shows up. Sure, yeah. I think Inko did that. Okay, look at this. Take this prompt. I'm gonna paste it in chat. This is just for the design. Let's see how that plays out. Okay. I, by the way, I spend a lot of time tinkering with the design because I love it.

I

love that you can say design should be soft and playful with like warm tones and it'll really do it. You know, you're like, what? It's crazy. I don't need to use Figma.

Um, yeah, I use like modern UI with like glassy or glossy, uh,

right? Yeah.

Things or shines or like—

Geomorphism. You can say whatever. There was a tool that I built, my sister built actually, and she was using neo-brutalism because she was inspired by Gumroad style. Um, look at that. Look at that.

That looks cool.

I think it's still doing it, but—

It's still building it.

Yeah. Yeah.

Oh, that looks good.

This is crazy, man. For someone like you and I, you know, I— we haven't spent any time with Figma on this. We, we haven't spent any time on optimizing pixels or anything. It's just— wow.

It's beautiful. And then like, I mean, that's what the next step is of the vibing is like you can use this inspect element thing, uh, tool.

And then by the way, I, I spent a month on Bolt and didn't discover the inspect element. it drove me nuts because what I used to struggle with was if there was a specific logo on the header, in the header, and I want to update the, um, like the, the, the image used for that logo or some other image that I wanted, I couldn't get AI to get to that specific thing. I would always say like typing like, yeah, please update the, the logo in the header to the logo I'm sharing with you, and it would never— it would miss it. And yeah, so I watched a video somewhere that you have to show the inspect element and then upload the right image. I'm like, ah, so.

Yeah. So what this is doing is basically it's just show, like, you can choose anything like this and then it goes like, it zooms in on this.

Yeah.

This element on the page. So you can just like, like say, uh, change this.

Yeah.

Change it to, you know, corners.

Yeah. So you can be even more precise with that specific instruction by selecting the element on inspector.

Yeah, it's a really cool feature because that's the thing.

The responsive thing, the mobile, there's a, in the top. Yeah. You can see, you can preview like the whole page. One of those icons there will show you the sizes on mobile and like iPad and so on.

So yeah.

So yeah, if you click on this.

Oh, sorry. The responsive, this is the full page. Yeah. You can check it out.

Yeah. It's a full page, but you have to, yeah, there you go. So that's the full page and then there's a responsive view. There we go.

Yeah. So you can see it on an iPhone, what it looks like. If you wanna make it mobile.

One of the things I do in my initial prompt or in one of the second prompts is that I say, now make the design mobile responsive and modern. And then if there's any design inconsistencies, it'll fix it right there.

Yeah, yeah, exactly. Yeah.

Look at that. Conner General. Wow.

Look at that. I don't think we even, Asked for that, but it just gave us—

Sometimes it comes up with like its own thinking and I'm like, man, I— you're smarter than me, right? So then let's test out the past entries thing. Like, can you put something in there like ABC, whatever, and then see if it's saving it?

Okay. Yeah. So the past entries page is there, but yeah, there's nothing there. So yeah, like it probably won't save anything now. Let's say, uh, I am single.

That's so meta.

Okay, so it's saying there we go.

Oh,

it did save. Okay, but probably when I refresh,

right? This is where if you refresh, it'll go away because it's mostly front end. Now the back end, uh, just for anyone watching, um, the back end of something like this would be stored is you need 2 things for the backend, actually 2 or 3 things. One is you need a database, which is basically like a collection of tables where you save like Conor's email address, his user ID, so on and so forth, whatever preferences, his location, whatever preferences you want to add, save about the user and their specific data. In this case, it could be their journal entries in a table database. So that database part is usually handled by Supabase. Can you show that integrations feature on the top? Yeah. So there's a one-click integration to Supabase that Bolt has. So it's a very easy setup. You can watch a video on it. Yeah, it's a little bit of a step-by-step thing. So we can link the video, Conor, to your workflow on this. But the other insight I want to share is that Supabase is not just a database. That's what blew my mind. It also can handle other functions you need in the backend, like edge functions, which is a technical way of saying basically like logic. Like if you want the backend, you know, thing to like do something like, for example, like, hey, connect this app to OpenAI's API or Claude API. That's a— you need to write a piece of code that's logic connects frontend to that API and Endpoints that can also be done in Supabase using edge functions. That was new to me, by the way. So if anyone's watching, don't make the mistake I made. I spent like a month trying to figure out, 'cause I thought Supabase was just a database like Airtable,

but

it's not, it's way more.

Well, yeah, the first thing that I think about it as well is like, you're also, you don't really want to use like APIs here because like this code is being stored here and usually APIs are stored in this part here. But anyway, you don't want to be storing your API because this runs in the browser, so you need to store your API key, which, you know, you need to store it safely. So in that case, we can store it in Supabase, um, as well.

So again, we'll link all the videos to, to help you do that. That's like level 2, level 3, but it's very achievable. Um, it took me, it took me like 3-4 days to get the level 1 GET get right. And then from there, it took me like maybe 1 or 2 days to get to level 2. So it's— you can basically go from beginner to pro level in Bolt in a month safely, even if you're doing like 1 or 2 hours a day. Um, but the main part, the main focus has to be on doing, right? Like the action part. It's not just like watching tutorials and like, you know, forgetting.

Totally. Yeah.

Okay, so let's go to the second example. Um, you had a I think we kind of— wait, the second example is the gratitude one, correct?

Yeah. Yeah.

Damn.

Do you want, do you want to add something else? Like, like we can even try this out, the, the Supabase Edge function.

Yeah, go on.

Let's do it. Why not?

We have some time.

That's what I mean. Uh, so like, uh, usually I would just be going back to ChatGPT to ask for like, hmm, what else can I do here? You know, something cool. Um,

like the voice to text thing. I'm sure if you were not recording this demo, I think you would've done the voice to text thing, cuz I would've done that. Yeah, though, is that it may require a lot of back and forth, uh, right? So

that one, yeah, I guess like it shouldn't really, uh, we could try it. Um, see, I've done a lot of voice-to-text and, uh, yeah, it kind of uses the browser and, you know, technology which isn't the best. So you want to use like OpenAI's technology. Yeah, and to actually like record your voice and things like that. So Yeah, I mean, I just connected this quickly to another project in Supabase, so we can create an edge function like that. So this is like really, like you said, it's really, really powerful. And

it's game changer. Edge functions.

Yeah. So you can just like do so many things.

Everyone watching here gets to, if the day you guys go to edge function, like it's going to change your life. Like it's unbelievable what you can do.

I don't know if this is going to work now, but let's see. So using OpenAI's Whisper model. So that's their way of transcribing voice to speech to text. And then you just need to break it down and just think about it like, okay, we speak to text and then you can get like text. Once you have it in text, And you can ask OpenAI ChatGPT to respond to the text and then you can use something else to actually call it out, you know? So that's something that I'm building into my apps is like, so I can have conversations with my app, you know, just by those 3 features, you know? And so using OpenAI ChatGPT.

Can you zoom in a bit to see that prompt clearly for the audience? Yeah. Create an edge super— create a Supabase edge function. That allows us to record our voice using OpenAI Whisper model. Yeah.

Okay. So yeah, use the OpenAI API, right?

Yeah.

Key saved in the SQL base. Okay. Let's see if this works.

So I was gonna ask, do, do, do, uh, do you not need to create the, like the saving part of the database first, even before the voice part? Like I'm just saying, if somebody, uh, saves an entry, um, oh,

okay. Yeah.

I guess, I guess basically you can still run it on frontend, right? Like you can technically run even the OpenAI API on frontend.

Yeah, you could just—

asking you to set up, which you already have.

Sometimes it does this where it kind of puts the code in. Yeah, I don't want that.

Oh, and by the way, we haven't shown one more thing, which is the Deployment of an app on Bolt, which is using Netlify. So then they get the URL.

That's true. That's super important because yeah, otherwise other people won't be able to use this, you know, because you can only use it. This is in my Bolt account. So if you use this deploy, then you'll get like a custom and it's free. That's what I can't believe is like, I spend a lot of money on Supabase to save all this stuff, but it's like, why is this, uh, you know?

The deploy thing free. That's because Matt is so generous. I met Matt in SF. He's the CEO of Netlify. And oh my God, they're, they're, he's a visionary. Like he, he's sort of like a legend in the, in the developer space, 'cause he did the Jamstack, which is like a big, big step in, you know, 5, 6 years ago. I think. And so, you know, they're trying to be in the vibe coding arena as well. And I think one way to do that is have a generous deployment plan. Yeah. Um, so

yeah,

it's amazing. I mean, every time I use Netlify, I'm like, ah, I think of him. I'm like, yeah, this is great, man. That's awesome.

So, oh yeah, thank you. Because like, yeah, I have already like 9 or 10 websites.

Yeah, I have like, yeah, I know, 10 too, like URLs, and they're custom. I've customized them, um, to the names that I want, you know. Um,

yeah, so you still need to buy, like, if you want to have, you know, connorsjournal.com or something, you still need to buy that, and that's like $15 or something like that. But if you don't, if you just want to share it with your friends or something, you can, you can do that for free, which is— Yeah.

So right now what it's doing is adding voice functionality. Yeah,

I think so.

This is crazy, man.

Oh, I think there's still some steps I need to do. Yeah. Okay. There's a few other little steps I'll need to do.

You need to update your .env with your actual Supabase.

Yeah. So they don't have— so I need to go into Supabase and find A few kind of— they're kind of like the address and stuff. You have to go into your project settings and then you'll—

How about actually, you know, let's skip this part of it. In the, in the final video, I'll take it out because I think they can watch like a tutorial, you know, like, and then they get there. Let's go, if you don't mind, do the checkpoint thing where you can go back to, uh, before you did the voice-to-text thing, and then from there we'll deploy before checkpoint. Does that make sense?

Yeah, yeah, definitely.

Which is also, by the way, another great feature. You can actually go back.

Yes, totally.

Yeah, we were trying another additional feature, which is the voice-to-text thing, but that's like, you know, it takes a whole different video on its own. So we'll link some videos, YouTube videos, in the show notes. But what we just showed right now is if you went down a certain path and if you don't like that path, You can click on that button called undo. Is it undo or reverse?

It

usually says reverse.

Yeah. Or undo.

Yeah. It takes you back to the checkpoint where before you asked that prompt, you know, which is insane. Anyway, so now let's deploy and let's get a public URL that people can play with or you can share with your friends.

Oh yeah. If you're happy with your website, you just click deploy there and it will deploy it for you.

That's the key. final step in web coding where you deploy it. And Bolt currently has an integration with Netlify, which is what you're seeing. It will deploy to Netlify. And there we go.

So yeah, this is my website now of my gratitude journal.

Right. If you click on that, look at that. So you share this link with anybody and then they can access exactly this exact, you know, web page. And We still haven't connected it to Supabase database. So if they enter their thoughts or entries and then click save or refresh the page, of course they'll lose those. But of course, once you connect the database, you know, it'll like save everything. Mm-hmm. But yeah, so that's, there you have it, guys. This is hopefully a super beginner-friendly, easy primer to get you into Vibe Coding. I promise you, this is like a rabbit hole. Like, you won't want to leave, you know? Once you get into this, it's like so addicting and it's been so much fun. I mean, I'm having— like, Connor, what do you think? Are you having fun?

Oh, I just love it. Like, I'm so addicted, it's crazy.

So crazy. I don't even think about how much, how many tokens I'm paying. So let's talk about the tokens part of it for Bolt, right? I mean, they have a, um, I think they have a very generous starting plan too. For someone brand new. But then the one that I think I'm on is the Pro. Right now there's a hackathon going on, so they've given for the hackathon, if you join the hackathon and apply and get those credits, you get like, I think the Pro month for the Pro 20, I think. Is it? Yeah. Yes.

You get 10 million.

Yeah. You get that for a month for free. So Go leverage that. It's awesome. I've built like a whole project and it took me like 3 million tokens, I think. Yeah. So, you know, 10 million, whatever that number is, is a big number for $20. You know, highly, highly recommend getting it and you won't regret it. The way I view all of these tools, Conor, is my perspective is that this is like getting an MBA, right? Like it's worth the investment. So I've given myself a very generous, like, $1,000 budget, you know, for, for the year, or maybe like, you know, a couple months, so that like I'm pretty sure I'll make more. Not only just make, but like the education I'm getting is like 100 times more valuable. So don't let money be a barrier, hopefully.

No, no, it's, it's so worth it just to learn and to do all these things and create new— like, software is just getting You know, it's available to everybody now. I think that's—

So let me ask you a couple of final questions. So one is, so the Stripe integration piece. So have you gotten to a place where you're integrating Stripe, you know, into one of your products? And then there's like a, let's say, like a SaaS, you know, version of the tool? Not the example you're showing me, but like any of the previous works you've done?

I haven't done the subscription Stripe yet. I just have a one-time payment and—

You do? You have it? How was that?

Yeah,

was it— oh, for the course? Can you show us? How was it? Like, was it easy to—

Yeah, it was fine. Um, yeah, I just asked for it. It just, just said create me, uh, integrate with Stripe and create me a one-time payment. Um, and it just did it. Yeah, one go. Damn,

that's awesome. I think— I, I wonder if the subscription thing is probably almost similar. Like, you know, maybe it's not You know, maybe that's the next level, right? Going to—

Yeah, that's next. That's for me next week. I'm gonna do that for a new AI SaaS. So, uh, that's my next, uh, thing. I don't think it's gonna be too hard.

Yeah, I, I feel like, uh, also this is another note for all of you watching. This is the worst, um, you know, vibe coding tools are going to be in history because they're only going to get better. Like we've seen, I, you remember in January, or February, these were like not this good, right? There was no Stripe integration. There was no, um, uh, there were so many things that were like, uh, I would say like a subpar in terms of how much you had to really sort of navigate your way and be patient. And I think, uh, they've gotten, it's gotten so much better. The UX output, like, I feel like the UI/UX for Bolt output,

uh,

so much better in the last—

Yeah, there used to be a lot more bugs and like even before we got like, uh, an error and we just fixed it in one click and that seems to happen more and more before. was like, you just go down a rabbit hole of bugs and it couldn't—

Yeah, you'd like spend 50 tokens.

Now nearly every time it fixes it.

Yeah. There's also a discussion mode. Can you show them that once quickly?

Oh yeah, that's true. Yeah. I do use that a lot.

Yeah. Me

too. Yeah. So this button here.

Yeah.

If you're not sure of the path to go down to, it's a little bit like the way I talk to ChatGPT, but you can just say like, you know, what should I do next or something like that? And You know, this is connected, I think, to Gemini.

Yeah, I think it's connected to Gemini. So it's— that acts like an LLM, like ChatGPT or Gemini. And then that part, it will not do any actions, but it'll have a chat with you.

Exactly. So you just toggle that on there and press enter. And yeah, you won't spend as much tokens as well. So this is a really good way to save and it helps it create the plan. So often in

this case,

actually it didn't, but it will often give like implement this plan. So like, do this, do that.

And then it'll just show a button that says like, okay, now execute this or implement this,

right? Yeah, exactly. Um, so yeah, it'll keep talking in this case, but usually it'll say implement this plan and it's less likely to get lost then as well because it spent the time thinking of, oh, step 1, step 2, step 3. Yeah. Yeah. That's really good.

Anyway, so, um, okay. So this is great. Let's, uh, spend like maybe a minute to talk about some limitations and constraints. Like if someone's, you know, let's say build, wanting to build an app with vibe coding, what is your recommendations on constraints and limitations? Because of course there are constraints. I don't want to be, you know, we don't want to be like evangelists, blind cult leaders, right? Yeah. What do you think are the limitations currently as we speak?

There's a couple of things, I suppose. Number one is just that we mentioned it a little bit already, just, you know, try to go like, think of how simple or complicated the app will be. If it's going to be super complicated and you need to like integrate with Salesforce and get all these APIs. guys is like that. Just know that that's level 2 or level 3 and it's fine. You can, you can get there, but you're not going to get there overnight. You need to, you know, test this out a few times. The other thing is the security of your apps and you need to think strongly about that part. It's a little bit complicated because yeah, there are bad people out there who will attack you. And so yeah, I think that's something to think about and to learn about as well.

Vibe coding is getting a lot of flack from, from old school developers or traditional developers because they're like, oh, what about security? What about the bug? What about all the hackers? And I think, you know, of course it's definitely a nascent, you know, induct— uh, sort of a trend or a nascent, um, domain. So of course it's more vulnerable because it's nascent, right? Um, and also the beginners are much more likely to make some rookie mistakes and leave out some of the keys or some of the, you know, passwords or whatever in the front end.

Yeah.

code. So my hope on that is that over time, the domain will get stronger and it'll have its own inbuilt checks and guardrails. Like, I think Lovable already did, like, I think a pretty strong move, which I appreciate. Yeah. I'm pretty sure Bolt will do this at some point too, which is when you click deploy or just before you deploy, there's a scan it does for all the code and all the projects so far on any security vulnerabilities. And like list those 5, 6 things and you can click on say fix this, fix it, fix it, right? I think that's a very, very smart move. I think all live coding tools should employ that technique because beginners, you know, again, right? Like they may not know like what they don't know. So what I do, but to, for now to get around Connor is, um, in the discussion mode, I go and I will actually type, um, in the progress we made so far, do you find, uh, can, or did you find any security vulnerabilities? Can you scan and let me know? You actually type that, it will do it, which is crazy, right? And then you take those results and then you go to the non-discussion mode, which is the build mode, and then you fix them, right? Okay. Usually after you do this 4 or 5 times for projects, you know the patterns of vulnerabilities. Usually it's the environment, like the keys, leaving out the API keys in the .env file or not putting in the right place. Or not using secrets, which is the feature for Supabase. And so by now I kind of know, you know, the basic ones, not using RLS, you know, row-level security for Supabase. But again, over time, you know these at the back of your hand. But initially it's better to— my tip here is to one, ask the LLM, in this case Gemini, about security scanning and ask Bolt to scan it. The other thing, if it's like a big high-stakes project, it's not a side project, like it's a really big high-stakes public project that you want to put your name behind it and so on, I would at that point go talk to a real developer who's—

Yeah.

Who's like— but talk to someone who's like a— who's in the AI world, like not the old school developers who will immediately hate the project, but like someone who is, you know, I have so many friends who are developers who are in this, you know, who are in the vibecoding world. And I'll do like a quick 30-minute call with them and I'll ask them to share my screen. And so I'll share my screen and ask them to like, hey, can you take a scan and let me know what I'm missing? And they're, you know, again, they know so much, like they will ask the right prompts and they will even like scan through the right code base, the right, you know, package. And they'll be like, you're good, KP, you can go live. And then we go live. So that's what I'd recommend for now. Sure. To do the same.

For sure.

Cool. Any, any closing thoughts? Like, what are you most excited for in the next few months? Like, are you building anything cool? What kind of roadmap do you have for this year?

Yeah, I'm building, uh, like, I'm usually a marketer, right? So for me, I've been doing very little marketing at all for the last 2 weeks. I've just been building for the Bolt Hackathon. It almost like hurts me. I feel like, oh my God, I need to make videos. It's like I'm almost in the flow of making videos all the time. It's hard for me not to make videos. So I've almost got my project ready. It's almost there. I need a few checks and stuff. So I'm just going to launch that. It's like a language learning AI SaaS. So I'm going to launch that and then I'm just going to market that for as long as I get back to marketing and back to my roots.

You can, we can maybe do another video on why marketing, you know, when you just, if you discover anything cool on how you're using AI for marketing.

Sure. But

yeah, that's awesome. I, my, uh, on my plate, I mean, uh, when I have some time, you know, because I, I got— I'm doing the Launchpad, I'm doing all these like Paddle stuff in the nights or in the weekends. I'm, um, my goal is to kind of keep building, keep tinkering. Um, I just built one I shared with you, I think, the, the Remedy Hunt thing. I don't know if you saw.

Yeah, yeah.

I built the Remedy Hunt project and just kind of keep tinkering, keep building, because it's so much fun to be in the arena, to be in the mix of things, like building things as opposed to reading about them or watching tutorials. Um, so yeah, my goal is to like build, I don't know, like 15 projects or 10 projects this year. And, uh, it's like on average they're taking like 5, 5 days, 4 days depending on my time. Um, so I think it's very feasible. And who knows, by the time we get to December, you know, any one of those could take off. Anything, anything could happen. My goal is to mostly focus on learning, enjoying and learning and leveling up, right? Um, so I want to wrap this up by giving you a shout out, Connor. The very reason you're on this podcast is because of a very kind thing you've done without knowing, which is you put out a video on your YouTube channel on OpenAI's API keys and how to integrate that with Bolt, which when you did it, you probably didn't even think who it's going to impact, who's going to watch. I watched that maybe a week ago, and that whole night, like for 4 hours, I was like, in awe. I mean it. I was like, what? Because it was so easy, right, Juan? And then I was like, can I— I can literally just prompt. Like, I can let my tool, let my users in my tool prompt and get answers from OpenAI. Mind-blowing. And Claude. And then I switched to Claude just for fun.

I was like,

watch, it's working, you know? So I want to say thank you for that video, and thank you for educating so many, so many, you know, people like me.

Oh, no problem. It's— I, I love doing that. I love sharing. It's like I can't stop sharing. It's like I love just sharing everything and learning and sharing at the same time, you know. It's great.

The same thing, right? I, I feel the same thing too.

So

yeah, awesome. Thank you so much for being here, Connor, and for your time. And when this video goes out, I'll link it to you and, you know, we'll, uh, promote it together.

All right, great.

Thanks everyone for watching.

Thank you.

If you guys have any questions, um, anything we can help with, please DM us. I'll leave our, you know, Twitter links And, you know, we'll do our best to help out. Thanks everyone.

Thank you.