22:07Stephen G. Pope · Tutorial
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.
January 15thThe argument in one line.
A complete beginner can ship a live website with Claude Code in one sitting if they plan first with a written PRD, start on a template, and let Claude debug its own mistakes.
Read if. Skip if.
READ IF YOU ARE…
- You have never opened a terminal and want the exact install order for Cursor, Node.js and Claude Code on a Mac or PC.
- You run a small service business or agency and want a one-page landing site with a contact form and a Calendly booking button.
- You have heard about vibe coding but nobody has explained plan mode, slash commands or CLAUDE.md in plain terms.
- You want to see what happens when Claude Code breaks something mid-build and how a non-coder gets it working again.
- You have code on your laptop and no idea how GitHub and Vercel turn it into a public URL.
SKIP IF…
- You already ship with Claude Code daily; nothing here goes past the basics of plan mode, /init and a Vercel deploy.
- You want authentication, databases or a SaaS backend; the project is a static one-page site with no backend.
- You need Windows-specific terminal guidance; the walkthrough is filmed on a Mac.
The full version, fast.
Vibe coding means describing what you want in plain English and letting an AI write, explain and fix the code. The setup is Cursor as the editor, Node.js for a local preview server, and Claude Code installed in Cursor's terminal. Before any build, write a short product requirement document covering overview, tech stack, business details, design and scope, then keep Claude in plan mode until the plan is clear. A v0 template imported with one npx shadcn command gives a polished starting point. Iterate in plain English, restart the dev server when localhost errors, revert when a change breaks things, run a security review for exposed keys, and deploy by pushing to GitHub with Vercel watching the repo.
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:24
01 · Intro
Sets the promise: everything from what vibe coding is to deploying with GitHub and Vercel.
00:24 – 01:20
02 · What is vibe coding
The Shift slide: traditional coding's years-long barrier versus describing what you want and letting AI write and fix the code.
01:20 – 02:12
03 · What is Claude Code
Anthropic's agentic coding tool lives in the terminal; Cursor is used to make the terminal less intimidating.
02:12 – 03:30
04 · Setting up the environment
Download Cursor and Node.js (ARM64 vs x64 on Mac), create an empty project folder, open it in Cursor.
03:30 – 05:10
05 · Cursor UI tour
File explorer, the Claude Code for VS Code extension, editor, terminal (Cmd+J) and the native agent panel.
05:10 – 06:08
06 · Installing Claude Code
Paste the install command from claude.com into Cursor's terminal, type claude, trust the folder, log in.
06:08 – 08:33
07 · Important Claude Code features
Accept edits vs plan mode via Shift+Tab, and the key slash commands: /init, /agents, /clear, /compact, /context.
08:33 – 13:34
08 · The PRD
Start with a landing page, then fill a product requirement document: overview, tech stack, business details, design, scope and notes.
13:34 – 16:43
09 · Initial prompt and plan
Save PRD.md, paste the starter prompt, let Claude research and plan in plan mode, then approve and switch to accept edits.
16:43 – 18:29
10 · Importing a v0 template
Pick a template at v0.app/templates, open it in v0, copy the npx shadcn command and run it in the project.
18:29 – 20:19
11 · Local testing
Claude launches the dev server, works through a startup error itself, and the agency page renders at localhost:3000.
20:19 – 28:10
12 · Iterating with Claude
Add phone and budget fields, hit a localhost error, restart the server, then turn an inline Calendly embed into a popup button.
28:10 – 28:40
13 · Creating CLAUDE.md
Claude skipped CLAUDE.md earlier, so /init generates it with the codebase documentation.
28:40 – 32:12
14 · GitHub and Vercel setup
Create a private repo without README or .gitignore, sign up for Vercel with GitHub, and generate a scoped seven-day token.
32:12 – 34:58
15 · Security review
Back in plan mode, ask for a security review for exposed keys before pushing; /security-review does the same check.
34:58 – 35:58
16 · Deployment
Hand Claude the repo URL and Vercel token; it pushes and deploys and the site loads on its vercel.app URL.
35:58 – 37:01
17 · Outro
Next project should add a login, database or authentication; pitch for the free Skool community.
Lines worth screenshotting.
- Your first Claude Code project should be a landing page, not a SaaS, because you do not yet know enough to steer a complex build.
- Stay in plan mode until Claude has a clear plan; only switch to accept edits when you are ready for it to write files.
- Shift+Tab cycles Claude Code between accept edits, plan mode and the other permission modes.
- A product requirement document is the foundation of every build, even a one-page site; skipping it is how beginner projects fall apart.
- Next.js, v0 and Vercel are all built by the same company, which is why they fit together with the fewest surprises for a beginner.
- A v0 template can be pulled straight into your project with a single npx shadcn command copied from the template's menu.
- When localhost shows an error after a change that Claude says built cleanly, ask it to kill and relaunch the dev server before anything else.
- If a new change breaks a working build and a restart does not fix it, tell Claude to revert to the last working version.
- Claude Code will not always create CLAUDE.md when asked in a prompt; running /init generates it reliably.
- CLAUDE.md is what lets a fresh Claude session weeks later know where the project stands and what is left to do.
- Leave the README and .gitignore boxes unchecked when creating a GitHub repo for an existing project, or the files will conflict.
- Sign up for Vercel with your GitHub account so every push to the repo deploys to the live site automatically.
- Run /security-review before any push to GitHub; an exposed API key in a repo can run up thousands in charges on your accounts.
- Give Vercel access tokens a short expiry, like seven days, and delete them after a demo deploy.
- When Claude asks permission for a command you do not understand, screenshot it and ask another AI whether it is safe.
Plan on paper, build on a template, ship
WHAT TO LEARN
A beginner gets to a live site by writing the plan before Claude writes code, starting from a proven template, and treating every break as something to restart or revert.
02What is vibe coding
- Vibe coding moves your job from writing code to describing what you want, then reviewing and iterating until the result is right.
04Setting up the environment
- Install Cursor, Node.js and Claude Code in that order, then open an empty project folder in Cursor before typing claude in its terminal.
05Cursor UI tour
- Add the Claude Code for VS Code extension in Cursor so the terminal agent and the editor work together instead of side by side.
- Cursor's own agent panel can run a different model next to Claude, which gives you a second opinion on the same codebase.
07Important Claude Code features
- Shift+Tab switches between accept edits and plan mode; stay in plan mode until the plan is clear, then let Claude build.
- Check /context to see how much of the 200,000-token window you have used, and /compact or /clear when a session gets heavy.
08The PRD
- Start with a single landing page; a SaaS needs authentication, databases and judgment you do not have yet on project one.
- Write a PRD with overview, tech stack, business details, design, scope and notes, and save it as PRD.md in markdown.
09Initial prompt and plan
- Paste a starter prompt that tells Claude to read PRD.md and plan, then approve each command it asks to run.
- When a permission prompt looks unfamiliar, ask Claude why it needs it or screenshot it for another AI before saying yes.
10Importing a v0 template
- Browse v0.app/templates, open the one you like in v0, and copy its npx shadcn command into your terminal to import the code.
11Local testing
- Expect startup errors; Claude usually spots a failed dev server or build and fixes it before handing you the localhost link.
12Iterating with Claude
- Describe changes the way you would to a developer, including exact options like budget ranges, then reopen localhost to confirm nothing else broke.
- If localhost errors after a change, have Claude kill and relaunch the dev server, and if that fails, revert to the last working version.
- Be specific about interaction, not just content: an inline Calendly embed and a popup button are different builds.
13Creating CLAUDE.md
- If Claude skipped CLAUDE.md, run /init so the next session starts with the project's structure and status.
14GitHub and Vercel setup
- Create the GitHub repo without a README or .gitignore when your project already has them, or Git will hit file conflicts.
- Sign up for Vercel with the same GitHub account so pushes deploy automatically, and give its access token a short expiry.
15Security review
- Switch to plan mode before deploying and ask for a security review for API keys and secrets; /security-review runs the same check.
- An exposed key in a repo lets strangers run up charges on your accounts, so this check happens on every push, public or private.
16Deployment
- Give Claude the repo URL and Vercel token and it can commit, push and deploy, returning a live vercel.app URL in minutes.
17Outro
- Your next project should add one hard thing, such as login, authentication or a database, rather than jumping straight to a full SaaS.
Terms worth knowing.
- Vibe coding
- Building software by describing what you want in plain English to an AI coding assistant, then reviewing and iterating on what it writes instead of writing the code yourself.
- IDE
- Integrated development environment. An app like Cursor or VS Code that combines a file browser, code editor, terminal and AI chat in one window.
- Node.js
- A JavaScript runtime that lets your computer run a local web server, so you can preview a site at localhost before publishing it.
- PRD
- Product requirement document. A short written spec covering what you are building, the tech stack, business details, design preferences and scope, which the AI reads before planning.
- Plan mode
- A Claude Code mode where the AI discusses and plans the work without editing any files, used to agree on a plan before letting it build.
- Accept edits
- A Claude Code permission mode where the AI is allowed to create and change files in your project as it works.
- CLAUDE.md
- A markdown file in the project root that Claude Code reads at the start of every session to recover context about the codebase and its progress.
- Context window
- The amount of conversation and file content an AI model can hold at once, measured in tokens; Claude Code's /context command shows how much is used.
- v0
- Vercel's AI UI builder, which also hosts a gallery of community templates whose code can be imported into a Next.js project.
- localhost:3000
- The local address where a Next.js development server shows your site on your own computer while you build it.
- .gitignore
- A file listing which project files Git should never upload to the repository, such as secrets and build output.
- Access token
- A generated credential that lets a tool like Claude Code act on your Vercel account; it can be scoped and set to expire.
Things they pointed at.
03:52toolClaude Code for VS Code extension
15:16toolLighthouse audit
24:09toolCalendly
Lines you could clip.
08:42
“Don't go into something super complex and try and build a SaaS product for your first attempt because you don't know what you're doing and that's not going to work out well.”
12:27
“If you put the time into planning things at the start the project will be much more seamless. If you go cowboy mode and you try to do this on a whim, do not expect to get a nice outcome.”
33:13
“The most important thing in this video arguably is this: you must make sure that you don't have any exposed API keys.”
18:59
“Not everything is going to work smoothly, but Claude generally does a pretty good job of managing to debug things on its own.”
16:35
“Really use it as a learning project rather than just letting Claude do its thing.”
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.
metaphor
Vibe coding and cloud code specifically have taken over the low code or no code AI space in the last six months. So what actually is vibe coding? What is cloud code?
How do I run it? What are the best practices? All these different things just tend to be assumed knowledge.
So in this video I'm going to take you through everything from what actually is vibe coding right through to actually building something and deploying it using GitHub and Vercel. So let's start with what actually is vibe coding. Well it's the process of using an AI coding assistant.
to write your code and you describe what you want to build in plain english with text prompts and ai will write the code for you so your job is then to guide it review the code and iterate until you have a functional product which you're happy with traditionally if you want to build an application or a software you would need to know how to code you would need to know functions methods how to debug errors and it took years to become competent and a lot of money which caused this kind of real high barrier to entry and if you didn't have a software development background then it was basically a non -starter vibe coding then came along meaning that the barrier to entry was significantly lowered and you can now describe what you want to build with a text prompt ai will write the code meaning that you can build functional apps in just days and anybody can start as long as you have a laptop and an internet connection you can get this set up which is what we're going to go through today what actually is cloud code well as you can see here it's anthropic's agentic coding tool
it lives on your machine in your terminal and don't worry if you don't know what a terminal is we're going to cover that in a minute and it helps you turn your ideas into code faster than you've ever been able to do before so it's really cool right what is a terminal well this is a terminal now what we're going to be doing when we install cloud code is we're going to be allowing sonnet and opus and claude's models to run here locally in our terminal on our machine and it can write code for us and do loads of cool stuff so if you find this intimidating to look at right you can see here you know it's right so we're going to be using cursor which is an ide or an integrated development environment and it allows us to have this nice user -friendly interface where we can talk to claude and cursor also has a native ai built in so we can have different ai models playing off one another the first thing that we need to do is download cursor now it's completely free so don't worry about any costs head over to cursor .com and download it it takes two seconds once you've done that
we need to head over to nodejs .org slash en slash download i'm going to put all the links down in the description so it's nice and easy for you to navigate now what node .js is it's a javascript runtime and i don't want to go into too much technical detail but it allows us to launch our local server so we can see our code before it's published on the internet if you're not sure what settings to select here then head over to any llm give it your pc make and model and that will confirm which settings you need to select if you're on mac then You're probably going to be running ARM64 unless you're on an older version with an Intel chip, then you'll be x64.
So this is also free, so don't worry about costs. So go ahead and install that just now. Once you've got those both installed, you then need to create an empty folder somewhere on your computer.
I just created a folder here called CodCodeYT on my desktop. So do that and then open up Cursor. And if it's your first time opening Cursor, you're going to need to create an account.
So go ahead and do that. It just takes about 30 seconds and then you're going to click open project. click on that find the file which you just created and then open it up and once you've done that you should then come to a screen that looks like this so let's quickly navigate through the cursor user interface i'm just going to make this bigger so what you see over here on the left hand side is our project this is where we're going to see all of our different files and folders as we start to build out on our project so you can see here we've got buttons to create new files new folders then we have these options at the top now you can see this little squares here, the four squares, that is extensions.
So if you click on this, what I want you to do is I want you to install Clod Code for VS Code. So go and do that just now so that it's done and it's out of the way. That is going to make Clod Code much more seamless for integrating with Cursor.
So that is something you definitely need to do. Now we're going to go back there and in the middle, this is the code editor window. So if we have project files here and we open up one of the files then you're going to see the contents of that file in the editor window in the middle here if you're on mac you can hit command j that's going to open up a new terminal so what you see here this is the terminal and if you wanted to do a different way you could close this down and come up to your navigation bar along the top click on terminal and click new that will open up a new terminal so you can see here all the different terminals that we have open so you can have multiple open at one time if you want to kill one of them off you just click on the little trash can and that will kill it off, all right?
So over on the right -hand side, this is where we have our agent, our Cursor's native AI. So we can connect to different AI models here, and this is where we can have two different AIs . If we were talking to Claude in our terminal, we could be speaking to GPT in the agent window and have the two of them kind of bouncing ideas back and forth, which is really cool.
So we now need to install Claude code, and the way to do that is to head over to claude .com slash product slash claude -code. i'm going to put that link down in the description so you don't need to go hunting around for it copy this command which you see on screen head back over to cursor and we're going to paste that command in the command line there and then that will start to run so that took about 30 seconds there you can see here clod code successfully installed so what one you now do is type in clod in the command line then that should boot up the clod startup process so just hit yes that you trust the files in this folder And that is you now talking to Claude as if you were essentially in Claude .ai.
So if it's your first time, it's going to ask you to log in. And the way you do that is just with your normal Claude credentials. If it doesn't prompt you to log in, then you can just hit forward slash login.
And you're going to see that login command there. You can enter that and then you can enter with your Claude credential from there. So you're now logged in and we can talk to Claude now as if we were talking to Claude in our browser.
So I'm just going to say, hey, Claude. Can you tell me what you can help me with, please? I'm going to send that off.
And you can see Claude's now getting to work. And it's going to come back with a response. You can see Claude's saying here, I'm Claude Code, an interactive CLI tool.
CLI means command line interface for software engineering tasks. And here's what I can help with. So it's working nicely as it should.
Now, there's a couple of things that we need to cover here, which are really important before we go any further. So you can see down here we have our different modes. So right now we're in accept edits.
When you're in accept edits, you're allowing Cloud to actually go to work, write code, create files and do what it needs to do. If you hit shift tab on your keyboard, that is going to allow you to cycle through the different modes. So you can see here plan mode.
This one's really important. This is allowing you to have a conversation with the AI, get clear about what you're building, really flesh things out before you switch back into accept edits for actually going to work. So I suggest you stay in plan mode until you've got a really clear picture about what it is you're building.
Claude has a clear plan and you can take it from there. So that covers that. The next thing we need to mention is slash commands.
If I hit slash on my keyboard, you're going to see a bunch of different slash commands here, which you can scroll through. Some of the main ones, slash init, that's going to create a claude .md file with code -based documentation. We'll cover that again shortly.
If we scroll down, you've got agents. That is going to allow you to create sub -agents, which you can assign to individual tasks. So you can create as many different sub -agents as you want.
You can have an agent for the front end ui design you can have an agent for web search and each of these different agents is going to have a fresh context window so that's really cool then we've got clear to clear the conversation free up context compact if we are approaching our context limit we can compact that session and it's going to really extract the key points compact everything down and kind of reset your context window from there next we have context so this is going to show you how much of your context window you've actually used you can see right now i'm setting at 19 000 tokens out of 200 000 so nine percent we're not too bad and you've got a little visual representation here of where you're at in terms of your context so slash commands are important and there's lots of different ones so i recommend that you really come in here have a look through them all and you can see all of the different things which you can do let's talk about what we're actually going to be building and that is a landing page for my ai agency so i recommend for your first project start with something simple
like a landing page don't go into something super complex and try and build a sas product for your first attempt because you don't know what you're doing and that's not going to work out well so the first thing we need to do before we start any project no matter how basic is we need to create a prd or a product requirement document and i've got this template which you can grab for free inside of my free school community there'll be a link to that down in the description where you're going to get this template for you to fill out along with the initial prompt that we're going to give to claude to actually read this and understand what's going on.
So what needs to be included in a product requirement document? This is quite a basic example. I'll also have a template in the school if you're building something that's a little bit more fleshed out.
So again, you can grab that there in the description. But first of all, we need to give it an overview. What is it we're doing?
So I've got here, I'm building a landing page for my insert niche industry. For me, that's going to be AI agency. I'm going to be using a UI template from V0.
I'll give you the MPX command. from v0 to fetch the component code once you have the ui code we'll test it in a local environment to ensure everything looks good so this is why we downloaded node .js earlier on because we're going to want to run this locally so we can see how everything looks before we publish it to the web and that is what node .js allows us to do launch our local server then we'll customize the styling and copy to match my brand once i'm satisfied with local testing we'll push the code to github and deploy with Vercel And that is a kind of high level overview of everything that we're going to be doing between now and the end of this lesson.
So then we've got the tech stack, and this is really important. We need to outline to Cloud Code what we want the tech stack to be. So you can see here, I've got this kind of pre -filled in for you, which is what I recommend.
However, if you want to change it, then feel free to do so. So the UI template, we're going to be using V0. Now V0 and Next .js, we're using Next .js for the framework.
Next .js and V0 are both built by Vercel. Next .js, v0 and Vercel all work really seamlessly together, which is why I recommend as a beginner, you start with that framework. Version control, we've got GitHub.
So if we publish different versions of our code, we push the GitHub and then we have Vercel monitoring our GitHub repo. So those changes go live automatically, which is really cool. And again, deployment Vercel.
So I recommend sticking with this for your first time. It all works really nicely together. So it's going to play nice.
It's not going to give you... any hardball sort of errors or anything like that then we've got the business details so this is pretty self -explanatory i don't need to go through this too much design preferences this is optional but you can put in your kind of brand you know the color schemes and the different things that you have for your brand your tone all that different stuff you can really kind of flesh that out here project scope so the core pages which we need are the home page that's going to include a hero section a services overview and a call to action Then we've got additional pages if we want those.
So you could have additional pages for your pricing, about section, testimonials, all that different stuff. But for us today, we're just going to be keeping it simple with a one page landing page for hero services and call to action. We'll also have a form in there as well so people can contact us.
No authentication, no database, no complex backend, just a clean professional static site that converts visitors. Notes, keep it simple and fast. mobile responsive clean modern ui design focus on conversion so a clear call to action so you can see here the general framework that we're going through with our product requirement document again if you're building something more complex you need more detail than this this is enough detail for a landing page if you're building something that's a lot deeper then you need more detail in your prd planning things from the beginning of your project right that is setting your foundations everything's going to be built off of that so you need to get that bit right if you put the time into planning things at the start the project will be much more seamless if you and you try to do this on a whim do not expect to get a nice outcome so i'm going to fill this in and then we're going to hop back into cloud code and we're going to give our prd to cloud so i've filled out my prd so what i want you to do is head back into cursor and i want you to come over to the panel on the left hand side here and i want you to click on new file
and that's going to see a new file pop up here and we're going to name this prd .md right so i want you to enter that and you're now going to see your file inside of the editor panel so i'm going to paste in everything which i've copied from you can't drag the file in well you can if it's in the right format but i recommend that you just copy and paste it in the template which i'm giving away is in the correct markdown format which ai likes it's nice and easy for it to understand so i recommend that you ensure that it's marked down format so i've pasted that in there now we need to save it so i'm going to hit command s or another way that you could do that is just to come up to your your bar at the top hit file and then hit save now head back over to the template you're going to copy the initial prompt which i've given you there come back to claude and paste that in there and send that off so claude is now going to read the prd .md file you can see it says let me start by reading the prd and exploring the current state of the project so it's read the file that's all working nicely you can see it's reading it here it's calling some tools so it's kind of going to work there and what it's going to do is it's going to put together a plan for how we're going to execute this project so i asked it to create a cloud .md file in the project files now we touched on what a cloud .md file is earlier on but i'm just going to touch on it again just now so
a cloud .md file gives you context across multiple different sessions so if you were to close this project down and you don't come back to it for a couple weeks when you reboot cloud it's going to read that cloud .md file when you launch so it knows where you're at where everything is what's left to be done and it has context on where things are so that's really important it's just now going to start asking you a bunch of different questions so you can see here it's asking plan design web search it's wanting to search the web to find some different things here so you can hit one to allow it to do that and it's going to get to work you can see we're still in plan mode stay in plan mode until you've got your plan bottomed out and then once everything's good to go you can switch into accept edit so we're going to let this run and once it's got a clear plan we're going to resume from there so you can see here that claude has finished spinning up his plan it's broken things down nicely in individual phases and this all looks good to me you can see each phase broken down
Then it says verification after each phase will verify by running npm run dev. That is the command to launch your local server and check in localhost 3000. That is the URL that we're going to have for our local server as well.
Testing mobile responsiveness and browser dev tools. Before deployment, run Lighthouse audit targeting 95 plus scores and after deployment, verify on production URL and custom domain. so i gave it a domain here in the prd and you can see it's pulled that in so it's going to get us set up all that stuff as well which is awesome so do you want to proceed i'm just going to put yes i do want to proceed and you can see it's changed into accept edits so that is us now letting claude go to work so you can see it's put together a task list here six tasks and it's now going to start asking us a bunch of different things different commands and what you want to do is just proceed all those are safe If you're ever unsure, go to your large language model of choice, whether that's Cursor's native AI, or if you're using Claude, Gemini, ChatGPT, whatever it is, if you're not sure, take a screenshot of what it is that Claude's asking you for permission to do, and just say, hey, this is what Claude's asking me, is this safe?
And yeah, it's generally going to be safe, but always double check if you're unsure. So you can see here, do you want to proceed? You can say yes, and if you're ever unsure about something, ask Claude to explain it in a little bit more detail, right?
if you're not sure just say hey can you explain to me why it is you want to do that and it will tell you and really use it as a learning project rather than just letting claude do his thing okay so claude has been taken away in the background and it's not asking me for the command for the v0 template so that brings us on to our next area of this build which is important templates from v0 so as i mentioned earlier on for cell who will be using to deploy our landing page to the web also own v0 which is a great tool which has loads of really nice templates which you can choose from and you can import the code for these templates straight into your project so what i want you to do is come over to v0 .app forward slash templates and pick a template that you like i'm going to be using this one i think this one's really cool so you can click on view details and that'll open it up and you can see what it's going to look like so let's let this load so you can see here we've got a really nice animation
scroll down it's nice and dynamic selected work loads of different cool fields here and we can really play around with this once we've got it loaded into our project so what i want you to do is you might see a button up the top which says open in v0 and that's what you're going to want to click if that doesn't open for whatever reason you can also click on this little open a new tab button and when you click that you should then see the open in v0 button here so click on that that is going to open it up Once that loads up, I want you to click on this three dots here, and you're going to see this command, npx shadcn, and then it's going to have a URL.
So I want you to copy this command. I want you to head back over to your project. I want you to paste that in there in the command line.
Enter that, and then Cloud is going to get to work for importing all of the code into your project. If it has any questions, you can see here, fetch v0 component template. So yeah, we can say that's fine, and just let it go and do its thing.
So it's now asking us if we want to launch our local server. So we're going to hit yes to accept that. And then it should launch local host where we can view and make sure everything's looking good and working nicely.
So let's just see if that launches our local server in a second. So it says it's getting a 200 error from the dev server and that's fine. So we don't need to worry about that.
If you get an error, that's fine. These things happen. So it's going to check to see if there's any build errors by running a production build.
So that's fine. We can accept that and just let it go to work. And this brings us on to an important point.
Not everything is going to work smoothly, but Claude generally does a pretty good job of managing to debug things on its own. So that just took it a couple of minutes and it's now seen that the dev server is running at localhost 3000. So take a look and let me know what you think.
When you're ready, we can set up the GitHub repo and push. So let's have a look at this localhost. So if you hit command and click, then that's going to open it up.
And you can now see here.
Fraser AI, AI Automation Agency. We build intelligent automation solutions that save your team 100 plus hours every week from custom AI agents to automated marketing. So we can change all this copy and stuff as well.
You can see we've got this lovely animated stuff. It's put in some nice icons for each of the different services that we offer. It's got the colors right.
I asked for it to be vote yellow and purple in the PRD. And this looks really clean, right? for a first attempt i think this is really good it's got the contact form in there as well let's talk name email company message book a strategy call so there's lots of different things we could do we could embed calendly in here so that they could automatically go and pick a time in my calendar lots of different options but the main thing is as it's working it's looking good so what i want to do is i just want to show you how we can iterate with cloud to change things if we're not quite happy with them so let's say we wanted to change the copy here on the hero section or let's say we wanted to i don't know add an additional field to the form let's do that let's add an additional field to the contact form so i'm just going to close this down and i'm just going to say here hey claude just took a look at localhost there i think the website is looking really clean i'm really happy with the design i just wanted to add an additional couple of
sections to the contact form so first of all we definitely need a field for a mobile number or a contact number and we also need a drop down where they can select their budget so the options should be 0 to 5k 5 to 10k 10k to 20k or 20k plus so i'd like you to add in those four options as a drop down field and also add in a contact field for the phone number so let's just make sure that's all looking good yeah that all looks fine so i'm going to send that off we'll just let cloud go to work once it's completed those changes we're going to open localhost back up again make sure it's made those changes correctly and make sure more importantly that it hasn't broken anything else because that can happen it said it's made those changes for us so we're just going to hit scroll back up we're going to go back to localhost open that up again and you see we've got an error so let's see what what's happened there we're just going to go back and say i've got an error from localhost can you take a look and it's going to go back and check what changes it made because it knew it now knows it was working it's made some changes it's now not working so if it's localhost to see any error yep that's fine let it go ahead and do that
so saying the server runs with 200 okay valid html it's likely a client -side runtime error let me run a fresh build to catch any issues so that's fine we'll just let it do that the same build passes cleanly no typescript or compilation errors it's asking us to check what's going on so it says can you tell me what the error message says it would usually show as a red overlay on the page or in the browser developer console so let's just scroll back up and open up localhost again Now seeing here Browser enter URL Enter that So it's still not quite getting it right so what I'm gonna tell it to do is I'm just gonna say Claude can you kill the dev server please and relaunch and send me the URL once you've done that So I'm gonna send that off And hopefully it's just going to kill that off and send me a new URL.
I wonder if it's maybe like a catching issue. So I'm just going to accept that. Hopefully when it relaunches, it's going to be all okay and free of errors.
But if not, then it's not a problem. We're just going to tell it to revert the changes that it made because we know it was working right. So the fact that we've added some things and that's what's broke it, we know.
We know that that's what's broke it. So what we're going to do is... I'm just going to click on this.
And there we go. So I've opened it up. It's working nicely.
What we do, this is all looking good. The impact, this is all still working fine. Let's talk.
You can see here we now have phone number and we have budget. 0 to 5K, 5 to 10, 10 to 20 or 20 plus. So that is all working beautifully.
What I want to do is I also want to add in my Calendly to this button here. So we want this to redirect to my Calendly URL so that they can book a time into my calendar if somebody wants to book a strategy call. So let's do that just now.
So I'm going to close that down and I'm just going to open up the terminal again.
Hey Claude, yeah, that's working nicely now. I can see the changes which you implemented. They're perfect.
Looks great. What I want to do is I want to embed my Calendly link so that prospects can actually book a time right into my calendar from the contact form. So let's set that up just now.
Let me know what you need from me. I can give you my Calendly URL and I want you to get to work on that.
So we'll send that off and you can see how easy it is to make changes. If something isn't quite right, just tell COD to fix it. If you get an error, then don't worry about it.
you know there's a number of different things if it's something to do with the local host what i would suggest is that first of all you try telling claude to kill the server and relaunch it if it's made changes it might just be a catching issue so that would be my first port of call if you're if the issue is persistent then you can just tell claude to strip back and revert to the old original version which was working right so let's see what's your calendar link I'll get it embedded right away.
I just went and grabbed my calendar link, so I'm just going to paste that in there. So it's saying it's taking care of that, so let's just open this up.
Close that down. Let's see if it's taking care of it nicely. So you can see here it's got the book a strategy call.
It's got the calendar here. I can click a day. I can click a time.
So that's how it looks like it's working nicely. Then you can enter your details. This isn't quite what I was after though.
I was more thinking of a pop -up where somebody could, there's maybe a separate button or something because I still want to have the contact form where somebody can send this off as a contact that'll come to my email. But I do want a separate button here. I don't like how this looks when it says book a strategy call.
I'd prefer this was a button that then had a pop -up that took you to the form. So that's what we're going to do. We're just going to close this down and I'm just going to say, Hi Claude, I've just taken a look at that there.
It's not quite what I was looking for. I don't want it to be embedded on the site. I want it to be a button which can be clicked where the Calendly then pops up.
So I want you to turn the book a strategy call into a button where somebody can then click on it and then that opens up a pop -up with the Calendly widget. Send that off. Now I did notice here in the files that it didn't create the Claude .md file.
remember back we talked about that earlier on it should have created a cloud .md file but it hasn't done that so that's okay once it's once it's got this changes sorted we're going to make sure that it creates that cloud .md file and again that's going to give us perfect context across multiple sessions so let's just let this run and we're just going to make sure that everything works good and then we're going to make sure that we have that cloud .md file in the project directory So you can see that it's done.
Here's what it's changed. Now, I like this here. It's also, I didn't ask it to do this, but it's also linked the hero section call to action and the navbar call to action to also open up that calendar pop -up.
So let's open this up and see how it's looking. So first of all, let's test the book a strategy call. You can see here that's opened up the calendar.
So that's good. Much better. Same with this.
two out of three so hopefully it's nailed it at the bottom yeah this is great this looks really good really clean so i'm really happy with that so let's just go back out here and let's sort that clod md file issue so there's two ways you can do this you can just tell clod to create a clod .md file or you can use slash command slash init you can see here initialize a new clod .md file with codebase documentation so we're going to do that so you can see here that cloud has created that cloud .md file for us it saved it in the project files which is perfect and it says created cloud .md with key information a future cloud code instance would need so that's all worked great now what we need to do is take our code base which is living on our computer locally and we need to put it somewhere so that we can then deploy it to the web and what we use for that is github and i'm sure you've heard of github they've been around for a long long time and it's kind of the industry standard everybody uses it so what we need to do firstly is we need to create a github account so if you've not got a github account go ahead and create one it's free it's not going to cost you any money and once you've done that i want you to then click this green button here to create a new repository and that repository is going to be where we dump all of our code so it's all in one place so click on new we're going to fill this in here so i'm just going to call this youtube
demo cloud code description cloud code youtube demo landing page you've then got some options here so you can have public or private i'm going to make my private add readme you can leave this off if you check your project files which again you're going to see here on the left hand side you will probably have a readme file already in your project file so if you already have that there then if you create one in your repository that's going to cause a conflict because it's essentially going to realize that you've already got one and it's going to already have a file in the project with that name so you're going to get a conflict there so leave that off and the same with gitignore you can see we've got a gitignore file in our project already now what is gitignore well that essentially just tells github which files in the project it needs to ignore so if you want a more detailed breakdown on all of the different files what they mean and how they all kind of are pulled together in terms of the framework then you can get all that information inside of my free school community this stuff is important if you're wanting to build more advanced apps and sas products for building a simple landing page you don't really need to understand file structure and stuff but if you're wanting to build more advanced products then you really do need to understand what all of these different files and folders do
what they mean and how they all interact with each other so again you can get all that information inside of my free school and the link will be down in the description so we'll create a repository you don't need to click on license you can leave that as no license click create repository when you get to the screen just leave this up here don't do anything else with that now what i want you to do is come over to versell .com and i want you to create an account but this is what's really important this part is key you need to create your Vercel account with your GitHub credentials because that is how it's going to create the link between GitHub and Vercel so that if you publish a new version of your code, it will automatically get deployed to Vercel and onto the web.
So that's really important. Make sure that it's the same credentials that you're using when you make that connection. So once you've done that, what I want you to do is come up to you up in the top right.
You're going to click on your little icon here. I want you to go to account settings. from there i want you to go to tokens down at the bottom and i want you to create a new token so i'm just going to call this one clod code youtube demo select the scope i'm going to give it full account scope and you can select an expiration i'm just going to make this one seven days and i want you to click create leave this up don't close it don't copy it don't close it down i just want you to leave this up i want you to come back over to your clod code instance and change from accept edits back into plan mode so you see this down here so shift and tab on your keyboard to cycle between the different modes as we covered earlier back into plan mode and i want you to put in this prompt hey claude we're now going to be deploying our code base so first of all we need to push it to github and then we're going to deploy with for sale i can give you my github repo link and also my for sale token so that you have everything you need but before we do that i want you to do a security review
of all the code base and make sure that nothing is going to be exposed make sure there's no api keys or secrets anywhere that there shouldn't be once you've done that put together an implementation plan for the deployment so there we go want to put in this now this is really important now for us here we're not going to have any exposed secrets no exposed api keys because we're not using any apis there's no web hook links there's nothing here that's going to be you know exposed when we push it to github but this is extremely important the most important thing in this video arguably is this when you're pushing code to github especially if it's a public repository but in any case then you must make sure that you don't have any exposed api keys that is a huge no -no if you do have anything exposed then people can run up bills thousands and thousands and thousands of pounds on your accounts but by having your api keys so you need to make sure that you do this step and there is a slash command for this which i'll show you in a second but just make sure that your code base is clean there's no exposed keys or secrets and once you've done that you can proceed with your plan for implementation and deployment so we're going to send that off and it's going to put together a plan for how we actually go from having this code locally in our cloud code instance to actually getting out onto the web so
We're going to let this run. So you can see here it's saying that the security review was passed. No issues found.
No hard -coded secrets. No .env files. .getignore.
All that kind of stuff is all good. So that's all fine. Step one, GitHub commit and push.
So this is breaking down each step and how it's going to do it. So that's fine. We're just going to hit yes.
That's fine and they can proceed. I mentioned a slash command for your security review and it is just security review. So if you enter that, then that's going to make sure that you've got no.
exposed keys in your code. Claude's now asking for our GitHub URL. So I want you to come back over here and you're going to copy this URL.
Head back over to GitHub. There we go. I'll type it in.
Yeah, that's fine. Submit answers. So get rid of that.
So first of all, GitHub repo URL. So we're going to send that and then we'll come back over to Purcell. Copy your token.
Don't worry, I'm going to delete these later so they're not out there. um online i'm going to enter those and i'm actually just going to clarify there which uh what this is silver cell token paste send that off and it's going to let us know if it needs anything else so i'm going to let this run so it says that the deployment was successful you can see deployment succeeded all done here's the summary and it's given us the url so what i want you to do is copy this url and head over to our browser moment of truth and there you have it so you've just vibe coded your first project now whilst this was really simple it's just a landing page and we used a v0 template which by the way i think this looks amazing to be honest i'm actually considering making this my actual agency website um over what i'm using at the minute so we did this in a really short amount of time and again you could spend hours customizing this and having it the exact way that you want it and that's what i would do if i was putting this
live and using it for myself I would spend a bit of time I'd change the logo make sure everything's nice and tidy but everything you've learned today is super repeatable and what I would do or what I would suggest is that for your next project you maybe just add a little bit more complexity you might want to add a login screen you know then you're dealing with authentication you're dealing with databases all these things which are really important if you then want to progress into building full -on SaaS products and apps so I hope you enjoyed the video today and I hope you learned a thing or two as well And if you want to go much deeper into this whole landscape of building products, SaaS, apps, you know, file structures, databases, authentication, all this different stuff, you can join my free school community where you'll get one -to -one support from me as well.
We also have NEN resources in there, Google resources, lots of cool stuff. So it'd be great to have you in there and the link will be in the description. So thanks for watching and we'll see you in the next one.
The Hook
The bait, then the rug-pull.
The promise is in the subtitle: installation to deployment, nothing assumed. Over 37 minutes the video goes from an empty desktop folder to a dark, animated agency landing page live on a vercel.app URL, and it keeps the moments where Claude breaks the contact form and has to be talked back into a working state.
Named ideas worth stealing.
09:09list
The PRD template
- Overview
- Tech stack
- Business details
- Design preferences
- Project scope
- Notes
A one-page markdown spec handed to Claude before any code: what you are building and the build steps, the stack (v0, Next.js, GitHub, Vercel), business name, domain and services, brand colors and tone, which pages and sections, and constraints like no auth, no database, mobile responsive.
Steal forkicking off any Claude Code project, including client builds
10:05list
The beginner stack
- v0 for the UI template
- Next.js for the framework
- GitHub for version control
- Vercel for deployment
Four tools chosen because three of them come from the same company and the fourth is the deploy trigger, so a push to GitHub goes live automatically with few integration errors.
Steal fora default stack recommendation for non-technical builders
25:07list
The localhost recovery ladder
- Tell Claude the error and let it diagnose
- Ask it to kill the dev server and relaunch
- If it persists, tell it to revert to the last working version
A three-step escalation for when a change breaks the local preview, built on the fact that you know the last version worked.
Steal forteaching non-coders to debug without reading code
06:44concept
Plan mode, then accept edits
Use plan mode to talk through what you are building until Claude has a clear plan, then switch to accept edits so it can create files. Switch back to plan mode before risky steps like deployment.
Steal forany onboarding to Claude Code
How they asked for the click.
VERBAL ASK
36:38link
“You can join my free school community where you'll get one-to-one support from me as well.”
Soft, repeated throughout: the PRD template and file-structure explainer are both parked in the free Skool group, so the community is pitched as the place the missing pieces live. A consulting link (leadhook.co) sits only in the description.
MENTIONED ON CAMERA
Visual structure at a glance.
