My Ultimate Tech Stack for 2024 | Nextjs Starter Template #nextjs14

what's up YouTube it's your boy Michael back at it again with another video and in today's video I'm going to be sharing with you the ultimate Tech stack to launch your SAS company product whatever it is right I've come to realize that in the space that we're in uh of being a software engineer being a web developer um if you are in the space to build something to launch a product whatever it is you're going to need a TCH stack that you can move fast with and not necessarily nerd out about the small ingenuities um because at the end of the day customers care about products customer customers care about outcome and as a developer we need that sort of balance where we can you know where we can on two sides of the aisle we have like the Tex stack that we use but also the outcomes that the customer cares about right and this is a tech stack I'm very comfortable with in terms of building stuff very very fast I'm talking shipping in a day or two cuz the reason being is when you're when you're you know if you're using nextjs or react setup time can be a little annoying sometimes so what I've done is I've created my own nextjs starter uh kit that has all the stuff that I need to get started right away where I can just tweak a couple things and I can focus on business logic so that's what I'm going to share with you today now the GitHub to this is completely free not charging you nothing link is in the description um you can Fork it contribute if you want um all that good stuff so here is is here's what the starter template contains I use nextjs as a full stack framework so for both front end and backend uh the reason why it doesn't have a dedicated server um is because you know the assumption is you're probably not going to use websockets but if you are you probably use nextjs or if you have monies you can use something like Pusher uh which I've used for a project for a client um like a couple weeks ago uh which was annoying to work with but it works right Tailwind CSS for the CSS framework let me zoom in a little bit uh shaten UI for the component Library I just love shaten uh very simple can tweak the stuff um and I could just move really fast with it clerk for authentication now a lot of people might disagree with me on this but I don't want to spend time on authentication authentication is one of those things yes if you can build it yourself or use something like next o like you know you could be very specific with it but I'm focused on shipping the product I don't really think my customer cares so much about what authentic like if I build it custom this that and the third clerk does everything beautifully they handle security beautifully their web hooks are beautiful so I'm just going to use clerk so I use clerk for authentication uh react hook forms for forms with Zod for uh type schema for scheme of validation um obviously you want to uh validate on the back end but also do a little form validation on the front end I use Zod for that uh tanack query for any query or State Management superbase for database and then I use redis plus up stash up stash has this rate limiting package which again super easy super simple I see people on Twitter build their own custom one and it's like you know for the love of the nerd Dizzle sure but I'm here to build products I'm here to to to ship cool stuff so I want to eliminate as much of the unnecessary jargon as much as possible right and then I have a list of the environment variables you'll need here otherwise it won't work and the starter template sort of looks like this it's pretty bland and simple for a reason um there is no pricing section I do have a contact us form that you need to be authorized to sign in so now I'm just going to click click with go continue with Google I'm going to continue with my email sign in again clerk takes care of all of this beautiful so I have a beautiful contact dust form um and then you see like my profile pops up if I click on profile it's going to show me again clerk takes care of all this you can customize this if you want I know for one of uh my client's uh websites which was a church um that I serve at that I go to as well I built them a custom dashboard but again used clerk very simple and then if I click log out it'll log me out go back to the homepage light mode dark mode so very simple fairly easy uh but let's get into the code let's see what the code looks like so uh I was told by previous video to zoom in um so that's much clearer I'll click I'll close the terminal because we don't need this so let's start from the top so I can show you how this all works so we start with layout uh simple layout the layout is wrapped with the clerk provider um and then I have a theme provider that is from shaten um some simple metadata and I have uh toaster uh this is again uh from shaten um and then I have this wrapped by provider so if we go at the provider tab tag not the theme provider theme provider comes from chatsi and provider tag is something I wrote when you go to the provider tag it's a client component and this is your trpc provider because I use trpc your TC query provider and also your uh tanack query def tools uh I'll wrap this here and then again you have all the state set up for trpc which is lovely so that's what the layout looks like pretty simple I'll add some uh SEO stuff um in the new in the near future um but yeah so we can go to Pages again very simple uh pages and then I have an example here of calling uh get todos um which is on the trpc server very simple stuff again we'll go through that in a bit uh contact us page is just the server page with a client component now here's all the juicy stuff so I've wrote These in like template forms right like in basic example so let's say you have another form that you want to work on literally all you do is just copy this entire thing paste it into your new component and then just change the names around so for the contact us form you have first name last name message email again uh react hook form for the form um and then you can again have placeholders on the form make sure this is required if it's required true that means the person has to submit and then if there's an error and error message is um is output it I can maybe Show an example here let's go to the contact us sign in again let's just sign in real quick continue now if we go to contact test form let's just have Michael some email and if I hit send message is required if I remove my name first name is required so again just copy paste it Bros um so you have that um you have an onsubmit here where you can have some sort of API I think I have like a template API where you can store these into your database very easy fa very simple and then we have o so here's how o works with clerk they tell you to create uh an O folder with three folders the sign in which is again as simple as this because this comes from them this is from clerk nextjs a sign up again very easy and then a user profile yeah they make it so simple now if you want to have a custom one like a custom for form you could do that it's a little extra work and if you want to make it look nice and stuff you could do that I don't want to CU it doesn't really matter uh customer not going to care and then when we go to op apis you're going to have to have uh a web hook essentially what happens is when the person signs up if they sign up the first time this fires off uh a web hook to Clerk and then you can you know store this uh information in your database like when you user creates a profile like if you want to do like a subscription or like some sort of paid uh stuff I'm assuming for your SAS uh you're going to have to store your user information that like you know user got created if they changed something and like I have a web hook API um that deals with all that for you and then I have conditionals here if the event is created you can push this to your database and I will show you how that works in a second um I have a template uh API route so a get function that also comes with the rate limiting so this is how rate limiting works with upstack super simple super easy um it it just doesn't get any easier than this um and you can set the limits to however you want um and then here's the trpc setup right trpc setup and then there's a trpc folder again I'm not going to go through all these to show you how these all work I'm just trying to show you how the setup is so you can build quickly with this and then you have components there's various components that I downloaded from shaten and then when you go to the server folder this is where you would write write your procedures so I just have a simple get todos that returns this array very simple stuff and in utils is where some cool stuff happens so in uols I have all my DB calls with superbase so the first one is user create if you guys remember um with that web hook with clerk it calls this user create um DB calls so I have a schema again the user has to be string the email has to be string type email and a description to describe it and then all I do is a simple superbase function that just inserts it to my database table very very simple and then you can have user logs if you want I left it empty and then if a user updates very simple and then I have a template function where this is how you would call super base create a server component client and then if you want to insert insert update all that stuff very very simple and then I have my hooks I I showed you guys in a previous video I have a Linked In the description how I use use qu uh react query I turn them into Hooks and I call them very simple that way um and it just makes the code very very much cleaner and then again don't forget your uh environment variables because when you run this for the first time if you uh get pull it won't work because you need uh the environment variables which again are linked in my GitHub repo so this is my starter template it's very very simple again it has nextjs Tailwind shatan clerk react Hood form uh Zod tan stag query super base and up stash for rate limiting everything you could possibly need to get started very very quick the moment you get started and you hit YN Dev or mpm or pmpm uh you have all this stuff set up for you you can tweak it however you like you even have the middleware I didn't talk about this but the one thing I like about clerk is you can have public routes or you can make sure that whenever someone use a specific router or is on a specific page that they have to be authenticated which again makes life so much easier security so much easier so this is my tech stack this is how I move super quick I know people might want to change the database and stuff like that but again I don't really care for um excuse my French the nerd Dizzle of things right I'm here to build products uh that people will love and enjoy maybe it's because I I I come from a product background I care about this stuff more um again I like to nerd out with certain Technologies like I've been playing um around with um various Technologies and I'll create videos about these but when it comes to building a sass I want to move fast and I believe this is the best way to move fast again if you want my starter template it is free link is in the description thank you so much for watching this video I hope to see you in the next one bye-bye

Channel: Ras Mic

Views: 3,680

Keywords: Nextjs, Nextjs 14, Ultimate Tech Stack, Best Tech Stack of 2024, Best Web Dev Tech Stack 2024, Nextjs clerk, nextjs 14 clerk, nextjs starter template, Nextjs supabase, Nextjs postgres supabase, Nextjs supabase clerk, Nextjs 2024, Nextjs react, Nextjs Template, Nextjs Starter Template 2024, The Best Tech Stack 2024, Serverless Tech Stack, Nextjs Vercel Deploy, Nextjs Clerk Vercel

Id: pxFzHV35B-U

Length: 11min 49sec (709 seconds)

Published: Mon Feb 12 2024