Ключові вимоги для монетизації додатку на Claude Code: 8 обов’язкових кроків

Everyone's vibe coding apps right now and they look great, but most of them can't take payments. You can't have users log in and if you can, most people are seeing other people's personal information. And that's just not a SAS application. That's a demo. My name is Jonno. I've created two seven figureure businesses and more SAS apps than I can honestly count. And today we're going to be covering the eight requirements or non-negotiables that every SAS application needs. Number one is a database. So let's go ahead and set that up on the world's simplest application here where a user can log in and create tasks. Now we need to create a system where when a user creates a task, it's saved to a database and then anytime they log in or refresh a page, we can retrieve the tasks right back from the database. Okay? And so that's what we're setting up in step number one here. And we're using a free tool called Subabase in order to get the job done. So, I'm going to head over to Claude Code to submit our first prompt. We're going to be using this claw.md file. It's going to be in the description down below if you want to copy it. With that being said, let's go ahead and fire off our first one. Hey, can you please build a nice SAS application that has a onepage website about tasks? And the app is called Task Flow. and then a login to a backend uh application where users can create and delete tasks and those tasks need to be stored inside Superbase. Okay, sweet. So, I'm pretty happy with that. I'm going to send this off and then we're going to return back when everything is finished. Cool. So, we are all said and done. It's built out the website and we can take a look at logo host 3005. So very simple landing page, but it does look pretty cool. We can head over to the dashboard where we can create our first task. Now, unfortunately, when we go to add that task, nothing is going to happen because we haven't actually hooked up our web application to the database yet. And so in order to do that, we need to create a free account inside Superbase. I've already actually done this and I've created a project as well. and you'll need to create both of those. But once inside, we actually have to authenticate our application to Superbase. Okay? And usually that's through like a password or something like that. And so Claude should tell you exactly at this step what it is you need. So it's saying at step three, you get your API keys, go to here, copy all this kind of stuff, and then you just paste it in thisv.local file. This is where you store all of your passwords securely inside web when you're developing web applications. And so specifically, it's asking for the Superbase URL and the Superbase AON keys. So let's go ahead and grab that. Inside Superbase, if we head over to the project overview, this link right here is the first thing we need to grab. So if we hover over that, we can grab the project URL and we'll paste it after the equal sign. Okay, perfect. So the first one is done. The second one is grabbing that AON key. So over in project settings, we can circle to API keys and legacy AON service role API keys. And we need to grab this guy right here. So let's copy that and then paste that in here. And now we should be almost good to go. The only thing is is that technically speaking, we actually have to set up the database because right now we haven't told it what kind of data we're storing and we're storing tasks. Now, luckily, we don't have to do anything really because Claude has done all the heavy lifting for us. And what Claude has done is it's created this um this markdown or this file right here. And it's saying all we have to do is copy the code here. So, just copy it. Head over to Superbase, go into the SQL editor, and in this new tab, we're going to paste it in. Click run. And now we've created our first official database to store tasks from within Superbase. It says success. No results returned, which means we're good. I'm going to refresh the page. And now when we create a task, it should actually create it inside Superbase, which it doesn't look like it did. So maybe I skipped a step over here. Um, and and it doesn't look like anything happened. So, I'm just going to go and message Claude telling it I've included the API keys. Please finish the rest of the setup. Hey, so I included the API keys inside thev file and I've done everything in in Superbase. Can you please complete the connection for me? Cool. So, I'll send that off and it should be able to finish this. Then we'll test it out. And it looks like everything's good to go. So, let's refresh the tab here and try it again. And now we can add in our very first task. And we can also delete that as well. And when we add in the task and we refresh the page, we can see that it's still pulling from the database, which means that it's up running and working and everything is good to go. Now the problem so far is that right now anyone can log in to this application and we don't even have the ability to log out. So if anyone went here and they clicked dashboard they'd all arrive at the same location which brings us to step number two where we have to set up user authentication so people can sign up and log in. Can you please use Superbase to create user authentication so people can sign up for an account and they can log in and once they're inside the application they can also log out as well. Cool. So that's pretty much it. I'm going to send this off and return back when this is all set. Awesome. So we're all set. Now we have the ability to create an account and we also have the ability to log in. Before this is all set up and working properly, there are two additional steps that we need to take. So inside of Claude again, we have it's telling us that we have to update the Superbase database. So it's given us this data right over here. So I'm literally just going to copy this in. I'm going to head back to the SQL editor. We're going to open up a new tab here, paste it in, run, and it should say success. No results returned. And then we're going to head over to step number two here, which is saying that we have to add in our URL to this URL configurator. Essentially, what's going on here is that we have a website on a localhost port 305 and we just need to tell Superase which URL our website actually is. So, inside authentication, we can move over to URL configuration and then just paste this in here. Save changes and we're to we're good to go. Everything should work out of the box. Now we can start the process of signing up for a free account. So I'll add in my email here and give a password too. And now it's going to verify this account with an email. So Subbabase is actually going to handle email authentication on our behalf. And we just need to confirm our email and then log into our account and everything's good to go. We can create more tasks. But here's the problem. At this current point in time, every single person that creates an account is going to be logging into the same dashboard, which is obviously problematic because you don't want everyone sharing the same personal details. So, what we need to do is change this so that instead of just having authentication set up where people can sign up and log in, we have multi-tenency where every single person that creates an account has a separate account that is not shared by every single other person. And so in order to do this, we're going to head back to Claude and send over our next prompt. Can you please create multi-tenency in our web application so that every single user who has an account has a separate account so that there's no personal details that are shared between other users. Cool. So I'm going to send that off and then return back when this is finished. Okay. So we are back and the only thing that we actually have to do in order to enable multi-tenency in our application is to copy this code that Claude created for us and then paste it back into Superbase just like we've done in previous steps. So I'm going to go ahead and copy this. But just before we actually do that, I want to show you the same dashboard from two different users perspectives. So I'm logged in with this email right up here. I'm going to create a task. Okay. And then the other user that I've created over here also shares the exact same dashboard. Obviously super problematic. Let's go and fix that inside of Superbase. We're going to go to the SQL editor, open up a new tab here, and then dump in what Cloud Code gave us. We'll run the query, and if everything is good, then it'll say success. No rows returned. Let's head back and see if the users still see the same data. So, I'm going going to refresh the page here. Okay. And type in another task. Awesome. So, 1 2 3. And then I can't pronounce the other one. Let's refresh this. And now there's no tasks. Okay. So, now I could go in and type in whatever I want to. But the users aren't going to share the same backend. They can't say see the same data, all of that kind of stuff. And so, with this one prompt, we've set up multi-tenency where all of a sudden every single user has their own account. Awesome. Okay. So that's fantastic. But the next thing is is that I don't really think it's like a true SAS application if you can't charge users money to actually use it. So what we need to have is a paid tier where people can actually pay you money in order to use the software that you've created. And in order for us to do that, we're going to use Stripe. You can start for free. Probably takes 5 to 15 minutes in order for this to be set up properly. and we're going to use we're going to build a couple prompts in order to get this set up the right way. So, back inside Cloud Code, let's get started. Can you please add Stripe to our application so that we can have a checkout page where users can upgrade their free account to a $49 a month plan where they get unlimited users, unlimited tasks, and all of that kind of stuff. We're going to start this with test mode. Uh, so if you can please get that set up, that'd be fantastic. Okay, I sent that off and now Claude is going to go to work building that out. You can see probably not the most concise prompt in the world. Please get that set up. That would be fantastic. So obviously you don't need to include everything in here, but this is just to go to show that if you're speaking to Claude, it can still pick up everything you're saying and build out the application on your behalf. So I'm going to return back when this is all said and done. Cool. So we're all set here. In order for us to proceed forward, we actually need to connect in Stripe to our web application so that we can verify who we say we are and we can start using Stripe to charge clients. Now, we're going to start with Supabase because I want to import in this service role key. And in order for us to get that, we're going going to head to project settings. Inside project settings, we'll head to API keys and then the legacy AON service roles. We're going to reveal the key right over here and then paste it in. Okay, so that's good. We're set up there. Now, we can head over to Stripe. So, inside Stripe, I'm going to log in. I've already created an account. If you haven't done so already, I highly recommend going ahead and actually creating one. Again, it'll take like 5 to 10, 15 minutes or something like that. And I have this nice elegant account called delete. The first thing we have to do is switch this over to test mode. Unless you want to test with paying on your actual credit card. Probably don't want to do that. So, we're going to switch over to the test mode here so that we can use a fake Stripe card to test the payment infrastructure and we need to grab our API key. So, in the search bar, you can type in API keys and we need this secret and publishable key. So, let's copy both of those in here one by one and then we can move on to the next step which is going to be this price ID next. Awesome. So, those are done. We need a price ID. Every single time we're selling anything in in Stripe, we need to have a product that we're actually selling. So, we can head over to product catalog. And this is going to list all of the different products that we're able to sell. Now, for this demo, we're just going to include one product, but of course, you could add as many as you want. We will create a new product. I'm going to call this uh task flow product here. And we want to set this to recurring at, I don't know, $49 every single month. and we can create the product here. Okay, awesome. So, all said and done, we need to grab the price ID. So, actually going into the product, you don't want to grab like any of these product IDs or anything like that. We're going to click into the price and then inside here, we have this price ID. We can copy that. And that's exactly what we're going to use to be able to go ahead and charge clients. Okay, so that is good. We have got our API keys for everything. Okay, we've created the product. Now we need to yeah we've added these in and then we just need to go back to um Superbase and then paste in all of this code to be able to create another table to be able to support payment infrastructure inside our application. So back into the SQL editor, we're going to create another table here, paste it in, run this code, and hopefully we get no errors, which it looks like it was a success. And apart from that, everything's good. So we can say, please run the server. We're going to spin it back up and test to see if Stripe is actually working from within our application. Cool. So everything's running. So I'm going to refresh the page here. And now we have the ability to upgrade to this $49 a month plan. And it looks like when it says redirecting, nothing is actually happening. So we have encountered an error. So I'm going to paste. I'm going to reply to Claude just telling it we've encountered an error. So, it looks like when I click on upgrade my plan, it says redirecting, but nothing actually happens. Can you please solve this bug? Cool. Send it off. In a couple seconds, Claude's going to be able to figure this out and then we can proceed forward. Okay, it looks like it's gone ahead and fixed the problem for us. Let's try this again by upgrading. And now it's redirecting us over to a Stripe checkout page where we can actually pay for the product. Let's give it a shot. You do not have to enter in your real credit card information here. We're in test mode, which means that you can enter in a fake credit card. And Stripe has a couple fake credit card numbers, but the one we're going to follow is this. Just 424242 on repeat. You just need to make sure that that's the exact number you add in here. And then you can add in whatever you want for the rest of the information. Click subscribe and now we should be able to collect payments from our customers. Afterwards, it'll redirect us back to the dashboard page. But here is the problem right now that even when we collect payments through Stripe, we need to upgrade the plan. So right now it's saying welcome to pro, but if we go back to the dashboard, it's still saying, hey, upgrade to the pro plan. And so what we need to do is we need to make sure anytime we collect a payment from somebody, it actually goes ahead and updates the plan on file for that user. So this is where the next stage comes in. We're going to go back to uh we're going to go back to Claude and we're going to send another prompt. Can you please make sure you get the web hook secret from Stripe and enter that into the local file? And can you also make sure that anytime we receive a payment from somebody upgrading their account, we make sure that we change their um we change their subscription to pro or premium or whatever it is so that they unlock all the new features. Essentially, what's going on here is that when we and I'm going to circle over to our next uh screen here. When we receive a payment, it's going to be received in the web application. But then what we need to do is we need to uh in our database update a user's subscription and right now this step is currently broken and so we need to get a something called a web hook secret from stripe where we can verify that the user paid and when they pay we will be notified and then we can go ahead and start the process of updating the subscription. And in order to do that we need this Stripe web hook secret. This isn't something we're going to get by ourselves. We're going to get Claude code to get this on our behalf and then set up the rest of this uh this step. Cool. So, we're all set. So, what Claude has done is first of all, it's added in this web hook secret. This is critical for us to be able to update the user subscription in the database. If we don't have that web hook secret, which Claude should get for us, if it ever gives you a hard time getting it, just tell it to get it again for you. It will be able to do it. But when you get a payment, it's going to update the app, which is going to update the database, and then the user will be on a new paid plan. Okay. So, essentially, that's what's going on here. We can give it another shot. Let's head back into the web application and and try it again. So, we'll update, which will push us to the Stripe checkout page. And all you want to do is add in the same credit, the same fake credit card one more time. We'll subscribe and hopefully this time it should upgrade that user to a paid premium plan. Cool. So everything's good to go. It's redirected us back to the dashboard. And now we can see that we're on a pro plan. So everything's good. It checked out. Now we can accept payments and then upgrade the user's plan after that payment was received. Awesome. So that's working. But here's the problem now. People can pay us, but they can't downgrade. upgrade, cancel, all of that kind of stuff. So, what we want to do is give them the option to go ahead and do so. So, I'm going to send another message here. Can you please add in the ability in the app for users to manage their subscription so they could upgrade, downgrade, or cancel their plan through the Stripe portal? Awesome. We'll send it off. And again, this is just something that's built in natively to Stripe so that we can just reference that instead of having to build this whole infrastructure out ourselves in our own custom web application. Great. So now we've built out the ability to manage our payments. And inside the dashboard, we can hit this manage payments, manage subscription button here, which should redirect us over to Stripe. Now in this billing section, users could cancel their payments or they could go ahead and upgrade or downgrade depending on the products that you're offering to that particular customer. So that's really really nice. But the next issue that we have here is the fact that some users may have an expired credit card or may or they may not pay you for a certain amount of time. And so what we want to do is we want to set up something called duning. And so what duning is is if somebody's subscription fails, we want to lock them out because potentially you may be offering a software subscription to somebody where you're paying for them to have that account through whatever costs you're incurring and you don't want to pay those costs if well they're not paying you. And so we need to set up something like duning. So let's head back to um Claude and now I'm going to send the next prompt. Can you set up the process of duning inside our software application so that if a user doesn't pay after two attempts to charge their credit card, they get locked out of the software until they pay their subscription again. Awesome. Let's send that off and I'll return back when this is done. So, everything's set up and here's essentially how it's been built in the system. So when there is an invoice that fails, so when somebody fails to be charged on their credit card on the second time, what's going to happen is their subscription status is going to change to pass due, which means it should lock them out of the system, and when they go ahead and pay again, it's going to restore their subscription. So, let's try this out. Can you please show me a demo with our current client with my email um to show what it looks like when somebody's locked out so they don't have the ability to actually go ahead and access any of the premium features? Cool. And I'm going to add in my email here just so it knows exact exactly which client to go ahead and update because I did create two. Cool. So, it's worked. Let's give it a shot here. And when we log in, we get this payment failed. We were unable to charge your credit card after multiple attempts. Your account has been locked until payment is resolved. And then it will go ahead and say update your payment. And then it will redirect you right over to your subscription page where you can pay more money to access the premium account one more time. Okay. So that's awesome. Those are the major features inside building out your own SAS application. But now we actually have to go ahead and deploy this live. So, how we're going to do that is a two-step process. The first part of that process is we need to upload the code to the internet. And how we do this is through a platform called GitHub. Now, GitHub is just like an online repository for for your your code. So you can think about it like instead of having it just on your computer here, we're going to upload it to the cloud. And then once it's in the cloud, then we can deploy it there into a URL that anyone can access, not just you on your personal computer. So GitHub's free. You can create an account. And then we need to head over to repositories and create a new repository. Now, just keep in mind, you're going to want to keep this private unless you want to share all of the code that you've built with somebody else, which is almost never the case. We're going to do I'm just going to call this whatever demo SAS app and create the repository. Now, it's going to give us all of this block of code. We just need to copy this and then paste this back inside of our application right down here for cloud code. So, I'm going to paste it. But there's one additional thing that I want to say. Can you please deploy this project to GitHub, but make sure that everything is private and secure and that none of my API keys are exposed. I want to make sure everything is in the MV file and we have a get ignore that doesn't push those secret keys to the internet. Okay, I'm going to fire this off and explain what's going on here. Right now inside the MMV file, this is industry standard for where you put all of your secret keys. When you deploy your applications live to GitHub, you do not want to include the secret keys because you just don't want to have any usually any vulnerabilities. And so what you have is a ignore which says all of these files are going to be ignored from being deployed to GitHub. So what we're going to do is deploy the project to GitHub without any of your secret keys so they stay on your local machine here. Cool. And so that's the first part. We have the code inside of GitHub now when we refresh the page. The second part is we're going to use Versal here. Now what Versal is is it's an online application that allows you to deploy your your apps into the cloud. Now, specifically, and I don't want to get into the technical details, but of this build, we're using a platform called Next.js. This is my favorite framework for building web applications. All this is is it's a framework of code to be able to build really high quality web applications like what we just built. What we built uses Nex.js. And the thing is is the creators of Nex.js are versal. So, they make it very easy to deploy your projects into the cloud. And so you can sign up for free on Versal. And once inside, we're going to create a new project. We need to connect Versal to GitHub. And then we'll have access to all of our projects there like this demo SAS app that I just created. And then we can import this and deploy it live. The last thing is is that we need to handle environmental variables. So if you recall, we just ignored pushing these online. So currently inside GitHub there is nov file here doesn't exist which means that technically speaking right now it like our app if we push live it can't access superbase it can't access stripe because it doesn't have these keys or this these credentials. So what we're doing is we're adding them into something called environmental variables. And this is the industry standard way to safely and securely store all of your passwords, secret keys, everything so that people can't steal them from you. This is the safest way to do it. And how we're going to do this is by adding these in one by one. So I'm going to do the first one and then I'm going to pause the video and finish the rest so that I don't bore you with doing this. So all we do is we p paste in the key here, okay? which is the blue text. And then on the opposite side of the equal sign, this is the value that we have to paste on this side. So I'm just going to go ahead and do that for the rest of these and then return back with the video. Cool. So I've added in all of the environmental keys. You can kind of well you can go ahead and skip this last one here, the site URL. This is anything with local host we don't have to include in here. We'll click deploy. And this is going to uh push our website live. Cool. So our website has been deployed. Everything's good to go. There is just one problem that we have to fix and then we're all set. The website's active. Right now in Stripe, it's on test mode, which means that people could literally just enter in a a fake credit card and then subscribe to your account. So, what you need to do is change this or revert it from test mode to live mode and then get the same keys that we got on test mode. So, you'd still have to get the same API keys, but this time on live mode. Okay? And then you'd have to create a product like we did before by going over to the product catalog and creating something on live mode and getting the price ID. And then the last thing is is we also have to get the Stripe web hook secret because if you recall inside of our um inside of our diagram here, when Stripe receives a payment, it's going to send to the web app and then it's going to update the database. But right now, it's sending it over to our local host web app. We need to send it over to our production website at this particular URL. So, if we go to the dashboard here, this is where our site is live at this website where anyone could technically view it. And so, we just need to change this URL. And so, this is how we do it. Inside Stripe, we're going to go to developers and web hooks. So, I'm going to type in here web hooks. We'll click add a destination here. And then we need to choose what events we're actually sending. And so, these are more or less all the events. I'm just going to do one for now, but you'd want to copy in every single one of these. So, we would search for that particular event, check it off, and continue. But in a nutshell, what we're saying is anytime a checkout session's been completed or a payment's been updated or subscription's been deleted or payment failed or payment went through, we are sending it to our live application, not our application at localhost 3005 because then obviously defeats the purpose. We'll click continue. And then we need a endpoint URL. And then we need to grab this endpoint. And so we can go back to Versal and whatever the domain is hosted at, we can just grab this live URL, paste it in here. And we also need to ask cloud code what the exact URL is. So I just pasted in here my URL, and then it told me to add in a / AI/web hook. And now it's going to be able to receive all of those payments and all of that kind of stuff live and we're set. So that's it for this video, guys. Thanks so much for watching. I hope you found value in it and good luck with any SAS applications you do decide to build out. If you guys are looking for the blueprints for this, it's going to be down below in the description for free. And if you want to learn more about AI and automation, I highly recommend taking a look at my school community where there are two transformations. Number one is teaching people how to find, sell, and fulfill their first AI automation clients within 30 days or less. And then you can rinse and repeat the process. And then the second transformation is for those of you who have existing businesses. I'll show you how you can essentially automate up to 80% of the of the work that you're currently doing manually right now using the same blueprints that allowed me to scale to seven figures. All you have to do is copy, paste, and deploy and you're good to go. And if you don't want to have to deal with any of that, you can also take a look at my agency over here, um, where we will help set up absolutely everything for you. So, thanks so much for watching and I'll see you in the next one. Bye-bye.