Ship Your Next SaaS In Minutes - Copy Me

0:00In this video, we're going to get this Nex.js starter kit so you can get your SAS up and running in just a few minutes. This is a starter kit that was just released about a month ago that I've been using to build these projects with uh by Michael Rasmik on Twitter and X and YouTube. Um he has put this out for people just to ship products faster. So this is what I used to build Easy Flip and this is what I used to build Perfecto Pick. So, it has everything that you need to build your project. You got authentication, payments, you got open AI uh key, so you can have a chatbot in there. So, this is what we're going to be installing today. So, you could get your project up and running. It uses also Neon for the database.

0:46Polar for the payments. Object storage is with Cloudflare R2. And we'll kind of walk through some of the components of this starter kit on why it's going to be beneficial for you to use. Number one, for me, it's easy. I don't have a ton of experience. I want to know, you know, what are these components that I could plug into play into my project that just work, you know, and all of these work really well together. Here's a quick overview of the starter kit. Uses Tailwind, it uses Shad CN, uses a lot of the modern um infrastructure to build your front end and then as well as the back end. uh Drizzle, Neon, Cloudflare, and also has Post Hog, too, um for um product analytics and things like that. So, a lot of cool things going on, but we're just going to get this starter kit

1:32up and going. That's the most important thing. So, the first thing you're going to want to do, and this is what I do. There's many other ways to do it, but I just download the whole repository on GitHub. I'll link everything down below for you. So yeah, I just download the whole repository on GitHub and then I go into my uh projects folder. So I just go to So I just go into my projects folder and then I just create a new project. We'll just call this one test. One, two, three. And then I take the starter kit, copy, paste it, and then I fire up cursor. So yeah, once I'm in cursor, I'm actually going to just go file and then I'm going to open a new folder, the folder we just created under my project. So it's test one, two, three, and then

2:18we're going to select this folder, the next JS starter kit. Once we have that selected, the first thing that I like to do, which I think is one of the more important, is to copy the environment variable uh file. So you can see there's an example one here. You're just going to select everything in here, copy. You're going to rightclick, new file, env. Boom. Done with that. You're going to paste it. And then I just delete the example. This is just to keep things nice and clean and fresh. So once that is done, I then open a terminal to install all of the packages. So mpx install. And that's just going to install all of the packages in this folder. PM. There we go. MPM install. So

3:04now once that is going um it's going to install the packages and then we start working on the environment variables. We're going to knock down knock out each environment variable in this um f file and that way you have a product that is up and running. The first thing we're going to set up so the front-end URL um that's we're just going to be doing this locally. So, the development is just going to be localhost 3000 and um as this installs, we'll work on getting the Neon database set up. Uh Neon, very similar to Superbase. Choose whatever you want to use, but you're going to want to go to Neon. I have tons of other projects here that I've already started. Um good and not not a great thing, but

3:49not a bad thing either. U you're just going to click new project, and we're just going to call this test one two three. You're also going to want to select the region that is closest to you. So I select Oregon um wherever your um server is going to be hosted anyways. And then you just select everything as default. So then you're going to hit create. You're going to get redirected to the dashboard. You're going to connect click the connect button. Um and then you're just going to copy this string. You can do a development branch if you want to. I'm just going straight into it. um that's if you want to like have a draft for your for your database, but we're just going right into the development. So, you're going to copy this um Postgress SQL um string and then

4:36you're going to paste that into this terminal here. So, you can see neon Postgress SQL database URL. You're just going to paste that in there. Very simple. And then next, we're going to be knocking out the Cloudflare R2. This is going to be for storage, object storage. So, you're just going to go to Cloudflare R2. I'm going to put all the links to these websites down below so you could just click. Um, so yeah, we're going to go to account home. Um, this is kind of what it looks like. I have tons of buckets already started in in this account. So, um, you're the main thing you're going to look for is R2 object storage after you create your account. Um, and then you're going to go create bucket. We're going to call it test one, two, three. Just leave everything

5:21default. Create bucket. You're going to go to settings. And then you're going to um enable public development URL. We'll circle back to that later, but that's one thing you want to get done. And then you're going to go back to the R2 object storage. You're going to hit overview. And then you're going to go manage API tokens. You're going to go create account API token. We're just going to call it test one two three just to keep it simple. And you never want to select admin read and write. From my understanding, this is if you do select it, it's going to have access to all of your buckets. And that might not be a good thing since we're just we're working on multiple projects within this account. So we want to keep it separate. So we want object read and write and everything else looks good. We just keep

6:06it as default. Um oh, we want to apply to specific buckets only. So, right. So, you want to click apply to specific buckets only and you want to do test one two three and then you're just going to hit create account API token. Once that is done, you're going to get the access key ID and the secret access key. I'll show you where to plug those in. You're going to copy the access key ID. Go back to your environment variable. I'm using um cursor, by the way, to uh work in this project. I use cloud code within cursor. You could use VS Code. You could just work straight in the terminal, whatever you want to do. So, um, access key. Okay. So, access key ID. Copy paste

6:51that there. Upload image secret access key, which is right below. Okay. Now, it's asking for Cloudflare account ID. That is just in your homepage. You're just going to hit account home. And then you're going to hit these three little buttons here. Copy account ID. Copied. Done. Boom. And then um the bucket name was just test one two three. Test one two three. And while we're on it um in this starter kit, I believe there's still two hardcoded URLs that we need to update otherwise your image upload won't work. So let's just knock that out right now. Let's go back to our R2 object storage. Go to test 123. And then we're going to go to uh settings and then this

7:36public development URL just needs to be updated with yours. So we're going to copy that and then we're going to hit control shiftf and I'm just going to do um what was it? R2.dev. There we go. R2.dev brings up two files that need to be updated. The first one is this one. Um so let's just knock it out of the way right now. Boom. And you want to delete the https. There we go. And then I just save that. And then I move into this one. The next file, this needs to be updated. Leave the forward slash. Um, leave the forward slash and just delete all of that. And then update it with your personal one.

8:21There we go. Okay. And now we're going to file and save that as well. So that is all set. That's going to enable us to upload uh folder uh files like photos. So um that once that is done, we're going to go back into our environment variables. You can see we have it all set up. We got the neon database. We got the Cloudflare R2. Next is for better off. You can go get a random key uh generator. Whatever. As long as it's just randomized, that's all that matters. Um for now, you could just make up a random string of characters. Next is the Google OOTH. So, this is going to allow people to sign in to your app with Google OOTH, so they don't have to remember all these passwords and all

9:06that. So, this is a good feature to have. Um, it's just going to allow for more signups. The conversion rate is going to be better. You're going to get better um more people signing up because they don't have to create a whole new account and figure out a whole new password. They can just click Google signup. Let me just There we go. Turn that up. Okay. All right. So, this can be a little tricky, so stick with me here. Um, Google Cloud Console, God bless them. It is interesting to navigate if you've never been in this. Um, so once you're in the Google Cloud Console and you've signed up, the most important thing is this button here. You just click it because sometimes you're not always in the project that you think you are in when you're doing work. So, um, you're going to want to make sure

9:51you click on that and then you're going to select new project. We're going to call this project test. One, two, three. And then we're just going to hit create. That's it. No, there's more to it. See, we created that, but it's still on my old project. We're then going to click back into the projects. You see it populated there. You're going to click on test 123 or whatever you're calling yours. And then you're going to go to API credentials. So, APIs. Once you click on this little hamburger, you're going to go APIs and services credentials. That's going to load in. You're going to want to go configure consent screen. Get started. App name test 1 2 3. User support email should just be the email you signed up with. You're going to hit external. Next, email address. Boom. Next. Finish.

10:38Continue. Create. All right. Now, you're going to go back API services credentials. And then you're going to create credentials. OOTH client ID is what you're going to create. Application type is a web app. The name is test one two three. The URI since we're going to be local is http semicolon slash localhost 3000. And then for the authorized redirect URI is API o callback Google. And then you're just going to hit save or create. And that's going to give you the client ID. Pull this back up. Client ID right

11:23there. And then you're going to go back. Client secret. Boom. This is going to enable you to now log in with Google. And I just like to save it. Next, we're going to be knocking out Polar. That's pretty much done. Um, once you hit okay, um, it should be saved in there, ready to go. And what you're going to need to do when you go into production, you're going to need to update your JavaScript origins with your production URL and as well as the redirect URIs and any other correlating ones that you're, you know, any other outside applications that need to access Google. So once that is done, we are then going to start go to polar. You can do this in sandbox mode or you can just set it up for production. I set

12:08it up for production um because it's just ready to go um when we push live. So what we're going to do is create new organization. We're going to call it test one, two, three. And I understand. Boom. Oh, we'll go one, two, three, four. Create. Okay. test project testing YouTube. There we go. Once that is done, I will create a product later. Skip. The main thing is you're going to just want to hit settings, go to general, go all the way to the bottom where it says developers. We're going to create a new token, an access token for our app. You're going to select all of these. Expiration is no expiration. In the name, I just put test one two three. Create. It's going to give you a token.

12:54You're going to copy it. You're going to go back into your environment variable and you're going to copy paste that access token. Then you're not going to touch the polar success URL. That stays the same. The next thing is the polar web hook secret. You're going to web hooks add endpoint. Unfortunately, you need to manually select all of these. These are going to be basically these trigger events. So when a customer signs up, it creates them as a customer. If they pay for a subscription, it creates another event and so forth. From my understanding, I've only been doing this 90 days. So, this is just what I've done on how I've built these projects out. For URL, I just choose my production URL. So, maybe I haven't even found out if that domain was available. Just put

13:39in whatever production URL you're going to be using. So, I just like to go https slash. We'll just call it test123.com. And I believe it's API off Polar. Okay, so that is correct. So API off Polar and then replace this whatever like if you're hosting on Verscell, you're going to want to replace that if you haven't picked a domain name yet. So you're going to hit create. Oh, payload is going to be raw. That's JSON format. And you're going to hit create. You're going to hit copy secret. You're going to go to your polar web hook secret and paste that in there. The next thing for next public starter tier and next public starter slug is just basically creating a product. So next we're going to create

14:26our product. New product. We're going to call it test one two three. We're going to do a monthly subscription. $20. That's it. Create. You're going to click back into the product. And then you're going to hit this three uh little buttons. Copy product ID. That is the starter slug. Starter tier is just called test one two three. And then we're going to show you how to get your open AI uh API key, which you're going to go to platform.openai.com and you're going to go into your dashboard. If you don't have a dashboard access, you're going to want to sign sign up. And then you're going to hit API keys. And then you're going to create a new secret key. We're just going to call this test 123. This is going to enable us have to to have access to GPT4 within our project.

15:13uh chatbot. So just test one, two, three, create secret key. That's it. You're going to copy it, go in, paste it. Um and then once you're all done with the environment variables, you're going to want to hit save. Once you hit save, um you're going to then want to um install um run a Drizzle command so it builds the tables within Neon. So, we're going to go npx drizzle kit generate. That's going to create all the tables within neon. And then you're going to go npx drizzle kit push. Then it's going to push the changes to neon and we will see those tables be created. So, you're going to go back into neon and then you're going

15:59to go to tables and you should see all your tables here. Account, session, subscription, user verification. So now people can start using your We're not done yet. So uh we're going to go npm rundev and we're going to fire up the server, the dev server, and we're going to log in and run it. So I'm just going to do it in incognito mode because I've been doing this all day and I don't want anything to conflict with login just for presentation purposes. So here it is. Obviously, you're going to make it how you want, but um just shows you like basic, you know, what what are the tools that we're using to build this product out. Um the cool thing is now that we have everything started, we go to get started and you're able to log in with

16:45Google and there we are logged in. So, this is the dashboard. Obviously, change it however you want. Let's see how the chat feature works. Like I said, this is just um plugging in your Open AI key. What model are you? um based on OpenAI's GPT4 model. Awesome. And let's see if that um storage bucket fix that we did. Remember the kit itself has two hard-coded URLs for the storage upload that you'll need to replace with your bucket URL. Just keep that in mind otherwise it won't work. So you can see that that works here. And then you also have the gated payments here for when you uh eventually go to production. you can then um optimize that for whatever products you're looking to sell. So, I wanted to

17:31make this video because we've been pumping out some projects recently and I know I haven't been making too many videos um because we've been cooking and I'm sorry for that. But now that we're kind of getting, you know, the dust has settled and I launched Easy Flip, uh if you haven't seen that progress progression, that was literally me not knowing what Claude Code was to then building this product out. This is basically just a web app that people can upload photos to and then it crosslists those uh items onto eBay, Poshmark, Merkari using GPT Vision and um a couple other APIs in the background. So that's amazing. We have about 30 subscribers. So that is awesome. And I just actually updated it. So you have a free trial

18:16now. So if you are watching this and you have some stuff to sell, we do have a free trial for easyflip.ai. Another thing we've been working on is called Perfect Pickic, which is an amazing passion project. I'm excited to see this. We're basically within just the first weeks of launching this, but it also uses some back-end APIs to help real estate agents or photographers get better photos for their MLS listings. You can see here the before and after and the power of these products that come out that you could just build upon. So, that is cool. We we built that. The other uh app I've built and working on is uh called Pray It Up and it's basically a action plan for your prayers. So that's what I've been working on and I'm excited to share. If you have any questions, leave them down

19:02below.