Build and Deploy a Full Stack MERN Next.js 14 Threads App | React, Next JS, TypeScript, MongoDB

Key Takeaways

hi there and Welcome to our thrilling new full stack course where we'll take you on an exciting journey to build and deploy a powerful application threats this app gained over 100 million signups in less than five days surpassing Chad GPT and Tick Tock making it the fastest growing app ever so get ready to clone threads and then go beyond and add even more exciting features that even the original app doesn't have starting with complete authentication using clerk you'll enable email password and social logins like Google and GitHub as well as the entire profile management this leads us straight to the user onboarding process and immediately after a visually appealing homepage showcasing all the latest threads after getting inspired by other people's thoughts you can create your own even better thread or maybe instead of creating your own threads you prefer to let people know they're wrong by commenting on existing threads oh and a special multi-level common system will allow you to tell even more people they're wrong you'll also build a user search with pagination making it easy to find other users an activity page that displays notifications when someone comments on your thread and a profile page for users to showcase the information and modify their profile settings okay okay all of that is great but now I wanna introduce you to communities create new communities and invite others by using a customizable template email use clerks user-friendly interface to manage community members allowing you to change their roles from admin to member or even kick them out and once you're on admin you can also create threads specifically for your communities there's also a community search feature with pagination that allows users to find and explore different communities as well as Community profiles displaying their threads and members all while transforming a figma design into a fully functional application with Pixel Perfect and responsive design providing an optimal user experience on all devices with nextgs's latest and greatest features experience blazing fast performance and instantaneous page switching through these incredible features you'll get the chance to master many amazing Technologies including nexgs 13 with server-side rendering mongodb handling complex schemas and data population that goes multiple levels deep create beautiful layouts using Tailwind CSS and upgraded by using native Shad CN components Implement file uploads with upload thing and even real-time event listening with web hooks understand how middleware API actions and authorization works and explore and integrate new nexgs layout route groups there's also going to be data validation with Zod managing forms with react hook form creating reusable components solid application architecture and so much more but the main star of the show is clerk as you've seen in the demo clerk is going to allow us to instantaneously spin up incredibly powerful authentication features such as login and registration using email password and multiple amazing social sign ins SMS verification entire profile management and much more isn't this fantastic you now have a golden opportunity to showcase your skills to potential employers or clients with this incredible project so grab a cup of coffee and let's dive into this journey together is what I would normally say but I have a special announcement to make I will soon launch an in-depth full stack next.js13 course in which you will learn everything there is to know about next 13.4 and further my team and I have been working on this JSM Pro course for months and I can't wait to give you the opportunity to access it and truly Master the most popular web development framework of 2023 so click the link in the description if you want me to notify you about it and when you sign up I'll also send you the first part of our premium nexgs 13 eBook this is a paid ebook which you guys adore and this video is your last chance to get the first six chapters for free and with that said let's get started [Music] let's get started with our phenomenal threads application right from the beginning we can start by creating a new empty folder on our desktop and let's call it simply threads once you create it you can drag and drop that empty folder right within your Mt Visual Studio code window expand it go to view terminal and just like that we are ready to get started let's start by initializing a new next.js13 application by running MPX create Dash next Dash app at latest and then dot slash to create it in the current repository this is going to ask you whether you want to install the create next app to which we can say why and then it's going to give you a questionnaire asking you how you would like your app to look like in this case we can choose yes for typescript we can choose no for eslint we can choose yes for Tailwind no for Source directory of course yes for app router to get all of the latest and greatest of nexgs 13 features and we don't want to customize the default import Alias and just like that it's going to install all the necessary dependencies for us that's going to include react next typescript additional types and even it's going to set up Tailwind once our default packages have been installed we can install additional ones the ones we'll need to turn our app into a success so let's run npm install and the first package we're going to install is going to be add clerk forward slash next JS clerk is going to allow us to implement super simple but also super robust authentication to our application it does everything from social science email and password login to managing your account once you're in and there's a cherry on top we'll use it to its full potential by implementing its organization feature for our communities the next package we're going to install is going to be add upload thing forward slash react we're going to use it to upload our profile images next we're going to install mongoose we're going to also install a package called svix which we're going to use for web Hooks and finally upload thing itself right here this was just the react package for it and believe it or not even though this is a huge app these are all the packages we're gonna install later on we're gonna also install specific Shad CN components but other than that this is it everything else is going to be coded 100 by you so let's wait until this is installed and then we can set up our basic file and folder structure there we go we can lower our terminal just a bit and we can start exploring the code base we have the app folder inside of which our entire nextges app will be we have the favicon the globals the layout and the page so let's start by running the application by running npm run Dev to see everything that we have live on the website immediately on the home page we have this great nextgs template created for us by versel but of course we want to fully modify it so let's start from page.tsx by removing everything within the main folder and when I say everything I really do mean everything we're just going to keep a simple Main that's going to say threads or it can be an H1 saying threads right here there we go we don't need to import the image at the top so this is just a simple export default function home next we have the globals.css here next.js already provided us with the import of Tailwind as well as some default Styles so now we're going to override the globals.css in the description down below you're going to find a GitHub gist containing the full globals.css so simply copy it and then paste it over here these are just going to be some simple class names that are going to make the process of our development a bit simpler it allows us to immediately apply multiple Tailwind class names so we don't have really long Tailwind class lines you can notice that this also immediately gave us an error in the terminal saying that the BG dark 2 does not exist if it's a custom class we have to Define it within Tailwind so this is the right Next Step to move over to the tailwind.config yes and in that same GitHub gist you're going to find the modified tailwind.config.js file here we're going to have just some additional Styles colors and the general font sizes all of this is taken directly from figma which we're going to explore really soon and that is it everything else is going to be coded entirely by you so now we can stop the application from running by pressing Ctrl C and then Y and then re-run it once again to ensure that all of the changes have been taken we can then revisit localhost 3000 and you'll be able to see just one more error saying that we cannot find module Tailwind animate to bring our app to life even more we're gonna use some Tailwinds animate properties for which we have to install a special package so let's do that right away by opening a new terminal window we can put it side by side by our current one and right in there we can run npm install Tailwind CSS Dash animate now if we save it go back to localhost 3000 we should be able to see threads on top left now let's improve our file and folder structure to ensure that it is scalable so that we can keep working on it no matter how much our app grows in this case we're going to use Advanced nextgs13 routing properties we're going to start by using something known as route groups so in the app directory nested folders are normally mapped to URL paths as you know it if you create a new folder as forward slash auth it's actually going to add the auth route to your application however if you want to prevent the folder from being included in the routes URL path you can use something known as route groups they are useful for organizing routes into groups for example by intent or team and they enable you to have nested layouts we're going to utilize both of these two reasons for using route groups so the convention is simply to wrap the folder name within parentheses and here's an exam sample if you have marketing you can have the marketing folder and then it's not going to have the forward slash marketing forward slash about and then forward slash marketing for slash blog instead the routes are only going to be what is within it and it's not going to mention the outside folder so how are we going to use it in our application well we're going to first create a new folder which is a group route which is going to be called auth and inside of it we're going to have all the auth routes and the other one is going to be called root and inside of root we're going to have all the other routes of our application so we can move our current page within the root group and we can also move its current layout now if we go to layout and we fix the import for the globals.css because now it's going to be dot dot slash globals.css and then go back the app should be working normally which allows us to start adding additional routes within the auth folder because that's what we're going to start with since we're building a social media application we need to have our users signed in to know who can create posts so let's create a new folder within the auth folder and let's call it sign in at the same time this is also going to be a route let's create another folder called sign up now we have two folders within the auth folder and we can create a third one which is going to be onboarding so on top the sign in the sign up I'm also going to teach you how we can have that onboarding so the user can enter additional information about themselves and remember I told you we're going to use both of these reasons for creating nested routes so so far we've used the reason for organizing routes into groups but also that's going to allow us to use nested layouts so what we can do is we can create a new file called layout dot TSX and that's going to allow us to specify different rules for the authentication route for example we don't want to show the nav bar or the footer here so we can simply declare it that way so let's get started with the layout of our authentication folder we can start with a part that many people discredit or don't do at all which is search engine optimization or SEO I want to teach you how nextgs allowed you to have a much cleaner and much simpler but also more effective SEO incredibly quickly the only thing you have to do is you have to say export const metadata is equal to an object and you can immediately specify the title here which is going to be the name of our app as well as a description and in the description we can say something like a next dodgy s13 meta threads application immediately after we can export default function root layout and it's going to have some props inside of it which is going to be children in most cases layouts are going to have children because we need to display something within it also we have to define the type of these children because we're using typescript so we can say the type of this object is going to be an object where the children is equal to react dot node that's going to look like this inside of there we can return another way of writing this is to just put this object in a new line like so and then say that is equal to children and then put this on a new line as well so like this everything is just a bit more readable you can see the props and you can see the types of the props that we have and then the return of that layout now a really important thing is that we're going to wrap this layout with something known as a clerk provider this is what's going to allow us to use all of the clerk's functionalities so let's nicely wrap this within parentheses just so it's a bit more cleaner and more readable and this clerk provider is coming from add clerk forward slash nextgs so you can simply double click on that and press Ctrl space or command space on Mac and then click right here and that's going to automatically import the clerk provider for you if the Auto Import didn't work for you you can simply follow my imports right here saying import clear Provider from adclerk forward slash nextgs within that clear provider we're going to return an HTML page that's going to have a lang attribute equal to en as in English and immediately within it we're going to have a body tag that's going to have a class name equal to and now here we want to render a font and the way you do fonts in nextgs is you define it like so const enter which is the font we're using is equal to and now you want to import that font from Google fonts so we can say enter all caps and we can immediately import it coming from next font Google we're going to call it as a function and say subsets and then get the Aladdin subset this is all that we need and the subsets of course has to be an array because we can have multiple subsets within it and now within the class names we can simply say enter dot class name and this is going to immediately apply this font across all of our files immediately within here we want to render our children which is everything else that's going to be shown within this layout we also want to give it another class name so we can turn this into a template string where the inter class name is going to be a variable and after that we're going to have a BG Dash dark dash 1 to make everything a dark color so now if we save this we are looking good let's also import the globals.css here so import dot slash globals.css and let's save the file now if you go back to your website you're going to notice that nothing was applied the title is still create next app and the background is still white that's because this layout is only applied for the routes within the auth subgroup so for the onboarding sign in or to sign up so let's try to go to one of these routes we can do that by going to the URL bar and typing sign in we can check this layout in action if we create a new page.tsx file within the onboarding route and there we can simply say async function page and we can immediately just return something so we can say return and let's do a main which is going to have an H1 with a class name equal to head text and it's going to say on boarding and finally to be able to see it we need to say export default page now on our website we can go to forward slash onboarding and you can see that we're going to get a meaningful error from clerk saying that we're missing a publishable key which means that now is the right time since we set up our clerk provider to also create an account on Clerk and start setting up our authentication to do that we can go to the clerk's website by clicking the link down in the description and click Start building for free there you can sign into clerk using their own provider which is a pretty cool thing I'm going to continue with Google and now you'll be able to configure your first application by clicking add application and there we go you can enter the application name such as threads and you can choose how will you let your users to sign in for now we're going to choose email username Google as well as since we're developers GitHub but as you can see there are a lot of different options you can choose from as a matter of fact I don't think I've seen this many options for the sign in ever so it's pretty cool that I allow you to connect with whatever software you're using and let's click create application this immediately says that the sign in is ready and it gives us a quick start with xjs so we can simply copy this API keys by saying copy and we can create a new file in the root of our directory called.env.local and we can paste them there of course the keys for you are going to be different and while we're here let's quickly explore Clerk's dashboard we also have the users tab where you can see all of the users that are registered to your application and finally we have the organizations tab which we definitely want to enable because we're going to use it to create our communities so let's click enable organizations and let's toggle this on and click apply changes of course in this video I'm going to teach you about everything you need to know to use clerk on all of your applications but as with any software I would recommend you to check out the docs it's always useful to learn about how to use it properly so the first step we've already done which is to install add cleric forward slash nextgs then set up the environment Keys which already we have done by putting them in the dot env.local we have already mounted the clerk provider so that part is done as well and then the next step is to protect our application we can do that by creating a new middleware.ts file in the root of our folder so let's do just that and let's copy their starting code so in the root of our folder we can create a new file called middleware dot TS and we can paste their middleware starter in our case we also want to add some additional details to the configuration such as public routes which are going to be an array of just forward slash which is going to be public as well as forward slash API forward slash webhook forward slash clerk we're going to use this later on to enable the webhook functionalities for our organizations and then we can have ignored routes so these are going to be the routes that are ignored by clerk that's going to be forward slash API forward slash web hook forward slash clerk as well there we go and we can add a comma here this is the initial setup that we need to do and later on we'll be able to further modify the middleware Page by reading more from the middleware documentation where we can immediately redirect users to auth Pages or redirect them somewhere else after they've been authenticated so now let's check our next step which is to build your own sign in and sign up Pages clerk offers a set of pre-built components that you can use to embed sign in sign up and other user management functions so what do we need to do well we need to create a new folder that looks like this square bracket square bracket DOT sign up and then the page within it and then immediately we can import the sign up component from clerk so let's copy this go back to your app close all the currently open files go to app auth sign in and then within it we can create a new folder square bracket square bracket DOT sign in we close it and then within that folder we create a new file called page.dsx and there we can paste this sign in in this case and return the sign in and we can repeat this process for the sign up as well so let's go to the sign up new folder sign up and of course we have to do the dot dot and then create a new page.tsx and paste will be copied which is just the import of the sign up and then return sign up as a self-closing component and the next step here is to update the environment variables so we can specify the route of where we want to go after sign in or sign up so we can add that to the dnv.local right here in this case I believe after sign in we want to go to the onboarding so I'm going to add that right there and the last step is to embed the user button that is going to allow you to manage your full account information so let's simply copy this close all of the currently open files and go to our root page.tsx because this is what happens once we're actually logged in and we can override this by importing our user button and then rendering it right here now we've done a lot of changes so let's go ahead and test it out and see if everything works of course we're going to Center this in the middle of the screen later on but for now let's go ahead and see if our authentication works by choosing to sign in or sign up with any of these methods I'm gonna proceed with Google and immediately it requests us to add the username as well I'm gonna do JS Mastery and click continue and we've been redirected to localhost 3000 and you can see a little profile icon on top left if you click it it's going to open up a model that's going to allow you to sign out or manage your account and within manage account you can immediately change or remove your profile pic you can also change your username change your email choose which account are you connected with and even manage your password and active devices all of this comes right out of the box by using clerk if you think about it these are the features that we need in every single application but implementing them one by one could take hours if not even days to implement it not to mention that we have to be really careful about security so a task that would take you weeks to implement properly with connected accounts changing usernames passwords and more took just a couple of minutes using Clerk and that's why I'm so happy that to a phenomenal app such as threads we can leverage all of the clerk's functionalities right out of the box great with that said we're already signed in which I cannot really believe to be fully honest that it took just a couple of minutes but that essentially means that we can get started creating the layout and the structure of our home page so let's get started to get started working on our home page we can close our auth and go within the root folder and then page.tsx here we just have our user button and the layout but we can focus on the home page itself or at least its General structure so let's get started with removing this user button at least for now we're going to bring it on later but for now let's simply create an H1 here that's going to say home and we can give it a class name that's going to be head Dash text as well as text Dash left we can also wrap this in just a react fragment as we don't have to give it any classes now if we save this it's going to appear like you cannot see anything on your home page but if you hold and drag you can see that the home indeed is hiding there but it is white text on white background so let's change that and the way in which we're gonna change that is not going to be just on the home page because we want to ensure that that background remains on all other pages and that's exactly what the next js13 layout is for so let's go into the layout and let's start creating the structure of our app we already have the HTML and we have the body but now we're not just going to return children within the body we're gonna add some other things first of all we want to add a top bar so let's create a component with a self-closing top bar as well as a bottom bar usually it's a footer in this case it's going to be a functional Bottom bar and we're going to make it even more unique by within that top bar and Bottom bar we're going to create a new main section that main section is going to have a left sidebar just like this and it's going to have a right sidebar as well it's a pretty complex interface but it works especially for social media applications when you have a lot of data to showcase so in between the left sidebar and the right sidebar of course we have our section and that section is going to have a class name equal to main Dash container so this is going to contain the majority of our application and within it we can have a div that's going to have a class name equal to W Dash fool meaning full width and Max Dash w-4xl so on large devices it's going to go only as far as Max W4 XL and we can render the children within it there we go now you can notice that we have a lot of red squiggly lines here left sidebar top sidebar none of this has been defined so let's create a new components folder outside of the app folder we created outside because in the app we only put the files and folders which we want nextgs to render on the home page don't forget nextgs supports file based routing so that's why I want to create it outside and we can start by creating a couple of folders this time we're going to create a folder called shared and this is going to include some shared components we can also create another folder called forms and even a third one that is going to be called cards so essentially we have three folders within the components folder just like so cards forms and shared and later on we're going to have an additional one for Shad CN components now inside of shared we can create a new component and that's going to be top bar dot TSX at the same time we can create all the other ones such as the Bottom bar dot TSX we can also create a left sidebar dot TSX and a right sidebar dot TSX I believe this is all that we need for now let's get started from top to bottom with the Bottom bar that's going to be function Bottom bar and it's going to Simply return for now we can make it return an H1 that's going to say Bottom bar and finally export default Bottom bar this is all that we need and we can copy this and also paste it to all the other components but of course rename it from Bottom bar to left sidebar we can repeat the process for the right sidebar and finally for the top bar B with a lowercase b and there we go so now we have these different components and we can go back into our app into the root layout.tsx and you can double click the top bar and press Ctrl space or I believe it is command space on Mac and it's going to automatically recommend you the import and we can repeat the process for all the other components and if you notice at the top you can see we have Imports for these four different components coming from add forward slash components shared top bar left sidebar right sidebar and Bottom bar this means that we no longer have any errors and it also means that the general structure of our application is done we can see the home in the middle left as well as a top bar and left sidebar on top because they're not falling into the layout nicely as of yet and then we have the right sidebar and Bottom bar at the bottom now to start creating that layout we can start with the top bar and then move to the left sidebar and you're gonna notice soon enough all things are going to start falling into place so to get started with that we can put our browser side by side with our editor this way we'll be able to see the changes that we make live and we can close all of the currently open files and just open up the top bar as it's on the top so it makes sense to start from it first the Stop Bar is actually going to be a nav so we can have a return statement that's going to have parentheses like so and we can transform this H1 tag into a nav tag that's going to wrap everything else this nav tag is going to have a class name equal to top bar and if you're wondering what this Stop Bar is you can simply search right here in the search for top bar and it's going to show you the top bar globals.css file and this one line is applying the position fixed top 0 Z index of 30 Flex W full as well as BG dark 2. so it's just generally setting up the layout for our navigation bar so we don't have to type it by hand but if you're wondering how to get to the Styles now you know also if you're any point wondering what a specific Tailwind class does simply go to tailwindcss.com go to Quick Search and type it out if you type Flex you're gonna quickly see how you can write those classes another cool thing is this Tailwind CSS cheat sheet where you can also search for flex and you can see all of the different properties that you can use that Flex inline flex and so on Tailwind is pretty intuitive to use so once you get to understand it it's going to allow you to speed up your CSS workflow significantly great now within this nav we can create a new link component as we usually do and this link is going to come from next forward slash link so we can also double click it and import it this link has to have an href and this specific one is going to point to forward slash it's also going to have a class name equal to flex items Dash Center and gap-4 inside of it we want to render our logo so let's render a next gs13 self-closing image tag as well as imported coming from next image then we can give it a source equal to four slash logo.svg and we can give it an ALT tag equal to logo as well as a width of 28 and height of 28 pixels as well also below this image we can have a P tag that's going to have a class name equal to text Dash heading 3 Dash bold text dash light dash 1 which is for the color and on Max Dash XS devices we want to set it to Hidden so just like so because it won't fit in the screen so there we can simply say threads now if we save it you'll be able to see that we have our threads but unfortunately the logo is not showing that's because silami I haven't yet provided you with all the assets so in the description down below you'll be able to find a zipped assets folder simply download it unzip it and then paste it within your public folder right here public assets and then within it you're going to have your logo.svg let's save the file and correct the path to forward slash assets forward slash logo.svg and immediately we have our cool modern threads logo now while we're here let's also make the app better by implementing the logo right here as the favicon and fixing the title as well so we can go to our layout and here we can update the metadata as a matter of fact we can copy the metadata from the auth layout right here and simply paste it within this layout here in the root that's going to change the text or the title to threads and now we have to also add the favicon which we can do by modifying this favicon right here from next.js131 to our new logo so to do that we can go to our assets find our current logo SVG and we can reveal it in File Explorer or finder if you're on Mac that's going to give you a view that looks like this next you can go to favicon.io and you can simply find a converter then you can drag and drop your SVG and click download it's going to provide you with a zipped folder and the only thing you need from there is the favicon file what you first need to unzip by dragging it somewhere else for example to your desktop and then from your desktop you simply need to drag and drop it right here into your app folder once you do that and close the layout and the layout and go back to your app and reload the page you'll be able to see your favicon your title and now we have also our top bar done these little details really go a long way with that said let's continue with creating our top bar we can go below our initial link and create a Dev this Dev is going to have a class name equal to flex items Dash Center as well as a gap-1 to provide some spacing between the elements then within it we can have a div and that div is going to have a class name equal to block usually but on median devices it's going to be hidden so we want to make it mobile responsive right off the bat in case it doesn't fit on the screen we can easily remove it inside of here we want to play with some clerks components so we can say signed in and this signed in is coming from ad clerk forward slash nextgs and then no longer is it in beta so it's going to come from ad clerk forward slash nextgs and this is incredibly powerful I remember for the past years we were writing code that looks like this open a new Dynamic block then you have to create functionality to figure out is user logged in so const is user logged in and then this will dynamically be set by some kind of a function or API call and then ultimately it would return a true or false value then you have to check it you have to open up a new ternary operation provide the other case as well and then in here you would write the actual code if we're locked in or if we're not logged in with clerk you can immediately call this component and the code within it is only going to appear if you're signed in how cool is that so if we are signed in the only thing we want to show is simple it is a sign out button it's going to look like this and it's also going to come from the same package clerk next.js so we can import it right here at the top you can modify that sign out button however you please in this case it's going to be a div with a class name of flex and cursor Dash pointer and within it we can have an image and this image is going to have a source equal to forward slash assets forward slash Lookout dot SVG it's going to have an altag equal to logout a width of 24 pixels as well as a height of 24 pixels as well and it's going to be a self-closing Nexus 13 image tag so we can do it like this and for now we cannot see anything but no worries because we're gonna look into that later on for now we can go below sign out button below signed in below the div and we can use another one of clerk's great components which is called an organization Switcher and it's going to be a self-closing component which is also going to come from at clerk forward slash nextgs so we can import it here and you can immediately see our profile icon and if you click it you have the potential to create your own organization and it shows you your account right here one of the props of the organization switcher is the appearance probe which allows you to provide some additional elements and I figured out that we can add an organization Switcher trigger and we can add a padding y of two as well as a padding X of four which is just going to provide it a bit of space so it's going to look better in general great this is all that we need for now we're gonna fix the layout later on but if we go even to a smaller size you can notice that this logout button appears the reason why we didn't see the logout button at the start is because we have this block MD hidden and that's because usually we're going to have our logout button on the left sidebar and only if we're on small devices we're gonna make it appear on the top bar just like a little icon let me show you what I mean this right here is the app's design which we'll be able to reference throughout this video and as you can see on the desktop size we have our logo button on the bottom of her left sidebar but on mobile devices it's going to appear right here on the top great with that said our top bar was pretty simple so now we can move to our left sidebar by closing this file going to our layout.tsx and then opening the left sidebar our left sidebar is going to be a section so we can simply say a new section component right here it's like a div but it has a semantic meaning we're going to give it a class name equal to custom Dash scroll bar as well as left sidebar and within it we can have a div and that div is going to have a class name equal to flex W Dash full for full width Flex Dash One Flex Dash coal so the elements appear one on top of another gap-6 for spacing as well as padding X for horizontal padding and within it we can map over our sidebar links in this case we could have a link component and then have a lot of stuff into it and then duplicate it many many times but what you're going to usually find is the best practice with these types of lists is to create them somewhere else for example in the constants folder so let's go to our file explorer and right in the root of our directory we can create a new folder called constants inside of the constants we can have only one file called index.js and in the description Down Below in that same GitHub gist where you got the styles from you can also find the index.js of constants and simply paste it right here this is about four lines of Simply some data structures and I mean simple data structures like an array that contains a list of objects that contain a link to an image a route and a label now we'll be able to use these links to map over them and we don't have to Define each one separately so now within the left sidebar we can open up a new Dynamic block of code and say sidebar links dot map and we can map over each individual link and return something for it for example for now it can be a div that's going to say link of course we have to import the sidebar links which are coming from constants we're exporting them from here so to import them we can go to the top and say import sidebar links coming from at forward slash constants there we go and now if you save it you won't be able to see because the color of the link is now dark but if you hover over you can see we have one two three four five or six links and now we can style them separately so let's turn this div into an actual link and we have to import it from next link it's going to have an href which is equal to link dot route and we can put this in a new line so we can fit all of the properties nicely the second prop we can pass to it is going to be a key because we're mapping over the elements which is going to be a link dot label and finally a class name equal to left sidebar underscore link and within it we can render an image which is also coming from next forward slash image it's going to have a source property equal to link Dot imgurl all uppercased URL I'll tag equal to link.label a width of 24 as well as a height of 24 as well and most importantly below the image a P tag that's going to render the link.label but of course we have to give it a class name for it to be visible where we can say text dash light dash 1 and on Max LG we want it to be hidden now if we save it you can see the icons so the speed tag is hidden on the devices of this size but if we make it larger you can notice how we can also see the full labels of this specific text but on smaller devices even just seeing the icons makes a lot of sense this is the home search activity create a post community and a profile so all of this makes sense for now we can keep our browser expanded so we can see all of them in their full Glory but now how do we know which link is currently active well to be able to know that we're going to turn this map from a regular instant return to an actual function with a return statement which means that we have to wrap this in a pair of brackets have a return inside of it and then also at the end we have to wrap it with an additional brace and that's going to look like this we're closing the function opening then we're closing another one and then finally it's going to look like this it is a bit of a more complex structure but we can now add some additional logic right here for example figure out if the link is currently active and to be able to know that we'll have to import something from next navigation so let's do that right away we need to import use path name as well as use router coming from next forward slash navigation that's going to allow us to know the current URL we're on so let's define those hooks at the top by saying const router is equal to use router as well as const path name is equal to use path name what we can do now is uncommon the is active and say is equal to open a pair of parentheses and then say if path name dot includes the current link dot route and link.rout.length is more than one meaning it's not just home or if path name is directly equal to the link dot route there we go and of course I have to spell path name correctly so if I do that we have our is active variable so now we can change the style of our sidebar items based on that variable and also it says that the use router which is a hook only works in client-side components so at the top we have to add a declaration of use client to denote that this is indeed a client-side rendered component because we're using a hook so now here within the class name of a link we can make it a template string just like so open up the new Dynamic block and say if is active in that case we can render a string of BG Dash primary Dash 500 and of course we have to close it properly right here and I believe we're good so now we can see the home page is currently on if we go to search we get a 404 because we haven't yet created the search route or the search page so as soon as we create the pages for all of these different components we'll be able to switch between them and the next active route is going to immediately move seamlessly now at the bottom we can add that log out button as we discussed we already have the template for it right within our top bar so let's go there and let's simply copy this entire signed in block and paste it right here below this div but before create another div that's going to have a class name equal to margin top of 10 to divide it a bit and padding X of 6 for horizontal padding and now we can paste it right here of course we must not forget to import all these components so we can go to the top bar and simply copy the import statement from add clerk forward slash nextgs and paste it right here at the top as well we won't be needing organizations which are here though so now we save this and you can see this icon but of course we want to just make it a bit different here so what we can do is also render a P tag below this image that's going to say log out and we can give it a class name equal to text dash light Dash 2. and on Max LG it's going to be hidden as for all of our nav items if we save that you can see a log out but of course we have to provide some additional styling such as gap-4 and padding Dash 4. if we save this it's going to look much better and much more uniform with other items also we have to add a sign out callback right here on the button by saying sign out callback is equal to a callback function where we simply use the router.push and go to four slash sign in so once we do sign out it's going to redirect us back to the sign in great now as you can see there's some weird kind of scroll happening over here but later on we're going to fix that as you can see immediately by having the top bar and by having the left sidebar the app is looking much closer to the design so what we have to do still is the Bottom bar as well as the right sidebar so let's move into our root layout and from there let's start creating our let's do a bottom bar first just to spice things up a bit our Bottom bar is going to be pretty simple we're going to wrap everything within a section component similar to a div as we discussed already and that section is going to have a class name equal to Bottom bar it's also going to have a div and that div is going to have a class name equal to Bottom bar underscore container and inside of there we can also Loop over the sidebar links dot map where we get each individual link like so and now you might be wondering what is this Bottom bar for if we comment this out quickly what are we going to put here we already have a lot of stuff on the top on the left sidebar why should we map over the sidebar links one more time so on the design there is no Bottom bar here why do we need it also in the finished version of the application nothing seems to be here think about it the Bottom bar is going to be used for our mobile navigation yep we're going to have a native mobile like feel on our web application Isn't that cool this means that you'll be able to Traverse the application using your bottom bar right with your thumb it is the easiest way to Traverse the app and it doesn't take a lot of screen real estate imagine if we had our current APP and if we go to the mobile view where are we going to put it we have to have the content in the middle but if we now have a left sidebar it's going to take at least 10 to 20 percent of the screen which is way too much that's why we're creating this mobile sidebar for mobile devices that means that while developing it we can stay at the mobile view and you can notice we're going to display same links as we're displayed in our left sidebar so for that reason we can go to our left sidebar and we can copy this entire sidebarlinks.map and paste it right here into the Bottom bar of course we'll have to import a lot of things such as the sidebar links from add constants and we'll also have to get the path name right here we'll also have to import the link from next link image from next image and use path name from next navigation I believe this is more or less said now if we save it you can see that we have to turn it into a client component as well so let's copy the use client directive and paste it right here at the top and believe it or not right out of the box this is going to work perfectly because we have made our link responsive but of course to improve it further I created a special class called Bottom bar underscore link which is going to make it look even better there we go and then another really cool thing we can do is we can make this work for tablet devices as well so if we expand it just a bit you can notice this is starting to get a bit wide right but we can also display a limited amount of text right here so let's do just that instead of this P with a class name of Max LG hidden we can turn this into text subtle medium like so text light one and Max Small hidden so on Max small devices it's going to be hidden and now we can see the text but in this case we don't have space for two words for create thread so what we can do is we can take the link label and just modify it slightly by saying link that label that split we can use a ternary operator right here such as forward slash which is for Words plus and then do this and get just the first character so that's going to look like so of course we have to end the regular expression right here so this is going to get just the first word and now all of the words fit nicely this is for bigger phones or tablets and we have this for regular phones and then once we go back we have our great sidebar which looks like this isn't this great thinking about responsiveness right from the get-go this means that we're done with the top bar the left sidebar and the Bottom bar and now we are ready to move to the right sidebar we won't do a lot of work there because we're going to implement its features later on but it's good just to have it for the sake of the layout so our right sidebar is also going to be another section that's going to look like this and it's going to have a class name equal to custom scroll bar same as the left sidebar and it's going to say right sidebar within it we can create a div and that div is going to have a class name of flex Flex Dash One Flex Dash coal for the elements to appear one on top of another and justify Dash start it's also going to have an H3 which is going to say suggested communities if we save this and for now we cannot really see the right sidebar right here it could be because we don't really have a lot of space here the right sidebar is only going to be visible when you have a lot of space usually it's going to get hidden we have to have about this much space for it to be visible but even though we have this much space it's not right here it could be that it's hiding here yep you can see it right there suggested communities even though it should be showing on the right side the reason for that is in the layout here we haven't provided a class to this main it should have a class of flex which is going to make the elements naturally flow within it so it's going to be Flex as well as Flex Dash row now if we save this everything is going to look so much better because we won't have that huge scroll to the bottom and now the right sidebar is here and we can see suggested communities so let's go into the right sidebar and let's modify this text just a bit that's going to be H3 with a class name equal to text Dash heading 4 Dash medium and the color of text dash light dash one that's going to make it pop immediately right now we don't really have a lot of communities to show so we can leave this part empty but we can duplicate this div one more time below and there we can say suggested users so we'll be displaying both the users and the communities on the right side and this is more or less it as I said we don't want to focus on the right sidebar too much because we don't yet have the logic to display it great believe it or not the layout is now here we want to expand it and