Build a SaaS app with Claude Code

Hey there, my name is Julian and if you’re watching this video, you’ve probably heard all of the hype about Claude Code and you want to get to using it yourself. Well, guess what? I have made a boilerplate that is going to make it super easy for you to actually get building something that you can truly launch using Cloud Code. So, I’ve been using Claude Code for about a week now. I’ve been using Cursor for like as long as Cursor’s been around. Uh, I love vibe coding. I love building stuff. I’m like kind of a developer, not really a developer. So, you are going to get this from someone who understands you. I’m

not an expert developer who thinks you’re just going to understand all of this stuff. So, if that’s the boat you’re in, then this video is for you. And what I did here is I made a boilerplate. If you don’t know what a boilerplate is, it is essentially a template that gets you everything that you need, but it’s not like a plug-and-play template for a business. It’s just like all of your framework. So, I find the hardest thing to do when you’re vibe coding a project is to actually set up all of the infrastructure and get your project running. It’s not the actual features. It’s to make it something that exists.

If you don’t understand development, it’s pretty difficult. So, this is going to help you a lot with that and so is this video. Without further ado, let’s get right into it. So, first things first, you are going to need a couple of things. You’re going to need Claude Code installed. You’re going to need a GitHub account. You’re going to need a Verscell account. You’re going to need VS Code, some kind of code editor. And uh that should be about it. Now, I might have realized something later on in this video. We’ll get to that when uh when we come to it. So, first things first, just

go ahead and open a folder where you keep your projects and start a new terminal in that folder. And as we can see over here, and if I didn’t mention, link to this GitHub repo is in the description. uh go ahead and copy this command which is get clone that and then cd my app. So this right here is going to create a folder called my app. Don’t worry, you can just change this after. So as we can see here, it has created a folder called my app with all of this

code in it. So now let’s go ahead and open that folder. Find that a lot easier. So let’s go ahead and open that folder right there. As we can see that is where we are. Get away copilot. Nobody wants you. and new terminal. All right, so now we are in my app and we’ve started a new terminal. The next thing we’re going to want to do is run npm install. So I have weird like permissions issues with this. So I have to do this. You could just try npm install. If it works, great. If it doesn’t, then do pseudo npm install.

Just like that. It’s going to ask for your password. Enter that in. Let it do its thing. It’s basically just installing all of the necessary packages, dependencies, all that fun stuff in order to make this work. So, all right, found zero vulnerabilities. Wonderful. And then we’re going to do npm run setup. All right. So, just like that, it is going to ask if we want to open members stack in our browser. Let’s go ahead and hit yes. Do already have Memberstack open. Let’s close that. And then what I’m going to go ahead and do is make a

new app. I’m going to call this my app for and I’m going to do other. So there we go. And now we’re going to go to dev tools and we’re going to copy this public key and we’re going to paste that into the setup wizard. So it’s going to do that. And now it has been set up. So the next thing that we’re going to do in order to make sure is I’m going to go here and I’m just going to make a new terminal and open up cloud code. So I’m going to say Claude. As we can see, Claude code has been opened.

And I’m actually going to go ahead and make a new plan. And it’s just going to be a free plan. Let’s just call it like gated. H let’s just call this like special members or something like that and see if it can find this plan. Okay, so plan was successfully created. Uh I’m going to go ahead and say what plans do I have in Memberstack can you check? Now, one of the things about this uh this boiler plate is I did my best to set it up so that it has full

knowledge of how Memberstack works so that it can find everything in your system. Uh sometimes it just might not and you might have to like kind of wrangle it a little bit, but it should be pretty good for the most part. So, as we can see, it wants to fetch something. Usually, you’re just going to want to read that and make sure it doesn’t raise any red flags, you know, anything that Claude is doing. Um usually, I find it it doesn’t and it’s quite good. Um, okay. Yes, the local server isn’t running, right? I didn’t even listen to my own steps. The next thing you’re

supposed to do is rundev. So, let’s go ahead and run dev. Just like that. And then it should be able to figure out that we have this special members plan. If it does, that means it has access to your Memberstack. It knows what’s going on and everything has been set up as it needs to be. If it isn’t for whatever reason, then just go ahead and ask Claude a thousand questions until eventually Claude figures out why it isn’t working as it’s supposed to be. Okay. So, if Claude just gets stuck like this sometimes, you’re going to want to

just hit escape and just say like, "Continue. What are you doing, buddy? You drunk or something?" All right. So, continue. Let’s check your Memberstack plans. Great. Okay. Let’s see if it can figure out. Okay, success. True. That’s something I like to hear. Give that a minute to load. And we can see special members. There we go. We have special members. All right. So, that means that this is connected to Memberstack. So, let’s go ahead and open uh localhost

3000 because we are now running dev. And as we can see, this is here. This is working. Um, now if you see this in the bottom corner, I’ve never seen this before. I don’t know why it’s popping up, but just to show you. All you need to do is copy that. There you go. That’s what I meant to do. That copy button. And I’m just going to say, why am I getting this error? And then Claude will help you troubleshoot it. So, all right. Let’s see if it can figure something out.

All right. Look at that. Look at that. He went away. He went away. Okay. Yes. Go for it. Kill dev and rerun dev. Claude sometimes hallucinates when it comes to the dev server, but alas, here we are. It works. So, let’s go ahead and test this now and just see if it’s working. Let’s do sign up. And let’s just say julianappme.com. Password Julian1234. And let’s hit create account. Julianme.com. Member ID. There we go. That is great news. So,

let’s go ahead and check our member site dashboard to see if that is actually the case. Beautiful. Now, let’s try something else. Let’s go ahead and sign out here. And I’m going to say, can you make it so the special members plan gets added to members when they sign up using this sign up form on the main page. All right, let’s go ahead and see if

that works. Let’s actually go ahead and sign in with Google and see if this works. So, let’s go ahead and do my Memberstack email right over here. As we can see, it says we’re signed in. Let’s go. Doesn’t seem to have added the plan to us for some reason. Let’s go ahead and try to see why that is. Let’s go ahead and say julian@meimi.com. Julian1234. Oh, whoops. That’s a sign in. Sign up.

That may have been the pro. Okay, there’s no valid plan with this identifier connected to the app. Why is that? Okay, so let’s go to our plans over here. Let’s actually expand this a little bit to make our lives easier. Install and publish. This is our plan ID. So, I’m going to say to Claude, this is our plan ID and let’s send it the error that we’re getting. There’s no valid plan with this identifier. That seems like a Memberstack error. So, getting this error, not

as in it’s a problem with Memberstack, but as in it’s an error that came from Memberstack. So, seems like Claude just didn’t figure out the correct plan ID. So, let’s see what it is doing. Okay. So, I don’t know why it thinks this. There’s no such thing as an inactive Memberstack plan. Use the correct ID. Sometimes you just got to just tell it what you need. Just tell it what you

need. There you go. I know I’m right. Okay. So, let’s see if it is going to figure this out. Oh, it’s talking about no active. Okay. Uh, no active plans means the member has no active plan. refer to the Memberstack DOM package documentation to understand how to add this to a

member when they sign up. Okay, try signing up now. It should work. Let’s refresh. Let’s give it a go. Okay, getting that error again, but whatever. Count. Okay, so it created an account now and I didn’t get that error. So let’s see if it added the plan. Let’s refresh here in Memberstack and see. Okay, we got to turn on test mode. There we go. Okay, so special members was

added. We are making progress. All right, now let’s actually build our app. So from this point on, what we’re doing is actually making this app. So what do we want it to be? Let’s go ahead and make it a currency conversion dashboard. So let’s make our prompt. Hey Claude, so I want to make this a beautiful currency conversion dashboard app. When people sign up, they should be redirected to >> actually, you know what? Uh currency conversion is something that probably needs an API. For the sake of this video, I don’t want to do that. So I’m

going to say let’s instead make it a mortgage calculator dashboard. So we don’t need to use any APIs. All right, let’s see that. Now, I actually used quad code to make a mortgage calculator pretty recently. Um, so that is something that I know it can definitely do. All righty. So, its plan has been made. Let’s go ahead and check it out. Let’s do a quick skim through it. So, transform the existing dashboard

into a mortgage calculator with multiple calculators. Modify signup to redirect to slashdashboard. Looks good. Principal and interest calculator. Sounds like what I want. Visual pie chart. All looks good to me. I’m just going to say no keep planning and just say make sure you only use shad CN components because if it doesn’t then honestly this is all going to look like CRUD because

AI by default doesn’t seem like it’s a very good uh UI designer UX designer right now. So I’m just going to say only use shad CN components. Hopefully, it’s going to listen to that, readjust its plan to only use Shad CN components, and then we are going to be in a good spot. Yes, Shaden components. I see the mentioned. Let’s get it. Now, we wait. All right. Yep, I definitely want that.

Okay. So, it seemed to have a problem. Let’s go ahead and say, "What do you need me to run with pseudo?" And then I’m going to go ahead and do that in a new terminal because it’s just kind of running around like a chicken with its head cut off. Uh, so there we go. Installing dependencies, created files. Okay. So now let’s see if we can go back. All right, I just did that. Continue.

All right, looks like it’s done. Let’s go ahead and let it do its thing and see how it’s working. So, it just did a bunch of work. I wouldn’t be surprised if there were some errors, but let’s go ahead and hope that there aren’t. All righty. So, let’s go ahead and test it. Let’s hit sign out and then let’s make a new account. Create account. Okay, so it seems to have taken us here. Plan upgrade required. Interesting. Interesting. I wonder why it’s doing

that. Let’s go ahead and check out dashboard. Okay, so it’s saying plan upgrade required. Maybe. Okay, I’m going to say why is it saying plan upgrade required? I have the special members plan and I’m going to hit it on plan mode. Whenever it’s something where Claude kind of needs to do a bit more thinking, I recommend running plan mode first and then doing it based off that plan. If you just have a simple thing like change X to Z, then I mean doesn’t really need

to plan out all that much. All righty. So, it says it is done. Let’s go ahead and find out if that’s true. So, I’m going to refresh here. And all right, hold on. Let me run dev. npm rundev. Says poor 3000 is in use. That’s weird, but okay. Don’t really care. Let’s see if 30001 works. Okay, let’s do sign up. And again, let’s make some bogus account. Test if it is working. create account. There you go. Okay, look at that. Just like that. Look how beautiful this mortgage calculator is. I’m going to

just pull this open for the thumbnails right here to be honest with you. Take a look at how freaking awesome that is. We got this beautiful slider. It changes the down payment. Look at that. So then I can adjust this down payment. We can see the mortgage payment, monthly payment over here. Affordability calculator overview. Look at that. Analytics profile. It just added all of this stuff. Again, this is the beauty of Shad CN. This right here is why it’s so freaking awesome. So, anyways, I’m not going to go ahead and just like make some crazy mortgage calculator cuz I

already did that actually. If you want to check it out, go to what does my mortgage cost.com. I already have that. So, yeah, if you want to know what your mortgage cost, go to that site. Anyways, besides the point, um, this right here, what I want to do now is I want to show you how we can actually get this live on the internet so that people can use it. And for that, like I said, you are going to need to have GitHub and you are going to need to have Versel. So, first thing we’re going to do is we’re going to go to GitHub and I’m going to make a new repository. And I’m just going to call this my app 4. My app 4. Just like that.

Let’s go ahead and make it private. Let’s create repository. And let’s copy this right over here. And then we’re going to pop open Cloud Code again. So, I’m going to say I just made a new GitHub repo at this. Can you add this project into the repo? There you go. All right. So, we’re going to let it do that. All right. So, it says it’s done. Let’s

go ahead and refresh this here on GitHub and see if that is true. And just like that, look at that. We have all of our code. So the next thing we’re going to want to do is go to Verscell and this is what we’re going to use to actually get it live on the internet. So as you can see here, if you click add new project in Verscell, which is hooked up to GitHub, then we already have my app 4, just like that. So let’s go ahead and hit import. The next thing you’re going to want to do is environment variables. So there’s only one you’re going to need to add, which is very simple. So let’s go down here to see what that is. As you

can see, next public Memberstack key. Let’s go ahead and copy that and let’s paste that in there. And then let’s go back into Memberstack, go back to our dev tools, and let’s get that public key. So, we’re going to paste that in. We’re going to hit deploy. And we’re going to wait again. All right. So, it says we are deployed. Let’s go ahead and hit continue to dashboard. And then let’s go ahead and

open her up. Okay, domains my app for gray. As you can see, everything is looking good. That little off helper is no longer there. We don’t want it to be there right now. And let’s go ahead and again just make some bogus account. See if everything is working as it should be working. So, create account. And there’s this little screen right here redirecting, but whatever. Anyways, so as we can see now, it shows we’re on the special members plan. We have a beautiful mortgage calculator, affordability calculator, whatever you want to call it. We’re live on the

internet. We’re all done here, right? No, we’re not done. There is one other thing that I would really like to show you. So, I’m going to go ahead and pop this open here again. Okay, so dev is still running. And what I want to show you is how you actually go ahead and work on this. So, there might be a better way to do this, but this works for me. And again, I have launched a live project using this exact flow. So, I think it’s pretty good. So, I’m going to go ahead and say, can you change my theme to be green? So, let’s say I think I want green. I’m going to go ahead and

tell it, hey, make my theme green. Make everything green because I just totally love green. Right? So, it’s going to do that. And what I want to show you here is how I can now make it green. And let’s say I’m like, "Oh, damn. I don’t like this. I want to revert back." I’m going to show you how you can revert back. Um, and then I’m going to show you how you can push your changes to officially go live. And, uh, yeah. So that should basically all in all my goal hopefully was met which is by the end of this video you are going to be able to

build and manage production applications using cloud code and Memberstack. So as you can see this is all changing it to green and honestly this actually looks way better. So what I’m going to do here actually you know what it is beautiful. So I’m going to say this beautiful sentence push to main push to main. And now what it’s going to do is it is going to push this live. This is like let’s say hitting the publish button in Webflow for example. And what you want to do is while you’re waiting for that, go to your deployments

and just sit here and wait um because it’s going to do its thing and you might run into an error. Now the beautiful thing is if something is broken, now this isn’t always the case. Don’t just push to main without testing. You should definitely test. But usually if something is broken and you try to push it to main, Verscell is going to figure that out and then it’s actually going to stop it and just say there was an error. No, we’re still showing your last, you know, version to people, which is super helpful because if you or AI make some, you know, crazy error, then usually that

can be caught and at least your users are not actually going to have to see it. Okay, so it says it’s ready. Let’s go ahead and check out our live project and see if it is now green. verifying access. It is indeed now green. So, what I’m going to do here is I’m going to go back to dev and I’m going to show you how to revert changes. So, this pushing to main here is basically like saving checkpoints, uh, which you can then revert back to because of GitHub, which is version control. So, now I’m going to say make all the fonts really, really big. And

this is going to be freaking ugly. That’s why I’m going to tell it to just undo these changes. So, that’s what I wanted to do. Let’s update the CSS to increase all font sizes significantly. So, again, let’s say you asked Claude to make you some sort of new feature. And then you’re like, whoa, whoa, whoa, whoa, whoa. Either I changed my mind. I don’t like this feature. Maybe Claude just butchered it and it just doesn’t look good at all. And you’re like, "No, no, no. Let’s step back here and go back to the version that we had before." That is what I’m about to show you how to do. So, yeah. First things first, go ahead

and make it big. Okay. So, it’s really big. And let’s say I see this and like this just looks like crap. So I don’t want this at all. I’m going to go ahead and say, can you revert back to the last time I pushed changes to GitHub? And then what it’s going to do is it’s going to check your last push. It’s going to grab that code and it’s going to pull it back into your folder, effectively reverting everything back to how it was. And this would work as well if you were like, see how it’s

fetching all of that? see update theme to beautiful green color scheme. It’s checking that it’s going to then pull that code back and make it work. So again, that is how you manage uh very simple version control. I bet if there’s any like better developers than me watching this, they’re probably crying watching me explain this to you. But that’s okay because at the end of the day, you’re going to be able to make stuff work. And that is key number one. So, get reset. And what we’re going to

see is it is going to undo those changes. So, it looks like it’s already done. Yeah. If I refresh here, as we can see, it’s no longer big. So, that right there is how you handle it. So, just to end off this video, I’m going to pull this open and show you what we built here from start to finish really quickly. It has a beautiful UI. It has working secure authentication. All of your members are managed over here in Webflow. You can make paid plans. You can make free plans. You can check your conversion tracking data. You could do whatever you want to do. So, that is it.

I hope this video is going to help you go out and create something really freaking cool with Claude Code. I’m having a lot of fun with it. I hope you will, too. Have a great day. Peace.