Material UI 5 (MUI) React Tutorial | MUI Responsive Real Project

hello my friends today we are gonna design this beautiful website using material ui you are gonna learn how to use the most common material ui components by creating a real world project cards lists models icons and more and also you will learn how to create your own themes how to customize styles and how to build your own components then we'll go ahead and create a dark mode team and we're gonna do this in just a minute it's an awesome project to learn new mui and this project will be mobile responsive you'll see how easy to create responsive designs using mui and finally we are gonna deploy this website using a hosting service and as always we will be using hostinger it's one of the most popular hosting providers and the sponsor of this video it's really cheap really fast and i really love its user-friendly dashboard you can deploy all your websites in one hosting you will have more than enough storage but the best thing is you are gonna get a free domain and free ssl certificate at this price you can choose any time period here and if you use the link in the description below or la model coupon code here you are gonna get an extra discount after choosing the payment methods and purchasing you are gonna redirect it to hostinger panel and as you can see i have chosen the business shared hosting so let's claim our free domain and set up our hosting i'm gonna write a domain name if it's available you will be able to register and it's ready so let's set up the hosting i'll choose start from scratch and i'll select my new domain we can finish the setup it's gonna take a while and right after that you are gonna see your panel and you are ready you can manage your domains your files and you are gonna see how easy to deploy any application using this file manager so if you are ready let's create our website and deploy it here okay i created a new folder and i'm gonna create a react app to do that i will open my terminal and right here mpx create react app and i want to install everything here so i will say dodge and enter during this process let's check out the new material ui page it's not material ui anymore it's mui they have changed its name and the website now it's much clearer and more effective i really love this version it's one of my favorite after this tutorial i believe that it's gonna be yours too so let's get started so we are going to install mui to do that there are two options we should use a styling library to run material ui so you can either use emotion or style components you are probably familiar with style components but there's a problem here if you create any ssr project it might cause some problems that's why they are using emotion as a default library so we are gonna use emotion2 so i will copy here if you are using npm just copy this line if you are using yarn like me copy this line and don't worry about emotion you are gonna see that it's working like style components so let's come here i'm gonna paste here it's gonna install and let's see what else as you can see mui is using this font family by default we can do the same thing i can copy this and paste into index.html and one more thing we are gonna install and it's gonna be mui icons if you check the icons page as you can see there are tons of beautiful icons here so we will be able to use all those icons so let's come back firstly i'm gonna install my font family here by the way we should clean here but before i'm gonna paste my link and here i'm gonna create a style and inside i'm gonna choose all document and font family will be roboto okay let's install these icons and after that we can get started i will copy here and paste let's run our application npm start or we unstart and as you can see it's ready let's clean here and everything will be easier firstly we don't have any icon i will delete this theme here and those comments and here i can delete these those logos it's going to be only index.html and here we don't need any css test file it's going to be only app.js and index.js and finally inside application i'm going to delete them and of course inside index.js i'm gonna delete this css and here and that's all okay like that and as you can see there is a default space here i'm going to delete this and i can come here and say margin 0 and that's all we can get started i'm going to close here and my sidebar let's see how we can use it as you can see we are using mui elements like that we are importing and using as a component actually let's open up buttons here and here as you can see we have different kinds of buttons here let's copy them and paste here i'm going to come here and delete the last letter and i will write again as you can see it provides all those libraries we are gonna use material ui button like that i will save and as you can see they are here first one is only text this is content and this is outline only with order so you can give any attribute like disabled href let's say disabled for this and as you can see you don't have to worry about any styling and we can change their colors let's say color primary actually it's primary by default and let's change and right here secondary and as you can see it's purple right now purple is a weird choice as a secondary color but anyway you will learn how to change these colors and also we can give any size large medium or small let's make small and like that and also we can give any icon for our buttons as you can see we are writing start icon and passing our icon let's choose any icon here i will say settings i'm gonna choose field here okay we can use this one as you can see you can import it like that and i will say start icon and it's going to be settings icon like that it's that easy let's create one more icon here and let's change this color it's going to be success for example and this icon will be let's say add we can use this one if you don't want to copy and paste again and again basically you can choose this name and write it here add and as you can see i will click and it comes from icons material i can do the same thing for this one instead of writing them in different lines i would just say settings and let's delete this one and in this case it's going to be just settings settings and add new post for example okay perfect so i'm gonna add a text here to do that we are gonna use mui typography i will come here and as you can see we don't need to import any font source that because we have already installed in index.html so don't worry about that so what i'm gonna do is using typography component and giving its type as you can see it's h1 so what's this component basically it takes tile from h1 but it's gonna be actually h2 let me show you you are gonna understand better i'm gonna copy here and let's paste i'm gonna import and component will be let's say p it uses h1 style but it's a p tag okay as you can see it's really huge but if i open elements here inside my do my buttons and as you can see it's a p tag of course in most cases we are not using any components you can just delete here i just wanted to show you so far so good but if i want to change this color i didn't like this purple there are many ways to do that but the easiest one is writing an inner style let's create another button here button and i will say my unique button and variant will be contained again and what i'm gonna do is keeping here as x property and inside i can write any style let's say background color it's gonna be sky blue for example and what else i can say text color is gonna be this light gray i can give any margin by the way if you are using material ui you can use this shortcut also you can directly say m but let's use margin and it's gonna be five and let's see first and later we can add more and as you can see it's here but when i hover over as you can see this blue color is still here and we are going to change it i'm just going to write hover and my style inside i will say background color again and that's a light blue okay perfect i can do the same thing for disabled attribute for example let's give comma first and i will say disabled background color will be font color will be white of course we should make it disabled first and that's all this is how we are applying our own style let's leave this disabled and what if i want to create one more button same button like that okay it's here but writing them like that again and again is not a good idea so what we can do basically we can create our own button component here and here is how we can use motion or style components so i will say const blue button and i will say styled it's gonna be mui and material i'm gonna choose this and inside i can select any mui component or html element let's say button and here we are gonna just write our styles let's copy here like that and paste here so i can use it everywhere let's delete them i'll say blue button my button and one more let's say another button and it's that easy so if you are using the same color in multiple components you don't have to write them in every component like that basically you can create your own team let's come here and i'm gonna say team.js and here i'm gonna create my team i will say export const theme and here i'm gonna use create tv raw material ui and inside this i can create my own shapes on colors let's check here customization and teaming and as you can see palette object is where we are storing our colors as you can see primary secondary success error or your custom color let's do that i will say palette and i want to change my primary color and you can give any other variants inside for example main disk color light i don't know sky blue whatever you want let's do the same thing for secondary it's gonna be this color and also you can create your own color let's say other color and name will be this gray color if i come here and check as you can see nothing has changed that because we are not using our team for this application basically you can come here and wrap all your application with team provider and you can do the same thing for index.js by the way this is how react 18 works we are not using react render anymore it's going be create root so if you want to upgrade your react version make sure that your index.js looks like this otherwise you might see any errors in your console okay anyway so what i'm gonna do is creating here team provider from material and i'm gonna wrap my application like that and finally i'm gonna import my team let's import this import team from team file okay i can use it here and after this as you can see our secondary color has changed it was purple but right now it's green so if i come here and change its color it was secondary let's make my other color what was the name okay other color like that as you can see it's grey now you can do the same thing for your custom button here and here you should write your team and let's close here and we can use our theme right now i will say theme dot palette and other color and main color of course and as you can see it's here it's that easy so we can delete this you don't need any provider right now but later you are gonna see how easy to create dark mode with this team and i'm gonna take this back and right now you know the basics of material ui of course i'm not gonna explain all those components here i think it's pretty clear you will just copy and paste them i see a lot of tutorials just showing all those components but if you are smart enough to use react probably you know how to copy and paste them so what i want to do is showing you a real world project we are gonna create a website we are gonna use the most common components we are gonna give our styles you are gonna learn how to create responsive websites how to pass props inside material ui styles so if you are ready let's clear here and start making our project i'm gonna write everything and this and those imports okay everything from scratch so what we are gonna have we are gonna have another bar here and after that we are gonna have three columns first one will be our sidebar second one will be feet which includes our posts and last one will be right bar let's create our components i will come here and say components narrowbar jazz or jsx sidebar feed and finally right bar let's create our functions sidebar feet and right bar okay so before creating our number i want to show you how you can use flexbox so firstly we are going to create our sidebar fit and write bar i will close them and open up my app.js again my components sidebar feet and right bar let's import them components and sidebar feet and right brush let's see as you can see they are here okay so how we are gonna use flexbox because each component here will be different columns we are gonna have a flexbox container so let's see how you can create flexbox container if you scroll through this menu bar you are gonna see layouts first layout will be box basically it's like html div there is nothing special we are just gonna wrap our components so what else here we have container it said div again but it has some default margin let's try them actually so instead of do i will say first box from material ui and as you can see nothing has changed because it's acting like a dew so what else we have container and as you can see there is a space here let's give background color and you can understand better i'll say red there is a default margin and padding and its width is horizontal like that it's a hundred percent so what else we have we have grid system here as you can see if you want to create grid system you can use this component but there is something important here its name is grid but it uses css flexbox actually it's not using css grid this is why flexbox is really important this is why i'm using flexbox for my all projects if you are using react react native you have to know how flexbox works okay we don't need this that because we are not creating any two dimensions grid system like that so let's check stack it's a grid system but it's only one dimension it can be vertical or horizontal if it's vertical it's going to be only one column if it's horizontal it's going to be only one row as you can see we have direction here and we can't give any spacing between them or you can add any dividers let's create this firstly i'm gonna take this back and it's gonna be a box that's because we are gonna create our network here later let's write here navbar we are gonna use it later and for those components i'm gonna create a stack let's say stack from material ui and i'm gonna wrap my components here like that and it's gonna be horizontal so i will say traction as you can see column column reverse row and row reverse just like flexbox i'm gonna choose raw they are horizontal right now so let's give some spacing let's say two as you can see some space between them you can also use align items or justify content if i say justify content and center they are going to be centered like that space between is going to separate them like that basically you can give any flexbox property here like that so we are using space between so if i give those components any colors you can understand better i think let's make them box also and i will use sx or i can use any shortcut like background color and let's say sky blue so i will do the same thing for feet and right bar it's gonna be box background color let's say pink and for right bar box and background color let's say light coral for example okay perfect as you can see they don't have any width remember how we are using flexbox we can directly give any percentage just like with 20 percent is 50 percent but the efficient way is using flex so for the sidebar it's gonna be flex 1 let's copy this 4 feet is going to be flex let's say 4 is going to be bigger and for the right side it's going to be 2. sidebar is one unit feed is four times bigger than sidebar and right bar is two times bigger than sidebar it's that easy by the way we can give some padding for each how we can do this if i say p as you can see there is a shortcut here i can directly just say two for others two and padding too like that awesome but what if we use any mobile phone if i open my console and click here it's still same but for mobile screens it's not a good idea to see all those elements here so what we can do we can basically delete this sidebar and right bar and we can see only our feed just like instagram or facebook to do that we are gonna use material ui breakpoints let's search for it i will say breakpoints as you can see there is a default breakpoint here so we can use extra small from 0 to 600 pixels it's going to be small from 600 to 900 medium from 900 to 1200 it works like that of course if you want to use different breakpoints you can customize it you can create your own team and as you can see our object will be breakpoints and you can change those breakpoints for example you can make this 480 690 whatever you want it depends on you but i'm gonna use the default one in this case if it's smaller than 600 pixels it's going to be extra small so we can use this key so what i'm gonna do is creating inner style like that and i'm gonna write here my condition i will say if it's extra small just make it display now i'm gonna close my sidebar by the way you can see better and i will say if it's small screen or bigger it's gonna be display block or whatever you want let's see right now i'm gonna open here again and as you can see we don't have sidebar anymore i can do the same thing for right bar let's copy this line and paste it here okay perfect only feed is here but if i open my desktop version it's gonna be like that let's move this a little bit if it's under 600 it's going to be extra small like that i'm coming coming and that's all it works like that of course for tablets for small screens you can create another breakpoints but for this tutorial i just want to show you the basics so we are ready to create our number let's close them and i will say navbar of course we should use it here bar i can delete this container by the way we are not using okay let's see how we can create i will open up components and app bar there are different kinds of app bars here you can use whatever you want but this one looks pretty good i'm gonna use this but if you open source code you might be a little bit confused that because there are many things here of course we are not gonna copy paste anything i'm gonna show you the easiest way don't worry let's see what it's using here okay here as you can see it's using box it gives as x here but you can directly write flags also as we did before and after that it creates upper and inside this add bar container we are gonna have a toolbar basically it gives some default margin and padding of course you can create here a stack as we did here and we can say put here our logo for the center put maybe search input for the right side are icons but let's go with this way so you can understand how it works so instead of tier i will say apple and as you can see it has our primary code and if i add inside toolbar and wrap this text like that as you can see it gives this padding but as you realize we cannot see our other components that because we didn't give any position for this upper so i will say position you can give any css positioning for example static if you do that you will be able to see other components and also you can say for example sticky so in this case even if we scroll down on this screen now bar will be always on the top so let's use this one and after that we are going to create our logo search bar and icons to do that i want to use display flags again so we can use our own toolbar so i will say const style toolbar styled from material and it's gonna be a toolbar and i'm gonna say display flex and again i'm gonna separate them so i will say justify content it's gonna be space between so instead of toolbar i'm going to use this one like that so let's create our logo it's going to be a text let's say lamar tao and i'm going to give some variant here and it's gonna be h6 like that perfect so let's make this responsive if i open my console again oops i said stick it's gonna be sticky okay so i'm going to open mobile screen here and as you can see it's really large right now if i add here search button or any other icons they are going to be overflowing to prevent this let's think what we can do basically instead of this text we can add some image or icon let's come here i'm not sure if there is a llama or not okay there is no maybe pet okay this one is good pets we are going to use this one so what i'm going to do is creating here my icon i'm going to import this like that and again i'm going to use my slides here again i will say display and for x small it's gonna be no and if it's small or bigger than small it's gonna be block and i will do the same thing for my icon i will copy this and paste here but this time it's gonna be block and no and as you can see our logo is here let's close here and i'm gonna shrink perfect if it's small screen icon if it's bigger perfect so what else we are gonna need we are gonna need a search bar so let's use something different here and i'm gonna show you how you can use htmld const search bar or just search and it's gonna be styled again but inside you can use any div element like that and here i'm gonna use my team and inside i will say background color it's going to be white so let's use it and you can see better after this icon i will say use this search component and i will say search and it's here it's end of the screen that because we are using just five content remember it's space between so if we create another component here you are gonna see that our search bar in the center let's copy this and create one more and this time it's gonna be let's say icon container or just icons and it's gonna be a box from material so let's use it here icons and scrubby icons inside for now i'm just writing text and as you can see this is our search bar and this is our icons box let's close here by the way and let's give some more styles firstly i want to give some padding from top and bottom it's going to be zero left and right 10 pixels and let's use our team i will say border radius let's give comma here by the way and it's gonna be of course you can give any pixels here but i want to show you how you can use team i will say team dot shape and border radius and this time as you can see it's not sharp anymore it looks much much better but it's really small let's give some width i will say width and it's going to be 40 percent for example okay perfect of course there is no input inside let's see how we can add i will search for input and it's going to be input base and as you can see we can use all those props so let's use it inside this search instead of this text i will call input base and i will import and let's give a placeholder and it's going to be just search like that and right now we can see our padding better so what about these icons i'm gonna create my icons first one will be mail okay let's use this one but before i want to show you one more thing and it's gonna be page so instead of using this icon alone we can give some batch as you can see it's really easy to use only thing usually is giving here a number and its color and our icon so i'm gonna copy this and paste inside icons is gonna be our first icon let's import this page and mail and let's see as you can see it's here by the way i'm gonna delete this color here and this page color will be red so i can say error it's just like primary secondary and success like that of course we cannot see that because our container is white i'm gonna delete this and perfect and i'm gonna add one more page here i'll just copy and paste and it's gonna be notifications let's import as you can see it's here and last thing will be a letter it's going to be our user avatar it's here as you can see it's a circle you don't have to create any div and give border radius it's that easy we are gonna use only this component so after this page i will say avatar like that let's import and we should give our source i'm just gonna copy and paste this image from pixels.com and as you can see it's really big let's give some style here i can use inner style and let's say width 30 and height will be the same okay it's much better but as you can see it's not horizontal i will say display and flex like that and i can give some space between them so if you are using flexbox you can just give here a gap it's going to be 20 pixels like that it's much better by the way i can align them align items it's going to be center okay they are centered vertically so let's take care about our mobile device by the way it's still here i'm just gonna refresh my page okay let's come here actually it looks okay but for more practice let's give something else it's gonna be more useful for you so what i'm gonna do if it's a small screen i'm just gonna show this author and maybe username we are not gonna see these notifications let's do that const user box for example i'll say styled and it's going to be a box actually i can just copy this one user box and again it's going to be display flex a line item center maybe last cap and i'm going to use it here after icons user box and it's going to include our avatar let's copy this and also it's going to be our username let's say john and variant will be just like that so what i'm gonna do is giving my display condition if it's small screen we are gonna delete this one and we are gonna show our user box if it's bigger it's gonna be the opposite so how we are gonna do this here as you can see we are using team we can use it and i will say team dodge breakpoints and i will say up here and if it's small or bigger than small that's why we are using up so i'm gonna say display flex in this case if it's smaller than this breakpoint which is 600 it's going to be displayed none it's that easy if i save and as you can see it's not here anymore but if i open it's here so i can do the same thing for this box so i will copy here and paste and this time if it's smaller than this screen it's going to be flex if it's bigger than 600 it's going to be displayed not like that let's showing this perfect so what else we can do we can add here a button so when we click on this avatar we can see our user menu and we can do this let's search for menu and as you can see when i click this button it opens this middle it's that easy so i'm gonna show you how we can use it so let's copy this one but it doesn't have any position here so okay it's gonna be this one we can't give any position let's see okay it's here as you can see it's gonna be on the top and left side let's copy this one and under my toolbar i'm gonna paste it and let's import them of course we are gonna apply everything later so i'm gonna delete those functions here maybe item okay firstly is gonna be true that because i'm just showing for now don't worry about that and position will be top and right so if we open our application as you can see it's here so how we are gonna decide if it's open or not it's really easy we can just create use state here after never i will say const open set open use statehook at the beginning it's gonna be false it's gonna be closed and when we click our avatar or this user box it's gonna be opening so i can see here on click event take the event and set my state it's gonna be true i will do the same thing for mobile version which is user box okay and i will come here and write here my closing method it's gonna be on close and again set state set open and it's gonna be false so whenever we click somewhere else it's gonna be closing let's try i will refresh of course we didn't write here our condition it's not gonna be true it's going to be depending on our state let's try i will click and as you can see it's here and when i click somewhere else it's go it's that easy so let's open mobile version and i'm gonna click here perfect it works so we've finished our nail bar you can also give menu for these icons maybe for this search button if you have any search list you can use autocomplete let's come here and check and as you can see it's not like a search button but you can write anything here pulse fiction and it's gonna choose this element it's really useful if you are searching from any list you can use this one also as you can see only thing you should do is giving your list as a option like that okay i'm not gonna show this because we don't have any functionality it's just a design so let's take care our sidebar so let's open sidebar so what i'm gonna do is adding a list let's check here i will say list this one and as you can see it's pretty nice we have an icon and text we can use this and also you can use a nested list like that you can give additional text here and other options this one is nice also you can use this in our right bar but for now let's create this basic one i will open here and as you can see list component and inside list item and we are gonna add our icon here and i'm gonna copy here and paste like that of course i should close my list component here like that so i'm gonna import them list list item button and we are gonna change this icon i can delete this and finally text and it's gonna be let's say home page so for this button we can add a new component remember how it works so we can do the same thing it's a list item button but its html tag will be a so in this case we can give link here of course we don't have any but just right here something like that okay let's add icon i will come here and search for home page and this one is good we can use it um and i'm gonna import let's see okay perfect by the way we can delete this background color we don't need anymore of course you can change its color this border shape it depends on you so i'm gonna add other items okay i added other items here there is nothing important just texts and icons let's see as you can see it's much better but i want to add one more lisp item here and it's gonna be our dart mode option so i'm gonna come here and search for switch button and as you can see we can use this basic one let's see what else we can use as you can see you can use any color here but let's use this basic one so i'm gonna create one more list item and our icon will be let's choose here moon this is good i think we can use this one instead of this icon i'm gonna use mode knight and we are not gonna have any text i'm gonna delete this instead we are gonna use switch okay perfect of course we are gonna arrange our dark mode but for now it looks awesome let's create some posts inside this feed of course you can come here and create another component which is list item and you can pass it's link it's text and icon but i'm not gonna do this let's open up feed i can close them to show our posts i'm gonna use material ui cards let's say card there's a basic card or you can add any image and those interactive buttons what else okay it's similar so we can use this one it looks awesome it can be our user we can like or dislike this post but there's a accordion here we can just get rid of this it's gonna be only this card let's see how we can use it okay i can copy here of course we are gonna change and i'm gonna paste here let's import them cards i'm gonna delete here we don't need any custom width cut header author if you want to use your theme color you have to import this also but i will just basically right here red icon button media and i'm gonna add here my image let's use this free image again and it's gonna be our text content and our actions which is like button share button we don't need that we are not gonna expand our cart item and we can delete this we don't have any additional description okay let's see okay i forgot this icon where is that okay here more vertical okay let's select this background color we don't need this anymore and perfect what we can do we can increase this image size let's come here and as you can see there is a default height here let's say 20 percent so in this case if i go to mobile version it's gonna look much better and in desktop version it's nice also it's that easy guys if you use only html and css it will take probably 20 minutes half hour but thanks to material ui it just takes one minute but i'm gonna add one more thing here as you can see if i click this heart button it's not changing so instead of this button i'm gonna add here a checkbox let's see how we can use it this is the basic checkbox of course we are gonna use icon and here when i click this it's filling inside this button we can use it and it's really easy to use you're just giving an icon with only order and when you check it which means when you click it changes to another icon let's copy this i'm gonna delete this and check box you don't have any prop here and let's import this and that's all let's see right now as you can see it's only border when i click it's going to be blue heart you can change its color i will say color will be red it's much better so what else we can do we can add multiple posts but this time let's create another component pause all jazz i'm gonna create my function here quickly and inside it's gonna be this card let's copy this here of course we are gonna need all those icons and components like that you don't need box here and also i can delete here and i will delete everything but box right now i can call my component i will say card sorry it was paused i will say post and in this case i can use multiple posts like that okay perfect of course you can pass this username by the way it's a recipe maybe let's say john doe 2022 [Music] okay i'm not gonna give any probe it's gonna take time we can't leave it like that but there is something more here what we can do is adding here a margin it's really close so for this card i will say margin it's gonna be five like that it's much much better but as you realize we have a problem here that because we cannot see our list here it's really easy to handle that let's open sidebar again and i'm gonna give here a position but if i give this for this box let's say position fixed as you can see it looks really strange that because fixed positioning is acting like a position absolute so instead of this i'm gonna create one more box inside and it's gonna be our wrapper and we can use position safely box and i'm gonna wrap my list here [Music] like that and right now i can give position fixed let's see right now okay perfect and i'm scrolling and it's still here so i'm gonna copy here and i will do the same thing for right bar i'm gonna delete this background color and i'm gonna create one more box here and i'm scrolling and it's staying here and also our nail bar remember it was sticky awesome it works so what we can add here we can add our online friends let's do that i'm gonna add let's say online friends and i'm gonna give a variant here let's say h6 but it's really thick let's make this thinner to do that i can directly give font weight here and it's gonna be let's say a hundred it's gonna be the thinnest one but we are not using a hundred i think let's open up index.html and as you can see we are using just three hundred four hundred and five i'm just gonna add here a hundred two hundred in this case it's gonna be thinner okay perfect right now let's add our friends i'm going to open our water again but this time we are not going to use only one avatar we are going to use avatar group let's check here and as you can see it's going to be like that you can give max probe here as you can see it's four and when you add five avatars it's gonna show four avatars here but when you add five quarters it's gonna be plus two here so let's use here and i'm going to paste here our group okay perfect but as you can see we don't have any image to prevent this i'm going to copy and paste my avatars here and max number will be seven okay if you don't give any image it's gonna show this blank avatar let's check for this user there is no avatar it's gonna be this image so what else we can use we can create here a portal gallery let's check i'll say list but this time it's going to be image list and as you can see it works like a grid system you can use more artistic one like this one and others this basic one is totally enough and this is how it works we are going to create image list for each image we are gonna create image list item of course we don't have any list you can create a json file but again i'm gonna do this one by one but before let's create another text here another title and it's gonna be latest posts or photos and after this i'm gonna create image list and inside this i'm gonna paste my items let's import this also okay and as you can see you can give any custom height here or column number in this example if it's more than three images this list is gonna move them in another line like that so columns will be three columns and row height will be let's say a hundred like that and also you can arrange those spaces to do that i will say gap if i say five for example it's gonna be something like that okay by the way we can give a padding for this box or we can give a custom width that because it's really close to end of the screen so let's come here and for this box let's give it for example okay right now it's much better by the way we can give some margin for this text i will say margin top let's say two and margin bottom is gonna be two okay perfect and let's add one more thing here and it's gonna be latest conversations so i will copy here latest conversations and remember we have seen a list here let's check and i saw something here okay this one is awesome exactly what i want let's see how we are using again we are using list list item user avatars and other texts let's directly copy this actually it looks pretty nice like that and i'm gonna import them let's import everything we need like that i don't wanna waste time okay let's see and awesome of course there is no image that because they are still static we don't have any image but if you want to you can give let's give one of them by the way i can delete this margin bottom maybe and perfect what else we can do we have posts but there is no button to add any post let's create a button and create here a model so let's create another component inside components i will say add.js my function and i'm going to add this inside app.js let's edit here i'll say add from components and let's close them okay so what kind of button we are gonna use let's search for tooltip as you can see it's just a button but underneath there is a text but inside instead of icon we are gonna be using anything else i'm gonna show you but before let's copy this i'm gonna paste it here by the way it's not gonna be deep it can be just react fragments and i'm gonna import this tooltip i'm gonna delete here and let's see something else and it's gonna be fab and as you can see it looks much more better it has this default animation inside so we can use it i will copy this and paste inside fab it's going to be primary and my icon here is going to be add icon but i cannot do this that because our component name is already add so i'm going to install add icon let's come here and say import add as add icon and it's gonna be mui and icons let's see and it's gonna be somewhere here but we are gonna give another position for this like absolute or fixed so it's gonna be somewhere here let's do that inside this tooltip i will say x and position will be fixed and we are going to give some position here bottom will be let's say 20 like that and left side will be something like 30 but if we do this and then we open mobile version it's gonna look a little bit weird so i'm gonna move this in the middle of the screen so i can write here my condition i will say left and if it's extra small we are going to need some calculation and i will say 50 percent x small if it's medium it's going to be just 30. and as you can see it's somewhere here but it's still not in the middle of the center that because we didn't calculate its radius here if i remember correctly it was 25 pixels so if i say minus 25 it's gonna be on the middle by the way we have extra space here it shouldn't be like that we are gonna handle that but before let's take care of this button so when i click this button i'm gonna create a model here that we can add our posts to do that let's come here and model okay i will click and as you can see it's opening i can use this i will copy this and after this tooltip i'm gonna paste let's import we are gonna have a box we don't need this style and those text i'm gonna delete and i will just say hello of course we are gonna need our state as we always do i'm gonna create open set open and the initial state will be false it's gonna be close and when i click on this button on click methods it's gonna be set open and true so i can do the same thing for close method and it's going to be false i will come here i'm clicking and as you can see hello is here but i don't want a full screen box so what i'm gonna do is giving some width and height for our box and making this model display flex what i mean by that let's come here and let's say beat 400 height will be blue 80 or whatever you want let's give background color and it's gonna be white and i will give some padding it's gonna be three and as you can see it's here maybe portal radius i'll say five okay it's better but as you can see it's not centered so i can create my own model let's say styled model and i'm going to create my own model here i'll say const model is going to be styled model i should import this and i will say display flex align item center and justify content center let's see right now okay perfect so let's create a title here inside this box and create post i'm gonna give my variant h6 and maybe color let's say gray let's see okay it's here i can center this i will just use text align it's gonna be center oops equal okay so what i'm gonna do is creating here a user avatar and username to do that again as we did before i can create userbox and inside we are gonna have our avatar username let's say john doe and font weight will be 500 and its type will be spam import this and let's create our user box i can copy this actually it's going to be user box and again display flex and align item center by the way it's gonna be box of course i will click and as you can see it's here i can give some margin here to do that remember if you are using flexbox you can directly give cap here let's say 10 pixels and i'm gonna give margin button okay we have margin here right now i can add my text box here to do that we are going to use text field as you can see we can use this one but i want to add more rows let's come here as you can see multi-line we can use this it's the last one i'm gonna copy and after this user box we can add i'm gonna import and we don't need any label let's see first okay instead of this default value i'm gonna add placeholder it's gonna look better and let's say what's on your mind maybe let's give full width to do this i'm going to use sx and width will be let's say a hundred percent okay perfect but it doesn't look it's a placeholder i'm gonna close and open again probably didn't say okay perfect it looks awesome maybe a little bit smaller okay right now let's add here some icons to do this we can use stack layout i will say stack remember it's a flexbox and we can give a direction and it's gonna be raw and for each item i'm gonna give a gap and it's gonna be one let's see i'm gonna add some icons first one will be emoji icon this one like that let's import if i duplicate this we can see better okay as you can see like that and for this stack let's give some margin margin top will be two and margin bottom will be let's say three okay much better and for others it's gonna be image it's gonna be this one video camera back and add person this one i'm gonna add them and i'm gonna give different colors let's add directly like that i'm gonna import them okay as you can see primary secondary success and error like that and there is one more thing we should do and it's going to be our button but let's do something different i want to show you different components as much as i can and it's going to be button group as you can see you can use different buttons like that let's copy this and after this stack i will say button group and button it's gonna be post and second one will be just icon which icon we are gonna use let's come here date wrench we are gonna use this one so it's gonna be like a schedule of course inside component like that and i'm gonna import okay but i'm gonna make this full width to do this i will just come here and fold it maybe we can arrange its size it's really big it's just an icon so i will say with it's going to be 100 pixels for example oops of course inside button okay i'm gonna open and it's here perfect it looks pretty good so we can change our dark mode you cannot imagine how easy to use it let's open up objects and here i'm gonna create a team i will say const dark team and it's gonna be create team from material ui and here we are gonna use palette and inside we are gonna use mod and by default it has two modes first one is dark and second one is light of course we are gonna change it so we are not gonna use any of them i will say const mode set mode and at the beginning it's gonna be light mode so i can use it here and i'm gonna wrap my application i will say team provider and let's wrap this box like that and right now we are able to use our dark team okay it's light at the beginning but what if i change this and as you can see as soon as i do that all those components are changing this card this list this nail bar we don't have to do anything but we don't have any background it's really easy to handle i will come here and i will say background color background and default let's go like that if i do this as you can see it's black but what about our texts i will do the same thing i will say color this time it's going to be text dot primary and right now it's white that because our primary color is white if i open this as you can see it's still light let's go to add page and i will do the same thing i will copy here and there is our box okay it's here and instead of white i will say background color default text color primary it's that easy guys it's just one minute thing but how we are gonna change it i will come here and again at the beginning it's gonna be light and and i'm gonna set this inside this sidebar when i click this button it's gonna be dark mode when i click again it's gonna be light mode let's send this will say set mode and it's gonna be set mode and also i'm gonna send my mod because we are gonna compare okay let's open up sidebar and i'm gonna take my props mode and set mod let's come here so i'm gonna add here on change event and i will say set mode and i'm gonna write my condition i'm gonna look inside mode and if it's light it's gonna be dark and if it's not light it's gonna be light that's all let's see i'm clicking and dark mode clicking again light mode perfect of course we can give endless examples but it's just a crash course i believe that you feel much more confident right now you can play around all those components and after creating couple projects i'm sure that it's gonna be your favorite ui library so let's deploy our application it's really easy only thing you should do is writing here npm run and build it's gonna take a while and after that it's gonna create a build folder here as you can see it's here and it's ready it includes our index.html and our static files let's open our hpanel and here i'm gonna choose my hosting i'm using this one and in this page i'm gonna scroll and find file manager i'm gonna click and as you can see this is our main file this is our default home page i'm gonna delete this and i'm gonna drag and drop my files into this folder let's choose them and i will drag and drop here and that's all it's ready it was just couple seconds and it's ready as you can see it works let's check out our functionalities okay it's working let's try dark mode this button here it's that easy guys and as you can see our connection is secure that because we are using https connection and that's all i hope you liked it if you learned something new today please like the video and if you want to support plummeter you can join the channel or you can use the link in the description below and don't forget to follow lama dev social media accounts i hope i will see you in the next tutorial goodbye you

Channel: Lama Dev

Views: 360,944

Keywords: Material ui, mui, material ui 5, material ui tutorial, mui tutorial, mui crash course, react mui, react material ui, react, react ui, react design, material design, mui 5, mui design, web design, react course, material ui theme, mui template, lama dev

Id: fzxEECHnsvU

Length: 75min 41sec (4541 seconds)

Published: Fri Apr 15 2022