Build admin panel template from scratch | Next js And Tailwind CSS Episode 01

hello everybody Welcome to my channel in this video I'm going to speak about the new video series I'm going to create and it is about using tailing CSS and for implementing the Italian CSS and its classes we will use next.js framework you can use anything you want like you can use plain HTML files or you can use react View and Euler next.js not JS or anything you want and if you saw my previous video we implemented some responsive designs and mobile first designs in a react project but I decided to use next JS because nexgs is so powerful and instead of react you can use it because yeah it has a lot of features but I don't want to speak about the next yes we are just using it I just want to mention that approacher is no stable in the new next JS versions let me show you in the npm that 10 hours ago the the version of 13.4.4 release and in the new versions approach there is no estimate so we will use the app rotor and we use a new next.js project and we Implement our designs into this project so we will have one solution and also in this session we create a template like an admin panel template or a dashboard and you can see that how easy it is when we are using Tailwind CSS and everything is automatically responsive and mobile first and that's it so let's start and create our project and Implement what you want the first thing is we need to create a new Nexus project and for installing you can use get started for installation it says that you need to know you need to have node.js version 16.8 or later and Mac OS or Windows and Linux are supported so good so in order to install you can use this manual installations or if you are using a terminal simply you can use the boiler period which is npx create next app at latest you can simply use it so let's do this I go to drive F and open a new prompt column prompt here so I say CMD that's it so I'm on Drive F I say first let's check our node.j so I say not Dash V it is version 16.14 that's good so let's say npx create next up at latest that's it this must install a new uh next year's project for us or chase so it says that what is your project name I want to use a name like you can use anyone for example it's an xjs sandbox yeah that's good would you like to use typescript no would you like to use eslint yes would you like to use Tailwind CSS you can see that we can choose the tail in CSS by default here but I don't want to use this option because I want to configure it manually so if you are planning to use daily this is on your legacy projects you can simply go with me so I say no and do you want to use SRC definitely no I don't want it use app router recommended yes I approach it is not a stable so I highly recommend use it so because it is really important to be update and would you like to customize the default import Alias no I say the default is good it default import Alias is at sign and yes that's okay so let's wait for the project to be installed and then continue okay our project in a start so let's go to project CD next year statement sandbox and say code dot to open vs code and open this project in yes code that's good so we can see if let's check the package that Json first you can see that in this new project I have next.js version 13.4.4 oops and also our react version 18.2 good and reactant that's so good and in the app directory if this is the first time you are using this app directory done Panic it is really so easy let's check it first and then go and config telling CSS so we have the app directory I like the all of the versions you can use some npm scripts like Dev build a start and it so we use uh Dev because we are on development phase so I will open a new terminal from view terminal and I say npm run Dev okay that's it so it's opened uh on localhost Port 3000 follow the inch it is compiling no uh in the meantime it is you can see it is creating a DOT next folder and it creates everything we want for our output and that's it so let's check refresh so this is just a raw next JS project and that's it let's move this here move this here that's good so uh everything is inside this app director if you have five icons okay we have a global.css you can see that we have a lot of CSS and we have a layouts.js so this is a change and now we have layout.js here if you remember we had on the line document on the previous versions then we get when we use the pages so this is it and also we have a page.js and page.module.js so in the app directory you need to create some folders and create a page.js and it will work as your road that's it so simple and so easy so let's clean up everything and check it so I'm inside of this app directory so I will delete this page that module.css I don't need it and inside of page.js you can see that something happened I delete everything inside of page.js that's it and I want to create a new component I I'm using an extension let me show you es7 plus you can use this extension or you can create everything you want by your course because I'm using this yes yes plus yesterday plus reactive Snippets I can create a new component so I say r a f c e this will create an new component for me and you can see it so this is it and something is really weird here that's okay we will handle it so I create a new component inside of page.js this is uh in fact a component so we can change this page that g is to page that jsx like the old react projects and that you can see that is working correctly if I refresh nothing happened and I check the console okay we don't have any of that so good so it is working correctly no it is exactly like the react yeah page.j6 that's it and you can change the name with any choose anything you want is really no important this is import the important thing is this page.js6 name here so here I can say for example this is a home page that's it and here I can say that for example H1 uh and span or a paragraph with a lower M50 that's it and it is okay so you can see that it is a configured automatically let me show you here this is a format document you can use format documents so the document will be formatted and I'm using let me show you correct here for formatting you can use this or anything you want I'm using pretier Code formative for formatting my code and then I can use format document or alt shift F and this you can see that if I press Ctrl Z this was the old codes and you can see it if I press format document my code will be formatted automatically that's so good and that's it and you can see that something is weird this is because the CSS killer says so I go to the global.css and I delete everything no that's good everything is fine and in fact you know what let's check again so I know I have global.css which is empty and layout.js you can see that this is my layout and I don't want to use this phone so I delete this Intel and this enter this metadata this is the new version of implementing our metadata you can see that we have title descriptions so for example let's first let's what he said yes enter I delete this and for my document that's so so let's go here and check okay this is the metadata in metadata you can use everything for example for the title you can see that it says create next app but I want my title to be uh next JS Tailwind sand box okay that's it so you can see that it is changed you can see that it is next.js still being sandbox right now and if I go to the Head here I have this meta tag this is a title Nexus table means sandbox that's so good answer for description we say that this is a tutorial project from div and Power YouTube channel okay you can see that I have this metadata here name description content this is exactly what we are here so far so good so this is the layout.js and so we cleaned everything and inside of this root layer out you can see that I have it and props which is chilled and I received these props then I create my entire tag here and this is a mic all on my HTML I have a language of English a body and all of my children will be rendered inside of body so this is my layout that's so good then we have the page.j6 and this is it so this is the basic structure of our project I want to have this on my GitHub page so I will do this you know that when you are creating a new project of next JS and react it has the git repository inside of itself if I open my terminal again using control back tick and open a new terminal using this class so here I say that it's a status to check everything okay you can see that it says we have some chains and everything that's good it says that it is initialized in this project so let's go to the GitHub and create a new repository for it because I want to have it so let's go to the repositories and create a new repository okay uh what is the name amatory a slash I want to Let's copy the name from here I want to use exactly this name for my repository so uh checking okay next JS Tailwind sandbox it says that is available so good description yeah I can have a description let's copy from here uh I say this is a tutorial project from Devon power YouTube channel so see the description of this repository it is public yes at the redmi no no no okay create that's it no we have to the option we can create a new repository using this commands or we can push an existing repository using this command so let's do this first is gitremote at origin okay so this is oh let's clean everything so this is better so this is remote at origin https this address okay next thing is Branch Dash in May this will change the name of our branch would and also get pushed as you originally let's wait for it that's it so let's check everything and if I refresh here no my codes are available here inside of this repository so and also because I want to have some different versions and videos on the feature I will create some new branches and I use that branches that's so good so let's do this so let's close this and in order to create a new Branch you can use command lines but command lines taking longer time from us it's really easier to use the graphical user interfaces so I click on this main here you can see that I have this Main and origin name for now it says I have a local mail I have an origin name this is a remote Branch so I want to create a new branch and you can use create a new Branch or get new batch from I prefer to use create new Branch from so it says I select a ref to create the branch from I use the main because the main is online uh uh but you know what uh first let's update our main because we have some changes so first you can see that if I check here you can see that I deleted here uh in layout I have these changes okay in page I deleted this page and I added page that j6 instead and I deleted page of modules okay so for the comment message I say feed or in fact it's not a feature you can say that the fact effect stands for refactor and I say reset entire project and commit and think okay it is syncing it is pushing to server good so let's check here refresh okay you can see that I know I have this refactor that's good and if I check here in app in page.jsx you can see that is online okay so good so know my local Main and my origin name is update that's good now I can create my new branch so create a new Branch from from main okay so good so what is the new Branch I say one and for the name we can say oh you can say V one that's I think that's good okay so now I have a new branch and I want to implement Telvin so let's go to the Tailwind documentation and move this here no please notice that we are working on version 1.0.0 Branch this is just a branch Okay so let's go here to get started and see what you can do so get it started you can use statement clo you can use post CSS if you are using just HTML files or for example if you're using alpine.js or anything and also you can use framework guides so we are using next JS so let's go to the next Cs and it says that first create your project I created that okay then install table it says that you need to use these packages so let's copy uh open our terminal again and here okay let's delete this one so I say exit I don't want this terminal I just okay here I press Ctrl c c l s and npm install Dash D table in CSS for CSS and auto prefixer Dash d means that this is a Dev dependency tag it means that this package must be installed as a Dev dependent so let's check package.json here I have some dependencies for no let's wait okay so it is in a start now you can see that I have also some Dev dependencies or the prefix version 10 post CSS version 8 and 10 this is version 3. that's good so it is in a start next thing is it says that in PX in E npx talent in a dash p so this will create a tailing config file and also post CSS config file for us that's it so this is the trailing comfy this is it and then we need to add this for the content so this is an array I copy this and I will replace this empty array with it and I say format document that's good what is the next thing is that it's an added telling directives to your CSS we need to add this to our Global CSS file so let's go to the app you lower the CSS and paste them here that's good the next thing you said start your build processing and start using table that's it so the configuration is finished and we can use everything we want so let's do this I will minimize this and CLS good so no I say npm run Dev no I must have access to the trailing classes so let's close next.js we don't need it and also this uh okay so let's refresh and wait for it okay you can see that everything is changed and now if I go to the page that is this I can use tailing classes for example for this division we can use let's say BG for example uh green this is just a test green 500 yeah that's good and takes White okay and for this H1 we can use Glass demo for example let's say text 6xl okay you can see that it's working correctly that's so so let's delete this uh okay I think that's good now we created everything and now I want to Implement a template for all of my projects so on the feature we can have a shared template like an admin panel and we have something in common and we can use them easily so in this project in this session we create this template let's do this I want to create a new directory so here I create a new component directory and inside of it I want to have a main layout because this is a component I can use js6 so let's say r a f c e sorry c e okay this is my main layout but I have yeah people Okay so okay let's delete everything again rafce and that's it uh I want to use this main layout so uh uh let's have an H1 here and I say that in this layout I'm going to put every children into it so I will receive the children then I have a Division I have an H1 of main layout and I have an HR then I can have a main tag for example and inside of it I can render every children that's it and how can I use this main layout let's go to the app component sorry app directory inside of layout we can wrap everything into it so here I say that inside of this body I will have a May sorry May layout it's imported automatically you can see that at sign component mainly oh good and I pass the children into it so let's form a document you can see that inside of body I wrapped my main layout around the children that's it and inside of this main layout I received the children and I render it like this so I have the main layout here that's so good then I have this HR and then I have this let's go to the page.js6 and delete this this is not good so I just want to have the home page that's good let's refresh for a document that's it so inside of my layout I want to let me open a new paint to show you I want to let's say that this is my Escape okay I want to have a navbar so I want to have a nav bar here also I want to have a sidebar here and also I want to have some contents here okay so this will be the wrapper so I have a navbar sidebar and this content okay this is what I want to create so let's do this uh first I want to create a nav bar so here in components I create a nav bar or a header a header would be I think better hey there or May header.jc you can use any name you want I say rafc e that's it so this is my main header and I import my main header here inside of my main layout so I say that I will import my main header that's it okay you can see that I have my main header then mainly all and then home page that's it so inside that main header what you want and we want to have two different sections so let's go here inside of this main header and this say that for the left side I want to have a division with a brand name this is not important for no we will change it later and let's have some classes for it so for this uh section I want to use a background of white why I'm using this let me show you I want to use uh here let's say that the class name is BG gray of four and you can change this later or 200 is better 100 okay 100 is better you can see I want to have some classes so this one to have the width of full uh minimum height of screen mean h of the screen so mean Edge screen it says that minimum height is 100 viewport right so it gives all of the screens and you can see that if I use this you can see that it gives everything inside of this page and that's it so for the nav bar we use background of white that is better so let's close this for now and work on the main header so the first thing is I want to have a brand here and then on the right side I want to have another division here I want to have a Toggler BTM or a Target BTN so for the Target BTN we can use react icon so react icons and this is react icons you can use this so I say npm install react icons Ctrl C npm install react icons and here you can search any icon you want for example for bar you can use anything you want so you can have four bars a offline bars and you can search anything we use them in our project that's good so let's go back here again in PM run Dev no I installed react icons and I can use the icons let's import an icon for example import something from react icons slash fa and I want to import fa bars that's it so I want to use these forwards here and this is so let's refresh okay you can see that now I have brand and this forward that's so good so for the main header what you can do next we have the BG white and then let's have a flex uh a justify content of between and for the Align items you can use Center so this is all the Tailwind CSS classes uh let's have a padding X of four for the inside padding that's good and also let's have a height of I can use to Ram or um theorem let's check refresh okay 8 12 is three and also let's have a margin button of four to have one of them margin button that's so good so I think this is good for my and we can use it and then we have this toggy little bit here so this must have the class name of cursor pointer that's it and it needs to toggle this sidebar here and we will work on it so first let's create that sidebar so this is the navbar for no and no you can see that we have it so this is my main header and let's go back to the main layout so we created our header and imported it here so for the next part what we can have the first let's have some classes for here for example we have BG gray of 100 and Vito instead of bit of full let's be sure to use the bit of screens is better so without screen it says that bit is 100 viewport width and that's it so we have this method that's so good uh let's have some enter here so after this main header I want to have a division uh let's let me show you here so inside of this division we want to have a left and a right for the left we will use an SI tag and they say this is the left and then we can have a right side so what we can do for the right side we can simply use this main so let's delete this main layout and HR uh let's move this main here and for my document now you can see the structure I have a left and a home page okay so afternoon I have a division and inside of this Division I have an aside for the left and I have a main for the right side so for this division let's have some classes and so some classes like we can use a flex or grid here you can use anything you want I use flex and you can see that no it is on a row because the standard Flex is row and I can say justify the start and items of start and also these are all defaults what I use then it is better to have them here so I have a flex and justify your content I'll start and align items are start that's so good so then I have an aside and that's it so instead of this uh aside this is a left side we want to have some class names so let's do this so I say this is BG white okay you can see that no it has a visual white good let's have a rounded of LG to have a border radius you can see that is what a radius of 8 pixel that's good and after it and we can use some Veet for example Vita of 16. let me change it later but for now let's have it without 16 and a padding of four okay no this is my site but you can see that it is here and it is completely uh different from the other side and that's it so this is my aside for the left side and on the right side I have this may and that's it and also for this uh May because we are using Flex we can simply use a Felix one for this Main so let's say Flex one to be ensure that it will give all of the remaining Flakes a space that's so good so for now what we can do let's go here inside of my site I want to have some structure for example what we can have we I want to have some menus let's go here you can see that for example entail we have some rows for different pages and different roads so we can do this how we can create it there are so different ways I can create using and use an ul and some Li so I create a ul and inside of this I can have an Li and inside this Li we can have an icon and a text or a road so inside of this Li we can use some icons and for icons let's import something from react icons slash AI I want to import AI a i oats line home that's it I want to use this inside of my li that's it so yes you can see that I have that and also after this I want to use a link of so I can have a link it's href would be slash and instead of it I can say home that's it so this is this is my first li let's create the structure and then we can use it so this is and for this Li we can use some different classes and then copy paste it so for class things you can say that this is the flex okay uh items of Center or Justify of star to start from the left side and other items of centered to be vertically centered that's so good and also I want to have some visual effects on it on however so you can simply use a hover in Italian CSS that's so good so on our way we can say that you have a BJ below of 200 that's it now you can see it okay and also here after it we can see that on however your text can be a blue of 800. good yes also we can have a rounded to be beautiful rounded XL for example good and also let's add some padding okay padding okay now it's so you can see that it is really beautiful right now and we have all of classes here it is really helps us to keep the codes so read a bit and then for this icon we can have some class name of let's say margin right of 2 to have a space that's so good and that's it so this is a simple Li inside of my ul and I can create anything I want like it so let's go to the first one uh sorry let's go to the next one and copy paste it so let's simply copy this and paste so for the next one I want to have some projects you can see it here projects okay Ctrl s okay projects and for the icon I want to use uh gr project so let's move this link to the top okay let's copy paste this and we say that from the gr we can use and gr project you can see this is the way we use react icons for the reject icons s slash AI slash gr F A or anything you can import its component now I want to use gr projects for this okay refresh so yeah you can see it that's it so I have a home and the projects but because this home you can see here insert this button that this is a road to my home page but this project isn't going to be a road it just uh going to have some Sub menu so I change this link to something like H3 and instead of the href I don't want hdf so you can see that no it is not a link but this is linked this is not a link you can see that it is really so cool and also because this is going to have some sub menus let's add another icon for it and let's go here and let's import uh from fa we can import f a angel [Music] okay you have it and just don't button or left down right up I can use for example right and that's it so you can after projects we can use this it's just an SVG icon that's so good it is here but I want it to be on the right side because you're using Flex we can simply use for this project you can use Flix one to give all of the flex space now you can see that it is on the right side that so isn't it so that's so good that's for a document and continue so for the first one we created a link for the next one we created a great Li we want to have some subdirectories on the feature sessions on it so that's good let's copy this one because I want to have another one so I want to have a singular that goes singular and for the icon I want to use f8 check so do we have fa yes we can have f a check that's it so this is so it isn't it so when you have the template everything will be so easy and also you can make this Dynamic but I'm not working to that right now we will work on it later and we will change everything here and we refactor it so after this we have a singular let's copy this again so after this singular I want to have a complex menu and it will have some Sub menu so for the complex we can use fa check double so let's import f a checker double uh copy and if I checked out here if I checked over here okay refresh you can see that this is so good so after this fa check double I want to have uh another one but this is one this is going to be a page so for the page we can use the first one and copy it because this is a page and after this Li I can simply use this so what is the label the label would be about us and the href would be two about us that's it and for the oh no it is home you need to change it so we can use let's import new one so let's copy this and we say that from s i oops s i we need to import Sr help escort this is it you can search here anything you want you can import them but I searched them before in order to start wasting our times and that's good so refresh you can see that this is this icon about us that's so good let's have another one yeah I promise this is the last one so after contact after you've contact us would be this um contact us this is it and for the icon you can use f i so if a and f i okay you can see that we have a lot of options and from the react icon if I I want to use f i phone call and copy paste it here so let's format document and check so now you can see that I created the structure and this is really minimal and beautiful as well you can use anything you want for example you can use let me show you for example you could use the orange for the ticks and backgrounds or you could use green let me show you okay refresh you can see that okay Orange you can see that you can use anything you want for example I use blue but you could use a green orange or any color you want I simply use this so let's Ctrl Z and Ctrl Z Ctrl Z now everything is blue that's good but you saw that you can use any color you want and that's so good and also on the feature you can add some things but let's talk about them later so far so good now we created it but we need to have some responsive functionality you can see that it is uh as sticky or it is fixed here but this is not good you can see that when we are going to the smaller sizes we want it to be hidden and by clicking this it must be toggled so let's do this and because you know if the this button this icon was here inside of it it was too easy we could use one state here but because it is there we need to use different Estates so the best practice here is to using Global States for example let's say you can use Redux you can use Redux toolkit I simply use a context here API context of react itself and I do this so let's create a context first inside of the main directory I create a new folder name context and inside of this I can create a context let's say menu context dot JS or jsx you can use jss because I want to return a component so first thing first let's create a new context so I say export console menu context oops menu context well I have some typical menu context is create context of react okay uh it will import it or be imported automatically from react that's good so I create the menu context and also I want to create a new so uh cons menu context you know that when we are using context we need to have a provider so we create the provider it's inside of this context itself it is really better so menu context provider equals to an arrow function and we export default is manual context provider that's it and for this menu context provider we are going to receive the children and work on it so let's create an estate here so I say const open and set open equals to use a state with a default value of files okay that's it so let's create a toggle function so I say cons to an arrow function and inside of this first is because you want to check it later we say that console.iel uh clicked to be sure that it is running then we can change this state so we say that set open of not open this is it you can use it and also there is a better way so we say that receive the prayer and then change it this is this also works so we'll receive the prayer and then we change it and this is the toggle function then we need to export them so we say that return uh mineral context Dot provider and inside of it we need to return the children so everything will be inside of it and also this provider has a value so for the value we need to open a new object so I'm creating a new object with the open and the target this is what we want that's it so no it must works correctly so now I have a context and if you remember the react projects let me show you quickly go to the GitHub ah let's for example on what project we had YouTube resume management course front-end SRC okay okay yeah context you can see that when we have a context we receive the children and we wrap it inside of this provider then we could go to the index.ts or app.ts6 and we'll wrap everything inside of this provider this is exactly what you want to do right now but now we are inside of index.js so we'll go to the app layout and here we are inside of this main layout so we need to access them inside of my layout so you can see that I can simply use the main sorry you know context provider and wrap everything inside of it okay let's form a document no I have the menu context provider with the main layouts and that's it so uh let's oh sorry let's refresh now we have an error it says that you are importing a component that is user state it only works in a client component but none of its patterns are marked with your Skillet so there are several components by default it says that on uh menu context.js you can see that error coming from here it says that use context has some problems the problem is when we are using this app router everything is several components by default how you can pass this and change this to its Cloud component so easy we can use client that's it let's format document and refresh okay now we can see that this is a Killian component and it is working correctly we don't have any error that's so good the next part is let's go to the here to the nav bar it is inside of main header the next thing is we want to add it here and Target it with this button so let's import everything but everything must be imported automatically so I say const something equals to use context here I want to use context and what is my context menu context it is it it will import automatically so good and from this menu context I want to grab the target function that's it and let's wait for it to be compiled okay refresh oh okay again we have a problem inside of my header.js6 it says that cannot access context on the server you can add that into client module from a server component it's right because this main header is for no server component like we talked about and we need to have a use client to say that this is a client-side component so let's wait for it you can see that in approach and this is the difference we need to say use client tool explicitly say that this is a key line component refresh okay no I imported my context and in this forward or this division you can say that on click call Target okay oops what happened okay format document okay let's open the console and check because inside of the context we said that when you are calling this toggle console.log or instead of this let's log the open like this oops and let's lock the open to check it so let's go to the console and refresh okay we have an error extra choose from the server oh this is not important you know this is for the uh some of our extensions this is not problem for us if you see this error it is nothing don't worry about it so if I click on this no you can see that I have access to context and it is opening a it is closing true false true false that's so good now I have access to it so this is for the menu context and let's close my new context and go back to the main layout now I want to change everything and make it Dynamic let me show you how simply we can do this so This aside you know this site class names must be changed based on this open okay so what we can do we can simply change the class name of this site based on our classes our open status so I can simply change these class names how can I use this let's cut them first or I will comment this uh I will keep you to show you that this was the static version I want to change the classes to a dynamic version so I cut them and here I can use a curly brace on the back teak no I have access to JavaScript and I know I can use some different classes so let's say that the BG white is okay the rounded LG is also okay but the width and the padding must be changed so how we can do this it is really easy we can say that using a dollar sign and Care libraries we can access to JavaScript and here we can change that if it is open do some classes for us else Implement some other classes for us let's import the open here uh const something is now you see that I use this context on my navbar or my main editor yeah I can use exactly the same thing and I say that this is coming from Main content and I want to have the open I receive this open from the context here I say that if the menu is going to be open you can simply say that this is your classes your read is 60 or 1500 Ram or 240 pixel also you have a padding else your width would be zero that's it so far so good and I think this must work so let's check it and go here refresh okay we have error what said can I access context on the server again that error because this is for now a server component but you want it to be a client component so use client e my main layout uh refresh okay wait for it to be compiled okay now it says that we have it seems that we have some problems and and okay let's check it again so let's format no let's click okay let's for refresh you can see that when we are okay it is refreshing we must wait for it to be compiled because this compiling okay when I click on this it is working so when it is open everything is fun but when it is closed we must not see anything so how we can handle this I think this is an overflow so let's go here to run the lgn say that overflow of he then and refresh okay it is done and you can see that no I don't have anything here this is a standard structure I don't have anything then I open let's refresh again I do not have anything but what can I click this it will be open automatically that's so good this is really a standard structure in my opinion also let's have some transition so this is not a smooth right now so for after the Overflow hidden for our aside we can use some transition so in display in Italian we have a lot of features we don't need to go to scss or css file so we say that transition for all and also let's have a duration of 100 that's it refresh okay yes now you can see parties fast let's make it 200. okay so good isn't it no you can see that this is the a standard admin panel template for us we can have anything here and also let's check it you can see that it is really a mobile first design it is hidden on the mobiles and by using this button it will open automatically and also let's check it okay you can see that on the bigger version it is also like this I don't want it to be like here so I want it to be open on the bigger sizes so how can we do this it is not that hard let's format document again okay you can see that it is formatted automatically so on class names now we have a BG white and a rounded LG or a fellow hidden transition all under duration that's good and this is the uh let's say that this is our Dynamic class and here we say that based on the opening change the read and change the padding so if it was open have the visit of 16 and padding of 4 and you must have the width of zero and after this or before this or after this there's no different you can use after this so after uh this let me show you again if you are asking what is this because this may I know this may seems weird let's this is the auto formatting so this is in fact my classes you know you can see it and also that's it so this is all of my classes and here this is the dynamic part we say that if it is open you have must have the sweet and padding else width of zero after this Dynamic part we can simply say that for the bigger screens like user MD also you can use these classes so let's copy these classes so for MD oops for MD you can use this and also for MD you can use padding of four it or it is this is the classes for MD we use them let's format document again it will be formatted automatically so let's refresh so uh okay so on MD it would be a static here okay also we can use LG I think LG must be better LG and G is bigger and yeah LG is much more better and also on LG we don't want to have this so we can simply hide it so on LG let's go to the main header and four uh this division we can simply use a new class and I say that I use a class name we say that on LG you can be hidden and you can have the display of hidden that's it refresh okay so far so good so on LG we don't have any Target and menu is open but if you go here uh you can see that I have this that's so good so I think our structure is okay and let's check it so I have this home this project singular this all will be completed on the next uh sessions no I have this home when I click it I go to the home that's so good and also I have this about us when I click it I must go to about us but it says that this page could not be 404. he's true in fact because we don't create that uh so let's create the about us you can see that this is going to be our road so we mean we must we must create a new com folder named about us inside of app directory inside of it we need to create a new page dot jsx this is the structure then rafce to create a new component we change these three names to let's say about us page or any name you want that's it so let's refresh now we can still available to us so good also we have a contact us we don't have it yet let's create it so inside of app let's create a new con contact us uh the page.js6 inside of it rafce and the name would be contact us page okay let's close everything and go here so let's go to the home refresh and way to be refreshed okay that's it now I have the home page this is my home page okay you can say I am home this is not a link this is not a link but this is a link about us you can see that I go to the about us and this is about us page also for contact us I'm on contact us page for the home I will go back to home so you can see that no I have a structure and you can use any brand logo any brand name you want this is just an example and on the right side you can use anything let me show you here we will add them on the next video so on the main header you can see that I just used one here but you can have anything you want and it would be automatically placed here for example let's have another Division and we say that user area okay and check it so let's refresh you can set user error you automatically here because we are using Flex with justify of between and if the mobile version is our problem let's check in you can see that refresh okay that's so good but in the mobile versions you can see that this user edit good but yeah we have some problems this is here this must not be here so there are some different ways for example we can uh put these two inside of a new division uh no this division okay you know this division can have the right content here and inside we can use flex so for this division let's have a class name I have flex and justify of Center and the line items of Center and the gap of four okay I think yeah three must be better okay refresh refresh this is the building uh it will be good okay refreshing okay you know you can say if you want to use a user you can see that you can add it easily and also this is a mobile version and the mobile version we have user area brand and this target BTN on the LG uh size we don't have that and the user area is still on the right and brand is on this left and that's it so I think for this session it is good so we created this uh uh base boilerplate then on the feature sessions we can simply create any component or any page you want inside of this project so for the final step of this video Let's create a pull request for this because we changed a lot of things so let's go here go to the source control and check so we created these okay we created this okay is good and layout you have these changes I think okay for the page okay components I have main good I have this good uh this is my menu contact so good on the package log I have this and a package Json I added these and I post CSS uh tailed in config CSS so so let's say that fits create basic structure that's it note that we are on version one so commit and publish Branch we send our Branch to the Main so on the future if you are using this tutorial this this session would be here so let's go to the GitHub and check everything okay yeah next year is still in sandbox updated now you can see that I have Main and I have a V1 so I can create a pull request from Branch one to Branch Main creatable request checking okay everything can be merged automatically merge okay confirm that's it no my change is on the main branch and on the feature sessions you need to create the new branches from the main that's good so for this session I think it's okay and please let me know if this video was helpful we will continue creating some components and some project inside of the spoilerplate and because we have a beautiful extraction like an admin panel this would be a great project for our resume and you can use it as your portfolio so please like the video and leave some comments for me and let me know if anything is you want to share with me and also subscribe for our channels thank you have a good time and goodbye

Channel: Dev Empower

Views: 18,348

Keywords: nextjs, tailwind css, next.js, tailwind css tutorial, tailwind, tailwind crash course, tailwind css project, react tailwind, react tailwind project, tailwind tutorial, tailwind tutorial for beginners, next js 13, next js tutorial, tailwind next js tutorial, nextjs and tailwind css, nextjs tailwind ui, next js and tailwind css project, next js tailwind css dashboard, nextjs tailwind course, next js and tailwind, next js, next js project, next js 13.4, next 13, nextjs tutorial

Id: 8asf9zF-jbg

Length: 65min 45sec (3945 seconds)

Published: Fri May 26 2023