Modern Creator Network
Stephen G. Pope · YouTube · 22:07

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

A zero-to-deployed walkthrough: Next.js + Supabase + GitHub + Vercel, built live with Claude Code in under 22 minutes.

Posted
4 months ago
Duration
Format
Tutorial
educational
Channel
SGP
Stephen G. Pope
§ 01 · 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.

§ · Stated Promise

What the video promised.

stated at 00:08In the next 25 minutes I am 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.delivered at 20:32
§ · Chapters

Where the time goes.

00:0000:30

01 · Intro + promise

Credentials hook (30yr dev, $1M+ with AI). Promise: landing page + auth + live deploy in this video.

00:3001:48

02 · Required tools + accounts

VS Code, Node.js, Claude Code, Git installs; Supabase, GitHub (SSH keys), Vercel accounts.

01:4804:20

03 · GitHub repo creation

Creates heygen-saas-startup repo, explains Git/GitHub for total beginners, clones via SSH.

04:2005:08

04 · Next.js + dependency install

Runs 4 chained commands in one paste. AI not needed for known installs.

05:0806:15

05 · Architecture explained

Client/server diagram drawn on screen. Next.js handles both sides plus the communication layer.

06:1507:01

06 · Supabase explained

DB + auth + email + utilities as a bundle. Every SaaS needs all of these.

07:0108:56

07 · Claude Code setup

Runs Claude in terminal. CLI beats VS Code plugin. Shows /init command concept.

08:5610:18

08 · Supabase MCP install

Installs MCP from Supabase connect button. Frames MCPs as tools: hammer and screwdriver.

10:1810:55

09 · Auth URL config

Adds /auth/callback to Supabase URL config. Explains localhost as your own computer.

10:5514:45

10 · AI prompt run

Pastes pre-refined full-stack prompt in plan mode. Claude builds landing page, auth, env file, runs build.

14:4517:04

11 · Testing the app

Sign up, email confirm, login, Supabase users table, password reset -- all working first run.

17:0418:45

12 · Push to GitHub

git status -> git add . -> git commit -> git push origin. ls -la shows hidden files.

18:4520:32

13 · Vercel deploy

Import GitHub repo, set env vars, auto-deploy on push. Live URL appears.

20:3221:54

14 · Making changes + redeploy

Updates homepage title via Claude Code prompt -> git commit -> Vercel auto-rebuilds. Full loop demonstrated.

21:5422:07

15 · Wrap + CTA

No-Code Architects Skool community pitch -- free community, classroom, vibe coding course, daily calls.

§ · Storyboard

Visual structure at a glance.

open
hookopen00:00
promise
promisepromise00:08
tool list
setuptool list00:32
GitHub repo
valueGitHub repo02:59
architecture
valuearchitecture05:11
Claude Code
valueClaude Code08:08
prompt runs
valueprompt runs10:42
app works
proofapp works16:47
Vercel deploy
proofVercel deploy20:18
redeploy loop
proofredeploy loop21:07
CTA
ctaCTA21:56
§ · Frameworks

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

  1. Full-stack developer persona
  2. Landing page sections (hero, pricing, footer)
  3. Supabase auth flow
  4. Error troubleshooting tips
  5. 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
§ · Quotables

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.
Perfect hook -- broad appeal, zero jargon, immediate self-qualificationTikTok hook
07:30
I found that actually running it in the terminal has better performance and the plugin just does not perform as well.
Contrarian tool take -- high shareability in dev communitiesIG reel cold open
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.
Best plain-English MCP explanation -- quotable for any MCP intro contentnewsletter pull-quote
11:00
When it is asking for permission, it is a good chance to learn.
Reframes permission-prompt anxiety as educationTikTok hook
14:00
I have gone through this process a couple times and I have just refined this prompt.
Honest admission that the prompt is the IP -- validates template-as-product modelnewsletter pull-quote
§ · Pacing

How they spent the runtime.

Hook length30s
Info densityhigh
Filler8%
§ · Resources Mentioned

Things they pointed at.

§ · CTA Breakdown

How they asked for the click.

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.

§ · The Script

Word for word.

HOOKopening / re-engagementCTAthe pitch
00:00HOOKIf 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,
00:16HOOKand 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
01:01of 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
02:14to 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
02:38SaaS 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.
03:02And 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
03:21access 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
03:46clone. 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.
04:06I 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
04:47some 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
05:36this 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.
06:11The 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
07:05like 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.
08:30But 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
09:06called 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,
09:35it'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.
09:47It'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
10:18authentication 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,
10:43HOOKwhich 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.
11:06HOOKAnd 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,
11:29HOOKyou 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
11:48to 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.
12:25Wants 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,
13:13take 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
13:33to 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,
13:57logging 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.
14:22So 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
15:15or 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.
15:47Alright. 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,
16:08we 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.
16:23Alright. 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
16:57and 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
17:21with 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
17:55dash 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
18:13password. 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
19:14version 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.
19:31We'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.
19:46You 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.
19:59Add more. Yeah. You can import an environment variable file. That's probably easier, but I already started doing this way.
20:11Alright. 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
20:44Claude here, update the main page title from to
20:53easily deploy or easily create
20:58AI videos for social media, something like that.
21:04Alright. 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
21:26CTAupdated 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.
§ · For Joe

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.
§ · For You

You can build and ship a real app this weekend.

For the first-time builder

The hardest part of starting a SaaS is not the code -- it is knowing which tools to pick and in what order. This video gives you that order.

  • The stack is free to start: Supabase free tier + Vercel free tier + GitHub free tier. You need Claude Code and that is it.
  • You do not need to understand every line of code Claude writes. Read the permissions it asks for -- each one is a lesson.
  • Your first job is setting up the environment correctly (VS Code, Node.js, SSH keys). Claude handles everything after.
  • When something breaks, run: rm -rf .next node_modules/.cache, then rebuild. Fixes most Next.js weirdness.
  • Committing to GitHub is the deploy trigger. Once Vercel is connected, every git push ships your changes automatically.
§ · Frame Gallery

Visual moments.

§ · Watch next

More from this channel + related dossiers.