How to Vibe Code an App From Start to Finish (Full Course)

Let's learn how to vibe code an app from

start to finish. We'll get an idea and

take that all the way to production. All

without writing any code and all within

this one video. I'm going to show you in

detail how I go about vibe coding and

creating web apps. And don't worry, even

if you're a complete beginner, you'll be

able to follow the entire video because

I'll be explaining in detail everything

that I do. I'll be explaining key

concepts along the way. And like

anything, vibe coding is also a skill.

So, you have to learn and practice in

order to get better at it. Also, if you

ever get lost, there is a detailed guide

in the description on my process on how

I go about vibe coding. Also, all of the

links, commands, code, the prompts that

I use, they're all in the description.

So, if you ever get lost, you can always

check that out. All right, so let's get

started. Now, there are a few tools that

we need to download because these are

going to be the tools that we use to

vibe code. The first one here is the

cursor IDE. It's an editor that we use

to write any code that we want to do,

but it also has a chat agent that allows

us to communicate with it and it writes

the code for us. All you need to do is

go to the Cursor website at cursor.com

and download its executable. You can

click on the download button in the

upper right and install Cursor. The next

thing is something that I use in my

process and that's Claude Desktop. I

primarily use this for the initial

creation of the project, but there are

some other tools out there that do this

just as well. This is just my current

preference on how to start the web app.

So, you can go to claude.ai/d

download and then download the Windows

installer or the Mac OS installer and

install this to your computer. As an

alternative to the desktop app, maybe

you're running on Linux, there is a

command line tool called Cloud Code. And

while I haven't really tested this out,

they did recently put this in the pro

subscription for Cloud Pro, but I won't

be showing the whole process of using

Claude Code in this video. Another thing

that we need to download is Git. And

this is a version control system.

Essentially, imagine that this is like

putting checkpoints in our code so that

we can revert back to them if we ever

need to. Sometimes when you're working

with AI models, it can massively change

your entire code base. Also, it doesn't

always go the way that you want. So,

what we're going to do is we're going to

put different checkpoints at different

stages of our application. So, when we

develop a feature, we might checkpoint

there. And then when we develop another

feature or we get something worth being

put into production, we might checkpoint

at that point too. And if at any point

the AI completely messes up our

codebase, we don't have to worry about

it cuz we can always revert back to a

previous checkpoint. So to download Git,

we go to git-cm.com

and then we scroll down a little bit and

you can download for the particular

operating system that you're on. I'm on

Windows again, so I would download the

Windows installer and install Git. The

last thing that we need to download is

Node.js because this will be our runtime

environment for when we're actually

running our code. We need this platform

in order to run our code on top of it.

You can download the executable for

Linux at nodejs.org/en/d

download and you can download for your

particular operating system. I am

currently using Windows. So I would

download the Windows installer. And if

you're following along, that's all you

will actually need to do. But I also do

all of my development inside of WSL,

which is Windows Subsystem for Linux.

It's essentially running Linux on your

Windows computer. However, it's

completely unnecessary. You will be fine

just using Windows to do all of your

development. Now once you download and

install those three applications, we can

actually get started on our idea. So the

idea for a web app that I have is

creating a dream journal so that users

can write down their dreams and

potentially remember them so that they

could then, you know, lucid dream. There

are a lot of studies that show that

writing down your dreams right after you

wake up will actually improve your

concept of knowing that you're in a

dream and then you'll start lucid

dreaming. So what I want is for users to

be able to write down their dreams and

then submit them and then what will

happen is we'll use AI to give them

insights on their particular dream. So

in order to get started on that I need

to come up with a name. Now whenever

you're coming up with a name you need to

keep in mind that you want to be able to

get a domain for that name. Domains are

just a URL that you type in to navigate

to that website. What's nice is there

are a ton of different websites that

sell domain names to you. The one that

I'm going to use because it'll help us

get some ideas is called Hostinger. On

this platform, we can select get a new

domain and then type in whatever we're

trying to think of as a name for what we

want or we can use this generate domain

using AI. All we have to do is write a

short description about our project and

we'll get some recommendations of

domains that are available that we can

buy. So, I'm just giving a brief

description by saying a dream journal

app that uses AI to give insights about

your dreams. And then we can just hit

generate. Now, we have a list of

different domains that we can choose

from. We can also see more options, more

domains. And if you don't like any of

these, you can go back and hit generate

again. Now, from here, you can purchase

a domain if you see one that you like.

And once you purchase one, like I did

here, I purchased dreamsaver.com.

We now have a URL available to us that

we can give to our product. Next, the

thing that can make or break your

application is how you initially

generate the code. It's really important

to plan out and write down everything

that you want to have happen inside of

the web app. If you don't plan this out,

the structure of your code and and how

the AI actually generates code will kind

of be a mess and you'll end up with a

lot of bugs, some hallucinations by the

AI, or even if it just can get off track

or too eager and start creating features

that you never asked for. So, this is

where something like vibe docs.dev comes

in. This web app allows us to create

documentation for us tailored directly

for the application that we're trying to

write. It makes the whole vibe coding

process so much easier and keeps it on

track. Now, you could easily just write

this documentation yourself, but this is

a nice to have because it speeds up the

process. Also, the first project that

you create once you sign up is

completely free. So, it doesn't hurt

just to try it out. Once you sign in,

you can just create your first project

by either clicking on this create your

first project button or going up here in

the upper right and clicking on new

project. Now, we just describe our

project in as little detail or as much

detail as we want inside of this

description box. Okay, so I've written

out my vision or description of this

project and I'll just read it out to

you, but I remember we also have this

prompt inside of the description, so you

can go check it out there. So I said, "A

web app that tracks your dreams and

gives insights of using AI. We'll use

Gemini AI to give insights. The app

should be stylized and somewhat dreamy.

There should be a landing page

describing the product along with a text

box for users to submit their first

dream. This will sign the user up and

submit their dream. The user will have a

dashboard page that displays all of

their recordings. If they click on a

recording, they should be taken to

another page that contains their

recording and meta information as well

as the AI insight/significance.

For the free tier, they'll be able to

record as many dreams as they wish, but

they'll only get five free AI insights.

There will just be one subscription that

allows them unlimited AI insights for $8

per month. So, this seems like a decent

description for the entirety of the

minimal viable product. Of course, we

could add more features here, but I want

to keep it simple so that we can get a

product created after which we can make

some more features. So, I'll hit the

next button to generate the questions.

So, now on this app, it gives me a

questionnaire, and I need to answer each

one of these questions in order for it

to generate the best documentation that

it can. Now, these questions are

tailored specifically for my app that I

just described. So, they should be

pretty on point. This first one says,

"By simply tracking dreams, what

specific needs or pain points do you

foresee the primary target audience

having that this application,

particularly the AI insights, will

address? Describe your ideal user, their

typical habits, and why they would

choose this app over alternatives." So,

I answered this question with, "This app

allows the user to fulfill their desire

to lucid dream. It also gives the user a

place to see all of their recorded

dreams that they may have forgotten.

Ideally, my user would open this app

first thing in the morning and write

down their dream. Now, I won't bore you

by going through every single question

and talking about it. We also have a

button here that says, "Get AI

suggestions." So, we can actually use AI

here to answer all of these questions.

So, when I get a response back for this

question, which was, "What precise meta

information am I talking about?" It

actually gives me different options here

that I can choose from or just get ideas

about what meta information I was

talking about in the description. So,

that's neat. I click on one of these

options and it fills in the answer for

me. I'm going to fast forward through

answering all of these questions so that

we can get to the actual generation of

documents. There is something very

important that I wanted to explain

because it comes up in the questionnaire

that we have on Vibe Code Docs. We need

to understand how web apps actually work

from an architecture perspective. There

are three important pieces to almost

every web app that you see online. Those

three pieces are the front end, the

backend, and the database. So, what do

we mean by those buzzwords? Well, the

front end is basically everything that

you see on your browser. Let's take

x.com for example. You can see how we

have this big X. It's some logo here on

the left and then on the right here we

have some text saying happening now. And

then we have a few buttons here. Well,

all of this is laid out as a front-end

code. Basically, our browser is taking

code that we've written for the front

end and then rendering it out so that we

can view it with all of its different

stylings. The back end is how we control

the logic of things that you action on

on the front end. So, say we wanted to

create an account on x.com. We would

click on create account and then we

would fill out all of this information

and we'd send it off to the backend so

that the backend can do some controller

logic and then respond back with a

successful creation of your account. The

backend could be doing things like

saving data or with our case we could be

getting the Gemini AI responses back

from Gemini and then once all of the

actions are done on the back end it then

responds back to the front end saying

whether there was a success or a

failure. Now you'll notice a key point

in that I said it could potentially be

saving data which a lot of the times

it's either saving or updating some

data. Like if we were to create our

account we'd put a name in. So, I'd put

my name, Hunter, and then I put some

phone number in, and we'd send that back

to the back end. Well, now that's some

data that we want to preserve. To do

that, we store it in what's called a

database. It's where we store data. Then

later on, our front end might request

that data. So, it's going to send a

request to the backend. The backend is

then going to fetch the data that it

needs for that particular request. Say

it wants to grab my name and then it

responds back with my name. Now, with

those three key components of our

architecture, we can now visualize what

technologies we want to use for each one

of those. Now, for these technologies,

what we want to do is we want to pick

what's the most popular because that's

going to be what the AI is trained on.

And for obvious reasons, we want to use

what the AI is trained on because we're

going to get the best results, at least

from a coding perspective, by choosing

those particular technologies. So, for

the front end, we're going to use a few

different technologies and we want to

make the AI aware of them. The first one

is React and that's going to be how your

front end functions. You can think of it

like how it maintains the data or how it

navigates from page to page, how things

kind of function within the app. The

other two pieces of our front end is

going to be Shad CNN and Tailwind. And

these are going to be how it looks, how

it's styled. So, back to our X.com

example, you can see we have what's

called a modal here. And it displays on

top of the rest of this landing page.

You can see we also have some stylings

for these different buttons, different

layouts, different colors and fonts. And

all of this for us is going to be

managed through Shad CN as well as

Tailwind. Again, we're choosing what we

think is going to be the most popular

and going to give us the best results

for our backend. We're choosing Nex.js.

And along with it being very popular,

what we're going to also use is a web

app called Versel. And that's going to

be our deployment layer. When we are

ready to deploy to production so that we

can run the code indefinitely and

securely and easily, we're going to use

Verscell to do that. Funnily enough,

Verscell created Nex.js, so they work

very well together. For our database,

we're going to be using what's called

Supabase. And the reason for this is it

actually doubles as an authentication

layer. So when users want to sign in or

create accounts, we can use Superbase to

do all of that. Now the underlying

database is PostgreSQL inside of

Superbase. But we don't really need to

worry about that. We do need to know

that it is using the structured query

language which is SQL. But just so you

know, we're using Superbase as our

database layer. Okay. Now I've answered

all the questions. I'm going to hit next

and go to the name of the project. Now

of course we already have our domain. We

already have our name. So we can just

write our name here. I named my app

Dreamsaver. And now I'll click generate

documents. Now that we're on our

dashboard, we just wait for all the

documents to get generated and then we

can download them. Once it finishes

generating, we can click on it and check

out the documents. So on this page, we

get a quick look at the documents on the

left and we can also download them over

here on the right. Now we can either

download them individually here or we

can click download all documents which

will just merge all of the markdown

files into one markdown file. I'm going

to click on download all documents so

that I have just a single file. Now,

once you save that file, we need to open

up Cloud Desktop to initialize our code

generation. So, now that we're in Claw

Desktop, we kind of want to change it

into something that can actually output

code to a file or to folders. To do

that, we need to install some MCP tools.

Don't worry too much about how it

operates, just imagine that these tools

can be called by the AI and do certain

things. In particular, for our use case,

we want it to be able to write out to

files so that it can just generate all

of the code and write it directly to our

folder. So, the first thing that we need

to do is edit a single file. To do that,

up here in the upper left where this

hamburger symbol is, we click on it and

then go to file and then go to settings.

Inside of settings, we can click on

developer. And now we'll have this

little window where we can get started

with configuring our first MCP tools. To

do that, click on the edit config button

and it will open up your file explorer

and it will have the configuration file

highlighted for you that you can double

click on or rightclick and then go to

open with and you can open with either

your notepad or if you have any other

editor on your system, you can use that

as well. So, I'll click on Sublime Text

because I have that installed, but you

can also just use Notepad. When you open

up the file, it should look something

like this, which it has the MCP servers

object here. And inside of it, it will

have these two curly braces. This is

where we want to add our code. Here I'm

adding this MCP tool called

desktop-comander.

And I'm using the command npx to run it

and the arguments so that it

automatically says yes to any prompts.

And the actual package is at

wondery-er/estop-commander.

This is the one that's going to allow us

to basically write to files or do

anything on our computer. Now, again,

all of this code is in the description,

so don't worry if you don't catch it

here. You can just copy and paste it

from the description and you should be

good to go. But it is using the command

MPX. So, make sure that you have that

NodeJS installed. And then we can save

this file and restart Claude. Once you

save the file, the actual settings won't

show up here. So, we have to restart

Claude in order for them to show up.

Now, Claude does run in your cy tray. So

to restart it, open up your CIS tray by

clicking on this carrot symbol in the

bottom right if you're on a Windows

machine. And then you have the clawed

icon up here. You can rightclick it and

hit quit. You can also quit out of it by

going to this hamburger symbol and then

clicking on file and then selecting

exit. Now we can open it back up. And if

we click on this little settings for

search and tools, we'll be able to see

that we have the desktop commander tool

right here. If we click on that, we can

see all the different functions that it

has available to it. And now we can

start generating our code. To do that,

I'm using the Claude Sonnet 4 model. You

could use Opus as well. It's saying that

it's a powerful large model for complex

challenges. It might be useful for this

case, but it also might be slower and

you may not have as many attempts at it

as you do with the Claude Sonnet 4. So,

we first need to bring in that markdown

file. Now, there's a bunch of different

ways to do this. You can hit the plus

sign here and then upload a file and

then find it on your desktop. Mine is in

my downloads folder. So I'll click on

Dreams Saver all documentation. And now

I have that uploaded. Now I do want to

prompt this with some specific verbiage

so that it keeps on track and continues

on until it finishes. So I'm adding this

in here that says create this web app in

the projects folder under dreamsaver.

For any API keys or secrets, put them in

aim.local file so that they can be set

later. Use the most recent versions for

packages and thirdparty dependencies.

And you can see down here written in

tiny print it says 1,086 lines. So this

is a pretty beefy document and it's

going to be able to go through this and

just start cranking out all the code

that we need. So let's hit enter and

start it running. Now if it's your first

time using this, it's going to ask you,

are you sure you want to use this

external integration with Desktop

Commander? I'm going to say always allow

because I don't want this to keep

popping up and I have to keep clicking

it. But just be aware on other MCP tools

that you're using that they could be

malicious. they could be nefarious. So,

just be hesitant on what you allow to

run on your computer. Now, I'll just let

this run through. Sometimes it runs out

of its message context and you just have

to reply to Claude with continue in

order for it to continue generating all

the code that you need. All right, now

we finished the initial app creation.

And you'll know because it'll write out

a bunch of things. It won't be with all

these different commands like it does up

here. You can see that it's still

generating stuff. And then finally, it's

like, hey, we've completed it. We've

tested it. Things work and you can

scroll down and see all this and read it

all. So now we can start working on this

in cursor. So now that we're in cursor,

we need to open up our folder. And to do

that, we can go to file and then click

on open folder. Now just navigate to

where Claude put your project and you

can click on it and then click select

folder. Now that we have it open, you

can see on this lefth hand sidebar, we

have a bunch of files and folders and

such. If you don't have this lefthand

sidebar or the righth hand sidebar up

here in the upper right, we can toggle

whether we have the primary sidebar

which is the left one, the AI pane which

is the right one, or the panel at the

bottom which will have our command line.

So I'll click on the bottom one to bring

up the terminal. And from here, this is

where we actually can run our

application. But first, we have a few

setup things that we want to do. First,

we want to give our agent a few rules so

that it follows them precisely so that

we don't have more hallucinations or

that it just goes off, becomes eager and

creates some features that we never

asked for. So, to create these rules, we

go in the upper right and we click on

this cog to open the cursor settings.

From here, we can navigate to rules and

under rules, we scroll down to project

rules. Now, I realize that we didn't

bring in that documentation that we got

from vibecoded docs.dev. Over here on

the lefth hand side, you can see that

documentation doesn't exist. So, we need

to add that to our project. I just open

up my file explorer, find where the

documentation file is, and then just

drag and drop into the panel over here,

and it should copy it. Now, under cursor

settings and project rules, we want to

add a rule. And here we'll name the

rule. And I'll name it docs. And now we

need to set the rule type. And we have

it as manual, but we want to have it set

as always because we want the agent to

always be aware of this documentation so

that it never gets out of line. So for

this rule, I put the following

documentation has all of our features

and requirements for this project. Keep

this doc in your memory so that you can

stay aligned. And then to reference the

doc, you put an at symbol and then start

typing. So I put type dreams and I have

dreamsaver all documentation. And now it

will reference that documentation

anytime we start a chat with the AI or

anytime that we're even conversing with

the AI. So once we control S to save it,

we can then close out of it. And now

that's done with all of our project

rules. Now let's try to run the app and

see what the AI gave us. In order to run

this particular application with Nex.js

and everything, we first need to install

all the dependencies. Now Claude already

did this, but I want to just make sure

that I installed all of them. So to

install all of them, you can put npm

install and it should install every

single dependency for this application.

Now once it's installed everything, you

might have something here where it says

to address all issues, including

breaking changes, run npm audit

fix-force. And this is because we have

three vulnerabilities. Two of them are

low and one is critical. So I'm going to

run this command just to be safe so that

our application doesn't have any

vulnerabilities. Now once that's cleaned

up, we can run npm rundev to run our

application. So we'll type out mpm

rundev and then hit enter. Now it takes

a little bit to build and start up, but

once it does, we can check it out in the

browser. So now that it the application

is ready, we can control and click to

follow the link of localhost col 3000.

and it takes us to our browser. Now it's

loading and it takes a little bit for it

to compile and load. But if there's any

problems or anything, it does show a

error panel that you can see any issues

that you might be facing. So now that

we've encountered our first bug, we can

start to use the cursor AI to resolve

this. So the error also shows up in

here. We can see that we have the full

error output here. Now, if we highlight

the whole thing, the whole error

message, and then copy it, we can then

go to our agent client window over here

and chat with the agent, all we have to

really do is just paste in this error

and then hit enter and just let the

clawed model do all of the work for us.

It looks like it found the issue. Some

file requires this auto prefixer

package, but the package doesn't exist

in our dependencies. So, let's go ahead

and let the AI run this command and

hopefully it fixes our issue. Once it's

installed, you can go ahead and run the

app again by doing that npm rundev and

it should be ready and now we can test

it again. So, now that it's running, it

tells me we have another error and it's

the Superbase URL is required. Well, we

actually haven't set up Superbase yet.

So, that makes sense why we have this

error. So, let's set up Superbase. You

can do that by going to superbase.com,

creating an account. Once you create

your account, you need to create an

organization. And this will just be

where your projects exist. So, I'm going

to leave the all the defaults here with

the personal type and the free plan,

which gets you two projects. And then

I'll click create organization. Then,

we'll be set to create a new project.

For the project name, I'm going to name

it the name of my project, which is

Dreams Saver. And then the database

password, you need to have a strong

password here. And you can just click

the generate password button and just

let it generate. Uh you don't

necessarily need to keep this but you

could copy this and paste it somewhere

where you think is secure. And then for

the region I'm selecting east US which

is where a lot of people reside. You

could also select any of the other

regions here. I will skip the security

options and then the advanced

configuration. You can always change

these later. And then we'll hit create

new project. Now once our superbase

database is up and running, there are a

few keys that we need to grab and put

into our application. inside of the

project overview. If we scroll down, we

have a few project API that we need to

copy over into our M.local file. The

first one is the project URL. Just go

ahead and hit the copy button over here.

Then go back to our cursor. And we want

to open up the.local file. And from

here, just go to the next_upase

URL and paste in what we copied. And

then go back to superbase. And

underneath the project URL, we have the

API key. And we need to copy this one as

well. Now again back in our environment

file, we need to paste it where this

anon key is. The next thing that the

application wants is this superbase

service ro key. And so we can find that

back over in superbase over on this

lefth hand side. If we scroll down to

project settings and then inside of

project settings, we have API keys over

here on the left. And then we have this

service role which is a secret. So you

want to keep this from anybody else. You

don't want anybody else to be able to

see it. but we will need to copy it to

our application. So we need to click

this reveal button and then we can click

on the copy button. Now again back in

our application we just hit controlV to

paste it back in. Once we're done with

those three keys we can hit Ctrl S to

save. Now there is something special

that we need to do because we have to

fill our database with tables. Tables

are essentially like if you've ever used

Excel um the spreadsheets that are on

there when you put in data you put them

in different columns right? So your

table is comprised of a bunch of columns

and inside of the table is all of our

data. We have information for each user

or for each record that we're going to

put in for the dreams. So we do need to

set up our database correctly. Now what

I like to do is I like to just ask AI to

give me all of the SQL, basically all of

the code that I need to put onto the

database so that it creates all the

tables and everything else for me. So

here I'm going to ask the agent, can you

print out all of the SQL that I need for

my database? Now once it prints

everything out we can scroll up and find

it all and then we can copy the whole

thing. So I'll click on this copy button

to copy the entire thing. And now we'll

go back to Superbase. So back here

inside of Superbase if we go in the

lefth hand side we can click on this SQL

editor. From here we get this neat

little editor thing and all we have to

do is controlV in this area here and it

should paste all of our syntax all of

our code here. And then we can hit run

and see what happens. Great. For me it

looks like it was successful. No rows

returned, which means it worked

properly. It created all the tables that

we need. And now we can actually run our

application and see what we get. So

again, back here in the terminal, we run

npm rundev. And you can also hit the up

arrow on your keyboard to go to your

previously ran command. And then we'll

hit enter. Now that it's ready, let's

again go back to our browser and check

out the application. Awesome. Look at

this. It seems to have created a landing

page. We can see dreams saver here and

then it says unlock the secrets of your

dreams with AI insights. That's pretty

cool. We scroll down. We can share our

first dream. Describe a recent dream to

get started with your journey. Now,

clearly there are some things that we

need to get right here. It looks like it

looks like this button is just disabled

until I start typing. But then the look

of this button is kind of bad, at least

for this light version. But if we scroll

down, we can check out the rest of the

site. AI insights, track patterns,

private and secure, simple pricing, $0

for free, five free AI insights, and for

the premium, everything in free

unlimited AI insights, advanced pattern

analysis. I I don't really even know

what that might be. I guess it might be

the labeling stuff that we could have

happen, but this is cool. This is the

start of what we want. So, now that we

have things running, this is a good

place to set a checkpoint. To get

started using Git, we can click on this

button over here, this third one from

the left. We have the search and then we

have our version control button. And

then inside of here, we'll click on

initialize repository. Now, this will

create a repository inside of the

project folder that we are working in.

Once we click that button, a bunch of

files show up on the lefth hand side and

we can scroll through them. And these

are all the files that we've added to

this project. So, since we want to treat

this like a checkpoint, we don't really

need to go into the specifics on how to

use git. We just need to know how to use

it in this scenario. To create our

checkpoint, we need to first stage all

of these files. To do that in cursor, if

you hover over this bar that says

changes, you'll have some icons here.

And one of the icons is to stage all

changes. You can also hover over each

individual file and click the plus

button to stage just that file. But

generally, we just want to stage all of

the changes that cursor has made to our

project. So, we can click on this stage

all changes button. Once we've staged

all of our changes, we can then write a

message kind of detailing about what

occurred in this change. We can either

write it out manually or we can click on

this button to generate a commit message

using AI. Since this is our first

checkpoint, I'm going to manually write

initial commit as a message. And then we

can hit the commit button to finalize

all of these changes. And the word

commit is just git's way of saying

checkpoint. So once we hit the commit

button, now all of those changes are

saved. And down here we'll actually be

able to see the whole tree of all of our

changes and all of our checkpoints that

we've made. So if we wanted to, we could

click on it and we get a detailed list

of all of the changes all in one file.

Now we have this other button called

publish branch. And what this is doing

is it's taking our local changes,

everything that we've made inside of our

local repository, and pushing it to a

remote repository, basically a

repository that exists somewhere else

off of our computer. Most people will

use a website called github.com to store

all of their remote repositories. So

this is what we're going to use. You can

go to github.com and then create a free

account. Once you create an account on

GitHub, you can go back to cursor and

now we can click on the publish branch

button. It should create this popup

where we want to sign in using GitHub.

You want to click allow and then you'll

want to copy and continue to GitHub.

Once you go through that authentication

in the browser, you should be able to

publish your repository. Now, you can

either create a private or a public

repository depending on what your needs

are. I'm going to create a public one so

that you can view this code later, but

you may want to create a private one so

that other people can't see your code.

So once you click on create your

repository, it'll start publishing up to

that repository on GitHub. Then when

it's finished, you'll have this popup

down here and you can click on open on

GitHub to see it on the website. So now

that we have it on the website, this is

good because this is going to be the

basis for when we want to push this to

production. Now we can get back to the

project and fix some of the problems

with it. So I noticed in our command

line that we have a bunch of these

unsupported metadata theme colors

configured in metadata export errors.

And what I'm going to do is I'm just

going to highlight these, rightclick to

copy, and then come over here to our AI

agent, and then paste this in, and I

want it to fix these issues. So, I'm

going to say fix this issue, and then

I'll hit enter and just let it run. At

this point, pretty much all we're doing

is basically solving our own problem.

So, we find some issue, and then we

paste it into the AI, and then we get a

response back. It it changes some code

or it configures something in a

different way. At the same time, once it

fixes something, we then commit the

changes and set our checkpoint. And then

we just repeat this process. Whether

we're creating a new feature or we're

just changing the looks of things or how

things function inside of the web app,

we're just going to continue to go

through this loop until we get to a

finalized version. So here it's saying

it fixed the issue. Now we have our

panel here that's still running the

application to cancel the application to

get out of it. We hold control and we

hit C on the keyboard and it will kill

that process. Then we can just hit our

up arrow to run the mpm rundev command

again and hit enter. Now once it's up

and running, we need to see if we get

that issue again. So we need to load and

compile that website. So back over on

the website, we have to make sure that

we refresh it so that we can compile the

application. And then we just check our

console to see how it looks. And it

looks like we don't have any errors. You

can see that it compiled the application

and it gave us the website. So again,

this is another checkpoint. So what do

we do? We go up here and we type a

message about what we just did. So I'm

saying for this issue that I fixed the

theme issue and now we can click on the

commit button. But if we hit this down

arrow, we can do two things at once. We

can both commit and push the changes up

to our GitHub repository. So we don't

have to manually do that. So once we

click on this, the changes will

automatically take effect on the GitHub

website. Of course, we still have this

problem with our button here where it's

like really white and then over the top

of a poorly contrasted button. So, what

we want to do is we just want to tell

the AI that this is the case and it

should be able to fix it. So, back in

cursor, we're going to do this a lot.

We're going to explain the problem. Now,

I'm just stating what it is. There are

buttons on the page in this light theme

that have text in white and it makes

them barely visible. Now, let's see if

it fixes it. Of course, once it makes

some changes, we then go to our console.

We hit Ctrl + C to kill the process. Hit

the up arrow and then start it again.

So, after refreshing the page, it seems

that it didn't fix the issue. So this is

where we could use a screenshot to show

the actual problem and then it will use

its image analysis to understand what

we're talking about. So using print

screen or whatever tool that you have to

grab a screenshot you want to highlight

what is the issue. So I'm going to hit

print screen and then I'm going to copy

this area that is the submit dream and

sign up button. And now back in cursor

all we need to do is Ctrl +V to paste

that image in. So now it has a reference

to what our issue is. Also, I'm going to

give it a little explanation saying it

doesn't seem to be fixed. Check the

image and see what the text is difficult

to see. Now, we'll see if it can

actually fix the issue. So, after

refreshing the page, it looks like it

fixed the contrast issue. We now have

like a darker background for this white

text. But now, let's move on to the next

issue and that is authentication and

signup. So, I just typed in something

random here. I just said I slept. And

then I'll click on this submit dream and

sign up button. And there should

probably be an error. Yeah. So you can

see we get this 400 error and it says

validation failed. Unsupported provider

provider is not enabled. Now you could

copy and paste this into the AI and it

will instruct you on how to set up the

authentication. But since I already knew

that this was going to be an issue and I

know the fix for this. We're just going

to go through the process of fixing it.

So one of the things that I wanted to

have working for this app is the ability

to log in with your Google Gmail

account. To do that, like I said earlier

in the video, we're using Superbase for

all of the authentication. Once you're

on your project, if you go to the lefth

hand sidebar, you'll have this

authentication tab. And so we click on

that and it takes us to this users

table. Now, this is managed by

Superbase. So it's not in with all the

other tables that we have that we

created earlier. If you can see on this

left-h hand side, we have this

signin/providers.

So Google is actually a provider of our

authentication. What we're doing is

we're using Superbase as a middleman to

contact Google and then Google signs you

in. And Superbase understands that,

knows it, and holds the information

about your account. And then we use that

account inside of our application. So if

we click on this button, we'll have this

Superbase O. And if we scroll down, we

have all of the different providers that

we can use. Now, we could add other

signins like Discord or Facebook, Figma.

Look at all these different ones. But

the one that we're going to focus on is

Google. And the reason I'm choosing this

is because it's pretty popular and a lot

of the other authentication methods are

similar to how they get set up as they

are in Google. However, Google is a

little bit more complicated. So, I

wanted to go through that whole thing

inside of this video. So, let's click on

this Google signin. Now, you'll get this

tab over here on the right where we can

enable the signin with Google. So, we'll

click that to enable this. And now, we

have a few different things down here

that we need to fill out. First is the

client ID. And this is what we're going

to get from the Google Cloud interface.

And then we'll paste it in here along

with the client secret. These are

important pieces that allow Superbase to

contact Google on your application's

behalf. The last thing down here is the

callback URL. And this is something that

we're going to paste into the Google

Cloud interface so that it registers a

call back when using the signin with

Google method. Basically, it just knows

what to redirect back to once you click

on which account you want to sign in

with Google. So, now we need to create

an application with Google. And I know

this seems pretty complicated, but we'll

try to break it down into easy steps.

First off, you need to have a Google

account in order to do this. And then

second off, you need to traverse to this

URL. It's console.cloud.google.com.

And again, the link is in the

description. So once you sign in with

your account, you'll be met with this

welcome screen. And up here, we'll have

this select a project button. What we

want to do is click on it. And then up

here in the upper right, we'll click on

new project. So now we want to input the

project name, which is obvious. We'll

just put the project name in here. And

if this is your first time using it, you

won't have an organization here, but

that's fine. and we can just hit the

create button. So now that we have it

created, we want to switch to that

project so that we can edit the

configuration. We can click on this

select project button in the banner or

you can click on the select project

button here and then select the new

project. Now that we're on our project

dashboard, none of this really matters.

All we need to do is go to the APIs and

services. That's over here on the left.

If we click on APIs and services and

then once we're on this screen, we need

to go over here and click on OOTH

consent screen. Here it tells us that

the Google O platform is not configured

yet. That's fine. We'll just hit this

get started button. Now, this is just

information about what will pop up when

we do sign in with Google so that it

knows what application and what the name

is so that the user knows what they're

signing into. So, once again, we're

putting Dreamsaver. And for the user

support email, you'll just use the email

that you signed in with. Then, we can

hit the next button. And this next

option is asking us whether we're going

to use the app internally or if it's

going to be an external app so that

people anywhere on the internet can use

it. Of course, ours is external, so

we'll click on the external one and then

hit next. Now, the contact information

email is just the email that you're

going to use to get information when

Google needs to notify you about

something. So, this can be any email

address that you wish, but you might as

well just put the one that you signed in

with. Now, we just agree to the Google

API services user data policy and then

hit continue. Once we're finished with

all of these configurations, we can then

hit create. Now that we've created our

consent screen, we can create our OOTH

client. So we'll go here under the

metrics and hit create OOTH client.

Under application type, I'm doing a web

application. So I'm going to select web

application. And then we need to give

the OOTH client a name. So I'm just

calling it dreamsaver ooth. And then

under authorized redirect URIs, this is

where we need to grab the superbase URI

that we had before. So back in

Superbase, let's scroll down to the

callback URL and copy this URL. And then

back in authorized redirect URIs, we

need to add that URI by pasting it in.

Now we should be able to hit create and

it will create our OOTH client. So once

the OOTH client is created, we get the

client ID and client secret. And you'll

remember from before we need to paste

these tokens into Superbase. So let's

copy each one of these. The client ID,

we'll copy that. We'll go back to

Superbase and then paste it into the

client ID section. And then we'll go

back and we'll copy the client secret

and do the same thing for the client

secret. Now that we have everything set

up over here on the Superbase side, we

want to hit save. Make sure you hit save

because if you hit escape or you

accidentally hit the exit button, you'll

have to do this process over again

because in order to get the client

secret, it only gets shown to you during

this time. You have to download a file

in order to see the secret again. So,

you might as well hit the save button.

So, great. Now, our Google provider is

enabled. But we're not quite done on

what we need to do for this

authentication. Over here on the left,

we need to click on URL configuration.

inside of here. By default, it has the

HTTP localhost 3000 because that's where

we're running our npm rundev runs it on

port 3000. So, we know that this is the

URL for the site. But now we need to add

a redirect URL so that once the

authentication finishes with Google, it

then redirects back to Superbase. But

then Superbase needs to redirect back to

our app. So, we have to add a URL here

that is the endpoint for when Superbase

finishes it authentication and redirects

back to our application. Now, I

currently don't know that redirect URL.

So, I'm going to ask the AI to tell me

what that redirect is. All right. So,

here I'm being a little wordy and asking

it something specific. I said, I've

enabled Google authentication through

Superbase, but now I need the redirect

URL back to the application to redirect

from Superbase once authentication is

complete. What is the URL that I should

add to the redirect URLs? Also, I did

forget to set a checkpoint once we

finish that button theme redesign. So

over here on the left, make sure that we

add the message here and I'm saying the

button contrast issue fixed and then I

will commit these changes and push them

up. Okay, so here it's telling me a few

different URLs. It says add both URLs

here and what I want to do is copy this.

So I'm adding localhost 3000 O call

back. So I just highlighted it and hit

Ctrl + C to copy. And then back here

we'll hit add URL. And then I will paste

that URL in and I will hit save URLs.

So, now that that's all saved, let's try

signing up again. I just type something

in here and I'll hit submit dream and

sign up. Okay, cool. Now, it takes me to

sign in with Google and it has this

continue to and then that's the redirect

back from Google that we pasted inside

of the redirects. And so, it goes back

to there and then it should redirect

back to our application. We'll see if

there are any errors when we do. So, I'm

going to select one of these accounts

and sign in. So, now it's saying sign

into and then it has this link back to

Superbase. Now we can change this later

but it does require the paid plan inside

of Superbase. So, so that might be

something you want to do once you get to

production. Now we can hit continue and

see where it redirects us to. Okay, so a

moment there it did redirect us to our

application and it took us to the

dashboard but we did run into an error.

Now we just rinse and repeat. We go

through the loop, we paste in this error

to AI, it fixes it and then we set a

checkpoint. So once again in our

terminal here, we're going to highlight

the whole error message all the way up

until we see these 200s. And then copy

it. I copy by hitting rightclick. I

don't know if it's the same in all

operating systems or all cursor

applications, but you can just hit

rightclick and it will copy to your

clipboard. And then over here, we just

paste it in and then hit enter. See what

happens. So now it made some changes.

I'm going to hit Ctrl + C and then rerun

the application. Okay, look, it seemed

to have fixed it. Now I'm at my

dashboard. You can see I have this stuff

in my dashboard. This is kind of neat. I

can do a new dream. I can upgrade is

This is kind of messed up. It says nan

out of five insights, but uh down here

it says I can record my first dream down

here. Um now I did type in the dream

thing and it didn't create my dream, but

that might just be an issue with uh

since we had some errors before. That

might be the problem. But we'll just

see. We can fix all of those using AI.

Like it's going to be no problem. So

let's go ahead and lock in those changes

and create a new checkpoint over here.

I'll say we implemented the dashboard

and authentication and then I'll ship

this away. Now my process is literally

just repeating these steps over and over

again. I go and prompt AI with something

that needs to change and then I check to

see if there are any errors, copy and

paste them in and I keep doing this

process of committing all of those

changes so that we have a new checkpoint

and doing it over and over again until

we have a final project. Now that we

have the dashboard working and the

signin and authentication working, we

have two things left that we want to do

before we push to production. We have

this on our dreamsaver.com website. And

those two things are specifically for

this app. I want to show how to get a

Gemini API key. And also I want to show

how to do a Stripe integration. The

first one is the Gemini API key. And

this is pretty simple. We need to go to

astudio.google.com google.com and sign

in with the same account that we used to

create the Google cloud application.

Then inside of here, all we have to do

is hit this get API key button. Now from

here over here on the right, we hit

create API key. Next, we have to select

the application that we used before. So

we'll hover over this and then we'll

select Dreamsaver. Now we'll just make

sure that we hit create API key in

existing project and it creates our API

key here. Now we have to hit this copy

button. If we close out of this, we have

to do that process over again. So just

make sure that you hit the copy button

and then back in our environment file we

will paste that key in. Now we should

have Gemini available to us any time.

However, we do have to set up a billing

account if we want to exceed the free

tier of using this API key which you can

check out what those access levels are

by going to the aistudio.google.com

being in the studio and then over here

on the chat window we have this

selection of which model we want to use.

And if we hover over it, we get a

detailed outlook as to what we can be

looking at in terms of pricing. And here

at the bottom, you'll see we that we for

this particular model, we get 10

requests per minute and 500 requests per

day. Now, if you're using Gemini AI in

your application, you might want to go

through each one of these and see which

one you want to choose cuz some of them

are a lot cheaper than others. However,

this is honestly a great price and it's

great for our testing environment. But I

also want to make sure that we are using

this. So, I'm going to copy the name of

this model and hit control + C on my

keyboard. And then back in cursor, I'm

going to just prompt our AI and ask it

to make sure that we're using the

correct model. So, I'm just saying, can

you make sure that we're using the

Gemini model for our AI in the

application? And then I pasted the model

name there. So, it says it updated my

model to the one that I requested. And

now we can hit Ctrl + C to kill our

process and run it again just to test it

out. So, now when we're trying to record

our dream and test things out, we have a

few issues here. If we go to the dream

description and then just type something

random and then scroll down and click on

the save dream button, we might get this

spinning indefinitely. And if we go to

our console, we don't actually see any

errors coming out here. We we can't

really understand what the problem is.

It's just not saving. Well, there's

another place to check for any errors or

any issues, and that's our developer

console on the browser. To get to the

developer console, at least for the

Brave browser that I'm in, is you hold

control shift and then you hit J. This

will be true for any Chrome like

browser, but really you can click on the

settings over here and then go to more

tools and you're probably looking for

something like the developer tools on

your specific browser. And it opens up

this panel down here. Now, we actually

can't see any issues yet, but we might

be able to if we run this again. You can

see I refreshed and I have like these

warnings and an error here. And when I

click save, I'm now getting this failed

to save dream. Please try again. And

inside of here, we can see that we had

this post request. It tried to fetch

something from the database and then it

it errored there and it also had an

error saving the dream. It says could

not find the description column of

dreams in the schema cache. Basically,

we're just going to copy and paste all

this stuff into the AI agent and have it

fix all of our issues. So, we can just

highlight these two errors and copy them

and paste them into our AI agent. I'm

also going to add that I'm on the

creation of a new dream page. So, I'm

saying I'm on the creation of the new

dream page. And when I hit save dream, I

get these in the developer console.

Hopefully, it just fixes everything. And

now, like here, it sometimes tells you

to update your SQL schema. And

basically, we have to do that on

Superbase. So, it created this file with

all of our SQL that we need to have. Uh,

I'm just going to hit control A and copy

this. And then we'll go back to

Superbase. And we need to do the same

thing that we did when we created the

tables. We have to go over here to the

SQL editor. And I'm going to hit the

plus sign. So I get a a fresh new

instance and then paste this in. And

then once I have this pasted in,

hopefully this is the correct SQL schema

that we need. And we'll hit run. And

this is just a warning saying that we

have a destructive operation. This is

okay. We're still developing. We're

still trying to figure things out. So

I'll just say run this query. Now I'm

getting this error. And again, rinse and

repeat. I'm going to copy this error and

then go back to cursor and paste it in

here. And then let the AI tell me what

to do next. It looks like it updated the

database schema file and it's telling me

to do ex essentially the same thing that

I just did. So, I'll copy this again and

I'm going to select everything in here

and then paste over this and then hit

run again. Now that I get success,

hopefully this works. I'm going to go

back to the application and restart it

though. Okay, so now that we've made

updates to the database, let's go ahead

and hit save dream again. It looks like

it successfully saved the dream and now

we have this AI insights. It says unlock

to upgrade, but we should be able to do

at least one AI insight. I wonder if

it's just not configured correctly in

order to do it. But back in cursor,

since we did resolve all of our initial

database issues, let's let's go ahead

and make a checkpoint. I'm going to use

the generate commit message and just let

it generate. And then I will hit commit

and push. Also, periodically, I like to

start a new chat just because it cleans

things up and it allows it to start with

a fresh context. it'll just give us

better results. So, generally, I like to

hit this plus button to create a new

chat and then start again. So, let's

describe our feature here. I'm saying I

want it to be automatic for the first

five insights on the free tier. So, I'm

telling it that and hopefully it can

just resolve our issue here of having to

upgrade in order for us to see any AI

insights. And now it looks like it's

just one thing after another. We're now

getting an unauthorized when we do the

AI insight request. And it looks like in

our console we have this trace. Let's go

ahead and copy and paste this into our

agent and let it fix it. Okay, so now

this has to be the time that we can do

it. I'll hit generate AI insight. And

look at that. We finally have our AI

insights. We can see here it says the

dream despite it being seemingly

paradoxical nature could represent a

core tension between achievement and

subsequent loss of control or feeling of

emptiness. Okay. Um that's that's fun.

Okay. So now that we have AI generating

an insight for our dreams, we basically

have a complete product here, except we

need to add a payment gateway. And

that's where Stripe comes in. Stripe is

a payment processor platform that makes

it easy just to integrate directly into

our application so that we can get

paying customers. You'll need to go to

stripe.com and sign up for an account.

Now, we'll just go through the process

of creating an account. Then once you've

created it, it'll go to this dashboard

and it'll have this onboarding process

where it guides you through how to

create a business name and a website and

allow you to use Stripe. However, I'm

going to skip this for now because I

want to show you a different way of how

to create each account. Once you're on

the dashboard, we go over here to the

left and click the down arrow. Now,

inside of here, we want to go to other

accounts and click on create account.

Now, here's where we give it a name, and

we're going to name it the name of our

project. Then, select your country and

hit create. And now we'll kind of go

through that whole guided onboarding

process. What we want to do is select

recurring payments because that's how

our app is going to operate. And then

we'll just hit the continue button.

Next, you can hit the go to sandbox

button. And the sandbox is an

environment that you can test in so that

you don't actually have any real money

transactions happening. So now let's

just go through the setup guide. I'll

click on choose a pricing model over

here in the bottom right. And based on

your pricing model, you'll choose

something here. I'm going to choose flat

rate because I'm charging people at the

end of the month. Then we can just hit

save. And now we'll just move to the

next thing which says choose how to

accept recurring payments. And for our

application, we want to actually

traverse to a page to do the whole

Stripe checkout process. So we're going

to select this pre-built checkout form

and then hit save. Now we want to create

a recurring product because this is how

we actually get paid. Now for my app, I

only have one recurring product. Let's

look at what it's called. If I go back

to my application and hit on upgrade, it

takes me to this uh subscription page

where we have the free plan, which we

don't actually need to make a recurring

product inside of Stripe for. And then

we have what we call this premium plan.

And I'll keep it the same name. So, I'm

going to call it premium. I'm just going

to copy this and then paste it in as our

name. I'm going to leave the description

empty. it. You can add a description

here to signify what you're getting for

this premium, but since it's already on

the application in the pricing page, I

don't feel the need to add this

description. And then we scroll down and

we select recurring because it's going

to be charged every month and the

amount. And we're going to say $8

because that's how I priced it out. Now,

I'm selecting monthly. Make sure that

your unit quantity is one. And then we

can hit add product. Now, the last thing

that you need to do in order to actually

start getting payments is setting up

your business. You'll have to fill out

this whole profile to not only verify

your business with Stripe, but also to

accept payments. So, you need to walk

through this whole account activation

before you can even get any payouts from

Stripe. Now, it might take a while in

order for them to verify your business

or who you are, I guess. But, in the

meantime, you can still test out the

Stripe product and get it hooked up into

your application. So, here on the main

homepage, we need to grab a couple keys.

Over here on the right, we have these

API keys. We need to grab both the

publishable key and the secret key. What

we can do is just click on it and it

will automatically copy it to our

clipboard. And then back in our

application, we want to go to our

environment file and paste these keys

with the correct names. So the

publishable key is shown on the browser

in the client. And so it has this next

public and then we have the name which

is stripe publishable key. So I'll paste

the key here. And then we go back to

stripe and copy the secret key. And then

again paste the key under stripe secret

key. Now that we have both of these, we

need to grab the product ID as well as

the pricing ID. So, back in Stripe, go

over to the left and click on product

catalog. And inside the product catalog,

we want to click on the one product that

we created. And from here, we should

have under details the product ID. We

can just click on this to copy it to our

clipboard again. And now I'm going to

have the agent do all of this work

because I don't want to have to figure

out where to place this product ID and

the pricing ID. So, I'm telling the

agent, I have created my Stripe account

and I'm currently in the sandbox for the

premium subscription. And here are my

product ID and pricing IDs. Please make

these environment variables so that I

can change them in production. And the

reason we do this is because the pricing

ID and the product ID are both going to

be different in production than they are

in testing. And that's because we have

to create the product again in live

mode. So they'll have different product

IDs and pricing IDs. So we want them to

be configurable. So just pull them out

as environment variables so that we can

configure them and we don't have to edit

code directly in production. So then I

have my product ID right here and we

need to grab the pricing ID. to do that.

Under premium, we have this pricing and

we can just click on it. And then on the

pricing page over here on the right, we

have the price. We can just click on

that to copy it to our clipboard. Then

we'll just paste this in. And now we can

just let the agent do all of the work to

set up both our product and our price.

Okay, so it looks like it completed

everything. We just need to put the

Stripe product ID and Stripe price ID

environment variables in our environment

file and then paste in each of the

values. So, I copied the product ID and

pasted it where I needed to for the

stripe product ID. And then I copy the

price ID and paste it where the price ID

is. But in actuality, I know this isn't

right because I know we need to have

next_public

in front of each one of these, the

product ID and the price ID. And the

reason for that is because we needed to

be accessible from the browser and not

from our backend server. But just to be

sure, I'm going to ask the agent and I'm

going to say, shouldn't there be a next

public in front of the product and price

ID environment variables? And it does

tell me that I'm right. There should be

that next underscore public. So, let's

go ahead and copy these into our

environment file. Now, with these

environment variables corrected, we can

save this file and we can restart the

server. Oh, and also, I did forget to

share that I did make another checkpoint

because we finished that Gemini API

stuff. So, I created that checkpoint and

now everything else we're going to have

probably one more checkpoint for the

Stripe stuff and be done with that. So,

now with all of that done, we can go

back to our application and then hit

upgrade to see our stripe path. So now

in the subscription, say scroll down,

I'm going to hit upgrade to premium. And

of course, like always, uh like

clockwork, we always have an issue and

we're getting this uh some error here.

So like we do, we rinse and repeat. We

put this into the agent and see what it

gives us. Now, after restarting the

server, let's hit upgrade to premium.

So, look at that. It takes me to the

Stripe checkout page. So, now I can

subscribe to premium for $8 a month.

Also, don't worry, we're not doing real

transactions. We're in sandbox mode. You

can see that up here. So, they're not

actually real transactions. And we're

also using a dummy card. They allow us

to use some dummy data. So, this is what

we're using, the 4242 all the way

across. And then you can make up the

rest of the data however you want. It

won't be actually charged. So, then we

have the one-click checkout. Next time

that we do this, we don't have to write

all this information again. We can just

do the one-click checkout with link and

then we'll hit subscribe. But we do have

errors. So, let's clean that up. So, one

of the issues that we ran into was that

when we actually hit the upgrade button,

we don't get the user to get upgraded to

the premium subscription. And you can

check that out in the database if we go

to our users that this Stripe customer

ID isn't filled in. And the reason for

this is because we have to set up a web

hook in order for our application to

know that the payment was processed. So,

one of the tools needed to do this

locally is using the Stripe CLI tool. If

we go down here to the left and click on

developers and then scroll up until you

can click on web hooks, it should open

up your workbench and under here we have

this button to test with a local

listener. Once you get that, you get

this option to download the Stripe CLI

tool. So, we need to click on this. Now,

depending on your operating system, you

need to select the correct distribution.

I'm on Windows, so I'm going to select

the Windows one. It tells me to download

the latest Windows zip file from GitHub.

So, we click on GitHub. And then we go

to the release pages. We scroll down to

our particular operating system. I'm on

a Windows x8664.

That's probably what you're on, too. And

then we click on this to download the

executable. Once you download that zip

file and open it up, you'll have this

Stripe.exe file. We need to put this in

a location where we can access. So,

you'll need to extract this to whatever

folder that you want, but then make sure

that you grab the path for that folder.

So, I've extracted it to this folder,

and then I need to copy this path up

here. Now, we need to open up our

environment variables. And to do that,

you hit the Windows key and type in

environment. Under settings, you should

have edit system environment variables,

and we can click on that. Now, inside of

here, click on environment variables.

Now, we need to traverse down in the

bottom section to the path variable and

double click on it. From here we can

click new and then paste that path in

right here. Then you can hit enter and

hit okay and then hit okay again. Now

back inside of cursor we want to create

a new terminal instance. So we can do

that by hitting this plus button right

here or hitting the down arrow and

selecting which terminal we want. I'm

going to be using the command prompt

since I did all of this inside of the

Windows environment. So I'll click on

command prompt. It should open up a new

terminal for me to work in. And now we

need to log into our account using that

Stripe CLI tool. So we'll type in Stripe

login. Once you type Stripe login, hit

enter and it will go through an

interactive login on the browser. If the

URL doesn't open up immediately for you,

you can hold control and click on it.

Then once it opens up in your browser,

make sure that these words are the same

words that are in your terminal right

now and then hit allow access. Now that

we have access, we can type one command

and start listening to web hook events

from Stripe. And that one command is

down here. It's kind of hard to see, but

it says stripe listen--forward-whost

3000/ API/webhook/stripe.

Once we do that, we can hit enter and it

should be ready to go. But we do need to

copy this signing secret. So, we'll

highlight it and I do just a right click

to copy this over. So, I'll rightclick

and then I will paste it into our Stripe

web hook secret up here in our

environment file. Now, we can save this

file. I'm going to go back to the other

terminal. You can switch between

terminals over here on the right. I'm

going to go back to the other terminal

and start up the server again. Now, make

sure before you test this out again that

we delete the customer inside of Stripe.

And to do that, we can go over to the

lefth hand side and click on customers.

And then inside customers, click on the

customer uh the one that we created. and

then scroll down and under the selection

of the subscription over here on the

right we can cancel the subscription we

click that and we cancel it immediately

no refund and click the button at the

bottom and back in our app once it's

reloaded we want to go through the

upgrade process again so inside

subscription I'm going to click upgrade

to premium now since we already went

through setting up the whole checkout

process earlier we get this nice little

confirmation that it's me and you just

type in 000000 now we can click

subscribe and hopefully it all works

correctly and all All right. Now, it

looks like we're on the premium

subscription. You can see the AI

Insights now has the infinity sign.

There's no more upgrade button up here.

And if we check out the database, we can

see that our user is premium is set and

our Stripe customer ID is in here. Now

that we have Stripe tested and working,

we can finally deploy to production. And

we're going to use Verscell to do that.

So, you can go to versell.com and sign

up for an account. When you're signing

up, you probably want to select the

hobby plan because most of our

applications are probably going to fall

under that hobby tier, and you don't

need to pay for that pro tier. Now, once

you're finished logging in, you'll want

to scroll down here and import a Git

repository. Since we pushed all of our

code up to GitHub, we might as well use

GitHub and then import that into Versel.

So, let's click on continue with GitHub.

Then, once you sign in and authenticate

with GitHub, you should have a list of

all of the projects, all the

repositories inside of your GitHub

account. And for the ones that are

specifically using Nex.js, you'll have

this neat little logo here that

identifies it as a Nex.js project. And

what we can do is just click on this

import button and start the new project

process for Verscell. Once you get to

this screen, it pulls in all of the

necessary information. You don't really

need to change much here. The only thing

that we do need to change is we need to

add all of those environment variables

that we have in our M file. So under

environment variables, if we open this

up, it actually says down here that we

can paste a file above to populate the

form. So let's do that. So back in

cursor, if we select the im.local file

that we've been working with and then

hit Ctrl+ A to select all of the text

and then hit Ctrl + C on our keyboard,

we can then go back to Versel and hit

Ctrl +V to paste it in. You just have to

make sure that your cursor is focused on

this text box. And then you can hit Ctrl

+V and it will paste all of our

environment variables into this section.

Now, there are some things that we want

to change with these environment

variables, but we'll do that later.

Right now, we can just keep it as is.

And then we'll scroll down and we can

hit this deploy button. If we scroll

down to the deployment, we can actually

see the build logs of it deploying and

we can see any issues that might come

up. Sometimes when you're using the npm

rundev command to run everything in the

development environment, you actually

get different errors than when you build

the project. So we can see that in our

package.json we have this build script

and what it's doing is we run npm run

build which we can run on our local.

Like if we kill our running application,

we could then run npm run build and it

will do the same thing that it's

currently doing in Verscell. This just

can take a while to do because it's

packaging all of the files together and

putting them into one distribution. So

it just takes a little bit of time. So

it looks like our build failed to

compile. And if we check out the logs,

we can see that it failed to compile

here. And it's saying that there's a

type error. Existing tag is possibly

null. I think it's best just to wait for

this local build to run and see what the

error is. And once we get that error, we

can just send that over to the AI agent

and have it resolve it. All right, so

our local build did find the issue as

well. So let's just copy this whole

thing and then we will paste it into our

AI agent and hopefully it just resolves

it. Then once it's finished, we just

keep running the build and finding any

errors, fixing them, and continue until

we have a clean build. We'll checkpoint

that point and send all of that code up

to GitHub and then we'll try to redeploy

again in Verscell. Okay, so we've made

the fixes and now we'll create a

checkpoint. I'm just going to let this

generate automatically and then I will

hit commit and push. And then back over

here on our product page, we need to

just hit go to project so that it just

comes to the project. We don't need to

inspect the deployment because we've

already checked that out locally and

figured out all the issues. So we'll

click on go to project. And here is

telling us no production deployment. And

that's just because we're currently

building the one that we just sent over.

So now once this builds and completes

the build, we'll have this production

deployment in here. And now that the

build completed, our app is actually

running and we can click on this domain

right here, the dreamsaver.bcell.app,

and open it up. And now we can see the

live version of our application on the

web. So anybody could look at this. Now,

there are a few things that we want to

do. The first of which is we want to set

up that domain that we bought from

earlier in the video. To do that, we can

click on this domains button over here,

and then we can click add domain. If you

didn't actually buy a domain, you could

buy one from Versel itself. they use

some other DNS service, but you could

buy one from Verscell. I'm just going to

click add domain because I already own

it. And then we type our domain in right

here. And we're going to be connecting

to the production environment. So we'll

select production here. And then we can

hit save. Now, when you first do this,

you're going to need to verify that

domain. To do that, we can click on

this. And then it tells us what we need

to add to our DNS service in order for

this to get verified. So this is saying

add a text type and the name is Verscell

and then all of this junk here. So if we

go back to Hostinger, we can click on

manage under this domain and then over

here on the left, click on DNS/name

servers. Now under DNS records, we need

to add that text type. So we scroll

down, we go to manage DNS records. We

select the type and it's text. So I'll

just start typing. And then we have this

txt type. And then the name, which we

said was underscore versel, and then the

text value. We need to go back and then

we'll copy this value. We'll just hit

this copy button right here. And then

we'll go back to the Hostinger and paste

it in. Then we can just click add record

and hopefully in a little bit it will

verify. We can try to speed up the

verification process by clicking on the

refresh button. And since we added two

different domains here, one was www and

the other one was just dreamsaver.com.

We need to do the same thing for this

dreamsaver.com one. So I'll just copy

this value over here so that I keep it

on my paste bin. And then I add all of

the same information again and click on

add record. Now, back here, just hit the

refresh button and hopefully it

refreshes and it has a valid

configuration. And there we go. Now, we

can click on the domain and it will take

us to dreamsaver.com with the correct

address. Now, unfortunately, we're not

quite done because our login isn't going

to work, right? If you remember from

earlier, I mentioned about this site URL

and we had it set to localhost 3000

inside of Superbase. Well, you have two

different options here because we can

only have one site URL. You can either

set up this site URL for production and

also add the redirect callbacks for

production or you can create a new

project that has the production level

database. And we'll have to copy many of

the things that we did earlier for all

of the superbase stuff. And to be

honest, you should do that because you

want to have a separation between your

development database and your production

database cuz you might be making wild

changes to your development database and

you don't want those to upset any of the

production clients that you currently

have. So, let's go ahead and create a

new project and update all of the

environment keys that we use for

superbase. First things first though,

I'm going to change the project name

from dreamsaver to dreamsaver-dev

so that I know that this is the

development environment. So, to create a

new project, we go up here and we hit

this little up and down arrow and then

select new project. Now, we keep it the

same organization. Remember, I said that

you can only have two projects for the

free tier of these organizations. So,

this is kind of perfect for us cuz we

only need two. But the first thing that

we want to do is give it the name and

we'll call it dreamsaver-pro.

And again for the database password,

we'll just click on generate a password

and we don't need to do anything else

here and we'll just hit create new

project. Now we need to run those same

SQL scripts that we ran for the

development project inside of the

production one. So first thing is switch

back to the development one and we'll

click on this up and down arrow again

and then select dev. And over here on

the left, click on SQL editor. Now

what's nice is we have the history of

all of the things that we've ran

successfully over here on the left. So

we can see all of the SQL updates that

we've ran. So we'll select each one from

bottom to top and then go back to the

production and go to the SQL editor and

paste it in and run them. So here's this

first one and then we'll select the

production and then we will paste it in

and then go ahead and hit run. It should

be successful. Now we'll go back to the

dev, go to the next one and rinse and

repeat. Select all, go back to prod,

select all, paste and then run. We still

want to run this query once again in

dev. Select the next one. Select all.

Copy. Go back to prod. Select all. paste

and then run again. Thankfully, I only

have one more here to run and go back to

prod, select all, paste, and then run.

And now all of our tables should be set

up here in our database. If we check out

the table editor, we should have all of

the tables that we had in the dev

version over here on prod now. And now

all we need to do is set up the

authentication that we have in dev, but

in prod. So over here on the left, click

on authentication and then click on

signin/providers.

Scroll down until we get to Google

because that's the provider that we're

going to use. Click enable with Google.

And now we need to grab the client ID

and secret that we had before. So back

in our Google Cloud Platform, we need to

select the Dreamsaver OOTH that we

created from the beginning. And inside

of here, we have underneath additional

information. We have the client ID. So

we can copy this section here with Ctrl

+ C and paste it in to our client IDs.

And then if you scroll down, we have

also the client secrets, which we can

just click on this copy client secret

button. And then back in Superbase,

paste in that client secret. And once

again, scroll down until we have the

callback URL. Since this is now a new

URL, we need to copy this. And then back

in our OOTH under authorized redirect

URIs, we need to add another URI. And we

just paste that link in. Then make sure

that you hit save and things should be

ready for you to use in production.

However, like I said earlier, we need to

update that URL configuration. So over

here on the left under authentication,

we go to URL configuration and we'll

change this site URL to the new site URL

that we're using in Verscell. Now just

be aware since we did add the www

subdomain, we need to have that as the

site URL otherwise things can get messed

up. Also make sure that you add the S

and HTTPS because now we're not using

local host which was just the HTTP

protocol. We're now using the SSL

protocol. And then under redirect URLs,

we need to add that one redirect URL

that we have in our application. Now, I

can't quite remember it. So, what I'm

going to do is I'm going to switch back

to dev to see what it was. I can see

that it's localhost 3000 o callback. So,

I know that I need to add that to

production. So, let me switch back to

production. And then I'll click add URL.

And from here, we do the https col/

slash and then I have www. Don't forget

that dreamsaver.com

and then/off/callback.

And now I can hit save URLs. And now

from a superbase standpoint, everything

should be good to go in terms of

authentication. However, we do need to

grab all of those API keys that we did

earlier and add them to our versel

environment variables. So on the

homepage, scroll down until we get to

our project API down here. And we'll

just do the project URL first. So hit

the copy button over here. And we'll go

back to our Verscell project. and we

need to click on settings all the way up

here and then on the lefth hand sidebar

click on environment variables. Scroll

down until we get to the environment

variables and we need to replace some of

these. So this first one is the

superbase URL. We need to replace this.

So we click on the three dots over here

on the right and hit edit. And then for

the value I will just replace it. And

don't forget to hit save down here. Next

back in superbase for the API key we

copy that one. And we want to replace

the superbase a nonkey. So we click on

the three dots hit edit. Select all of

this, paste the new key in, scroll down

and hit save. And the last one we need

to replace is a service ro key. So back

in Superbase. So back in Superbase, we

go over to the left, we scroll down to

project settings. And then inside of

project settings on the lefth hand side,

we click on API keys. And then we have

our service ro key right here. We need

to hit reveal. And then we can copy

this. And then once again back in

versel, we click on the three dots. We

hit edit. We copy this. And then we

select this and then we paste it in. And

now we can hit save. Now, when I edit

environment variables here, I don't know

if it persists to the currently running

website. So, what I like to do is go to

deployments and then I go over here to

the top level deployment. So, I have the

one that's currently running and I hit

these three dots and then click on

redeploy because I want to redeploy with

the new environment variables. And then

you get this popup. Scroll down and I

like to check mark this use existing

build cache since we're not actually

changing anything here. And then click

on redeploy. Now that it's finished

deploying, let's check it out and see if

we can sign in and use the application.

So, now that I'm on drains.com, I'm

going to scroll down. I'm going to click

on the sign-in button. And now we have

the same signin as before, but now we're

using the production database. That

seemed to work flawlessly. We're now

signed in in our Dreamsaver dashboard.

Let's check out a record and see if we

can create a new record. Now, I've

recorded my dream. I'll click on save

dream. So, it's updated my dream. And if

I scroll down, let's see if we can

generate an AI insight. Awesome. It did

that pretty quickly. It generated this

whole insight. I don't really care about

the formatting here because this isn't a

real app that I'm trying to sell, but it

looks pretty good. We have everything

running exactly as we did in our local

environment. We can even hit the upgrade

button over here and then select the

upgrade to premium. And unfortunately,

this won't quite work. And the reason

for that is because we didn't set up a

web hook for our website. So, let's go

back to Stripe and set up that web hook.

Over here on the lefth hand side, click

on developers and then go to web hooks.

And here we need to add a destination.

So we'll click on add destination button

right here. It should be under your

account. And then we need to select the

events. Now I don't know exactly all the

events that I need. So in cursor we

might as well just ask. So here I'm

asking it what events does my web hook

listen for in Stripe. I need to set up

the stripe web hook and I need to select

the appropriate events for my

application. So here it looks like it's

telling us exactly how to add this web

hook to stripe. So we need to select

these particular events. the checkout

session completed, customer subscription

updated, and customer subscription

deleted. So, underneath our events,

we'll just search for those. So, we have

checkout session completed right here.

We'll make sure that that's checkarked.

And then we have customer subscription

created and customer subscription

deleted. Now that we've selected those

events, let's click on continue. And of

course, we want it to be a web hook

endpoint. We'll hit continue again. And

under the destination name, I'm going to

call it versell-production. And for the

endpoint URL, we need to use our

endpoint, which in my case is the

www.dreamsaver.com. dreamsaver.com API

web hookstripe. I don't really care

about the description, so I'm going to

leave it blank. And then I'll hit create

destination. Now, the last thing that we

need to do is we need to select this

signing secret and add it to our

environment variables. So over here on

the right, click the eyeball button and

then click the copy to clipboard button.

Now again, back in Versel, we go to

settings. We go to environment

variables. We scroll down until we get

that Stripe key. And under Stripe web

hook secret, we click the three dots,

click on edit, highlight all of this,

and paste the new secret in here. And

then we hit save. Now again, I'm

paranoid, so I go to deployments. I

click on the three dots, and I click on

redeploy. Oh, I and I almost forgot. We

need to update the next public app URL.

So, let's click the three dots here.

It's set to local host 3000. We need to

set this to that Dreamsaver URL. So,

after setting it to your URL, we hit

save and then we redeploy. All right.

Now that we're back up and running,

let's click on upgrade to premium. This

time everything should work. Now in

Stripe again, we're still in that

sandbox mode. Make sure that you're

still in the sandbox mode. And then

we'll hit subscribe. And just like that,

it processed my payment. All of my AI

insights is now at infinity and I don't

have any restrictions anymore. So now we

successfully have everything working in

production. The only thing left to do is

to take our Stripe from our sandbox

environment to our live environment. So,

if I click exit sandbox, once you set up

your business, you can then go to your

live account and then you choose what to

copy. So, you can either copy nothing or

we can copy all those products over. So,

here the only things that we can copy

over are our brand settings, which is

just what your business is set up as.

And then we hit continue. Now, once

you're here in live, if you go to

product catalog, you don't have your

product in here. You have to recreate

it. And also, your publishable key and

your secret key are different now. So,

you have to add those to your

environment variables. and you'll have

to set up the web hooks again. So,

you'll need to click on developers and

go to web hooks and do all of that over

again. Unfortunately, there's no real

way of copying from sandbox over to the

live version. I don't know why, but once

you do add the product and add all of

the environment variables and add the

web hook, everything should be working

in production and you should be able to

receive money. With that being said,

we've successfully built a product.

We've taken something from an idea all

the way to a production level

application. And we've done it all

through vibe coding. Now, I know that

this does take a little bit of effort.

It's not like it's just an easy thing to

do, but if you follow everything that I

showed you here, you will have an app in

production and accepting payments from

customers and getting customers all

without really touching any code. I do

want to say thank you for watching and

if you made it all the way through this

video, you're a trooper because it's a

long one. If you did enjoy the video or

learned anything along the way, hit that

like button because it really does help

me out and it helps this video out.

Also, subscribe if you want to see more

tutorials like this. And lastly, Vibe

Code Docs is an app that I created, so

if you do use it, it does benefit the

channel. Plus, the first project is

free, so this is a little bit of a

shameless plug at the end of the video.

And thank you for watching. And that is

how you vibe code an app from start to

finish, all without touching a single

bit of code.