WEBVTT 00:00:00.000 --> 00:00:16.825 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, 00:00:16.905 --> 00:01:01.500 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 00:01:01.660 --> 00:02:14.005 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 00:02:14.245 --> 00:02:23.900 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. 00:02:24.220 --> 00:02:38.145 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 00:02:38.465 --> 00:02:39.265 SaaS 00:02:39.665 --> 00:02:50.180 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 00:02:50.180 --> 00:03:02.455 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. 00:03:02.615 --> 00:03:07.655 And now, I'm gonna need to grab this URL here. This is what we're gonna use to 00:03:07.815 --> 00:03:21.210 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 00:03:21.530 --> 00:03:46.720 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 00:03:46.720 --> 00:03:47.360 clone. 00:03:47.760 --> 00:04:01.905 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 00:04:02.465 --> 00:04:05.905 folder here which is going to be the HeyGen 00:04:05.985 --> 00:04:06.705 SaaS. 00:04:06.865 --> 00:04:47.030 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 00:04:47.030 --> 00:05:36.495 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 00:05:36.735 --> 00:06:10.175 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. 00:06:11.560 --> 00:07:05.005 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 00:07:05.245 --> 00:08:29.695 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. 00:08:30.095 --> 00:08:42.780 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 00:08:43.020 --> 00:09:05.260 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 00:09:06.220 --> 00:09:07.740 called the HeyGen 00:09:09.260 --> 00:09:10.060 SaaS 00:09:10.540 --> 00:09:11.260 startup. 00:09:11.340 --> 00:09:34.710 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, 00:09:35.830 --> 00:09:37.670 it's gonna ask us if I want to 00:09:38.310 --> 00:09:41.190 use that MCP. And now if I type MCP, 00:09:41.350 --> 00:09:45.345 we can see that I have the MCP now. It needs authentication. 00:09:45.985 --> 00:09:47.905 So I'm gonna go ahead and authenticate. 00:09:47.905 --> 00:09:54.305 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, 00:09:55.580 --> 00:10:18.485 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 00:10:18.805 --> 00:10:19.685 authentication 00:10:19.845 --> 00:10:22.725 and then we're gonna come down here to URL configuration. 00:10:22.725 --> 00:10:43.255 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, 00:10:43.575 --> 00:10:48.375 which is the same from the instructions. We're just gonna add slash auth callback. 00:10:49.495 --> 00:11:06.645 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. 00:11:06.645 --> 00:11:14.565 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, 00:11:14.805 --> 00:11:29.570 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, 00:11:29.570 --> 00:11:40.325 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. 00:11:40.565 --> 00:11:48.700 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 00:11:48.860 --> 00:11:51.580 to go into plan mode, going to paste 00:11:51.820 --> 00:11:53.100 that entire prompt 00:11:53.820 --> 00:12:23.760 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. 00:12:25.585 --> 00:12:35.745 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. 00:12:35.745 --> 00:13:13.820 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, 00:13:13.980 --> 00:13:22.195 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. 00:13:22.435 --> 00:13:33.715 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 00:13:33.980 --> 00:13:57.425 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, 00:13:57.425 --> 00:14:21.955 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. 00:14:22.115 --> 00:15:15.430 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 00:15:15.835 --> 00:15:16.875 or dev. 00:15:17.355 --> 00:15:22.395 Now you can only have one dev running on any given port. So if you remember back in Supabase, 00:15:22.395 --> 00:15:34.540 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, 00:15:34.540 --> 00:15:45.260 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. 00:15:47.715 --> 00:16:00.595 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. 00:16:01.050 --> 00:16:08.250 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, 00:16:08.250 --> 00:16:10.890 we go over to the authentication 00:16:11.450 --> 00:16:18.225 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. 00:16:23.105 --> 00:16:24.625 Alright. Reset password. 00:16:25.985 --> 00:16:56.695 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 00:16:57.175 --> 00:16:59.415 and I do an l s, I look at all the files here. 00:17:00.190 --> 00:17:04.830 L s dash l a will show me in a long format. So l makes it long. 00:17:05.150 --> 00:17:12.030 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? 00:17:12.625 --> 00:17:21.585 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 00:17:21.825 --> 00:17:34.770 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. 00:17:35.170 --> 00:17:55.355 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 00:17:55.435 --> 00:17:57.595 dash m first commit. 00:17:59.170 --> 00:18:00.850 So now if we do a git status, 00:18:01.090 --> 00:18:07.010 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 00:18:07.010 --> 00:18:13.490 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 00:18:13.835 --> 00:18:14.715 password. 00:18:14.955 --> 00:18:26.875 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 00:18:27.550 --> 00:19:13.775 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 00:19:14.175 --> 00:19:18.495 version of that. Right? So we're gonna search for our HeyGen 00:19:19.055 --> 00:19:28.050 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. 00:19:31.410 --> 00:19:46.595 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. 00:19:46.595 --> 00:19:56.320 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. 00:19:59.120 --> 00:20:05.760 Add more. Yeah. You can import an environment variable file. That's probably easier, but I already started doing this way. 00:20:11.385 --> 00:20:44.205 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 00:20:44.685 --> 00:20:47.165 Claude here, update the 00:20:47.485 --> 00:20:49.565 main page 00:20:49.040 --> 00:20:50.480 title from 00:20:51.680 --> 00:20:52.480 to 00:20:53.280 --> 00:20:54.080 easily 00:20:54.160 --> 00:20:55.200 deploy 00:20:55.840 --> 00:20:56.880 or easily 00:20:57.520 --> 00:20:58.240 create 00:20:58.400 --> 00:20:59.840 AI videos 00:20:59.920 --> 00:21:01.360 for social 00:21:01.440 --> 00:21:02.080 media, 00:21:02.320 --> 00:21:03.200 something like that. 00:21:04.195 --> 00:21:19.315 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 00:21:19.710 --> 00:21:25.870 add and we'll just do dot git status. We're gonna see that's stage now and we'll do a git commit 00:21:26.430 --> 00:21:27.310 updated 00:21:27.630 --> 00:21:29.310 homepage title, 00:21:29.630 --> 00:21:44.075 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. 00:21:44.075 --> 00:22:06.514 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.