Vibe Coding Masterclass: Build your first app with AI in 37 minutes (Claude Code)

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 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 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 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 you're going to want to

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, paste in that command

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. This is where

we're going to be 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 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 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,

let's do this. 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 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. 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. I'm going to show you how to

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 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, takes

care of all the 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? Did we

need to 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. 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. I'm going to give you a

little 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, 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 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 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. AIS

know how to use it. 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. 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, if you don't

know 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? How do we put 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 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 going to put it on 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? How do

you get 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. You don't have to pay for

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

fall in love with your building. They

get hooked on your story. They get

hooked on your 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? People got hooked on

that 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.