Next.js 14 Admin Dashboard Tutorial | Fullstack Next.js 14 Project with Server Actions

Hello friends today we are going to create this beautiful dashboard application using nextjs 14 we'll Design This homepage and after that you will learn how to fatch data using the new version of nextjs this is important because we will not use an API route anymore we will patch and update our data on the server components you will learn how to use pagination how to search for any item and you will see how how easy to create all these functionalities without using any use State and use effect hooks we will fetch the data using the nextjs navigation and it improves the user experience and the search engine optimization and after that you will learn the most exciting part nextjs server actions as soon as you click here it's going to revalidate your data and here you can add a new user with server actions let's see the user it will display the user detail and we can update the data and we will do the same things for the products and finally we will build the authentication and protect our routes using a middleware let's log out as you can see it redirects me to the login page and now I can cannot reach the dashboard let's write the wrong credentials and to show this error we'll be using the new use form State hook this hook allows us to get the response from a server action if there's an error we are going to update the form State and if I write the correct credentials I will be redirected to the dashboard and now I cannot see the login page it's a great project to learn the new new features of nextjs 14 and in the next video I will create a complete nextjs tutorial if you don't want to miss that you can open your notifications and after completing this tutorial we'll deploy our project using hostinger as you know it's the hosting sponsor of the channel and I create different projects using hostinger every month and for this project I'm going to choose a VPS hosting if you choose the most popular VPS you will get a really generous RAM storage and bandwidth so you can deploy all your projects on a single server and these servers are super fast because they use mvme ssds and one of the most powerful AMD processors and now there is the biggest discount of the year only for Black Friday and if you want to get an extra discount use the link in the description choose your time period and and apply the lamad dev coupon code here after purchasing you are ready to set up your server choose any location we are going to install a panel and it's going to be Cloud panel let's create a password and finish the setup after this process it will be ready to deploy your apps so let's create our application and deploy it to our server okay let's open up vscode and create here a new folder and inside this folder we will create our next application to do that you can open up your terminal and say MPX create next app and latest if you do that it's going to install the latest version of nextjs but I recommend you to use my GitHub repository and this starter Branch because if you watch this video after the release date some dependency versions might be different to prevent any possible errors you can use this repository I also removed all the unnecessary files and styles so we are going to create everything from scratch without wasting time so I'm going to come back and make sure you choose this starter Branch because at the end of the video I'm going to create another Branch here and it's going to be the completed version of the application and after choosing starter Fork this branch and it's going to create a new repository on your account so it will be easier for you to follow your steps during the development after forking you can come here and copy your URL and come here let's remove this I will say get clone paste your url Dot and enter as you can see they are here but we don't have our libraries let's install I will say mpm install and not modules folder is here right now it's ready to run let's run I will say mpm run down let's open up Local Host 3000 okay it's here so let's decide what we are going to create this is going to be our homepage and everybody will be able to reach this page but after that we are going to create this dashboard and we will be able to see this page only when we are logged in basically we are going to have three main Pages the homepage the login page and the dashboard let me log in okay let's create them and after we will start designing our dashboard if you check the app directory you going to see the page file here this is our homepage let's create dashboard and login pages page. jsx and another folder and it's going to be login let's create our functions I will say login page and dashboard page if you don't know how I'm using this shortcut you can watch my vscode video and you can learn how to create these react cipit okay let's see this is the homepage dashboard and login okay perfect let's start with this dashboard I'm going to open up my example as you can see we have a sidebar here and a na bar and if you check other Pages like users you will see that the sidebar and nbar is still here or if you open up any other Pages they are still here basically they are going to be a part of our dashboard layout so instead of creating sidebar and nailbar components and use them for every single page we can add them into our layout and we are not going to waste our time let's do that firstly I'm going to create my nbar and sidebar components to do that you can create here components folder or UI folder let's say UI because in the documentation of nextjs they are using UI and inside I will say dashboard components login page components and we can create homepage components inside directly this UI folder but remember the nabar and sidebar belongs to dashboard we are not going to use it in the homepage or login page this is why I created this folder and inside let's say nowbar oops nowbar and sidebar let's create our components and my component I will do the same thing for the nbar and let's use them inside our dashboard to do that I'm going to create my layout jsx and as you realize we have the main layout here let me shrink this and whatever I add here let's say test and this H1 tag is going to appear everywhere in dashboard in homepage and login page by the way there's an error because I used it before body tag it should be inside but anyway this is how we are using layouts so I can do the same thing for the dashboard page I'm going to remove this and as you can see we are going to need a children and this children will be our main content basically this ad page users page or these contents so let's take this children I'm going to close here and I will say children and inside my layout I will say menu de and it's going to contain our sidebar and after this div I'm going to create another one and it's going to contain our nebar and this children so first one will be nowar and our children let's save this by the way and perfect so if I create any other page inside this dashboard we are going to keep seeing this sidebar and N let's create inside dashboard I will say users and products let's create our Pages page. jsx let's say products page and users Page by the way the name has to be page if you create any other name here it's not going to work the extension can be JS jsx or TSX let's say users page let's see as you can see perfect and product okay this is how we are using nextjs layouts so let's give some style as you can see there's a space here but in our application we don't have any space it starts from here as you can see the color is different so let's give a global style if you install a next application you're going to see that your Global CS is inside the app directory but I want to move this into UI folder like that let's open up layout and change here it's going to be UI and Global CSS and this is the recommended folder structure in the nextjs documentation by the way I'm going to create a complete nextjs course and in this course I'm going to share my thoughts about this structure or generally about next Jaz but for now for this tutorial let's stick to official documentation and use it like that inside UI we are going to create our components and we are going to Define our CSS files okay let's actually close everything and open up Global CSS first say I want to give a background and text color for my application to do that I'm going to create some variables I will say root let's say background color and it's going to be these dark color and I'm going to create the soft version of this color BJ soft and it's going to be this color and the text color will be white but also I'm going to create the software version text soft and I'm going to paste my color here it's going to be this gray color okay let's use this inside our application to do that I'm going to be using body and I will say background color is BG and the default color is text color is text and let's remove the default margin and padding using Universal selector and I will say box sizing and Border box if you don't know fundamentals if you don't know what's the universal selector why we are using our background color inside body what's HTML you can just check my previous tutorial you're going to find awesome CSS tricks and that video will be in the cart on the top right you can check that video and come back okay and what else if you create any link it's going to have a default color to prent this I'm going to choose all the links and I will say color will be inherited from the parent so we are not going to Define any color here and I'm going to delete the text decoration it's going to be num because by default there is an underline I'm going to remove that and that's all this is our Global Styles I can close here and let's give a style for our dashboard in our example as you can see we have two main sections this sidebar container and our content basically we are going to be using flexbox so inside dashboard I'm going to create a CSS file and it's going to be dashboard. module. CSS there's a typo here okay and each component is is going to have its own CSS file so I will say nowar module let's copy this and paste for sidebar oops inside sidebar component okay let's close them and this is our main CSS file and what I'm going to do is create a container and make that container display Flex let's open up our page I'm going to close everything here this is our layout and I will say class name styles. container let's import our CSS by the way I'll say import styles from UI dashboard CSS okay there's a warning here because I forgot the dashboard folder and I'm going to give class name for this sidebar container styles. let's say menu and it's going to be content okay and in our example as you can see this menu is smaller than our content so we can give some sizes firstly let's open up our CSS file here and I'm going to close this menu menu and I will say container display flex and for menu container I'm going to give Flex one and for Content container Flex will be four times bigger than menu like that let's give our background for the menu I'll say background color we can use our variable here and it's going to be PG soft it's here if it's not visible enough it's because of the video If you create your own application you are going to see that this color is much softer and let's give some padding okay and I will do the same thing for my content before this content container let's take care of our site bar I'm going to open up my sidebar container here and sidebar CSS here and let's give class name styles do container let's import styles from sidebar module CSS before giving any style let's create our items those links I'm just going to copy and paste my data as you can see we have some categories and each category has some links inside which includes icon the link URL and the title and for those icons we are going to be using react icon Library let's do that I'm going to open up my terminal and I will say m PM install react icons and I'm going to write the version as I said if you don't want to see any conflict any error you should install exactly the same versions after that you can update I will enter let's close again and I'm going to import my icons like that if you want to you can visit this website and search for any icon for example let's choose material icons and here if you want to use this icon just click on that and it's going to copy this component and you can import this here okay right now we can show our items in our sidebar to do that I'm going to be using map I will say menu items map and for each item let's say each category we are going to create a do actually let's say a list here and I'm going to WRA my map here and I'm going to call a list item let's check what we have as you can see each category has a title and list let's use this title cat do title of course there is a warning because we didn't use key value let's say key and again cat. tile because it's Unique let's see I'm going to close here I'm going to open up dashboard oops I didn't use curly brackets and perfect and I can do the same thing for our links this list to do that I'm going to create another component let me make this bigger and inside sidebar I'm going to create let's a menual link I'm going to copy this and create my component and CSS let's create our function and using this component I can show my links let's take our item here first first here I'm going to show my icons and item do title let's make this a link and the path will be item do path let's check [Music] again as you can see title path and icon okay let's use this component here I'm going to wrap my category title let's say span and I'm going to give a class name and it's going to be styles. category and after that again a map because we are using our lists cat and I will say item and for each item I'm going to call my component menu link component and I can pass this here we need a unique key and it's going to be item do title let's see okay perfect right now I can give my style I'm going to use this container firstly I'm going to make this position sticky that because in our example when I scroll down as you can see it stays here so I will say position sticky and I can give any position here let's say forly we can't see anything here because we cannot scroll right now let's give style for our items but firstly there is a user div here as you can see we have image and user text let's create that before this Ur I'm going to say user and it's going to have an image source and I'm going to give a size let's say 50 pixels like that and for now let's use this image where is our public folder here we are going to be using this image because we don't have any user yet so I will say avatar.png sorry no Avatar okay after this image I can create another div here and it's going to be our user detail first one will be our username let's say John do and one more and it's going to be the title let's give class name username and user title okay right now I can give my style firstly it's going to be display Flags our items will be horizontal let's Center them and gap between image and title will be 20 pixels like this let's give margin here 20 pixels and for user image let's make this circle border radius 50% and I will say object fit cover by the way I don't have any class name that's SK okay and let's make them vertical user detail display flex but it's going to be vertical okay let's make this Boulder font F 500 perfect and I can decrease this font size and I'm going to change its color and it's going to be our soft color okay what about our list firstly I'm going to delete this list decoration let's give a class name sorry it's Ali it's going to be list styles. list let's use it I will say list style and it's going to be nor let's change this category names it's here again it's going to be soft font fate will be Bol and font size will be smaller and I'm going to give margin to top and bottom let's let's take care of our items we have container here I'm going to open this here and let's say padding again display Flex align item Center I'm going to Center the icon and the text and gap between those items will be 10 pixels okay right now I can give another class name when it's active we can show different background for example we are in the dashboard and it's going to softer color let's check like this and also when I hover over I'm going to change the background so I will say when I H the background color will be this color and also I'm going to give here a condition I will check my URL if this part of the URL equals our link path it's going to be active to do that we are going to be using use path name hook const path name as you can see it comes from next navigation let's see what we have I say console lock of course to use this hook our component should be a client component so I will say use client directive as you can see for each link it shows our path name and since it's equal to this link it's going to be active so let's write here a condition and I will say it's going to be container but also I'm going to check the path name if it equals item path is going to be styles. active so let's use this class name I will say if it's active it's going to be this color like that okay let's give some margin and change the Border radius it's going to be five from top and bottom and Border radius will be 10 pixels okay perfect this is what we want so let's take care of this nowbar I'm going to close everything and open up nowb bar and open up the s and I'm going to move this here quickly let's say container and let's import this CSS actually I can use my cipet like that it's much easier and firstly we are going to have a title here and again we are going to take this title from our path name and after we are going to have another container this search bar and those icons so I will see use client and again my hook here let's import and I'm going to import my icons like that it comes from react icons firstly we are going to have a title div and I'm going to write here the path name but be careful here as you can see it's dashboard but if I use the users link as you can see the path name is dashboard and users if you want to you can leave it like that but if you want to use only the last item you should use a split function split use slash and using this slash I can separate my path name and I'm going to take the last item to do that I can use pop function let's see and perfect let me make this smaller and I will say menu do and inside we are going to have the search de inside this D yeah I'm going to have this icon and input my icon component here MD search and let's create an input I'm going to give placeholder and it's going to be search and I'm going to give a class name styles. input after this search component search D I can show my icons and let's paste them okay as you can see we can give any size here in this case they are going to be 20 pixels like that let's give a style firstly our container will be display Flex so everything will be horizontal let's separate our items using just fire content and I'm going to Center them vertically perfect let's give a background I'm going to give exactly the same color so let's say padding first I'm going to give border radius 10 pixels and background color will be our soft color let's say BG soft okay let's change this title color will be soft uh font weight will be bolt and I can capitalize this first letter text transform will be capitalize what about this menu again it's going to be horizontal and I'm going to separate them display Flex align item Center and let's separate using Gap and for the search I'm going to give this color it's going to beit lighter and I'm going to give space here so let's say Gap 10 and background color will be these light color let's give pad inside and Border radius will be 10 pixels and for the input there's a default background color as you can see it's white let's change this I will say transparent we are not going to see any background color or any border and the text color will be our Tex color okay awesome let's separate them and complete our now bar I will say icons gap between items will be 20 now we have created our sidebar and now bar by the way we didn't use log out icon let's create that button after this URL I'm going to create a button and I will say log out let's give a class name and also I'm going to use this icon MD log out okay in our example as you can see we don't have any background or border it's going to be just like these links but it has to be a button because we are going to be using Ser actions when I explain that you are going to understand better but for now let's give our style I will say log out I'm going to give exactly the same style as we gave for our links but additionally I'm going to delete the background color because it's a button or let's say background nonone border nonone and the width will be 100% okay there is still background okay let's change this color it's going to be white and perfect and I can give how effect and I'm going to change the background it's going to be just like links okay and that's all let's delete this console lock and I can close everything and let's see what we have here as you can see we have some cards here and after this component that shows our users and the transactions and we are going to have a chart here and finally those sticky boxes and they all are going to be inside dashboard UI I'm going to open up my sidebar and inside dashboard I'm going to say cart cart jsx and CSS let's say container and let's actually copy this and paste inside our dashboard and it's going to be chart let's change [Music] them and again actually let's do two more components and it's going to be transactions right bar and what else okay that's all card transaction chart and right bar let's remove this and let's create our functions okay I can close them and let's take care of our cards I'm going to take my CSS file here and I'm going to call all my components inside my dashboard dashboard page and let's create a d and it's going to be cards and I'm going to call my card here let's import we are going to have three cards by the way let's import our Styles UI and dashboard okay as you can see we have two sections this section and this right bar section let's create our div firstly I'm going to give here class name let's say proper and the first section will be let's say main section it's going to include all our components and other section will be let's say site and it's going to contain our right bar after these cards I'm going to call transactions and chart let's make this display flag first and give size for Main and site because in our example as you can see this main block is much bigger than this right bar so I'm going to open up my CSS dashboard module CSS as you can see we have our main items but inside content we are going to have a rapper main block side block and inside the main block we have our Cuts so let's make this display flex and gap between Main and sidebar will be 20 pixels and I'm going to give some padding here okay let's separate them this main block will be bigger so let's say Flex three and it's going to be one and I'm going to separate my items inside this main block to do that I can use flex box and column and gap between each item will be 20 like that what about those cards again it's going to be horizontal and just why content will be space between okay perfect so let's take care of our cut component I can close here and this page inside our card we are going to have an icon a title a number here and is description let's do that I'm going to use my icon and the size will be 24 pixels and after that I'm going to create a du and it's going to include our texts firstly we are going to have a title let's say total users let's give here any number and finally let's take this from here and paste and I'm going to change this percentage because each color will be different let's give aan and it class name will be positive it can be positive or negative we can take this as a prop of course but for now it can stay like that let's give class name for our title styles. title I'm going to copy this and paste here and let's say number let's give here also I'm going to say detail okay let's give our style firstly I'm going to change the background again for the radius our items will be horizontal this icon and those texts and this text container container again will be display flex but Flex direction will be column and I'm going to change Tex sizes let's do that and firstly let's give our background color it's going to be BG let's give our padding border radius it's going to be display flag gap between icon and text 20 and I will say cursor pointer and for texts again display flex but column let's change text sizes for number for example is going to be bigger 24 pixels and font weight will be 500 and for the detail it's going to be smaller 14 and the font weight will be 300 and if it's positive the text color will be lime if it's not it's going to be let's say red that but where is our background color oh I said BG it's going to be soft of course but their sizes are small let's give 100% and perfect and I can give different background when I hover over let's take our container and H effect and the background color will be softer let me copy and paste actually I can assign this as a variable but anyway when I hover over it's this color and what about this component let's open up I'm going to close them and open up my component and it CSS file as you can see we have a title here and after that we are going to create a table and each row is going to include the username and image status date and amount inside container I will say h2 tag and it's going to be our title latest transactions and after that a table let's give class name actually styles. table and title okay and inside this table and I'm going to create my table head and body basically it's going to be our titles those titles and body will be our users let's create our rows the first one will be name status date and amount and inside body we are going to have our users the first one will be user IM image and username status date and amount let's create our image user image it comes from next image quickly I will say source and again we can use no Avatar PNG let's give our size it's going to be 40 pixels and height it's going to be the same and let's give class name because it's going to be a circle so we can change it using this class name and I will say user image okay after this let's give username John do and we are going to write here status but as you can see we have different status here pending on or cancelled for each item we can give different span let's say pending for example but also I'm going to give a main style I can say styles. status and also the style name and I can write here any date and any number here okay let's give different users and I'm going to change this status I'm just going to copy this and the second one will be done and canceled okay right now I can give my style let's give our background color BG soft padding will be 20 pixels and Border radius and for this title let's change its color and font weight and I'm going to give space here let's say 20 pixels font weight will be thinner and the color will be our soft color tag soft what about this table as you can see it's small let's make this 100% perfect and for each item inside I'm going to give some heading let's use table again and I'm going to choose TD and let's say 10 pixels did I give any class name here or not okay I didn't and before them I'm going to create a d and it's going to be user and I can wrap my image and this username okay let's say user I'm going to separate them and elign items will be Center okay let's change this image it's going to be a circle remember we have user image firstly I will say object fit it's going to be C and Border radius will be 50% and what about those STS I'm going to give some border radius 5 pixels padding will be five again I'm going to decrease the font size and the color will be white but when it comes to each item I'm going to change their colors I mean background colors pending it's going to be this color let's duplicate this I will say done and canceled and I'm going to paste my color like that okay awesome and let's check as you can see we have an chart here to do that we are going to be using rechart Library let's open up our terminal and I will say mpm I recharts and the version will be 2.9.0 let's see what we can and create let's open up re charts.org.nz a data and using this data we can show the numbers we can compare them as you can see it's comparing PV and UV and after creating our data using responsive container and line chart components we can create this chart let me copy this let's close everything and open up charts inside this container I'm going to create my title first let's write any Title Here and After I'm Going to paste my items let's import our components here I'm going to copy this paste here and also we are going to have this data but I'm not going to use this one I'm going to use my own data let's paste here as you can see see we are going to compare the visit and click numbers and the name of each section will be the days of the week so instead of py I'm going to say visit and instead of UV it's going to be click let see I can close here of course this chart is interactive so we cannot use so component it's going to be use client but it's going to Infinity to prevent this I should give height for the container let's say 450 and perfect let's give style for our container I'm going to change the background again as you always do I'm going to say soft padding and Border radius what about this title I'm going to give exactly the same style font fate will be smaller color will be softer uh margin bottom of course I didn't give class name let's give styles. title and there's a trick here if you are using responsive container I recommend you to change this height and make it 90% other wise you can see some overflows and okay awesome as you can see this background is white and also we have this container behind let's see it's a little bit different let's remove that container we don't need this and I can remove this from import perfect and I'm going to change the background color of this tool tip so I'm going to come here and say content style the background color will be our main color but I cannot use our variables here I should drag the pass like that and I'm going to remove the Border it's going to be none okay what about this right bar we have two items and each item has this title another title a subtitle here and a description and this button and for the first item we are going to have this image let's do that I can close them and open up right bar so let's create our first item as I said the first item has an image so let's create here another do and I'm going to say background container and inside I'm going to create an image it's going to be this image I'm not going to give size I will just say fill so it's going to fill inside the container Alt and after that I can create my texts so let's say do texts the first one will be let's say notification title subtitle and description let's copy this actually after that I'm going to say H3 tag and it's going to be this tag title another span uh description let's say P tag okay let's give different class names title subtitle and description and after we are going to have this button and as you can see there's an icon here let's create after this P tag I'm going to say button and a class name and let's say button and inside my icon player icon this one and I will say watch and after I'm going to create another item and it's not going to have any image actually I can directly copy and paste there's nothing different we don't have to waste time like that okay let's give style let's see first oops there is something wrong here this is our container after we have item one de is missing here I think okay let's import this of course the image is too big let's fix this firstly I'm going to say BG container so we can see our image I'm going to give absolute positioning so I'm going to show it on the bottom right bottom zero right zero and I'm going to give some size it's going to be 50% it's not going to contain the whole container of course if you are using position absolute the parent should be position relative our parent is item okay let's change this object fit it looks a little bit weird let's come here give class name styles do let's say BG object fit will be cover and I'm going to change its opacity perfect and let's take care of our items but before when I scroll it should stay there so I'm going to say position fixed perfect and let's take care of our items I'm going to give my background color you can directly use background soft or in our example there is a linear gradient the top of the element will be lighter let me actually copy and paste as you can see the bottom is darker and the top is lighter and I'm going to give some padding from top and bottom and Border radius will be as always 10 pixels and going to give margin bottom I'm going to separate my items it's going to be 20 pixels and that's all what about each item inside I will say texts display flags flag direction will be column I'm going to separate my items perfect let's give style for our texts notification font weight will be bolt and title is going to be 500 and font size will be smaller and let's give soft color text soft now finally we have a button I'm going to give some padding Insight let's check I'm going to separate my items give border radius and background color and the text code will be white align item Center and let's separate them and the background color will be this purple color it's going to be white I'm going to delete the Border oops it's going to be non and Border radius 5 pixels and we can click on this so I will say cursor pointer okay as you can see it size is too much so it's going to be maximum content okay but as you realize it's cropping our image so instead of cover I can say contain so it's going to fit inside this container it's not going to crop perfect but there is something wrong with this second item when I paste my item I made a mistake here I think so let's don't waste time and copy paste again oh okay in our example it was text but we use text let's remove this and it's going to fix okay perfect it looks really nice so let's take care of users page let's see what we have it's really easy we are just going to add here a container we are going to have top bar and this content inside top bar we are going to have search container and this button and inside this content we are going to have table and after we are going to create this pagination by the way there's a footer here but we didn't create let's create quickly I'm going to close them open up dashboards inside this UI I'm going to say footer I'm going to create my component and this CSS it's really easy there is nothing fancy we are going to have two items let's say logo another D and it's going to be this text let's say text let's separate them I will say container ER display flag align item Center and just fire content space between and as you can see its font weight is Bolt and this text is smaller I'm going to say logo font we will be Bol and text will be 12 pixels let's use it inside our dashboard I'm going to open up my layout and after this children I'm going to say show me my footer as you can see its color is different and we don't have any space here let's change firstly I'm going to give here margin top and the color will be our soft color that's all so let's take care of our users page I'm going to close them open up users oops it's dashboard inside users let's close this so let's create our containers firstly I'm going to say the main container styles. container by the way we don't have CSS file let's import import import styles from App directory UI folder dashboard UI users and the CSS let's check okay it doesn't exist let's open up UI dashboards let's close them actually we can see better okay as you can see we don't have our Pages yet let's create I will say users page and inside we are going to create components belong to this page and also the main CSS file okay there is no problem anymore let's do the same thing for products page okay let's create container like that okay I can close this menu and let's create other containers as I said top container and content container and after we are going to add other items so let's say top another one is going to be let's say bottom or actually we can directly create our table we don't have to give any container so class name will be styles. table okay inside our top container we are going to have two items search and button but this search component will be functional when I search for any name it's going to fatch our data so instead of writing this here directly inside our component I can create a sub component inside users I'm going to say search component but but creating this inside our page is not a good idea because we are using exactly the same functionality for the products as you can see it's going to be here so this component doesn't belong to products or users the better option is creating our component inside dashboard because it's a common component so I'm going to come here and say search component jsx let's create our function and this CSS okay so let's use this here search component and as you can see we have different placeholder here search for product search for user so we can take it as a prop so I'm going to say placeholder and I can use it here it's the user page I'm going to take this prop here I will say placeholder and I'm going to use it inside my input let's create our items first first one will be the icon and input and I can use this placeholder here let's give class name I'm going to say input and let's give some style let's see first as you can see it's exactly the same style so I'm not going to create this again I'm just going to copy and paste it's exactly the same thing and after let's give a style for our container as you can see there is no placeholder let's give I can close this search bar for now and I'm going to say placeholder search for a user okay let's create our button here I'm going to give class last name styles do add button of course it's going to be a link when we click on this button we are going to open up add new user page so HRA will be dashboard users and at I couldn't import okay so let's separate them inside top I'm going to say display Flags align item Center and justify content will be space between okay by the way let's give margin for our container and background background color will be our main color main soft color BG soft I'm going to give padding B the radius and margin top okay what about this button it was add button I think let's check okay I'm going to give some pading and background color will be our purple color remember we use this for the right bar and the text color will be white or let's say text color I'm going to delete the Border I'm going to give border radius is going to be rounded and we can click perfect and what about our table let's see what we have first name email created at roll and action by the way there is a mistake here it should be status and after action let's create again have hat and bu and the first one will be name email created at rooll and status and for the buttons we are going to be creating action column and let's create our first user I'm going to create a row and the first item will be the username and the user image so again I can create a d which is user and inside we have user image and after username John do let's give our image here no Avatar size will be 40 pixels and I'm going to give class name so we can give object fit user image let's create other items TD and it's going to be user email John gmail.com another one is going to be date let's give any date here let's say admin status will be active and our buttons Let's see we have two buttons View and delete let's create again I'm going to create a link first I'm not going to write anything here for now when we patch our users we are going to send here the user ID let's create here our view button and I'm going to give class name it's going to be a button button styles do button but also the view button because its color will be different styles do let's say view I'm going to duplicate this and it's going to be delete okay let's see let's q a style I'm going to open up my CSS file here and let's copy our table and start firstly it's going to be 100% it's going to contain all our component and for each item I'm going to give padding remember how we are doing this let's take care of this user gap between items will be 10 and I'm going to Center them perfect let's make this circle quickly user image border radius and also object fit and for the buttons let's actually create here a do buttons it's going to contain our view and delete buttons again gap between them and for each button I'm going to give padding from top and bottom left and right let's give some border radius color will be our text color I'm going to delete the default border and cursor will be pointer like that let's change colors for view the color will be teal this green color and if it's delete the background color will be this dark red color perfect and finally we can create the pagination component let's open up sidebar and again inside dashboard I'm going to say pagination again it's a common component I'm not creating this inside users jsx create my component and let's create this CSS okay let's use it here after table I'm going to say imagination let's see what we have inside we are going to have two buttons when it's disabled its color will be different there is nothing fancy let's quickly create inside pagination let's close here actually I'm going to create two buttons the first one will be previous and the second one will be next that's all for now let's give style I'm going to give some pading I'm going to separate my items space between and for each button the padding will be five and 10 csor will be pointer and when it's disabled the cursor will be not allowed Let's test I'm going to say disabled okay perfect if you want to you can give different background or whatever you want for me it's perfect so let's do the same thing for the products page I'm going to close everything and let's open up products actually I can copy everything here and just change my table let's import link image I'm going to import my Styles main folder app UI dashboard products and CSS let's see oops it should be dot of course we did an import search and pagination okay there is no error we are going to change our rows by the way let's change this placeholder also search for a product and I'm going to change this link it's going to be product and let's see what we are going to have we are going to have title description price created at stock number and actions let's change them title description again created at but before it's going to be a price the stock and action and instead of user I can say product let's copy this actually we can use multiple times and instead of no a let's check our image it's going to be no product and after the product name let's say Ione the description let's write here description for now created at but before as I said the price and the stock number and that's all let's see perfect let's give our style it's going to be exactly the same style the only difference is this user container it's going to be product container so let's take everything inside users and paste inside products and I'm going to change here okay by the way there is a space here to prevent this let's open up our dashboard module and and I'm going to say minimum height is going to be 100 VH okay so what else we have we have this view page as you can see the item image and a form here that we can edit our item by the way it looks a little bit ugly maybe we can change here we can give more space and after that we are going to have this add page that we can add new product or user let's create create those pages inside dashboard and product I'm going to say add page let's say add product page and I'm going to change this link is going to be app folder UI dashboard products and it's a different page so I will say add product and the CSS let's create this inside dashboard products at product folder and it's CSS file okay let's see if it works or not I'm going to click here okay there is something wrong oh because I said at. jsx as I said if you are creating a page it has to be page okay awesome let's see what we have it's the user page let's open up products as you can see we have some inputs and text area and select button here let's let's create them it's really easy I'm going to create here a form let's give class name styles. form and inside let's create our first input placeholder will be title the product title and the name will be exactly the same it's important because we are going to push this item into database using this name and I will say required we cannot send any product without its title and what else we have select here that we can choose any category let's create I will say select name will be let's say category and inside we are going to create some options and the first one will be let's say kitchen of course we are going to give here a value again kitchen let's give some more let see phone computer let's make them capital okay it's enough as you can see it's here but the initial value is Kitchen instead I'm going to use this text so I'm going to create one more option here it's going to be choose a category and the value will be general just like work press and after that another input at this time is going to be a number because we are going to pass here our price placeholder will be price and the name another one is going to be stock number color size it's going to be a text color and size and finally we are going to create this text area and it's going to be the description let's give placeholder and it's going to be description I can increase rows let's say 16 I can delete columns and finally a button and I will say submit and the type will be submit okay let's give our [Music] style I'm going to close everything here open up the ad page and CSS okay so let's SK our background as we always do I'm going to say war and BG soft and again padding and Border radius and margin top after that let's fix our form I'm going to say display flex and let's give padding for our input and text area I will say form input text area and also for the s I'm going to give padding 30 as you can see all items are horizontal but if I say flx wrap and wrap it's not going to overflow anymore so if I give some size for my inputs it's going to look better let's copy this and let's say 45 pixels I don't want to make this 50 because I want to give space here okay there is no space because we didn't say justy content space between let's give and perfect so let's remove those background colors and borders it's going to be transparent color will be our text color and I will give border radius okay let's use space between them perfect maybe I can give different border let's say two pixels solid and this gray color Okay much better but why it didn't work because I didn't give with okay awesome and for this text area I can give 100% okay and finally this button again 100% I'm going to use some padding and the background color will be teal let's change the the text color it's going to be white I'm going to delete the Border default border border radius and finally cursor pointer okay so let's do the same thing for the users page when I click here we are going to see the new user page let's create I'm going to close them open up my menu and here actually I can copy and paste this and change the name add user page in this case it's going to be user let's create this actually again I can copy and paste users is here and I'm going to change the file name add user and here okay let's see what we are going to change I'm going to open my example here username email password phone is admin select is active and address let's change I'll say username email password phone and let's change them by the way it's going to be email password phone it's not going to be required by the way it can be empty select will be is admin by default it's going to be false let's say is admin and it's going to be selected and let's say yes and no and false let's remove this and I will do the same thing for is active and the default value will be let's say true and after that address and button let's remove them okay that's all let's see perfect in our example we don't have any border and this background color is different let's change it can can be darker I said transparent but I'm going to change it and it's going to be BG so this dark color it's much better I think let's do the same thing for other one okay and one more thing we are going to need and it's going to be view page when I click here it's going to show the single users information and we will be able to edit our user let's check I'm going to click as you can see this is the user ID there is a user information here and the edit form let's do that I'm going to come here inside users and I'm going to create a new folder and it's going to be ID basically this ID can be anything if we say users and any ID it's going to show that page and using this ID we will be able to fetch our user let's create our page and component and let's say single user page and I'm going to change Here app UI dashboard users single user and CSS so let's create create this I'm going to copy inside users I'm going to create new file and paste this so it's going to create this folder like that let's say container and let's open up our page firstly we are going to have two sections information section and the form section so let's say do info container and one more and it's going to be form container and inside this info container we are going to show our image and the user information let's create actually the image container and I'm going to create an image source will be let's say no Avatar again and I will say F it's going to fill its container and after that let's just say John do after that I can create my inputs but each input has a label so let's say label username let's remove this and after that input name will be username and the placeholder will be the latest name of this user as you can see its name is hello we can see here so let's say joho for now and I will do the same thing for other inputs let's say email like that it's going to be email type password type will be password it can stay like that else we have phone text and phone and I will say address it's going to be text area it's going to be a little bit bigger and address New York and what else we have is admin and is active let's create our label and I'm going to create a select it's going to be is admin and inside my options true or false I'm not going to write anything else if the previous value is false it's going to show no if it's true is going to show yes but we are going to give this functionality later let's do the same thing for is active and that's all I think I'm going to save and let's see okay our link is different let's open up users page and I'm going to change this link it's going to be dashboard users and the user ID for now let's say test and I will do the same thing for products let's see right now I'm going to click okay there is something wrong because I forgot slash here okay it's here but there's something wrong there's a broken image of course it's going to be no out there and it contains all this screen because we didn't give any height and width for the parent let's fix that I can close those pages and move this CSS file here firstly let's take care of our image container so we can see our items but before let's separate our sections as you can see this section is smaller so I'm going to say flx one flax 3 info container flx one of course it should be display flag let's give gap between them and after form container uh flax three after that let's give size for the container image container I will say 100% And the height will be let's say 300 pixels and if I say position relative it's going to fit inside this container like that let's give border radius if I do that it's not going to be visible because it's overflowing so let's say overflow hidden perfect and let's give background color for the info container BG soft again padding uh border radius and I can give space here actually let's give for the container perfect and let's change this font we and I'm going to give margin bottom here I'm going to separate my image and this text maybe let's change this color it's going to be soft color okay so what about this form container let's do the same thing background padding and Border radius after that I'm going to select my my form by the way I didn't create any form let's create styles. form let's drop our items like that okay I will say display flx flx direction will be column and let's change our items I will say form input text area and select I'm going to give padding 20 some border I'm going to change the Border radius 5 pixels and the background color will be dark color so I will say BG and the text color will be text okay let's give space between them actually actually I can directly give here and I want to decrease the font size of labels I'll say form label it's going to be 12 so let's create our button grab be 100% let's keep padding background color again till and the color will be white I mean the text color let's delete default border and give border radius and we can click let's give space here okay by the way I didn't like this space I can't change it I'm going to come here info container and I'm going to say height will be maximum content like this by the way I can delete this placeholder we shouldn't see our password like that okay it's not the best maybe I can make some changes here if I make you can find it in the GitHub repos story but for now it can stay like this so let's create our login page and after we can give our functionalities let's open up login and in our example I'm going to log out as you can see it's really easy I'm going to create a box here title to inputs and button and if I give wrong credentials it's going to show here an error so let's come back and open up login page let's say container and inside I'm going to create a form let's import these Styles app directory UI login page and CSS let's create this and inside this form we are going to have two inputs first one will be username and password and finally a button let's say login let's give a Style by the way it's inside the login page it should be here okay so what I'm going to do is giving full size here because I'm going to Center everything think like that uh for this form let's give background PG soft I'm going to give some padding and Border radius let's give width and height and my items will be vertical so I will say column and I will say justy content Center okay let's give space between them perfect and what about inputs I'm going to choose my form and input inside and again 30 pixels border border radius 5 pixels and the background color will be BG so so it's going to be darker and the color will be text color and for the button again 30 pixels background color will be our green color text color will be text variable I'm going to delete the border and give cursor pointer and Border radius here okay that's all but I didn't give any title here I'm just going to come here and say H1 tag and login of course it should be inside form it's going to be vertical and I can Center this I'm going to open up my form and I will say align item Center as you can see their size are smaller right now because we centered them so let's give 100% okay perfect and that's all this is our design the login page and dashboard we can can see our users we can view single user add new user by the way did I give same thing for products or not okay I didn't let's create quickly and after you are going to learn how to fatch data I'm going to copy this and paste for products remember it's the UI folder I'm going to change the name it's going to be product and let's open up our page and create ID and again I'm going to copy this and paste and I'm going to change my URL here it's going to be product and let's change here single product page okay I'm not going to change here because it's going to be dynamic it can stay like that first table will be title it's going to be the previous title so I can leave it like that what else we have let's check price stock color and size it's going to be a number stock let's give any number here color and size and after that we can choose our category and finally this description let's change here is going to be the previous category and finally description and it's going to be a text area and the placeholder will be description let's see again I should fix this link I'm going to open up products page and actually I created here but there is something wrong let's remove this and I'm going to click okay right now we are ready let's see how to fetch data to do that I can open up my users page and here we have are going to fatch all the users inside our database but we are going to show here let's say five or 10 items so we are going to be using pagination so let's open up our users page and fatch our users to do that we are going to need a database and for this project we are going to be using mongod DP we can use any other database but it will be easier for us because we are not using typescript so we will be able to validate our schema using mongus you are going to understand what I mean by that but first let's create our database okay let's open cloud. mongodb docomo show how to create a cluster it's really easy but there is something important here after creating your cluster you should give a permission to your application otherwise you will not be able to use it I'm going to come here and create a new user I already have just givea username and a password and the role will be read and write any database after that you should come here and click on network access and add your IP address you can add here your current IP address or basically allow access from everywhere we can use it because it's just a development mode but after deploying our application we are going to write here our server address okay it's going to make the changes and after that we will be able to see our changes here let's click as you can see this is our previous application but today we are going to create let's say dashboard database and in that database we are going to have our users and products if if you check a post here as you can see the post table has its ID created adate slack title description image and other properties so basically we should create this schema we should Define them first because it's really important to validate your table items because in our example when we create a new user for example we should be able to send only username email password phone and others nothing else and also we are going to Define our types for example username will be only string email should be string again but it should be unique we cannot use the same email or username again and again and password should be let's say minimum six characters they have to be bullan true or false and after defining all these properties everything will be much easier but how we are going to do that I'm going to open up my terminal and install a new library I will say mpm install mongus and after installing this Library we will be able to connect to our database and create our models as you can see it creates a new schema and it says name should be string size should be string and use using this schema it creates a new model basically our table here one of these tables to do that we should connect to our database first let's come here and choose the connection as you can see it's an async function so we can use try and catch block like that I'm going to copy this and open up my menu and inside app directory I'm going to create a new folder and I will say library and inside utils do JS so let's create our connection method I will say export const connect let's say connect to DB it's going to be an async function and I will paste my function here and let's throw this error let's import mongus and right now whenever we want to make an operation like fetching user or product or adding new user we are going to connect to the database but if I do that it's going to create a new connection all the time to prevent this we are going to check first if we are connected or not if we are we are going to use that connection if not we are going to create a new one so let's create here an object and I will say cons DB and if we are connected for the first time we are going to assign that connection here and it's going to be DB connections and we are going to take our first connection and ready State and if it's not empty if we are already connected we are not going to create a new connection so let's say if connection is connected just return do not connect again okay right now instead of this string we are going to pass our URL to do that I'm going to come here and I'm going to click here connect we are going to connect through our application so I'm going to choose that and I'm going to copy this URL and after the URL you can write here any database name let's say dashboard and it's ready but using your secret Keys like that is not a good idea when you use GitHub everybody can reach your data to prevent this we are going to be using EMV file I'm going to cut this and inside my root directory I'm going to create a new file it's going to be EMV and let's say and it's going to be this URL so let's open up git ignore file and add here EMV so when you commit your changes it's not going to show up in the GitHub repository let's use it here I'll say process EMV and okay right now we are ready to create our models I'm going to come here and create a new file and let's create our user schema I will say new mongus do schema by the way let's import this mongus okay and inside I can Define my properties the first one will be username and its type will be string I will say required we cannot create user without username and it has to be unique every user has different username and minimum character will be three and the maximum will be 20 let's do the same thing for others it's going to be email again string unique and required let's delete here I will say password it doesn't have to be unique I can remove this and we are going to have user image it's going to be string it's not going to be required what else we have remember is admin is active type will be bullan and when we create any user by default it's going to be false it's not going to be admin so I can do the same thing for is active volume and by default it's going to be true and let's see what else we have phone and address it's going to be string again but not required and address and there is something important here when we create any new item I want to see the created adate let's see here as we can see it gives this created ad dat we don't have to create this manually instead I'm going to come here and say time stamps and true so whenever we create a new user it's going to create created at and updated at time so let's do the same thing for our product we don't need here I will say product schema we are going to have a title string required unique I can it here description again string but it doesn't have to be unique I'm going to give a price and the type will be number again required but the minimum number will be zero we cannot give negative price and again image and it's going to be actually let's remove here I will say color size and I forgot St let's create stock here again it's going to be a number and the minimum number will be zero okay that's all so let's export them and use inside our application so I will say export const user mongus do model and the table name will be user and we are going to Wate our items using our schema let's say user schema but there's something important here if we already have user table we shouldn't create a new one instead we should use the existing one to do that I will say check the models and if user exists use it if not create new one and I will do the same thing for products like that okay right now every is much easier I'm going to close everything and let's create a new file and it's going to be data.js basically we are going to fetch our data using this file let's create the first one I say export con fat users of course it's going to be an Asing function I will say try catch if there is an error show this error and also throw that error I'll say Throw new error and I'm going to pass this error here or directly let's give any message fail to fatch users okay let's use our model and fatch all the users I will say const users it's going to be user model and I will say find and of course it's going to be a wait after fetching our users we are going to send it of course we are going to add something additional but for now let's test I'm going to open up my users page here and I'm going to fatch my data so let's say const users I'm going to use my fatch function and it's going to return our users of course async let's import and that's all let's see I'm going to say console log users and I'm going to open up my terminal I'm not opening my console on the browser because it's a server component this is how we can fatch data directly inside and as you can see there's something wrong here it throws this error let's see what happens okay there is something wrong with our connection let's check our EMV file it looks okay oh because we didn't connect I'm so sorry I'm going to come here before fing data of course we should be connected first I will say connect to DB and let's check and again we have a problem let's open up up this function and let's check what's wrong if connection is connected we are not going to do anything if it's not a wait mongus connect process EMV and we are going to assign our connection here and I'm going to console lock this error oops it's undefined because I said connection is to be connections finally there is no problem and as you can see it returns an empty array because we don't have any user yet let's come here and create a new one by the way if I refresh the page you are going to see our database and our table it's here and as you can see we have products and users let's add a new one the username will be drone email password and let's give any image to do that I can use pexels.com let's choose any image here doesn't matter like that and let's say is admin is going to be false of course it's going to be aoon and again is active it's going to be true okay we don't have to add phone and address I'm going to insert and it's here let's check again I'm going to refresh the page and as you can see it returns our user let's add one more I'm just going to duplicate this and change the name let's actually add more because I'm going to show you how to use pagination of course we shouldn't add this manually we can use our ad page but I'm going to show that later because we don't know nextjs server actions yet first I'm going to explain and after we are going to add our own data and let's add one more and it's going to be enough okay let's refresh the page and see them okay perfect right now I can use all these users in our page let me close here and using our array I can add different rows so I'm going to say users. map and for each user show this row like that there is a warning because we don't have any unique key and yeah is going to be user. ID and right now as you can see we have six items let's change their names and images it's going to be user do username and I'm going to write here a condition I will say if user has an image show it if not show no Avatar PNG and as you can see there's a warning here because it doesn't allow us to use any other image source to prevent this we have to add this host name to our configuration to do that I'm going to open up my menu and find next config and inside I'm going to add images we are going to add a different domain let's say remote patterns you can specify here your protocol it's going to be https only for the security and the host name will be pexels.com okay let's see I'm going to refresh and perfect let's remove one of them I'm going to edit and delete this image okay awesome it works let's change others user. email user. created at time and we can write here our condition if the user is admin right here admin if it's not let's say client and I will do the same thing for is active let's remove this one and it's going to be is active if it is it's going to be active if it's not passive and finally instead of this test I can update my link here and I'm going to pass here my user id like that okay perfect as you can see there is something wrong with created adate because we don't have any created adate let me copy and paste from my previous data for example I can copy this and created at dat and I'm going to paste it here and its type will be date let's see as you can see there is something wrong because we are sending a date we cannot show it as a string to prevent this I'm going to come here and say to string if there is created ad convert it to string like that and it's going to show you the full date but I want to get only this part so I can use a slice method and I'm going to take from the fourth character and 16 like that so what about this search function ality when we write any name here we are going to search for our users normally in react you can create a use State hook and store whatever you write here and you can create a user fact hook and whenever it changes you can trigger the search functionality but we don't have to use use State we don't have to use use effect so let's open up the search component and I'm going to store my input inside my browser URL so when we search for John for example we are going to add it here like query and John and using this query we are going to reatch our users to do that we are going to be using next navigation we are going to need our path name and also the search params basically whatever after this URL let's use them and you are going to understand better firstly of course it should be a client component use client and I will say const search params and use search params hook as you can see it comes from next navigation and path name let's see what we have inside I'll say console lock search params and path name I'm going to refresh open my console as you can see this is our path name we already know how to use it and this is a function that we can create a new URL and pass inside any query we want let me show you how to do that I'm going to close here and let's create a new URL I will say const perms new URL search parms and I'm going to pass my search parms here and after that I can set any query perams do set let's say test and the value will be let's say value and using these new perms I can change my URL to do that we can use replace method I'll say const replace it's going to come from use R hook again next navigation and using this method I can change my URL I'm going to use my path name remember it's dashboard and users and additionally I'm going to add my search params here let's see but before there's a mistake here we should call our function okay and as you can see it automatically adds this value so what can I do when I change this input I can take this value and add as query let's do that I will say on change method that's call a function handle search let's create our function so I'm going to take the event and create new PRS let's move them inside and I'm going to set search query and its value will be un Target and value let's try I'm going to remove here and try here JN as you can see it's immediately here if I change it's changing perfect so right now in this page using this query I can refetch my users let's come back and I'm going to take my query to do that we can use search params and and you can get any query you want in our case it's going to be C let's do that I will say const query it's going to be search parms do query and by the way it can be empty so I'm going to put here question mark and if it doesn't exist it's going to be an empty string so let's pass this query into our F users function I'm going to take it here and I'm going to write my condition the username should include this query if you write here directly your query you have to write the exact name but we are going to search every single letter to do that we are going to be using rejects const rejects I'm going to create a new expression and it's going to include our query and I can give here a new Option and it's going to be I and it means it's going to be case insensitive so if I write here any capital letter it doesn't matter they all are going to be lowercased and let's use it here rejects will be rejects okay I'm going to do one more thing here I'm going to write a condition if event Target and value exists we are going to set this perms if it's not we are going to delete that query because when we write here anything and delete it shouldn't show this query anymore let's try I will say John it's here but if I delete it's gone but it's not fetching I said John but it's not here let's see what's wrong let's open our console let's remove those users and those console locks and let's come here and check if we have query or not okay it's empty because I said query it should be Q okay it's here and our user okay perfect if I say Jane Just J as you can see John and Jane okay awesome but searching users for every single letter is not a good idea because anytime I enter new item here it's going to search for for users and this calculation will be expensive to prevent this you can write here a condition and say if it's less than three characters don't search let's do that I'm going to come here and I will say if event Target value more than two we are going to set this query let's try I say j o as you can see it's not searching but if I I say of course length let's try it's not here if I say h and perfect what else you can do you can add debounce functionality and you can wait user to finish typing to do that we can use use debounce Library let's say mpm install use debounce and I'm going to write right here my version okay right now using this Library I can wait for my users to finish their typing to do that I'm going to come here and rub my function with use debounced call back I'm going to rra this like that and I'm going to add the time period let's say 300 milliseconds let's import this from our library right now if I write quickly as you can see it's not searching but when I finish it weighs 300 millisecs and search for users and this is how you can prevent abusing your database requests okay so what about this pagination I want to see here only two items only two users to do that again I'm going to add here a query and it's going to be Page by default it's going to be one and we are going to search for our users if there are more than two items we are going to enable this next button and when I click here we are going to update this query it's going to be two and when I click here one again let's do that by the way we are going to use exactly the same functionality for the search component so let's add here a new query I will say perms set page and it's going to be one because whenever we change our input it's going to show the first page so even if we are in the second page or third page or whatever when we write anything it's going to reset here and in our users Page by default it's going to be one let's say page if there is no page it's going to be one and again I'm going to pass this page here let's take it in our function let's remove this console lock and I'm going to create here how many users I want to see so let's say const item per page let's say two of course in a real world example it should be five or 10 but we don't have that much user for for the task purpose it can be two and I can write here limit and using this item per page I can limit my query in this case it's going to patch only two items but how I'm going to see the others it's really easy I'm going to come here and say skip item per page multiply by Page minus one so what this does is it skips a certain amount of items for example when the page is 1 1 - 1 will be 0 0 multip by anything it's going to be zero again so it's not going to skip any item it's going to show us the first two items but if we are in the page two it's going to be 2 minus 1 1 2 * by 1 is going to be two it means it's going to skip the first two items and show the other two items so if I change here if I make this page two as you can see Harold Jane page three John and Mike so using this page query I can update my pagination component let's open again it's going to be use client let's take them again I'm going to copy here and paste and I'm going to going to import them okay right now I can create a new search params like that and again I'm going to need item per page because I'm going to make some calculation item per page again it's going to be two if you want to you can store this in your em view file but it can stay like that let's take our page by the way const Page search params get and the page if it exists we are going to store this if it's not it means we are in the first page and right now we can make our calculation I'm going to create two variables first one will be has PR and the second one will be has next if we have the previous page we will be able to click on this button if it's not yeah are going to disable that's right here if we don't have previous page and I will do the same thing here disabled and we don't have any next page okay so let's make our calculation I will say item per page multiply by Page minus one but remember it's a string we should convert this so I will say par in and if it's more than zero let me explain let's say we are in the first page 1 - 1 is going to be 0 0 multip by any number doesn't matter it's going to be zero again and it's not bigger than zero it means we cannot click on this button it's going to be disabled if we are in the second page here is going to be 1 1 * by 2 is going to going to be two and it is more than zero so we can click what about here again item per page multiply by our page minus one it's exactly the same but also I'm going to add here item per page and it should be smaller than the total number of our users in our case it's six of course we are going to take this as a probe but let me explain for the second page here is going to be 1 1 * by 2 it's going to be 2 2 + 2 it's 4 and it's smaller than six smaller than total number but when it comes to third page here is going to be two two multiply by 2 4 4 + 2 6 so it means we don't have any other user we are at the end of the page so it's going to be disabled so instead of six let's take our count as a prop and I'm going to pass it here you can directly say cons count equals users. length but it's not a good idea because remember it returns only two items it's not returning the total numbers of users so we cannot use it like that instead we should use our database here and hatch all the user numbers and send it as a response with these users so I'm going to create a new query I'll will say const count await user dot find again I should use this rejects because we are going to use pagination for search functionality also and I'm going to say count and this function is less expensive it's not actually get any user information it's just going to find and count so let's use it inside an object count and users oops count and let's take it here it's not returning users anymore it's returning count and users and I can send it to my pagination okay and what else whenever we click on previous or next button we are going to change our URL we are going to set new page and change the url using replace method let's do that I will say on click event and let's call a function handle change page and I'm going to pass here my type and it's going to be previous let's do the same thing for the next button and the type will be next next let's create this function const and it'll change page I'm going to take the type and I'm going to write my condition if the type equals previous params do set page and I'm going to take the previous one previous page number and I'm going to decrease and if it's not I'm going to increase this number it's that easy and finally using this page number I can replace my URL question mark and parms let's see I'm going to delete this page as you can see at the beginning it's disabled when I click here page will be two so we can click on previous let's click again we are in the first page second and third and right now it's disabled and if the calculation is confusing for you don't worry you going to use this calculation thousand times and once you learn it it's going to make more sense okay let's do the same thing for product let's open up prly I'm going to come here and copy them and I'm going to open up products page here that's paste I will say async let's import this next navigation and it's going to be patch product of course we didn't create yet let's create I'm going to come here duplicate this and change the name and instead of user we are going to be using product model and instead of username we are going to be using the product title let's say products okay we can use this function right now let's open up our page and import and it's going to be products and using this products we can show different rows map for each product show this TR by the way it's the wrong place it's our hat it should be body okay let's give our unique key it's going to be product. ID and I'm going to write here if product has an image use it if not no product of course slash here and it's going to be product title description price date but remember we are going to convert this to string and take fourth and 16 characters and this is going to be what's that stock and I'm going to change this H dashboard products and the product ID as you can see we don't have yet but if we create it's going to be a number and stock that's create two more of course we don't have created at but let's test as you can see there's a problem if it exists and perfect and when I click here it's going to show the product ID it's that easy guys and if I search for any item oops there is something wrong here it's not updating and also we cannot see the next button because we didn't send here count okay it's here but what about this it's not updating oh because I said minimum three characters so I'm going to search for test three and again it's not here let's check search PRS query okay we are sending this query and Page query and Page let's see again okay it's not showing because I'm using navigation it's a page we should take this as a prop okay it works okay perfect okay guys right now you know how to Fat data how to search them how to use pagination right now let's learn how to use NEX js14 server actions after this new feature we don't have to create any API by the way I still prefer creating apis it's more reliable and testable but I want to show you how you can do this without any API layer let's close everything to test server actions I'm going to create a test page let's say test folder and Page Insight let's create a component and I'm going to create here a form before actions we were not using this action remember what we were doing if there's an input we were creating here comp input set input use State and we were making this component a client component and using use State we were updating our input using this set method let's say on change event Target and value and using a button we were creating on click event or unsubmit event in the form and we were sending our data to database but after actions we don't need use State we don't need client components we don't need any listener here we are able to send everything inside this form using server actions so let's say action and I'm going to create any function here handle form and let's create this function and here I'm going to use use server directive and it means everything inside this function is going to run on the server let's say console lock hello and let's open up our console Let's test and as you can see there's a warning here server actions must be async functions because we are going to make some post requests and let's see I will say John and I will send and as you can see our text is here but the best thing is we can reach any input inside this form I'm going to write here form data and let's see what we have inside but we cannot see our input because we didn't give any name here let's say username I will send again and as you realize in this form data object we have our input object and it includes the name and its value so using this object I'm able to use this name so if I say const username it comes from from data and I will use the get method and write here the name of the input and its username right now I can use it here and if I click right now it's undefined because I D structure this of course it should be without object and it's here and it means inside the server actions we can take any input value and send it to our database and right now we can turn back to our users page and add new user page and here we can collect all the data from this form and send it to mongod DP using server actions and the best thing is after sending our data to database we can actually refresh this data here let me show you how we can do that I'm going to close here and inside Library I'm going to create new file and it's going to be actions let's create our first action I will say export const it's going to be add user Asing function let's get our input values the first one will be username form data of course we should get this from here get and the input name username and I can do the same thing for email passwords phone address and others but instead of writing them one by one I can directly D structure them I will say username email password phone address is admin is active and remember the form data is an object to D structure our items I can use object from entries and form data right now using all these data I can create a new user and add it to my mongod DB so I'm going to use try catch block if there is an error firstly we are going to console loog and after throw this error and let's say failed to create user let's create our user here using our model const new user new user model and I'm going to pass my items here let's save it to database I will say await new user and save that's all of course we should be connected to mongodb like that so let's use this action by the way we didn't write here use server directive don't forget that otherwise it's not going to work so I can open my ADD user page and inside my form I can call my action and it's going to be add user Let's test by the way it's not the design part anymore so let's come here and I'm going to give username I'm going to give some password phone number his admin will be false is active will be true and let's give some test I'm going to submit let's see I'm going to refresh this page and as you can see our user is here so what actually happens here is let's open up our Network Tab and write another user and they are not required they can stay like that and when I submit as you can see it's actually making a request and the end point is dashboard users and add it's just like an API request and it returns to 100 successful let's check our payload as you can see we are sending username and other user data here and there is something important here you have to validate your inputs without sending data to database because even if you write here required and type should be email or any other validation users can send different data using this endpoint what we should do is validating our data in this action but remember we are already using models here so even if different data comes in it's not going to work because our schema accepts only those items with some types and other requirements so we don't have any problem right now and also don't use your entries like that let's say data and directly send a data instead D structure every single items in this case you can make sure which data you are using and I'm going to come here and I will say revalidate path and I'm going to write the path which has the data that I want to refresh so it's going to be this path I'm going to copy and paste here so as soon as you create a new user it's going to refresh this data in our example we are using different page but imagine you have your data and also you have a form here and thanks to revalidate path as soon as you click to add new user button you'll be able to see your user here so you don't have to use usequery you don't have to use S WRR everything is much easier right now and in our project when I click here I want to redirect my users to this page and again I'm going to use same path I will say redirect and paste my path that's import it's going to come from next navigation don't use anything else and let's see and a password here and let's send and it's here of course our password is to week let's come here and our user is there okay but there is something wrong here let's check our database and as you realize when we send any p password we are storing it in a plain text but you should never ever store your passwords like that you have to Hash it first and store it like that so when user enters their password Here we are going to Hash this also and after we are going to compare them if they are equal it means it's the correct user let's do that I'm going to Hash my password to do that I'm going to use a library and it's going to be bcrypt mpm bcrypt and I'm going to write the version let's see how we can use I'm going to zoom in as you can see we are using the hash method and passing here our plane text and we are passing the generated salt here and after it returns us the hashed password let's do that after this connection I will say const salt a bcrypt generate salt you can give a number here by the way let's import this and after that I'm going to Hash my password hash password again await bcrypt do has method I'm going to pass here my password comes from user and I'm going to use this Sal and it's going to generate a new password and right now instead of this plain text I can use it let's see I'm going to create new user secure user again from 1 to six I'm going to submit let's check I'm going to refresh and as you can see the password is hashed right now it's much secure so let's do the same thing for the product I'm going to duplicate this and it's going to be add product and we are going to take title description price stock color and size we are not going to need that we are going to be using product and I'm going to paste my data here by the way if you are using multiple server action by the way let's remove here you don't have to write them inside every single action you can just use it at the top of the file like that so we don't need this okay let's import product model and I will do exactly the same thing I'm going to open up add product and form action will be add product and if everything is okay we are going to revalidate and redirect to products page let's see Ikea task any price stock and description I'm going to submit there is an error because I had splice is going to be slice let's open up products and it's here okay so let's do the same thing for this delete action so what I'm going to do is creating here a form and when I click on this button I'm going to send my product ID to action and we are going to delete this from our mongod DB let's do that I'm going to come here let's duplicate this I will say delete product and inside form data we have we're going to have only ID and I will say product find by ID and delete and I'm going to pass here my ID if there's a problem we are going to throw this error and in this action you are going to understand this part better of course we are not going to be redirected to anywhere and let's open up products and before this button I will say form and the action will be delete product here and of course we are going to need an input it's going to be text and I'm going to pass here product ID and in this case we are going to see this input here but I don't want to do that so I will make this hidden perfect and when I click on this Buton button we are going to send this ID don't forget this name and we are going to take that ID from this form data and we are going to delete that product let's do that and let's remove this Ika desk I'm going to click as you can see it's gone let's delete perfect it works it's that easy guys let's do this the same thing for product sorry user and I'm going to open up users page and I'm going to do exactly the same thing here input is going to be hidden name will be ID and the value will be user ID okay right now you know how to use server actions you can do exactly the same thing for update page let's open up ID page users and ID and firstly I'm going to fatch my data we are still using our design here to do that I'm going to open up my data and if you remember we are fetching our data using this file file right now I'm going to fatch a single user fatch user we don't need rejects or pagination I'm going to delete them actually let's delete here and I will say const user await user model find by ID and I'm going to pass here the ID comes from our client and right now I can return this let's say F user and I'm going to do exactly the same thing for products okay that's all let's open up our page right now using this function I'm going to fatch my user of course it's going to be async const user P user and I'm going to pass my ID here it's really easy to take this only thing I should do is write here params and I'm going to take the ID from this params I can do that because remember the page name is ID if you write here slack or something else it has to be slack or and other things I can pass this ID here and user do username and again let's copy this if there's an user image show it if not show no AAR okay and after that we are going to update our user let's open up our action and copy here sorry this one and I'm going to paste and this time it's going to be update user in this case I need my ID also and I can delete here right now let's say update so what I'm going to do here if you remember those inputs are empty right now if you don't write anything here when I click on this button it's going to send an empty string and if we are sending empty string we shouldn't update that part we should update only whatever we change here to do that I'm going to need a condition firstly let's create our Fields const update Fields it's going to be username email password phone address and is admin and is is active right now I'm going to check those inputs if they are empty or undefined I'm going to delete them from these update Fields if they are not empty I'm going to use them and update my user so let's say object Keys updated fields we are going to check every field here so I'm going to use for each I'm going to take the key and I'm going to check if update field key equals an empty string or undefined I'm going to delete that key I will say delete that key of course it's ending here okay so using these update fields we can update our user so I will say await user find by ID and update and I'm going to pass here the user ID and after update Fields Let's test I'm going to save here let's change those placeholders by the way it's going to be username user email we don't have to write here phone and address let's see by the way why it's not fetching let's see our ID okay it's here but oh I didn't say await okay so let's try of course we are going to need our ID let's close here and create an input and it's going to be hidden name will be ID and the value will be user ID and let's give our action update user let's see and as you can see all these data is here let's update this username and as you can see it's here and others are still the same actually it's changing this role because by default it selects the first value so I can write here a condition if user is admin it's going to be true and is not admin I will do the same thing here let's see this one it's client and active so it's going to be false and true false and true okay let's change here for example phone I'm going to update and perfect it's here okay this is how we are using actions you can do exactly the same thing for products just duplicate this and say update product and change here like that if they are empty it's going to delete and after product find by ID and update if there's an error it's going to be update product and after that we are going to revalidate our products and our users and products are ready we can add delete update and fch data so let's take care of authentication for the authentication we are going to be using OJs let's get started normally to use next off we should create an API route and write all the configuration inside the API folder I also prefer this method it's much easier but since we focus on server actions and handling data without an API layer let's do it without creating an API and this is what the nextjs documentation recommends us as you can see it uses next off but be careful here you should install the beta version because this version is compatible with NEX js14 let's install I'm going to open up my console and I will say mpm install next off and beta actually let's write here the exact version number in order to prevent any possible errors so the version will be 5.0 and beta and after that we are going to need to create all secrets and URL basically this script is used for creating session tokens and this is for creating authentication Pages like our login page so let's copy this and paste to EMV file I'm going to open up EMV and paste it here you can write here any secret key it doesn't matter you can use this command on your terminal and create a if secret but it doesn't matter it can stay like that and after that we are going to create our configuration let's create a new file I'm going to create it here and it's going to be config.js I will say export const off config I'm going to write here my login page Pages the signin page will be the log L URL this is important because if we are not authenticated we are going to be redirected to this signin page after that we are going to create a callback that we can write the authorization logic because if we are not logged in it's not going to allow us to see this dashboard it's going to redirect us to the login page and also if we are logged in we are not going to see this page it's going to redirect us to the dashboard let's do that I will say callbacks authorized and it's going to take our session and also the request so we can check the request URL so firstly I'm going to check my session I'll say const is logged in if there's a user inside our session it means we are logged in right now we can check if we are in the dashboard or any other page I'll say const is on dashboard so we are going to check our request URL and the path name and if it starts with dashboard it means we are on the dashboard right now I can write my logic I will say if is on the dashboard and if it's logged in we are going to return true so user can stay on the dashboard but if it's not logged in we are going to return false and it's going to redirect unauthenticated users to login page and else if is logged in so we are not on the dashboard but we are logged in we are going to be redirected to dashboard so I'll say return response. redirect I'm going to create a new URL and it's going to be dashboard and I'm going to pass here request and next URL and finally if we are not on the dashboard we are going to return true and in this case users can stay wherever they are so right now we have to run this function for every request to do that we can use nexj as middleware let's check the documentation as you can see we are going to pass our configuration here and it's going to run this function on every request except of this matcher and it includes our API and static files we should write this otherwise we won't be able to see our images so let's copy this and paste here of course I should change here it's all config by the way it's here I'm going to move this to app folder okay right now we can create the login function let's check the documentation as you can see we should create here our provider and it uses the GitHub provider but in our application we are going to be using our username and password so I'm going to use the credential authentication in OJs the recommended way to login is using social accounts or email codes but most of the websites are still using username and password credentials and for this kind of dashboard application it's not a good idea to log in with Facebook or something so we are going to be using our credentials so I'm going to create providers and inside credential provider and finally we are going to hatch our user but there is something important here if you remember we are using BP to hash and compare our passwords but we are using this configuration in the middleware and the problem is the bcrypt library is not JS dependent so I'm not going to write my providers here instead I'm going to create a new file let's say OJs and after I'm going to create my provider let's copy this and paste and and I'm going to remove here we are going to fatch our user outside of this function let's say const login we are going to take the credentials and it's going to be an ASN function and we are going to fatch our user compare our password if everything is okay we are going to return our user here but before let's spread everything inside our config let's import like that and instead of export default I can destructure my sign in and sign out functions that we can use in the login page I will say const sign in sign out and also I'm going to destructure all session so using this function we can fetch our user and use it in the sidebar okay let's fetch our user I'll say try catch if there's an error console lock this error and throw and new error and I will say failed to login let's connect to our DB and after I will say const user await user model and I will say find one because we are finding only one user and I'm going to write my condition here and it's going to be username should be credentials username and I'm going to write here a condition and I will say if there is no user in the database with this username we are going to throw an error and let's say wrong credentials and after if there's an user we can compare our passwords I will say const is password correct and we are going to be using bcrypt let's import this and we are going to use the compare method and we are going to pass here our plan password which is credentials. password it comes from the login form and we are going to compare this with the user do password basically the password inside our database this hashed password so if they are not equal again we are going to throw an error if it's not correct I'm going to throw exactly the same error and finally if everything is okay we can send our user return user let's call this function here I will use try catch again if there is an error we are going to return null in this case the login process will fail let's say await login and I'm going to pass my credentials and finally I'm going to take this user and return this user so next off is going to take this user and pass it to session let's see okay we are still in the dashboard there's something wrong with the middle R okay it's not running if I move this here okay right now it works but there's something wrong with our configuration because we didn't add here any provider I'm going to leave it empty because we passed our providers here inside OJs and right now as you can see there's a typo here starts with and as you can see it redirects us to login page that's try dashboard and I cannot see that page okay and right now we can log in don't forget to create your middleware in the root don't create inside app directory or Source directory it has to be inside root okay right now using this form we can complete the login process let's create an action and take those fields and try to log in inside library and actions I'm going to say export const let's say authenticate we are going to take the form data and we are going to fatch our user let's say async so let's just structure our username and password remember how we are doing this object from entries and form data I will say try catch block if there's an error throw this error and I'll say await sign in function remember it comes from next off and I'm going to write here the provider name it's going to be credentials if you are using any social media it's going to be like Google GitHub or whatever but we are using the username and password and I'm going to pass my username and password here let's say console lock error and throw this error okay let's use this action in our form I'm going to open up the login page page and pass it here but don't forget writing your names it's going to be username let's import this and let's try so let's say user one I'm not sure have we created this user or not that's login and as you can see we have an error because we didn't create that user we are going to handle this error and show it somewhere here but for now let's complete our process this is correct one test user I'm going to login and as you can see we are in the dashboard so if I try to go to the login page as you can see it doesn't let me to go okay perfect right now let's use our off function and Patch our image and username and after we are going to handle our error remember we have this function let's use it in our sidebar I will say async const session await off function that's see what we have inside I'm going to open my console as you can see it has the expires at date and a user and this user includes only email but we are going to need this image and username by the way there is an error here there is something wrong with our images it's probably because of this middleware and mature we are going to handle this but for now it can stay like that that let's try to add our username and image to our session to do that I'm going to open up OJs and write different callbacks when you log in by default next up is storing your email address into JWT token but we can change it we can store something else like username and image to do that we are going to be using J WT function I will say async JWT and it has the token and the user and I'm going to check the user first in any case and I'm going to pass some other information to my token so token dot username will be user do username and the image will be user. image and after I can return my to token but to reach this data inside our component we should pass the token information to session to do that I'm going to create another function and it's going to be session and it includes the session and the token it's exactly the same thing we are taking the data from user and passing the token and we are going to do exactly the same thing here we are going to take the data from the token and pass it to session so let's a token and it's going to be session and finally we are going to return this session so let's see right now I'm going to log out and try again by the way we don't have our functionality here let's use our log out function remember it's here we can use it where is our sidebar here and what I'm going to do is creating here a form and wrap my button and when I click on this button we are going to call our function of course we are going to create here a server action to do that I will say asnc remember server action should be async and I'm going to write here my directive and await sign out function let's import and that's all let's see I'm going to click as you can see we are not logged in anymore what was the name test user I'm going to log in and let's check our console here and right now before this image error you are going to see that we have username here but we don't have image because in our database as you can see it doesn't have any image let's add actually I'll say image and let's choose an image here this one I'm going to save by the way there was something wrong here because we should pass it inside user object let's do that I'm going to come here instead of directly session I will say session do user okay let's see I'm going to log out test user and perfect right now we can use them let's take our user directly and and I will say user do username and if user has an image we are going to use it if not we are going to use this image okay it's here so let me check this middleware okay this is the correct one you can find it in the GitHub reposit story as you can see there is no error right now we can login but if you remember there is something wrong here if I write any wrong credentials it shows up this error component but I want to show my error somewhere here let's say after button but if you are using your form inside the server component it's not possible to catch the error and show it here so what you can do you can come here and create an error layout of course it should be use client and show your error inside this component okay we can see our error but this is not what we want because user has to go back and and write the credentials again to prevent this we should use a client component so I'm going to take my form from the login page and create a new component let's do that inside login page I'm going to create new component let's say login form let's create our function and CSS and I'm going to take my form style here from the parent and paste it here and right now let's open up the login page I'm going to delete this form instead I'm going to call my component login form right now we don't need this action here and let's paste our form for now let's leave it empty okay there is something wrong because I forgot dot here okay as you can see it's exactly the same right now now I'm going to convert my login form component to client component and create here a new function handle login we are going to take the form data and we are going to call our action here so it's going to be async and I will say const data is going to be our server action and we are going to pass this form data let's open this function and instead of throwing error I'm going to return let's say error equals wrong credentials let's close everything and open up login form I will say if data do error set an error so I will say const error set error use State hook and I'm going to set my error here and if there's an error I'm going to show it here let's use this function here and let's try I'm going to write some different username and password and login and as you can see wrong credentials but there is is one more way if you don't want to use use State and this function you can use use form State hook this hook allows us to update our state based on the form action let me show you how it works let's check the example as you can see we are creating this hook and we are passing here the initial State and when we click on this button we are calling this form action and it triggers our increment action and this action is taking the previous state and returns a new state so we can use this state inside our component after this button for example so in our case what we can do the state can be our error message at the beginning we can Define this as undefined and when we call our action if there's an error we can update our state and show it after our button let's do that and you are going to understand better I'm going to copy this and paste here I'm going to delete this use State let's import okay let's import manually from react Dom and we are going to pass our form action here and it's going to trigger our server action and at the beginning our error will be undefined and I will say if there's a state show that state let's open up our server action right now we are going to need one more parameter and it's going to be previous state and right now if there is an error I can directly send this error let's try I'm going to refresh and let's give some username and password and login and as you can see it's here and the best thing is even if you disable the JavaScript it's still going to work and this is one of its awesome features okay let's log in again and right now we can authenticate fat users products add new one or update by the way you can do exactly the same thing for those forms you can make them client components and show the error here I'm not going to do exactly the same thing again and again and that's all this is how we are using NEX js14 I'm going to explain every single thing about nextjs 14 in the next video but for now you know the basics so let's deploy our application okay before the deployment I'm going to build my application for the test purpose let's check if everything is okay or not I'm going to say mpm run build as you can see there is no problem right now we can upload our files to the server and after we can build and start our application let's open our project I'm going to select everything here but we don't need do next git and not modules I'm going to take the rest and I will compress and we are going to upload the zip file to our server let's open up our hosting panel this is our server it's up and running let's come here this is the cloud panel URL let's click and remember our username it was admin and we created a password I'm going to login and right now we can create our website I'm going to click here we are going to create a not JS application because nextjs is using not JS under the hood and here you can write your domain name for this project I'm going to be using dashboard Lama Dev and this is our username we are going to use this later but don't worry you don't have to memorize everything is inside your hosting panel let's create okay let's manage our website and I'm going to install the SSL certificate so our application is going to use https connection I'm going to come here and choose this certificate let's create and install okay it's ready as you can see everything is much easier thanks to Cloud panel and by the way don't forget to redirect your website to this IP address if you don't know how to do that you can search for changing DNS records it's really easy there is nothing complex and let's come here file manager and this is the main directory of the application I'm going to choose my website and right now I can upload my zip file here I'm going to take this and upload let's extract it's going to be the main directory okay right now we can connect to our server and build our application let's get back to the hostinger let's click here and using this command we are going to connect to the server but to do that we have to add our SSH key I'm going to come here SSH keys and I'm going to add my key here let's create a key I'm going to open up my terminal and create my key okay it's ready so let's copy this key using this command by the way all these commands will be in the description below don't worry about them and let's come here and paste our key and let's give a name it doesn't matter and it's going to take a while and after that we will be able to connect to our server okay it's ready let's come here and copy the connection command I'm going to paste it here I will say yes and we are connected the First Command I'm going to write here is sud sudo 2 and llama dashboard let's get back to the main folder and let's see what's inside as we can see this is the folder that includes our websites let's get inside HD docs and inside this folder you are going to see our website let's open CD and our website and if you check inside you are going to see that all the files we uploaded are here let's install our libraries I will say mpm install okay we can use this command because remember we have created a not JS application so everything is ready to use let's build our application I'm going to open the production mode and I will say mpm round build as you can see there is no problem it works as expected but I forgot something remember in the EMV file our authentication URL is still Local Host let's change here otherwise we cannot login so I will say dashboard l. Dev of course it's going to be https I'm going to save and let's build again during this process let's update our mongod DB remember in the network app access we are not using any specific IP address and it allows everyone to access our mongod DB to prevent this I'm going to write here the server IP let's come back and copy this IP and I'm going to paste here and right now only our server has the access right now it's much secure and it's ready to run I'm going to start my app and let's see I'm going to refresh my page and as you can see our homepage let's try to open dashboard it doesn't allow because we are not logged in let's log in okay wrong credentials I forgot what was the user test user or let's see and it's ready let's check our users okay they are here let's check the pagination perfect I'm going to delete this one and this one perfect let's try to add new user test from website I'm going to submit it opens to users page and let's check and it's here perfect it works we have only one product and let's try to log out okay all functionalities work and that's all guys I hope you liked it remember the next video will be the complete nextjs 14 tutorial and if you have any questions if you didn't understand any part of this tutorial I highly recommend you to watch the next tutorial okay if you learned something new today please like the video you can support Lade using the link in the description below or by joining the channel don't forget to follow lad's social media accounts I hope I will see you in the next tutorial goodbye

Channel: Lama Dev

Views: 112,162

Keywords: next.js, next.js tutorial, next.js 14, next.js app router, next.js project, next.js full stack app, next.js fullstack project, next.js mongo db, next.js server actions, mongodb, auth.js, next auth, react, learn react, react next project, fullstack dashboard, admin dashboard, learn next.js 14, dashboard app design, html css, lama dev, react website, web design, useFormState, next.js 14 next-auth, next.js middleware

Id: cBg6xA5C60s

Length: 211min 24sec (12684 seconds)

Published: Tue Nov 07 2023