30:52Brian Casel · Tutorial
How to build your industry's killer app
A real-time build of a real estate CRM walks through the exact PRD-to-milestone process for turning insider industry knowledge into working software with Claude Code.
July 9thThe argument in one line.
You can build and deploy a full-stack SaaS with authentication, landing page, and live deployment using Claude Code, Next.js, Supabase, and Vercel in under 25 minutes.
Read if. Skip if.
READ IF YOU ARE…
- You've never built software before but want to launch a functional SaaS with auth and deployment in under an hour using AI assistance.
- A solo founder or non-technical co-founder who needs to understand the full-stack tech stack (Next.js, Supabase, Vercel) well enough to evaluate it for your startup.
- You're comfortable with CLIs and installing developer tools locally, and want to see a real-time walkthrough of Claude Code handling a complete build.
- You're exploring whether AI coding assistants can actually scaffold a production-ready app or if you need to hire a developer first.
SKIP IF…
- You're a full-stack engineer with 5+ years of experience — this is foundational tooling education, not advanced patterns or optimization.
- You need guidance on scaling, security hardening, or production-grade architecture decisions beyond the initial deploy.
- You work exclusively in a different stack (Python/Django, Rails, etc.) or have already standardized on a different deployment platform.
The full version, fast.
Building a deployable SaaS no longer requires deep engineering chops when you combine a unified framework with AI orchestration. The walkthrough proves this by chaining four tools � Next.js for unified client and server code, Supabase for authentication and database, GitHub for version control, and Vercel for deployment � then driving the whole stack with Claude Code running in the terminal rather than the VS Code plugin, which underperforms. The workflow runs four bootstrap commands manually, installs the Supabase MCP so the agent can pull project URLs and keys directly, then hands Claude a refined prompt in plan mode to generate the landing page and full auth flow. Commit, push, connect the repo to Vercel with matching environment variables, and future edits ship automatically on every push.
Free for members
Chat with this breakdown — free.
Sign in and you get 23 free chat messages on us — ask for the hook, quote a framework, find the exact transcript moment, generate a markdown action plan. Bring your own key when you want unlimited.
Create a free account →Where the time goes.
00:00 – 00:30
01 · Intro + promise
Credentials hook (30yr dev, $1M+ with AI). Promise: landing page + auth + live deploy in this video.
00:30 – 01:48
02 · Required tools + accounts
VS Code, Node.js, Claude Code, Git installs; Supabase, GitHub (SSH keys), Vercel accounts.
01:48 – 04:20
03 · GitHub repo creation
Creates heygen-saas-startup repo, explains Git/GitHub for total beginners, clones via SSH.
04:20 – 05:08
04 · Next.js + dependency install
Runs 4 chained commands in one paste. AI not needed for known installs.
05:08 – 06:15
05 · Architecture explained
Client/server diagram drawn on screen. Next.js handles both sides plus the communication layer.
06:15 – 07:01
06 · Supabase explained
DB + auth + email + utilities as a bundle. Every SaaS needs all of these.
07:01 – 08:56
07 · Claude Code setup
Runs Claude in terminal. CLI beats VS Code plugin. Shows /init command concept.
08:56 – 10:18
08 · Supabase MCP install
Installs MCP from Supabase connect button. Frames MCPs as tools: hammer and screwdriver.
10:18 – 10:55
09 · Auth URL config
Adds /auth/callback to Supabase URL config. Explains localhost as your own computer.
10:55 – 14:45
10 · AI prompt run
Pastes pre-refined full-stack prompt in plan mode. Claude builds landing page, auth, env file, runs build.
14:45 – 17:04
11 · Testing the app
Sign up, email confirm, login, Supabase users table, password reset -- all working first run.
17:04 – 18:45
12 · Push to GitHub
git status -> git add . -> git commit -> git push origin. ls -la shows hidden files.
18:45 – 20:32
13 · Vercel deploy
Import GitHub repo, set env vars, auto-deploy on push. Live URL appears.
20:32 – 21:54
14 · Making changes + redeploy
Updates homepage title via Claude Code prompt -> git commit -> Vercel auto-rebuilds. Full loop demonstrated.
21:54 – 22:07
15 · Wrap + CTA
No-Code Architects Skool community pitch -- free community, classroom, vibe coding course, daily calls.
Lines worth screenshotting.
- The Supabase MCP connection lets Claude Code read the project URL and API keys directly from Supabase during setup, which eliminates the manual step of copying credentials into an .env file.
- Running Claude Code in the terminal consistently outperforms the VS Code plugin because they are not the same tool — the plugin is a UI layer that adds latency without adding capability.
- Next.js as the framework choice for a SaaS build is the decision that collapses server code, client code, and their communication strategy into one framework, rather than selecting and integrating three separate tools.
- An NPM run build after generation surfaces TypeScript errors and naming convention mismatches that Claude Code can fix immediately — treating build success as a quality gate rather than assuming generated code compiles.
- The .env.local file auto-populated by Claude Code via MCP removes a manual step that consistently breaks first-time SaaS setups: the MCP reads the credentials directly from Supabase and writes them to the correct file.
- Working auth — sign up, email confirmation, password reset — produced from a single refined prompt is the output that separates a crash course from a demo: the user can log in, which means the auth actually works.
- Git commit → GitHub push → Vercel auto-deploy is the CI/CD pipeline that a beginner can activate in one session: every subsequent code change deploys to production automatically without additional configuration.
- The terminal Claude Code session running alongside the VS Code UI is the dual-window workflow that gives you both the file browser (VS Code) and the agent session (terminal) without context switching between applications.
- Supabase bundling database, auth, and email into one platform is what eliminates the need to select, integrate, and maintain three separate services for the foundational requirements of every SaaS.
- Plan mode before implementation is the discipline that prevents Claude Code from immediately writing code before the human has reviewed the approach — the shift-tab twice ritual is the quality gate that the beginner crash course makes explicit.
- Clearing the Next.js cache (rm -rf .next node_modules/.cache) before a rebuild is the troubleshooting step that resolves build errors caused by corrupted or stale cache rather than actual code errors.
- Setting environment variables in Vercel to match the local .env.local file is the deployment configuration step that most beginners miss, causing builds that succeed locally but fail in production.
- GitHub as the intermediary between local development and Vercel deployment is the architecture that makes every git push a production deploy without any additional deployment commands or dashboard interactions.
- The auth callback URL added to Supabase's URL configuration is the specific setup step that makes email confirmation redirect to the correct page rather than a 404 — the step that breaks most first-time Supabase auth implementations.
- Building a full-stack SaaS with landing page, auth, database, and live deployment in 22 minutes is not an edited demo — it is the actual elapsed time when the prompts are refined and the tools are pre-configured.
The prompt is the product.
Vibe coding swipe file
Stephen does not sell a tutorial -- he sells a pre-refined prompt. The 22-minute video is a live demo of that prompt working.
- Build and publish your own SaaS scaffolding prompt, then use it as the anchor for a tutorial just like this.
- The MCP hammer/screwdriver framing is the clearest beginner explanation in the wild -- steal it verbatim.
- Lead with credentials fast then aim them at the total beginner. Broad promise plus specific outcome equals subscriber magnet.
- Plan mode (shift+tab x2) is a high-trust signal for semi-technical audiences. Drop it in JoeFlow or MCN+ onboarding copy.
- The cache nuke command makes beginners feel safe. Include a recovery command in every tutorial.
- Terminal > plugin is a contrarian take worth turning into a short -- high shareability in Claude Code communities.
Terms worth knowing.
- SaaS (Software as a Service)
- A business model where software is hosted online and sold via subscription, rather than installed locally — the type of startup being built in this tutorial.
- Claude Code
- Anthropic's command-line AI coding agent used here to build the entire application — writing code, creating files, and running commands — without the developer manually writing most of the code.
- full-stack app
- A web application that includes both the frontend (what users see in the browser) and the backend (the server, database, and business logic that powers it).
- Next.js
- A React-based framework for building full-stack web applications, used here as the foundation for the landing page and authenticated app pages.
- Supabase
- An open-source backend platform providing a PostgreSQL database, user authentication, and APIs — used here to handle the app's data storage and user login system.
- Vercel
- A cloud hosting platform optimized for Next.js and other frontend frameworks, used here to deploy the finished app to a public URL in minutes.
- GitHub
- A platform for storing and version-controlling code repositories — used here as the starting point for the project and the source from which Vercel pulls code to deploy.
- SSH keys
- A cryptographic authentication method that lets a computer connect to GitHub securely without entering a password each time — required for pushing code from a local machine.
- user authentication
- The system that allows users to create accounts, log in, and access protected parts of an application — handled here by Supabase's built-in auth service.
- landing page
- The publicly visible marketing page of a web app — typically the first page a visitor sees, designed to explain the product and convert visitors into signups.
- deployment
- The process of publishing a finished application from a local development environment to a live server where it is accessible via a public URL on the internet.
Things they pointed at.
Lines you could clip.
00:00
“If you have never built software but wanna start building your own tech startup fast, this video is for you.”
07:30
“I found that actually running it in the terminal has better performance and the plugin just does not perform as well.”
09:28
“MCP servers give your agent tools to use -- like giving it a hammer and a screwdriver so that as it comes across problems it can pick up the right tool for the job.”
11:00
“When it is asking for permission, it is a good chance to learn.”
14:00
“I have gone through this process a couple times and I have just refined this prompt.”
Word for word.
Read-along
Don't just watch it. Burn it in.
See every word as it's spoken — crank it to 2× and still catch all of it. The same dual-channel trick behind Amazon's Kindle + Audible.
If you've never built software but wanna start building your own tech startup fast, this video is for you. I've been developing software for more than thirty years and made more than $1,000,000 with AI. And in the next twenty five minutes, I'm gonna 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 because we're not gonna actually use it today but I did at least wanna show it to you and and tell you about it.
And then you're gonna wanna set up these accounts here. So we got Supabase. If I click on this, it's just gonna go to Supabase.
I'm already logged in. I already have an account. And then you've got your GitHub account as well.
So you're gonna wanna create a GitHub account. After you set up your GitHub account, you're gonna wanna set up your SSH keys inside of your GitHub account.
If you go to your account up here and you come down to settings, 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 Vercel account.
So when we actually build out this SaaS, we build out the landing page, the authentication. We'll actually need to deploy it and we're gonna use Vercel to do that. And so you can just go to Vercel.
I already have an account. It's ready to go. And once you have these, then you can continue forward.
And I'm gonna explain these different things as I go. So there's gonna be some times where the LLM is gonna 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 gonna do is we're gonna 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 they you can work on the same code base and then you can resolve conflicts.
Right? Because if I'm working on code and we're working on the same file on 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 gonna go back to GitHub and we'll go ahead and start our SaaS. I'm gonna go ahead and call this the HeyGen SaaS startup because we're gonna be creating a SaaS 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 gonna use Heijin. And if you're not familiar with Heijin, 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 gonna need to grab this URL here. This is what we're gonna use to clone the repository.
So I'm gonna go ahead and copy this and then I'm gonna 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 says give me all the files.
I'm in my home directory here and you can see applications desktop. It'd 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 a GUI interface.
So once you have this, we're gonna copy that, come back to the terminal, we're gonna do git clone. And inside the community, I've got a whole other video that goes into git and how this works.
And I'm just gonna paste that link that I took from git hub. And here it's using my SSH keys to connect with git hub. I have to put in a passphrase just to authenticate.
But now we have an empty folder here which is going to be the HeyGen SaaS.
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, could say, hey, you should install Next.
Js. You should install these different components and everything like that. And it would work.
But in the end, it's gonna 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 gonna initiate the Next. Js and I'll explain a little bit more about Next.
Js in a second. It's gonna create a Next. Js project.
It's gonna add shad cn which is a library that has all these different cool components, visual components to make your SaaS look cool. Then we're gonna actually add some different components and then we're gonna install some libraries that work with Supabase.
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 gonna run-in the terminal.
I have a command here that's just all four of them in one line. So I'm gonna use this. It'll just make it a bit faster.
I'm gonna go ahead and open up the terminal and just cut and paste those commands. So now while this is running, the one thing I wanna just highlight here, I'm gonna jump over to the screen here so I can draw a little bit. The reason why I picked Next.
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 client side package. It's it's code that actually runs this particular SaaS platform in your browser.
There are some code that the server is gonna 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.
And Next. 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 Next.
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 Supabase? So this is another platform we're gonna use. Another thing that every SaaS application needs is it needs user login.
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? Because if it's not secure, you know, people can hack your site.
What Supabase did is they created a platform which has several different things inside of it. So people just talk about Supabase as if it's a thing but inside of Supabase 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 SaaS needs to send email, there's quite a few different utilities every SaaS needs in order to function properly. So that's all Supabase is doing and that's why we're using these specific frameworks. Cool.
So we're ready to go. So now we're gonna 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 gonna 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 gonna 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 plug in just doesn't perform as well. There might be some situations where I use the plug in 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 gonna do here is I'm gonna go ahead and pop open Cloud Code and now I'm inside of the directory.
Okay. And then it's gonna ask for permission. We'll go ahead and give it permission.
Now I did mention here to run slash in it. So I'll just talk about what this is. So if I type slash in it, what that's gonna do is it's going to evaluate the code base.
Let me just jump over to Visual Studio here. I'm gonna 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 l s here, we're gonna 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 slash init 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 gonna do is it's gonna create this claud dot m d file which basically describes the code base in detail.
When claud 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 gonna do is I'm gonna install the Superbase MCP. So I'm gonna jump over to m to Superbase. I've just created an account and again, it it's totally free.
I already have one project here or this is my organization. So I'm gonna click on my organization. I'm gonna create a new project called the HeyGen SaaS 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 Claude code specifically.
So I'm gonna come down here for client. I'm gonna pick Claude code and it just gives me this command I can come back to the terminal and run. So I'm gonna jump back out of Cloud Code.
I'm gonna install this MCP. It's gonna connect it to my super base and now if I type Cloud again, it's gonna ask us if I want to use that MCP.
And now if I type MCP, we can see that I have the MCP now. It needs authentication.
So I'm gonna go ahead and authenticate. It's just gonna 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 super base 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 kinda 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, 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 gonna go to authentication and then we're gonna 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 localhost, it's referring to your own computer. So when we first build this, we're gonna be building it locally on our computer and then we're gonna deploy it to the web later.
So whenever you see localhost, it's referring to your own computer. So then we need to take this. I'm gonna copy it.
We're gonna add this URL here, which is the same from the instructions. We're just gonna add slash auth callback.
Alright. 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 at Next. Js, like you to build out the landing page and the super base authentication. And then we talk about the different pages that are needed to make a nice landing page.
You need your 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 Supabase 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 and 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 gonna go ahead and copy this whole thing, jump back to Claude code. I'm gonna go ahead and go into plan mode. So I'm gonna go shift tab twice to go into plan mode, going to paste that entire prompt and we will just let it go.
Alright. So next up Claude is asking me, it wants to get the project URL from Supabase. This is something it needs for the local for the project.
So it's gonna ask for permission. It's gonna 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 Claude, say, hey, what is Supabase, 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 gonna 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. That was 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 Versus 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 plug in for Cloud Code is not doing the exact same thing that the command line tool is. In fact, the old plug in actually used Cloud Code directly and it was a couple months ago where they created this plug in 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 gonna go through make sure it looks good compared to what we wanted.
It's looking good. So at this point, I'm just gonna 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 gonna use to set up basic information that allows the site to run.
So if we're gonna integrate with Supabase 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 Supabase 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 gonna create the landing page.
It looks like it already created most of the components for the authentication, logging in, creating an account, resetting password. Alright.
So it's pretty much done. Now it's running the NPM run build. So wanted to just quickly talk about this.
So with Next. Js when you build out a project, the first thing you do is you run a build. It's gonna take all of the source code and it's gonna 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 gonna 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. You can see it compiled successfully but it did find one issue which is the new Next.
Js uses a different naming convention for something so it's gonna fix that. Those are interesting things to figure out and notice as well because essentially what happened is is a new version of Next. 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 in it. It notices it and it's able to fix it.
This is gonna be common when when versions change, it's common thing. So now now it's running npm run dev. Okay?
So what this is gonna do is it's actually gonna 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 Supabase, we had this URL here with this colon 3,000.
What 3,000 means is we're gonna be accessing port 3,000 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 four four three, I believe. Alright. So it says it's finished.
So let's take a look at our site. You can see how well it did.
Alright. Cool. Here's our SaaS 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.
Alright. Now it's saying it went to my email to confirm. Alright.
So confirm your mail. Alright. Cool.
So that worked and we're logged in now. Perfect. And then if we go over to Supabase, we go over to the authentication users, we're gonna see the new user here.
So let's go ahead and log out. Let's try to do the password reset. For got your password.
Alright. 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 Claude 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 gonna back to Claude, right?
And you're just gonna 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 l s, I look at all the files here.
L s dash l a will show me in a long format. So l makes it long. A shows the hidden files.
If I just did l s, look at this. It's this format and no hidden files. So the hidden files are the ones with the dot.
Okay? So l s, 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 architecture that will go much deeper into git, but I'm gonna show you a couple of commands today. So right now, I'm gonna type git 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 untracked files.
So the first thing to do is to start tracking them. So we're gonna do git add dot and now if I type git status, we're tracking the files but they're not committed yet. So now we do commit or git commit dash m first commit.
So now if we do a git status, we have our initial commit, all the files are checked in and now what we can do is we can do a git push origin and what that's gonna do is it's gonna push it from our local directory up back into GitHub and I'm gonna 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 wanna talk to you about. It's this one right here.
It says r m dash r f dot next and then node modules slash cache. In Next.
Js, they create this cache. You run this command, it's gonna clear out the cache so that when you run the build again, you're not gonna 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 wanna deploy it to Vercel. So I'm gonna jump over to Vercel here and here's a couple of other sites I'm already running. But we're gonna deploy this to web.
Right? Right now, it's running on my local computer at local host. But if anybody else wanted to access this SaaS startup, nobody could because it's on my computer.
So we're gonna create a new project and we're gonna 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 run dev but it's gonna run a production version of that.
Right? So we're gonna search for our HeyGen project which is not gonna be there because I'm only sharing the project like individual projects with Vercel.
So I'm gonna go to GitHub and we're gonna give it a new project.
We'll save it. We'll import it. You wanna 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 your own project. First of it 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 DexJS. 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 wanna set up.
Add more. Yeah. You can import an environment variable file.
That's probably easier, but I already started doing this way.
Alright. So we can deploy it. So what it's gonna do is it's gonna go to GitHub, it's gonna pull down this code, it needs to set up its own environment variable just like we did to run it locally, Vercel has to have the same setup So that's what we just did.
It's gonna run its own NPM run build and then run dev 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 Claude here, update the main page title from to easily deploy or easily create AI videos for social media, something like that.
Alright. So it's gonna update the page locally first. Remember we're seeing the version on the web so it's gonna fix the version here first just like that and then if I were to come back to git and then we were to git status, we're gonna see a new file here git add and we'll just do dot git status.
We're gonna see that's stage now and we'll do a git commit updated homepage title, git 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 Vercel and we do a refresh. Alright. 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 vibe 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 n eight n, 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 one.
The Hook
The bait, then the rug-pull.
Thirty years of software development and over a million dollars earned with AI -- and Stephen G. Pope opens by aiming all of it at the person who has never written a single line of code. The promise is blunt: a full-stack app, live on the internet, before this video ends.
Named ideas worth stealing.
05:08concept
Next.js as full-stack glue
Next.js gives client code, server code, and the communication layer in one framework.
Steal forAny intro to vibe coding or SaaS setup explainer
06:15concept
Supabase as SaaS utility bundle
Supabase is DB + auth + email + utilities bundled. Every SaaS needs all of these.
Steal forTool recommendation and $6 Stack positioning
09:28concept
MCP as hammer and screwdriver
MCPs give the agent tools to pick up as needed. The agent is the worker; MCPs are its toolbox.
Steal forAny MCP explainer for non-technical audiences
11:30concept
Plan mode before big prompts
shift+tab x2 in Claude Code activates plan mode -- Claude thinks through approach before writing code.
Steal forClaude Code workflow content, JoeFlow prompt design
14:00concept
Refined mega-prompt as core IP
- Full-stack developer persona
- Landing page sections (hero, pricing, footer)
- Supabase auth flow
- Error troubleshooting tips
- What not to do
The real product is the pre-refined prompt. Stephen iterated on it across multiple runs.
Steal forTemplate pricing, MCN+ prompt library positioning
How they asked for the click.
VERBAL ASK
21:54link
“Jump into the No-Code Architects community. Full classroom including how to make money with AI, course on n8n, and the vibe coding course I am building out.”
Soft community pitch at the very end. No mid-roll sponsor. Clean and trust-building.
MENTIONED ON CAMERA
FROM THE DESCRIPTION
PRIMARY CTAWhere the creator wants you to go next.
OTHER LINKSAlso linked in the description.
Visual structure at a glance.
