This Next.js Project is Awesome for Learning

when I see good code I like to share it I've done it in the past and you guys seem to really enjoy it as well I think it's one of the best ways to really level up your web development skills looking at projects that have good implementations clean code learning from that and implementing that into your own projects today I've got a really good one for you it has a lot of clean implementations I want to go through with you and talk about why I think they're so good why they make sense in your own apps and also what is not so perfect about this repository no code is perfect not yours not mine and not this repository either so let's talk about what I think is really good what makes sense to implement and what does not make sense to implement into your own apps so you can learn from both what this repository does really well and what it doesn't do well to leverage both sides and learn even more this is it and not only can you look through the repository and see exactly how things are built but there is actually a deployed version as as well that you can preview in the web so you can see basically what this is It's called skate shop the repository and well it's a shop that's meant for mainly skateboards and configuring your own skateboards but they've got a couple of really cool things that I want to highlight the first thing I really enjoy is the UI this is built with shad cnui you can see that in the source directory and then if you go into any page that we have in this app for example let's navigate into the auth and then the sign in by the way I'm gonna get to the auth in a second it's one of the best things about this repository you can see the UI components that we're making use of and let me zoom in so if you're on mobile you can see it easier for example the card right here it comes from a custom component and that is from UI card and if you know this pattern or this UI library that they're using under the hood it's chatsy and UI a reusable component library that you can style yourself and just makes a website look really good out of the box it has this typical style so if that's a UI Library you want to get into and I really recommend it because it's really good you can see how the proper implementations work of that in this repository then one of the best things about this repository is the authentication flow it's really well done I'm going to click on the sign in button and we can see a fully fledged sign in screen right here now very important to notice this is not done using next auth but an external provider that is named clerk that allows you for example to send emails out of the box with reset password and email verification and two-factor authentication and so on that makes this very easy and also a login with credentials which next auth itself does not recommend generally I personally also use clerk in my projects this is not sponsored I think it rapidly increases development time and decreases the time it takes you to roll out a product and if you want to see how this is done under the hood let's for example take a look at the M sign in file so we can navigate into the auth and then the the page we're currently on this design in page let's navigate to that and you can see there's also a reset password and everything if you want to take a look at how proper authentication is done in modern web apps again using a third-party provider and this is how you do it I look through the code it's really well done and part of it I'm even now using into my own app because the creator of this repository has done a very thorough and good job at implementing that for example how they split stuff into components is very elegantly done we've got let's look at the Imports a different sign in for the oauth providers so those are going to be let's move this into a side-by-side view to see this easier the oauth providers are these ones right here Google Facebook and apple this is a separate component then we've got the actual sign in form that involves the email and password as another client component and then the shell that holds all this information together that we can reuse across the sign in sign up and the reset password and so on so this is really well done in terms of reusability of the single components and not only that also these server client architecture I think is really well done the main page is a server component as it's mostly intended by next.js that's how you usually do it where you can Define the metadata and fetch data from your database as an async component if you need to in this case we don't need to do that and then the components that demand client-side interactivity like the oauth sign-in in this case or the sign in form that demands user input those are rendered as client components separately right here and then how they structure the components I think is really well done as well let's navigate into the source and then components as you can see there's an auth folder it forms layouts and UI I think the structure is really good and a bit more advanced like this is more for complex applications that have a lot of stuff if you're just doing a very simple portfolio chances are you don't need a folder structure this Advanced but we can see all the UI components mostly from chat cnui in this components folder slash UI and then all the auth related components right here so the log out button the oauth sign in buttons these right here in the single sign on callback is also inside of the components and then the forms contain all we need for for example the reset password this is a form or the email and password this is a form as well we can see there are a bunch of forms and this is actively being maintained 20 hours ago so this really is using the most modern tech is that always suitable for production probably not but is it really good to get a great understanding of how modern web development is evolving I think it is let's go into the sign inform.tsx now the naming of these components throughout the entire application do not match the react conventions on how you call file names but you don't always have to follow best practices and you can do whatever you want pretty much and I think this is perfectly readable so that's no problem at all and we can see the provider right here it's called clerk this is what's doing the authentication itself so we don't have to worry about all these security implications that come with maintaining passwords on or servers and we have a dependency called react hook form let's look at how they implemented the form there's a bunch of components we are importing here because I think it's really well done for example we are enforcing a certain schema client side this is what talk about a lot on this channel and we do the server side of course because we can never trust client input but when I enter wrong information here on the client side and click sign in this is what's happening under the hood these values are checked with this schema the auth schema which looks like this if we navigate into the auth right here we can see we need a password with a minimum length of 8 with a maximum length of a hundred that matches a certain regular expression and we are enforcing this one on the client side and then two on the server side so on both sides to ensure whatever data we get on the server is what we actually expect that matches our security requirements so if we go back right here we can see an email and a password and if these do not match the validation that this person has created that I also do in my apps this is a really good idea in terms of app security by the way in that case we're going to get error messages that are really well done in terms of user experience they tell us exactly what is wrong now in a real world scenario I think this regex for passwords would be a bit much like one uppercase one lowercase a number special character this is not what I would enforce in my personal production apps but if you want to make it really secure but also kind of piss off users that's what you can enforce in your app so we write validations to validate this user input that is validated client side right here with react hook form and then when that is submitted to our server or in our case to clerk but normally this would also go to your server in that case we can also validate this with the same validation on the server side to make sure this is valid input let's briefly take a look at the form itself it's implemented using a new component from chat cnui that is the form and I don't want to get into this in too much detail but just take a look at how this looks I think it looks really clean with the control the name and then the render what we are rendering out in the field just take a look you don't have to understand everything but I think this is a really clean implementation of how you can do forms or at least an example of how you can do this you don't have to use any custom form component and you could just use the regular as form that everybody else uses as well this is really fancy pants implementations but I think if you want to get into more advanced modern web development it might be worth taking a look at these implementations there are some other cool stuff in here like stripe Integrations that you can take a look at there's a store in store principle but then on the other hand there's also some stuff which I personally at least would not recommend if you wanted to roll this out as your own website specifically for eCommerce which this is meant to be the big blank space this right here the hero section on your home page is literally the most valuable space you have in an e-commerce store and this is using it in the worst way possible with just an image I would not do that myself the search bar taking over the entire screen it's not the most user-friendly if users are trying to browse products the images are not loaded and if you try to click some items there's a 404 page and I'm not saying that to shame this repository at all I just think there's a bit of room for improvement things you can do a little better to make this project even even better than it currently is there's a lot of very interesting stuff you can learn from this one other one that I want to quickly mention is take a look at this if we navigate to a page you can see the data is being streamed in that is really good for user experience that is something you should definitely look into implementing into your own app because the loading if we navigate to a page is instantaneous and only then is the data being streamed in later as I assume with suspense there's pagination you can learn how that is done and quickly as to see why or how the loading is done we can navigate into any page like for example the categories clothing t-shirts let's navigate into that right here categories and then we can see this is how it's done with next.js when you create a loading.tsx which is a reserved file name let's see what's in here and there's a loading product which is a you know custom component or something and this component defines the instantaneous result what is displayed when you navigate to a page and normally in Nexus 13 these are also cached you can Define that however you want for example this does not cache if I navigate to the same page twice you can see everything is being reloaded in terms of performance that might not be the best idea but the instantaneous loading states that I just wanted to show you with the loading.tsx are really well done and it's a really easy implementation for your own app that massively benefits the user experience I hope you learned just as much from this repo as I did I think the clean implementations make a lot of sense but not everything in this repo is perfect as we talked about big shout out to you on the screen right here I'm not gonna even pronounce the name because I probably butchered no idea where you're from but just my respect for writing this code I think you've done a great job that said that's going to be it for me for this video I hope you learned a lot and I'm gonna see you in the next video have a good one and bye bye

Channel: Josh tried coding

Views: 38,063

Keywords: nextjs, nextjs 13, react, modern web development, best practices, e commerce, nextjs e commerce, react ecommerce, ecommerce, nextjs ecommerce, stripe, react stripe, nextjs stripe, auth, authentication, nextjs auth, nextjs authentication, react authentication, josh tried coding, joshtriedcoding, typescript

Id: 3oooJE3ID_k

Length: 11min 17sec (677 seconds)

Published: Fri Jun 23 2023