FREE Vibe Coding Community: https://discord.gg/Fw2Std9v
In this video I walk you through vibe coding 101! If you've never vibe coded before or don't even know what vibe coding is, this is the video for you! You'll build your first app with AI
Follow my X: https://x.com/AlexFinnX
Sign up for my free newsletter: https://www.alexfinn.ai/subscribe
My $300k/yr AI app: https://www.creatorbuddy.io/
First prompt:
I want to build out an application with AI. I will be using Claude Code to build out this app. I want to build out a todo list app combined with a calendar. So when I create new todo items I can place them on a calendar. I want to use NextJS for this application. What do you think about this idea and what features would you add
0:00 Intro
0:57 What we're covering
1:41 What is vibe coding?
2:41 Biggest opportunity ever
4:16 The tools we'll be using
5:00 Installing the tools
7:45 Using Claude Code
8:48 Coming up with app ideas
11:09 Coming up with plan for the app
15:47 Sending first prompt
17:49 V1 of app
21:38 Tinkering with the app
28:49 Anatomy of an app
31:17 Putting the app live
34:21 Getting first customer
Welcome to the Vibe Coding Master Class. Vibe coding is the biggest opportunity of our lifetime. And by the end of this video, you'll know exactly what vibe coding is, what tools you need to do it, and I'll show you exactly how to build your first application using Vibe Coding, using both Claude Code and Cursor. I'm your professor, Alex Finn. Last year, I vibecoded an app called Creator Buddy that's now making over $300,000 a year. I vibecoded it all by myself. I didn't write a single line of code and I am very very confident you can do the exact same thing especially if you stick with me through this entire video. So let's lock in and let's get straight into it. And just as a side note before we begin, I just created a free vibe coding community. Feel free to join down below. Link is in the description. Tons of people in there learn the vibe code. I hang out there all day. We do weekly calls where I walk you step by step how to vibe code and give you tons of tips. Link down below. Let's get into it. So, here is
everything we're going to cover in this video. First, I'm going to go over exactly what is vibe coding. Everyone saying the term, what exactly does it mean? I'll go over why this is the biggest opportunity of our lives and why it is so important to watch the entire video. I think everyone, even if you've never coded before, should be taking advantage of this. I'll go over the tools you'll need. So, we'll specifically be going through the best AI vibe coding tool ever, Claude Code, as well as Cursor. We're going to go through coming up with an idea for an app so you can have an app you can build out. Then I'll get into actually building out the app. So by the end of this video, you actually have an app built out all by yourself, even if you've never coded before. And then lastly, I'll cover going live and getting your first customer so you can start making money off vibe coding as well. Let's lock in. Here we go. What is
vibe coding? Vibe coding very simply is building software with AI. Now, when I say building software, up until now, that has been a very intimidating thing to say because before this, you needed a ton of skills, right? You need to know how to code. You probably needed a computer science degree. Vibe coding completely democratizes that. So, you don't need to know how to code anymore. The AI does all the coding for you. You are just guiding the AI on building out the idea you want. The reason why it's called vibe coding is you're not writing any code. You're not doing anything technical. You're going along with the vibe of the AI and just kind of thinking about what you want and saying it out and the appears before you because the AI builds it out. That's why it's called vibe coding. And I truly believe everyone needs to know how to vibe code. Everyone, no matter what your job is, no matter how little technical experience you have, it's going to make you so much more valuable in your career. And it's going to allow you to build things you've never dreamt of before. I also
truly believe this is the biggest opportunity of our entire lives. I'm not even being hyperbolic. There have been many revolutions in our life. There's been the industrial revolution. There's been the internet revolution. There's been a ton of revolutions. But each one of those massive opportunities required skills, required connections, required you to know the right people, required you to have certain resources. This is the first major revolution that does not require any of those things. All this requires is a connection to the internet. That's it. That's all this requires. There has never been a more democratized opportunity in the history of mankind. I truly believe that and that's why I think this is so important for everyone to learn vibe coding from your grandma down to your grandkids. Everyone should be learning it. It is again the most democratized opportunity ever. There is zero barriers. Internet's never been cheaper. So anyone can be doing this. And the best part is, and the reason why it's so incredible is you can now go from idea to product faster than ever. Within an afternoon, you can think of an idea for an app or a software or a product or anything you can think of. You can sit down and you can vibe code it and you can have a full working product by the end of the afternoon. Before, if you came up with an idea, it would take years to build it out depending on the complexity. Because of vibe coding, you can go from idea to product in this amount of time. Before it took this amount of time, now it's this. It really is amazing the opportunity it's presenting. So, what
are the tools you need to vibe code? Well, in the AI space, tools come and go just like this. One day they're relevant, the next day they're not. But there have been a couple tools that have stayed hyper relevant this entire time over the last couple years. Those tools are cursor. So, Cursor is kind of the OG vibe coding tool that came out first. It was like kind of the first development environment uh powered by AI and it is a really powerful tool and it's great for beginners. There's Claude Code. Claude Code got released earlier this year and it is point blank the best AI vibe coding tool out there ever made. It is amazing. It is mind-blowing. It is revolutionary. It is the tool I use full time. We'll be going through that during this video as well. So, let's get
started. Let's walk through installing these tools so we can start vibe coding. I can show you exactly from A to Z how to get vibe coding done. So let's start off with cursor. This is going to be the tool we combine with claude code to build really powerful applications. Uh there is a free version. So you can get a twoe trial of the pro. If you haven't download yet, I'd get it installed, start using the free version. Claude code is a little bit more expensive than cursor. So, if you're very price conscious, you can just go with the $20 a month version and then not have to pay for Claude code after this. I'll again I'll walk through how all that works. But for the sake of this video, we're going to do cursor and claude code. So, download this, sign up, uh feel free to use the free version just so you can try this out for the sake of this video. If you fall in love, you can keep going and pay for the $20 a month version. Once you have Cursor downloaded and you're all signed up, feel free to open it up. And this is what you're going to see. This is what Cursor looks like. What you're going to want to do is open up a new project. This is going to allow us to build our first application. So you just click open project, create a new folder, and open up that folder. So I'm going to create a new folder in here called vibe coding masterclass. You can call this whatever you want. And I'm going to hit create. I'm then going to hit open. And we are now in our new project inside a cursor. And we're good to go. It is time now to set up claude code. So, we're going to go back to our browser to get a command so we can install claude code inside cursor. So, if you go to anthropic. com/cloudcode or you just search for claude code, you're going to see in here the command for installing claude code. So, you're just going to copy that. You're good to go. Now, we're going to go back into cursor. Now that we're inside cursor, we're going to want to open up the terminal. This is where cloud code runs out of it. Actually runs out of your terminal. So, we're going to open up the terminal in cursor. If you're on Mac, you're going to hit control till day, which opens up the terminal, which you can see down here. Uh, I'm actually going to move this to the right hand side. So, if you right click on it, do panel position, right? Moves it over here. You can close out this panel over to the right hand side. And just as a quick note here, this panel you see here, this is the AI chatbot inside Cursor. If you're just using cursor by itself, which is a solid tool by itself, this is where you would talk to build out your application, but claude code's better. So, we're going to close that panel. And what we're going to do is we're going to paste in that command into here. So, from the Cloud Code website in there, hit enter, and it will install Claude Code. Once you do that, it should open up by itself. But if it doesn't open up by itself, feel free just to type in claude into the terminal and hit enter and it will open up claude inside your terminal. And now you have claude code set up inside cursor. You are good to go. So here we go. We're all set up to
vibe code. You are ready to become a vibe code master. Let me quickly show you what you're looking at here. So this is going to be our setup. I think this most powerful setup you can have with vibe coding. So you have in the middle area is going to be where your code lives. So when the AI builds code, it's going to go right here in the middle. On the left hand side is your files. So as the AI is building out files of code, you'll see that over on the left hand side and over on the right hand side is claude code. This is where we're going to be talking to the AI. giving our commands to the AI and the AI will be doing work for us. This is basically an AI agent, Claude Code. Claude Code is just an AI agent that takes commands and then writes code based on your commands for you and it is very good at what it does. So if you want to build different applications, all you would do is you'd go in here and tell it what you want to build. Now let's do this. Before we start building, we need to think of an idea to build out. There are two different types of ideas that work really, really well for vibe coding. There are solving your own challenges
which I think is the best. Right? If you solve your own challenges, you are probably solving other people's challenges as well because other people probably have the same challenge as you. But what it also means if you solve your own challenges, worst case scenario, even if no one buys your application, you've improved your life, right? If you create an application that solves one of your own challenges, even if no one buys it, you've improved your own life. Like for instance, Creator Buddy, my app that I built out, I would spend hours a day reviewing my old tweets. I love Twitter. I create a ton of content on it and I try to perfect my craft. I read all my old tweets to see what works and what doesn't and I would spend hours doing that. And so I thought, okay, maybe I could take advantage of AI and build out an application that reviews my tweets for me. And so I built out Creator Buddy and worst case scenario, even if no one bought it, I would have an application that saves me tons of time. And so that's what's so powerful about building applications that solve your own problems is worst case scenario, you're saving your own time. The other side of the coin is you build applications with other people's challenges in mind. I have an entire exercise around finding other people's challenges. I'll link to that video down below. You can spend hours trying to hunt other people's challenges. I have a whole system for that. So, we'll worry about that another time. Let's focus on solving our own challenges. So, you have a few options here when it comes to solving your own challenges. Think deeply about the challenges you have on a day-to-day basis. Think about the challenges you had today. Think about what went on in your life today and anything that was inconvenient. If nothing comes to your minds, you can think of an application you use today that maybe you just want to rebuild and improve. For instance, if you have a to-do list application, maybe we can go ahead and rebuild that and make it even better and improve your life that way. So, real quick, think about the challenges you had today. think if you can build any applications that solve them. If not, you can go with me here and what we'll do is let's build out a to-do list application that has a calendar built in. I use Google Calendar all the time. I have a manual little to-do list I do. Let's build an application that combines the two that will make Google Calendar way easier to use and combine it with to-do lists so we can keep all our tasks on our calendar as well. So feel free to take my idea or come up with your own idea, but you can stick with me and I'll show you how to build it out. So we have an
idea for an application. Now we need to come up with the plan for the app that we're going to vibe code. I love having a co-pilot AI that I work with as I'm vibe coding. Right? So I showed you cursor and claude code. That's where all the vibe coding will take place. But I also in another window have up chat GPT. I think chat GPT5 is the best free model out there. So you can open that up and we use this as our co-pilot. Whenever we get questions, whenever we get stuck, we use our AI co-pilot. And this is also a great place to start off and come up with the initial prompt that we're going to give to Claude code to start vibe coding our app. Another really important thing to think about when it comes to your AI co-pilot here is 99% of people give up on vibe coding because they get stuck because something happens, they don't know how to solve it and they kind of roll over and croak and don't know what to do. Right? This is where the AI co-pilot comes in where anytime you have a question, anytime you get stuck, anytime you feel like giving up, you come to your AI co-pilot and it will help you out and it'll bail you out of whatever trouble you're having. If you can build this mental reflex in that's like, oh, I'm having trouble. I'm having a challenge. I'm going to go to my AI co-pilot and solve it. You're going to have success with vibe coding 100%. But if you're like the 99% of people where, oh, I ran into a challenge, I don't know how to handle it. Uh, I'll just go play Xbox instead, then you're going to fail at vibe coding. So, make sure you're in the former camp, which is anytime you have a problem, anytime you get stuck, you come to your AI co-pilot. So, let's do this. Let's build a plan for building out our application and let's get an initial prompt that we're going to give to Claude Code so we can start building out the app. So, here's the prompt I'm going to use. I'll put this down below as well. I want to build out an application with AI. I will be using claude code to build out this app. I want to build out a to-do list app combined with a calendar. So when I create a new to-do list item, I can place them on a calendar. I want to use Nex. js for this application. What do you think about this idea and what features would you add? So few things to keep in mind here. Number one, I'm telling it what we're doing. We're building out an application with AI. So we're vibe coding. Two, I describe the application. So it's a to-do list app combined with a calendar. I talk about what features I came up with. I say I want to use Nex. js. So for those who don't know, for those who aren't as technical, Nex. js is a fantastic web application framework we'll be using, very popular. And I say, what do you think about this idea and what features would you add? I say that because AI is an incredible business partner to have while you're building out your application. I always validate my ideas through the AI before I build anything out. I always seem to find new angles or new things to do when I'm talking to the AI and I run ideas by it. I bet we'll come up with some cool ideas here. So, love it. A calendar for Studio app is a great lane. Most task managers stop at list while most calendars aren't graded task. Again, every like everything I do, I run through the AI co-pilot, which you see what we're doing here. So, it has the MVP for us, a unified board, a two-way link, some quick capture so you can quickly add new to-do items, keyboard first, UX, basic priorities and estimates. I like that. Uh, builds out an entire data model for us. Don't worry about that if you're not too technical. Smart features we can add later. So, auto slotting for things scheduling for us. Time budget day planner. Slip smart rescheduler. Focus modes. Oh, I like that. I'd love if we had a to-do list with like a focus mode in it. So, like I can do like a Pomodoro timer inside of or something so I don't see distractions. That's actually a really good idea. We should add a Pomodoro timer to this. Also, I'll show you how to customize this application with Vibe Coding as well. and a whole bunch of others. Task health and streaks. Okay. Uh, so here's how they'd use Claude Code. All right. So, here's the prompts I'm gonna do. I like the MVP. Can you give me a prompt I can give to Claude Code that builds out a bare bones? That's just the very first step. Make this really simple and small. Just describe the next. js app and the first step we want to build. That's it. I just want the first step. This is really key for when it comes to vibe coding is you want to do everything one small building block at a time. You don't need to oneshot everything. If you try to oneshot these massive huge chunks of code, the issue is you'll run into a lot of errors. I like to build things out one small building block at a time. So when I'm talking, hey, just build out this small thing. You do it one by one. It might feel slow, but slow is fast. And if you're avoiding errors, you'll go much faster than people trying to oneshot everything because they're going to run into a ton of errors. So let's do this. Let's take this initial prompt. Let's copy this. Let's go back into cursor. We are going to paste in this
initial prompt into claude code on the right hand side. This is when I hit enter going to send the prompt to claude code so the AI agent can start vibe coding for us. You ready to enter your vibe coding journey? Here we go. I'm hitting enter. The vibe coding has begun. It is now going to build out our first vibe coded application. Congratulations. You're now a vibe coder. So here we go. So what it's going to do is it is going to start building out the app. is going to create a to-do list of items for itself. So, it can set up the application. So, it's going to scaffold the project. It's going to start writing the initial code. You can just hit enter when it says, "Hey, should I change this? " Just hit enter. You can even go yes and don't ask again and it will uh allow it to just keep building for us instead of having us to hit yes every single time. We're going to keep hitting yes here. There have been a lot of AI vibe coding applications I haven't trusted and they've done a lot of really stupid things. Clawed code very rarely for me does anything stupid. So I am very keen to just hitting yes and allowing it to work and start building out for us. All right. So it's going through it's building out the project, setting up the backend, setting up the styling, creating API routes. Then it's going to build out the UI itself, which is awesome. So it's just going through and by itself, I'm not even touching. I'm just sipping water over here. It is building out an entire application. We're not doing anything. If you take a look over on the lefth hand side, this is going to be where all your code lives, all the different files, and you can click through here and see what they're doing. You can see inputs, checkboxes, and this is all the code the AI is generating. Typically, this would take hours to do yourself. AI makes it very simple to do. Okay, so looks like it is done here. Uh, for me, it automatically started running at localhost 3003. If it didn't run for you, feel free just to type to the AI, hey, can you run this application for me? so I can test it and then the AI agent will go, cloud code will go and run it for you. So, let's check this out. Let's see how V1 of our app looks.
All right, so I opened up localhost 3003. Here we go. Uh, let me make this a little bit bigger for you. There it is. There is our V1 to-do list. Uh, again, we're going to add a ton more to this. I'm going to show you how to do it in a second. prompt all that, but we got a to-do list. Let's do this. Let's go uh make this look beautiful. We're using a to-do list app to do our to-dos here. Okay, make this look beautiful. All right, there we go. So, the app works. It actually works. Now, what we can do is we can go back into Clawude Code and we can start adding functionality and features. And I'll show you how to interact with the AI agent. So, we can do that. So, here we go. This is the fun part. This is where we start having some fun. We start getting creative. This is my favorite part about vibe coding is coming up with new ideas, having the AI implement it, and seeing your ideas come to life. This is what makes vibe coding so much fun. So, let's do this. I like to say, "Okay, this looks great. " I like to let the AI know, "Hey, you did a good job. " Just so it remembers what it did. Now, let's add calendar functionality. Can you add a calendar under the to-do list that we can So, we have the prompt telling what it wants to do. Before we hit enter here, I'm going to show you plan mode. So this is plan mode inside of Claude Code. And plan mode is incredibly powerful. If you hit shift tab, you'll see it's a plan right there. Now we're in plan mode. And now instead of writing code, when we hit enter, it'll create a plan for us. Then we can approve the plan and then it'll write the code out. And what I find is when you use plan mode and you come up with a plan first, you actually get way better code. So we moved to plan mode. We told it what we want to build next. I hit enter and it is going to build out us a plan for that next step. So I'll plan out how to add calendar functionality to your to-do list app. And so now it's going to go it's going to read all our code. Again, we haven't touched any code so far, right? And it's going to build us the plan that we can then approve and then it'll build out that calendar for us. Okay, so it came up with the plan. Let's take a look here. Plan add calendar functionality. I'll add a simple calendar. So update the task model. So it's going to update the database for us. It's going to create the calendar component. It's going to update the task creation. It's going to make it so there's a date picker for the task creation. It's going to update the main page and update the API routes. I love it. Let's hit yes and auto accept. And it is going to start building out the app for us in that calendar application. Again, we're not coding. We're vibing here, right? We're vibing. Oh, I want to build a calendar. I want to make it look like this. I want to add this functionality. And the AI takes care of all the dirty work, hard parts for us, and does all the coding, which is the good part. And as it codes here, like this is what makes vibe coding such a powerful opportunity for everyone is, you know, we have an application built out here. Did we touch any line of code at all? Did we need to understand code? do anything technical at all? No. Right? The AI model handles all that for us. All the parts that needed like skills and college degrees and all that other stuff, that's gone. Now all you need to do is just be able to ask an AI what you want and the AI will do it. Right? And that's the difficult part is actually getting the motivation to get up and build what you want and ask the AI these things. Most people won't be motivated enough to figure this out. You're watching this video, so you're motivated enough to do it, which I love. All right, so it's updating the models. It's creating the components. It's going to update some other things. And after this, once it gets through this to-do list, we will have a calendar built out. Okay, looks like it finished working on the calendar. Calendar features has a calendar view, a date picker, visual indicators, date filtering, today highlight, month navigation. Okay, I like it. Let's see what this looks like, shall we? Take a little peek behind the hood here. Let's see what we
got. All right, take a look at this. Look what we got. So, they added a date picker. We can now attach dates to each task. And then we have our calendar. And if you click on Let's see what happens when we click Yep. And you click on a day, you can see your task on that day. So you can see what tasks by day you have going on. You can take a look at your entire calendar view. Let's clear the filter. Okay, so there are filters. You can filter by day. I like that. This is shaping up pretty nice. I like this so far. Okay, let's keep making edits. Let me show you how you can massage this and keep making edits. So let's be able I I'd like to be able to prioritize these tasks. So I want to be able to click on the task, edit it, and add a priority. Say high, medium, low. So let's go back to cursor and edit that. I'll show you how we can keep adding new features here. So we're back inside cursor with claw code and again just small building blocks asking small little things. Everyone's got a prompting technique. You go on Twitter, oh prompt this, you use HTML, you use JSON, all this complicated stuff. It doesn't need to be complicated. You just make small simple asks to the AI and it will give you good results. So let's go in here. Let's just say I want to be able to prioritize the tasks. When I click on a task, I should be able to choose high, medium, or low priorities. Again, super simple. Hit enter and it's going to build out. You don't need the advanced prompting techniques. You just keep it simple and you make the simple asks and Claude Code will be able to build it out for you. So now it's going to create the to-do list here. What it's going to do and it's going to be able to do that one by one and we can sit here and relax. So I'm going to give you a little cheat. hack here. when claude code is working right it is it the quickest in the world no sometimes you sit here for a few minutes most people when vibe coding and their AI is working and they're sitting there watching it what do they typically do they go they grab their phone they go they start surfing Twitter they start surfing YouTube they do this they do that they do anything but focus and what ends up happening is you actually end up losing a lot of time it'll take 5 minutes for the AI agent to work but then you end up spending half an now are doom scrolling while the AI agent is working. So, let me give you a little hack. I'll give you a little tip. This is going to make your life a lot better while you're vibe coding. So, watch this. So, what you do when your AI agent cla is deep, deep in work here, you go back into your AI co-pilot, which we have here. So, here's a prompt I'm going to give to let our AI co-pilot know how we're going to be using it. Okay, Claude Code is working right now. I want to make good use of the time while the AI agent works. I'm going to use this chat to tell you what it's working on while it works. So, you can give feedback or come up with other ideas or just ask me questions. So, I'm going to hit enter on that. What it's going to do is let our AI co-pilot know, hey, the agent's working. I'm going to use this just to chat with you so we make good use of time. And what this is doing is just making better use of your time. Instead of using your time and doom scrolling while the AI agent works like 95% of people do, you'll be using the time to brainstorm, to get feedback, to improve the app. So, let's do this. The AI agent is building out task prioritization right now inside the app. We're just going to hit enter. We're going to see what it has to say. Nice. It's actually a perfect next step. Prioritization gives you a backbone. Couple things while it works. Things to nudge Claude towards. So, keep it lightweight. Default sorting visual cue. So, just going to give us some tips, some give us some new ideas. Quick toggles, filter bar, auto looking forward. Once you have priorities in place, the calendar slotting feature can lean on them. Fill open time slots with higher priority first. Defer low priority tasks to days full. Question for you. Do you want prioritization the app to feel strict and structured or more loose and lightweight? I think more strict and structured right now. So the AI co-pilot is now just bouncing ideas, asking us questions. We're coming closer to a better application. And this is a lot better use of our time than just surfing Twitter or doing whatever while the AI agent works. So, it's going to give us an answer. What we're going to do is we're going to go back into cursor while it talks to us. We'll see where we're at. Okay. So, it's testing out the prioritization. I'm going to hit yes on this. And now, basically, the task is done and we can see what this looks like. And we didn't waste any time doom scrolling on the internet. All right. Looks like it is done working here. Perfect. Priority functionality is now working. Your to-do now app now has priority levels, visual indicators, easy selection, default priority, real time updates. Wow, I like that. Okay, so let's take a look. Let's see what this looks like. Boom. Look at that. Wow. Okay, so now you got these orange indicators on every task. Let's see what happens if I change this to high. What exact Okay, so it makes it red for high. What if I go low? Is it going to do a green? Uh, looks like a gray color. Okay, cool. Let's see. Is it going to change the color on the calendar? Nope, doesn't do that, but that's fine. And okay, so now we got priorities, we got the calendar. I kind of would like a weekly view on here. So like the calendar has like a weekly view kind of like you see in Google calendar. So I can click and move around tasks. So let's go back into Claude Code and let's make that feature. So I'm back in Claude Code. We're going to implement this feature and then I'm going to talk a little bit about the anatomy of an application. What you need to know about the database, the backend, how to host it, all of that. So let's build this last feature into here. We'll have a working app. Then we'll talk about how the app works. All right. So, I'm gonna say I want the calendar view to be a weekly view that shows all the tasks on it. Then I can click and drag and move the tasks around in the weekly view. Make it look beautiful. I like to do little things like that, like say, "Hey, make it look beautiful. " Cuz then it's going to actually make it look really nice. Claude Code has very nice taste when it comes to visual stuff. So, that's a very nice thing to do there. Always make sure to say, "Hey, make it look beautiful or describe the styling you want. " You can describe any sort of styling and Claude Code will implement it for you. Although I'm not that great of a stylist myself. So, I just say, "Hey, make it look good. " And I trust Claude Code to have good taste there. So, again, it's making the to-do list of what it's going to do here. It's going to add all the little technical stuff in there to make it work. And it's going to build out the code for us. And again, look where we're at. We have a calendar. We have a to-do list. We have almost everything built out. And we haven't even looked at a single line of code. That's the beauty of Vibe Coding. Now, anyone can build anything they can think of. That's what's amazing about this. All right, looks like it's all done here. Let's switch back and see what it has for us. So, I refresh the screen and look what we got. Wow. So, we got the weekly view. We have our unscheduled task. Let's drag it up here. See what happens. Boom. And it puts on the calendar. That's beautiful. That looks nice. I like this. Oh, they've got little hover effects as well when you hover over each task. That is cool. We got a pretty powerful app here. I do like this a lot. Let's just recap what we've done so far, right? Let me bring up cursor again. We installed all our vibe coding tools. We installed cursor. We installed claude code, right? We learned how to prompt claude code to get the code built. We saw how to run the app, what it looks like, all of that. So, let's next talk about the anatomy of an app and how the technology of the app works. So, this is the anatomy of an
app. This is how the techn the technical side of the app works. So you have our front end which is everything you see in the app, right? That's Nex. js. That's the web framework that powers the front end of our application. Everything you see. Then those tasks we're saving, those get saved to a database. So in our application so far, it's all being saved locally. So it's all local on our computer. If you were to put this app live, none of those tasks would save there. If you want multiple users of your app, you need a database to save all those tasks. My favorite database to use which has a very generous free version is Superbase. So if you search for Superbase, you will see what that is. You can sign up for it to implement Superbase. Very simple. Go into cloud code say hey for the database I want to use Superbase. Can you please implement it? It will then go and implement the database and store the data from your app into the database so that it can be persistent and all the data it's saved. You can open it up at any time when you save it locally. If you refresh the browser, restart your computer, all that disappears. So you need a database to store all of the data in your app. And so that's superbase free, really easy to use. I love it. Payments. So you want to accept payments on your application, right? You're trying to make money. Stripe is the best payment processor. I think they take like 1% of every transaction and it is unbelievably easy to use. AIS know how to use it. So if you want to accept payments, all you would need to do is go to your AI Claude code say, "Hey, can you implement Stripe so I can start accepting payments? " And it'll walk through. And as you're doing these, if you have any questions or things don't work, just ask the AI say, "Hey, how do I implement this? What's what does this work? I don't know what this is doing or can you explain this to me? " And Claude Code will explain it to you. It'll walk through step by step how to do each one of these things. O, so you want users to be able to log in, right? If you have an application, you're going to sell it to your customers. Each one needs to be able to log in, right? Clerk is my favorite O tool to use. Very easy to implement. You can go to claude code say, "Hey, implement clerk into this. " And it'll be able to do that for you. You can use like Google for logging in, Twitter, whatever you want. Clerk will be able to set that up for you. Very simple, easy to use. Just give that to your AI. And then there's hosting. So how do we get this app live? That is through Verscell. So let me show you how to do that. you
to do that. Let me show you how you would get this app live on Verscell. The first thing you would need to do is host your code on the internet. The best place to do that is through GitHub. GitHub is a code repo. This is where you would upload your code to, where you would save your progress, all of that. Go to github. com. Once you go in, sign up, then you'd click create a new repo. For this I will call it calendar task list. That'll create the repo for us. We'll make this private. We can create the repository. And what that's going to do is create us the repository where we can save our code. Then from here we can take the link to the repo, click copy. We go back into cursor and then what we can say is hey can you push our code to this repo and hit enter. And now what Claude Code's going to do is take all our code that we have so far and push it to our repository on GitHub. And so you can say yes to all this and it's going to take our code and put it into that newly built repository. And GitHub's great. It's going to unlock so many things for you. It's going to allow you to host your app on the internet. It's going to allow you to back up your code. So if you ever lose the code locally on your computer, you can just pull it down from GitHub again. It's going to allow you to share your code with other people. So if you want other people to work on your app, you can share the repo link and they'll be able to work on it there. It you need to be using GitHub if you're vibe coding. It is absolutely critical. So that's going through that's committing all our code that will be on GitHub in a second. And the best part is all of this again if you get confused by any of this, if you get if you don't know what you're doing, what's going on, all you need to do is go to Claude Code the AI agent and just say, "Hey, what the heck is going on here? How do I do this? How does this work? What does this mean? Don't be afraid to be an idiot to your AI agent. It can explain anything to you. Boom. It's all committed. Look at that. There we go. So, now let's go back to GitHub and make sure the code is there. So, I'm going to refresh. And boom. There's the code. There's the code for our app. It is now live on GitHub. So, the question becomes, how do we put this app live? it on the internet so anyone can use it? I like to use Verscell for this. So if you go to verscell. com, you sign up, create a new account, you can go in, you can say create a new site. The first thing you'll do when you click create a new site is choose a git repository. You just choose that git repository calendar task list that we created. You click import and that is going to walk you through importing that git to Verscell. And what Verscell is the one of the easiest sites to use when it comes to hosting. So it's going to take your code from git. It is going to put it on a URL and it's the internet. So you have a link that you can use and your app will be live on the internet and as long as you went through and you did everything I walked through when it comes to off and database and all that and you went into cloud code and got that all implemented, you will have a fully working application that anyone could use, anyone could buy and you can start making money. So let's
talk about that making money side. How do you get your first customer? people onto your application? Well, it is really, really simple. I like to use what I call the share your journey framework. You don't have to pay for ads. anything. Go on social media. I like X. X is a great way to get customers for your app because there are a ton of other indie hackers out there, vibe coders, people that use internet, people that are on the internet all day. Go on Twitter, create a Twitter account if you haven't yet, and just share your journey. Talk about the app you're building. Right? So, this is what I did with Creator Buddy. I'd like to introduce you to Creator Buddy and I just talk about the features, what I'm building. I put a demo video and people fall in love with your journey. They building. They get hooked on your story. app. And look, look at this. This has over 700,000 views, 2 and a half thousand likes. And I just did this for months. Every day I built something new in Creator Buddy. And then I'd go and I'd tweet about that new feature I built and I'd put it live. Over time, people got hooked on that journey, right? story. And anyone who my app solved their problem, they were like, "Oh, this is interesting. I'll go check it out. " And I haven't paid for a dollar of advertising. People just came, discovered me on Twitter, and were like, "Wow, that's incredible. " And they signed up and purchased. So, when it comes to marketing, and I have other videos on this that super deep dive on this entire framework, what it basically comes down to is you want to share your journey. the share your journey framework. Go on Twitter, go on YouTube, whatever you want. Create content, talk about your app, share it with others and people will fall in love with your journey. So that is vibe coding 101. That's everything you need to know about vibe coding. We went over what vibe coding is, why the opportunity is so incredible, how to build your app, putting it live, all of that. This is the most important opportunity of our lifetimes. I truly believe it. Anyone can go from idea to product in minutes. It really is incredible. I'm going to tell you this. 99% of people are not going to take action based on this video. They're not. They're going to see this, go, "Oh, that's nice. That's cool. " And then never do anything. Be the 1% that watches this video and then goes and takes action and starts building and starts doing cool stuff. It really is a gold rush. When people discover how powerful vibe coding is, everyone is going to be doing it. Even if you don't go and build an app that you sell on the internet, make millions of dollars off of, this is just a critical skill to have in your job, in your career, right? It's just going to bring more value to the table and get you raises and promotions. If you learned anything, leave a like, subscribe. I have an AI newsletter link down below, alexfin. ai. 40,000 people subscribe to that. Make sure to check it out. Also, make sure to turn on notifications. All I do is make amazing videos about vibe coding and building cool apps of AI.