Build and Deploy a Full Stack Video Conferencing App with Next JS

Key Takeaways

have you ever wanted to integrate video calling into your app but thought it was too complex or timec consuming what if I told you that you could build an Enterprise ready video and audio experience and add it to any app in just a few hours not weeks or days hours and not just any experience but one that scales to millions of users and thousands of call participants hi there and welcome back to JavaScript Mastery where I not only show you how to build real world applications but also dive deep into the why behind every line of code today we're taking on the challenge of cloning a video calling app that handles more than 300 million meetings every freaking day before we dive into the code let's take a quick look at how our app works at the start we must create an account we'll do that through Clerk's beautiful sign-in component which is completely free and allows for multiple social sign-ins or just your typical email and password login once we're in we can quickly initiate a new meeting redirecting us to set up our camera and microphone as soon as you join you'll see a familiar video setup where you have full control over every aspect of the meeting experience from recording the meetings to sending Emoji reactions sharing your screen adjusting audio and video devices changing the grid layout viewing the list of all the participants and individually managing each participant we have the option to exit the meeting or end it for everyone one returning to the homepage if you'd like to schedule a future meeting simply put the details date time and voila you'll find it ready on the upcoming meetings page where you can either copy the meeting link to share it with others or start it early you can also view all the meetings you've held in the past with a previous meetings list including their recordings on this page you'll also have your own personal room with some details and a unique meeting link which you can share with anyone for an instant meeting let's not Overlook that you can also join meetings created by others by simply providing a link here and just like that you're ready for the meeting rest assured all of this is incredibly secure real time and responsive that was a lot wasn't it we'll use the best Technologies out there including typescript and next js14 as well as tailn CSS and chaten for Sleek modern styling and there will be no code to blindly copy and paste instead I'll ensure you understand every aspect of the development process and the reasons why we do things a certain way plus we'll follow a figma design and write every single line of CSS together this course isn't just about building an app it's about understanding how to apply these Technologies in the real world so you can beat Devon and become an expert developer this app is made possible thanks to wait hold on a second another thirdparty tool to handle this why not build it ourselves from scratch as developers we know the importance of not Reinventing the wheel third party tools enable us to focus on developing unique apps rather than getting slowed down by the specifics like in this case complexities of video streaming this approach not only saves time but significantly improves our skills making us better developers but do the big companies you'd want to get hired in care and the answer is yes the software you learn today is being used by Adobe SoundCloud Gumtree crunch base and many more the name stream and it allows you to implement skill able Enterprise ready video audio and conferencing features quickly and easily absolutely free of charge without even requiring a credit card they have pricing plans but these are mostly for Enterprises and the cost for hosting and managing the entire infrastructure on our own is lower than something like AWS learn to embrace these tools to make you a more powerful developer finally let's dive in and create something incredible and make sure to stick around to see how I approach what one of the trickiest features I've quoted in a video so far to start developing our Zoom clone application we'll begin from bare Beginnings by creating a new empty folder on our desktop let's call it JSM uncore Zoom unor clone once you have it drag and drop that empty folder onto your empty Visual Studio code window as you can notice we're starting slow from beer Beginnings but we'll quickly ramp up the complexity and the importance of concept you'll be learning about and the difficulty of Concepts I'll teach you and as I said at the start I'll teach you every single little part of this application with no copy pasted code and completely free tools starting off with the biggest of them all next GS the react framework for the web of course we'll be using next for its built-in optimizations Dynamic HTML streaming and server components alongside next GS will also be using Tailwind CSS a utility first CSS framework packed with utility classes that make our styling easier and building just on top of it we'll use shat CN as our component library of choice that allow us to easily pick and choose of some of the pre-built components but then apply our own complete styling to them using Tailwind so let's initialize our application by going to shat CN UI and then click get started here we can navigate over to installation and choose nextjs we can copy the first command open up our terminal and paste it there's just one tiny change we'll make to this command and that is remove this my app and replace it with Slash which will initialize the project right within our existing directory we just created let's press y to install the create next app CLI and let's answer a couple of questions would you like to use the source directory no need for most of these questions you'll just press enter to speed run your way through it so yes yes yes just enter enter enter and the dependencies are getting installed while they're getting installed let's also run the Shad CN UI init command to set up our project so we can copy it and back within our editor simply paste it and press enter once again here we'll just press enter enter enter and we're going to install everything now what just happened well if you look at our file explorer you can see that we got a few new files such as the global. CSS where we're importing Tailwind we also got a lip folder with the utils where Tailwind CSS just added some stuff for us so we can easily consume all of its class names and finally it also added the Tailwind CSS config which we can later on modify to make make our styling life a bit easier now going back to the docs the next step is to install the font and some further customizations which you can do if you want to in this case we'll be using our own font later on and there we go you have your own new app structure and that's it so we can test out if shaten works by adding a new shaten component to our project so let's copy this command from Step six and paste it right here MPX shaten UI latest add button what I love about shaten is that it allows you to add specific components to your project and it adds them directly within components UI right here so you can even modify the source code if you want to not that we need to but you can if you want to so you can choose exactly how many components you're adding and you can only add the ones that you actually use so going back we can copy this homepage to see if the button appears we can navigate over to page app and by the way if you're wondering how I just did this without opening the file explorer and then clicking on page I used a command or control P shortcut which allows you to search files by name and then quickly traversing over to them this is just one of the many pro tips I'll scatter throughout this video so now we can remove this entire homepage and paste what we copied over from chaten finally let's run mpm runev to run our application on Local Host 3000 command or control click it to open it up and here we are I'm going to zoom it in so you can see it a bit better but if you have a button that looks like this that says click me it means that you have successfully installed Tailwind CSS and shaten and that we're good to start creating the file and folder structure of our application so going back to our codebase we can open it up and see what we have here we have have the app folder which is the most important folder right here especially considering that nextjs uses a system called file based routing so depending on which folders you add here and which Pages within those folders it will expose different endpoints so that you can then move across different pages within your application first things first we're going to remove this favicon because soon enough we're going to use our custom one and we'll start tidying up some things first of all I'm going to create two new folders and both of them will be wrapped within parentheses o and we're going to also include root like this now why did they use parentheses right here well I just used a nextjs concept known as route groups in the app directory nested folders are normally mapped to URL paths however you can Mark a folder as a route group to prevent the folder from being included in the routes URL path what this allows you to do is organize your route segments and project files into logical groups without affecting the URL path structure so it's useful for organization and for nested layouts both of which I'll teach you in this application and you can see right here that the convention is to Simply wrap a folder's name into parenthesis so in this example they tell you that you can organize ize your routes by marketing shop and so on and then each one of these route groups can have additional pages and it can also have additional layouts which will be very important later on within our application so going back within our app with an oth we can now safely put the sign in folder as well as a sign up folder now we have logically divided sign in and sign up from the rest of our Pages for now now let's close that and let's focus on the root which is basically our entire application within the root we can create a special file called layout. DSX which will allow us to do some specific things to all of the pages within this route group what do I mean by that well let me show you if I run rafc right here that will allow me to quickly spin up a react functional component and we can call it root layout now if this rafc didn't work for you that must mean that you don't have the es7 plus Redux react native react Snippets installed so install it try running rafc and it should work what we can do here is wrap everything as a main component and then here we can return the children so we can say children which means that this component will wrap all of the other Pages within it and Children Of course comes from react props so we can say children and considering that we're using typescript we can Define the children type as react node coming from react and now to explain what I mean by creating different layouts if I now create a Navar here and I also create something like a footer here it should be present within all of the pages within the root folder in our case within root we'll also create a new route group called home where we'll put all of the home routes but for now let's just create a new page. TSX within it within this page within the home we can run RFC and create a home component and next to the home we can also create a new page called meeting within this meeting we'll create another folder starting with square brackets this time it's going to be ID like so and then only within this ID we'll create a new page. TSX where we can once again run RFC and call this page meeting so let's go over this in a bit more detail and explain what's Happening Here we already know about route groups right but in this case we have also used another concept called Dynamic routes so back into the docs here they say that when you don't know the exact segment names ahead of time and want to create routes from Dynamic data such as different meeting rooms with different IDs you can use Dynamic segments that are filled at request time or pre-rendered at build time and the convention here is to Simply wrap it in square brackets for example ID or slug which is exactly what we're doing here so here's an example for a Blog you could use a slug or an ID and then say my post and then render the blog post URL but an even more important takeaway here is that you can extract that Dynamic parameter through the params object so let's copy what they have here and I hope you're following these documentation pages with me while you're following this video as well as that's very very important important I don't want you to just follow along for the video and replicate what I do I want you to go ahead and explore even further within the docs until you fully understand each concept that I'm covering so how do you get to specific Pages well you mostly just Google nextjs and then the title of the Doc Page in this case Dynamic routes so let's copy this part and back in our meeting we can now paste this here and and instead of pams slug this name right here will be equal to whatever you use as the file name or the folder name in this case we use the ID so I'm going to say ID and now what we can say meeting room and we can say number and then you can render the ID that's going to beams. ID there we go finally let's go back to our app here on our Local Host 3 000 we still have just the button that says click me but if we now go to a meeting room specifically a room with a particular number or an ID coming after it like 1 two 3 and press enter you can see the knv bar and the footer because that's coming from the layout that's wrapping our page and then you can see the meeting room number 1 two3 that means that we're successfully fetching the perams and with that I hope all of this routing layouts and dynamic route groups make a bit more sense if they don't make sense right now they're going to make sense as we keep adding more routes once you learn it once it'll be easy to replicate it for all of the other pages and talking about fully understanding nextjs I can't not mention the ultimate nextjs course that we worked over a year on right now it's the best nextjs course out there so if you want to learn some of the next xgs Concepts deeper understand how all of the biggest companies use nextjs and not just use it as good old react to get stats like this rather learn how to properly use next4 and get perfect stats with deep Dives to understand how NEX GS truly work behind the scenes to build and deploying a most complex app out there and then even to active lessons that allow you to replicate what's being thought in the course with examples resources hints and even more I just had to quickly mention it as if you're watching this video you most likely will be interested in the course content as well but with that said let's continue with developing our Zoom clone now that we have our meeting room and our homepage we're going to create a space for our navbar and sidebar and they're not going to be right here within this layout as we don't want to show the nav bar and the footer within our meeting page rather we want to show it only within homepages what do I mean by that well check out our final application on the homepage you can see the sidebar and the knv bar but as soon as I jump into the meeting you can see that the sidebar and the Navar are completely gone allowing us to focus on what matters the most which is displaying our own camera as well as the cameras of all of the other users so to aeve achieve that we'll have to create a new layout within our home route Group by calling it a layout. DSX to get started with this one we can basically duplicate what we have in our root layout and paste it here we're going to rename this one to home layout and we're going to give this main a class name equal to relative and now we can show the nav bar right here on top of our children we're going to also create an additional layout including a div that will have a class name equal to flex right within that div with a flex will create a sidebar component below it will create a section that section will have a class name equal to flex Min dh- screen which will give it a full height Flex D1 so it expands nicely Flex Das call so the elements appear one below another padding X of six for horizontal padding padding bottom of six for padding bottom and padding top of 28 to give us some space on top on Max MD devices that means you can see it right here media not all and minwidth of 768 that means whatever class we give after Max MD it will appear only if the device width is greater than 768 pixels which is mostly tablet and laptop devices and here we can give it a padding bottom of 14 a bit smaller and on small devices we can give it a padding X of 14 once again a bit bigger this time than the previous one and this Tailwind intell ense is pretty cool so if you hover over it you get the exact CSS properties we're applying so if that's not working for you head over to extensions and search for Tailwind CSS intellisense it should be the first one right here install it and then you should be able to see exact CSS classes within this section let's also create a div with a class name equal to that's going to be w-o for full width and now we can move over the children within this Viv right here there we go so now we're creating the layout for our homepage if we go back to our app in progress and navigate over to Local Host 3000 of course we don't want to show the button here so we have to head back over to this page and actually delete it because this will not be the primary page of our application so now if you head back you can see navbar sidebar and home before we go ahead and add our navbar and sidebar components let's navigate over to app layout this is the primary layout that we have right here and let's just apply an additional class name to our set of classes attached to the body that's going to be enter class name of course and then we can also append a BG dark off two like this now this BG dark of 2 if you hover over it we don't see anything and if you go back to the app we don't see a dark background so how does this work well let's navigate over to our Tailwind config TS I told you we'll be using this a bit later on and what we can do is we can extend the theme specifically we can extend the Colors by adding a new dark color let's see yeah we don't have it right now so we can go extend colors and then right here we can say dark and then create an object for all of the dark colors we have and then give them some names like one this is our first dark color it will be #1c 1 F2 e and we have created our first dark color now you might wonder where did I get this color code from well for that we're going to use this phenomenal figma design page that our JSM designer has designed specifically for you and for this video so if you haven't already go to the description and get access to this figma page as we'll be using it a lot throughout this video and then head over to the second page which is design as you can see here we have everything from the off page moving over to our homepage so now if you click on the home you can try the dev mode and you can see a specific color right here and if you click on different elements you'll be able to see different colors which you want to use in this this case we're interested just in the background color which I do believe is this one so we can simply copy it going back we can say something like two and then Define the color we just copied in this case it will be this one right here and it's going to look something like this so for now let's say that we just need these two now that we have this dark 2 we can actually use it by saying BG dark 2 and and if you hover over it you can see the exact background color we added although yes it's applying a bit of opacity but that's basically the color that we chose and added it to our Tailwind config so that in the future whenever you want to use this specific hexadecimal Coler you don't have to say 161 925 we can just say BG dark 2 with that in mind if we go back to our app you can see that we have complete darkness don't worry the ab didn't break it's just that the text is also dark so we cannot see it on the dark background but this is much better for our eyes rather than switching from light screen to dark screen every time with that in mind we can now turn the knvb bar and sidebar into complete components so let's navigate over to our components folder and let's create a new file called navbar TSX inside of which we can run our fce and let's also create another one called sidebar. TSX and let's run RFC as well moving back over to the layout we can just turn these into self- calling and self-closing components and of course you can press control space to get this automatic import layout and autoimport it from components Navar and components sidebar that should look something like this now we're not going to touch the knob bar for now as what matters the most is the sidebar so let's navigate over to the sidebar by holding our Command or control key and then pressing with your mouse and why sidebar matters the most is because within it we'll do all of the routing to all the different pages such as upcoming previous recordings and creating a personal room so let's start creating our sidebar by turning it into a section and giving it a class name equal to Sticky which means that it will give it a position of sticky so it stays there left zero so it's positioned to the left so it's coming all the way from the top it will be a flex container it will have an H screen which means full height and w- fit so it fits the content we'll also give it a flex Dash Co so the elements appear one below another as well as the justify between so we have some stuff at the top and then later on we have some stuff at the bottom after justify between we'll apply a BG Dark One background so a bit of a different background than the entire homepage a padding of six to give it some space padding top of 28 text- white so we can actually see the text and now on Max SM devices which means devices with a min width of 640 we're going to hide it so if it's below 640 pixels we're going to completely hide it else on large devices we can expand its W its width to about 264 pixels I found that value to work the best then within this section we're going to have a div that div will have a class name equal to flex Flex D1 flex-core so the elements appear one on top of another and a gap of six to create some spacing between the elements and here we can map over a couple of our items that'll be things like the homepage the upcoming meetings previous meetings and more so let's create an array of links what we could do is create an array here like this and then create an object for each route that will have something like image URL for the icon of that route and that could point to something like icons home.svg we could also do a route that's going to be a forward slash and then a label which is going to be a home and then we could do this couple more times map over it but I think you can already see where this would end up we don't want to clutter our jsx with some data so instead of doing this array here we want to create this array from scratch so let's navigate over to our root and then right here let's create a new folder called constants within constants let's create an index.ts file and here we can create that array const sidebar links is equal to an array where we have an object that has the image URL of something like forward slash ions forward SLS something. SVG it also has the route of forward slash and it also has a label of home okay we can put the label on top maybe so that it makes more sense that we have this we have the route and then we have the icon URL for that thing now we can duplicate this four more times 1 2 3 4 and the second route will point to the upcoming meetings so it's going to be forward SL upcoming and it's going to say icons upcoming SVG the first one is of course home let's use it with a capital H right here then after that we have previous meetings so that's previous forward SL previous and also icons previous SVG then we have recordings route is going to point to recordings and it's going to be icons video. SVG with a capital V more than that soon and also we're going to have the last one which is a personal meeting room so we can call it personal room pointing to forward SLP personal Das room and it's going to be icons add- personal.svg so now we have this array which we can export and we can use it right here by saying sidebar links automatically importing it from constants which you can see it came right here at the top and we can then map over it by saying map where we get each individual link and then for each one of these links we want to open up a function block within this block we want to check if this link is currently active and we can do that by saying const is active is equal to and here we need to tap into the nextjs functionality of figuring out on which path are we currently on and for that we'll say con path name is equal to use path name coming from next navigation and then we can say if path name is triple equal to link. rout or if path name do starts with and here we can again put the link. route so what we're doing here is checking whether the path name is currently active so if we're on the homepage we want to make it blue if we're on upcoming we want to make it upcoming and you get the gist we also need this starts with because sometimes it's not going to be the exact path like something like meeting one to three right in which case we only are checking whether it starts with that link now that we have this information whether it's active or not we can return a link for each one of these and this link will be imported from next link it has to have an href meaning where is it going to and we can conveniently use our link. route right here as we have already stored it within our sidebar links so we know exactly where we want to point to we can also give it a key as we're mapping over it as link. label as they're all unique and we can give it a class name in this case it's going to be an object where we can use the CN function coming from lib utils this CN is shorted for class names and it allows us to add multiple and dynamic class names for example we can add the typical class name of flex gap of four between the elements items Das Center padding of four so we can give each element a bit of space rounded dlg and justify Das start but now we can also add a second parameter which is an object adding additional Dynamic class names such as BG blue one like this and it will only trigger if is active is set to true this is how we're modifying the styles of each one of these routes for now within this link let's simply render the link. label now if we go back to our Local Host you'll see that the Ed path name which is a hook only works in client components add the use client directive at the top of the file to use it so going back right here at the top we can add something known as as a use client directive and if we go back it works if you head over to client components documentation page it'll say that client components allow you to write interactive UI that is pre-rendered on the server but it can use client JavaScript to run it in the browser of course you get the interactivity and the browser apis now we want to add this used client to declare that a function is clientside the rendered because in new next s all of the components by default and pages are server side rendered so if you want to use hooks which is one of the most common use cases for client components you'll want to add this use client directive at the top or whenever you want to add some interactivity such as in our case we added it to be able to navigate to different pages and routes this is definitely a browser related event so we need to make it use client server components with all different types of rendering and their differences from client side components and much more is covered in a lot of detail within our ultimate nextjs course because if you make all of the components as client side the application can often be very slow but in some cases you have to keep them client side to still preserve that interactivity of course learning when to use which will take some time getting used to and is definitely something we talk a lot about within our course but for now what you need to know is that a good rule of thumb is that you can keep the component server side all the way until you actually start adding some interactivity to them such as hooks or browser interactivity which is when you're going to get an error and then you can convert them into use client components with that in mind back inside of here we now have something that looks like an actual sidebar let's also focus on adding icons to each route which we can do by taking a look at our public folder and completely deleting it because for the purposes of this course I went ahead and collected all of the icons and images we're going to use and put them in a zipped folder for you so simply go to the description download it unzip it and then paste it right here within the root of our application this new public folder will contain icons and images some of which will be our avatars as well as our hero background and then we have a lot of SVG icons so with that in mind now that we have this public folder we can add some more content to show alongside the label specifically that will be a nextjs self-closing image tag which we can import from next image we can give it a source of link. image URL I'll tag off link. label a width of about 24 a height of about 24 as well and then below it we can display A P tag that will render the link. label of course we can style it a bit by giving it a class name equal to text- LG font D semibold and on Max large devices we can simply hide it this is mostly for mobile devices that have the width less than 1,000 so if you go back to the app we now have something that looks and feels great but if you try going to upcoming you can see that it breaks we get a 404 so now that we have the sidebar that acts as a router what do you say that we go ahead and add all of the necessary routes and as nextjs uses the file based routing concept we can just add them as new files and folders within our app rout home and here we can create a couple of new folders first is upcoming that will have its own page. TSX which will also say something like upcoming next we're going to create a new folder called previous that will also have its own new page. TSX where we can run ource and call it previous after that we're going to do a new one that's going to say something like recordings and we can also create a new page. TSX where we can run rafc that will say recordings then we can create the last one which will be personal Das room which will also have its own page. TSX where we can run RFC and we can call it personal room there we go so now we have four different pages as you can see right here and that's more or less it this is the only thing we needed to do to implement routing so if we go back click home you'll be able to see that we are on the homepage although this text right here is not that visible so we might want to fix that so let's go to this homepage and let's turn it into a section this section will have a class name equal to flex size- full so it takes 100% width and 100% height Flex Dash call so we show some elements below gap of 10 and a text off wide so we can actually see what we're doing within it we can render an H1 that will have a class name equal to text- 3 Excel to make it very big as well as f-bold to make it bolded and it can say something like let's to home and Below we can have some kind of content so let's go ahead and copy this entire section we have here and let's also use it for all of the other Pages let's start with personal room override what we have here and instead of Home simply say personal room let's go to previous as well override the dev and say previous let's all Al go to recordings modify it right here and say recordings and finally upcoming let's paste it modify the home to say upcoming now if we collapse them and go back you can see home spelled out nicely right here and if we navigate over to upcoming we can see a large upcoming if it doesn't look like this for you reason why it's not active well our variable should work correctly it should say true for homepage but as you can see it's applying a property of BG blue one which we didn't yet add to our Tailwind config so let's navigate over to the config and let's add a second set of colors with the name of blue and we're going to do one and back in our Zoom clone we can double click a few times times to get to the exact color which we want to use going back we can simply paste it as a string now you can see Tailwind automatically picked up our variable right here and if you reload home sweet home here we are now the top of our application is looking a bit blank right now so what do you say that we go ahead and implement the knob bar to do that we can just navigate over to the knobb bar component and start working on it and now might be a good time to put our editor side by side by our browser so that we can see the changes that we make live there we go that's much better but you can also see that now our sidebar is hidden so we'll have to figure out how to show all of those links and routes on mobile devices as well so starting with the Navar we can turn it into an HTML 5 semantic nav tag and we can give it a class name it can have a flex between property because we want to show some things on the left and some things on the right it will be fixed to the top with a zindex of 50 so that it appears above other elements it will have a w all full for full width a BG dark one same as the sidebar padding X off six padding y off four and on large devices padding X of 10 now it's hard to see as those colors are very similar but it is there now right within our nav we're going to use a link coming from next link so we can autoimport it we can give it an hre of forward slash so it points to home with a class name equal to flex items Das Center and a gap of one right within that link we want to render a nextjs self-closing image which we can import from next image and we can give it a source of/ icons SL logo.svg we also need to give it a width of 32 and height to 32 now it will no longer complain and we can also give it an Al tag of something like Yom logo that's our version of Zoom with a class name of Max DSM size of 10 so we're modifying the size on different devices right below that image we're going to do a P tag that will simply say yum so this is again our version of zoom and we're going to give it a class name equal to text Dash inside of square brackets now why do we do square brackets well in T and CSS you do square brackets whenever you want to apply specific values so in this case I want to apply something like 26 pixels and that's how we do it we can also make it font something like extra bold text- white and on Max SM devices it can be hidden there we go so this is too small to show the logo because we'll show some more stuff later on but if we expand it you can see it and also on this tablet layout you can see that we don't show the text we only show the icons so now let's go back to mobile and let's implement the mobile nav mobile nav will look something like this we have the logo we have the clerk user management right here and then we have all of the links nicely animating from the left so to do that below the link we can display a div with a class name equal to flex between and a gap of five here later on we'll Implement our clerk user management so I'm going to add a comment for that Clerk user management but for now we want to go below it and we want to show a new component called mobile nav so let's create it by going to components and creating a new file called mobile na. TSX where we can run rafc and call it a mobile nav go back and render it as a self-closing component which is imported from that/ mobile nav and with that in mind we can now navigate over to mobile nav and implement the nav bar for mobile devices of course I mean the entire mobile sidebar that jumps out from the left so to get started let's wrap everything into a section that will have a class name equal to w-o Max dw- 264 pixels so this is the width we want the mobile nav to have have right within we want to use our first Shad CN component of the day and once again I want to teach you how to truly build apps on your own so we're going to refer to the documentations as every grade developer should I headed over to chatsi and UI I'm going to press command K which in most modern developer applications opens up this search bar here you can search for what you're after in this case we're going to use a sheet component sheet is a dialogue that expands so if we click open this is how it looks like let's go ahead and install it by copying this command and pasting it within our new terminal that we get after we split it and press enter next let's copy its usage so here we can copy just the Imports let's paste them at the top and then we can also copy this sheet right here and paste it right within our section of course let's also properly indent it and then here you have a couple of examples it can come from top bottom left right you can modify the size and more that's what I'm going to teach you but it's important that you know your way around using the components from shaten or any other external package so back into the home we cannot see much happening right here but don't worry we will soon first we have this sheet trigger which won't just say open rather it will render an image coming from next image and this image will have a source equal to SL ions SL hamburger. SVG it will also have a width of about 36 and a height of 36 as well so if we save it you can now see it appear right here and then it opens up this sheet that we have copied over from shaten let's also give it an Al tag of hamburger icon and a class name of cursor Das pointer so people know it's clickable and on small devices we're going to hide it also this sheet trigger will appear as child so that means that it's a child of a sheet component now currently we can see it below this icon later on we'll move it to the right side but for now we can leave it here as we'll still have a lot of work to do to make this sheet look a bit closer to our overall design so let's focus on the sheet content by giving it a side equal to left a class name equal to border Das none and a BG dark off one now in this case we won't be needing the sheet header title description and all that stuff so we can simp simply remove it and instead of that we can render a link this link will be the same as the link that we used before so we can head over to our Navar to Simply use it that's going to be Navar and here we have a link that says Yume so let's copy this entire link and paste it right here within our sheet content of course let's properly indented and let's also import link coming from next link if we now save this and if you click the sheet you can now see the Yum appear right there in this case we don't have to hide it because we are within the sheet so we're going to show yum right there and now we can go below the link to show all of the other links by wrapping everything in a div and giving it a class name equal to flex now we have to be careful here we have to give it a full height but we have to deduct by the height of the nav bar so we can use a cool tailin property called h- and then we can open square brackets and say cult so we can do calculations 100 VH which is full height minus 72 pixels that looks something like this no spaces we can also make it Flex Das Co so the links appear one below another and justify - between as well as overflow dy- Auto so we don't have a scroll bar now within this div we can also render something known as a sheet close which is a component we have to import from component UI sheet it will also appear as a child and it will have its own section right here this section will have a class name equal to flex h - full for full height Flex Das call Gap of six between the elements padding top of 16 and text- white finally within here we can map over all of our links the sheet close simply means that whatever we click here it will close the sidebar so let's head over to our typical sidebar and we can copy this entire part where we map over the sidebar links that supposed to be Flex one so with that done let's now copy the sidebar links all the way to the bottom here and paste it within this section and of course let's not forget to properly indent it by going all the way here and indenting it yeah I think that's looking good we can import the same sidebar links from constants which is another benefit of doing it this way and we also need to get the path name to know which one is active so at the top we can say const we can say const path name is equal to use path name coming from next navigation and of course as it's a hook we have to add the use client directive to this component and we can remove all of these components we're not using from components UI sheet and nicely put it in one line like this also we have to import CN right here as we have multiple class names coming from lib utils with that if you open it we have something that looks like this there's slight modifications which we'll have to still do first things first we have our link that has Flex rounded LG but in this case we don't need justify start rather we need a w full so it takes the full width as well as a Max dw- 60 and we're also applying the same property if it's active we can decrease the icon size a bit to 20 here and then we render a P tag that doesn't have to have font LG or Max hidden it can simply have font Das semi bold there we go that's much better now if we click on one of these it doesn't close so what we have to do is we have to wrap each one of these links in a new sheet close like like this and we're going to also give it as child and we have to give it a key of link that route since we're mapping over it so now simply copy the ending tag of sheet close and put it at the end of the link and of course indent the link properly so it fits right here and save it now if you click on a specific link it should nicely close the sidebar so you can then see the content which you clicked on great we're almost there with the sidebar But first you can notice a mistake we have and that is that both the home as well as another page are currently active and we don't want that so for that reason within our mobile nav we can just remove the second part of the equation here and just say if path name is triple equal to link that route and that will make it home upcoming previous and so on so this now works also shatan made the this component very nice you can just exit out of it you can click outside to exit it or we can navigate by simply clicking the link here you might have noticed something weird and that is that we're using a flex between property without first declaring this as a flex container also here and if you hover over it it's not going to give you Styles like it does in other properties so this must mean that this is a faulty CSS property but now not all CSS class names have to come from Tailwind you can also add your own classes to make your life a bit easier so if we head over to app global. CSS here you can find some class names that Tailwind added for you but on top of those classes you can also add something else add layer utilities and then here you can define utility classes to make your life easier such as Flex Center and here you apply a couple of tailin properties we're going to apply a flex a justify Center and items Dash Center and same things here Flex between here we're going to apply Flex justify between and items Das Center so you you get three class names for the price of one and as soon as you do that you'll notice that now Tailwind reads this or not Tailwind but rather our own CSS and knows to properly position this so now we have it at the end it nicely opens up and closes that means that now our mobile nav is good and we can actually navigate and we can get back to desktop and see this in its full Glory of course it will be better if we only have one active link so going back to our sidebar we can slightly modify our is active property by saying starts with open a template string and then say link. route and then add a forward slash so we want to ensure it has the forward slash as well as then it's not going to be just the home so now if you save this you can see it's just upcoming previous record Rec ings and more and home so what we have now is a beautiful modern and simplistic nextjs starter code where we have implemented routing as well as the initial design next I'm going to show you how easy it is to add o to your app and it won't be only o you'll use Clerk's UI components to manage your users now I know you're cautious about using third party tools especially for something as important as o but thankfully clerk is completely free for 10,000 monthly active users it's not just 10,000 users it's 10,000 monthly active users so let's read a bit more about the pricing it cannot be that good can it well if we go here you can notice that for the free plan there is no credit card required 10,000 monthly active users or all of the pre-built components and even a custom domain which is not something you see often with free plans and let's be honest our app won't yet pass 10,000 monthly active users so there's a high probability you will never have to pay for it at all and if your app does go viral and you really need to scale to hundreds of thousands of users you would need to pay only two cents per user after the 10,000th user but the fact that it's free is not the only only reason we'll be using clerk clerk integrates the nextjs applications incredibly well you get magic links social signin multiactor authentication and even more literally within minutes and this is something that would take you weeks to implement on your own so let's explore the docs here we can follow the nextjs quick start I can see that the next major version is coming soon so I'm going to use it immediately and you can use it with me but there's also a high probability that you're watching this video later on and that the version two is out of the beta in any case you should be able to follow along just fine so the first step is to install Clark nextjs let's copy the command and paste it right here next we have to set up our environment Keys we can create a newv dolo file and then add our environment variables so let's copy it head to the root of our folder and add a new file called env. local and simply paste it right here next we have to add clerk provider to our app so let's do just that going back to our outer layout which is just within the app so that is this one right here we want to wrap our body with clerk provider coming from clerk nextjs so we can just do this put the body within it it and indent it properly next we have to add middleware to our application so let's create a new middleware dots file and put it inside the root directory alongside the env. loal let's copy it and create a new file called middleware dots and we can paste it in this middleware we can Define our public routes by saying export default Clerk middleware later on we'll be able to modify our clerk middleware to make some routes public and others private next let's create a header with a cler component here we can use just this signed in to show the user button and we're going to use it within our navbar so let's head over to navbar and let's render it right here where it says clerk user management we show the signed in and we show the user button sign in is coming from Clerk nextjs and user button is coming from clerk nextjs as well finally we need to add a homepage which we already have and that's more or less it so let's sign into our clerk account so that we can fill out our environment variables because without them the app will say publishable key is not valid so to ensure your app is fully working and that you can follow the process exactly the same way that I do and that you see the same things that I do click the clerk Link in the description navigate over to get started and then either create your account or sign in once you're in you can create a new application and you can choose your signin options we're going to keep email let's do Google maybe LinkedIn and let's also add GitHub this is looking good so let's add the application name of JSM Zoom clone and let's click create create application and now we can copy our own customized environment variables and paste them right here and while we're in the dashboard we can also expand user and authentication go under email phone and username and turn the username on so we can uniquely identify all of our users with that in mind back in our code we can now see a user button if we're logged in but if we're not we have to to find a way to log the user in we can either do that by creating a signed out button so if we're signed out then sign us in using the signin button but we won't do it on click rather what we will do is we will set all of the routes to private so whenever you come to any route like Local Host 3000 or a meeting or anything we're going to automa