Build an AI SaaS in 30 Minutes (Next.js, Supabase, Stripe, LEAP AI, Vercel)

Do you want to build apps with AI Do you want to build apps like Indie hackers like Peter levels who launched this photo AI head shot app and he's making $70,000 a month with it and so when I saw that on Twitter it honestly blew my mind and I was like you know what we got to build this ourselves from scratch and let's do it in 30 minutes and I'll show you how to do it we will also have stripe included Your stack will be super base we'll be using vers cell we'll be using for cell's blob storage which is a cool new beta feature that they've released now you might be wondering what is this thing why do I need to use it and what's the fuss all about well here's the thing the problem in the world is when you need good photos whether it's for Tinder for professional jobs Landing a job it makes a massive difference the photos that you have but in order to get a professional photographer you have to spend a lot of time trying to find them trying to book them and you have to spend a lot of money I I went and had a professional photography session it cost me $1,600 for one day the photos were great but it was really expensive well with AI models what you could do is you could upload your own image three or four pieces of images that you have and boom this AI stuff can make you look so damn good and I didn't even have to pay that I had to pay when I actually worked with my photographer so that's a problem that we're looking to solve we're going to build it and solve it in 30 minutes if you want to follow along and get access to the entire app for free click the link in the description below the app is there and available for you all you have to do is Click you can hit fork and boom you have the entire thing and then for the the rest of this video I'll just walk you through so how you can set it up and you will have the entire SAS for yourself at the very end sounds fair all right with that said let's jump straight into the video all right so let's go ahead and start building this app so click on deploy that's going to be the first thing it's going to basically create a git repository so you can just go ahead and hit clone just put whatever repository name that you want here okay so let's go ahead and hit start now for the Integrations we're using superbase as our database so this is a nice versal integration that allows us to create the tables and populate them however you want so let's just click add this will allow us to just start it so if you're not signed in It'll ask you to sign in yeah we're already logged in so for me it's good yep install it into that put your project name there so let's just say headshots generator template name it whatever you want I'll put in my password and make sure you leave the create sample table tables would see data on so leave that on okay and then that's very important actually so make sure you have that done and then go to create project okay so it's completing the installation beautiful now you see we have some required environment variables like leap API key and leap web hook secret so let's go ahead and get our leap API key so let's go to app. tr. a let's go continue with Google and then let's just pick whichever one right log in now that I'm signed in you can see there's a bunch of templates here that you can use but we're here for the head shot right so let's go ahead and make sure we pick the head shots okay go ahead and Cloe them here's a few selfies and so we're going to hit continue on that because we want to make the headshots AI app right look at that handsome guy that was on that first page now we're going to go ahead and click get started okay let's go ahead and clone that template so that'll give you the entire clone and now you should be able to see all the steps here okay this is now your own app you don't really have to change too many things because everything it's a template so everything is pretty much ready to go so just let's go ahead and hit publish there so there we go now our workflow workflow is published and we even have the API is like ready to pretty much go so let's go back to the dashboard here you should be able to see my new workflow here AI headshot generator now let's go to our API key and let's go pop in our API key so I'm going to say my headshots app and we're going to copy that generated key to our clipboard now okay we're going to pop that key in there in our versel project we need to also add the web hook secret to really make sure for security purposes that it's good okay that can be any value let's just chop off the the LEC part or whatever and let's just chop off the end here so we just pop in the API key here okay it could be any value really yeah so just as long as you have some random value that's totally fine okay so I just literally took my API key and chopped it up a little bit so let's go ahead and click deploy so now it's deploying so with that said this should this should probably take a minute or so okay so if we go to super base here you can see that it created this project for me okay so that generated a template and when you click on the table uh editor you'll see the four tables that we see here okay in order to be able to use this yep so everything is looking good policies are looking good policies are set up everything is already handled for you right all you need to do at this point is just follow along with all of the steps and if you see those reds don't really worry this kind of part of the process okay boom there we go seems like our project is successful and already started like that is insane how quick that was now let's go continue to dashboard here let's go visit the website and take a look holy crap it's already deployed you can see the URL right there okay at the top this is the GitHub that you clone now we have to set up a couple of things to make sure it's fully working for us okay so grab that URL we're going to need that later so let's go to our GitHub repository here let's go to our get repository yep and let's go ahead and clone it so we're going to now go clone it locally okay so I'm going to just say G uh GitHub repo clone and I'm going to clone this okay and let's CD into it now and then we'll open it with Visual Studio code okay and we have to configure a couple more things at this point so the next thing we need to do is make the login work okay so let's go to the read me let's go down let's go ahead and copy that magic link setup that's there we're going to set that up with super base let's go to super base here let's go to settings actually I think it's an authentication let's go there email templates and let's go to magic link and put that here okay once you have that go ahead and click confirm hit save we're going to paste that in okay beautiful next thing we need to do is we need to set up our URLs so let's go back to super base so let me go back here that's my domain so we'll grab that domain and we'll bring that domain to super base and then let's add those wild asterisks so then it can catch any path that we go to right not just a specific path now what this should allow me to basically log in okay let's go back here and test it out now where did it okay it's right there cool so let's go here type in our email Mariano at trap. hit enter and let's see what happens oh I spammed it too much so I got to wait for a second so let's go to our email and check and there it is confirm your sign up beautiful ah we get what you getting error the URL was incorrect so I just deleted the astris Asis from there and that should fix it for now let's actually go fix that we don't need the asterisk asterisk actually so let's get rid of that let's save it and let's try that again ah so that's the where the we needed to have added our new URL okay so let's go ahead and instead of putting in our email there or whatever let's put in the Euro that's where we got to put this asterisk asterisk okay where we where it says add a new URL so let's do that now we we don't need these other ones so we can actually get rid of all these guys here let's delete that let's try logging in again and let's see if that works so let's go let's type in our email Mariano at TR leap AI now let's check our email and boom We Got The Magic link awesome let's hit log in and boom there we go we're actually logged in it was that fast super base's login is so dang quick that's awesome now you can see I'm logged in that works successfully now let's go ahead and see what's next we got the workflow ID we need we need to just set up a couple of more environment variables so let's go ahead and set them up now on versel this is the template that got created so let's go ahead and set up a few more environment variables here so here are all the super base ones that were made for me when we did the integration so we don't have to worry about that we have the leap API key and the leap web hook secret which is good so if we look at our m.l. example here there's a few keys that we're missing let's go ahead and set those up here so workflow ID let's set that up yep so I'm going to pop in my workflow ID here so if you go back to LEAP go you will go to go to workflows this is where you'll get the workflow ID from so let's go ahead and click edit workflow and then there's a little ID at the top there so let's copy that yep I just copied it and let's go and populate that in versell and now we're going to add another one what else do we need Let's see we need the super base URL so let's go ahead and set that up I'm going to populate them like this add all the keys first so then it's going to be a little bit easier on us to remember let's get the blob blob guy we're going to use this actually store the images okay in the model let's get a resend API this is going to allow us to send emails this is email service so while superbase will let you like kind of use their own email service they don't they do have a limit whereas recent so you want to replace it with resent and you can use any email provider we're going to be using resent that's just our preferred method of doing it okay it's easy and it's simple to use so let's go with that so all you need to do is get the resent API key and then there's the optional part the stripe integration but if you again if you want to collect payments then stripe is the way to go so if you want yeah like if you want to charge other people to use this right that's what you want to set up so we're going to set that up here just so you know what you need to do okay so we're going to pop all that in here and I'll explain this later we'll just po populate it right now let's go deployment provider here versel and then let's get versel URL here as well yep let's going to be the deployed one yep we're going to copy that URL and paste that in right there and let's go one by one here and add all of this in let's go to the project settings here let's go grab the project URL paste that in there let's go get the project API Keys now and we're going to pop that into the Anon key we need the service roll key so that should be right below that so let's go ahead and grab that and put that in now let's go get the blob read write token so let's go to our versel storage oh nice yes so versel now has its own storage which is really cool so let's go ahead and hit create that it was in beta before now they actually have it out I'm excited so let's just leave that name that's fine let's just hit create and continue here yep and you can leave that be honestly just hit connect okay there we go now let's go ahead connect our project here it should be already actually it's already connected that's nice okay great so basically just by following the steps it automatically linked it you should be able to see that so let's go back to environment variables now yep The Blob read WR token is there it added it for us so let's remove the blob read and WR token since it was already added we don't need it here and let's go ahead and resend the API key yep so the first thing that they'll give you is API K right so you just have to make an account with them it's free we're using recent for two separate things okay one is to notify you okay whenever somebody like does something with your training if you've set up the recent key you're get you're going to get an email this could be your users's email or your own email whoever's sending it basically and you could also set it up for off as well right so we want to notify the users hey your training model is ready go and check it out right just like your pizza is ready so we need to send a notification like hey your image generation model is ready you can now go ahead and start uploading your images it'll work for you so let's go ahead and paste that API key over here now now let's go ahead and set up the stripe stuff we're going to hit true on stripe is enabled okay so now let's go ahead and set up stripe so we'll log into our stripe account here okay all right there we go we're logging in just got to put in our six-digit code there we go okay so you just have to usually when if it's your first time signing up you have to just fill up some stuff about your business so even if you don't have a real business you can just make up some stuff um and you should be fine strap should allow you to log in once you do that you'll go ahead and see the screen okay now we need a stripe secret key so let's go ahead and grab this key here so this is our secret live key do not obviously share with anyone right this is just cuz I'm just doing it for the demo but I'm going to delete this project afterwards we're done with it for you make sure you keep it a secret okay all right next up here's what you want to do so you want to go ahead and create some products and we want to create a one credit product a three credit product and a five credits product see when have three products here so let's go step by step here so we did versel blob we did resend and they're optional by the way we're just doing it for the purposes of the demo to really make this app really good for you okay now we need to create a web hook we've already created a secret so let's go ahead and create a web hook first so let's go type up there web hook go to the developer web hook and we're going to hit add an end point okay now let's grab the URL of our web app that we have deployed the domain not the rest of it okay so let's pop that in so your yeah your hosted URL stripe subscription web hook and then you we we going to say SL strip SL subscription D webhook so make sure you add that into the URL there okay so let's just say billing so we need checkout session completed that's what we need that's going to be under checkout and that's going to be under session completed okay great move that let's go ahead and hit add events yep and go ahead and add add an endpoint okay let's keep going here so now whenever somebody's going to do a session complete or subscribe is going to hit that web hook right after this checkout session completed web hook and then we have some logic in the code to build that user and then we're going to give them credits okay so we want to get our web hook signing secret and we're going to pop that into there here okay now we need to go ahead and create our products so let's go check out those images that show us how to do that so here's one of our products this should tell you what we need to do okay I'm going to move that there so my life gets easier and I'm going to go ahead and create our first product here so this is going to be one credit product you can upload an image if you want we don't really need that right now 16 so description of this is going to be it's going to give us 16 head shots okay and we will charge $12 for this and you can change this price to whatever you want but this is what we're going to do and it'll be one time not recurring yep yep I think we got everything over here that should be good let's hit save product now let's go ahead and see in our Visual Studio code let's go to stripe stripe subscription here and let's see one credit yep yep let's go in the environment variables now and let's get our price ID where did I put this okay let's go to Price ID yep one credit and let's go do the same thing for the three credits and the five credits so I'm going to create another product same process let's just go look at the image it's going to be three credits it's going to be one off it's going to be $30 okay and it's going to give us 4 head shots here okay CU three credits right so so now click into it and now we're going to get our price here so let's grab the price or so the price ID I mean let's go put that in and we just need to do it one more time so let's gohe five credits 16 * 5 whatever that is make sure it's one one off and then we're going to pop pop in the price this is $40 so just to be clear one credit is one workflow run that's what a credit actually is so one credit per training okay now we have all the credits let's go ahead and get that third price ID pop that in here and now we're good now we have all our variables filled out okay let's hit save a variable name Target production or exists oh actually we don't need that one so let's get rid of that one okay let's see if it's already defined service R key ah I see we actually don't even need those those are already Define so ignore those yeah those were already populated at the start so we actually don't need that so you can get rid of that yeah we should be good to go at this point now we have all of our variables okay so we now need to just go and hit red deploy so basically we can then rebuild with those additional environments now if this succeeds that means on the top right there this will basically say how many credits I have it should say zero because I don't really have any right now I didn't purchase any we'll see it says Ready visit awesome let's hit log in we don't want that URL actually because that's the preview so let's go ahead let's go jump to the main one and let's hit refresh so it's not the preview nice look at that we get zero credits so the reason why it shows up is we have additional logic that basically says if you have the API key enabled or not it then shows this otherwise it doesn't so let's try the experience so let's try the Train the model I'll call it Mariano head shot so you can pick man woman unisex whatever you whichever one you'd like so upload let's go ahead and upload some pictures at this point so I'm going to go ahead upload some pictures here so there we go put some uh Mariano's pictures look at Mariana looks handsome here it should not let me do it because I have no credits right now so it should not allow me to do it boom there we go so it says something went wrong okay not enough credits so let's go ahead and figure that now let's go ahead click credits and we can see boom one credit three credits five credits this this is being pulled from our products we made by the way automatically on stripe and so when I click that look at that it's already sending us to the checkout page so we can go ahead and fill out our card information here so purpose of the demo I'm not going to do this but as you could see it's set up for us to be able to actually do this so we can purchase multiple credits here and with a certain plan if we want so I'm going to go ahead and cheat a little bit so we need to also set up that stripe pricing table I forgot to mention that actually so let's go ahead to our code that we had cloned let's go to our let's go command p and let's go to our stripe table okay now in the stripe table you need to put these values the publish key and let's figure out how to get those okay so I'll show you how to get those right now so let's go to our search bar here let's go to our pricing table here and let's go ahead and create a pricing table here so let's go ahead and add one credit let's go and add three credits let's add another product and then let's add our final product for five credits okay so yeah my bad I for I I must have missed a step from showing you guys so this will take care of it now okay so make sure you set this up hit continue and then yeah and then hit continue and this is the pricing table that you get okay now let's copy that and we're going to paste that pricing table in there okay that's what we need to do there so make sure you need the client reference ID and the customer so if I did this put the client reference and Custom customer email okay and these should be your values here so now we'll render the table and it belongs to your account okay so let's go ahead and demo that so I'll add that into my code so we're going to say fix pricing table okay and uh yep Dash let's just put the dhm here and push it okay now that we have pushed this now we should see our deployment here okay and it's automatically going to deploy to versel doesn't need to be set up but just double check if it doesn't you can always look up versell deploy commands and type that in okay so we'll wait for this deploy to finish once it finishes you should see the new pricing table so you don't want the values are there already you want to set up your own pricing table cuz before let's give it a couple more seconds here until it's done yeah so some styling changes happen because of es lint so ignore those but the but the main thing is the pricing table ID and the publishable key are different so those are different so these have to be yours okay the can't be like whatever you got from the project so it's done so let's go ahead and look let's go there oh look at that we got tables here and we we can see a training that is sick so let's go ahead and click get credits so now you'll see the same styling that you saw that we did okay on stripe the blue buttons that we just set up in Stripe Right they're different color than the ones we had at the start of the lesson you should be able to edit in real time time so if you want to see the colors change for example so like let's change this to some other color let's change it to Red for example very very dangerous terrible color for uiux you don't want that but like let's just take a look let's hit refresh damn look at that that's sick so now it's linked properly and stripe makes your life really easy right makes the tables for us we don't have to make it that's nice so so let's just um to make the demo a little bit faster I'm going to basically give myself credits I'm going to cheat here so I'm going to go into the credits row here so it created a row for me here with my user id I'm in superbase here right now headshot template project here right in tables and credits and now for you as a developer you could just do it for yourself but normally right if you're going through the strip check out it will hit the web hook and then it will add credits to the user that actually paid it right so for now let's just give ourselves 10 credits here okay cool so now we should refresh and at the top right boom look at that it says 10 credits right so I'm rich in this world so let's go ahead and put we're going to do Mariano head shots here let's grab some of his photos right here okay I don't know why I have his photos on my freaking computer but ask Mariana don't ask me and then uh let's go ahead and hit train let's see what happens it looks like four different people right in these four different photos what the hell okay so model is now queued for training now if I refresh you'll see that it's loading and it detected one credit actually at the top as you could see and now it's running my workflow right and to show you that my workflow is running let's go to my dashboard and if you remember we created this workflow and we're running it now okay let's go ahead and click history and we can see inside of our history I ran but it failed interesting this is because my accounts on leap I don't have enough credit to run this myself so I got to go so I want to go ahead and upgrd so I'm going to go ahead and choose a plan so training models is very costly right it's not completely free so you have to be able to actually do that so I'm going to go ahead and update this here and I'm join this $9 per month one guys if you want to learn this AI stuff like $9 is nothing right at worst case scenario you could cancel a month from now but like the skills that you learn from being able to do this are worth so much more like you might have a 10K pay increase or you might get a job or your SAS might make you know 10K 20K a year or you might get a job where you're making a bunch more money so like don't be cheap when it comes to investing in yourself that's one of the things from the start of my career like I took very seriously where I'm like if I have a tool I'm going to invest as long as it can help me and increase my workflow and again this is a great project for you to have on your portfolio and showcase because there are people right now making $80,000 a month like levels IO making $8,000 a month off of this project there's some other dude who has same photo AI project making $100,000 per month so don't be cheap use these to learn let's keep going so now you can see I'm part of the Pro Plan and now I have 4,000 credits here okay so now I should be able to run this now I should be able to run this training job so let's actually go ahead and try it so I'm going to go ahead train it again so I'm going to pick Mariano head shot here um yep and then we're going to go ahead hit Pro now with Pro so let's go ahead and do that so we're going to train the model here refresh and the first one will fail but the second one should pass so here's my training data with these images right now let's go back let's go history and we can see it's running beautiful now that I have the credits to run it it's running it's going to take a little bit here so I'm going to go ahead and skip to the end here okay and there we go and our head shots are now finished generating so now we can go and check back with our app so now if I refresh here you'll see that the status is finished boom look at that and now we can see all the head shot that are generated you can see how professional Mariana looks here the the images that we put in for Mariana are not the best images so that's why it didn't create like the best results but you can see the results are actually not that bad these are pretty solid results I mean you guys can use a bunch of these photos as your LinkedIn photos or your resume photos Etc and you could search charging people for this at this point like you have this thing fully running right so there you go so I hope that you guys found that valueable like think about it we just built a full app from scratch that people legit developers and Indie developers like levels.io Peter levels is using this to make $80,000 per month and you were just able to build it in the last what 30 minutes I mean that should be mindblowing and tools like TR Le make your life so much easier so I hope you got value out of it if you did Smash the like button I love your beautiful face and as always I'll see you in the next video peace

Channel: Clever Programmer

Views: 12,833

Keywords: cleverprogrammer, programming, developer, javascript, web development, coding, programmer, software developer, software development, react js, tutorial

Id: aysrmDYhEqg

Length: 36min 12sec (2172 seconds)

Published: Thu Feb 15 2024