The Fastest Way to Start Coding with AI (Vibe Coding Starter Guide)

I built a real life app using AI without writing a single line of code. And the way this came about is couple months ago I had an idea for an app that was going to be complicated to put together. But I tried all kinds of AI tools to do it right. I started with chat GPT then I got bunch of different standalone coding apps and I was getting really frustrated because I just kept hitting a wall. It was really not becoming anything real. Then I met a YouTuber Vololo and he actually showed me that you can build an actual app, a working prototype app without writing any code or having traditional coding experience which I don't have. So from that point, it only took about a week to actually start writing using AI and building an actual app, actual tools. And I also learned an AI powered coding tool called Cursor. You probably heard of that one before. And that basically helped me get to the final stage of having a prototype for my app. So in this video, I wanted to show you exactly what's possible with AI coding starting from zero. So if you have an idea like me for an app or if you just want to mess around with AI coding, figure out what it's all about, this will give you a real taste of what you actually could build using AI. Hey Volo, thanks for helping me with this. Can you walk me through for someone who has no coding experience, how do you think of AI coding and what's possible with it? Hey Sash, thanks for having me. Yeah, I mean I think there are many AI coding tools out there now and it's never been easier to get started and if you're a total beginner, you can get started directly in Chad GPT. You don't even have to use, you know, some of those other tools. But as your requirements get more advanced and as you want to build more complicated things, that's when you want to pick up some of those other tools. So the way that I think about it, there's really three different categories of tools. There's just your typical AI chatbot like ChatGpt, and these can be actually pretty useful for simple internal tools. Then there are AI app builders like Lovable, which allow you to build something pretty quickly from scratch, but still have their own limits. And then on the other side you have tools like cursor that allow you to build pretty much anything that you can imagine but do require some more technical knowledge which you can build up while using the tools. So I'm happy to show you how to use some of these things and I know you have a production company. So what sort of tools do you think would be helpful for you? Yeah, I mean I'd love to get started with like the basic stuff kind of the way you showed me when I first started learning about this. So, starting with the chat GPT uh side of things. So, I have this process where we send out estimates for video production for all kinds of different clients, but it's very manual. Old school Excel adding rows, you know, doing formulas, stuff like that. And I've never really found a way to make it more efficient. I guess it's kind of worked, but it is timeconuming. I have to train people to do it. So, I was hoping to make an app or some kind of a tool that's really easy to use, nothing complicated that I could just have for my internal team to do estimations. Okay. Yeah, I think that's a perfect use case for starting in Chad GPT. And so, I'm just going to go over here to Chad GPT. Let me share my screen real quick. So, I'm over here in chat GPT and I'm just going to ask, please create an interactive tool that allows me to create production cost estimates for my video production company. It should allow me to specify the crew that I will have involved and the amount of editing and screenwriting time that is necessary for the production. And now I'm just going to go over to tools and click write or code. And that's going to enable the Chad GPT canvas tool so that Chad GPT can write code for us. All right. So now it's getting started. It's writing some code. And as you've seen, you don't really have to get into the weeds of what is happening here because you'll be able to see how the tool actually looks now that it's done. I'm going to go ahead and click this preview. And here's our cost estimator. So now if I have you know a certain number of hours I have different kind of roles let me go ahead and calculate the cost you know now this can be a tool that you can share with clients so that they can get an idea of how much it's going to cost to work with you on a particular production. Okay if I want to actually add to this can you walk me through that? So, for example, I could tell from here that it does cover a few different roles, but I need more roles. So, for example, I need a production assistant. So, if I add a production assistant, and their rate is $25 an hour, can you show me how to add that? So, I'll just continue the conversation in chat GPT and I'll say, we would like to add a production assistant role as well, and the rate is $25 an hour. Speaking of which, can you let me know the rates that you currently

have configured for all of the other roles? And it's just going to go ahead and change this for us. So, we'll see the update in a second. All right. So, it has a response for us and it's showing us the current rates. So, if we wanted to change those again, I could continue this conversation and tell it to update those things. And now we also see the production assistant is present right here. And let me show you one more thing. You can actually click this share button and then create a link and then you're going to be able to send this out to other people. So, it's not just a tool for you, but you can actually share it directly with your clients. Oh, okay. Perfect. Yeah. I mean, those rates were actually shockingly accurate. Would part of this workflow allow me to upload my own documentation and then it pulls in from that documentation instead of telling it individual rates and things like that? I think there are some tools that you can use to connect Chad GPT to various apps over here. So like if you have it in your Google Drive, it could potentially pull that from a document that you have that. Okay, perfect. This was I think a real good use case for me to do this part. Now, I know you showed me another tool after this tool, which kind of blew me away. Can we jump into the second tier, which is using Lovable? Yeah, absolutely. Lovable is a really powerful AI app builder. And on the surface, it looks very similar, but I think you'll very quickly see the depth and detail in which it builds out these apps and how much more geared towards actual software it is than Chat GPT. So, let's go ahead and try to just build a landing page for your production company. And you know, the first thing I'm going to do is actually just ask Chad GPT for a really good structure for that landing page. And then I'll paste it into Lovable so that it can build out all of the necessary components. Please describe the structure of an optimized landing page for a production company. Great. So, we have the layout here. I'm just going to go ahead and copy paste all of this. go back to Lovable and I'll tell it I would like to create a landing page for my production company, New Slate Films, and I would like the landing page to have the following layout. And then I'll just paste in what Chad GPT told me to do and we'll get started. Oh wow, that's good. Check it out. And got some social proof. It's interactive. Oh yeah. Nice. Super cool. And we got all the sections. You know, if I submitted the same prompt to Chad GPT, we'd probably get something really minimal and not quite as professional. How can I see a full screen? Does it let you Yeah, definitely. Let me click this over here. And you can see the app and it's actually deployed right away. And Lovable also makes it super easy to add your own domain. So you can just click a couple of buttons and you could see this on your real website. Oh, perfect. Okay, this is nice. Is it mobile friendly? Yeah, it should be. So, let me go ahead and just click F12 and click over here. And this is what it would look like on a phone. Oh, perfect. Okay, cool. Wow, this is really good. I'm just curious like if I wanted to make a revision to this is that just similar to chat GPT just back and forth chat for example I was just thinking on the landing page on right here I just want book your free consultation to be the only thing visible and centered and not have that other box and then it'll do a popup to capture their email. Is there a way Exactly. and you would do it the same way just by continuing this conversation. So, let's go ahead and do that. Let's make the book your free consultation the only CTA and center it and then create a popup when that is clicked. So, one thing I will mention is that once you make changes, what you're going to want to do is publish so that those changes actually get reflected on your site. So, I'll go ahead and do that real quick. And now I'm going to click that button again. And now we see this working as intended. Ah, perfect. Okay. Oh, the one thing that you showed me the first time I tried Lovable, it also keeps version control, right? So, if I want to revert back, it's really easy to do that. I noticed. Exactly. Yeah. There are some really great integrations in here. So, for example, you could actually start collecting emails by connecting to Superbase in here or do the version control thing that you're talking about by connecting to GitHub. And that's going to allow you to pass this off to a developer or to actually open this code in a different code editor if you wanted. Okay. Can you

actually click that little code icon on the top? I want to see not the GitHub one, the one that dev mode. Yep. Dev mode. Yeah. So, it created all these different documents just from that simple prompt. Exactly. And so we can look and review the hero, the footer. There are also some other cool features. You can actually go and edit specific parts of this without even requesting code changes. So if it's something like just simple text, you can actually just go in here and edit it directly. I didn't know that one. Nice. Yeah, that's Yeah, it's a really powerful tool. I like to use it for all sorts of little tools and things that I think of. Like the other day, there was a file that I wanted to convert, but I didn't want to upload it to one of those sketchy websites where you get, you know, it in a different format. So, I just asked Lovable to create a converter for me, and then I used that, and it was just super smooth. Yeah. Yeah, that comes in handy. I' I've been building bunch of tools since I started using this. All right, cool. Let's get to the beast cursor. Can you show me that next? Yeah, absolutely. Cursor is a really powerful AI coding tool, but it is a little different from some of the tools we've used so far. So, it is going to be something that you actually download onto your computer, and it's going to be working directly with the code files on your computer. So, is there any sort of app idea that you have that would help your production company that's maybe a little bit more complicated than some of the stuff we've built so far? Yeah, actually something we go back and forth on a lot is when we have a video that's finished, we usually give it to the client and then they review it. They give us notes. This is true with YouTube sponsorships too, but usually that, you know, we use different apps and the client needs to log into the app and it's kind of complicated. Is there like a simple web version of that where we could upload a video that's finished and then the client could go and leave us notes for that video and then it will send us that notes back and then we'll do the revision and give them a new video. We use that all the time and I think we pay few hundred bucks a year for different tools but they all have their own problem. So I rather have one where I control the whole thing. Yeah, absolutely. I think that's a perfect use case for a tool like cursor because you are going to have to connect with some services like for the file hosting you're going to want to have authentication and login. So it's a little more advanced right than some of the stuff that we've done so far. But you can do all of that within cursor. So let me open it up and show you what to do. Okay. So I'm here in cursor and we just have an empty project right now. So there's nothing going on. But on the right here, you'll see this AI chat panel, which should look kind of familiar. But you'll see that cursor can go beyond just having that conversation. It can run commands. It can write code. It can look into the different files and figure out what's going on. So, let me go ahead and describe the application so that it can get started. Please build a basic application that allows us to upload videos and then other users can leave comments on those videos at particular timestamps. So I have my basic prompt here and below you'll see that it is using clawed for sonnet. Now, this is the best AI coding model out right now, but you can choose other ones. And the thing about Cursor is they continue to add new models as they come out. So, you're always using the latest and greatest tech. So, let me go ahead and submit this prompt and we'll just see what Cursor does with it. Okay. So, if we read through some of what it's saying, it's going to create a React app for us. NodeJS API. you know, it's going to keep some sort of database here. And again, a lot of these details are definitely more in the weeds. But as you start using tools like this, you just start to become more familiar and comfortable with some of these because those words keep showing up and you see that this is a JSON file and you click on it and you kind of see the structure. So, you slowly begin to learn about how some of these things work. Okay. So, I don't really need to know what React is, but you're saying once it tells me every time I try to build an app, hey, use React for the front end or Node. js for the back end. I'll kind of understand that and maybe I could ask the next time I build something. That's exactly what I'm looking for. Exactly. And you can even use this as a learning tool because you can just go and ask why are we using React? You know, tell me about React, tell me about Node. js. And so it becomes a very immersive learning experience for you. All right, it's telling us that we should run this command. Let's give it a try. Okay, so it ran the command and it created a bunch of files for me right out of the box because there are these commands that you can run that kind of help set

up the project in many ways. So that's why we suddenly see all of these files there. And now it's continuing to edit and modify these other files. And you see cursor giving me these various commands to run. They're generally pretty safe. So I typically just run whatever it tells me. Okay, so cursor has installed a bunch of dependencies and now it's ready to actually run the application. So I'm going to go ahead and run this command. Okay, so it looks like it's supposed to have started, but as I look at this content, it looks like it just ran into a bunch of errors. So, let me just go ahead and copy paste this back into the chat and we'll see if it can work through this. Yeah, that's the one thing I've noticed actually when I started using this is if you're not a developer and you've never developed before and you kind of told me this so I already knew this would happen. These type of things are normal for developers like when things don't work and then you copy and paste and then you get an answer. I guess back in the day you used to have to go figure out the answer on the internet, but now you just ask the Exactly. Yeah. I think running into errors like everybody does it. Even if you're a super experienced developer, you're just running into error after error. You've just been conditioned to tolerate that and know what to do. You know, you just yeah, paste it back into the chat, see what exactly is going wrong. There are certain prompts that you can use to have a better chance of success, like telling the AI to add additional logs that you can then paste back into it so that it can do some of the troubleshooting for you. But yeah, no matter how much experience you have, this is just part of the game. Yeah, I noticed that when I was telling even with Chat GPT building simple tools, Lovable had the same thing, especially after I got past like 10 prompts and was really trying to dial it in. It definitely was part of the flow. So, I think you just got to be patient if you're doing any kind of development work, but if you're doing it with AI, it just takes a little bit of time to get used to the kind of the back and forth. So, it looks like cursor went through and figured out what the error was. So, now it ran this command and we can actually go and see what our application looks like. And right now, I mean, it's pretty minimal. So, I can put in a title, then upload a video, but I guess the click isn't working. So, this is like we were talking about, right? You continue to run into issues and you just got to go back and tell the AI what's wrong and continue to work through it. So, in this case, I'll explain that the upload button isn't doing anything. So, I'll tell cursor that it was a great start and the app is running, but the upload button doesn't do anything, and we'll see if it can figure out the issue. Now, one thing I'll say is that we've done a lot in this single chat. It set up our entire project, all these different files. And so you see in the bottom corner over here, it says, "Start a new chat for better results. " And this is something I recommend people to do is whenever you're building a new feature or you're fixing a specific bug, you just start a new chat because that's going to help refresh the context for the AI so that it can stay focused on the specific thing that you wanted to do. This is one of the problems with tools like lovable because you might have a really great initial result but then you continue to try to add things and build new features and it just gets confused and stuck and you end up getting frustrated. Cursor gives you more control over how you manage what exactly is getting sent to the AI. So in our case as I add new features and fix things I'm just going to be starting new chats for everything that I do. One thing I noticed with cursor is when you start the new chat, it summarizes everything up to that point in a compressed way. So it's not like starting a new chat in chat GPT where it's literally from scratch. This keeps all the context but not in a huge long chat where I noticed lovable doesn't do that. And the more I went back and forth with lovable when I was on like prompt number 50, it would have a hard time keeping everything that it we were talking about before. That's one of my favorite things I noticed inside of cursor is that new chat option. Yeah, absolutely. And the other thing is like I said, they have a lot of different tools to control that context. So, I'm actually going to open a new additional chat here just to show you that uh which you can do. You can have multiple chats now running in parallel. So, if you have multiple features, you can actually have multiple AI agents working on different things. Uh so, it's really cool. You can actually tag specific files in here. So if you know how your application is organized or if you don't know then you can ask cursor and it'll tell you. Uh you can tag specific files. So I might say app. js. If I go there this is the code and I could say I want this to be full width now. and it's going to know that I'm talking about this particular component instead

of some other arbitrary part of the app. So, you can really direct it uh in terms of what you want it to change. All right, so it took a couple of prompts, but I think we have the correct change in place. So, if I flip back over to the UI and upload now, I can actually select a video, select one, and there we go. Now I can click it and it gets successfully uploaded. We can even watch it back here. Okay. So just for the sake of time because I've done this myself. I know this is not something you could do in like 10 minutes, right? Typically to build something like this, you spend two, three hours maybe going back and forth. I guess this is what they call vibe coding, right? When you just jump into cursor, you have no idea what you're doing. But you can walk away with an app. But the more you learn, like right now I've been using it for a while and I'm looking at the structure. I'm learning more about what the different languages what to ask for technically and then you kind of build a full stack app right this has a server component to it too right where are these videos for example where are they getting stored right now exactly yeah so right now I think it's just saving them on a dedicated folder on my computer but like you said as you learn the different technologies you you learn what they're used for you can integrate any service that you want in here so you could connect it to a file storage thing like S3 from Amazon and then those files would get uploaded to there. You can integrate things like Superbase to have a database up in the cloud. You can connect to OpenAI's API and add AI features. Right? The sky is the limit in terms of what different tools and integrations you can add to your application. I know we already were building this. You were kind of building this for me already and helping me through it. So can we jump ahead and show after what it take you like an hour or two to really get it dialed in. Can you show that version of it? Yeah, absolutely. So here is a more production ready version of the application. And in here we see that we're using some nice components which again we can pull from libraries that are available. And now I can click into a video and we can see comments that have been left at specific timestamps like you were describing. I can share this. I can go to, you know, a different URL and leave comments. So, yeah. And like you said, it took me, you know, a couple of hours, but if you look at the bigger picture, something like this could have taken months to build, uh, you know, just a couple of years ago. So, the rate of acceleration and the ability to build apps like this is quickly growing. Okay. So if someone's pretty much brand new to this, I think the way you taught it to me was the best way to learn AI coding. We basically started in chat GPT building simple tools going to the second tier which was tools like lovable and there are a few in the market like that where they take a text prompt make you a landing page a simple app and then when you when I got really comfortable and I wanted to build something really robust like something like uploading a video to a platform where people comments that's when we moved on to cursor and I think that's the most robust I mean you told me you could build pretty much anything you could imagine with a tool like that and in the last couple of months while Volo was teaching me this, we decided to put a really comprehensive course together because I found so much value from his teaching that I thought we should just bundle that into a really nice course. It's less than three hours. You could literally go through it in a day. But really implemented and we covered those three tiers, building things with chat GPT, moving on to lovable, and then finishing up with cursor. And he builds entire apps that even tie into other AI tools. For example, we built something inside of Cursor that tied into OpenAI's API. So, we built a AI powered app inside of that course and it's available right now inside of Skill. We just launched it. And if you're not familiar with Skill, we have a library of AI courses. We have about 20 different courses right now and it's all one bundle. So, you'll get the AI coding course along with all our other courses with one membership and we have a community where you could ask us any questions that you want. I'll put a link in the description where you could try it for yourself here. I think you'll find a lot of value in that course. And Vololo does have a YouTube channel as I mentioned and he has ton of useful tutorials on AI coding. So if you want to learn more about AI coding like learning tools like cursor, I recommend checking out his YouTube channel as well. Bolo, thanks so much for spending the last couple months just kind of walking me through all this stuff and teaching me and doing this video with me. Yeah, absolutely. Thanks so much, S. It's been a blast putting together the course and I hope people get a lot of value out of it. Thanks for having me. Thank you.