Build a SaaS Web App with Cursor, v0, Next.js + Postgres

--- type: transcript date: 2024-09-30 youtube_id: k1OZ6c9gKj0 --- # Transcript: Build a SaaS Web App with Cursor, v0, Next.js + Postgres In this video, I wanted to show you how you can get started with building a micros. The dev tools, we're going to be using cursor. We're going to be using v 0ero. We're also going to be using postgress new. And then in terms of the text stack, we're going to be using nex.js. We're going to be using neon for our database. And then we're going to be starting out with this template from Lee, who I believe is on the developer relations team over at versell. He recently put out this nice little template that I thought I'd take a look at, run through it for you, and show you how you can set all of this up. The first thing that you can do to set this up is if you just go over to the repository with description of the video, we're going to go ahead and clone within the root of our directory. And then once we've done that, we're just going to cd within. So if I open up the enenv.example here, we'll see a number of different variables. There's a number of different things that we're going to have to reach for. But before we do that, let's just install all of our dependencies. pmpp. Once everything's installed, if you look within the package.json here, you'll see all of the different scripts that we can run here. What we'll do next, we'll just pmpp setup. We'll run that command there. What this will do is it will walk us through a process on whether we want to set it up locally as well as plugging in some of the API keys to get set up within ourv. The first question is do you want to use a local Postgress instance with Docker or do you want to use a remote Postgress instance? If you're going to be using it with Docker, just make sure that you do have Docker running. Then you can type in L and press enter. But in this example, I'm going to be showing you how to run it remotely. You can make a free account on Neon. Neon is a Postgress provider. Next, what we're going to do is spin up a simple database on Neon. You can set it up with Postgress 16 or 17. It doesn't really matter. And and you can also use this with any other Postgress instance. So say if you want to use a different provider like superbase, it doesn't really matter just as long as we have that Postgress database URL. Once you've set it up, you'll see your connection string here and you can also get it from the dashboard here. I'm going to go over to the dashboard and I'm going to select pulled connections. The reason why is the pooler flag as it mentions here is recommended for serverless as well as edge environments. We're going to take that then we're going to specify that it's a remote Postgress instance. Here is where we paste in our Postgress URL. I'm also going to be spinning this down after I publish the video. Don't worry about seeing any secret keys or anything like that. The next thing that we're going to do is we can enter our Stripe secret key. Stripe, if you don't have an account, it's really easy to go through the process to get it set up. Then once you're within Stripe, there's essentially two views. There's the live mode where you can actually charge real credit cards and all of that. And then there's also the test modes for development. If you just want to make sure everything's working as you would expect, that's going to be where you can select at the top here. As soon as you log in, you might not be within test mode. Just make sure that you turn that on and then you can click on the developers button and you'll have this view here. You can just grab your secret key. Once you have your secret key, you can paste this in here. Then once you run that, you will see you have av on the left hand side of your screen here with all of the variables. And in this case, all that we needed to set this up was the secret key po as well as the Postgress URL. Now, we should be all right to start our server now that we have our environment variables and everything's installed. And we can see that we have the local host here. And what I'm going to do is I'm going to open up a new terminal. And the reason that we're going to do that is we're going to run and forward the localhost 3000 API/stripe/web hook. And what this is going to be as soon as we get that payment validation or if there is an issue or anything like that, there's different cases here that it will run through. That's going to be what gets triggered. As soon as someone pays, this is how Stripe lets your application know that someone has paid or they changed their subscription or what have you. We'll just run this in another terminal. And just make sure that you're forwarding the correct port here. I'm on localhost 3000, but you can just swap this out to whatever port. Once you run that, you'll see that it's ready. And then we're good to go. Now we see that the application is working. We can see our pricing page. We can see our signup page. Now that we know this portion of the application's running, let's go back over to Neon just to familiarize oursel a little bit. We're going to run the command to set up and run the migration and also see the database here. What I want to show you step by step what's happening as we run these different commands here. What I'm going to do is I'm going to open up yet another terminal window. Then what we're going to do is we're just going to pnpm demigrate. So you can always look within the package.json to see all of the different commands that are there. We see that the migrations have run. You can take a look at the migrations and that's going to be something that I show you in just a moment here. Now we see these migrations have run. We have these five different tables here. We have the users, teams, team members, invitations, and activity logs. And next what we're going to do is we're going to run the db seed command here. So if I just pnmp dbced and then what this will do is now if we go back to the tables we should have some data within here. So here we see for the teams we have a test team the team members as well as invitations and activity logs which this will populate as soon as you start to use the application. Now that we have that, so you have a sense on these tables here. But a really great way to visualize this is there's a new tool that just came out and if we look within the lip and then go to DB and then we go to migrations here. I'm just going to copy this. So you can go to postgress.new. This is completely for free and I'll just start a brand new one here. What I love about this is if you just paste in your SQL and I just say create these tables for me. The great thing with this tool is it's a really great way to visualize your tables here. You can move them around. You can even edit them and tweak them. Say if you're building out your database schema, this is a really great option where you can just see how everything relates to one another. And you can iterate on this as well. With natural language, you can add things. You could say, "I'm thinking about adding this feature," and it can visualize and give you potentially a draft, maybe even a working copy of the migration that you need to run. What it allows you to do is as you start to tweak it with natural language, you'll see the migration that you can run to set up your database with the particular schema that you have set up. While this is a starting point, once you actually think of an idea for your SAS, whatever it might be, maybe a credit system or whatever, you can start to add that within here, and it's a really great place where you can play around. All right. Now, if we go back to our application and let's actually try and sign up here. Let's just try the test credentials here. The test credentials are test.com. The password is at123. It goes without saying, make sure if you ran the seed command that you do remove this before you actually push this if you're going to be using it for any actual production use case, but this is just to give you an idea of what you get once you logged in. You have the ability to change your password, delete your account here within general, you can add your name, and then you also have the ability to invite members. If I click get started here, all right, we see that it's within test mode. If you do want to test this out and pretend that you're actually putting through a valid credit card and all of that, what you can do for the card information is you can put in 4242 repeatedly and then you can put an expiry date in the future. And then for the CBC, you can put any three numbers. And then a similar thing for the card holder name, you can put any name within here. And also a similar thing for the country as well as the zip code. So you can put anything in here as well. Now, when I click start trial, you'll see processing and it's that familiar Stripe page that we've all used before, right? As soon as it's successful, you'll see that green check mark and then it's going to redirect us and we see that we're now on the dashboard here. All right, so that worked. We see the current plan is base. It's on the trial period here. And then if you go back to Neon and you select teams and if you just scroll over here, so now you'll see the customer ID from Stripe as well as the Stripe ID. Now on the database, if we scroll over on the teams table within the database, we'll see test team. And then on the far side here, we'll see some of the Stripe details, but then we see the plan name is base and it's currently triing in terms of the subscription status just to give you an idea and hopefully show you how these different pieces all work together. All right. So, now that we know some of the pieces are working, what we can do is we can get to work on whatever our idea might be here. If I just put this side by side and if we open up the homepage components, what I like to do is if I don't know exactly intuitively where something is, like if it's a project that I haven't used before, if you just globally search within cursor for a keyword on the page, wherever that component is. Here we see we have our homepage and there are all of these different sections here. What I'm going to do is I'm just going to select everything here and then I'm going to command K. I'll make this just a little smaller since we are side by side here. And I'm going to say I want to make this for to a SAS called super AI. This can really be anything. This is just for example sake. And then what it will do is it's going to go through a line by line and then it's going to edit our file here. It's really cool if you haven't used cursor before. It's very powerful. You have the ability to select different models. In this case, I'm using claude 3.5 sonnet. And if I just save that out, here we go. Supercharge your business with super AI, right? So, naming is hard as they say in programming, but this is just for example sakes. It even swapped out all the copy. Ready to supercharge your business. Join the AI revolution. Start your free trial and all of that. Now that we have that, we do see that we have this header here. If I just command shift F again, we can look for this acme. See wherever this is. And then what I can do here, we have the signup dashboard. I'm just going to get rid of that circle. And then we'll just call this super AI. And maybe we want it all caps or maybe not. Whatever it is. Next, we have this little component here. Let's go back to our other page here and see wherever that component is. So, we have this terminal here. We'll just get rid of that for now. So now if we make this full screen, we have the start of a respectable sort of web page, right? It looks not too bad. It's definitely a starting point. It can look better obviously, but this is just to give you an idea on where to start to look for some of these things. We do have a header that's within the layout here, but I'm going to say create a footer that matches the theme of the website. We see it's building out the footer here. It seems to be a pretty involved footer. Lots of detail here. Hopefully, it doesn't look too bad. It's even building out SVGs and everything for us. We'll go and we'll save this. We'll see what it looks like here. And again, like a good nice respectable footer. Like I gave very little direction for this. And it even gave us these different SVGs and it works. Like it's a starting point. This isn't a finished product by any means. That's not the intention of the video. It's really just to start to familiarize yourself on how you can get started with some of this stuff. Next, I just want to quickly show you if you're wondering, okay, where are these prices coming from? How did they appear within the Stripe interface or what have you, you will see this function to create Stripe products. Here we have the base product, we have the price, and then we also have the plus product. Once you put in your secret key from Stripe, you have the ability to create things, remove things, change the prices and the names. Of course, you can do that all within here. Let's go back to our dashboard. What I want to look up here is where this particular component is. We see the way that this is being set is with team.planame here. If we go to where that is. So, it's being passed within the settings component. Let's just search for the settings here. Now, we see our page.tsx. And then we see the team data. We see get team for user id. And if there's no team, throw the team not found. This is a really great starting off point if we want to create another page where we want to get information about that particular user. Here we see it's within this dashboard group here. What I'm going to do here is I'm just going to copy this code and then I'm going to add a new page. We're just going to call it superai. And then within here, let's add a page.tss. tsx. Within here, we'll just paste in the settings page. And I'm going to say instead of using the settings component, rename this to be the super AI page with Laura Ipsum. We'll save that out. Now, if we go back to our application and if I just type in super AI, we should see, okay, here's our Lauram, right? The next thing we can do is within our layout, we can go to our header and then we can just add in a link for super AI. I could just select this whole thing and I could say add in a link for super AI. The is super AI. We can see we can go to pricing. We can go back to super AI. Okay. Okay. Now, what I'm going to do is I'm going to say if the team data plan name is base, show a new base component. If it's plus, show another. Otherwise, show Whoops, you shouldn't be here or whatever it might be. So, you can play around with it a little bit. We'll ask a follow-up question because it's trying to import components. I'm just going to say make hello world components. Don't import any. We don't really have the components. We didn't quite follow it. If we used a better model, it probably would have been able to get it, but we see hello world base component. Then here you can essentially pass in your components. Now you can go over to V 0 and you can really build whatever you want. So you can say I want to build a chatbot that uses Open AI, make it simple or make it complex or whatever it is, right? So whatever unique idea you have or you want to try and sell or what have you, you can just build it out here. And the cool thing with V 0ero is it does really well with just general web development. Has a ton of context built within here in terms of being able to leverage different things. Here we can see that it's using the Verscell AI SDK which is in a lot of models still not within the training data or at least not within the training data to the point where it has the current iterations and what have you. But here you can go down you'll be able to see the sources and everything. The way you can do here is you can ask to tweak it, but I'm just going to grab this for now since it's just for example sake. And I'm going to go install this. So what this will do is if it's within a new Nex.js project, it's going to install all of the different dependencies that are within that particular component, whether it's shad CNUI components or different libraries it needs to install. And then once it's done, you'll find it within the components. Here we see the app page. And if we go back to the page we were working on and I just highlight it, I'm going to say I want to use the at files and then I can say app page if the user is a base or plus tier member. I can accept that. Take a look here. It's going to render this page here. One thing it didn't get. We just need to dstructure that instead. Now we should see our chatbot here. We can go within here and you can always just edit it here. Now the other thing I want to point out is in the bottom left hand corner you will see all of the different errors there. What you can do with cursor it it's just like two clicks to resolve little tedious things within our page component. I'm just going to say make full width and then let's just leverage claw 3.5 sonnet which still seems to be the best model for sort of day-to-day coding. Here you can just start to clean this up a little bit. We can remove the title or what have you. Maybe it's too large, but still a little too big there, but it's enough for example sake. Still not quite perfect, but I don't want to spend too much time on that aspect. You can always clean it up with just playing around with it a bit more. Next, what we're going to do is we have this backend route. And we can also just copy and add to codebase this component and put it within your project. Within the API path, I'm going to make a new folder called chat. And then we can just make a route called route.ts. and then we can paste that in here. All right, so right off the bat, there are some deprecations here. Let's just quickly look up the Verscell AI SDK with app router. We're just going to look down here. And then here is what looks to be the basic type of example. We'll just install this as well. Now that we have that, there are a bunch of providers within here, but just grab an API key from OpenAI and then within yourv, you can just add OpenAI API_key. It's the default convention out there. And then you should be able to interact with this. Let's go back to our page here. We see on the front end here that we are going to be using the React AI SDK here. Let's just test this out. If I just send in test, we see hello world. There we go. We have a basic application. It's working. This is like live text back from the model like how far away is the moon? And then there we go. We can say give this a max width and center it and a minimum height of whatever it is 600 pixels or something like that. We can go and save that out. And then there we go. We have our little chatbot here. Say if you want to log the chat history or if you want to add in rate limits or credits or what have you. These are just some ideas on some things that you can play around with. If I just log out just to show you this. Now, if you try and access this, we see it's trying to go to login, it should be sign up. If we just go back to SuperAI, let's just change this to sign up. And now, if someone tries to access that route, they get prompted to sign up. You could sign up. Otherwise, we can just try our test credentials here. Test.com as well as admin123. We'll sign in again here. And if we go over to super AI, we can interact with our chatbot here. I also see base features popped up. If the user is logged in, I'm not sure where that came from, but that's one thing just to be mindful of. If you're just quickly iterating with some of these coding tools, just be mindful. It is going to make errors. In terms of next steps, you could just go through and clean this up a little bit, resolve some of these errors. The cool thing with cursor is it can actually attempt to resolve some of your errors. If you just click that fix with AI button, it's really quick just to go through and clean up your project really quickly. And then once it's done, you can just deploy this. You can really deploy it to whatever you want. Once all your errors are resolved, there's definitely some other pieces you'd still have to build out here. For instance, on the signup page, there's no like magic links or any of the OOTH providers or what have you. There's also not something to forget your password and stuff like that. So, there's definitely still some extra steps to go. If you want to see more of these types of examples, just let me know in the comments below. Otherwise, that's it for this video. If you found this video useful, please like, comment, share, and subscribe. Otherwise, until the next