The Tech Stack To Make Money FAST
TCThe Coding Sloth@TheCodingSloth · 643K subscribers
- Views
- 232K
- 231,957
- Outlier
- ×1.9
- Median 125K
- Length
- 20:11
- Published
- Aug 4, 2025
- Monday
- Comments
- 564
- 13.4K likes
Script
How it's written
- Words
- 4,751
- Words a minute
- 235
- Reading time
- 20 min
- Segments
- 14
The hook
0:00–0:26I just don't understand. Why is finding a good tech stack so hard? I just want a fast and easy way to set up a new project. Is that so hard? Well, apparently the answer is yes. Trying to find a good tech stack is like opening up Pandora's box. There's so many tech stacks. There's so many opinions, a whole bunch of people saying, "Oh, my tech stack is better than yours." You want proof? Just look at the comment section of this video. There's probably people arguing about a tech stack right there. But on the rare occasion where people aren't arguing, there's
Structure
I just don't understand. Why is finding a good tech stack so hard? I just want a fast and easy way to set up a new project. Is that so hard? Well, apparently the answer is yes. Trying to find a good tech stack is like opening up Pandora's box. There's so many tech stacks. There's so many opinions, a whole bunch of people saying, "Oh, my tech stack is better than yours." You want proof? Just look at the comment section of this video. There's probably people arguing about a tech stack right there. But on the rare occasion where people aren't arguing, there's reasonable people saying, "Oh, your tech stack depends on your project." Fair enough. All right. It's a classic. It depends. So, it had me thinking, okay, why do people build projects in the first place? Maybe for education, to learn new things. Reasonable. Maybe out of necessity. To fix your garbage code makes sense. Maybe a hint of passion. Or, if we're being honest, money. But if you really think about it, why do a lot of people want to learn to code? Excuse my language, but it's to get a job. And why do they want a job? To increase stakeholder value. For you unemployed people, that means money. And why do some people make passion projects? Is it really out of passion? sometimes, but other times it's to quit their job because of money. It's all money. It always has been money. So, when you think about it like that, if everyone's building projects to make money, maybe, and hear me out here, this might be a crazy idea, we should use a tech stack that helps us make money fast. Oh my god, I did it. I cracked the code to a good tech stack. Today, we are not software developers. We are lazy capitalists. Maximum profit, minimum effort, we will ALL BE RICH. YEAH, this video is sponsored by Clerk. Yeah,
Watch from 0:00money. So, what exactly is this text act? I like to call this the ultimate blazingly fast money-making text stack. For our front end and back end, we're going to go with Nex.js. Yes, I know that some of you don't like Nex.js, but it's great. Okay, it's one of the easiest ways to deploy a backend and front end at the same time that fully understand each other. But if you really don't want to use Nex.js or you already know your project doesn't need those features, I also recommend React Router or Tanstack Start. They're also really great. But if you don't want to use React or JavaScript in general, go figure that out because I only know JavaScript. Sorry, I can't code. What do you expect? Now, for our database, we're going to go with Convex because not only is it a database, it's a realtime database. So, when your data changes, it updates instantly. No refresh buttons, no please wait, no disgusting loading screen. The moment the data changes, it updates in real time. It just works. You don't have to mess around with websockets and coding all that from scratch. You can just add Convex and let them do everything for you. Because I promise you the engineers there know way more about databases and websockets than you and me. Now another great thing about convex is you get type safety because everything in convex is Typescript. Everything your schemas TypeScript your database queries TypeScript your API TypeScript your mom probably TypeScript since everything is type- safe. This means you'll get amazing autocomplete when you're writing code and you'll also get instant feedback when something's wrong. This means you can catch bugs before they happen instead of discovering them when customers are trying to use your app.
Watch from 1:31Basically, JavaScript was a mistake and it should have been statically typed in the first place. Now, for O and billing to start making some of that money, we're going to go with Clerk because they have the easiest, the fastest, and the best developer experience for setting up O and now billing. It has all the login methods you need, emails, passwords, usernames, login with Google, GitHub, Discord, even Roblox. I'm kidding. Clerk should add that though. You get user management. You get a full dashboard where you can see every user. Ban the bozos that ruin everything. Check who's paying. check who's not paying. You get to see the user profiles, metadata, custom fields, everything you'd need. And I know what some of you are thinking. Wait, Convex has Oth. Why don't we use that? And recently, there's also better off, so what about that? And you're right. Those options do exist, and I did use them, and I really like them. But then I learned about Clerk's new billing feature, and it's one of the best things ever. It's honestly lifechanging for payments. But we'll talk about that later because now for our UI, we're going to go with Shad Cien and Tailwind because it's the fastest way to set up a nicel looking UI and nobody's going to give you money if your project is ugly. And finally, for hosting, we're going to go with Versel because it's really easy and it takes like 2 seconds to host if you're using Nex.js, but you can use a different hosting provider if you want. I just use it because it's really fast and convenient. This is basically the fast food of tech stacks. And before you complain, think about it. Fast food is quick, cheap, not as cheap as it used to be. Consistent and it gets the job done.
Watch from 2:51You know exactly what you're getting. You want a burger? 2 minutes. Now, is this tech stack gourmet? No. Well, debatable. Will it feed your family? Absolutely. Will tech Twitter judge you? Yes. Is your bank account going to care? No. So, what do you all think about this text? Why are you hosting? What are you stupid? Yeah. Yeah. Yeah. You all have your own little special tech stack. Cool. Good for you. But this is my video, so I'm just going to ignore your opinion. Now, the beauty of this tech stack is that it comes with a lot of features that would normally take you weeks or even months to build from scratch. You'd need to either one, build everything yourself, or two, use a bunch of different services. Either way, you're looking at managing 8 to 10 different services that don't integrate that well, or you're spending months building features that this stack gives you instantly. But it's more expensive. Yes, technically that's true. But that's only if your project has a lot of these things we call users. And if I'm being brutally honest with all of you, 99% of you won't have users. But on the 1% chance you do, you'll probably still qualify for the free plan of Convex and Clerk because they're really generous and amazing. For example, Clerk gives you 10,000 monthly active users for free. And the key word here is active. And Clerk defines that as someone who returns to your app 24 plus hours after signing up. Which means if someone makes an account and they never use your project again, Clerk doesn't count it. By the time you actually need to pay for any of these services, you're already making more than enough money to live comfortably.
Watch from 4:12Here, let's do some quick math. Let's say you charge $10 a month for your project. Let's multiply that by 10,000 users based on clerk's limit. That gives you 100,000. This means you'll be making around $100,000 a month. That's a lot. If you're making around $100,000 a month and you're complaining about paying a few hundred for infrastructure, you're just being Mr. Krabs level greedy. Okay, I'm being a little generous. You'll probably pay a little more than a few hundred because there's stuff like the database fee, the hosting fee, the biggest of them all, the billing fee. But even then, you're making a good amount of money. You're rich. There's no sugar coating this. You're just rich. And if you're still somehow breaking even when you're making this much money, this might be a skill issue on your end. For a quality database service and all service, I think it's worth it because these services are maintained by engineers that are way smarter than you and me. Now, of course, this doesn't apply to all projects. Maybe you want the project to be free, which is fair, but remember what this video is about, money. This isn't about using the coolest technologies or to learn something new or for a resume project. That's what personal and hobby projects are for. This tech stack is all about that money. And for that specific purpose, this stack is blazingly fast and it works great. And it could change in the future because tech is always changing and there's still a lot of services I haven't used. But as of right now, this tech stack is peak. And it's not just me. A lot of other people like this tech stack and I'm positive it's going to get more popular in the future.
Watch from 5:39But you know what? None of this matters if you can't make money. That's the point of this video. And this this is where traditional tech stacks make me want to commit arson. Let me walk you through how traditional payment flows work step by step. So your user wants to give you money. Simple, right? Wrong. Here's what actually happens. Step one, the user logs in. You have your all system. That's a whole another problem. Cool. User logs in. We know who they are. Step two, user clicks your subscribe button. They buy your GBT rapper. Okay. Your front end sends a request to your backend saying, "Hey, Karen from Ohio wants to pay us." Your backend now has to create a Stripe checkout session. And this is where the problems start because when you're creating that checkout session, you have to create a Stripe customer. Now, what's the problem with this? Your user exists in two places, your off system and Stripe. The problem here is they don't talk to each other. They have different IDs. Your user has ID, user 123. Stripe creates a customer ID, customer ABC. So if you try to use your user ID, this is what would happen. Hey Stripe, did user 123 pay?" Stripe would say, "Who the is user 123?" Which means you have to map them yourself in your database manually. Step three. Once your backend processes the Stripe checkout session, your backend is going to respond with a checkout URL. and make sure to use the customer ID and not the user ID. Your front end is then going to redirect them to Stripe and now they're on Stripe's website. Step four, let's say they actually pay or they don't. Stripe now needs to tell you what happened. And how do they do that? Web hooks. Step five, Stripe sends that web hook to your server, right? But wait, it could be fake. So, you need to verify the
Watch from 7:01signature. Wait a minute. Stripe has like a one gazillion types of web hook events. So, now you have to implement those. Step six. Okay, you received the web hook. You have the code to handle all those events. Now you need to update your database because Stripe's not doing that. You have to find the user by their Stripe customer ID, which I hope you saved. If you didn't, you already messed up. Now you have to update their subscription status. And don't mess this up because Karen from Ohio already paid. This is all on you. Step seven, here's the best part. Your front end doesn't know any of this happened yet. It's still sitting there like an idiot. So, it has to keep asking your back end, did they pay yet? Did they pay yet? Did they pay yet? Did they pay yet? Step eight. Finally, your front end knows they're a paying customer. And now Karen from Ohio has her premium subscription all in a day's work. Unless the web hook failed or arrived late or there was a race condition or you got rate limited or now you see the problem with this. The process is annoying and there's a lot of code you have to write. Now it's not difficult, but it is annoying to have to deal with. And there's also a lot of areas where this could go wrong. You're going to be there at 3:00 a.m. looking at your logs, looking at your database, trying to figure out why Karen from Ohio paid for premium but can't access premium. And you know what the problem usually is? Your programming skills. Well, that too, but the web hooks. Which is why I'm very thankful for Clerk for handling all this for us. Instead of writing hundreds of lines of payment code, you basically write zero. And this is possible because authentication and billing are pretty tied together. In order for a customer to buy a subscription, they usually need an account, which means we don't have to deal with those yucky web hooks anymore.
Watch from 8:31We don't have to deal with state syncing. We don't have to deal with any of Stripe's APIs. We can just let Clerk handle all of that. What? Basically money. Now, I'm pretty lazy. You're also probably lazy. So, you already know why I'm loving this feature. Now, some big disclaimers, though. Their billing feature is still in beta. So, a lot of features are still in development, but once they have them ready, I am confident that this will be one of the best ways to add payments to your projects. Wow. Okay, that rant was longer than I expected. All right, let's move on and let's be real programmers and let me show you how easy it is to set up a new project with this tech stack. By the end of this, we'll have everything database authentication and billing so you can start working on your next billiondoll idea. All right, so step one is setting up Nex.js Tailwind and Chaten. I like to do this using Chhatzen's website. So let's go to Chaten's website. Let's click get started. Select Next.js or whatever framework you picked. And then we're going to copy this terminal command that it shows here. Feel free to use whichever package manager you like to use. For this video, I'm going to go with npm since more people use npm. I personally use pmppm though. Now inside your terminal, you're going to paste the command and then run it. And then you're going to go through this quick installation process. First, it's going to ask whether you want a next.js project or a monor repo. For our project, we're going to select next.js project. Now, once you select that, name your project. Name it whatever you want. Press enter and the project will start setting up. Now, the final part is asking what type of theme you want. Feel free to select whatever option. You're probably going to change the theme anyways, so it's not that important. And after you do that, it should be complete. So, open up your IDE and then run npm rundev. And just like that, your project is set up. Step two, setting up
Watch from 10:02convex. In your terminal, we're going to install convex by writing the command npm install convex. And once you have that installed, the next thing we're going to do is run the command npx convex dev. And this will start the process of creating a new convex project. Once you do that, convex is going to ask if you want to create a new project or choose an existing project. We're going to go with creating a new project. And after that, it's going to ask us to name the project. Name it whatever you want. If you want to keep the same name, just press enter. And the last thing it's going to ask is if you want to use cloud deployment or local deployment. If you're into hosting it yourself, go with local. But I don't use Arch Linux, so we're going to go with cloud. And once you do that, Convex is set up. It's that easy. Once that finishes, you can check your project, and you're going to notice this Convex folder. This folder is going to contain all our backend and database code. But we'll come back to this later. We have one more thing to set up. Step three, setting up O with Clerk. Setting up Clerk is pretty easy, too. We're going to go to clerk.com or click my link in the description if you're lazy and sign up or log in. Once you're logged into clerk, click create application. Name it whatever you want. Money printer, million-dollar app, I don't care. And now you get to do the beautiful part. Select whatever signin options you want. And once you're done, click create application. And once you do that, you're going to see these steps to set up clerk. We're actually going to follow the first three steps. We're not going to follow the rest because it's a little different with convex. So go to step one and copy the install command. And in your terminal, run the install command.
Watch from 11:33Once that install finishes, go back to your clerk dashboard, go to step two and copy your API keys. Once you copy those keys, go back to your project and in yourv.loc file that convex created. I forgot to mention it does that. Sorry. You're going to paste your clerk API keys. As always with API keys and environment variables, do not commit this file. Do not tweet these keys. Don't show these keys to anyone. Wait a minute. All right. Now that we finished that, we're going to go back to Clerk's dashboard and we're going to move on to step three and copy the code in step three. Go back to your project. And once you do that, we're going to create a middleware file. You're going to create this in the root of your project. So create that middleware file and paste that code into the file. This middleware file is what allows Clerk to do authentication and to protect routes. So users can't access certain pages if they're not signed in. Technically, we just finished our clerk setup. Yay. The problem is it's not connected to Convex. A. So let's fix that. Step four, connecting Clerk and Convex. For this step, we're going to be using the guide from Clerk's documentation like a proper programmer. I'll leave this guide in the description, too, if you're too lazy to search it up. So, first we're going to go to our clerk dashboard and we're going to set up a JWT template. If you don't know what a JWT is, then um I strongly recommend doing research on that. In our clerk dashboard, we're going to click the configure tab and then you're going to look for the JWT template section. Once you find it, click it and you're going to be on this screen. Once you're on that screen, you're going to click add new template and all you're going to do is select the template dropown and change it from blank to convex. Once you do that, save your changes and copy that issuer URL there. Once you copy it, we're going to go back to our project. And inside your
Watch from 12:49local env file, we're going to create a new environment variable. And this environment variable is in clerk's docs. It's right underneath step three, the first part. You can copy and paste that if you want. I'm just going to type it out because I'm too lazy to re-record this. So, in your env file, create that environment variable. And then you're going to paste that issuer URL you copied from clerk. The next thing we're going to do is we actually have to add these environment variables to our convex database. Because if you don't, Convex is going to yell at you like this. Yeah, I messed up my own tutorial that I wrote. So, copy that clerk environment variable we just made and then go to Convex's website and go to your dashboard. Once you're in the dashboard, select your project, select settings, and then select environment variables. Click the add button. Once you do that, you're just going to paste with controlV or commandV and everything will be added to this. Thank you, Convex, for having this copy paste feature. Now that we finished that, we're going to go back to the clerk docs. You're going to copy this code snippet right here that says export default. And we're going to go back to our project. And inside the convex folder, we're going to create this file, o.config.ts, because we're using TypeScript. And inside that file, you're going to paste the code snippet that you copied. All that's left to do is to add the clerk provider in our project. So go to the clerk docs and we're going to move on to step five where it says configure the clerk and convex providers. You're going to copy the code right here that's underneath component/convexclient provider.tsx. And inside your project, we're going to create this file. So underneath the components, you're going to create the file convexclient provider.tsx. Once you create that, just paste the code that you copied and then go back to the clerk docs and we're also going to copy this code snippet for the layout.tsx. Go back to your project and inside your layout.tsx. We're just going
Watch from 14:19to replace the code with the code snippet we copied. And now once again, we're going back to clerk's docs. Yeah, we're going back and forth. I'm sorry. We're going to copy the code snippet here that's underneath step six. Show UI based on all state. Yoink that code. Go back to your project again. And inside your page.tsx, we're going to replace all the code here with the code we copied. And once you do that, you're going to notice in your project, you have this red squiggly of death. And it's actually a good thing because that means Convex is working just fine. Now, the reason why we have this red squiggly is because, as I mentioned before, Convex has type safety. So, it automatically generates the types for you to prevent errors such as this. This error is basically saying, "Hey, genius. We don't have a message query function. Create it or delete it." So, what does that mean? We get to go back to Clerk's Docs and we get to move on to the final step, step seven. And we're going to copy the code snippet right here, too. Once you copy that code snippet, we're going to go to our convex folder and we're going to create the file messages.ts. Once you make that file, just paste the code snippet, save it, and when you go back to your page.tsx file, you're going to notice the red squiggly of death is gone. Automatic type safety, baby. So, once you finish that, you're going to save your project. And when you visit your project, you're going to see that you can now sign in and sign out, test them out, and if you did everything correctly, you now have authentication and your first user. Woo! Step five, setting up clerk billing. to make that money. To set this up, we're going to go back to our clerk dashboard and we're going to go to the subscription tab. Click it and then you're going to select get started. From here, we're going to create our pricing tiers. So, select create a plan and clerk is automatically going to create a free plan. And once you do that, you're
Watch from 15:51going to see a free plan. Clerk sets this by default, but you can edit that if you want if you're a villain, but we're going to create a new plan. So, in order to do that, you're going to select either add user plan or add plan. Fill out the name, description, and price of the plan. You can pick whatever you want for this. Once you do that, you're going to be on the features of this plan. Now, these features here are actually pretty important because we can use these features later on in our code to check if a user has access to them. So, create your features and once you finish creating them, just select save. And just like that, we have two plans, a free plan and a premium plan. All that's left to do is to click that enable billing button. And just like that, we are ready to sell out. Now, we just have to add the billing to our project. We're going to be real programmers for a bit and we're going to read the documentation. You're going to click the read billing guide button, which will take you to the clerk docs for billing. And it's going to ask if you want to do B2C or B2B. For our tutorial, we're going to do B2C SAS. So, click that. And now we're just going to follow these steps. So, we already enabled billing. We already created a plan. We already added features. What we're going to do now is create a pricing page. So, copy the code snippet that's on here. And now, in your project, we're going to create this pricing route or the pricing page. So, underneath your app folder, you're going to create a new folder called pricing. This will create a pricing route. And inside the pricing folder, you're going to create a page.tsx file. And inside that page, just paste the code snippet. Save the file and you're done. Just like that, we have a working pricing page that takes payments. We can do a test payment.
Watch from 17:21Click this test payment button and boom, it works. And since Clerk also handles authentication. If you go to your account settings, you'll notice this brand new billing tab. If you click it, you'll see all your billing information, which lets you automatically switch plans, cancel your plan, change payment methods, everything billing related. Clerk handles it for you. And now for the best part. If you go to your dashboard, you're going to see we made our first internet money. We're rich. You see how easy that is? Compare that to the whole process I just showed you. You don't need to set up Stripe separately. You don't need to handle web hooks. You don't need to cry. You don't need to create the UI components. You literally just have to paste this component into your page and Clerk just handles everything for you. Overall, this text stack is amazing and fast to set up. How long did this take? It took like 9 minutes to set up everything. In 9 minutes, we have authentication, a database, and billing. We have all the boring parts of the SAS set up. At this point, you can just create whatever you wanted to make. And that was just the first time setting it up. Once you're comfortable with this text stack, you could probably get everything going in like 5 minutes. It's ridiculous. Now, I'm not going to go over how Convex works. I'm going to let you figure that out. I just wanted to show you how fast and easy it is to just set up the project because this is crazy. This this is so fast and I can't believe developer tools have gotten this good. All right, I think I've uh given you enough information to get started. If I missed something, go read the docs for yourself. You should know how at this point. This whole video was just me reading the docs for you anyways. Or askt because convex and clerk have good LLM support. AI can basically set it up for you, too. Go on, my new entrepreneur. Make us some money. I'll see you on the next video. Bye.
Watch from 18:41Full transcript
- 0:00
I just don't understand. Why is finding a good tech stack so hard? I just want a fast and easy way to set up a new project. Is that so hard? Well, apparently the answer is yes. Trying to find a good tech stack is like opening up Pandora's box. There's so many tech stacks. There's so many opinions, a whole bunch of people saying, "Oh, my tech stack is better than yours." You want proof? Just look at the comment section of this video. There's probably
- 0:21
people arguing about a tech stack right there. But on the rare occasion where people aren't arguing, there's reasonable people saying, "Oh, your tech stack depends on your project." Fair enough. All right. It's a classic. It depends. So, it had me thinking, okay, why do people build projects in the first place? Maybe for education, to learn new things. Reasonable. Maybe out of necessity. To fix your garbage code makes sense. Maybe a hint of passion. Or, if we're being honest, money. But if
- 0:43
you really think about it, why do a lot of people want to learn to code? Excuse my language, but it's to get a job. And why do they want a job? To increase stakeholder value. For you unemployed people, that means money. And why do some people make passion projects? Is it really out of passion? sometimes, but other times it's to quit their job because of money. It's all money. It always has been money. So,
- 1:05
when you think about it like that, if everyone's building projects to make money, maybe, and hear me out here, this might be a crazy idea, we should use a tech stack that helps us make money fast. Oh my god, I did it. I cracked the code to a good tech stack. Today, we are not software developers. We are lazy capitalists. Maximum profit, minimum
- 1:25
effort, we will ALL BE RICH. YEAH, this video is sponsored by Clerk. Yeah, money. So, what exactly is this text act? I like to call this the ultimate blazingly fast money-making text stack. For our front end and back end, we're going to go with Nex.js. Yes, I know that some of you don't like Nex.js, but it's great. Okay, it's one of the easiest ways to deploy a backend
- 1:46
and front end at the same time that fully understand each other. But if you really don't want to use Nex.js or you already know your project doesn't need those features, I also recommend React Router or Tanstack Start. They're also really great. But if you don't want to use React or JavaScript in general, go figure that out because I only know JavaScript. Sorry, I can't code. What do you expect? Now, for our database, we're going to go with Convex because not only is it a database, it's a realtime
- 2:07
database. So, when your data changes, it updates instantly. No refresh buttons, no please wait, no disgusting loading screen. The moment the data changes, it updates in real time. It just works. You don't have to mess around with websockets and coding all that from scratch. You can just add Convex and let them do everything for you. Because I promise you the engineers there know way more about databases and websockets than you and me. Now another great thing
- 2:28
about convex is you get type safety because everything in convex is Typescript. Everything your schemas TypeScript your database queries TypeScript your API TypeScript your mom probably TypeScript since everything is type- safe. This means you'll get amazing autocomplete when you're writing code and you'll also get instant feedback when something's wrong. This means you can catch bugs before they happen instead of discovering them when
- 2:50
customers are trying to use your app. Basically, JavaScript was a mistake and it should have been statically typed in the first place. Now, for O and billing to start making some of that money, we're going to go with Clerk because they have the easiest, the fastest, and the best developer experience for setting up O and now billing. It has all the login methods you need, emails, passwords, usernames, login with Google, GitHub,
- 3:10
Discord, even Roblox. I'm kidding. Clerk should add that though. You get user management. You get a full dashboard where you can see every user. Ban the bozos that ruin everything. Check who's paying. check who's not paying. You get to see the user profiles, metadata, custom fields, everything you'd need. And I know what some of you are thinking. Wait, Convex has Oth. Why don't we use that? And recently, there's also better off, so what about that? And
- 3:32
you're right. Those options do exist, and I did use them, and I really like them. But then I learned about Clerk's new billing feature, and it's one of the best things ever. It's honestly lifechanging for payments. But we'll talk about that later because now for our UI, we're going to go with Shad Cien and Tailwind because it's the fastest way to set up a nicel looking UI and nobody's going to give you money if
- 3:52
your project is ugly. And finally, for hosting, we're going to go with Versel because it's really easy and it takes like 2 seconds to host if you're using Nex.js, but you can use a different hosting provider if you want. I just use it because it's really fast and convenient. This is basically the fast food of tech stacks. And before you complain, think about it. Fast food is quick, cheap, not as cheap as it used to be. Consistent and it gets the job done. You know exactly what you're getting.
- 4:13
You want a burger? 2 minutes. Now, is this tech stack gourmet? No. Well, debatable. Will it feed your family? Absolutely. Will tech Twitter judge you? Yes. Is your bank account going to care? No. So, what do you all think about this text? Why are you hosting? What are you stupid? Yeah. Yeah. Yeah. You all have your own little special tech stack. Cool. Good for you. But this is my video, so I'm
- 4:35
just going to ignore your opinion. Now, the beauty of this tech stack is that it comes with a lot of features that would normally take you weeks or even months to build from scratch. You'd need to either one, build everything yourself, or two, use a bunch of different services. Either way, you're looking at managing 8 to 10 different services that don't integrate that well, or you're spending months building features that this stack gives you instantly. But it's
- 4:56
more expensive. Yes, technically that's true. But that's only if your project has a lot of these things we call users. And if I'm being brutally honest with all of you, 99% of you won't have users. But on the 1% chance you do, you'll probably still qualify for the free plan of Convex and Clerk because they're
- 5:16
really generous and amazing. For example, Clerk gives you 10,000 monthly active users for free. And the key word here is active. And Clerk defines that as someone who returns to your app 24 plus hours after signing up. Which means if someone makes an account and they never use your project again, Clerk doesn't count it. By the time you actually need to pay for any of these services, you're already making more
- 5:37
than enough money to live comfortably. Here, let's do some quick math. Let's say you charge $10 a month for your project. Let's multiply that by 10,000 users based on clerk's limit. That gives you 100,000. This means you'll be making around $100,000 a month. That's a lot. If you're making around $100,000 a month and you're complaining about paying a
- 5:58
few hundred for infrastructure, you're just being Mr. Krabs level greedy. Okay, I'm being a little generous. You'll probably pay a little more than a few hundred because there's stuff like the database fee, the hosting fee, the biggest of them all, the billing fee. But even then, you're making a good amount of money. You're rich. There's no sugar coating this. You're just rich. And if you're still somehow breaking even when you're making this much money, this might be a skill issue on your end.
- 6:20
For a quality database service and all service, I think it's worth it because these services are maintained by engineers that are way smarter than you and me. Now, of course, this doesn't apply to all projects. Maybe you want the project to be free, which is fair, but remember what this video is about, money. This isn't about using the coolest technologies or to learn something new or for a resume project. That's what personal and hobby projects
- 6:41
are for. This tech stack is all about that money. And for that specific purpose, this stack is blazingly fast and it works great. And it could change in the future because tech is always changing and there's still a lot of services I haven't used. But as of right now, this tech stack is peak. And it's not just me. A lot of other people like this tech stack and I'm positive it's going to get more popular in the future. But you know what? None of this matters
- 7:03
if you can't make money. That's the point of this video. And this this is where traditional tech stacks make me want to commit arson. Let me walk you through how traditional payment flows work step by step. So your user wants to give you money. Simple, right? Wrong. Here's what actually happens. Step one, the user logs in. You have your all system. That's a whole another problem. Cool. User logs in. We know who they are. Step two, user clicks your
- 7:23
subscribe button. They buy your GBT rapper. Okay. Your front end sends a request to your backend saying, "Hey, Karen from Ohio wants to pay us." Your backend now has to create a Stripe checkout session. And this is where the problems start because when you're creating that checkout session, you have to create a Stripe customer. Now, what's the problem with this? Your user exists in two places, your off system and
- 7:43
Stripe. The problem here is they don't talk to each other. They have different IDs. Your user has ID, user 123. Stripe creates a customer ID, customer ABC. So if you try to use your user ID, this is what would happen. Hey Stripe, did user 123 pay?" Stripe would say, "Who the is user 123?" Which means you have to map them yourself in your database manually.
- 8:06
Step three. Once your backend processes the Stripe checkout session, your backend is going to respond with a checkout URL. and make sure to use the customer ID and not the user ID. Your front end is then going to redirect them to Stripe and now they're on Stripe's website. Step four, let's say they actually pay or they don't. Stripe now needs to tell you what happened. And how do they do that? Web hooks. Step five,
- 8:27
Stripe sends that web hook to your server, right? But wait, it could be fake. So, you need to verify the signature. Wait a minute. Stripe has like a one gazillion types of web hook events. So, now you have to implement those. Step six. Okay, you received the web hook. You have the code to handle all those events. Now you need to update your database because Stripe's not doing that. You have to find the user by their Stripe customer ID, which I hope you
- 8:47
saved. If you didn't, you already messed up. Now you have to update their subscription status. And don't mess this up because Karen from Ohio already paid. This is all on you. Step seven, here's the best part. Your front end doesn't know any of this happened yet. It's still sitting there like an idiot. So, it has to keep asking your back end, did they pay yet? Did they pay yet? Did they pay yet? Did they pay yet? Step eight. Finally, your front end knows they're a
- 9:09
paying customer. And now Karen from Ohio has her premium subscription all in a day's work. Unless the web hook failed or arrived late or there was a race condition or you got rate limited or now you see the problem with this. The process is annoying and there's a lot of code you have to write. Now it's not difficult, but it is annoying to have to deal with. And there's also a lot of areas where this could go wrong. You're
- 9:29
going to be there at 3:00 a.m. looking at your logs, looking at your database, trying to figure out why Karen from Ohio paid for premium but can't access premium. And you know what the problem usually is? Your programming skills. Well, that too, but the web hooks. Which is why I'm very thankful for Clerk for handling all this for us. Instead of writing hundreds of lines of payment
- 9:49
code, you basically write zero. And this is possible because authentication and billing are pretty tied together. In order for a customer to buy a subscription, they usually need an account, which means we don't have to deal with those yucky web hooks anymore. We don't have to deal with state syncing. We don't have to deal with any of Stripe's APIs. We can just let Clerk handle all of that. What? Basically money. Now, I'm pretty lazy. You're also
- 10:10
probably lazy. So, you already know why I'm loving this feature. Now, some big disclaimers, though. Their billing feature is still in beta. So, a lot of features are still in development, but once they have them ready, I am confident that this will be one of the best ways to add payments to your projects. Wow. Okay, that rant was longer than I expected. All right, let's move on and let's be real programmers and let me show you how easy it is to set up a new project with this tech
- 10:32
stack. By the end of this, we'll have everything database authentication and billing so you can start working on your next billiondoll idea. All right, so step one is setting up Nex.js Tailwind and Chaten. I like to do this using Chhatzen's website. So let's go to Chaten's website. Let's click get started. Select Next.js or whatever framework you picked. And then we're going to copy this terminal command that
- 10:53
it shows here. Feel free to use whichever package manager you like to use. For this video, I'm going to go with npm since more people use npm. I personally use pmppm though. Now inside your terminal, you're going to paste the command and then run it. And then you're going to go through this quick installation process. First, it's going to ask whether you want a next.js project or a monor repo. For our project, we're going to select next.js project. Now, once you select that, name
- 11:14
your project. Name it whatever you want. Press enter and the project will start setting up. Now, the final part is asking what type of theme you want. Feel free to select whatever option. You're probably going to change the theme anyways, so it's not that important. And after you do that, it should be complete. So, open up your IDE and then run npm rundev. And just like that, your project is set up. Step two, setting up convex. In your terminal, we're going to
- 11:34
install convex by writing the command npm install convex. And once you have that installed, the next thing we're going to do is run the command npx convex dev. And this will start the process of creating a new convex project. Once you do that, convex is going to ask if you want to create a new project or choose an existing project. We're going to go with creating a new project. And after that, it's going to ask us to name the project. Name it
- 11:55
whatever you want. If you want to keep the same name, just press enter. And the last thing it's going to ask is if you want to use cloud deployment or local deployment. If you're into hosting it yourself, go with local. But I don't use Arch Linux, so we're going to go with cloud. And once you do that, Convex is set up. It's that easy. Once that finishes, you can check your project, and you're going to notice this Convex folder. This folder is going to contain all our backend and database code. But we'll come back to this later. We have
- 12:16
one more thing to set up. Step three, setting up O with Clerk. Setting up Clerk is pretty easy, too. We're going to go to clerk.com or click my link in the description if you're lazy and sign up or log in. Once you're logged into clerk, click create application. Name it whatever you want. Money printer, million-dollar app, I don't care. And now you get to do the beautiful part. Select whatever signin options you want. And once you're done, click create
- 12:36
application. And once you do that, you're going to see these steps to set up clerk. We're actually going to follow the first three steps. We're not going to follow the rest because it's a little different with convex. So go to step one and copy the install command. And in your terminal, run the install command. Once that install finishes, go back to your clerk dashboard, go to step two and copy your API keys. Once you copy those keys, go back to your project and in
- 12:57
yourv.loc file that convex created. I forgot to mention it does that. Sorry. You're going to paste your clerk API keys. As always with API keys and environment variables, do not commit this file. Do not tweet these keys. Don't show these keys to anyone. Wait a minute. All right. Now that we finished that, we're going to go back to Clerk's dashboard and we're going to move on to step three and copy the code in step
- 13:17
three. Go back to your project. And once you do that, we're going to create a middleware file. You're going to create this in the root of your project. So create that middleware file and paste that code into the file. This middleware file is what allows Clerk to do authentication and to protect routes. So users can't access certain pages if they're not signed in. Technically, we just finished our clerk setup. Yay. The problem is it's not connected to Convex.
- 13:39
A. So let's fix that. Step four, connecting Clerk and Convex. For this step, we're going to be using the guide from Clerk's documentation like a proper programmer. I'll leave this guide in the description, too, if you're too lazy to search it up. So, first we're going to go to our clerk dashboard and we're going to set up a JWT template. If you don't know what a JWT is, then um I strongly recommend doing research on that. In our clerk dashboard, we're
- 14:00
going to click the configure tab and then you're going to look for the JWT template section. Once you find it, click it and you're going to be on this screen. Once you're on that screen, you're going to click add new template and all you're going to do is select the template dropown and change it from blank to convex. Once you do that, save your changes and copy that issuer URL there. Once you copy it, we're going to go back to our project. And inside your local env file, we're going to create a
- 14:21
new environment variable. And this environment variable is in clerk's docs. It's right underneath step three, the first part. You can copy and paste that if you want. I'm just going to type it out because I'm too lazy to re-record this. So, in your env file, create that environment variable. And then you're going to paste that issuer URL you copied from clerk. The next thing we're going to do is we actually have to add these environment variables to our convex database. Because if you don't,
- 14:43
Convex is going to yell at you like this. Yeah, I messed up my own tutorial that I wrote. So, copy that clerk environment variable we just made and then go to Convex's website and go to your dashboard. Once you're in the dashboard, select your project, select settings, and then select environment variables. Click the add button. Once you do that, you're just going to paste with controlV or commandV and everything will be added to this. Thank you, Convex, for having this copy paste
- 15:04
feature. Now that we finished that, we're going to go back to the clerk docs. You're going to copy this code snippet right here that says export default. And we're going to go back to our project. And inside the convex folder, we're going to create this file, o.config.ts, because we're using TypeScript. And inside that file, you're going to paste the code snippet that you copied. All that's left to do is to add the clerk provider in our project. So go to the
- 15:25
clerk docs and we're going to move on to step five where it says configure the clerk and convex providers. You're going to copy the code right here that's underneath component/convexclient provider.tsx. And inside your project, we're going to create this file. So underneath the components, you're going to create the file convexclient provider.tsx. Once you create that, just paste the code that you copied and then go back to the clerk docs and we're also
- 15:45
going to copy this code snippet for the layout.tsx. Go back to your project and inside your layout.tsx. We're just going to replace the code with the code snippet we copied. And now once again, we're going back to clerk's docs. Yeah, we're going back and forth. I'm sorry. We're going to copy the code snippet here that's underneath step six. Show UI based on all state. Yoink that code. Go back to your project again. And inside your page.tsx, we're going to replace
- 16:06
all the code here with the code we copied. And once you do that, you're going to notice in your project, you have this red squiggly of death. And it's actually a good thing because that means Convex is working just fine. Now, the reason why we have this red squiggly is because, as I mentioned before, Convex has type safety. So, it automatically generates the types for you to prevent errors such as this. This error is basically saying, "Hey, genius.
- 16:27
We don't have a message query function. Create it or delete it." So, what does that mean? We get to go back to Clerk's Docs and we get to move on to the final step, step seven. And we're going to copy the code snippet right here, too. Once you copy that code snippet, we're going to go to our convex folder and we're going to create the file messages.ts. Once you make that file, just paste the code snippet, save it, and when you go back to your page.tsx
- 16:48
file, you're going to notice the red squiggly of death is gone. Automatic type safety, baby. So, once you finish that, you're going to save your project. And when you visit your project, you're going to see that you can now sign in and sign out, test them out, and if you did everything correctly, you now have authentication and your first user. Woo! Step five, setting up clerk billing. to make that money. To set this up, we're
- 17:09
going to go back to our clerk dashboard and we're going to go to the subscription tab. Click it and then you're going to select get started. From here, we're going to create our pricing tiers. So, select create a plan and clerk is automatically going to create a free plan. And once you do that, you're going to see a free plan. Clerk sets this by default, but you can edit that if you want if you're a villain, but we're going to create a new plan. So, in order to do that, you're going to select
- 17:29
either add user plan or add plan. Fill out the name, description, and price of the plan. You can pick whatever you want for this. Once you do that, you're going to be on the features of this plan. Now, these features here are actually pretty important because we can use these features later on in our code to check if a user has access to them. So, create your features and once you finish creating them, just select save. And just like that, we have two plans, a
- 17:50
free plan and a premium plan. All that's left to do is to click that enable billing button. And just like that, we are ready to sell out. Now, we just have to add the billing to our project. We're going to be real programmers for a bit and we're going to read the documentation. You're going to click the read billing guide button, which will take you to the clerk docs for billing. And it's going to ask if you want to do B2C or B2B. For our tutorial, we're going to do B2C SAS. So, click that. And
- 18:11
now we're just going to follow these steps. So, we already enabled billing. We already created a plan. We already added features. What we're going to do now is create a pricing page. So, copy the code snippet that's on here. And now, in your project, we're going to create this pricing route or the pricing page. So, underneath your app folder, you're going to create a new folder called pricing. This will create a pricing route. And inside the pricing
- 18:31
folder, you're going to create a page.tsx file. And inside that page, just paste the code snippet. Save the file and you're done. Just like that, we have a working pricing page that takes payments. We can do a test payment. Click this test payment button and boom, it works. And since Clerk also handles authentication. If you go to your account settings, you'll notice this brand new billing tab. If you click it, you'll see all your billing information, which lets you automatically switch
- 18:52
plans, cancel your plan, change payment methods, everything billing related. Clerk handles it for you. And now for the best part. If you go to your dashboard, you're going to see we made our first internet money. We're rich. You see how easy that is? Compare that to the whole process I just showed you. You don't need to set up Stripe separately. You don't need to handle web hooks. You don't need to cry. You don't need to create the UI components. You
- 19:13
literally just have to paste this component into your page and Clerk just handles everything for you. Overall, this text stack is amazing and fast to set up. How long did this take? It took like 9 minutes to set up everything. In 9 minutes, we have authentication, a database, and billing. We have all the boring parts of the SAS set up. At this point, you can just create whatever you wanted to make. And that was just the first time setting it up. Once you're
- 19:34
comfortable with this text stack, you could probably get everything going in like 5 minutes. It's ridiculous. Now, I'm not going to go over how Convex works. I'm going to let you figure that out. I just wanted to show you how fast and easy it is to just set up the project because this is crazy. This this is so fast and I can't believe developer tools have gotten this good. All right, I think I've uh given you enough information to get started. If I missed
- 19:54
something, go read the docs for yourself. You should know how at this point. This whole video was just me reading the docs for you anyways. Or askt because convex and clerk have good LLM support. AI can basically set it up for you, too. Go on, my new entrepreneur. Make us some money. I'll see you on the next video. Bye.
Description
// TUTORIAL RESOURCES //
Shadcn: https://ui.shadcn.com/
Clerk: https://go.clerk.com/sloth-fs
SponsorConvex: https://www.convex.dev/?utm_source=co...
Clerk + Convex docs: https://clerk.com/docs/integrations/d...
Clerk billing docs: https://clerk.com/docs/billing/overview
Go make some SaaS slop.
SponsorThis video was sponsored by Clerk.
// NEWSLETTER //
Sloth Bytes: https://slothbytes.beehiiv.com/subscribe
// BUSINESS INQUIRIES //
For business: thecodingsloth@smoothmedia.co
For brand partnerships: https://tally.so/r/mZVvKa
// SOCIALS //
Twitter: / thecodingsloth1
TikTok: / thecodingsloth
Discord: / discord
// TOOLS/THINGS I REALLY LIKE //
SponsorIf you wanna build 10x developer level projects check out CodeCrafters (40% off):
https://app.codecrafters.io/join?via=...
SponsorIf you want to build an awesome newsletter like Sloth Bytes I use beehiiv (20% off):
https://www.beehiiv.com?via=the-codin...
Sponsor(some of these links are affiliates, so I'll earn some money which supports the channel!)
More from The Coding Sloth
×279:41Learn To Code Like a GENIUS and Not Waste Time
The Coding Sloth3.4M views
×2414:2720 Programming Projects That Will Make You A God At Coding
The Coding Sloth3M views
×1810:54Using AI to NEVER LOSE in KAHOOT
The Coding Sloth2.3M views
×1616:36DESTROYING Cookie Clicker With My Cookie God Program
The Coding Sloth2.1M views
