---
title: 'Build A SaaS Startup With Claude Code (22-Min Crash Course)'
source: 'https://youtube.com/watch?v=s47C9_qDvJs'
video_id: 's47C9_qDvJs'
date: 2026-06-16
duration_sec: 0
---

# Build A SaaS Startup With Claude Code (22-Min Crash Course)

> Source: [Build A SaaS Startup With Claude Code (22-Min Crash Course)](https://youtube.com/watch?v=s47C9_qDvJs)

## Summary

This video provides a step-by-step crash course on building a full-stack SaaS startup from scratch using AI tools. The creator, an experienced developer, covers setting up a Next.js project, integrating Supabase for authentication and database, and deploying to Vercel, all while explaining the underlying concepts. The final product includes a working landing page, user auth, and live deployment.

### Key Points

- **Goal: Build a SaaS with AI** [0:03] — Targeting non-developers to build a full-stack app with a landing page, authentication, and live deployment using AI tools.
- **Required Tools & Accounts** [0:29] — Install VS Code, Node.js, Cloud Code; create accounts for Supabase, GitHub, and Vercel.
- **SSH Key Setup** [1:01] — Set up SSH keys in GitHub to enable passwordless communication between local machine and GitHub.
- **Environment Setup with GitHub** [1:32] — Create a new GitHub repository and clone it locally to start the project.
- **Initializing Next.js and ShadCN** [4:30] — Run commands to initiate a Next.js project, add ShadCN components, and install Supabase libraries.
- **Why Next.js vs Other Frameworks** [5:13] — Next.js handles both client and server code plus communication strategy, simplifying full-stack development.
- **Why Supabase** [6:12] — Supabase provides database, authentication, and email system – all essential for a SaaS app.
- **Opening Cloud Code in Terminal** [7:49] — Use the terminal to run Cloud Code for better performance than the VS Code plugin.
- **Installing Supabase MCP** [8:53] — Install the Supabase MCP (Model Context Protocol) server to give the AI agent direct tool access to the Supabase project.
- **Running the Main Prompt** [10:51] — The creator shares a detailed prompt that instructs the AI to build the landing page, auth flow, and pages. Prompt linked in description.
- **Plan Mode & Permission Handling** [11:55] — The AI requests permissions to access Supabase keys and documentation; the creator reviews the plan before executing.
- **Build and Error Fixing** [14:00] — `npm run build` compiles source code into a bundle; the AI auto-fixes a naming convention mismatch caused by a Next.js version update.
- **Testing the Working App** [15:41] — Landing page, sign-up, email confirmation, login, and password reset all function correctly.
- **Git Commands for Commit and Push** [16:56] — Use `git status`, `git add .`, `git commit -m`, and `git push origin main` to push code to GitHub.
- **Deploy to Vercel** [18:44] — Connect GitHub repository to Vercel, set environment variables (from Supabase), and deploy instantly.
- **Making Changes & Auto-Deploy** [20:37] — Edit homepage title via Cloud Code, commit to GitHub, and Vercel auto-deploys the change.

### Conclusion

This video demonstrates that with the right AI tools and a solid prompt, anyone can quickly build and deploy a functional SaaS startup with authentication and a polished landing page, streamlining what traditionally requires deep technical expertise.

## Transcript

If you've never built software but want
to start building your own tech startup
fast, this video is for you. I've been
developing software for more than 30
years and made more than a million
dollars with AI. And in the next 25
minutes, I'm going to show you how to
set up a full stack app from scratch
using AI, complete with a marketing
landing page, authentication, and live
deployment to the internet. I'll explain
all of the steps that I'm doing so that
you understand the tools and how to pick
them so that you can keep building on
your own. So, if you're tired of seeing
everyone else profit from AI, this video
is for you. Let's get into it. So there
are a few different tools that you will
need to install. Install Visual Studio,
install Node.js, Cloud Code. How do we
add Cloud Code to Visual Studio? So
before you go any further, make sure you
install these different tools. The
plugin is optional cuz we're not going
to actually use it today, but I did at
least want to show it to you and tell
you about it. And then you're going to
want to set up these accounts here. So
we got Superbase. If I click on this,
it's just going to go to Superbase. I'm
already logged in. I already have an
account. And then you've got your GitHub
account as well. So you're going to want
to create a GitHub account. After you
set up your GitHub account, you're going
to want to set up your SSH keys inside
of your GitHub account. If you go to
your account up here and you come down
to settings and if you come down here to
SSH keys, then you'll be able to create
your SSH keys and it basically allows
you to communicate with GitHub from your
computer without having a password all
the time. And there down here, there are
instructions on how to set this up. And
then you'll also want a Versell account.
So when we actually build out this SAS,
we build out the landing page, the
authentication, we'll actually need to
deploy it. And we're going to use
Verscell to do that. And so you can just
go to Verscell. I already have an
account. It's ready to go. And once you
have these, then you can continue
forward. And I'm going to explain these
different things as I go. So there's
going to be some times where the LLM is
going to be busy doing things, and
that'll give me a chance to come back
and actually explain some of these tools
in a little bit more detail. So the
first thing that we're going to do is
we're going to set up our environment.
There's a few different ways of doing
this, but I think it's probably easiest
just to set up the initial project in
GitHub. And if you're not familiar with
GitHub, this is a platform that allows
you to create projects, store code, and
work with other developers at the same
time where that you can work on the same
codebase and then you can resolve
conflicts, right? Because if I'm working
on code and we're working on the same
file and the same line, it's possible
that we're working on the same file at
the same time and we will need a some
sort of mechanism to help us resolve
that conflict. So that's all GitHub
does. And GitHub is just the hosted
version of Git. So Git is actually a
command line tool and you would have
installed that right here. So when
you're in the terminal and I'll explain
the terminal a bit as well. When I type
git here, there's an actual command that
I'm running and I'm working with. Okay.
So we're going to go back to GitHub and
we'll go ahead and start our SAS. I'm
going to go ahead and call this the Hey
Genen SAS startup because we're going to
be creating a SAS that allows
subscribers to log in, create projects,
create video projects, generate a
script, and then generate a video from
that script all automatically with AI.
And we're going to use Hey Genen. And if
you're not familiar with Hey GenE, it's
just a AI company that allows you to
just upload a script and generate a
video using your own avatar. I'll go
ahead and just leave this public here.
Create the repository. And now I'm going
to need to grab this URL here. This is
what we're going to use to clone the
repository. So I'm going to go ahead and
copy this and then I'm going to jump to
the terminal. So if you've never used
the terminal before, this is really the
way when I was a kid, I would interact
with computers all the time, but it's
nothing to get overwhelmed with. A Mac
has it, PCs have it. It's just a way to
access the same system that you're using
with the user interface. So if I do an
ls here, which is a command that just
says give me all the files. I'm in my
home directory here, and you can see
applications desktop. It would be the
same thing if I went to the finder here
and I can execute commands, but it's
very similar to just working with the
UI. It's just you're typing commands and
interacting with just commands instead
of a guey interface. So once you have
this, we're going to copy that. Come
back to the terminal. We're going to do
get clone. And inside the community,
I've got a whole other video that goes
into git and how this works. And I'm
just going to paste that link that I
took from GitHub. And here it's using my
SSH keys to connect with GitHub. I have
to put in a passphrase just to
authenticate. But now we have an empty
folder here which is going to be the hey
genen SAS. I think I I called it
started. I should have said startup.
I'll I'll change that after. So it's
just an empty directory to start which
is fine. Down below here I have a prompt
inside of it. I could say hey you should
install Nex.js. You should install these
different components and everything like
that. And it would work but in the end
it's going to end up just executing some
of these commands. And we don't really
need the AI to do that for us, right? We
can really just take these commands and
run them ourselves. So the first one
here is going to initiate an X.js and
I'll explain a little bit more about
Nex.js in a second. It's going to create
an Nex.js project. It's going to add
Shad CN which is a library that has all
these different cool components, visual
components to make your SAS look cool.
Then we're going to actually add some
different components and then we're
going to install some libraries that
work with Superbase. So again, like if I
told the prompt to do that, it would do
that. But there's no reason to have AI
do it when we know we need these
commands. So these four commands I'm
going to run in the terminal. I have a
command here that's just all four of
them in one line. So I'm going to use
this. It'll just make it a bit faster.
I'm going to go ahead and open up the
terminal and just cut and paste those
commands. So now while this is running,
the one thing I want to just highlight
here, I'm going to jump over to the
screen here so I can draw a little bit.
The reason why I picked Nex.js instead
of the many other solutions is that
building a web application is actually
pretty complex and you have two major
pieces. You have the server. So when I
go to this site in our browser, so this
is my browser here. When we want a web
page, we go to that server and we say,
"Hey, we'd like to use your website."
And then what it does is it has this
little clientside package. It's it's
code that actually runs this particular
SAS platform in your browser. There are
some code that the server is going to
send to us when we ask for it. So that
then we can interact and run the
platform. There's a communication back
and forth between the server. So as I
draw here, the server has to save all
that information. Next.js JS makes it
easy because they have one framework
that gives you the the client code and
the server code and the communication
strategy back and forth which just
eliminates a lot of things that you
would normally have to build on your
own. Now people still do build it on
their own and you will notice in the AI
vibe coding space a lot of people are
using Nex.js because of that. So let's
check in on our install.
The rest of this should be pretty easy.
But then you might also ask okay well
why are we using Superbase? So this is
another platform we're going to use.
Another thing that every SAS application
needs is it needs user login right?
Right? So it needs an authentication
system. That authentication system needs
to be in the code here. This is
something that's very important, right?
Cuz if it's not secure, you know, people
can hack your site. What Superbase did
is they created a platform which has
several different things inside of it.
So people just talk about Superbase as
if it's a thing, but inside of Superbase
is not only a database, which we use to
save all the information on the server
side. So we've got this, but it also has
that authentication system and it has a
few other things as well. It has an
email system because if our SAS needs to
send email, there's quite a few
different utilities every SAS needs in
order to function properly. So that's
all Superbase is doing and that's why
we're using these specific frameworks.
Cool. So we're ready to go. So now we're
going to get into actual coding. So I
have the terminal open. You can open up
multiple terminals like this. So we have
two windows. Or you can actually just
create additional tabs. I'm going to
show you in a minute, but you might also
be running Cloud Code and you might also
be running your site and testing it with
other commands. What I like to do is
just create a new tab so that I can work
on multiple things at the same time
without having to manage a bunch of
windows. Now, I'm going to run Cloud
Code in the terminal here. Remember
before earlier I talked about how you
could run Cloud Code here inside of
Visual Studio, but this plugin and
running Cloud Code here are not exactly
the same thing. I found that actually
running it in the terminal has better
performance and the plugin just doesn't
perform as well. There might be some
situations where I use the plugin just
because it's nice that it's integrated.
Recently, I've just been using the
terminal and it works a whole lot
better. Okay, first thing I'm going to
do here is I'm going to go ahead and pop
open cloud code and now I'm inside of
the directory. Okay, and then it's going
to ask for permission. We'll go ahead
and give it permission. Now, I did
mention here to run /init. So, I'll just
talk about what this is. So, if I type
/init, what that's going to do is it's
going to evaluate the codebase. Let me
just jump over to Visual Studio here and
I'm going to open up the folder so we
can see all of the files that we've
already created. So if you notice here
on the the left hand side, we have our
directory structure. And if I were to
come to the command line here, come over
here. But if I were to do an ls here,
we're going to see all the same things
right here again. So again, the terminal
is just a, you know, more rudimentary
way of accessing your system, but the UI
is seeing the same thing here. And so
what the slashinit command does, if I
were to type this right now, I think I'm
I'm gonna wait. But if I type this, what
it's going to do is it's going to create
this cloud. MD file, which basically
describes the codebase in detail. When
cloud runs from time to time, it already
has an understanding of what's going on.
But I think I'll just I'll wait till the
end. It's kind of just a judgment call.
So the next thing I'm going to do is I'm
going to install the Superbase MCP. So
I'm going to jump over to M uh to
Superbase. I've just created account.
And again, it's totally free. I already
have one project here or this is my
organization. So I'm going to click on
my organization. I'm going to create a
new project
call the hey genen
SAS startup. Create a project or a
password. Create new project. And now
what's cool is up in this connect button
here. They make it really easy to
install the MCP for cloud code
specifically. So I'm going to come down
here for client. I'm going to pick cloud
code. And it just gives me this command
I can come back to the terminal and run.
So I'm going to jump back out of cloud
code. I'm going to install this MCP.
It's going to connect it to my
Superbase. And now if I type cloud
again,
it's going to ask us if I want to use
that MCP. And now if I type MCP, we can
see that I have that MCP. Now it needs
authentication.
So I'm going to go ahead and
authenticate. It's just going to open up
a window and then I can authorize it.
And if I come back to cloud code. So now
if I type MCP,
we've got our superbase and it's
connected and we can view the tools. So
if you're not familiar with MCP servers,
I'm installing this just to kind of
demonstrate. But it's really giving your
agent tools to use like it's giving it a
hammer and a a screwdriver so that as it
comes across problems, it can pick up
that the right tool for the job at the
time. So now before we get started, we
do need to set up one thing inside of
our project here. I'm going to go to
authentication and then we're going to
come down here to URL configuration. We
already have a URL for the site URL
which is fine. So it's pointing to
localhost. And just so you know whenever
something says local host it's referring
to your own computer. So when we first
build this we're going to be building it
locally on our computer and then we're
going to deploy it to the web later. So
whenever you see local host it's
referring to your own computer. So then
we need to take this. I'm going to copy
it. We're going to add this URL here
which is the same from the instructions.
We're just going to add slash off
callback.
All right. So now all we need to do is
run this prompt. So if you're watching
this on YouTube, I will have the prompt
linked in the description below so you
can cut and paste it. But essentially
what it's doing is it's telling the
agent that you're a full stack developer
that you're an expert in X.js like you
to build out the landing page and the
superbase authentication. And then we
talk about the different pages that are
needed to make a nice landing page. You
need pricing, hero image, right? the
title, CTA, and the pricing and the
footer. And then we hashed out some of
the basic files. We need some examples
from the Superbase documentation just to
make sure it does it right. And then we
just have some basic flow, right? So
like there's a very typical pattern with
authentication. You know, you sign up,
then they you confirm your email. So it
just describes that typical flow, some
things not to do. So I've gone through
this process a couple times and I've
just refined this prompt, some error and
some troubleshooting tips, but that's
really all we need. So, I'm going to go
ahead and copy this whole thing. Jump
back to cloud code. I'm going to go
ahead and go into plan mode. So, I'm
going to go shift tab twice to go into
plan mode. Going to paste that entire
prompt. And we will just let it go. All
right. So, next up, Cloud is asking me,
it wants to get the project URL from
Superbase. This is something it needs
for the local for the project. So, it's
going to ask for permission. It's going
to ask for permission for a bunch of
different things. I would get
comfortable understanding the questions
it's asking you and just continuing to
learn. and it's asking for the
publishable keys. So take a moment, go
to cloud, say, "Hey, what is superbase
the publishable keys?" Learn what these
things are as you go when it's asking
for permission. It's a good chance to
learn. So here it's asking for
permission to look up some of the
documentation,
wants to look up some files inside the
directory. So we're just going to give
it permission and then also tell it that
it has permission to keep doing that. So
here's it's using the MCP to look up
information. You can see here it's
actually giving us some warnings about,
you know, how many tokens we're using
and to be careful with what we look up.
Now it's creating the plan. Yeah. So,
what was interesting before is I was
running the same process but using the
plugin for cloud code that I showed you
earlier inside VS Code, but it was just
moving so much slower. And I did a
little bit of research and it turns out
they're not exactly the same. So, the
plugin for cloud code is not doing the
exact same thing that the command line
tool is. In fact, the old plugin
actually used cloud code directly and it
was a couple months ago where they
created this plugin and it just doesn't
work quite as well. So, it's creating
the plan and it's always good to just
watch what it's doing and then we can
come back here. You can review
everything. I always recommend people
review take note of what you don't
understand. Create a list of things to
do research on. So, I'm just going to go
through make sure it looks good compared
to what we wanted. It's looking good.
So, at this point I'm just going to go
ahead and say yes and auto accept the
edits. So here it's creating the env
local file. So this is a local file that
your Next.js application is going to use
to set up basic information that allows
the site to run. So if we're going to
integrate with Superbase inside of our
Next.js application, we need a couple of
different things. We need the project
URL and we need the key. And so using
that Superbase MCP, it was able to get
that for us and just create this this
file for us, which is cool. So we'll let
it go ahead and build things out. Now
it's going to create the landing page.
It looks like it already created most of
the components for the authentication,
logging in, creating an account,
resetting password. All right, so it's
pretty much done now. It's running the
npm run build. So wanted to just quickly
talk about this. So with Nex.js, when
you build out a project, the first thing
you do is you run a build. It's going to
take all of the source code and it's
going to build this package, that client
and that server code that we talked
about earlier into a bundle. And so
that's what npm run build is. Okay, that
builds the the bundle basically. So, I'm
going to go ahead and give it permission
to do it now and to do it into the
future as needed. This is where it's
able to find some additional or initial
bugs that it can go ahead and just fix
for you. So, you can see it compiled
successfully, but it did find one issue,
which is the new Nex.js uses a different
naming convention for something. So,
it's going to fix that. Those are
interesting things to figure out and
notice as well because essentially what
happened is a new version of Nex.js came
out. They changed the name of something,
but all the documentation online uses
the old one. So every time it tries to
to do it, it's using the documentation
and it it notices it and it's able to
fix it. This is going to be common when
when versions change. It's common thing.
So now now it's running npm rundev.
Okay. So what this is going to do is
it's actually going to run the server.
Now you can run the server. You can have
cloud code run the server. So you can
see there's a background task running
right here. So it's running the build in
the background. You could come over here
and I could type npm run build or dev.
Now, you can only have one dev running
on any given port. So, if you remember
back in Superbase, we had this URL here
with this colon 3000. What 3000 means is
we're going to be accessing port 3000 on
our local computer. Your computer
happens to have a lot of ports. When
you're online and you're just going to
something.com, it's traditionally going
to port 80 if it's unsecured. But, if
you know the the little lock there,
that's going to a different port. I
think it's 443, I believe. All right.
So, it says it's finished. So, let's
take a look at our site. We can see how
well it did.
All right, cool. Here's our SAS app
ready to go. Pricing footer. Let's go
ahead and log in. We don't have an
account yet. So, let's go ahead and sign
up. It's just giving you a security
warning. Create the account. All right.
Now, it's saying it went to my email to
confirm. All right. So, confirm your
mail. All right. Cool. So, that worked.
And we're logged in now. Perfect. And
then if we go over to Superbase, we go
over to the authentication
users, we're going to see the new user
here. So, let's go ahead and log out.
Let's try to do the password reset.
Forgot your password.
All right, reset password.
Perfect. And we're logged in with a new
password. So, that's pretty cool. It did
the whole thing without any issues.
Sometimes you might run into issues. In
those cases, don't worry if cloud code
is the one that's running the the
server. Then, it's actually able to see
the errors that are happening. If I were
to run it here, you would be able to see
the errors here, and you could just cut
and paste them. Sometimes errors will
happen on the screen here and then you
can just cut and paste them. You're just
going to come back to Claude, right? And
you're just going to say what the error
was. Although I've set up this prompt
pretty well to get through some of those
initial pieces. So now that we have a
working site, if I come back here and I
do an ls, I look at all the files here.
LS-la will show me in a long format. So
L makes it long. A shows the hidden
files. If I just did ls, look at this.
It's this format and no hidden files. So
the hidden files are the ones with the
dot. Okay, so ls I just like this view
here. These are all the files that we
need to check into our GitHub project.
So way back in the remember we have this
place where we can collaborate with
other developers, but it's also the
place where we can check in the code to
actually deploy it to the web. Okay, so
I have another video inside of the no
code architects that will go much deeper
into git, but I'm going to show you a
couple commands today. So right now I'm
going to type get status and that tells
you the current status of this
directory. And you can see here we're on
the main branch. There's no commits and
we have all these unttracked files. So
the first thing to do is to start
tracking them. So we're going to do get
add dot. And now if I type get status,
we're tracking the files, but they're
not committed yet. So now we'll do
commit or get commit-m
first commit.
So now if we do a get status, we have
our initial commit. All the files are
checked in. And now what we can do is we
can do a get push origin. And what
that's going to do is it's going to push
it from our local directory up back into
GitHub. And I'm going to put in my SSH
key password. So now if we come back to
GitHub and I do a refresh here, all of
that code that we created is here. Now
there's one other command I do want to
talk to you about. It's this one right
here. It says rm-rf.next
and then node modules/cache.
In nextjs, they create this cache. You
run this command. It's going to clear
out the cache so that when you run the
build again, you're not going to run
into some of those issues that might be
lingering behind based off of some old
code or something got corrupted. So, we
committed it to GitHub. Now, we want to
deploy it to Verscell. So, I'm going to
jump over to Verscell here. And here's a
couple of other sites I'm already
running, but we're going to deploy this
to web. Right. Right now, it's running
on my local computer at localhost, but
if anybody else wanted to access this
SAS startup, nobody could because it's
on my computer. So, we're going to
create a new project and we're going to
connect it to our git repository so that
every time we make a change in git, it
will just automatically take that
change, recompile it. It'll do its own
build and then it'll deploy it very
similar to the npm rundev, but it's
going to run a production version of
that. All right. So, we're going to
search for our hey genen project which
is not going to be there because I'm
only sharing the project like individual
projects with forcell. So, I'm going to
go to GitHub and we're going to give it
a new project.
We'll save it. We'll import it. You want
to make sure that you're using the right
framework here. If you mess this up, it
might run into issues and think it's
your code, but it's just because you
picked the wrong project. Firstell
happens to run a lot of different
frameworks. Remember I mentioned there's
a lot of frameworks. Check out all these
frameworks here. But we're using Dex.js.
You don't need to worry about the build
and output settings. But we do need to
set these environment variables here. So
remember in our local file, we had these
two variables. So these are two
variables that we want to set up.
add more. Yeah, you can import an
environment variable file. That it's
probably easier, but I already started
doing this way.
All right. So, we can deploy it. So,
what it's going to do is it's going to
go to GitHub. It's going to pull down
this code. It needs to set up its own
environment variable just like we did to
run it locally. Forcell has to have this
same setup. So, that's what we just did.
It's going to run its own npm run build
and then rundev to actually launch it.
Right. So we got that. So now we can
continue to the dashboard and we have
our deployment here. So we can actually
go to this website and there it is.
Cool. So then the final thing to show
you is just how easy it is to change
things the next time. So here's our main
title on the homepage. If we were to
come back to cloud here, update the main
page title from
to
easily deploy
or easily
create AI videos for social media.
Something like that. All right. So, it's
going to update the page locally first.
Remember, we're seeing the version on
the web. So, it's going to fix the
version here first. Just like that. And
then if I were to come back to get and
then we were to get status, we're going
to see a new file here. Get add. And
we'll just do dot get status. We're
going to see that's stage now. And we'll
do a get commit updated homepage title.
Get push origin. There we go. Come back
to GitHub. We have the most recent
change. And you can see that it's
pending here. That means if we come back
to Verscell and we do a refresh. All
right. So then if we go to our site, we
have this now automatically. So just by
committing to GitHub, we were able to
figure that out. Cool. If you want
access to all of these resources and the
new VI coding course I'm building out,
make sure to jump into the no code
architects community. We've got a full
classroom including how to make money
with AI course on NAN and the Vibe
coding course I'm building out. Plus, we
have calls and live builds that you can
access almost every day. It's an engaged
group. I'd love to see you there. Either
way, I hope you enjoyed this video and
I'll see you on the next