50 HOURS REACT.JS 19 MONSTER CLASS

So before we dive into the course first of all I want to mention a few things I can't make any promises but I can confidently say that this course will give you a job and what I can promise is that this course will take you from zero to a react expert a react monster that I can definitely give you a promise now you might be wondering why I'm so sure about this and the answer is simple I began learning reactjs in 2018 and Started teaching it in 2001 I appload my first reactjs course on my

YouTube channel 2 years ago or almost 2 years ago and since then I gained extensive experience by building numerous projects and working with different companies now I'm eager to Lear you a job now I know that's a lot of things that I just said now the real question is what you can expect from this course in this course you're are going to be learning a lot and I mean a lot of things so now let me Explain all of them one by one in one breath first of all we are going to be starting from

the react fundamental by building 10 projects and countless exercises then we will jump to react with time script by building five projects and countless exercises then react hook form with one project Des UI shads and UI redex UI tman CSS simple hooks advanc hooks learn everything about Zeus by building 10 projects every single thing I know about the framer Motion and also animation in general by building 10 projects 10 stack query 10 stack router and also if you guys don't know the 10 stack framework which was just launched 3 days ago and you will learn

all of that by building 10 more projects then we're going to be jumping into the advanced Parts like design patterns in reactjs design system in reactjs react testing Redux toolkit with two full stack projects next CH from beginning to advanced level react native With projects and also we are going to be building Advanced projects okay that was a lot of thing that I just explained I'm going to break them down one by one in a few seconds but yeah this is what you can expect from this course and this course is still in the construction

you are watching only the first part of this course and which is about like almost uh 11 or 12 hour of content so you are watching the first part of this course and in the upcoming series we're going To be covering the rest of these topics which I just mentioned so yeah I'm super excited and I hope you are too now finally I want to talk about one final thing and I promise then we will jump to the course I've mentioned this in my previous courses in my react native course and also in my data

structure and algorithm course that if you don't want to subscribe to my YouTube channel you don't have to if you don't want to send me a money you don't have to if you Don't want to follow me on Instagram or in X or Twitter whatever you want to call that you don't even have to follow me anywhere you don't have to do nothing for me but now if you are taking some Advantage from my course please do not download my courses if you don't want to follow me here and there I can totally understand like

why but if you are watching my courses and you are making a career out of there and still if you are downloading my courses that's not fair Like I can't do anything about that because YouTube doesn't have the download feature but yeah like if you watching my content please do not download that so yeah let's get into the course and I'm going to make you a react monster so now let's talk about what are the things that you have to know before jumping into this course so you only need to know HTML and CSS that's

going to be the main prerequisites for this course you don't have to know SS and This one is optional but I will highly recommend commend you to learn tailn CSS because in this course we're going to be building a lot of projects and for The Styling we're going to be using tailn CSS so this one is optional but yeah once again my recommendation will be to learn that and also you have to know JavaScript but in this course you can definitely skip the O op part you don't have to know what a oop is to

take this course which you are currently watching Right now and if you guys already saw my old react J course where in the world is the okay let me just search for there we go if you guys are wondering like should I have to watch this course before jumping into this reactjs course the video which you are currently watching right now you don't have to watch this video and even though I'm going to private this video and ah God damn it you also have to know typescript I forgot this one you also have to know

This typescript now let me just say that once again HTML CSS tell CSS JavaScript and typescript so that's the only thing that you have to know for watching this course so now let's get into the cording so what is reactjs react is a free and open source JavaScript library specially designed for building the user interfaces now there are a few buzzword in this definition let me clarify that for you so the first one we have is a open source so what is a open source Open source refer to the type of software or basically anything

where the source code is made available to the public this means that anyone can view modify and distribute the code of that specific thing and in our case in reactj yes now what is a library library is a collection of pre-written code that developer can use to perform a common task or add a specific functionality to their applications now what is a UI UI or the user interface is the means Through which the user interact with our application reactjs was created in 2011 it uses something called the component model which we will discuss more in

detail in this course but not right now it allows us to build modular apps and finally there is a saying about reactjs that learn it once and write it anywhere so now let me break all of them one by one B is the most popular powerful frontend Library developed and sponsored by Facebook a component is just a piece Of the UI that has its own logic and appearance a component can be small as a button or large as entire application you'll discuss more about components in more great detail later in this course but not right

now if you learn react GS once you will not only be able to build only the websites but you can also build the mobile application desktop and also even the virtual reality and there are a lot more things that you can do with reactjs so you just have to learn it Once and write it anywhere so that was just a quick intro to react GS and now let me make a setup forward coding journey in this course we'll be using a vs code for writing work code and you're more than welcome to use any text

eror that you prefer you can use Sublime Text you can use jbr products you can use anything that you prefer but in my case I'm going to be using a vs code for writing my code now to install reactjs first we will need to open your terminal After that we have to type this command npm create weat at latest hit enter next we have to provide some sort of a name for our project I'll call mine as react demos you can call it like anything that you want next we have to select the framework I'll

choose reactjs because we are now learning reactjs and yeah I'm going to just choose reactjs next we have to select the variant for now I'll just choose JavaScript because I know there are a lot of people who are Watching this course they don't have the knowledge of typescripts so if you are someone who already know what typescript is you don't have to worry about that like we going to be still using a typescript in this course but not right now so yeah I'm going to just choose JavaScript for now but later we are going to

be using a typescript in this course now we have to go inside that folder by using a CD command or you can say the current directory command now I'm going to use the code Dot and hit enter so it's going to open that in my vs code now want you to open your integrated terminal inside your vs code and just type this command so you can either use npmi or you can use PM install if you wanted to so both of them will work totally fine so it's going to install all of the packages by

which or reactjs is depends on so it's going to take a bit of time I'm going to fast forward the video right now let's Discuss these files and folders so the first folder that we have is a node modules folder and this folder has all of the module and packages by which or reactjs is depends on and later in this course if you install any third party packages that will be also included in this folder so the next folder that we have is a public folder and public is the folder where we put all for

assets file like HTML Etc next we have a SRC folder and SRC or source is the hard of For entire project and we're going to be spending like almost 90% of our time in this folder so now inside this SRC folder we have a few more files and folder so the first one we have is the asset folder and as the name suggest that in this folder we are going to be putting like all of our assets files and folder like images svgs external icons and so on and so forth next we have two other

files like app. CSS and also index.css so as the name suggest that We're going to be writing our style inside these files so we are going to be providing our style for our UI inside these files next we have two more files like app.jsx and also main. jsx these are something called the component file which we're going to be discussing later in this course but you don't have to worry about that for now next we have a GE ignore file and this is a GitHub related file when we are pushing our code to GitHub this

file allows us to Ignore a certain file or folder for example like this node modules folder is a huge folder and if you don't want to push that to our gab repository so we're going to be just putting the name of our node modules folder in inside this dog ignore file and it's going to just ignore that whenever we are pushing our code to our giab repository next we have our es. config.js file and this is a configuration file for our es next we have our index. HTML file and this is The most important file

because in this file we have our HTML content and we also have a deal with ID of root or rejs will select this element and render all of our content to that specific day like I'm going to show you from where we are selecting that day with a class of Route I mean like with the IDE of root next we have our package.json file and this file is the heart of our project it contains metadata about the project such as like project name version description and Scripts and more importantly it list the dependencies and their

version that where project needs to run here is something which we're going to be discussing later in this course next we have a package log.jn file file is automatically generated and updated when install or modify dependencies it locks the version of all of the packages and their dependencies to ensure a consistent and reproducible build envirment something which you don't have To worry about okay so next we have a simple readme.md file and this file provides the summary of what our project is about it usually include information like project purpose feature and aims to accomplish about

this spefic specific project we can also preview there by clicking on this icon and here you can see and this is how our preview will look like once we push our code to our gab repository next we have our V.C config.js file and this file is used to Provide configuration for the V itself so yeah that was a lot about the files and folders and you don't even have to worry about these files and folder to be honest and now I'm going to remove all of the unnecessary stuff from our project time for the cleanup

so for now we don't need this public folder so I'm going to select them and delete them next we also don't need this SS folder so I'm going to remove that from here we also don't need the app. CSS and also The index.css as well next we have to go inside this men. jsx and just remove this line of code so I'm going to just remove the SMI file and now finally I'm going to go into my f. GSX file I'm going to select every single thing from this file and I'm going to just remove

that from here and next I'm going to be just creating something called a component but you don't have to worry about what a component is for now so I'll just use like const app and I'll Just use my arrow function and return just H1 or you know what not H1 I'll just return like section which will say like hello now I'm going to save my file and now to run this code I'm going to have to open my integrated terminal and now just use my npm run Dev so it's going to run my code on

this port right here so I'm going to copy that or you can just hold command or control and click on there and we are getting this error right here this because we now Successfully created this component but we also have to export this so that we can use it in other files so I'm going to use like export default and then my app so if I sve there and I'm going to have to refresh there so what are we getting we are now getting our hello right here which is amazing so yeah this is how

we going to be removing all of that unnecessary stuff from our project so what is component components are independent and reusable bits of code They serve the same purposes jscript function but work in isolation and return HTML or jsx to be size so something which we're going to be discussing very soon cregs allows us to make our website modular by using something called the separation of concern so if I ask you to build this UI so how can you go about doing that if you are coming from HTML cssa and JavaScript background you will first

create index.html file then CSS file Then Javascript file and in the HTML file you will put all of your structure for this project then in the CSS file you will put all of the styling and in the Javascript file you will provide the functional to it this process is still a separation of concern but in reactjs we can do that a bit more better in reactjs we can split this entire project into multiple components or you can say the parts so you can either say like components or parts so if you want to Build this

project by using reactjs we will start by creating a component for the nailbar and in there we will put our HTML CSS and JavaScript inside their specific file then we will create another component for a search bar next next for the menu and also for the article and also finally we'll create a component for the card and we will reuse that card again and again in our UI so that was about the theory but how are we going to make a component a component You just have to create a JavaScript function but whenever you are

creating a component you have to keep a few things in mind the first thing that you have to keep in mind is that the first letter of your component name should be uppercase you can also create your component by either using the function resert keyword or you can create your component Arrow function syntax as well the final thing that you have to keep in mind is that anytime you are working with a component You have to return some sort of HTML from that component Now to create a component I'm going to go into my app.jsx

file and I'm going to remove every single thing from there because I want to start from scratch so as I said that components are just a JavaScript function so if I just create a JavaScript function by using either the function resert keyword or I can also create my component by using the arrow function so for now I'll just stick with This function resert keyword and by the way anytime you are creating a component there are two things that you have to keep in mind number one the first letter of the name should be uppercase and

the rest of them will be lower case so if I want to give my component as the name of like app the first letter should be uppercase and the rest of them can be like anything you can create the as uppercase or lower case that's only on you but the first letter should be upper Case I'm going to just give it the name of like app and the next thing that you have to keep in mind is that from the component you always like always have to return some sort of a GSX we did not

discuss about GSX not right now but we will very soon so I'm going to just write my H1 right here and I'll just write like hello word so now if I sve my file this is how we are going to be creating our component but now we have to tell our reactjs that now we Successfully created this component we want to render that to our UI so to render that to our UI first of all we have to export that so that we can use the in other places of our project so I'm going to

just use like export default and then F so as soon as I do that and save my file now I'm going to open my terminal right here I'm going to just use my npm run Dev and here you can see we are now getting our hello word right here from our component so what's Going on so now we successfully creating our component and now we exporting there so that we can use this component in other part of our project so where we are using that component so if I go into my main. jsx file right

here so here you can see we are now rendering this component right here so first of all we are now importing this component which we just created right here inside this app.jsx file and now we are exporting there and here inside this men. jsx file We're now importing this component and we are now rendering that to or UI and as I said previously that I want you to keep in mind this root now we are selecting that root right here by using document. getet element by ID and we are now selecting that root which is

inside this index.html file as you can see right here now we are selecting that root so here you can see we have a root ID and we are now selecting there by using document. element by ID right here And now inside that route like this route we are now rendering our app component right here so that's the only reason we're now getting this hello world right here so if I change something inside that component like if I go into there and I'm going to just change that to like my own name maybe now if I

save there and here you can see I'm now getting my own name so yeah this is how we are going to be creating a component and let me just say that once Again anytime you want to create your component the first letter will be upper case and the rest of them can be either upper case or lower case or that's only on you and also we have to return some HTML from this function okay so we can also refactor this code to use Arrow function so I'll just use like const and I'm going to just

convert this function to use the arrow function if you prefer this way you can also create your component by using this Arrow syntax or You are more than welcome to use this function Reser keyword right here so yeah this is how we are going to be working with components welcome to the first challenge of this course so here is the UI and I want you to split this UI into multiple components you don't have to write any code for that just get a pen and paper if you have that but if you don't have a

pen and paper you can also use some sort of a photo editing software which will allow you to just Mark a few things inside this UI and make them as a separate component and yeah we also have another part of this challenge which we are going to be seeing in a few seconds but I want you to go ahead and pause the video and do this challenge by yourself so if you can do it then come back and watch the solution and now I'm going to give you my solution so I'm going to use a

figma for there and if you want to use some sort of other Pho editing software you Are more than welcome to do that so the first thing that I want to do is that I want to create a component for this burger menu so I'm going to just create a separate component and I'm going to put like all of the structure The Styling and also the functionality inside that component and then I will also create a component for the navigation so I'll just create a navigation right here and excuse my drawing and also my bad

uh yeah you get The idea so this is how we are going to be creating a component for the navigation we can also split this entire navigation into multiple components but we don't have to like this is going to be enough for this navigation component we will put our logo inside there we will also put our search field which will allows us to search our uh stuff inside this Wikipedia and finally we are going to be also providing our create account and also the login and we also Have these three dots and I don't have

any idea what the hell these three dots do okay so that's going to be my second component next we're going to be also creating a component for the banner in some situation we would want to show this banner and in a lot of times we are not going to be showing this Banner so yeah this is going to be basically my primary component and there is a big difference between like uh huge component and a small component which we Are going to be seeing inside this course but not right now so this is going to

be my third component component for the banner okay and also we are going to be creating a component for the sidebar or you can just give it the name of like a side if you want it to but I'm going to give it the name of like sidebar and I guess that's going to be fine okay and also we're going to be creating a component for the appearance so I'm going to also Mark there as a Separate component okay so we can also split this entire U into like nested component as well we can also

create a separate component for these radio button if you wanted to but but we don't have to do that okay and also we're going to be creating a component for the header so now let me just highlight that right here just like that so this is going to be basically our header and finally we are going to be creating a component for our Main content so this is going to be basically our huge component which will allows us to render all of that content right here inside this uh Wikipedia okay like once again we don't

have to create a component for all of there we can put all of that entire logic into one component if you wanted to but that's not going to be the ideal way to create our website or our apps so that's why we are going to be splitting this entire UI into multiple components so yeah that Was the part one of our challenge one next we have to create a new file called grid. jsx and inside that file we're going to be creating our grid component by using the function decoration syntax after that we are going

to be refactoring that code to use the arrow function instead and finally we just have to render that into our app component so once again give it your best shot if you can do it that's completely okay then come back and watch The solution and I'm going to give you my solution so what I'm going to do is that I'm going to create a component folder and I'm going to give the name of like G do uh not TSX but genesic and I'm going to use my RFC so it's going to gives us all of

that code but I'm not going to do that I'll just create a function and now I'm going to give it the name of like greed it's not going to take any perimeters so I'm going to remove them and finally we only have to Return what H1 and which will just say like GRE or hello word would be fine so I'm going to sve my file now we have to export this component so that we can use that in other files so I'm going to be using like export default of grid so now I'm going to

save my file let me go into my app.jsx component and let's just register that component right here okay so if I save my file and here you can see we now getting our hello word right here which is looking amazing but I'm Going to go in there and refactor this code to use the arrow function so I'm going to remove that and change the to const and also make there as Arrow function so now if I save my file and still we getting that same result which is saying hello word okay so yeah that was

our first challenge in this course we usually create a separate components folder and we put our components inside there so I'm going to just create two component with the name of like greet or Greeting. jsx and also add. jsx and by the way you can give it any name that you prefer and now I'm going to just create my greet component right here here and I'll just return my H1 which will say uh hello or yeah hello would be fine I'm going to sve my file and I'm going to show you extension which will help

you a lot so I want you to go into your extension area and just search for reactjs and once you do here you can see I want you to install this extension in Your vs code just install this extension and it's going to give you a lot of Snippets okay so throughout the course I'm going to show you a lot of uh Snippets which you can use but by the way if you want to use them so you you have to install that in your vs code so this component took a lot of time to

write now in this component I'm going to just use r a f c e okay so you just have to write there and once you hit enter so here you can see it's going to gives us The entire boiler plate of our component let me just show you there once again you just have to write ra fce and hit either tab or hit enter it's going to give us that entire component right here so if I save my file now that we successfully created our add component and also our GRE component and by the way

we also have to export that so we can use it in other files so we have to just use export default and then grid okay so if I save my file now the next Thing that we have to do is that we have to register the inside or app components so that we can see them on the screen so I'll just remove this H1 from here and I'll just use my grid first of all and as soon as I hit enter here you can see it will automatically import this so if it didn't you have

to import them manually so now just close there like this and by the way this is how we call our component this is how we register our component this is how we export them And this is how we call them okay so if I save my file and here you can see we are now getting our hello right here which is coming from this create component I'll remove that from here and I'll also render my ADD component and if I hit enter so it's going to automatically import there now I'm going to save my file

and what are we getting we are now getting our add right here so we can write like anything that you want so I'll just write like something cool And now if I save my file and we're now getting what something cool right here so yeah this is how we can create a separate component folder and we can put our entire components inside there welcome to another challenge so in this challenge you're going to be creating three components and a lot of j6 inside there so the first thing that I want you to do is that

I want you to create a header. jsx file and inside that file you are going to have to create your Functional component with the name of header and inside that header you're going to be returning the header element and inside that header element you're going to be creating H1 which will say like welcome to my website and also so you're going to be creating underneath this H1 you're going to be creating your navigation and that navigation will have three anchor tags the first one will say home the second one will say about and the third

one will say contact so that's Going to be the first part of this challenge okay so if you want to give it a shot right now so you can totally go ahead and give it a shot but now I'm going to explain these two and then I'm going to give you my solution the next thing that you have to do that create a photo. jsx file and create your functional component inside there it will only return the folder element and inside that folder element you're going to be providing a paragraph which will Say like copyright

uh 2024 or it should be 2025 my bad but yeah you can proide like basically any basically anything that you like but in my case I'm going to specify like copyright 2024 or 25 in my website and that's the second part and now for the third part you're going to be creating your main component and that main component will just return your main element and also inside that main element you're to be creating your H2 which will say like main content and Now underneath that H2 you're going to be creating a paragraph and you can

like basically put anything that you prefer so give it to your best shot if you can do it that's completely okay then come back and watch the solution and then I'm going to give you my solution and basically you're going to be just importing there and putting there right here inside the app component so now let me just show you all of that so the first thing that I want to do is that I Want to create my header. jsx and I'm going to be using my RFC for the sem my file I'm going to

remove this header from there and provide my H1 which will say like welcome to my website okay so that's going to be the first thing next we also have to create our navigation and inside this navigation we're going to be creating a three anchor tag so if I just use like this a and times three so it's going to give us this anchor tag like three times so for the first one We're going to be providing a home and for the second one we're going to be providing about and also for the third one we

are going to be providing a contact okay so if I just write like contact and sem my file so it's going to form form there for me I'm going to go ahead and go to my app and register my header component right here okay let's just import there and registered that here so now if I save my file and here you can see we're now getting more Welcome to my website home about and contact so that was the first part now in the second part we're going to be creating a main component okay so I'll

just say like main. jsx and inside there we're going to be creating our RFC or you know what it should be a main you know what you can like basically give it any name that you prefer but in my case I'm going to give it the name of like main content and change that to main so I'm going to copy there and let me just Place there right here okay and I'm going to also use the H2 which will say like main content and now need that we're going to be creating our paragraph which will

say like this is the main content and now I'm going to save that now let me just go ahead and go to my app and register my main component right in here and now here you can see we're now getting like main context content content there we go so now if I save my file and now we are getting like main Content and this is the main content which is looking amazing now for the final component we're going to be creating our footer. jsx and now inside there we're going to be using our RFC and

remove this Dev and change that to folder okay let's just provide our paragraph which will say copyright 2025 my website so now if I save my file we also have to registered that inside our app component l like so okay and I'm going to register this semi file and now We are getting our copyright 2025 my website so that was another challenge about the basic component what is jsx jsx allows us to write HTML in reactjs jsx makes it easier to write and add HTML in reactjs so this is how our jsx looks like so

first of all we have our component and inside this component we are now returning some HTML now I know a lot of you will ask me hose like why can't we just call it HTML why are we calling it jsx jsx simply means JavaScript XML behind the scene we're working with JavaScript this is just the illusion of HTML this is not HTML code behind the scene your reactj compiler will compile our code into pure JavaScript so don't believe me now let me show you now let me write a bit of jsx so that you guys

can see how we can work with jsx so I'll just create a section and inside this section I'll also provide a bit of ID to it so I'll just give the name of like section and Inside this section I'll create my H1 which will say my website underneath this H1 I'll create my article and inside this article I'll create H2 which will say like welcome to reactjs now underneath this H2 I'll create a paragraph and which will say like paragraph paragraph content or text I'm going to also provide a class name to it and by

the way instead of writing a class you have to write a class name and I'm going To tell you why but you have to write a class name for now and I'll just give you the class name of text right here so if I save my file and here you can see we now getting our result right here so if I right click on there and go to my inspect element we are first of all getting our root and now inside this route we have our section with idea of section we have our H1 we

also have our article and inside this article we have this H2 and we also have this class we Are now providing a class name and here you can see we are now getting a class this is a gs6 rule which I'm going to explain in a few seconds but yeah here you can see this is how we can write HTML inside our JavaScript function so to combine all of them this is how we can create our component now let me show you how our reactjs convert all of these HTML to JavaScript and to show you

there first of all you have to go into this B js. and inside there you have to place Your HTML content so I'll just copy my HTML content from here and I'm going to just place it right here and what are we getting we getting JavaScript so if I copy that instead of writing this section and article and stuff like that I'm going to just remove that from here I'll just for my return statement and I'm going to place this uh content right here I'm going to also remove this stuff let's just remove them I'm

going to also select this comment and hit contrl d Control D or command D and command D and I'm going to just remove that from here so if I sell my file now I'm going to zoom out a bit and first of all I'm going to also copy this line of code and I'm going to have to put the at the top and you don't have to worry about this code we are not going to be writing our code like this you don't have to worry about this coding so I'm going to save my file

and now if I go into my website and refresh there once again we are Getting the same result like my website welcome to react and paragraph content so if I go into the section we have our ID we have our H1 article or H2 and also our paragraph with a class of text right here so if you weren't using jsx so we are going to have to create our component this way like come on look at this this redundancy we are now using some djsx and providing a section to it then we are providing ID

and children and there are a lot of things going on So instead of writing all of them I'm going to totally remove that from here and I'll just replace that with this return statement and I'm going to also remove this first line so this is what a jsx is and this is the power of reactjs and also jsx in reactjs welcome to another challenge so in this challenge you're going to be practicing ch X so first of all I want you to create a file with the name of welcome message. jsx and inside that File

then you have to create a component with the name of Welcome message inside that component you will have a div and inside that div you will have your H1 first of all and inside that H1 you're going to be providing like hello word underneath this H1 you're going to be also creating a paragraph which will say like welcome to learning GSX and finally you have to import in the app. j6 and render that to the Dom so give it your best sh if you can do it that's Completely okay then come back and watch the

solution and I'm going to give you my solution I'm going to create a file with the name of welcome message. jsx and inside that we're going to be using our rafc to create this component right here and first of all we have our div and now inside this div we're going to be defining our H1 which will just say like uh hello word and now underneath this H1 we're going to be creating our paragraph which will say like welcome to Learning jsx I'm going to save this file now let me go ahead and go to

my app.js x file and register my welcome component right in here okay so I'll just close there like so sa my file and here you can see we now getting hello word and also welcome to learning jsx so yeah that was our second challenge whenever you're working with jsx there are a few rules that you have to keep in mind I'm going to show you that rules but first of all I'm going to remove this article From here I'm going to save my file and here you can see we are now getting on my website

which is looking amazing so the first rule that you have to keep in mind is that from one component you are allowed to return only one parent like there can't be multiple parents so what am I talking about let's suppose if I just move this line of code into new line so what are we getting we are now getting an error it is saying that you are not allowed to create multiple Parents like this is a parent and this is also a parent or I can just write a div and here you can see still

it's going to give us that error right here and why is that because as I said that our rejs compiler will compile our code to JavaScript and that's not allowed in JavaScript anytime you are working with jsx this is the first rule that you have to keep in mind that from one component you are only allowed to return one div and now inside this div you can do Anything like you can create any amount of nested stuff so you can create your H1 you can write anything inside there even inside this H1 you can write

a div and you can write anything inside there underneath there but you have to keep in mind that from one component you have to return only one parent and anything you write inside that parent will totally work okay so that's the first thing that you have to keep in mind the next thing that you have to keep in mind is that in Jsx you have to close all of your tags in HTML like that wasn't necessary if you want to work with like images so you just create your image and you don't even have to

close that if you don't want it to but in jsx you have to close there as you can see right here so if I just remove there it will give us that error right here like j6 element image has no corresponding closing tag like you have to close there and that doesn't matter if you're working with the image Or if you're working with the divs so I'm going to just remove that from here and here you can see it's going to also give us that error right here and we can also make it as a

self-closing tag if you wanted to but you have to keep in mind that anytime you're working with jsx you have to close all of your HTML tags okay so that's the second thing that you have to keep in mind the third thing that you have to keep in mind is that anytime you are working with the Classes you are not allowed how to provide a class by using the class keyword instead of a class you have to provide a class name so what am I talking about I'm going to just write H1 and I'll just

say like hello and now if I just provide class right here I'll just write a class and now here I'm going to just say like uh my class and here you can see it's not going to give me any error now if I save my file and now if I refresh that and go into my Console now it's going to gives us this error like invalid don't property class did you mean class name because what JavaScript compiler will now think that you're defining some sort of a class as we learned in a oop section like

object oriented programming section in our JavaScript course JavaScript will think like you are defining some kind of a class and like The polymorphism Inheritance and all of that concept that we learned okay so JavaScript will think That you are defining that class but we are not defining that class we are just providing a class to or element okay so to provide a class we have to use our class name instead so if I just remove there and if I change that to the class name and now if I save my file and now if I

refresh it and here you can see that error is now gone so yeah that was the third thing that you have to keep in mind and now the fourth thing that you have to keep in mind anytime you are Working with the forms in some situation we also want to provide a label forward input field okay so I'll just use like form and I'm going to just remove this action because we don't need there and now inside this form we will just create a label so if I just create my label inside some situation we

would want to provide our four attribute to it so if I just write like name and I'll just use my name inside there I'm going to create my input field which will say like uh Text would be fine I'll also proide a bit of placeholder to it so enter your name I'm going to sve my file and now if I just refresh there and what are we getting we are now getting like invalid D property 4 did you mean the HTML 4 because now once again what JavaScript compiler will think that you're creating some sort

of a full loop okay so we are not creating a four Loop we are now providing just a four property or the four attribute to our label so instead Of providing a four we have to write our HTML 4 okay so I'm going to save my file and now if I refresh that and here you can see that error is now gone I can write anything I want so yeah that was a few rules about GSX that you have to keep in mind whenever you're working with the GSX in this series we learned a few

rules about GSX and we're going to be exploring more throughout this course but now I'm going to just make you recall those rules okay so the first Thing that I want you to do is that I want you to create a file with the name of jsx roles. jsx inside that file create a component or a functional component with the name of jsx rules and then inside that jsx rules component you're going to be creating a div and inside their day first of all you have to write H1 with the title of jsx rules and

now underneath there you're going to be creating a threee paragraph and one paragraph will say like jsx must return A single parent element another paragraph will say like jsx element must uh must be properly closed and the third one will say like j6 attribute are written using a camel case like instead of using a class we're going to be using a class name this is the most simplest challenge okay so give it your best shot if you can do it then come back and watch the solution and now I'm going to give you my solution

now let me create my component with the name of jsx rules. Jsx I'll just create my functional component Right Here and Now inside this functional component the first thing that we have is our div and now inside this div we have our H1 and I'll write like jsx rules and now underneath this H1 we're going to be creating a paragraph which will say like jsx must return a single parent element okay that's going to be the first one we're going to be also creating another paragraph which will select jsx uh Element must be properly closed

and come on this should be a close and also we have a jsx attribute or written using a caml case like so so I'm going to save my file we have to remove them and yeah that's all simple exercise now we have to register this component inside our app so I'll just register there right here okay so we have our jsx rules so I'm going to sa my file and here you can see we now getting those rules right here so we have our GSX rules so yeah That was another challenge in this course now

let's talk about expression in jsx so with jsx you can write your expression inside the curly braces and the expression can be a react variable or property or any other valid JavaScript expression jsx will execute the expression and give you the result okay so here you can see I have my app component and now inside this app component I have a paragraph and now inside this paragraph I'm now writing 2 + 2 as it is without providing any curly braces nothing to it so it's going to gives us the result of 2+ 2 as it

is why is that because of re will treat it as a text but now if you wrap that inside the curly braces it's going to give us the result of four and why is that now reactjs will treat it as a valid JavaScript expression so it will execute their EX it's going to gives us the result of the and we are not just limited right 2 + 2 we can also create Some sort of a variable and we can put our values inside there then we can use the inside our UI we can even also

create a function we can also embed that function inside our UI and also the classes as well so now let me just show you all of the in action now let's discuss how we are going to be embedding Dynamic content in our jsx so first of all I'm going to just create my paragraph inside this paragraph I'll just say like 2 + 2 now here is a Question for for you what do you think will be the result of this code so if I save my file I want you to give me the answer and

the result will be 2 + 2 why is that because we are not wrapping this code inside the curly brace but now if I wrap that inside the curly brace we now entered our JavaScript word so if I sell my file now and here you can see now it's going to gives us for right here why is that because now we are running this expression inside the JavaScript so Reactjs compiler will compile this code and it will think like this is a JavaScript code so it will execute this code so if I just write like

2 + 2 is equal to outside from this curly braces now it's going to giv us like 2 + 2 is equal to 4 okay which is amazing so that's the first thing that you have to keep in mind next I'll just create a variable with the name of like my name and I'm going to store my name inside the like husan webd and now underneath This paragraph I'm going to create my H1 right here and now let's suppose if I want to dynamically render my variable name inside this H1 how can I go about

doing there well so if I just write like my name if I save my file I'm now getting my name right here but I want to get this value like hoseen web dev so how can I go about doing that to do that we have to WRA this variable name inside these curly Braes like the curly opening brace and the curly closing brace so if I save my file and now it's going to gives us hosen web dev right here okay so this is how we going to be rendering our variables dynamically inside our jsx

we are not limited to just render our expression and also our variable name we can also provide arrays if you wanted to so I'll just create like paragraph I'll just say like my friends list and now inside this list I'm going to first of all open and close my JavaScript word and now inside there we're going to be Creating our array which will say like Alex we also have John and also W and something like that and Jordan so if I sell my file and here you can see we are now getting like my friend

list we have we have Alex John Wah and also Jordan right here which is amazing now I'm going to create a function and I'm going to execute or embed this function dynamically inside my GSX so I'll just use like multiply it's going to take the perimeter of a and also B and it's going To return like a * B okay and now underneath this paragraph I'm going to create yet another paragraph which will say like 2 * 2 is equals to and now we are going to be entering our JavaScript word and now inside this

JavaScript word we are going to be exit in our function which is a multiply and for the perimeter I'm going to pass 2 comma 2 so if I save my file and what are we getting we are now getting like 2 * 2 it gives us four so if I change that to Like 2 * 10 save my file it's going to give us like uh 2 * 10 will gives us 20 but here I'm writing like 2 * 2 and now it's going to give us 20 so if I just change that to like

uh 2 * 10 and now the label is totally correct like this is going to be the label and this is going to be the actual value which we are now getting from the JavaScript I'm going to undo that and the final thing that I want to show you about the embedding is that we can also embed a Special class into our GSX so I'll just create a special and I'll just write like simple class or something like that now I'm going to create a paragraph I'm going to proide like uh this is uh special

class or something like that and inside this paragraph what I want to do is that I want to create my class name and I'm going to just remove this Cordes from here and I'm going to provide my curly Braes and now inside this curly bra Braes I'm going to copy this simple Class name and I'm going to just place it right here so if I sell my file and now Watch What Happens so if I select this class right here so what are we getting we are now getting our simple class and now this simple

class is coming dynamically from our JavaScript word right here so I can totally change that to like um any anything I want so if I save there and here you can see it's going to give us like anything I want so yeah This is how we going to be creating stuff by using a JavaScript and this is how we going to be embedding there to our jsx by using these curly braces in this challenge you're going to be practicing the dynamic content in reactjs so the first thing that I want you to do is that

I want you to create a file with the name of greetings. jsx and inside there you have to create your functional component with the name of greetings so inside that component You're going to be returning a div that is containing the H1 and that H1 element will dynamically display the greting message like basically you have to create a variable with the name of like Hello World or hello or gracias or something like that and you have to renter that greetings dynamically inside this H1 next create a paragraph element that dynamically display the current dead so

if you can't do this one okay I'm going to show you the Solution but yeah at least give it a shot if you can do it like doesn't really matter okay and yeah here are more instruction if you care about that and next you have to create a component with the name of product info and inside that product info component uh you're going to be returning a div and inside their D use the product object in this case not just a product but the product object that contains the following properties like name will be set

to Laptop price will be set to like 12200 availability will be set to in stock so once you do that then uh render your component to the app.jsx and that's going to be it so give it your best shot if you can do it then come back and watch the solution and I'm going to give you my solution so I'll just create my greed. jsx component I'm going to be using my rafc and the first thing that I want to do is that I want to greet so I'll use like greet which will say hello

And underneath it or you know what let me just show that right here I'm going to be using H1 and I will just render my GRE uh right here so I'm going to save my file let me go ahead and go to my app and register my greet right here and now I'm going to save my file and here you can see we're now getting what hello right here which is looking amazing we also have to render the DAT so I'll just use like that and now let's just use our new dat and now rendered

there right Here so I'm going to just provide like de as a label and here we're going to be rendering our de and now we have to access the get date method on there so now if I save my file now it's going to use like the date is 19 so that was the first portion of this exercise now let's just create another component with the name of uh produ info. jsx jsx there we go we're going to be also creating our functional component and this functional component will have our product so I'll Just write

like product and that's going to be object so we're going to be providing the name as a property and that's going to be set to a laptop we're going to be also providing the price and price will be set to like 12200 and also the availability will be set to in stock availability in stock okay so now we have to s file now that we have to render the name price and availability totally dynamically so how can we go about doing that I'm going to remove This name and now here inside we're going to be

using our H1 let me just provide a label of name and now we are going to be using a product. name right here now if I sa my file oh first of all we have to register this component so I'm going to be using like product info and hit enter save my file it's going to giv us a laptop now I'm going to go in there and the next thing that we have to do is that we also have to render the price and also the availability so I'm Going to basically duplicate that two times

and change the levels so I'll just change that to price and also provide a dollar symbol there and we also have to change the name to the price okay and also we have to remove this name and change their two availabilities so I'll just place this availability right here because I can't spell that case I'll just write like availability here sa my file and now we are getting the name of the laptop also the price and also the Availability which is now set to in stock so now if I change like any of these values

so instead of 1 1200 I'm going to change that to like 15500 now it's going to totally render there dynamically and we can also change there to like uh computer instead and now it's going to giv us a computer okay so yeah that was our challenge about the dynamic content now let's talk about list in reactjs so in reactjs you will render your list with some type of loop the JavaScript map array method is generally the preferred method to use for the list so here you can see we have our component Right Here and Now

inside this component we have our numbers array and now if you want to it over through each number inside this array and render there to the so we are going to be using first of all the curly braces and now inside this curly braces we're going to be getting our numbers list and then we can use our Map method on there and now inside this map method it's going to take a callback function and we're going to be passing a number and also the index and now inside there we going to be using the UL

and Li to render our numbers to the Dom so this is how we're going to be doing all of this so now let me show you the inaction now let's talk about how we can work with list so first of all we have to create a list then we are going to be working with the I'll create a numbers List and inside these numbers I will put like 1 2 3 4 5 and now we have to iterate over through each item inside that list and do something with that so in my case I'm going

to just iterate over through each item inside this list and I'm going to render that to the Dom so to do that first of all we are going to be using like some sort of a main or section or anything like that so that we can work with that so then we are going to be entering into our JavaScript word So that we can use our JavaScript array method like like push pop reduce filter map and all of that methods in this case I'm going to copy the name of this numbers array and now if

I just use dot so here you can see we have all of our JavaScript array method like we have ADD concare copy within entries every fil filter find find index flat flat map and we have a lot of them but in this case I'm only interested in the map method and now here we are going to be passing Our call back function to it so I'll just use like uh number would be fine and now for this call back function here you can see I want you to notice that now in this case we are

providing a parentheses we are not providing a curly braces so I want you to keep that in mind so now we are putting these parentheses and now if I hit enter right here I'm going to just write my ul and now inside this UL I'm going to write my li right here so now inside this lii a Lot of people will think that we are going to be just copying this number and we have to just place it right here and S our file and that's going to be a let me just say that once

again we are now iterating over through each element in inside this array we now rendering that to our browser but now Watch What Happens here you can see we now getting a number number number and we are not getting our numbers right here so to get these numbers we have to once again Enter our JavaScript word so I'm going to have to remove them or you know what we have to just wrap there with these curly braces right here so if I just wrap it with this curly braces save my file and now we are

getting 1 2 3 4 and five but there is still a problem now you might be asking like what's the problem if I go into the console what are we getting we are now getting an error each child in the list should have a unique key prop and why are we getting This error we now getting this error because later in this course we're going to be learning about something called a state and state will allows us to mute it or change these values like let's suppose if I want to remove something from this array

or if I want to add a new element to this array so how can I go about doing that so to do that for that we are going to be using a state we are not there yet so we are not going to be discussing a state right now but you Have to keep in mind that anytime you want to change something inside this array we have to first of all provide a label for that place okay so like let's suppose if I want to either remove or update or something inside this array I'm going

to have to first of all provide some sort of a unique label to it I'll just write like uh 10 for this first one and then 20 for the second one and 30 for the next one and so on and so forth so this is how we going to be Pro Providing a unique label so anytime we remove something from this list or reents will know from where we remove their specific thing so to do that we are not going to be providing our unique things right here for each element inside our array but instead

we are going to be providing there for the parent so we are going to be using a keyword here and that key will always be unique like you have to provide a unique thing for each element inside this array Okay so if you provide like one for this one and also one for this one it's going to give you an error like it's going to still say each child should be unique okay so now I'm going to copy it and I'm going to place it right here and now if I save my file if I

just refresh there and here you can see we now getting 1 2 3 4 5 and we are not getting that error so this is how we going to be itating over through each element inside our list and this is how we are going to be Providing a unique key or a unique identifier for each element inside this list and this is how we going to be rendering there to the Dom now I'm going to just remove all of that stuff from here and I'm going to also remove this number from here and I'm going

to replace that with this huge array and here you can see we have our users info array and now inside this array we have a few objects so we have object one two and a lot of them and inside this object We have a username we have the email and also the location so we have username of H then we have some sort of a test email and we also have a location and then we have the same thing for each object inside this array so now I want to itate over through each element inside

this array and I want to render the username email and location for each user inside this user info so how can I go about doing that well to do that we're going to be once again using our map method so First of all we have to go inside to the JavaScript word and then we have to use our user info and what is the users info users info is that array and now we're going to be iterating over through that array okay so I'll just use like do map method and here I'll just provide a

user as a perimeter and now inside there we're going to be using our ul and as I said that we have to provide a unique value trade so in this case I'll just provide like meth. random and now it's Going to give us like a random number each time we render our content to the browser okay so now inside there I'll just use my lii we have to go inside to the JavaScript word once again and we can use our user and then Dot and here you can see we have our username location and also

the email so if I just select my username save my file and if this is the first time you are working with reactjs this may look a bit uh crazy to You but trust me if you did a bit of practice you will get there so I'm going to save my file and here you can see we now getting our uh usernames right here for each person now I'm going to duplicate this lineup code and instead of providing this username I'm going to hit control and space and now we can select the location I'm going

to duplicate there once again and now I'm going to hit control NW once again and now I'm going to select my email okay so I'm going to save my file now let me go back and this is how our entire code looks like and first of all we have our array inside this array we have our objects and inside these objects we have our username email and also the location and now we are iterating over through each item inside this array and we are now only rendering the username location and also the email and here

you can see we now getting the username location and also the email so we can also change That to the username email and then location and now it's going to gives us the same result right here which is amazing but there is a optional thing that I want to do if you don't care about that you don't have to worry about that if you don't know what a JavaScript destructuring is you can go ahead and watch my JavaScript video about there I have a complete course on JavaScript so if you take that course you would

be fine so now I'm going to destructure This value if you can destructure there you don't have to worry about that now I'm going to remove this users from here and I'm going to provide my cly bra right here and I'm going to destructure the username also the email and I'm going to also destructure the location as well and now I no longer have to use this users again and again I'm going to select that hit contrl d contrl d and I'm going to remove that from here okay so now if I save my file

and now if I Refresh there still we are getting that same result right here but now we no longer have to provide that user dot again and again for all of these properties so yeah this is how we are going to be destructuring the properties from this array welcome to another challenge so in this one you will practice how you can render a list of data so the first thing that I want to do is that create a user list. jsx file and inside there create a user list Component create a users array with the

following object like this object right here each user will have the ID name and also the edge then use a map method to render each user to the Dom okay so that's going to be the first portion of this challenge in the next portion you're going to be creating a product list file and inside that file you're going to be creating a product list component and inside that component you're going to be creating a products Array and inside this array you will have have like these objects which will represent different objects so we have ID

for the object the name price and yeah I guess that's going to be fine and now finally you have registered that inside the app component so give it your best shot if you can do it that's completely okay then come back and watch the solution and I'm going to give you my solution so what I'm going to do is that I'm going to create my user list. Jsx component inside that I'm going to be using my RFC so the first thing that we want to do is they want to create our users array so I'll

just use like cons users and that's going to be set to this array and now inside this array we're going to be creating different object for each object or for each user we're going to be providing the ID and also we're going to be providing the name in this one that's going to be set to lless and I'm going to also provide the age of 25 to there okay so now I'm going to duplicate there a few times and I'm going to change the ID to one to two and also to three I'm going to

also change the name to Bob and this one to Charlie change the edge to 30 and also the edge 222 so that's going to be my users array and now inside this array we have a few users right here now I want to itate over through their users and I want to render them to the Dom so how can I go about doing this so I'll just Remove this users list and inside there we're going to be using our curly Braes so we are now entering the JavaScript word so now we're going to be using

the users which is our array so now inside there we can use our map method so I'll just provide a user and now here for each user we're going to be rendering the div first of all let's just write a div and I'm going to also close this div right here semi file and for this div we're going to be also providing the key And the key which we are going to be setting will be user. ID and this ID is coming from each of the users right here so we have a ID one two

and also the three so that's done now inside this D we're going to be also creating our H1 which will say name okay so for the name we are going to be using like user.name I'm going to also duplicate and change that to Edge okay and also change this label to Edge as well so now I'm going to save my file let's just go ahead and Go to our app and register our user list right here so I'll use like users list save my file and here you can see we now getting each of the

user right here so we have a Lis Bob and also Charlie so that was the first thing now the next thing that we have to do is that we have to create our product list. jsx component inside that we are going to be using our rafc and inside there let's just Define our products here and that's going to be set to array in this array Will have a few object and each object will have the ID the name so I'll just write like iPhone or maybe phone would be fine and I'm going to also put

the price of I don't know just a random arbitrary price like I don't know 600 699 or something like there I'm going to duplicate there a few times and change there to two and also change this one to three and I'm going to also change the name of that to like laptop instead of providing a phone I'm going to change That to headphones and let's just also change the price to to like 12200 and also change the price to1 199 I'm going to save my file and this is how we're going to be defining our

list of object okay so now we have to iterate over through there so if you want to iterate over through there we're going to be using a products. map method and it's going allows us to itate over through each element okay so now inside there we're going to be using our div let's Just close there like so sa my file we going to be also passing our key today and key will be coming from e each of the products we're going to be providing like product. ID which is coming from this product and each will

have different ID so that's why we are now providing there because that's going to be a unique one so that's why we are now providing there so I'm going to just use like uh H1 for the name and I'm going to provide like Paragraph. name and I'm going to also change that two price and change the label two price as well so let's just provide a dollar symbol I'm going to sell my file and now let me go ahead and go to my app component and register my product product uh list right here s my

file and I'm going to comment this line out and here you can see we're now getting different product like we have a phone laptop and also the headphones oh we are providing a dollar symbol twice I'm going to have to remove that in one area so I'll just remove that from here because we are already providing there as a string so I'm going to save my file now now that's looking better so yeah that was our map method practice or challenge now let's talk about the props so Props or properties are argument pass into react

components and props allows us to pass data from the parent component to a child component props are passed to a component via the HTML Attribute so here you can see I have my app component and now inside this app component I'm going to be calling my user component and now let's suppose if I want to pass some sort of a image path from the app component which is a parent component to the user component which is a child component so I'll just write an image or you can also write IMG you can give it any

name that you like and then you have to write a equal to sign and then you have to specify the path okay So we can also specify the name we can also provide the image as a number we can also provide the is mered flag as a Boolean and we can also provide Hobbies as an array so this is how we are going to be passing our data from the parent component to the child component and now to receive that data from the parent component inside the child component so this is how we going to

be doing there first of all we going to be taking a props as a perimeter inside our Component and then we can use that prop and then we can use the do notation to access all of that data so I can use like prop. image so it's going to give us the image and now I can use prop. name prop. age and also prop. ismed and also prop. Hobbies okay so it's going to gives us all of their data from the parent component to the child component so now let me show you all of the

in action now let's talk about the props like how we are going to be passing our Data from the parent component to the child component first of all we're going to have to create our child component component and then inside that child component we're going to be getting our prop okay so I'll just create my user component and inside this user component I'll just return my section right here so if I save there now we have to call or register this component inside this parent component so I'll just use my user component right here and

now we are Going to be passing our data from this parent component to this child component so how can you go about doing there to do that we're going to be using a props and if you are coming from the HTML background you already used props but you didn't even know you are using it you've already used this image tag and now here you can see these are the props for this image tag like we are now providing a source and we are also providing the alternative text for this Image props so you already use

these props but you didn't know that you were using a prop okay so now if you want to past some sort of a data from this parent component to this child component so we're going to be using a prop now we can provide any kind of data that we like so I'll just provide like name and now I'll just write like hosan webd and by the way this prop can be anything and this value can be also anything like you can provide banana right here and you Can provide like orange if you wanted to that

will work exactly the same so I'm going to just undo that to name and now I'm just spacing name from the parent component to this child component so now if you want to access that name inside this child component so I'm going to have to use my props right here so I'll just use like props and now I'm going to log these props to the console so I'll just use my props right here save my file and now Watch What Happens so if I Just refresh there what am I getting I'm getting a name with

the value of hosan web and where is that coming from that is coming from this user prop right here so once again if I change that to like banana and now if I save there I'm now getting that banana right here so if I just refresh there I'm now getting that banana so yeah this is how you're going to be passing your data from your parent component to the child compon component and this is how you're going to be Accessing there so now we have to use that I'm going to just remove that from here

and now inside this section I'll just use my H1 I'm going to provide the label of name and here we have to render that inside our JavaScript so we're going to be using like props do name right here because this is the name of for prop if I save them and I'm now getting the result right here now I'm not only limited to provide the strings I can also provide like anything I want So I'll just use like Edge and Edge will be set to 18 not 18 22 and I'm going to also provide the

Boolean value like is married and that's going to be set to false we cannot see that not right now because we are now rendering there to the UI so we will not see the result of there but later very soon we're going to be also discussing about the Boolean values for the props as well you will see there very soon don't worry about it we can also provide The list if you wanted to so I'll just use like um coding I'm going to also provide like uh reading and also this sleeping so if I say

that so it's going to format that it this way so I'll just remove that from here and now we have to access that right here so I'm going to just put like this is my name and Edge and I'm going to render my prop. Edge right here I'm going to also render my is mared uh Boolean plag so I'll just use like is uh married and here I'm Going to pass my props do is mared and now underneath them we are going to be providing our H4 of hobbies and here we have to just render

or Hobbies right here come on if I can type it today like props do Hobbies so if I sell my file and here you can see we now getting our name age and also is merried but we cannot see the value of there as I said that we will very soon but this is just a Boolean value and we cannot see that not right now and we also have our Hobbies and hobbies are coding reading and sleeping in some situation we would also want to provide our images so I'll just provide yet another prop for

the image and here I'm going to just pass my own image which is coming from my guub repository if you have your own image you can totally proide there and now we also have to render there right here so I'm going to be using my image tag instead of providing these quotes I'm going to remove that from here and I'm Going to just render them dynamically so I'll just use like props do image or IMG and I'm going to also provide some text for this alternative text so I'll just use like props do I guess

name would be fine so if I save there and I now getting this amazing guy but this is super uh this is super huge so I'll just have to provide a width of 200 would be fine s my file and here you can see I'm now getting this card right here so I'm now getting my image the name Edge and Everything right here so this is how we going to be passing our data from this parent component to this child component and this is how we are going to be accessing their data by using the

props and this is how we are going to be rendering their data by using the props now there is one thing that I want to do which is called the prop destructuring but if you don't know what to D structuring is you can either go to my uh JavaScript course and watch what a Destructuring is or you can just read about the you can ask from chgb if you wanted to but you have to learn about the prop destructuring so because I'm going to be using a prop destructuring right now so I'll just remove these

props right here and I'm going to just destructure my name Edge and also is mered flag and also the Hobbies so now I no longer have to use this props again and again so I'm going to select one hitr dtrl dtrl d contr d control D and Remove there and now if I save my file and here you can see everything is still working the way we expect him to work okay so now we are destructuring all of that properties and now we are using that inside our component so yeah that was it about the

props and that was it about the props destructuring time for the prompts exercise so in this exercise you're going to be creating a products. GSX file and inside that you're going to be defining the functional component With the name of person and it will take two props so it's going to take the person name and it's going to also take the the person Edge okay so now inside that person component you're going to be using the edge2 which will display the person name and then you're going to be using a paragraph which will display the

person Edge so that's going to be the first portion of this exercise now in the second portion you're going to be creating a product. GSX file and inside There once again you're going to be defining the functional component with the name of product and now inside this it's going to also take Pro two props so you're going to be providing the the product name and also the product price so you're going to using H2 to display the product name you're going to be using a paragraph to display the product price and finally you have to

just import it to your app component and that's going to be it so give it your Best shot if you can do it that's completely okay then come back and watch the solution and now I'm going to give you my solution so I'll just create like person. jsx component and I'm going to be using my RFC inside there and let me just go ahead and go to my app register my component here so I'll just use like person import there and close there now I want to provide a prompt to this person so how can

I go about doing there I'm Going to provide the name and name you can provide like basically any name that you prefer but in my case I'm going to specify my own name and also I'm going to provide my Edge which will be set to 22 so now that we successfully provided these uh prop right here so the next thing that we have to do is that we have to go ahead and go to this person and we have to use those props so to use them we're going to be using a props and here

first of all we have to use our H2 not H1 but H2 and we're going to be using a pro prop. name cuz we are now only interested in this name right here so that's how we are going to be rendering that name next we also have to create a paragraph which will render The prop. Edge so now if I save my file and here you can see we now getting the name and also the edge right here so that was the first portion of this challenge so the next thing that we have to do

is that we have to create our product. jsx Component I'm going to be using the rafc and once again we have to go to our app and register or product component right here it's going to also take two props so we're going to be providing the name and name will be set to iPhone and I'm going to provide the price of like a lot of price uh I don't know maybe I guess that's going to be fine so now let's just save this file and go into our product and we going to be getting that

props by using this props object and we Have to use our H2 to render the PRS do what I forgot the name and also the price so I'll just render the name and also we have to use our paragraph and which will say props do price okay so now if I save my file and here you can see we are now getting hosan and also 22 as an ede and we're also getting the name of iPhone and the amount of price so that's cool and everything but the next thing that we have to do is

that we have to destructure the name and The edge and we have to use the inside this component so to do that I'm going to remove this props like uh yeah I'm going to just remove that and I'm going to put the name and also the edge we no longer have have to use this props dot again and again so I'm going to select that and hit control D so it's going to select that twice and remove there now if I save my file and once again here you can see the result is exactly the

same and next we have to go into the Product and remove this props from there and we're going to be providing or destructuring the name and also the price okay so now I'm going to select this props once again and hit contrl D and remove the save my file and now we are getting exactly the same thing so yeah this is how we are going to be providing a props this is how we going to be destructuring the and this is how we are going to be using the inside our components now in some situation

we Would want to pass our data from our parent component to our child component by closing this so what do I mean by that let me just zoom in a bit and the first thing that I want to use that I want to create a components folder and I'll provide my card. TSX not TSX but GSX inside there now let me use my RFC s my file and what I'm going to do is that I'm going to call my card component right here but I'm not going to call my component like so I'm going to

close Them manually like that and now inside there what I want to do I want write my H1 which will say like my card and I will also provide a paragraph which will say like this is some content for card one okay so now let me just save my file and now let me go back so here you can see we are now passing this data to our card component by closing there but now the question is how in the we're going to be accessing that data so to access that data data there is something

called The children which allows us to access their data from the parent component to the child component so I'll use like props and here I'll just use like promps do children so if I use that now let me use my npm run Dev just going to start my server let me just write a local host right here and what are we getting we are now getting like my card and also that same paragraph text right here okay so we can also destructure them by just removing these prompts and destructure Our children so now we no

longer have to specify this props do and now we have to save our file and here you can see we are still getting there and yeah I'm going to just duplicate there like a few times so that was for the one and I'm going to just duplicate there like two times so this is going to be my carard two and then card three and yeah we are now getting all of the data from our parent component which is this app component and we are now passing that to The card component and this is how we

are going to be accessing there by using the children now let's talk about the conditional renderings so conditional rendering allows us to dynamically display different UI component or content based on a specific condition this enables us to create more interactive and responsive user experiences so there are a few ways to conditionally render or UI the first way is to just use the ifnl statement and Also we have another ways like using the trary and also the end operator so now let's talk about the first one which is the ifnl statement so here you can see

we have two component like we have the valid password component and we also have the invalid password component now we are going to be creating yet another password component and then we are going to be calling there inside our app component and now inside this app component we are going to be passing the Isid prop to it and that's going to be said to true now we will receive that prop inside the password component and then we're going to be providing our check so if our is valet prop is true we're going to be rendering

the wet password component so if that's not the case we're going to be returning the invalid password component so we can use that by using the ifnl stat and we can also refactor this code to use the JavaScript Turner so to use that here You can see I'm going to comment all of that code out and now I'm going to be using my trary operator so if is valid prop is equal to true we're going to be rendering our valid password component but if that's not the case we're going to be returning the invalid prop

component here is another example I have a card component and now inside this card component I have my groceries and now here I'm going to be checking if groceries. length is greater than zero And then we are going to be displaying this UI but if that is not the case like if you don't have any content inside the groceries list then it's not going to show us anything so without wasting any time now let's get into the coding now let's talk about how we are going to be rendering our UI based on some sort of

condition so to do that I'm going to create three components so the first component I'm going to create will be AA password component which will only Return like H1 valid password I'm going to duplicate that and I'm going to change that to invalid pass password and also the component name to invalid password as well okay so that's going to be my first two component I'm going to also create a component for the password itself and here inside there we're not going to be returning anything I'm going to call this component my password component right here

inside my app component and I'm going to also give It the prop off is valid and that's going to be set to true now inside my password component I'm going to also destructure that prop which is the is wellet prop now inside this password component I'm going to be checking if is valid so in that situation we are going to be returning the valid password component and if that's not the case we're going to be returning the invalid password component right here so now let me just say that once again first of all We are

creating two component like the valid password and also the invalid password and we are also creating a password component which is taking the prop of is valid now that is set to True based on that prop we now checking if that is said to True render this component if there is not set to true then render this component so now in this case the is valid is set to true so it's going to giv us the result of valid password component which is the valid Password and here you can see we now getting the valid

password component why is that because is valid is now set to true so it's going to gives us the valid password component right here but now if I make that is false so now let me just change that to false and now we are getting an invalid password component right here because what is valid prop is set to false so it's not going to render this UI instead it's going to render this UI right here so that was the first Way we can render our components based on some sort of a condition now we can

totally refactor this code to use a trinary operator so I'm going to comment this line out and you know what I'm going to also comment that line out and I'll just return like is valid and if that's the case we're going to be returning the valid come on valid password component and if that's not the case we're going to be returning the invalid uh password component right here So if I save that that's going to work exactly the same so if I change that to true and it's going to give us that valid password component

now I can also refactor there a bit more if I wanted to so I can totally remove this coding I can also remove this return statement and I'm going to also remove this cly braces from here semi file and this is how we are going to be conditionally rendering our UI now let me give you one more example by using the end operator So I'm going to just remove all of that coding from here and now I'm going to create a separate component with the name of card so I'll just give it the name of

card and I'm going to remove that from here here and this is how we going to be creating our component and I'm going to also call this component right here inside my app so I'll just remove that and render my card component right here so if I save there and we are now getting our card right here which is Looking amazing now inside this card component I'm going to provide my items right here so cons items and we will have a few items right here inside this component and now let me just place this item

right here so we have a few items inside this list so what I'm going to do is that I'm going to just remove this card from here and I'm going to just write my H1 card and I'm going to also pass my card Emoji right in here now underneath that I'm going to Conditionally render my UI so I'll just check like items do length so if the items. length is greater than zero and we are going to be rendering our H2 so I'll just use my H2 right here and I'm going to say like you

have um items. length we're going to be checking the length of four items and then items in your card so if I save my file and here you can see it's going to giv us like you have four items inside your card so if I just remove like one of them I'm Going to just remove that sa my file I it's going to give us like you have three items inside your card and now if I completely remove every single thing from this card so now this condition is false like items. length is no longer

greater than zero it is equal to zero so we not going to be getting this result right here so if I sa there and it's going to only gives us the card which is coming from this H1 but it's not going to gives us this result as you can see Right here here so if I just undo that and let me just get there back s my file and now we are getting like you have four items inside your card now underneath there I'm going to just render my items right here so I'll just use

like ul and now inside this UL I'm going to provide my H4 and let's just provide like um products or something like that now underneath this H4 I'm going to go into my JavaScript once again and I'm going to be using items. Map method and here we're going to be passing our specific item and now inside there we're going to be passing Li and which will just say like uh item right here and we're going to be also passing a key to this so for the key I'll just use like key uh m. random and

now if I save my file and here you can see we are now getting our item right here like we have a wireless airbuds power bank new SSD Hur and stuff like that but if I remove every single thing from here semi File we are only getting this products we are not getting our uh item Des because we are not rendering anything right here because our card is totally empty and we are also not getting anything that's because this condition is false so if this condition is false we not going to be getting this UI

time to tackle the conditional rendering challenge so the first thing that I want you to do is that I want you to create a weather. jsx file and inside that file You're going to be creating a functional component with the name of weather and it will take the prob of temperature and then I want you to use the if else if and else statement to conditionally render different messages based on the temperature value which we're going to be specifying in a few seconds so if the temperature is below 15 display its cold outside and if

the temperature is between 15 and 25 then display it nice outside and if the temperature is above 25 then display like it's hot outside so that's going to be the first portion of this challenge now in the second challenge that we have to do is that we have to create a user status component and inside that component it will also take two Boolean prop the first one will be uh logged in and the second one will be is admin so use the end operator to display the message for admin and also for the normal user

as well so if the log in and also there is admin both of These props are true which means like the person is admin so then I want you to display like welcome admin so if that's not the case and if only the log in is true then display like welcome users so that's going to be the second portion now for the final one you have to create a greetings. jsx file inside that file you're going to be creating a functional component with the name of greetings and it will also take uh what do we

call it the prop of time of the Day you you can provide like morning or afternoon or evening or something like that then I want you to use the trary operator so if the time of the day is equal to morning then display good morning so if the time of the day is equal to afternoon then display good afternoon and finally you have to just import all of that component inside the app.jsx and check out the result off there so give it to your best sh if you can do it that's completely okay then Come

back and watch the solution and now I'm going to give you my solution so what I'm going to do is that I'm going to Define my weather. jsx component and we're going to be using our rafc inside there we can Define like let temp and temp will be equals to 26 for the first one okay and now here the first thing that we have to do or you know what we don't even have to provide all of that let's just remove that from here we're going to be using our if else if an else Statement

so let's just provide for the condition like temp so if the temperature is less than 15 so in this situation we going to be rendering uh what do we call it it's cold outside okay and if that's not the case so what we have to do we have to check for the temperature if temperature is greater than or equal to 15 and temperature come on temperature is less than or equal to 25 so in this situation we're going to be rendering this H1 one more time and It will say like uh it's nice outside okay

and finally if that is not equal to anything so we are going to be just returning but you know what we also have to specify the lsf one more time and for this condition we're going to be providing like if temperature is greater than 25 so in this situation we going to be returning our H1 one more time and we will say like it's hot outside okay so now I'm going to sve my file and then we have to register this component inside Our f. TSX file so I'll just use like weather TSX or jsx

to be precise so I'm going to save my file and check this out so it's going to give us like it's hot outside but now if I change there to like I don't know maybe 15 and now if I save my file so here you can see it's going to use like it's nice outside and now if I change that to like I don't know maybe uh three would be fine so if I change that to three so it's going to giv this like it's cold outside so that Was the first portion of this Challenge

and now the next thing that we have to do is that we have to create our user uh user status. jsx component so I'm going to be using my RFC inside there and also I'm going to go into my app and let's just comment this line out and I'm going to render my user status component and it's going to take two props so it's going to take like uh logged in and I'm going to set there to true and then is admin and I'm going to also set that to False I'm going to save my

file and now let me go ahead and use those props inside this component so we are going to be just taking the props and let's just provide our check so I'm going to remove that from here and we're going to be checking there if prop. uh logged in l o GED logged in and props do is admin so in that situation we're going to be returning like H1 which will say like welcome admin because uh if the user already logged in and if the user is Also in admin so we're going to be showing like

welcome admin so if that's not the case so we are going to be only showing like uh H1 which will say like welcome normal or welcome user okay so I'm going to save this file right right now and we already registered there right here so here you can see it's going to give us like welcome user and why is that because logged in is set to true but is admin is set to false so that's why we Are now getting like L welcome user but if I change that instead of a false I'm going to

change that to true and save my file now it's going to use this welcome admin right here so that was the second portion of our Challenge and now for the third and final one we are going to be creating our greeting. jsx component this is use our RFC e sa my file and registered there right here inside my app so I'll just use like greetings and close there it's going to also take the Prop of time of day and I'm going to set there to morning okay and let's just go ahead and go to our

component inside this component we're going to be receiving our props once again and instead of providing this return statement we're going to be using aary operator so I'm going to be using like if prop. time of day is triple equals to morning so in this situation we are going to be rendering over H1 this is right our H1 God damn what the hell am I Doing and which will say like good morning and if that's not the come on if that's not the case so we are going to be rendering H1 one more time and

which will say like uh good afternoon afternoon and I'm going to save my file and we also have to return there so let's just check this out here you can see it's going to gives us good morning then because we are now providing the time of the day is morning but if I change that to like uh afternoon come on Afternoon and sell my file so it's going to give us like good afternoon so let me go there and we can also destructure our prps so we can just uh destructure like time of day copy

there and we no longer have to provide our prop dot so let's just save there and it's going to still gives us that same result right here so yeah that was our challenge about uh God damn it that was our challenge about the conditional rendering in reactjs there are a lot of Ways to style our component but in this specific section we are going to be only learning about the basics but later in this course we are going to be also learning about the popular libraries like redex and dii tell CSS shars and UI and

stuff like that but for now we are going to be only learning about the basics of styling so what I'm going to do is I'm going to just create my section and inside this section I'm going to just write my H1 inline style And now if I save my file and here you can see we are now getting our inline style right here which is looking amazing so if I want to change the color of that or if I want to provide some sort of a styling for that so I can just use a style

attribute and equal to and then double curly brace not a single but double curly braces you have to keep that in mind first of all you're going to be opening your curly braces you're going to be opening double curly braces And then you're going to be closing double curly braces and now inside there you can write like all of your CSS styling right here which youve already learned in my HML and CSS courses so I'll just write like color and I'm going to just write like um black uh not black but uh red so if

I save there and here you can see we are now getting a red color right here which is looking amazing and now I'm going to also provide a background color to it but There are a few things that you have to keep in mind in CSS we write our background color like this first of all we write a background and then Dash and then color but this is not a CSS you not currently working with the CSS you are working with the reactjs so you have to keep in mind that you're going to be writing

your CSS in one line like a background color but this is not accurate here you can see we are also getting this suggestion like background Color as a camel case so if I click on that anytime we have some sort of a property which have two name like background and also the color so we are not going to be providing spaces we are not going to be providing a dashes and we are also not allowed to write that in lower case or in totally upper case we have to write that as a one word and

also we have write as a camel case just like this and I'm going to just a value for this I'll just use like teal and I'm Going to also provide a bit of padding to it so padding will be two r or something like that and yeah I'm going to save my file and here you can see we now getting more styling right here I'm going to just change the color of there to like white and now there looking better so this is how we are going to be providing our styling in line so first

of all you have for a style attribute and then double curly braces is opening and double curly braces is closing and You also have to keep this rule in mind so that was the first way now we can also extract all of that uh styling from here and we can put there some sort of object and then we can reference that object inside the style so I'm going to go to the top and here I'll just create my variable with the name of like Styles and I'm going to just place my styling right here but

first of all we have to wrap the inside this curly braces like as a object and then we have to place Our styling there I'm going to save my file and I'm going to copy the variable name from there and we have to just place it right here but in this case we are not going to be writing double curly braces we are going to be only working with the single curly braces so that's our JavaScript word right here now inside this JavaScript word we are now rendering or styling totally dynamically so if I save

my file and here you can see if I just refresh there that's going To still work exactly the same so I can just change the color of that to like uh Crimson or something like that and here you can see it's going to still work right here so that the second way to style our component now let me show you one more way so I'm going to just remove all of that content from here and also this H1 so if I save my file and I'm going to go in there I'm going to remove this

component folder from here and I'm going to create my file which will be Index. CSS file okay and now inside this index. CSS file we're going to be placing all of our CSS like body will be set to this color and also we are providing a display flex and all of that kind of stuff which you've already learned in my CSS course so here you can see we're now providing all of our styling now I'm going to go into my app.jsx component and inside that now if I want to use all of that styling the

first thing that we have to do is that We have to import that in this component so I'm going to be just using like import and then we have to write a string and then we have to go one level up above we have to just write index. CSS so if I save my file and now if I hold control and click on there it's going to brings us to this index.css file right here so now inside this section I'll just use my H1 and I'll just write like separate file for styling or something like

this so if I Save there and now we are getting this result right here so now all of our styling are now successfully applied to this component so I can totally comment this line out and now it's not going to gives us any styling and I can totally uncomment there and here you can see we now getting all for styling so yeah this is how we are going to be styling our component by using a inline and separate object and also index. CSS file and now let's talk about the icons like how we Are going

to be iring icons in our project to do that there are a lot of icons libraries for reactjs but this one is a bit popular one and this is a reactjs icon Library so first of all we have to install this library inside our project then we will be able to use that so now I'm going to go into my react icons and here you can see we have like a lot a lot of icons right here so to install that we going to be using this command so I'm going to just copy there And

now I'm going to open my terminal right here and just close every single thing I'm going to just place my command right here which is npm install react icons D- s so if you don't want to provide this D- sell you don't even have to do that okay so I'm going to just hit enter right here so it's going to install that inside this project and here you can see that's now successfully installed and as I mentioned in the beginning of this video that if we Install any third party libraries or packages that's going to

be available inside this node module so I can totally search for the react uh icons so you know if I just search for the icons and here you can see we have have our react icons right here so if I open that here you can see we have like a lot of icons so this is how we are going to be adding that to our project and now let's talk about how we are going to be using the inside word project so to use that the First thing that we have to do is that we

have to import that specific icon which you want to use so I'll just go ahead and search for a specific icon so I'm going to go to the home there are a lot of icons I'm going to search for the cart and here you can see it's going to give us a lot of cards right here let's suppose if I want to use this card I'm going to click on there now I can totally copy there and here you can see this is how we are going to be importing There and now we can totally

use that by using this icon so I'm going to copy that from here now let me just place it right in here save my file and now if I go there refresh there we have to run our terminal so npm run Dev now if I refresh there so here you can see we're now getting our icon now I can search for something else like I don't know computer or something it's going to give us this computer I can totally copy There I'm going to go to the top and I'm going to just place a right

here I'm going to copy that from there now let me just place the here and close the my file check it out and we are now getting our computer right here so yeah that was it about the styling and also about the icons Welcome to The Styling challenge so in this challenge I want you to create a style card. jsx file and inside there you're going to be defining the function functional component with the Name of style card and use the inline style here the keyword is use the inline style to style your component so

by using the inline style you have to change the background color to light blue also provide a pairing of 20 pixel provide a border radius of 10 pixel and also change the color of the text to like dark blue or something like that okay so that's going to be the first portion of this Challenge and now for the second portion we going to be Creating our profile card and now inside this profile card component we're going to be defining our Style by using the object and here the keyword is the object okay so inside that

object we're going to be defining our style like the background color will be set to light gray the pairing will be set to 15 pixel board radius will be set to 8 pixel and text color will be set to totally black okay so apply those styling by using um come on inline CSS and also by using the Object okay and then finally for the final portion you're going to be installing the Rea icons by using this command and then you have to render this fa beer icon that's going to be it you can also provide

the size today like 30 pixel and you can also change the color and yeah finally you have to render the inside your app component or register the inside your app component so you can see the result so now let me just go ahead and create my component right here So I'll start by defining the style card. jsx component this is use our RFC go back and go to my app component and inside there we going to be registering string word style card like so and inside the style card the first thing that I want to

do is that I want to show all of these styling so set the background color to uh light blue and also provide a padding radius and change the color of there so I'm going to remove this stuff from here and provide A style and use my double curly braces inside there once we have to change the background color so I'll use like background color and for the background color we're going to be providing like light blue and also we have to provide the padding and padding will be set to 20 pixel we're going to be

all come on we are going to be also providing the Border radius not border right but r a d i u s border radius will be set to 10 pixel and we're going to be also Providing the color and the color will be set to dark blue okay so I'm going to save my file I'm going to also provide my H1 which will say like um style or yeah style card they're going to be also providing a paragraph which will say Lam 20 or maybe LM 30 would be fine so if I save my file

and and now let me check this out so we are now getting this style component by using the inline style so that's looking amazing I'm going to also go ahead and go to my Components folder one more time and we're going to be defining our profile card. jsx inside there I'm going to use my RFC go to my app component and comment this line or you know I'm not going to comment this line out I'm going to be using a profile card and render there right right here inside this component now for this one we

are going to be defining these styles to it first we have to change the background color to light gray we also have to provide a Pairing border radius and and also text color will be set to totally black okay so what I'm going to do is that I'm going to Define all of that styling by using my style object so I'll use like Styles and inside there we're going to be providing our background color let's just provide our light gray inside there we're going to be also providing a pairing which will be set to 15

pixel and the B order radius r a d i u s order radius will be set to add pixel and Let's just provide a color and that's the default color which will set which will be set to Black and now we have to use the styling inside work card so how can I go about doing that well we just have to write a style and one curly braces not twice but only one curly braces and we have to render our sty inside there I'm going to remove this profile card and provide my H1 which will

say hello word and now underneath there let's just put our paragraph which Will say like LM of 30 so I'm going to save my file and now we are getting a gray card and also this card so both of these stuff are now totally done the next thing that we have to do is that we have to install the react icons so I'm going to stop my server and and I'm going to be using npmi or you can also use npm install if you wanted to but I'm going to use like npmi and then react

icons now they successfully installed so I'm going to run my server once again And go into my components folder and Define another component which will say like icon uh component. jsx so I'll use like rafc inside there and here the first thing that we have to do is that we have to import the fa component or fa beer component so we are going to be grabbing them from the react icons and we are going to be grabbing them from the fa so I'll just use like fa a beer and I'm going to render there right

here inside this component so I'll use like Fa beer and just render that here save my file and now we are getting oh we are not getting there let me just refresh there we should be getting there oh we are not oh that's because we did not render our component here so I'm going to use like icon component icon component there we go and save my file and now we are getting this beer icon right here as you can see now let me just duplicate this line of code and I'm going to also change the

size of that Like 30 sa my file so it's going to gives us like a bit bigger beer now in this case I can also change the color of there to provide a color attributed so I'll just use like gold and save my file and here you can see we now getting a gold beer so yeah that was it about for The Styling challenge now let's talk about how we are going to be adding events to our elements so to do that first of all we are going to be creating our button component and now

inside this Button component we going to be only returning just a simple button which will just say click and now I'm going to render them inside my app so I'll just use my button and save my file and here you can see we are now getting work click button right here which is not doing anything for now so now if you want to attach a event handler for this button the first thing that we have to do is that we have to write the on and here you can see we Have a lot of events

like on aboard on a board capture on animation in and there are a lot of uh events right here on blood and stuff like that so what I'm going to do is that I'm going to just write my own click event handler and I'm going to just pass some sort of a function right here so now inside this function I can just log to the console like uh you clicked me and now I'm going to save my file and now if I open my console right here now I'm going to Click on this button and

it's going to give us like you clicked me right here why is that because now we are attaching this event handler and we are just logging to the console like you clicked me we can also extract this logic to a separate function so I'm going to extract that from here and now we can just to create a separate function like cons handle click and now we can just loog to the console something like math.round and then math. random and Let's just divide them by 10 or multiply there by by 10 so if I save them

I'm going to copy there and we are going to be passing the reference of that function to this on click event handler so if I save there now if I refresh there and anytime I click on this button it's going to give us a random number between 1 through 10 okay so yeah this is now working that was the first example now let me give you one more example so to do that we're going to be Creating yet another component or you know what let me just remove that component from here and I'm going to

create my copy component and now inside there we going to be just returning only the paragraph and which will just say come on let's just return a paragraph which will just have like LM of 20 and I'm going to save this file word here I'm going to attach my own copy event handler right here and we are going to be also creating this function like copy Handler in a second so I'm going to copy there and now let me just create this function inside this copy component so I'll just use like const copy Handler and

now inside they I'll just loog to the console like stop stealing my content so if I save there and now if I just refresh there we are getting some sort of error that's because instead of that button I'm going to have to provide the copy right here I'll just remove that and change that to that copy Function copy component save my file and now if I just refresh there and here you can see we now getting our text but if I just select some portion of this text right click on there and copy there it's

going to give us that warning like stop stealing my content which is looking amazing so this is how we going to be working with the on copy event handler now let me give you one more final example and I guess that's going to be here so I'll just remove that component From here I'm going to also remove this copy from here and now let me give you the move so not movie but just move component and now inside them we are going to be returning once again or paragraph and that paragraph will have the content

of like LM 20 and now I'm going to be attaching my own Mouse move okay so when somebody Mouse over or how over this text so we are going to be firing some sort of event so to do that I'm going to just provide my move uh Handler function which we're going to be creating in a second now let me just create that function right here so we can either create it by using this function Reser keyword or we can create there by using the arrow function so it's not going to take any parameter and

we are going to be alerting and I'll just say like uh Mouse move event fired and now underneath that we can just loog to the console like Mouse move event fire there same thing so if I save my File and now if I just refresh there but first of all you're going to also have to register there inside our app so let's just register there right here so if I save my file and Watch What Happens so whenever I H my mouse over to there first of all I'm getting like Mouse move event fired if

I click on okay we are also getting in the console like Mouse move event fired so this is how we going to be attaching different kind of events to or specific elements in this section I'm going to be introducing two topics at once first we're going to be learning about the stand and then we're going to be jumping into the hook so now let's talk about what is a state and why you should even care about that so state is a way to store and manage the data that can change over time and affect how

the component renders we defin state by using something called the use St hog which allow you to set the initial value and provide a way to update that state So that was just a quick definition of what a state is but now here is a keyword the use stand hook so now what is a hook and why you should even care about them so hooks are a new edition in react 16.8 they let you use state in other reactjs features without writing a class based components so back in the day not that long ago we

were using a class-based component like everywhere nowadays we only use functional based component and nobody use a class based Component so hooks were introduced in the react gs16 version and they allow you to manage your state inside the functional component so that's the only theory that you have to keep in mind about the hooks and there are a lot of hugs which we are going to be covering throughout this series but now in this section we are going to be learning about what a use St is and how it works so now let's talk about

what is a UST so UST hook allows us to track the state in The functional component and that generally refer to the data or the properties that need to be tracking in our application so that's the only thing that you have to keep in mind about the use St so how the syntax will look like so here you can see first of all we are going to be using our use St hog and then we're going to be using the array is structuring and first of all we have a data which we are going to

be providing inside our Us St and then we Have a function which allows us to change that data inside our Us St okay so you know what that's a lot of theory now let me just write some code and then you'll get to know what I'm talking about now let's talk about the stat and the use St hook so to do that first of all we have to import the use St in our project so this is how we're going to be importing there and now let's use the user hook inside our project so I'm

going to be using like cons counter and That's going to be equals to the US St and the initial value will be set to zero okay and now I'm going to just log this counter to the console so if I sve my file and here you can see we are now getting two things the first thing that we are getting is the initial value which we specified inside this Us St word here and the second thing that we are getting is a function which will allows us to change this initial value okay so if I

specify like my own name Like hus webd and I'm going to save there and now if I just refresh there what am I getting I'm getting hose webd as my name which is the initial value for my state and I'm also getting this function which will allow me to change this value okay so you have to keep that in mind so the best and the convention way to use this us is to destructured there by using the array destructuring why is there because this is not an object this is array so in this Situation we're

going to be using the array destructuring to destructure our initial value and also this function so we are going to be destructuring this initial value to use this somewhere and we are going to be also destructuring this function to change the value of this St so what I'm going to do is that I'm going to just remove this counter and I'm going to be using the AR structuring syntax right here so now here you can pass anything that you want But my case I'm going to just give it the name of like count and then

we have to provide the comma and we're going to be also destructuring that function as well so to destructure there the convention is to use the set and then provide the name for your initial value so now in this case we specify this count so we are going to be passing our count right here so if you were like passing some sort of a apple maybe so we going to be passing like set Apple so This is just a convention if you want to follow that you totally can but you don't have to this should

be an apple there we go okay so now I'm working with my account so I'm going to just space my account right here and then the convention I'm going to follow will be the set count there we go in the initial value I'm going to specify only zero right here inside there and now if I say there next thing that I want to do is that I want to render what I currently Have inside this T so I'm going to just write my H1 and here I'll just pass my count variable which we are now

destructuring from our used so if if I sell there and as you can see right here we are now getting the zero which is looking amazing so if I change that to like I don't know maybe 100 and sell there and now we are getting this 100 right here so that's amazing now the next thing that we have to do is that we have to somehow change the value of this Initial state so initially we specify the value of zero today but now you want to change that to like I don't know maybe 1 or

100 or something like that so to do that we're going to be creating our button so I'll just create my button right here and I'm going to just space like plus right here or I can just say plus but you know what that plus symbol would be fine and I'm going to be attaching the event handler on there which will be the on click so when Somebody clicks on that button so we're going to be firing this function which is the increment function so I'm going to copy the name of this function and now let

me just create this function right here so I'll just use like cons increment and this function will only take this set count and remember this set count is a function which allows us to change the value of our counter or our initials stad okay so I'm going to just execute this function Right Here And Now how we are going to be changing the value of our function so if I just write like count plus one and now if I sve my file and here you can see we now getting our button and now if I

click on there anytime I click on there it's going to increment my counter by one so let me just refresh there 1 2 3 and so on and so forth okay so now I can also duplicate this line of code and I'm going to just change that to minus and I'm going to also create a function for The decrement so DEC me and I'm going to copy their function name I'm going to duplicate this line of code I'm going to place the name of my function and instead of a plus I'm going to change there

to minus so if I save there now we have our decrement Button as well so if I click on there anytime I click on there it's going to decrement my counter by one now I know a lot of people will ask me like husan can we change the value of this count without using this Set count so you know what let me just do that I'm going to remove that from here and now let me just use my count plus one instead of providing that uh set count and stuff so I'll just use like count

minus one and now I'm going to save my file so if I save my file and refresh there now if I click on there here you can see behind the scene this counter is updating the UI is not updating why is there because the set count method allows us to change the Value of our St and anytime we change the value of our state our component will rerender I want you to keep that in mind anytime we change the value of our function or not a function but a state by using the set count method

or any set method it's going to render our application but now in this case it will not render our application it will still change the value of our state but it will not rerender our application okay so this is not allowed this is a big no No in reactjs you cannot change the state of your application without using the set method like you have to use there so I'm going to copy there and now let me just wrap there like so okay so I'm going to also use my set counter right here here and let's

just close there like this way so I'm going to save my file and once again if I click on this button so it's going to increment there and this one will decrement or decrement there now let me give you one More example of how we are going to be updating our array of content so once again we are going to be importing our use St and then we are going to be creating our St so I'll just use like use St in the initial value I'm going to specify array right here so for the first

one we're going to be providing Alex and I'm going to also provide a John as my friends and I'm going to store that inside my variabl and I'm going to be also using my ARR Restructuring so I'll just use like friends and also set friends right here this is just a convention if you want to follow there you are more than welcome to follow there but if you don't want to follow there you don't have to now inside this section I'm going to be using my friends now let's just iterate over through each friend and

we're going to be providing our friend right here or just F would be fine and now inside there we're going to be using our lii Let me just use my li right here and we are going to be rendering or friend okay so for the key I'm going to past like math. random and that's going to be fine so if I save my file and here you can see we are now getting Alex and also John which is looking amazing so now the next thing that I want to do is that I want to add

a new element or add a new friend to this list so how can I go about doing that to do them I'm going to just create a button right here and now I'll just give it the name of like add new friend or something friend would be fine come on f r e n d there we go and I'm going to attaching the event handler which will be on click add one friend would be fine so I'm going to copy there and now let me just add that friend by using this function so I'll just

use my add one friend and here we are going to be creating our Arrow function and now in this case to mutate this array or to change something inside this array we're Going to be using our set friend so I'm going to just call this function Right Here and Now inside there first of all we are going to be getting like all of the friends which we currently have we don't want to change the existing data inside this array but we want to add yet another new friend so this is how we are going to

be cloning the existing data inside our state or or array and then we're going to be adding a new one so I'll just P like my own self like huzen Uh webd and now if I save my file and here you can see we now getting like add new friend button and now if I click on that so it's going to also add there right here so this is how we going to be updating or mutating or array now let me show you how we are going to be removing a specific person from this list

so to do there I'm going to just create here another button which will say like uh remove one friend or something and I'm going to also paste the own click event Handler on there which will say like remove friend okay so I'm going to copy there and let me create that function right here so I'm going to be creating my remove function and let's just use our set friend one more time then now here we're going to be using our friends and now we going to be using a filter method because we want to filter

out that specific person and then we want to just remove that so I'll just P like my callback function right here so if that Specific friend is not equals to John we only want to remove that John so we don't want to remove anything else we only want to remove this John so if I sell my file and now here you can see we have like Alex and also John so if I add there now it's going to remove this John from this list so if I click on there and here you can see it's

going to remove that John so this is the second way now let me show you the final way which is how we going to be updating a Specific print so yeah let me me just show you there I'm going to create a button and which will say like um come on update one friend and I'm going to also attach my event handler on there which will say like update one or update one friend would be fine I'm going to copy there and let's just create that function right here we're going to be still using our

set friends and now here we have to specify our friends. map because we want to iterate over through All of the friends that we currently have and now we just have to use like if friend is equals to Alex so in that case we just want to change his name to like Alex Smith or something like that but if that's not the case we only want to provide that specific name okay so here we are using a trary operator like if our friend is equal to Alex we just want to change his name to Alex

Smith but if that's not the case we just want to return all of the overall friends okay So now I'm going to sve my file and here you can see we have like Alex and we also have like husb so if I just refresh there add my own self and now I want you to notice this so if I click on update one friend so it's going to change the name of this Alex to Alex Smith so this is how we going to be using a UST state with array of content now that was about

the number we also learned about how we going to be updating the array but now let's talk about how we are going to be Updating the object so I'll just use like import and then use that I'm going to import it right here and now let me just use like cons movie or just movie would be fine and then set movie okay so we're going to be using our used not transition God damn it used St and here we're going to be specifying our object and for the object we're going to be specifying like the

title of the movie which will be one of my favorite movie Equalizer three and then we're going to Be also providing a ratings for there so ratings will be set to seven I'm going to sve my file so this is how we are going to be initially providing our content forward State and now let me render that right here to the UI so I'll just use like H1 and here we're going to be using like movie. tile and then we going to be also using paragraph of movie. rating so if I save there so here

you can see we now getting the movie title and we are also getting the Ratings so I'll just change there to ratings there we go and change this one to the title now that's looking better so now the next thing that I want to do is I want to create a button which will update the rating of this movie so I'll just write like change rating or my own click EV Handler which will say handle click I'm going to copy there and here we are going to be creating that function right here cons handle click

and now inside this function we are Going to be updating only the ratings nothing else but only the ratings so to do that first of all we're going to be making a copy of our St so to make a copy of our St so we can use like copy movie and now here inside there we can use dot dot dot and movie like we want to take the title and also the ratings so this is how we are going to be making a copy of our movie then we can specify the comma in what thing

you want to change so I'll just write like readings And then we want to change there to five so this is how we going to be making a copy of our movie and this is how we can change a specific thing inside that movie or inside that object okay and now we are going to be using our set movie which is the function which allows us to change this St and I'm going to specify my copy movie right here if i s my file and here you can see if I click on this button so

it's going to change the ratings to five right here which is Amazing but this is the longer way of doing things but we can totally refactor this code to use a short hand so I'm going to just comment this line out and I'm going to just cut that from here and instead we're going to be using the object I'm going to use dot dot dot movie and then comma ratings and I'm going to just specify five right here so this is just a shorter way of writing all of that stuff so I'm going to just

refresh there and click on the change Ratings so it's going to also change the ratings to five and let's just remove that from here and now that's looking better we can also remove these C braces we don't need that that's looking cool and yeah that's looking better so that was how we are going to be using the US St with object but in some situation we would have like array of objects so how can you go about doing that we're going to be using our used St first of all and inside there we're going to

be passing The array of objects so inside each object we're going to be placing the ID which will be set to one and title will be like I don't know some sort of a movie name like Spider-Man and I'm going to also specify the ratings to there and rating will be set to three I'm going to duplicate there and change the rating to six and change the movie title to Superman and also the ID will be set to two so now in this case we have array of objects right here and now if you want

To modify that how can you go about doing that so to do that first of all we have to store that in some sort of a state so I'll just use like movies and then set movies and that's going to be equals to this use function right here so if I save that the next thing that we have to do is that we have to it R over through each element inside this array and we have to render that and I'm going to just go into my section and inside this section I'll use my movies.

map and I'm going to only pass my M for the movie like for each of the movie and now inside there we're going to be using our Li let me just use that manually and I'm going to pass my movie. tile or not movie but just m. tile would be fine and I'm going to also provide the key and that will be like math. random and provide my random key to it now underneath that we're going to be creating a button which will say like change name and we're going to be also Attaching the event

handler on there which will say like handle click I'm going to copy that from here and let's just create that function right here so I'll just use like cons handle click and in this case once again we're going to be using the set movies and it's going to allows us to change our state and here we're going to be passing our movies and I'm going to be using the map method to to itate over through each movie and let's just use our M for each Of the movie so if m. ID is equals to one

so in this situation we just want to change the movie first of all we're going to be making a copy of all of the movies and then we only want to change the title uh to John Wick four or maybe five would be fine and now outside from there what am I doing okay so now outside from there we are going be closing over tary operator and just provide ID here so now let me just explain this code first of all we are Now iterating over through each movie and we are now storing there in

m and now we are checking if the movie ID is equals to one we are only checking the first movie so if that's the case so what do we have to do we have to make a copy of our entire State movies and we only want to change the name of the first movie to John week chapter 5 okay so if that's not the case we just want to return all of the movies that's exactly what we are doing right now if I Save my file and let me just refresh there and if I click

on the change name it's going to change there to John Wick chapter 5 so yeah this is how we are going to be iterating over through the entire list array of St and now this is how we are going to be mutating that St or changing that St or updating that St so that's cool and everything but now in some situation we would want to share word St into other component so how can you go about doing that first of all We're going to be importing what used State and then I'm going to just create

some sort of a state like count and also the set count and that's going to be equals to the U State and the initial value will be set to zero now I'm going to go ahead and create a few components so I'll just create my uh components folder and we have our component 1. jsx and we also have our component 2. jsx now inside this component one I'm going to be using my rafc save this file and Inside the component two we're going to be using our r fc2 and now I'm going to go into

my app component and we have to import our component come on component one and we also have to import our component two as well right here I'm going to save this file and now inside this section I'm going to call my component one first of all and let's just execute there and I'm going to also call my component come on component component two and I'm going to Also execute the now I want to share this state into this component so how can I go about doing that well to do that we are going to be

using our prop system so we can just say like count and count will be that count or that initial value of the St so we are now passing or St from the app component from the parent component to the component one and also to the component two as a children component okay so I'm going to also pass my on click on click Handler As a function name and here we're going to be also passing our function inside this so I can just say like set count and here I'm going to be just passing like count

+ one I'm going to save this file and now I can totally copy all of that stuff from here and now I can totally paste it right here so I'm going to save my file let me just say that once again we are defining our state inside the app component and we are now sharing there with the component one and Also the component two by using this prop system okay so now inside component one we can now totally destructure that and we can totally use our state from the app component inside the component one and

to do that I'm going to first of all destructure my component so I'll just use like count and also the own uh click Handler right here which is a function name and now inside this component one div I'm going to just remove there and just write my paragraph And say like count I'm going to render my count inside there I'm going to also provide my button and which will just say like increment and I'm going to pass my own click event handler on there and then I'm going to pass my handle click right here I'm

going to copy there go to the top and here we have to just use our handle click when somebody use it we're going to be firing this function okay so let's just execute this sem my file and let me Just show you so here you can see we are now getting this from our paragraph and now if I click on this so it's going to just update my account right here from the component B from the child component we now now updating the parent component so that was the first way now I'm going to go

into my second component or a component two or you know what I'm going to just copy this stuff from here I'm going to place it here and inside this component one I'll proide my paragraph And render my count inside there let's just proide our button and increment here as well and let's just use our own click event hander handle click event copy there go to the top and use my const hand handle click and we're going to be passing our on handle or on Handler okay so I'm going to save my file and now here

you can see we have two components and they are updating each other so if I click on there and it's going to update there right here so Why is there now our state is available inside the parent component and we are now updating there from the child component so this is the result that we are getting so if I click on the increment it's going to increment there right here so this is how we are going to be sharing St by using the prop I know we learn a lot about the use St but still

there is one final thing I want to talk about which is SC how we going to be passing a arrow function or just a Function as the initial value forward us here so what I'm going to do is that I'm going to Define my component spoolder and I'm going to create a component with the name of example 1. TSX not a TSX but just a GSX and I'm going to be using RFC and yeah I'm going to render this component right here like example examp example one and I'm going to just render there sa my

file check this out and here you can see we are now getting our example one right here let's just remove The St in CSS and now let's start working on this so the first thing that I want to do is that I want to create my state so I'll just create a state with the name of count and also set count it's going to be equals to this use stand and for the initial value now we are going to be passing a callback function okay just like there so this callback function will only runs when

our component first render so like any logic I put inside this callback Function will only run on the first render so what I'm going to do is that I'm going to specify my initial account all use like initial count and it's going to be equals to some sort of a 10 value and I'm going to also return this initial count from this aror function so now let me just save that next we have to render there so I'm going to just remove that from this UI and I'm going to write my H1 which will say

count and here we have to render our count next we Also have to create a button which allows us to increment our counter Okay so I'll use like uh on click and here we're going to be passing this increment function so I'll just use like cons increment and inside this function we're going to be only using the set count and proide my previous count value today and next come on what the hell am I doing next we have to just use our previous count and plus only one to there now I'm going to save my

file and as soon as I Save my file and refresh there and here you can see it's going to gives us 10 value as a initial value for this count right here so now I can totally increment there and I can do whatever I want to do with that so yeah that was the example number one now let me give you one more example which will be example 2. TSX jsx what the hell am I saying let's use word RFC inside there also I want to render there inside my app component so I'm going to

comment This line out and I'm going to render my component to okay component okay component two or example two not a component so I'll use like example two close sem my file check this out so here you can see we are now getting our example two so now the first thing that I want to do is that I want to create my random number I'll use like random number and also set random number is going to be equals to this use St once again and for the initial value We're going to be passing this callback

function right here okay so now inside this callback function I'll just use like meth. Flor and here I'm going to also proide like meth random and then times 100 would be fine so now if i s my file oh it should be just equal to sign okay so it's going to gives us a random function whenever this component first render so I'll just remove that from here and I'm going to write my H1 which will say like random number and then I'm Going to render my random number okay like so so now if I save

my file and here you can see it's going to gives a zero let me just refresh this it's going to give a 7 to2 refresh there once again so anytime I refresh this going to gives us a random number now underneath this H1 I'll create a button which will say like generate um new number or generate a new random number or something like that and when somebody clicks on this button we're going to be firing this Function which is a generate new random number now let me copy that and I'll create this function right here

it's going to be an arrow function and I'll just P like new number and that new number will be equals to met. BL and also we have to specify met. random times 100 one more time like 100 like so and finally we're going to be set there two or random stat so here we have to specify our new number and now if i s my file and whenever I refresh my page it's Going to gives us a different random number so I can also click on there so now it's going to also gives us a

different random number so that's also done now let me give you the final example like example 3. jsx I'll use my RFC inside there like rafc save my file go into my app and render this component right now like example and close there so the first thing that I want to do is I want to Define my state so I'll just proide like name and Set name and it's going to be equals to the use state so let's just use our use St and for the initial value we're going to be placing an arrow function

so first of all we have to save some sort of a name to our local storage so I'll just use like variable with the name of like saved number or saved name to be precise and that's going to be equals to the local storage and here we want to use like get item and we're going to be getting our item from our local storage If we have there but if we don't have there let's just use like save name if we have the save name so we just want to pass there and we want to

get that from our local uh storage and if that's not the case we just want to set the initial value to empty string now let me go to the UI and change that to my H1 or yeah H1 would be fine and here I'll just say like your name and here we have to render our name like this name right here so now need this H1 I'll create Input field with the type of text and I'm going to also provide the value and the value will be coming from the state which is a name and

when somebody tried to change something inside this we're going to be fting this handle change function and now I'm going to also provide the placeholder which will say like enter your name okay and finally let me create a button which will say like clear name and whenever somebody clicks on this button we're going to be Fing this handle clear function which we're going to be creating in a original imag just create first of all we are going to be creating this handle change function then we're going to creating that clear function so what I'm going

to do is that I'm going to F this handle change function is going to take an event and here inside this event we're going to be setting the name to event. target. value now I'm going to also use the use effect so whenever our component First renders so in this situation we just want to set our item which will be a name and we want to provide our json. string if inside there and provide a new name to there okay so I'll also provide the dependency array and for the dependency array we're going to be

providing a name and now finally let me also create this handle clear function and then inside this clear function we're not going to be doing anything crazy but I'll just write like set name And the initial value will be empty string okay so here you can see we have our name and stuff so now let me open my console go into my application oh my God this is super white I don't know why but yeah let me just right click on that and force that to a dark God damn it this is super white so

let me just go into local storage and here whatever I type inside there it's going to be putting it right here but that value will be also stored inside my local storage so whenever I Refresh there and here you can see that value will still be here so now whenever I click on this clear name so it's going to clear this out so the whole point of this section was that we can also specify a arrow function or just a function to our user welcome to the user challenge so the first thing that I want

you to do is that I want you to create the counter. jsx file and inside that file you're going to have to create the counter uh component and use the UST to Manage a simple counter state so first you'll have to initialize the state by providing a zero value to that then create a button to increment your counter by one display the value of that counter so that we can see the result so this is going to be the first portion of this challenge so in the next portion you're going to have to create the

to-do list. jsx file and then you have to create a component with the name of to-do list then use the UST St once Again to manage a simple state or array of of to-dos inside the state initialize the state with empty array then create a form to add a new to-do item in that list then display the value of that to-do list and that's going to be the second portion so now for the third one you're going to have to create your uh profile. jsx file and inside that you're going to be defining the profile

component once again you're going to be using the use stad to manage the object With the user profile information so initialize the St with object containing the name and Edge and provide the input field to update the name and also the edge then finally display the updated information inside that component so now for the fourth step you're going to have to use the US once again and create a shopping list. jsx file also the shopping list component and use the US St to manage the array of object where each object represent a shopping item For

example like the name and also the quantity so initialize the state with the empty array and also create a form to add a new item to that array and then finally display the list of shopping items okay so yeah this is how you're going to be importing the for your app component so you guys can see everything so give it your best shot if you can do it that's completely okay then come back and watch the solution now I'm going to give you my solution let me create my Counter. jsx file and I'm going to

be using the rafc so my file go to my app and registered there right here this is right where counter hit enter and just close this so I'm going to save my file I'm going to also run my server which I'm already doing so let me just do that once again and now we are getting our counter which which is looking amazing so the first thing that I want to do is that I want to make a St so I'll just use like UST St and as soon as I do this So it's going to

import that from the reactjs for the initial value I'm going to specify zero today and I'm going to be using the ARR D structuring to destructure the count and also the set count out of there now we are going to be using the count to show the initial value so I'll just use like uh paragraph and I will say like you clicked and let me just render my count right here count times there we go and also I'm going to provide a button which will allows us to Change our state so I'll just provide the

name of like increment as a label and whenever somebody clicks on that button we're going to be firing this function which will allows us to change our data so we're going to be using the set count and now we are going to be providing the updated value so I'll just write like count plus one now let me just save my file and if I click on this increments it's going to just increment my counter by one okay so that's cool But we can also decrement our counter so let me just change the to decrement and

instead of providing a plus I'm going to change there to minus so now I'm going to save my file and now if I click on this decrement so it's going to decrement my counter by one so yeah that was the first portion of this uh exercise now we're going to be creating a to-do list so I'll just create a component or a file with the name of to-do list Too list. jsx I'll use my rafc inside there say my file go to my app and register there right here so I'll use like to-do list come

on like so and cl close my file and here you can see we're now getting our to-do list which is looking amazing so the first thing that we want to do is that you want to initialize our St so I'll use like use St one more time uh use St there we go and for the initial value we're going to be specifying empty array inside there Now let me just destructure my to-dos and also set to-dos out of them and now underneath we're going to be also handling over form so for form input we're going

to be creating a state for the like input value and then set input come on input value as well and that's going to be equals to the US and the initial value will be set to empty string now let's get into the UI so I'm going to remove that from here and I'm going to create my H1 which will just Select to do list and now underneath this H1 we're going to be creating a form and we're not going to be providing any action to there so I'll just use like on submit when somebody submit

there we're going to be firing a function which is called the handle submit which we going to be creating in a few seconds and now inside this form you going to be defining our input field for the value I'll specify the input value that state which we've already Defined right here so I'm going to copy there and now let me just place there here like so and I'm going to also provide the placeholder which will say like add a new too I'm going to save my file right now and we are not getting anything this

because we did not register this component anywhere so I'm going to go ahead and registered there oh we already did there but why aren't we getting anything oh you know what uh We've provided this function but we did Not create this function so that's why we are now getting that error underneath this input field we're going to be defining our button which will say like add to do and the type will be set to submit so it's going to allows us to submit our form so now underneath this form we we would also need to

render our to-dos so for that I'm going to be using a ul and for this UL we're going to be defining our to-dos and now let me just iterate over through all of that to-do So I'll just write like too and also the index right here okay and and inside then we're going to be defining our lii and here we are going to be just providing our to-do so that we can see what to-do we will also provide the key and that's going to be set to that index which we are grabbing we cannot see

anything this because like we have to create this function so I'm going to copy there and let me just create this function right here so I'll just use Like cons handle submit it's going to take the event object I'm going to also provide my curly braces and let me just use like e do prevent come on p r v n prevent default to prevent the default behavior of there and we are going to be also first of all checking the input value and let's just provide our trim method on there like if you have empty

spaces so just totally remove them now we are going to be getting our set to do like this one and we're going to be Changing the value of this so how are we going to be doing that to do that the first thing that we have to do is that we have to make the copy of the existing item which are available inside this toio so how are we going to be doing there you guess that we're going to be using dot dot dot and toos next we have to provide our updated value so for

that updated value we're going to be using like input value and now underneath that we're going to be also emptying out or Input field so I'll just use like set input value and set that to empty string now that's done so if I save my file the next thing that we have to do is that we also have to bind another function right here to this input field so when somebody change this I'll use like on change we're going to be firing this function which will be a handle chain so I'm going to copy that

and now let me find my function right here so let's just create our handle change it's going To take the event object one more time let's just provide our equal to sign there and now we are going to be using like set input field not them we're going to be defining our set input value and it's going to take that event. target. value like anything we specify inside this input fi so it's going to take that it's going to show up right here to the input value so now I'm going to save my file and

now let me write like I don't know like walk the come on Oh my God walk the dog let me click on the addir Todo so it's going to add there right here can also write like uh I don't know and click on this so it's going to add that right here to this to-do list so yeah that was another example of this to-do list next we have to create our profile so I'll just create a component with the name of profile. jsx I'll be using the rafc inside there and the first thing that I

want to do is that I want to initialize My profile or my state with a value of profile so I'll use Like Us St and the initial value will be set to this object and I'm going to specify the name name will be set to totally empty string we're going to be also providing a edge and Edge will be also set to totally empty string so what I'm going to do is that I'm going to destructure a few things out of there so we're going to be destructuring the profile and also the set profile from

this use St so that's Done next we have to go ahead and remove this profile from there and I'm going to be using H2 and I'll select user profile and now underneath this H2 we're going to be creating our div and inside the div let's just Prov a label and we're not going to be providing any HTML for values to this I'll just remove that from here and I'm going to only say name and now inside this label even we are going to be defining our input field okay so the type will be set to

text We're going to be also providing the name and name will be set to name and let's just put the value and value will be coming from the profile. name okay so which is this profile do name which will be coming from there and when somebody types something inside there going to be firing this function which will say like handle change CH there we go so we're going to be creating this function in a few seconds but you know what I'm going to first of all take care of the rest of These labels and stuff

okay so underneath this div let me Define another div we're going to be once again providing a label we're not going to be providing an HTML 4 value today and inside this label the first thing that I want to do is that I want to provide my Edge and let's just provide our input field right here so the type will be set to number I'm going to provide the name of Edge and I'm going to also provide the value and value will be set to Profile. Edge which will be coming from my state and when

somebody change there once again we are going to be firing this handle change function in a few second which we're going to be creating okay so now underneath this Dev we're going to be using our H3 and I'll use like profile information and now underneath this profile information so I'll just uh like render all of that values which I'm going to providing in my input field so I'll just write like Name and I'm going to use like profile. name and also I'm going to creating a edge and here we're going to be rendering The profile.

Edge so now let me just save there and finally let me just create this handle change function and that's going to be it so what I'm going to do is that I'm going to write like handle change it's going to take the event object and inside this function we're going to be destructuring like uh the name and also the value out Of this event. target value t r g there we go and we're going to be also using the set profile and here we have to specify the previous one so we are going to be

using like previous profile and it's going to take that event it's going to take this call back function so first of all we have to spread out the pre previous profile and now we have to specify the new one so we're going to be taking the name and we have to provide the new value to there okay so I'm going To save my file and that's going to be it for this entire profile let me just show you this so I'm going to refresh then oh first of all we have to register that into app

component so I'm going to comment this to-do list and I'm going to register my profile component there we go save my file and now we are getting our profile component so first if I specify some sort of a name like husan and it's going to add there right here for this name right here uh I don't know Like 20 or 22 or something like that so it's going to automatically add there right here uh for this profile information so that was another one and now let's talk about the final one which will be the shopping

list so I'm going to comment this line out and let me just go ahead and create my shopping list so come on shopping list. jsx I'm going to be using my rafc so my file go to the fjs and use our shoing list and render there save my file once again and the First thing that I want to do is that I want to initialize all of my St so I'll just uh create like items and also set items and that's going to be equals to UST St and the initial value will be set to

empty now we're going to be also creating one for the name so set name it's going to be equals to the US St and the initial value will be set to empty string we're going to be also creating one for the quantity and also set quantity there we go it's going to be Equals to the US St and we're going to be providing the empty string inside there now let me just go ahead and go to the UI and remove this shopping list from there I'm going to write my H1 which will say like shopping

list and underneath this H1 let is create our form we're not going to be providing any action today but we are going to be providing the on submit Handler and when somebody submit that then we are going to be fing in this function okay so Let's just create our input field inside there the type will be text and we're going to be also providing a placeholder which will say like item name or something like that and we're going to be also specifying the value and value will be coming from the name so I'm going to

copy them and let's just provide there right here and when somebody try to change there we're going to be firing this function so I'll just use like set name and I'm going to write Like event. target. value so I'm going to save my file and that's going to be for this first input field and now we can totally duplicate this so I'm going to select there and duplicate them here we have to change the type to number we also have to change that to quantity so quantity there we go we also have to specify the

value like quantity and also the set quantity there we go okay so that's going to be it now underneath that we Are going to be also creating a button which will say like uh add item and here we have to specify the type which will be set to submit in lowercase submit there we go now that's cool and everything but the final thing that we have to do is that we have to show our shopping list this is how we are going to be creating our shopping list we're going to be providing a name of

our item we're going to be also providing a quantity and when somebody clicks on This BN so it's going to add there but we also have to show that quantity and also the name so to show them we're going to be using our Ur and inside this UL we're going to be using like items. map and we have that items which we have declared up above we have all of that items right here it's going to take the item and it's going to also take the index as well and inside there we're going to be

providing our Ali and it's going to take the key and key will be Coming from the index and for the value we're going to be using like item. name and then we are going to be also providing the quantity q n t y and quantity will be item. quantity there we go or you know what let me just change there to semicolon so I'm going to send my file next we have to create our handle submit function which we've specified right here so let me just go ahead and create there I'm going to be using

like handle submit it's going to Take the event object and inside there we're going to be preventing the default Behavior first of all and now inside there let's just check if we don't have the name or if we don't have the quantity so in that situation we are going to be only returning like nothing basically so we just want to stop our execution there if that's not the case and if you only have like either the name or the quantity so in that situation we're going to be creating our New object which will select new

item itm there we go and we're going to be creating a new item object it's going to take the name we're going to be also providing the quantity but in this case we can also just write like quantity just like so we can even remove one of them if you wanted to but now in this situation we are going to be converting our quantity to a number so to convert that to number we're going to be using the parse integer and here we have to Specify our quantity so now let me just save there and

this is how we are going to be creating our new item and we have to Now set there to this set item so I'll just go ahead and use my set items this is provide our previous items and here we're going to be using first of all let's just clone our previous items and come on what the hell am I doing let me just clone this previous item and also provide a comma there and use my new item right here okay and also we are Going to be clearing the input field so we're going to

be using like uh set name and also the set quantity LSS provide empty string for all of them now that's only done I'm going to save my file check this out so we have our shopping list so I can just write like um computer and that's going to be like 3,000 or something like that I can't even speak no more God damn it let me click on this add item now it's going to give us the name of the item and it's Going to also giv us the quantity and quantity is that much so I

can just write like basically anything I want and I can add that and here you can see I'm now getting that same result so yeah that was a huge challenge but I hope that was worth it because Us St is the most important thing in reactjs and you have to make sure that you master the US St so that was a huge challenge about the US and you even build like three or four challenges or maybe a projects to Be precise so I can totally uncommon all of them and and now let me show you

all of them here you can see we can now increment and also decrement we can also add a new to do we can also just provide a name and also the edge if you wanted to and shopping list un name it okay so we would be totally getting our value which is now added so now let's talk about the react portal so what do I mean by react portal react portal is a feature that allow you to render a child Component into a Dom node that exist outside the hierarchy of the parent component so this

can be useful for scenarios like whenever we are creating a model or tool tips or drop down menus where you want to break out of the usual parent child structure and render in a different part of the Dom okay so you can think about the portal is just like the Rick and Morty portal okaye so which will allow you to go to anywhere inside your Dome so that was just a basic Theory and now let's get into the coding and then you'll get to know what I'm talking about so to learn about the react portal

first of all we're going to be creating a components folder and inside this folder we are going to be defining our copy input. jsx file and inside this file we're going to be creating where RFC s my file go to my app and render this component right here is I'll use like copy input and close there so the first thing that I want to Do is then want to just make a simple component so I'll just create a state with the name of like input value come on input value it's going to also take a

set input value so we're going to be setting that to the used St and for the initial value we're going to be providing only empty string and we're going to be also creating yet another set for the copied and then set copied like so it's going to be equals to the use once again and for the initial value We're going to be specifying fals to there okay that's also done now let's get into the UI and I'm going to remove this copy input text from here and I'm going to create my input field inside there

God this keyboard is super fast I'll provide the value and the value will be coming from the input value which we are creating up above and whenever somebody try to change something inside this we going to be firing this function and providing or Set input field right here and the initial value will be set to event. target. value and yeah I guess that's going to be fine but we're going to be also creating a button which will say like copy it or copy would be fine okay so whenever somebody clicks on this button we're going

to be finding this copy or handle copy function so now let me copy there and create this function right here so I'll use like cons handle copy create this eror function right Here so we're going to be using like nav Gator n AIG g t o r this is a JavaScript function so we have to use like clipboard property on there and you want to write text to there okay so I'll use like uh write text and here we have to specify our input value and also we want to use the then method because we're

going to be delaying there okay so let's just use our then method and inside there we're going to be providing a set C and provide true to them you also have To use our set timeout and here here we have to specify our callback function and for this callback function we're going to be providing our set copied which will be set to false you want to just set that to false and also you want to provide 2 seconds of delay today so now let me just save my file and check this out so here you

can see we have our input field I can type whatever I want to type inside there I write like hosan web dev and now if I click on this copy And if I go into the new tab and place it right here so here you can see we're now getting our hosen web dev right here which is cool now the next thing that we want to do is that we want to create our popup content. jsx component and I'm going to be using my RFC inside there so let me just past this copied as a

prop to this function so here I'm going to be rendering my popup component let just close there and we're going to be passing this copied as this copied prop Right here now let me go ahead and grab there by using the destructuring so now let me just save my file and now I'm going to change that to a second so I'll just write a section right here what the hell was that this keyboard is super fast so now let me just change that to a section God s ctio and there we go okay and I'm

going to also change this level and here we have to check if he copied the content so which means you want to show this UI so I'll use like uh div Inside this div I'll write like copied to clipboard like so okay so now let me just save my file but I also want to provide a bit of styling to this I'll use use like style and here for the style we going to be providing a position and Position will be set to Absolute and we also want to provide a bottom and bottom will be

set to only three Rs now let me go ahead and check this out so now let me just refresh there and if I type anything inside There and I click on this copy button it's going to show us this copy to the clipboard and then it will disappear let me try that once again if I click on this copied so it's going to show us this copied content and then it will make it disappear so yeah that's cool and everything but now let me show you the Dom tree if I open my console I mean

like the element let me go to the body let me also go to the root so here you can see all of our content let me just Zoom in a bit all of our content is now available inside this route and this root is coming from this index.html file so here you can see we have a div and inside this div we have the ID of root we now selecting there and we are now rendering all of our content to that root right here but let's suppose if we don't want to render our content to

this div so let's suppose if you want to render our cont to the body or somewhere else so how what we are going to be Doing there so to do that you guessed it we going to be using the react portal so first of all we going to be importing the react portal so I'll use like import and then create portal and we are going to be getting that from the react Dom not from the react J but from the react D okay so first of all you have to import this create portal and now

to use them this is how we going be using there so now let me just call this create portal right here and here the first Thing that we have to do is that we have to specify what content you want to render trying to render the H1 or any kind of content that you want to render that's going to be the first parameter next you also have to specify where you want to render there so I'll just use like something else but first of all I'm going to go ahead and go into my index. HTML

file and here I'm going to just render like some sort of a DA which will have like pop up Uh content or something like this so here you can see I defined my own D with the idea of popup content I'm going to copy that from here and now let me go ahead and provide a comma there once again so I'll just provide a comma here and now we have to select that D so I'll use like document do query selector not selector all but just a query selector and inside this query selector we want

to access that div which we just created right here so first of all we have to Provide this pound symbol and then we have to specify this popup content so now if I save my file and refresh there and what are we getting we are now getting this popup content now if I expand that in inside there we have our section so inside there here you can see we have our section and this section is currently empty because we did not copy your content so here you can see if I just type something and as

soon as I click on there it's going to render my Content right here and then it will make it disappear so you know what a bit more delay to this so let's just and change that to 5 Second would be fine so now if I i s my file and now let me just P like hen web dev and now if I click on this copy and here you can see if I expand there and yeah we are now getting this D let me try there once again expand there yep we are now getting this

copied to the clipboard so yeah this how we're going to be rendering our content to Another part of our Dom by using the react portal so we've already seen keys in the list section but I want to explain there a bit more so what I'm going to do is that I'm going to create my components folder and inside this folder I'm going to create a switcher jsx and I'll just write my RFC inside there and register there right here inside my app component uh switcher there we go now let me go ahead and go to

my component and first I'm going to Create a start with the name of s sw4 switcher and then set s SW it's going to be equals to this uh us start once again and we're going to be providing the initial value of false today okay so what I'm going to do I'm going to render my dark and light mode so I'll just put there like so I'll use like s SW if you have there in that situation we want to provide one UI but if you don't have there want to provide another UI so I'll

just write like a spin and this Spen Will say dark okay but if that's not the case we want to provide yet another with the text of light to it okay so now let me just save there so that's also done we also have to provide a br for a breaking and now underneath that we're going to be creating an input field with a type of text and now underneath this input you want to create a button and which will say like switch S W T C and when somebody clicks on this button we want

to change that so I'll use like set Switch or a set s SW to be precise let's just put our s and not s you guys already know all of this stuff so let me just explain the once again here you can see we're now rendering this content ear dynamically then we have a br then we also have a input field and also a button which allows us to switch between the dark and light mode okay so this is how it will look like so if I click on this it's going to make it dark

if I click on the once again so it's going to Make it light let's suppose if I type something inside this input field and if I click on this switch and here you can see that input field will stay the same even though we changed it to dark but this input field still have this value so to make the totally unique so for that we can proide a key so what I'm going to do is that here I'm going to pass a key and this key will take our ST which is s SW so if

that is the case we are going to be providing a dark but if That's not the case we are going to be providing a l now we are providing a unique value to this specific input field so if you have some sort of a value so if our input field is set to true it's going to make it dark but if that's not the case we're going to be getting a light this is now set to dark let me change that to light and if I type something inside this input field and click on the

switch here you can see that value is now successfully gone we Are not storing there in some sort of a local storage or in some sort of a database so that's why qu is now successfully gone case so now if I type something inside this input field once again so it's going to remove all of their value from this input field okay so this is how we are going to be making or specific element or a component totally unique by providing a key to there if I change that to something else like uh I don't

know like placeholder or Something like that let me just write a placeholder okay and now if I save my file and here you can see it's now set to light if I type something inside there and switch there that value will still be there why because we're using a placeholder and not a key so if I convert there to key and if I type something inside this input field so it will remove there from here because this input field is no longer that old one okay so this is how we are going to be Making

it unique now let's talk about the use effect hook so use effect hook allow you to perform a side effects in your component so some example of what side effects are like fishing the data directly updating the Dum and also logging something to the consoer also considered to be a side effect inside your component so anytime you want to do some sort of a side effect inside your component like for instance if you want to fit some sort of data inside your Component so in that situation we're going to be using the use effect hook

so how this syntax will look like here you can see we are now first of all using our use effect hook and now inside this use hook we are now providing our callback function to it and then inside that callback function you can do anything you want to do but there are a few things that I want you to keep in mind when working with the use effect the first thing is here you can see we Are not providing any array that array is something called the dependency array array which I'm going to be explaining

in a few seconds so anytime we don't specify the dependency array so in that situation that call back function will call on every single render I want you to keep that in mind whenever we don't specify the dependency array which means like that call back function which we now providing inside our use effect will be fired on every single render next Let's talk about the use effect with conditional so you cannot prep your hook inside the conditional statement if you want to use the conditional statement you are going to have to use the inside the

use effect hook okay so also keep that in mind now the final thing that I want you to keep in mind is that any time we specify the empty dependency array forward use effect it will only fire that function which is available inside our use effect hook on the Initial render like when our component first renders it will call their function not when our component changes but if we create some sort of a state and we provided the value of that state so anytime that state changes that component will reender and that callback function will

fire okay so I know that was a lot of theories now let's get into the coding and then you'll get to know what I'm talking about now let's talk about yet another hook which is called The use effect hook so we set up the use effect hook to run some code when our component render for the first time and whenever it reenders and also when some sort of a data changes inside our component so how are we going to be making a setup for that the first thing that we have to do is that we

have to grab our use St and also they use use effect okay so we're going to be importing our use effect from the react JS and now we have to use that but Before we use that I'm going to also make a set of for my value so I'll just use like value and also set value that's going to be equals to the use St and we're going to be providing the initial value of zero inside there now I'm going to be using my user F hook and now inside this user F hook it takes

two arguments the first argument it takes is a callback function and the second argument it takes is a dependency array which is something I'm going to be Showing you in a few seconds but now let's talk about this callback function now inside this callback function you can write any kind of logic that you like you can even use your document. title you can log something to a console you can fish some sort of a data you can do anything you want to do inside this uh callback function okay so what I'm going to do is

that I'm going to just use my console.log and I'm going to just write like call use effect right here And I'm going to also use my document.title and that's going to be equals to increment and I'll just provide the value which I've already set up inside my state right here okay so I'll just call there now the next thing that I want to do is that I'm going to just remove this F From Here and Now inside there I'll just use my H2 and I'm going to also render my value inside there and also I'm

going to just create a button to increment my Counter so I'll just use like click me and I'm going to also provide the on click man hander to it and let's just pass our call back function inside this I'll just use like set value and here we're going to be passing like value + one which is just incrementing there so here you can see I want you to only focus on this use effect right here now inside this use effect we are not providing our dependency array we are just creating our use effect or we

are Just calling our use effect and we are just passing our call back function to there okay so now if I save the changes and if I refresh there here you can see we now getting this result which is like called use effect twice and why are we getting there twice this because here you can see we are using uh this stck mode so if I just remove the strict mode from here save my file and now if I refresh there I'm only getting this message once not twice so that's also Something if you want

to keep in mind you can totally keep that in mind so yeah so here you can see now anytime I change something inside my component that call back function will fire every single time okay so here you can see if I click on this button and it's going to giv us that message once again if I click on there once again and here you can see my title is changing and also I'm getting this result right here inside my console so why is that That's because we are not providing any dependency array right here so

when we are not providing any dependency array to our use effect it will run this code every single time whenever our component rerender so I want you to keep that in mind but now I'm going to also provide my empty dependency array right here so if I just use like comma and I'm going to also provide my empty dependency array and now if I save my file and now let me just refresh there here you can See we are getting our call use effect on the first render but now if I click on this button

we are not getting our result right here and here you can see the title it is also not incrementing and we are also not getting any more results why is that as I said that once we specify this empty dependency array we didn't specify nothing inside there like this dependency array is totally empty so in that situation this callback function will only fire once once our Compound renders this call back function will fire but not again and again but now in this situation I'm going to also copy this value and I'm going to also place

it right here so if I save my file and now let me just refresh there and here you can see we have our callback function called once again and now if I click on this click me button we are getting there now I know a lot of people will ask me like Huzan what's the point of providing this value and we can also Just remove the ins can also gives us that same result right here like we are getting this uh result right here inside the console and also our title is also incrementing so like

if I click on there here you can see both of them are working exactly the same thing like don't they now now if we specify this value right here and anytime where component changes because of this state this call back function will fire but if we have some sort of other state and That state is also rendering or component this code will not fire so now let me just give you the example of that I feel like I'm confusing you so you know what let me just say that once again now that we specify the

value of this state and anytime that state changes and our component rerenders because of this state this callback function will fire but if we have some sort of other state and our component rendered or reender because of that Other state this callback function will not fire so now let me give you example of there so I'll just use like const and then something and then set something and that's going to be equals do this use Effect one more time and we're going to be providing the initial value of zero today so I'm going to duplicate

this line of code and I'm going to also write like uh increment by something okay and now instead of providing the set value I'm going to change that to Like set something and now if I say my file and here you can see if I just refreshed it and I want you to keep in mind here you can see it's going to gives us that value for the first render and now if I click on the click me it will render my component because of this St right here we are now providing this value right

here but now if I click on this increment by something nothing is happening right here and why is there because here you can see we are only Providing this value which is a state value and whenever our component changes because of this value so then this callback function will fire okay and whenever our component changes because of something else this callback function will not fire so if I also copy it and if I just write a comma here and I'm going to also provide this something right here my file and now let me just refresh

there if I click on this button it's going to fire if I click on this Button it's going to also fire okay so yeah keep that in mind and now the final thing that I want to show you is that the conditional statement so I'm going to just remove that from here and now if I just use like um if value is greater than zero I want to wrap this entire hook inside that conditional statement so if I save my file and Watch What Happens so here you can see we are getting warui but now

if I click on the click me button we are getting our error Right here and that's a huge error you know I'm going to go to the top react has detected a change in the order of the hook called by app this will Le to a bug and errors if not fixed for more information go to this link okay so we are not allowed to wrap or hook inside the conditional rendering if you want to use some sort of a condition we have to use that inside the use effect so if I just put that

inside this use effect I'm going to also put that inside this us Effect and now if I save my file and now if I just refreshed it and now I can click on there and everything will work totally the same so yeah that was just the basics of use effect I'm going to remove all of that stuff and now let me show you how we going to be fetching a data by using our use effect so I'll just save my file now let's get into the data fetching so to fetch your data the first thing

that we have to do is that we have to create some sort of a state Where we're going to be ping our data so I'll just use like uh data and then set data and we're going going to be using our use come on use St once again in the initial value I'm going to specify empty array right here okay now underneath that I'm going to be using my use Effect one more time and now inside this use effect I'm going to just pass my callback function and now here I'm going to P my empty

dependency array right here this empty dependency array just Simply means that this callback function will run only once okay and now inside there we're going to be using our asynchronous function so I'll just create my asynchronous function and I'm going to give it the name of like get data you can give any name that you like I'm not going to be providing any perimeter today and I'll just use like a word and we are going to be fetching our data from this resource if I go to this Json placeholder typei code and here you Can

see this is a website of there you can learn more about there if you wanted to but the one we are interested in but is by getting this data so I'll just copy there or you know what I'm going to just go into the to-dos so I'll just use that right here and I'm going to provide my to-dos and hit enter and here you can see it's going to give us a lot of to word here so we have like ID you know let me just zoom in a bit so we have our ID we

have the title and also the Completed flag for all of these data and by the way this is array so that's why we set up what used as our array right here I'm going to copy this link and I'm going to go into my file right here and we're going to be placing that inside our fetch okay so I'll just place it right here and I'm going to also store there some sort of variable like cons res or response would be fine and now underneath there I'll just convert there to the Json so it's going

to give us Like response I'm going to change that to the Json and store that in the data variable okay so now I can log the data and I can do a lot of things with that data but you know I'm going to just put a conditional statement like if we have the data and the data. length like if you have some sort of a data so in this situation we are going to be taking our state which is set data and we are going to be using that right here and now let me just

run them we're going to be Taking that data as a return value and we are going to be putting the inside our set data okay now that we successfully created our function but now we have to call it right here inside there so if I just use like get data and I'm going to just execute there and this is how we are going to be fetching our data by using the use effect our data fetching logic is now successfully done so I'm going to collapse that right here now that we successfully get the data But

the next thing that we have to do is that we have to render that data to the Dom so I'm going to be using like ul and inside this UL I'm going to use my data because this is the state where all of our data is located so we're going to be using there and we already know that there is come on let me just go into the to-do that is array and inside this array we have a lot of like objects right here so we're going to be iterating over through there and to Iterate

over through there we are going to be using the map method and I'm going to just P like item or to do would be fine okay so now inside each of these to do we're going to be using our Li and now I'll just render like um come on all render like too too. tile and I guess that's going to be fine I can also provide the idea of like math. random or I can use like uh too. ID which is this ID hopefully it will gives us so we have our ID right here so

we can also use That if I sve my file and here you can see we are now getting all of the too's ID so now let me just refresh there and everything is working the way we expect him to work so we are now getting the ID but we can also get the body okay we don't have the body so if I go into let me just go back yeah I'm going to go to the post and now inside this post we have our body so I'm going to copy there I'm going to go in

there and here I'll just change there two posts or yeah post Would be fine so if I save there now I can successfully get the body as well so if I just duplicate that and change that to the body and we are getting an error so we have to wrap in some sort of a section I'm going to cut that from here and also place it here sem my file and now if I go there refresh there God damn it I'm not getting any body each charge should be a unique got cut that from here

put there for the section you don't need there right here so I'll just Remove the okay sem my file and refresh there we're only getting the title but I guess we're not getting the B so if I just write like B and dash dash yeah we are getting this B right here so yeah this is how we going to be getting the title and this is how we going to be getting the body so this is how we are going to be using the use effect to fetch the data and also we learn a lot

about the use effect welcome to the use effect channel so in this one I want you To create the use effect component then use the use effect to log message to the console whenever the component first mounts for example when it runs for the first time then in the second portion you're going to be using the use Effect one more time create first of all the counter effect component then use the use effect to update the document time whenever the component value changes like first you have to initialize the count to zero value by using

the US St Then render B that increments the account and use the use effect to update the document title title whenever the component changes and finally you're going to be using the use effect to fetch the data so first of all you have to create a component with the name of like fish data effect and then inside that you're going to be using the use effect to fish your data from this endpoint like from this API which is a Json placeholder typei code.com and Forpost yeah give it your best shot if you can do it

then come back and watch the solution and I'm going to give you my solution so first of all create a component with the name of like basic effect. jsx I'm going to be using my RFC inside there let's just go ahead and go to my app and register my component right in here so I'll use like basic effect and close this so if I save my file and here you can see we now getting Our basic component or basic effect rather now the first thing that I want to do is that I want to grab

my use effect from the reactjs and I'm I'm going to be passing a call back function today and inside there let's just use our conso log which will say like basic component mounted right here we're going to be also providing an empty dependency array and watch what happens whenever the component first renders so I'll just write like H1 and check the console Console to see the message so we're going to be checking the console right now so let me just go ahead and go to the console let's just refresh there and we are getting a

basic component mounted for the first time and why is that that's because of this empty dependency array so that was the challenge number one and let's just remove there I'm going to create another component which will be a counter effect. jsx and let's just use our rafc Inside there and register my component right here which will say counter effect and I'm going to place that right here and inside this component the first thing that I want to do is that I want to create my count and also set count is going to be equals to

the use come on use stand and the initial value will be set to zero now I'm going to be using the use Effect one more time for the side effect so now inside them we're going to be also passing a count right Here like whenever our component changes because of this St so watch what will happen so I'll just use like document. title and that's going to be equals to this template literal and let's just provide our count and the count value from or state so I'll just use like dollar sign and then and then

discount and now for this I I'm going to remove that from here and I'll just write like count here and render my count to dynamically now we going to be also Creating a button which will say like increment and here whenever somebody clicks on this button we're going to be firing this function which will be the set count and here we have to specify count + one I'm going to save my file right now and Watch What Happens so here you can see I want you to notice this area right here this title so whenever

I click on this increment it's going to change the counter to it and it's going to also change this count title right Here to add so if I just click on there and here you can see it's going to increment my counter by one so that was the Second Challenge now for the third challenge uh we have to create our fetch data component so I'll use like fetch data effect. jsx do jsx and let me just use my RFC inside there let's just create our St so that we can store our data inside there so

I'll just use like post and then set post and that's going to be equals to the used stand we're Going to be providing the empty dependency array or not dependency but empty array just for holding our data now we are going to be performing the side effects so for that we have to use our use effect and here we are going to be providing our empty dependency array right here and now we're going to be defining our function which will allows us to fetch our data so what am I even doing what the hell let's

just provide our asynchronous function and we are Going to be providing first of all the response and let's just use our a and we're going to be fetching our data data from this URL and also we have to convert our data or response to Json so we're going to be storing there in the data and finally we have to store the inside our stat we're going to be using like set set post and put our data inside there now underneath this function we are going to be calling it okay so now if I save my

file and call It and it's going to give us the perfect response so we have to also render their data to the Dom so that we can see them so I'm not going to do anything crazy so I'll just write like first post title and here underneath this H1 we're going to be iterating over through all of the post so I'll just use like post. length is greater than zero so in this situation we're going to be using our H2 and I'll just write like um post and we just only want to get the first

post We're not interested in all of them and we only want to get the title out of that but if that's not the case we're going to be rendering or lowering dot dot dot so now if I save my file first of all we want have to register there so I'll just go to my app and comment this line out and register my patch data effect component there sa my file now we are getting this title and yeah this B as well so now if I refresh there it's going to give us the loading for

a brief Second as you can see and then it's going to give us the data this is how we are going to be fetching a data by using the use effect and this is how we going to be performing more side effect by using the use effect so now let me just uncommon all of them and now we can increment something and we can also check out the logs and stuff like that so now let's talk about the famous problem with reactjs which is is called the prop drilling so what is a prop Drilling and

why you should anyone care about that so here you can see I have a component High here right here so I have a different component like app card header navigation user date time and so on and so forth and here inside the app component I have a data suppose if I want to pass that data from the app component to the date component so how can I go about doing that so to do that there are a lot of ways to do the in reactjs which we're going to be learning Throughout the course like by

using Zeus and also using the cont API and also Redux toolkit and there are a lot of ways but now let's talk about the prop drilling we are going to be drilling this data into multiple component so we are going to be taking that data and we are going to be passing that data into all of these component by using the props so how are we going to be doing that so I'm going to pass my data from the app component to the card component By using the prop then I'm going to pass that to

the users component and now finally I'm going to pass that to the de component and then there we can use that but imagine if you're working with like Google or maybe Facebook or some big companies they would have like a lot of components and I mean like a lot they would have like thousand component if not million component so what you will do is that you will just P your data by using the props and you will just drill Your data no there is a solution for that I'm going to show you that solution in

a few seconds but first of all I want to show you the prop Drilling in action then we will jump into the solution so now let's talk about the prop Drilling in action so what I'm going to do is that I'm going to just create create my components folder and inside this folder I'm going to create my component a. jsx and also component b. jsx and finally component c. jsx and now I'll just go Into my component a and I'm going to use my RFC and I'm going to go to the component B let's just

use our RFC and also to the component C so now inside my app component I'm going to just create some sort of a variable with the name of like name and I'm going to give my name inside there so I'm going to save this file now we have to paste this name data into this component C so how can you go about doing that so to do that the first thing that we have to do is that we have To call our component a and now let's just render them we have to P that name

is the prop for our component a so I'll just provide my name right here I'm going to save there now inside my component a I'm going to destructure there right here and also we're going to be just passing there into the component B so I'll just use like component B and I'm going to hit enter so it's going to Auto Import there now we're going to be taking that prop of name and we're going To be passing that two or component B so I'll just write like name right here so I'm going to save there

now I'm going to go into the component B I'm going to also destructure there right here I'll just use my name and finally we have to use that inside the component C okay so I'll just close that right here and I'm going to also past that as a prop so that I can use that inside my component C so I'll just go to my component and c and I'm going to just destructure there Right here I'll just destructure my name and now let's just use there right here so I'll just use my H1 and I'm

going to just render the name right here so if I save my file now so now we are drilling this name is a prop to all of these component like first of all we are passing there to component a then to the component B then to the component C and finally we now rendering there inside the component C so that's going to be a lot of process and let's suppose if you Working with some sort of a bigger company and you're going to have to pass your data as a prop to all of these component

and that's going to be a nightmare so to solve this problem we are going to be learning about the Contex API so now let's talk about the context API context API is a feature that allow you to manage and share State across your component Tre without having to pass prop down manually at every level of your component tree it is Useful for scenarios where you need to share data or function across many component especially when these components are deeply nested something which we just saw few seconds ago so for there we use a props but

in this situation we are not going to be using any props we are going to be using something called the context API and now let's get into it so that was the basic theory about the context API and now let's refactor our prop drilling to use The context API so what I'm going to do is that first of all I'm going to have to import my context so I'll just use like create context and we're going to be importing that from the reactjs so now that we successfully import that so the next thing that we

have to do is that we have to create the instance of the so I'll just use like create context and now we're going to have to store them some sort of a variable so I'll just give it the name of like data you Can like basically give it any name that you like and I'm going to also export that so that I can use this context anywhere inside my project so that's good now the next thing that I want to do is that I want to wrap my entire application to use this context so how

can I go about doing that I'll just uh wrap there by using my data which is now holding the value of my context so I'm now calling this data right here and I'm going to just close there and once I Close there and I'm going to also wrap my component a inside there then we have two properties so if I just write like dot it's going to gives us consumer and it's going to also gives us the provider so provider just simply means this going to allows us to provide our value or our data into

multiple components so I'm going to just choose this provider and here we just have to use our value and inside this value we have to pass the data which want to pass inside our Component so we no longer have to use all of these props I'm going to just remove them from here I'm going to copy my name from there and I'm going to just put there right here so if I save my file and we also have to just uh copy this one and we have to place it right here so this is how

we are going to be using our prop first of all we have to import it then we have to create an instance of there then we have to use the provider property on there and this Provider property allows us to provide our data into multiple component so we no longer have to drill our data into multiple components by using the props so I'm I'm going to go into my component a and we no longer need this name right here so I'm going to just remove there just just remove there I'm going to go into the

component B I'm going to also remove that from here let's just remove that from here and now inside the component C I'm going to also remove That from here but now the question is how are we going to be receiving that data now that we pass that data right here into this component but how in the what we are going to be receiving there or consuming there to receive there the first thing that we have to do is that we have to import our context as I said like we're going to be using this export

so that we can use this context inside multiple components so now we are going to be importing there so I'll just use Like import my data and if I just H enter right here so it's going to import that from my app component and now we have to use the inside our component so what I'm going to do is that I'm going to just remove that from here and I'm going to also remove this divs from here and instead I'm going to replace there with this data and if I just write the dot so what

are we getting we are now getting the provider and we are also getting the consumer so this consumer Will allows us to consume their data or receive their data this is how we are passing the data and this is how we are going to be receiving that data now this consumer take a callback function so we going to be passing our function inside then to get our data so I'm going to just write these curly braces right here and I'm going to just provide my function it's going to take the perimeters so I'm going to

just specify the perimeter of name and now let's just Create our callback function now inside there I can just return like H1 and now inside this H1 I can use my name right here so if I just write a name save my file and if I just refresh there and here you can see I'm now getting my name so if I go ahead and change that to like I don't know John or something so here you can see we're now getting word John so that's looking cool like we are totally receiving this data but now

the question is let's suppose if I want to Provide like multiple data so how can I go about doing there I'm going to go into my context once again and I'm going to just duplicate there like we are creating one more instance so for context and I'm going to just rename that to a data one you can like basically give it any name that you prefer but in my case I'm going to just rename that to data one I'm going to save this file and now the next thing that we have to do is that

we have to Just create some sort of other data so that we can pass that data into our component so I'll just use like Edge in this case and I am 22 so I'll just put my 22 Edge right here okay and now if you want to pass that into our component so in that situation we're going to be using our data one and then Dot and we have our provider and this squ will allows us to pass our data so I'm going to just wrap that right here and once again we're going to be

using our value And in this case we're going to be passing the H as a value right here we already provided the name but now in this case we're going to be passing the value so now that we successfully pass this data we have to go into our component C and we have to consume that data or grab that data so I'm going to just comment this line out and now if you want to consume that data or receive that data so now inside this data one what do we have to do we have to

just Use our return statement and now inside this return statement once again we are going to be using our data one inside this if I just hit enter so it's going to Auto Import that right here okay so now we have to use that and once again we're going to be using our consumer property inside there and now inside this data one consumer we are going to be once again using a callback function so I'll just use like Edge and now inside there I'm going to just use my H1 Right here first of all we

have to return that because we are using curly braces and I'm going to write like my name is and then I'll just put my name inside there like name and I'm going to also use like and I am uh age years old there we go so if I sell my file and here you can see I'm now getting like my name is John and I'm 22 years old so this is once again not a good way to pass our data but at least it is better than the prop drilling okay so we are Passing our

data we are receiving our data but now if you want to receive that data we're going to have to use this call back function and all so to solve the problem so to solve even this problem we are going to be using the use context hook so now let's discuss about the use context hook now let's talk about the use context hook in reactjs so use context hook allows us to access the context value provided by the context object directly within the functional Component so context provides a way to pass the data through the component

tree without having to pass prop down manually at every level something which we just saw a few seconds ago so now we only care about the use context H and now let's get into it so now let's refactor this code to use our context hook so what I'm going to do is that first of all we have to import or use context hook right here so once we successfully import them the next thing That we have to do is that we have to call that right here so I'm going to use like use context and

now inside this context you have to keep in mind from where your data is coming from is that coming from the data or the data one which we are already creating right here like we're creating our create context instance and now we passing our data by using either the data or the data one so now in this situation we have to tell our hog like from which context or data Is coming from so in this situation I'm going to copy this data and I'm going to just put that right here and I'm going to store

there in some sort of a variable like username or something like that so this is how we are going to be getting our data by using this use context we no longer have to provide all of these call back function return statment and all of that so I can also use there for the data on so I'll just use like Edge and I'm going to use my Use not but use context once again and I'm going to just P my data one inside there so now I can totally remove all of these codes I'll I'll

just remove there and here you can see we can just use like our H1 and now inside this H1 I can use like my name is and then I'm going to just past my username right here and I am age years old and I'm going to save my file we have to write upper Cas a and save my file and here you can see I'm now getting like my name is John and I'm I'm 22 years old so this use context is very helpful so this is how we are going to be passing our data

and this is how we are going to be receiving your data by using the use context so yeah that was it about the use context hook time for the context challenge so the first thing that I want you to do is that I want you to create the user context. GSX file and inside that file create a user context and also the user provider which will allow you to hold the shared data Next we have to use the use context to access that data so once again you're going to have to create the user profile.

jsx component and inside that component you're going to have to use the use context to access that data okay and then finally you're going to be updating that data so once again you're going to have to create the update user. jsx file and inside that file you have to define the component then use the use context which will allow you to access Their data and somehow update their data so give it your B shot if you can do it that's completely okay then come back and watch the solution and now I'm going to give you

my solution so inside this SRC I'm going to create a file with the name of user context. jsx and inside there the first thing that I want to do is that I want to import my create context and also the used St as well next we have to Define our context I'm going to be using Create context and Execute there and I'm going to also store there in some sort of a variable so I'll just give it the name of like user context and now inne that we have to create our provider so I'll just

use like cons user provider and that's going to be equals to this children and it's going to take the children and also inside this component we are going to be defining our used and the initial value will be name so I'll just write like John D and we're going to be Restructuring the user and also the set user out of this used T okay so now underneath that we're going to be returning our user context which we've already created right here we are going to be calling there and now inside this context we already know

that we have a property called dot provider so I'm going to just write provider copy there and also place it right here and now inside there we're going to have to paste some sort of a data so now in this Situation we're going to be passing our user and we will also P the function which will allows us to change that user so I'll just write like user come on value first of all and here we have to Define our user and now I'm going to be creating a function which will allows us to change

that state so I'll just use like conceptd User it's going to be a function which will take like a new uh yeah new name would be f now I'll just write like set user and here I'm going To put the name then we will just provide the updated name okay so now we successfully created this function so I'm going to copy the name of there and place it right here and here we also have to provide their children which we are now taking as a prop so I'll just write that children and that's everything that

we have to do and finally we also have to export this so that we can use the in other file so I'll use like export export the user Context and also the user provider so that I can use it in other component so now that's done next we have to create our component so I'm going to go into my component folder and I'm going to create my user profile. jsx okay so inside there we're going to be using the use context to access the data from our context and we going to be also importing the

user context like from which context we want to get that data now let me create my component right Here and I'm going to just give it the name of like user profile and now inside this component we have to access the data from our context so we're going to be using the use context to access that data from which context from this user context which we've already specified or defined right here okay so that's done now I'm going to destructure only the user we don't need this update user right here we are only interested in

this user which we are now providing Right here okay if you want to get that user so I'm going to remove this user profile from here and I'm going to write like H1 user profile and now underneath this H1 we're going to be creating our paragraph and here we have to rer or user.name okay so so yeah that's going to be fine so now if I save my file uh let me just run there npm run Dev it's not going to giv us anything because we have to define the inside our app so I'll just

write like user profile BR f i L e there we go now let me just save my file and refresh there still we're not getting anything I don't know why let's just open my inspect element go to the console and we are getting some sort of error cannot destructure a property of of user of user context as it is undefined oh and my bad here we also have to write our user provider so that we can provide the in our entire application so I'll just s it like user provider and now we will be successfully

Able to get their data so here you can see we're now getting the user profile and we're now getting the data from the context inside this user profile component so that's the second thing now for the final thing we have to create our update user. jsx component and let me just remove that from there and here once again we're going to be importing the use context which will allows us to get the data and also the use State and which will allows us to Create our state and we're going to be also importing the user

context from our context which we've already defined a few seconds ago and I'm going to be using my RFC to Define my component and now inside there we're going to be destructuring the update user from where from the use context if you want to destructure there from this specific user context and now underneath that we going to be getting the new name and let's just write like set new name and That's going to be equals to the US state and the initial value will be set to empty string now for this UI I'm going to

remove them and write my H2 which will say like update username and now need there let's just create our form remove the action because we don't need that and provide the own submit and on this submit we going to be firing this function which we are going to be creating in a few seconds and we will also have to to create our input field The type will be set to text the value will be set to new uh name which we are already defining right here and when somebody types something in this input field so

we are going to be firing this function which will say like set name or set new name rather and we are going to be getting our data by using the event. target. value okay and now outside from that we're going to be also providing a placeholder to there which will say like enter new name now let me just save my File and now underneath that we're going to be also creating a button which will say like update and the type will be set to submit okay so now let me just create this handle submit function

right here so we are not going to be doing anything crazy but we are going to be providing our event object and now inside there we are going to be preventing the default Behavior okay and also we're going to be checking if new name. RM let's just write our triam so if that's the case We're going to be using update user and provide a new name to there and we're going to be also empty out our input field by providing a set new name and set that to empty string okay so now let me just

save my file and now if I type something inside that component but first of all we have to register there right here like update user and now let me just save my so here you can see we now getting our data from another component and now if I write like uh or No my name if I click on the update so it's going update data but we are getting some sort of error new update is not defined okay God damn it instead of a new name I specified the new update so now let me just

change there to a new name sa my file and refresh there if I write my own name once again click on the update and here you can see it's going update their name if I write like something else and click on the update so it's going to change there to Something else so yeah that was our challenge about the use context and also the yeah and also just about the context now let's talk about the use reducer hug so use reducer is a hug there is similar to the US St hook but it is designed

for more complex State object or state transitions that involves multiple sub values so it allow you to manister in the functional and immutable way I know the definition sounds a bit scary and trust me the syntax is more scarier than The but throughout the course I promise I'm going to give you a lot of practice about the use reducer hook so now this is how the syntax will look like first of all we have our used reducer and we're now passing the reducer function and also the initial value for there and we are now destructuring

the state and also the dispatch so what is all of that even mean so now let's talk about the used reducer initial state so this is the starting value for the state when The component first renders we going to be passing some sort of initial value to that so if you are building some sort of a counter app you're going to be passing a zero value or 10 value or anything like that next we have a reducer function this is a function that describe how the function should Chase based on some action or some conditions

so it takes the current state and the action as an input and return new state value to us okay so this is how our use Reducer will look like but now let's talk about the things which we are going to be destructuring from the use reducer so the first thing that we have is the state and this is going to be the current state value which you can use inside your component and then we have a dispatch function and it is a function you can call to send action to the reducer function which then updates

that state so I know May sounds a bit scary and difficult but trust me it's not so You know what now let's get into the coding then you'll get to know what I'm talking about let's use the used reducer in action so what I'm going to do is that I'm going to grab my used reducer from the reactjs next we have to use that so to use that we're going to be using the use reducer and it takes two perimeter like the reducer function and also the initial State i n i t i a l

i can't spell the initial so this is how we are going to be using the use reducer Function and now we are going to be destructuring two things we are going to be destructuring the state and also the dispatch function so now let me explain all of that right now first of all we are providing the initial state which we are going to be creating right here like what will be the initial value of our entire state so if you are building some sort of a counter app so we are going to be providing the

initial value of zero to there so I'm going to just write like Cons initial State and now inside there we are going to just provide like count and that count will be set to zero because we're just creating a simple example of a counter next we have a reducer function and we are going to be creating the reducer function right here so I'll just write like cons reducer and this reducer will take two things it will take the state and it will also take the action so why do we have to provide the state and

also the action it Will take the state like what thing we are updating and then how we have to update that thing okay like what are we updating and how are we updating so that's the only thing that you have to keep in mind so now let's use what we will update and how we will update there so to use them we can either use the FNL statement we can use the trary but in this situation we are going to be using the switch and cases case I'll just use like switch and if I just

hit enter so It's going to give the St cases for free now I'm going to be using action and then I'm going to provide a type we are going to be using this action by using this dispatch function but you don't have to worry about what a dispatch is for now so if this action type is equal to increment so we're going to just provide like increment so in this situation we only want to return every single thing which is already available inside word State like we are creating a Copy of Word State and then

we only want to update the count and we want to update there by first of all accessing state. count and then plus one I'm going to sve my file and now let me just say there once again this reducer function will take the state an action and if that action type isal equal to increment so in this situation we are going to be creating the copy of our entire State like let's suppose if you have some sort of other stuff like uh notification is That on or off or something like that so we are going

to be making a copy of that and now in this situation if the action type is equal to increment we're going to be only updating this count and where is this count coming from this count is coming from this state which we are going to be providing for our dispatch function and this state already has the count of Z zero value right here and we only want increment there by one okay so that's going to be for the increment now Let's talk about the decrement so I'm going to just remove that from here I'm going

to also provide yet another case for the decrement and if you want to provide some more State you are more than welcome to use that if you wanted to but in my case I'm going to only return first of all dot dot dot my state once again and then we are going to be changing our count and our count is coming from the state. count and we are going to be just decrementing there okay So you just have to keep there in mind so I can just totly remove these spaces I guess I'm going to

save my file and this is how it looks like right here so that's cool but now I'm going to also take care of the reset and I guess we don't need yeah we do need that I'll for yet another case for the reset like we are going to be also providing some sort of a reset button to there so in that situation we are going to be once again returning all of our entire State and We're going to be just changing the count to zero okay so that's cool and for the final thing we are

going to be just returning uh the state overall so I'm going to just cut all of that and here you can see this is how we are going to be creating or defining or reducer function so now these steps are now successfully done the next thing that we have to do is that we have to take care of the state and the dispatch we use this state to show the data into Our UI okay so how that's going to look like here you can see I have my D and now inside this D I'll just

create my H1 right here and in this situation I'm going to be using like state which is coming from this user reducer You're Now using this state and now inside this state we have the property of count like if you have some sort of other property like notification or uh is dark or something like that we're going to be accessing there but now in this Situation we only have the count so I'm going to access there right here so now initial value for my account is set to zero so we are going to be getting

a zero value right here okay so I can just provide some sort of a label like uh count right here semi file and now we are getting this count and this is how it's allows us to access our data inside our jsx now let's talk about this dispatch function this dispatch function will allows us to change your state like Actually change your state this will allows us to provide some sort of a rule if that rule is equal to increment so we're going to be incrementing if that rule is equal to decrementing so we're going

to be decrementing and so on and so forth so these are just a rule now we are going to be using that rules inside our dispatch function and this dispatch function will allows us to actually change your state okay so I'm going to just create a few buttons right here so I'll just use like button and now inside this button I'm going to just provide my plus symbol right here you can also write like plus if you wanted to but in my case I'm going to just write like plus and I'm going to also specify

the on click event handler and when somebody clicks on there we're going to be firing our dispatch function and now inside this dispatch function we are going to be providing the type and if that type is equal to increment so you already Know what do we have to do in that situation we are now providing a type and that type is if that type is equal to increment like if this action type is equal to increment we're going to be incrementing there okay so I'm going to also create here another button which will just say

minus and when somebody click on that button we are going to be just using like dispatch function once again let's just provide our type and we are going to be providing the decrement Right here DC r e m n there we go I'm going to save this file and finally we're going to be creating yet another button for the reset so I'll just write a reset right here and when somebody click on this button we're going to be firing this dispatch function once again and we are going to be providing the type and type will

be set to reset okay so I'm going to save my file and that's all the thing that you have to do for the use reducer okay so if I click on This increment button so it's going to just increment my counter if I click on this decrement button so it's going to decrement my counter and finally if I click on the reset button it's not going to do anything I don't know why here you can see we're now providing a re and without the e resert so now if I click on this button it's going

to make it as a zero so if I decrement there like a lot of time and if I click on the reset it's working and also the increment is Totally working so yeah this is how we are going to be taking care of the use reducer function or hook to be precise all righty so time for the use reducer challenge so first of all I want you to create the counter reducer DJs file and inside that file find the reducer function that will manage a simple counter start next you have to create a file with

the name of counter. jsx and inside that file create a functional component with the name of counter then Use the used reducer hook to manage the state of that counter and then for the third step modify the counter reducer DJs file to add more action which will allow you to increase and decrease by a specific amount then update that counter. jsx file to increase and decrease the count by a specific value using the input field so finally you have to register the inside the app. GSX file and that's going to be it so once again

give it your best shot if you can Do it that's completely okay then come back and watch the solution and I'm going to be creating my uh what do we call it counter reducer DJs file okay so inside this file we're going to be first of all defining our initial state so I'll use like initial State and that's going to be equals to the count and count will be set to zero now underneath that we're going to be creating a function and I'm going to give it the name of like counter reducer it's going To

take the state and also the action and here we are going to be using like once again the switch and cases so for the switch we going to be providing a action. type so if that is the case we're going to be providing the first case like increment so if the case is increment we going to be returning the count and let's just write State count to access our data from our count and we are going to be incrementing them by one but if that's not the case and if the Case is set to decrement

we are going to be using the return statement one more time let's just use your return and we're going to be getting the count by using the state. count once again and let's just remove one from there like decrement one from there so I'm not going to go ahead and create a UI for that I'm going to also create that other state as well so I'll just use like case and increment by amount come on increment by amount there we go and I'm Going to use like return and let's just write count. count plus action.

payload I'm going to write payload like so I'm going to also duplicate that and change that to instead of an increment I'm going to write like decrement d e c r e m n t decrement by amount once again instead of writing a plus I'm going to change that to minus and for the default value I'm going to only return my overall state so that's going to be our entire function which will allows us to Change our data so that's how we are going to be creating our counter reducer and now underneath them we going

to be exporting the initial State and also the counter reducer function from this file okay so I'm going to go ahead and go to my component and create my counter. js. jsx file and I'm going to Define my RFC inside there go to my app and register there right here so I'll use like counter and hit enter so it's going to registered there and let me just see how It looks so this is how it looks like and yeah we are getting somewhere go to my counter one more time and the first thing that I

want to use that want to get my used reducer and also the used St function from our react J we're going to be also getting a few things from our uh reducer file so we're going to be getting first of all the counter reducer and also the initial St come on initial state from this counter reducer now let me use my use reducer to Define my Dispatch function and also my state so I'm going to be using like use reducer and for the initial value I'm going to write like counter reducer and also the initial

value which we've already defined F okay so here we're going to be druing the state and also the dispatch this going to be equals to this us reducer now underneath we're going to be also creating a state for the form okay so I'll use like input value and also set input value okay so that's going to Be equals to the US state and here we are going to be providing only zero right here okay so now let me save them next let me take care of this UI so I'm going to go there and write

H2 and provide my counter Valu so I'll use like state. count to access that value let me just save my file and check this out so here you can see we are now getting count which is now set to zero so that's cool but now we have to increment and also decrement there so I'm going to be Using like button and which will allows us to increment my counter and another button which will allows us to decrement my counter okay so I'm going to just write like on click event handler when somebody click on there

we are going to be firing like handle increment and also handle decrement okay and now let me create this function right here so we're not going to be doing anything crazy but we are going to be creating like handle uh increment and that's going to be Equals to this aror function come on that's going to be equals to this error function and we're going to be calling the dispatch function and provide the type of increment to there now let me just duplicate this line of code and change that to decrement and also change the function

name to handle decrement so I'll just write like handle decrement like so so now this function will allows us to change our data so now if I click on this one so it's increment my counter Is and now if I click on the decrement button it's going to decrement my counter now we also have to provide our input field which will allows us to change the data by providing our value so I'll just write a div and inside this div we're going to be providing an input with a type of number and also the value

will be set to input value okay and I'm going to also provide the on change Handler and here we're going to be passing our Arrow function which will Take like set input value and I'm going to write like event. target. value that's also Al cool but now underneath that I'm going to be creating a button which will say like add and I'm going to also create here another button which will say subtract okay and here we have to just write like on click event handler when somebody clicks on that we're going to be fing like

handle increment by one let me just write like increment by one or by amount would be Fine and we're going to be also providing Handle decrement by amount and now let me just create these two functions so I'm going to copy the name of them and Define the right here const handle increment by uh by amount and here we going to be providing our dispatch and for this dispatch for the type we're going to be providing increment by amount and we also have to provide our payload come on payload and for the payload we have

to provide our Input value but first of all we have to convert that to number so if you want to convert that to numbers so you can use the number Constructor or you can also just use a plus and it's going to also convert their two number okay and now underneath I'm going to use like set input value and change that to zero so it's going to clear the input after the dispatch and now if I save my file and it's going to only work for the first one it's going to gives us an error

Because we also have to create this function which is Handle decrement by amount so I'm going to copy the name of there and basically I'm going to just duplicate this entire function and change the name of that to Handle decrement by amount and I'm going to also change the name of this one to to decrement by amount and the rest of them will be the same so now let me just save my file and here you can see I can just write like I don't know maybe um 100 and If I write that and click

on the add so it's going to add that 100 right here and if I just write like uhuh 200 and click on a subtract so it's going to remove 100 from there now it's going to gives us minus 100 I can also increment my counter I can also decrement my counter so yeah that was our complex counter and also what challenge about the use reducer if you hearing a construction voices in the background I'm sorry about that because here in my House a construction work is going on and I don't want to delete this video

no more so now let's talk about the use ref so what is a US ref and why should one care about that use rep hook provides a way to access and interact with the Dom element or to prist Value across render without causing a render so this is going to be the most simplest hook in our hook list so now let's get into the coding then you will get to know what I'm talking about all right guys now It's time to use the US ref inside our component so I'll just use the US ref right

here now reducer use ref there we go we're going to be importing that from the reactjs and now we have to use that so I'll use like use ref and for the initial value you can specify any kind of value so I'll just write like no because I don't want to specify any value to that and next we have to use this so to use the first of all we are going to be storing there in some sort Of variable so I'll just use like cons element and we have to just uh equal to there

to this us ref so now I can totally log that to the console so I can use like element right here if I save my file and go to my console let me just refresh there so what are we getting we are now getting this object with the property of current and which is initially set to null so this current property will allows us to manipulate word Dom or to do anything with our Dom So I'll just change that to like um input element because we're going to be creating our input element right here so

I'm going to change that to input element you can like change that to basically anything that you want so in my case input element would be fine I'll just create my input element right here and the type will be set to text and I'm going to be using the Riff property and this riff property will allows us to use this ref inside or specific element so I'll just use like my input element right here and now if I sa my file and let me just log that to the console once again so I'll just use

like input element and now if I save my file and refresh there okay so here you can see we are now getting our input and we are also getting our current property and if I expand this so that current property is now pointing into this input element right here as you can see there so if I expand this so we have like the value Property we have a lot of things that we can do with this HTML element so what I'm going to do is that I'm going to just remove that from here and I'm

going to create a button right here which will just say like focus and uh right hen maybe you can basically manipulate your Dum however you want but in my case I'm going to just focus and write Huzan inside that input field okay so I'll just use my arrow function and inside this Arrow Function I'm going to be creating a function which will be a focus input and I'm going to execute this so now let me just create this function right here I'll WR like cons Focus input and now inside there we're going to be using

our input element do current property and then we're going to be using this Focus method which is coming from the Dom okay so we have to just use come on F cus we have to just use this Focus method and as soon as I save my file and refresh There and now if I click on this button it's going to focus my input element right here now I can basically do anything I want to do with this element I can change the color I can like provide something inside there so now let me show you

like how we are going to be writing something inside this so I'm going to xess my input element then I'm going to write my current property which is already coming from the USF and I'm going to get the value and that value Will be set to like my own name so I'm going to save my file and now let me just refresh there and now once I click on this focus and right so it's going to first of all focus our input element and it's going to also write this name right here so if I

change that to like something else like I don't know John Smith or something like this sa my file and now if I click on this it's going to write this John Smith right here so this is how we are going to be using the user Ref and we are going to be very rarely using this user ref but I don't know that was a US ref time for the user ref hug so I want you to create a component with the name of focus input. GSX and that component will focus on the input field when

the button is clicked in the second part I want you to create a timer. GSX component and just Implement a simple timer where the timer interval is store using the ref so give it your best sh if you can do it that's Completely okay then come back and watch the solution and now I'm going to give you my solution so what I'm going to do that I'm going to just create my focus uh input. GSX and let's just create where rafc SA my file and let's just go ahead and go to my app and store

there right here so we have a focus input and I'm going to execute them let's just check this out yep it's working now the first thing that I want to do is that I want To grab my us rep from the rejs and the initial value will be set to null and I'm going to store that in the input ref as a value and now we have to use that inside our UI so what I'm going to do is that I'm going to create my input field with the type of text and I'm going to

also provide the ref and here the ref will be that input ref which we've already stored right here gu we're going to be copying there and now let me just place there right here and I'm going to Also provide the placeholder which will say like uh click the button to to focus or yeah I guess that's going to be fine and now underneath that we're going to be creating a button which will say like Focus input and I'm going to also attach the on click when Handler and we are going to be creating this function

in a few seconds so now let me just create this function cons Focus input and inside this function first of all we are going to be checking if we have the Input rep. current value so in this situation we're going to be taking that input rep and we're going to be grabbing the current property of there and then we're going to be calling the focus method on that so anytime we click on that button it's going to FOC focus our input field so now let me just show you there so now if I click on

there it's going to focus this input field right here so that was the first portion of this challenge I'm going to close there And now let me create my timer so timer. jsx RFC and now we have to also store the or register the inside our app so I'll just write like timer and hit enter just going to grab the from my timer uh timer file so what I'm going to do is that I'm going to grabb a few things the first thing I will grab is the use rep from the reactjs we would also

need the use effect and also the use St okay so now let's just use all of that hooks inside Our component so I'll just first of all create my count and also set count and that's going to be coming from the used St and the initial value will be set to zero we're going to be also creating our interval ref so I'll just write like interval ref and that's going to be equals to the use ref and the initial value will be set to now and now let's just use the inside our component but first

of all we also have to create our timer so that we can work with this we Are going to be using our use effect because in this case we are going to be working with a side effect and for the dependency array we are going to be setting there to empty dependency array now I'm going to get my interval value or interval ref and here we are only interested in the current property so I'm going to grab my current c r n like so and that's going to be equals to the JavaScript buil-in method which

is called the set interval and here we're Going to be passing a callback function and I'm going to also give it like 1 second would be fine for a timer and I'm going to write like set count and here we have to specify our previous count and also we have to add one to the two our previous count like so and that's going to be it and finally I'm going to also write like the clean up function so I'm going to just return that clean up function right here so we're going to be using like

clear interval and here we Have to specify our interval RI one more time and we have to provide that current property in there okay so now we are totally done with all of that value next we have to use the inside our component so I'm going to remove them and I'll write my H1 timer and here we have render or count and then seconds and now underneath that we're going to be also creating a button which will just say like stop timer okay so it's going to allows us to stop our timer like a pause

Button and whenever we click on this what do we want to do we just want to fire this function which will be a clear interval and here we have to specify our interval rep and then do current value in there now let me just sve my file and here you can see we now getting like the timer let me just refresh there 1 two and so on and so forth we now getting our counter or timer not counter which is working totally fine and now if I want to stop there or pause there I can

Click on the stop timer so so it's going to pause my timer right here okay so yeah that was the second portion of our Challenge and that was it about the US ref challenge now let's talk about the custom hooks so custom hooks are a JavaScript functions that starts with the prefix use for example example use fetch use foam and so on and so forth and can call other hooks within them they allow you to extract and reuse logic that inal state or side effect Making your components more readable and maintainable so here you can

see I have a home component and now inside this home component I now fetching the data from the todos and then I'm sending that data to my St okay so this is okay like nothing is wrong in this component but now we can extract all of that logic into our own hook so that we can reuse that hook again and again and we no longer have to write all of that code again and again so to do that first of All we are going to be creating a function I'll give it the name of like

us and it's going to take the URL and then we're going to be defining our state for there and then we will use our use effect and now inside this use effect we're going to be using our fetch then we are going to be taking that URL from the perimeter and we're going to be passing that to the fetch then we can convert that data to the Json and finally we can push that data to the set Data okay so this is how the syntax will look like like this is just a basic example Le

but through the course we going to be seeing a lot more than that so now to use that hook inside our component this is how we are going to be doing there first of all we are going to be importing our hook and then we're going to be pasing the URL from which we want to fet our data and then we can just destructure the data and we can use the inside our component so this is how The use fetch will look like and now let me show you all of the in action first of

all I want to show you the problem and then I'm going to show you how we can refactor our code to use the custom hook okay so I'm going to just create like first of all my State I'll just write like cons data and then set data and that's going to be coming from the use State and the initial value will be set to now you can write like array if you want it to but in my case I'm going To write like now next we have to fetch our data and to fetch our data

we are going to be using this use effect for the side effects and it's going to take the dependency array of totally empty array because we only want to render this content once and then I'll just use like fetch method right here and I'm going to provide this URL we're going to be fetching our data from this URL now let me just use my then and it's going to take the response and we're going to Be converting that response to Json and also let's just use our then one more time to get the data and

I'm going to just use like uh set data and we're going to be passing our data to there okay so this is how we going to be fetching our data and this how we're going to be pushing our data to our state now inside this da we're going to be just rendering our content so I'll just use like if we have the data then we are going to be iterating over Through the data so I'll just use like item or too would be fine I'll use my to-do or you know what item would be fine

what the hell and I'm going to use my curly braces and now we have to return this paragraph and I just use like item. tile and I'm going to also provide the key right here and the key will be item. ID right here so if I save my file as you can see right here we are getting all of their title which is working totally fine but now let's Suppose if you want to use this same logic in a lot of components so first of all we're going to have to create this this St in

all of that comp component then we have to use this use effect in all of that component then we have to fetch our data change that to Json and finally we have to push this data to over STS and that's a lot of work and now to extract all of that functionality to a single function this is how we going to be doing there so I'll just Create a file I'm going to give it the name of like use because we are creating a hook so I'll just give it the name of like use fetch.

jsx okay and now inside this use fetch. jsx and now inside this use fetch method I'm going to just first of all import my uh use State because we already know that we are going to be using some sort of a state and we will also import the use effect as well because we already know that we are going to be using this use effect as Well okay so now that we successfully imported there the next thing that we have to do is that we have to just create our function so I'll create like cons

and you can basically give it any name that you like but the convention is to use the use okay and then you can give it like basically any name that you like so I'll just give the name of like use Fetch and it's going to take the UNL because as you can see right here we are going to be providing some sort of a URL So just going to take that URL right here and now let's just create our function so the first thing that I want to do is that I want to create my

data and then set data and now we're going to be storing there inside the used St and the initial value will be set to know okay so that's the first thing next we have to create exactly the same use effect like this so I'm going to copy there and now let me just place it right here and instead of providing all of This URL I'm going to cut that from here I'm going to copy this UR URL as a perimeter and we're going to be passing that to the fetch finally we just have to return

our data so that we can use that in other component so I'll use like data right here and this is how we are going to be creating our custom hook so finally I'm going to have to export that so that I can use that in other component so I'll use my use Fetch and I'm going to save my file and now we Have to use this use fetch inside or app component right here so I'm going to remove all of that from here I'm going to also remove this one I'm going to also remove that

sa my file and here you can see this is how our component will look like but first of all we have to use this us fetch inside this component and this is how we are going to be using the first of all we have to import the the use Fetch and now we have to use the I'll use like use Fetch and it takes That perimeter of URL right here so we have to provide that URL right here it is now providing this data as array so we can totally destructure that as or array so

I'll just use like data and this is how we are going to be destructuring our data right here so now if we have the data then we are going to be iterating over through all of that data and we are going to be taking the ID we are going to be providing the as a key and we're going to be also taking The title and we are going to be providing the as our jsx value so if I save my file and here you can see we're now getting exactly the same result right here which

is amazing and now you can fetch your data by using this hook in all of your component if you have some sort of other component you can totally change this URL if you wanted to and you can create a custom hook for the form and for the validation and for everything like basically for everything You can create a custom hook now let's talk about the use ID hook so the use ID hook in reactjs is used to generate a unique IDs for a component so yeah it is as simple as that so now let's get

into the coding and then you will get to know what I'm talking about so the first thing that I want to do is that I want to create a component folder and inside that we have to create unique id. jsx I'll use my RFC inside there and register my component inside the app Like unique ID and Cloud there test this out and here you can see we have our unique ID which is looking cool so the first thing that we want to do is that we want to import that unique ID so I'll use like

uh use ID and hit enter so it's going to import there from the react CH and now we have to use this so I'll use like use ID and call that and it doesn't take any perimeter nothing now that we have to store there in some sort of a variable so I'll store the insert like ID it's going to be equals to this user ID so what I'm going to do is that I'm going to Define my label first of all like label and now for this label we want to provide our ID so we're

going to be using that ID totally dynamically and now I'm going to just write like email and also I'm going to create my input field in this input field we have the type of email we're going to be also providing an ID and the ID will be set to once again you get state that ID as Now if I save my file and test this out so now let me go ahead and go to my inspect element and go to let me just click on this one and here you can see it's going to gives

a that unique IDE right here for the HTML 4 and it's going to also give us that unique ID for this specific ID attribute okay so that's also done but now let's suppose if I want to create another input field so I'll just write like first of all the label or you know let me just copy this Entire thing from there and place it right here and change that to some sort of I don't know password or something like that I'm going to also change that to password and then Watch What Happens so if I

sell my file and refresh there and here you can see this one have the ID of R1 but now if I select this password is going to also have that ID of R1 why is that they are not totally unique so now I know a lot of people will think that if you want to make the Unique so we have to just duplicate that and change there to like id2 and then specify that ID to there so I'm going to copy there and place it here and also place that here sa my file and now

if I select the password here you can see this one have the ID of R1 and this one have the ID of R5 but now the question is should I duplicate my code for every single input no of course not this is not the better way so I'm going to remove that from here instead we can Provide a prefix this so I'll just write a dash and then I can write like whatever I want to write I can write like email so I'll just write an email here I'll also provide the email Here and Now

for this one we're going to be providing a password and also for this one we're going to be providing a password once again now let me just save my file you're not getting anything that's because we're using the id2 so we have to change that to just ID and ID so Now if I save my file and here you can see if I click on the password so here you can see we're now prefixing there for the email and also for the password so now let me go ahead and go to my app I'll just

create a paragraph which will have a lurum and now to need this paragraph you're going to be calling your component once again now let's just close this so if I close the and sa my file and now if I click on this component so now here you can see this Component have the RF let me just show you there this component have the unique ID of RF and this component have the unique ID of Rh right here that was just a quick hook which I want to cover okay so time for the 10 beginners level

projects so in these projects we're not going to be using any types script so we going to be only using react JS with JavaScript so basically that's going to be it so what I'm going to do is that I'm going to just make a setup right Here I'm going to open my terminal and let me just zoom in a bit so you guys can see everything a bit better I'm going to use npm create weed at latest I'll give it the name like project demos or yeah I guess that's going to be fine I'm going

to choose reactjs and also JavaScript not typescript but JavaScript I'm going to go into my projects demo and I'll use like npmi to install all of the dependencies that's done so I'm going to open my us code right here I'm Going to also open my terminal and use npm run Dev to start my server right here and let's just remove this boiler plate so I'm going to remove this public folder I'm going to remove the assets also this app. CSS and and index. CSS as well let's just remove every single thing from there I'm going

to use my rafc inside there and also remove this index.css and you know what I'm going to also remove the stri mode right here sa my file and now this is how everything Looks like first of all let me just show you there and here you can see we are now getting our app which is looking amazing okay so time to build our first project so I'm going to create my folder with the name of components and inside there we're going to be creating our counter. jsx and let's just use our RFC sa my file

and use that counter right here okay so I'm going to be using my counter hit enter save my file and this is how our Counter looks like right here and now let's begin with importing a lot of stuff so I'm going to be importing first of all the user like obviously we would need some sort of a St and also we are going to be importing the style. CSS which I guess I did not create so now let me create the right here inside this SRC folder so I'm going to create like style. CSS and

I'm going to place all of the CSS that I have already written for this project here so basically we're not Going to do anything crazy but we are going to be just centering every single thing and yeah you get the idea so if you want to get all of these styling you can totally go ahead and go to my gab repository and you can get all of that styling from there so now the first thing that I want to do is that I want to make a St setup so I'm going to use like count

and then set count and now let's just use what used it and the initial value will be set to zero okay So now I'm going to save my file and the next thing that I want to do is that I want to make uh this UI a bit better so I'll provide a class name to this Dev a container class okay so inside that we're going to be creating our H1 which will be just I'm going to also provide a class name of there to like a number and also here we are going to be

rendering our count so if I just use this save my file here you can see we now getting our zero right here which is looking amazing And you know what first of all let me just even wrap in something like so and the next thing that I want to do is that I want to create my buttons uh container like the increment button and also the decrement button so I'll use like buttons container this is going to be my class name and now inside this buttons container I'm going to be creating two button one will

be for the increment and another one will be for the decrement so this one will be for the plus and this One will be for the minus so I'll use like decrement there we go and now if I save my file and I'm going to have to copy the increment styling and place this save my file and now they are looking better so the next thing that I want to do is that I want to duplicate them and I'm going to be using the own click event handler on both of them so for the the

first one when somebody clicks on there we're going to be firing the increment function and when somebody Clicks on the second button like the decrement button so we're going to be firing the decrement function okay so now let's just register this function right here inside our component so the first thing that I want to do is that I want to create this function like cons increment and now here we're going to be using like set count and the count value will be just plus one like this is going to be the increment function and the

next thing that we have to do is that we Have to change that to decrement and also change that to minus all use like decrement and now if I save my file and now if I click on this plus button it's going to increment my counter and now if I click on this decrement button is going to decrement my counter so yeah that was our first simplest project ever the next project that we are going to be building will be a to-do list application so I'll just use like too. jsx and I'm going to use

my RFC inside There and I'm going to also go ahead and go to my stylesheet and remove every single thing from there and replace the styling right here and if you care about these styling you can totally go ahead and go to my gab repository and grab all of that styling from there okay so now I'm going to save my file and now we have to register this component right here inside our app component so I'll use like to do and now if I hit enter and this is how we going to be Registering this

component right here okay so if I just refresh there and here you can see we are now getting our to-do which is looking amazing so now inside this to-do the first thing that I want to do is that I want to grab my Us St come on import used St and we will also need to provide our style sheets all use like dot dot and provide our style. CSS right here inside there next we have to create two State one will be for the to-dos and another one will be for the Input so I'll use

like uh cons todos come on to-dos and then set toos and that's going to be equals to the used St and we're going to be providing the initial value of empty array inside there because here we're going to be storing all of our todos next we have to create our input field so I'll use like input and also set input here we're going to be grabbing like all of the data from our input field and we're going to be storing that inside our us It and the initial value will be set to empty string now

I'll remove this to-do from here and I'm going to also provide the class name of container today and now inside this container first of all we are going to be creating our input field and the type will be set to text I'm going to also provide a placeholder which will say like new too or type new to do whatever you want to call it I'll also provide the value and the value will be coming from this input field Right here so we're going to be copying that and I'm going to place it right here and

when somebody change or when somebody type something inside this input field so we're going to be firing this function and we're going to be changing the value of there we're going to be getting all of the value from the target. value and we're going to be setting that to our input field okay so now let me show you how that looks like so here you can see we have our input Field right here and I can type like basically anything I want so this is our basic input field the next thing that I want to

do is that I want to create a button which allows us to submit or to do so I'll use like button which will say submit and when somebody clicks on this button we're going to be firing this function which is a handle submit function I'm going to copy that and now let's just create there right here I'm going to use cons handle submit and here Inside the we are going to be using the set todos and for the set todos we're going to be providing our to-dos and now as a call back function we're going

to be using the to-do that perimeter which we are now taking for this function and we're going to be using the concat method on that and here we have to specify this value like text and text will be equals to this input field like anything we want to type anything the user type inside this input field that's Going to be set to the text property and also we have the ID and basically we're not going to be doing anything crazy but I'll just register a random ID right here by using meth. floor you can also

use The UU ID if you wanted to but in my case I'm going to just use like meth. floor and also met. random times 10 let's just use our times 10 and this is how we can set up our handle submit I'm going to also clear out the input field okaye I'll use like set input and here We have to provide empty string right here okay so now I can type something if I wanted to but I cannot see that right here and why is that that's because we did not render all of our content

to our UI so if I click on that here you can see that input field is now successfully removed but yeah we cannot see the data and now if you want to see that data so underneath this button we are going to be creating our ul and this UL will have the class of like to list and now inside This todos list we're going to be iterating all through all of the todos okay so I'll use the map method on there and here we're going to be passing our text and also ID which we are

going to be destructuring from all of that toos like as you can see right here we have a text and also that ID which we going to be destructuring from this function and we're going to be using the inside case I'll use like uh the and inside there we're going to be using what Ali and Here inside this specific Ali I'm going to provide a class name of Tod do today and all also the key will be set to that ID which is already randomly generated by using this m. Flo and also this m. random

okay so we're going to be specifying there for this key and also inside this Ali we're going to be creating with span and this span will take our text so we are going to be rendering our text inside this pen and we will also have a button which will Only say X or remove whatever you want to call there now let me style this button by providing a class name of close to there and I'm going to also provide the on click event handler when somebody clicks on this button so we're going to be just

firing this function which is a remove to-do and we're going to be specifying ID to that okay so now let me just create this remove to-do right here up above underneath this handle submit we're going to be also Creating what remove too so what I'm going to do is that I'm going to use like remove to-do and it's going to take the ID and now here we're going to be placing the set to-dos right here and that set to-dos will take that to-dos as a perimeter and we're going to be iterating over through that to-dos

by using using the filter and then we will just provide a t for a specific to do and then we can grab the t. ID and if that t. ID does not equal to that ID so We are going to be removing only that specific to-do okay let me just say that once again we are now iterating over through all of the toos by using this filter method we are now filtering out all of the todos and if that t like that specific T ID is not equals to that ID which we are taking as

a perimeter from this function so in that situation we are going to be removing that specific to-do okay so now the functionality is totally done I'm going to go ahead and Just add a few to-do like uh walk the dog and if I click on the submit okay everything is now gone I guess I did something wrong and I realized that I forgot to include the return statement right here so we only have to write a return and now if I save my file and let's just refresh that and I'm going to just write like

walk the dog and click on the submit button so it's going to add there right here then I can write like I don't know uh Record react.js course submit and now I can totally remove that by clicking on these icons here and I can totally remove that if I wanted to okay so yeah that was our to-do list by using reactjs welcome to the project number three and in this project we're going to be using the use effect to fetch our data from the meals DB API okay so I'm going to go ahead and create

my meals. um jsx and I'm going to use my RFC s my file and registered There right here okay so I'll use my meals and sa my file plus I'm going to also go ahead and go to my style sheet and remove every single thing from there and place this new styling right here once again for the final time if you care about this styling you can totally go ahead and go to my gab repository and grab all of the styling from there I'm not going to say that anymore okay so what I'm going to

do is that I'm going to first of all import a lot of things But I also forgot to tell you that in this project we are not going to be using the fetch API we're going to be using the X library to fetch your data so if you guys don't know what xos is you don't even have to worry about that but if you already know what xos is so yeah congratulation we are going to be using like npmi and then ex use to install the in our machine can install them the next thing that

I want to use that I want to grab there so I'm going To use like import xos from xos and we would also need the use State and also the use effect to provide your side effect and fetch your data I'm going to also provide my uh what do we call it my stylesheet right here so we have a style. CSS and now if I save my file and here you can see we are now getting our meals which is looking amazing the first thing that I want to do is that I want to make

a stad in which we are going to be storing all of our items or our meals So I'll use like items you can give it the name of like meals if you wanted to but in my case I'm going to only give it the name of like items and then set items that's going to be equals to the US St and that's going to be equals to the empty array because here we're going to be storing all of our meals and now underneath we're going to be using the use effect and here let's just provide

our callback function today and also our empty dependency array right here now I'm going to be using ause and for this exuse we have a get method and this get method allows us to get our data or to fetch our data from some sort of a URL so URL which is the mb.com API then Json version1 one filter. PHP question mark C is equal to cood we're going to be grabing our data from this API and I'm going to also use the then case all just provide a then right here and for this then we

are going to be providing our res and now Inside this res first of all I'm going to just log this res to the console so I'll use like r. data and then meal so now if I save my file and let me show you all of that if I open my console right here and inside this console we have like all of that data which we are now fetching from that M DB okay so we have a ID we also have the St me and we also have this thumbnail I can copy it and place

it here and hit enter and now here you can see we're now getting the Mail image and so on and so forth so yeah this is how we are going to be fetching our data but now uh let me just send this data to this items right here so I'm going to comment this line out and I'm going to be using like set items and I'm going to use like rest. data. Ms so this is how we going to be sending our data to our state and now I'm going to also provide a catch statement

like in some situation we will get some sort of error so then we don't want to do Anything crazy with that error so I'll just use like console. log of that error okay so that's going to be for our catch statement so this is how we are going to be fetching our data okay so now fetching our data is done the next thing that we have to do is that we have to render that data and to do that I'm going to remove this males from here and I'm going to provide a class name of

items container which I already set up inside my stylesheet and here we're Going to be providing a function which will be items list and it's going to allows us to render all of that items to our Dom so I'll use like cons items list and that's going to be equals to items. map because you want to it over through all of that items which we already pushed to our St okay so first of all we want to iterate over through all of that items and here we have to destructure all of that properties which we

are going to be using in this project so I'll use like stir meal and also stir me thumb and also the ID of that specific meal now outside from there what I want to do I want to just use my return statement and inside there I'm going to be using a section with the name not a name with a class of card and now inside this section we're going to be using our image and for the this Source we're going to be providing our St meal thumb okay which will be the image of our meal

okay and now for this alternative text I Can just write like Mr me it doesn't really matter and now underneath this image we can create our section and I'm going to provide a class of content today and now inside this section we're going to be creating our paragraph which will be a stir meal and we will also provide another paragraph with the pound symbol you don't even have to do that that's just for a label and we will just render our ID me right here come on id M there we go and now if I

save my file And here you can see we are now getting our image also our title and also that specific ID so if I just remove that pound symbol right here let me just remove the sem file and here you can see we no longer getting that pound symbol and this pound symbol is just for the label or whatever you want to call it okay so this is how we going to be fetching our data and this is how we are going to be rendering that data by using the use effect and also the xos

library Next we're going to be building a calculator so I'll just create a calculator. jsx file and I'm going to be using my rafc semi file and register that calculator right here okay so first of all we have to import that I'm going to also go ahead and go to my stylesheet and R every single thing from there and place my new Styles right here okay so now I'm going to go into my calculator and the first thing that I want to do is that I want to grab my use St because obviously we would

need some sort of a St we will also import our St file. CSS sem my file and now inside this calculator we're going to be using our cost and input value and then set input value and that's going to be equals to or us and the initial value will be just empty string now I'm going to go ahead and go to my GSX and provide a form right here I'm going to also remove this div and provide our form there and now inside this calculator First of all I'm going to also provide a class of

calculator to it so c l c l a t o r and I'm going to also provide the name of call could be fine and now inside there we're going to be creating our input field with a class of value and for the value we're going to be providing our input value right here now underneath that we're going to be creating a lot of span so I'm going to go back and let's just create our span with a class of or you know what yeah we Will provide a num and also the clear class and

here we just have to specify our C right here for the clear and when somebody clicks on that we're going to be firing this clear function okay so let's just create this clear function right away now underneath this St we're going to be creating our clear function which will just allows us to clear out our input field okay so we're going to be only providing our empty State inside there and now underneath this spin we're Going to be creating a lot more spins so what I'm going to do is that I'm going to just create

a spin and yeah here we just have toire a for Slash and I'm going to just duplicate there like a lot of time okay let's just remove the and change there to the star and S then 8 9 - 4 5 6 and then plus I'm going to also provide the own click EV Handler on them so when somebody clicks on each of them we're going to be firing the something called the display function which we Going to be creating in a few seconds it's going to take some sort of a perimeter of symbol so

I'm going to copy all of their symbols and I'm going to provide the as a string value right here plus plus will be a special one so we're going to be using like uh class name and I'm going to provide a class name of Plus to it now underneath there we're going to be once again creating a lot of spins so I'll just use like uh span time okay so if I just hit T and I'm going to Have to save there and I'm going to use like one two then three then 0 0 0

then Dot and also come on just a DOT and we also have to provide our equal to sign I'm going to provide my multic cursor selection right here and I'm going to use my own click event handler like when somebody clicks on there we're going to be firing this display function which we're going to be creating in a few few second and here we have to provide all of that values right here I'm going to Copy that and provide the as a string value okay and for this final one which is equal so I'm going

to provide a class name of there which will be set to numb and also equal right here okay so now here for this one we're not going to be using a display I'm going to provide a calculate function right here so which will say like c c a and remove all of that execution from here but you know what we have to execute the now I have to create two function one will be for Display and one will be for the calculate so for this display function we are not going to be doing anything crazy

so let me just create the right here we are going to be using like display it's going to just allows us to display our value so it's going to take some sort of a value which we are already specifying right here like all of these values okay so it's going to take some sort of a value and then what we want to do with that Valu is that we Want to use our set input value and here we have to provide our input value from our state and also we have to just combine or add

the perimeter value of value to it okay so it's going to allows us to like render all of that data and here you can see this is how it looks like I can type any kind of data right here and now the final thing that I want to do is that I want to just provide a calculate function okay so it's going of just allows us to calculate our value Now underneath we're going to be creating yet another function for calculate it's not going to take any perimeter but we are going to be using the

set input value and here we have to specify the EV method or function which I'm going to show you in a few seconds and inside this a we're going to be providing our input value right here so now if I save my file and now let me just test this out so if I just provide like 2 + 2 and if I use this equal to Sign right here it's going to give us four and now if I just provide like 5 + I don't know maybe 10 so it's going to gives us 15 and

I can also use like uh 2 minus 1 so it's going to gives us one and I can also use like 2 * 2 it's going to give us four 2 * time 2 there we go it's going to give us four and now I can use like 5 / by or you know not five but 6/ by two is going to give us three okay so which means like everything is working inside our calculator but how is It working it is working because of this e function or E method whatever you want to call

that and I'm going to go ahead and go to my JavaScript e method and this is a bit scary method okay so here you can see we have two variable like X and Y X is holding the value of 10 and Y is holding the value of 20 and we also have another variable which will take a text and here you can see we're now providing that X and Y as a string value and now it's going to give us the result Of there okay so if I go ahead and try this out and as

you can see right here we're now getting 200 and you know what let me just show you there if I just copy all of there come on I'm going to God damn it God oh my God it is not it is not allowing me to copy there let me just copy there and open my console right here and run that code right here so let's just refresh there clear this out and we have God damn it we have to first of all write like allow pasting And now I can just provide like all of their

text right here clear this out here you can see we have our X variable and Y variable and then we are providing a x * Y and now we are using the aail method and then we're providing our text value which is like X time Y and now I can just use like result right here so if I just use like result and go back and hit enter so now it's going to give us the result of that string value keep in mind whenever you are using there Keep this statement in mind executing JavaScript from

a string is a big security risk like you are not allowed to use this a method in the production ready apps we are using them because we are only working with just a simple simple calculator app but you are not allowed to use this a method on a bigger project especially if you are working with some sort of a company or with someone else okay so keep that in mind so this is how our calculator work right Here time for the fifth project so now in this project we're going to be building a toggle background

color so let's just create this so I'll use like t o GLE e toggle background color. jsx and inside I'm going to be using my RFC and let me just go ahead and go to my stylesheet every single thing from there and provide my style right here okay so we are just selecting the ban section we also styling the button and also the H1 okay so that's going to be a lot of fun And now inside this toggle function first of all you want have to register there right here so I'll use like toggle background

color sa my file and we have to grab our St first of all so I'll use like Imports use St we have to import that from the reactjs and we also have to import our style. CSS inside there first of all I'm going to be creating three stat I'll use like background color and then set background color and that's going to be equals to the US St And we're going to be providing the initial value of y today now I'm going to also create another one for the text color and set text color right here

that's going to be equals to the UST St and for the initial value we're going to be providing like one B1 b1b okay kind of a grayish color and we're going to be also providing a color for the BN style as well so we can use like set button style and now we have to provide the initial value of totally white today Okay so now that we successfully created our state the next thing that we have to do is that we have to use the inside our UI so I'll just remove that from here and

provide my style right here so I'll use like style and for this style we're going to be using the background color come on let's just proide our background color and that background color will be equals to that color which we've already set up inside our St next we're going to be providing a color and that color will Be now equal to this text color so we're going to be copying there and now let me just place it right here and and now inside then we're going to be creating our button which will allows us to

toggle our classes or colors to be precise so when somebody clicks on this button we're going to be firing the handle click function which we are going to be creating in a few seconds but now let me provide a styling today so for the style we are going to be providing a Button style which is now coming from this stat right here and we going to be also providing a color which will be also set to the text color and also we're going to be providing a border and here we're going to be using the

Turner it's all used two pixel solid and then that text color which we've already defined up above okay so if I save my file and here you can see we are now grabbing that text color from this t Okay so that's going to be just for the Functionality the next thing that I want to do is that I want to provide a label and here we're going to be rendering our label totally dynamically so if our background color is equal to this color which is like 1B come on 1B 1B 1B so in this situation

we're going to be using the black uh theme as a label we are going to be providing a black theme as a label for this button but if that's not the case so in that situation we are going to be providing like White theme Okay just like so let me just show you there and refresh there you cannot see there because everything is not only set to White and now underneath this button we're going to be creating a section for our content so I'll create a section with a class of content and inside this content

we're going to be using our H1 which will just say like welcome to come on to a and then we're going to be providing our br and real word dot dot dot so now if I save my file and refresh That we cannot see anything I don't know why let's just go ahead and go to our console we getting this error because we have to create our handle click event handler okay so I'm going to go ahead and copy the name of there and let's just create there right here we are going to be taking

care of all of the state I forgot to do that so I'll just create my function with the name of handle click and when somebody call this function in this situation we're going To be taking our set background color and we're going to be providing the Turner value right here so if we have the background color and if that is equal to White so in that situation we're going to be using this color which is uh 1B 1B 1B and if that's not the case we're going to be toggling that value to totally white color

okay and now let's just take care of this text color which we have right here okay so the initial value will be set to this 1 B1b and we have to just revert that back so I'm going to provide like text color and if that is and if that is equal to this 1B 1B 1B in that situation we're going to be changing the color of that to like FF a 31 a and if that's not the case we're going to be changing the color to 1 B 1B 1B once again okay so that's going

to be it for the text color but we also have to take care of this uh button style so we're going to be just using that or you Know what set button style would be fine and we have to check if background is equal to totally white in that situation we going to be changing our color to 1 b 1 B 1B and if that's not the case we're going to be using a totally white color so here you can see we have our text like Welcome to the Real World if I click on this

White theme it's going to first of all change the background color also the text color and it's going to also change this text value so let me Just zoom in a bit like that and now if I click on this now it is saying like white color and now if I click on this it's going to give us like black theme right here so yeah that was our color or toggle background color okay so time for another project we going to be building a hien search bar so I'll use like hien search bar. jsx inside

then I'm going to be using a RFC comment this line out and grab our hidden search bar s my file go to my Styles sheet remove every single Thing from there and paste the new ones check this out in the browser and there we go ladies and gentlemen so the next thing that I want to do is that I want to grab first of all my stat so I'll use like you st and we will Al need to grab our CSS so I'll go to my style. CSS we would also need to install third party

Library which is called the react icons I'm going to be using npmi react icons and now if I H enter so can install that in my machine right away okay now then Successfully installed so we're going to be only grabbing the fa search icon from the reactjs or from the react icons to be precise now inside this hidden search bar we're going to be creating two inputs so I'll just use like uh show input and also the set show input that's going to be coming from the UST St and the initial value will be set

to false I'm going to also create a BG color and also the set BG uh color and that's going to be Equals to the US St and the initial value will be set to toally White I'm going to change there to a section instead of a Dev let's just change there to section and I'm going to provide a class name of container today and also the style of this style which we are already specifying for our input guess I'll use like background color and also that's going to be equals to our BG color right here

so now if I save there we going to be also providing the on Click event handler and when somebody clicks on there we're going to be firing this function and we will create this function in a few seconds and now inside there we're going to be first of all checking okay so if we have the show input in then situation we're going to be providing some UI and if that's not the case we're going to be providing another UI okay so I'll just uh hit enter right here and if that show input is equal to

true we're going to be Providing an input field which will have the type of text and also it will say like a placeholder of search dot dot dot but if that's not the case we're going to be using our fa icon if a search icon we're going to be grabbing there and we're going to be attaching the own click event handler on there and when somebody clicks on there we're going to be using like uh set show input and the initial value will be set to true I'm going to save my file and now nice

time To create this handle click okay so I'm going to go ahead and create the right in here okay we're going to be first of all changing the background color to totally uh 1 a 1 a 1 a and also underneath that you're going to be checking if e or event. target. class name is triple equals to The Container which in this case is equal to The Container so in that situation we're going to be using like set show input and we're going to be providing the the Value of false to it like here you

can see we're now providing the value of false here we also have to provide the value of false today and we're going to be also changing the background color to totally white color so now I'm going to save my file and check this out here you can see we have our icon so now if I click on that it's going to also change the background color and it's going to gives us this input field right here so now if I click on somewhere else so it's Going to remove that it's going to giv us this

icon so yeah this is also a simple project which I want to share with you guys it's time to create a simple testimonials project so I'm going to create my component first of all. GSX and use my RFC and create my testimonial right in here baby change the style remove every single thing from there and place a new styling and here we have to go ahead and go to our testimonial first of all we have to check how it looks Like and yeah it is looking great it is looking great that was a great start

so the first thing that I wanted uce that I want to grab my used St and also I want to grab my style from the style. CSS and what I'm going to do is that I'm going to create my current index and also Set current index first of all and that's going to be equals to the US and the initial value will be set to zero because obviously you want to start from a zero and then we're going to be Creating a lot of testimonials so we have a few testimonials we have a variable and

now inside this variable we have our array and now inside this array we have a few objects like uh object one 2 and three and inside these object we have a code and also the author who said that code so we have like this is the best product I have ever used and also I highly recommend this product to everyone and this product has completely change my life so yeah these are my Testimonials so I'm going to hide there from here the next thing that we have to do is that we have to use the

inside our UI so what I'm going to do is that I'm going to provide my testimonial as a class to this Dev and also I'm going to create there with a class of testimonials and then Dash Cod and inside there first of all we are going to be grabbing all the testimonials which we already have right here and we have our array so which means like we Can grab the index from there so I'm going to use like brackets and here we're going to be passing our current index which is coming from this state right

here so basically it's going to start from the zero because we are providing the initial value of zero today so it's going to give us like testimonial of zero which means like we're going to be getting only the first testimonial right here like this testimonial so that's done I'm going to Go ahead and copy my testimonial and place there I mean like current index and place that there and we are only interested in getting the code not the author but only the code okay so we're going to be getting there and now if I save

my file and here you can see we now getting this code right here and now the next thing that I want to do is that I also want to show the author so to show the author we're going to be using like that day once again and I'm going to Just change the class name to author and now inside there we're going to be just providing a dash and here we have to use once again our testimonials and we're going to be once again providing our current index and now in this situation we're going to

be grabbing the author from the so here you can see we're now getting our jie do and yeah that's looking amazing now the next thing that I want to do is that I wanted to create two buttons the first button will just Gives us the previous St and the next will gives us the next St so I'll just create a with the class of testimonials now and now inside there we are going to be creating two buttons like pre and also the next button right here okay so let's just use our on click event handler

on there and when somebody clicks on that we're going to be firing like uh handle preve and also we're going to be firing the handle next uh click right here okay so I'm going to Copy that and now let's just create there right here come on const handle pre click and now inside there we're going to be using the Set current index and let's just provide our current index plus our testimonial come on or testimonial and we're going to be only decrementing one from there then we have to divide all of them by using our

testimonials. length Okay so now if I save my file and let's just refresh there oh it's going to gives us an error Because we also have to create this handle next uh function right here so we're going to be also creating there right here so what I'm going to do is that I'm going to just duplicate this in or you know I'm not going to duplicate there let me just create my cons handle next click uh function right here Here and Now inside then we're going to be using our Set current index one more time

and we're going to be providing our current index plus one once again then We will divide there by testimonials. length Okay so now if I save my file and here you can see we have our previous button and we also have our next button right here so if I click on this previous I mean like next button so it's going to give us a next product then I can also click on this previous one so it's going to gives us that previous product right here so I can go on and on so it's going to

gives us all of that next product then can go On and on on the previous St so it's going to give us that previous items right here okay so this is how we are going to be getting the next I mean like the previous uh State and this is how we're going to be getting the next St and we can also remove these curly braces from here and I guess I'm going to have to leave there for this one so let's just save my file and here you can see I can click on the next

it's going to give us the next item and I can also Click on the previous it's going to use as the previous item so if you have like a lot of codes you can totally get like a lot of different result right here so yeah that was our basic testimonial project in reactjs okay so time for the accordian project so I already changed the styling and I also have this UTS folder and now inside this UTS folder I have this content.js file and now inside this content.js file we have our accordian data we're now exporting

this So which means like we are going to be using that in other files here you can see we have our array and then inside this array we have our object it's going to have the title which will say like what is HTML and then the content which will just like uh clarify like what is a HTML then we have like what is a reactjs what is a nodejs what is a goang and so on and so forth and you are more than welcome to provide more data to there if you wanted to so yeah

this is how we are Going to be exporting there so that we can use it in other files so the first thing that I want to do is that I want to create my accordian component right here so I'm going to use like accordion. jsx and let's just use our RFC save my file and go to my app and registered there but we are not going to be registering our comp onon it like that the first thing that we have to do is that we have to get our content which is uh accordian data come

on if you can get The we have our accordian data God damn it we have to use our import and we're going to be grabbing something from let's just go ahead and go to the UTS and we're going to be grabbing our data from that content okay so the data will be that accordion data now we have to copy it we have to create our dat with the class of accordion and inside this D we're going to be iterating over through all of that data because we already know that this is array so which means

like We can use the map method on there so I'm going to use the map method right here and we're going to be restructuring the title and also here you can see for each object we have the title and also the content right here so we're going to be destructuring them and the next thing that I want to do is that I want to call my accordian component right here and we are going to be passing two prop St we're going to be passing the title as the prop to this title I mean like to

This accordian component we're going to be also passing a content today and we are going to be passing this content as a prop so we are now getting all of the title and all of the content from this accordian data and we are now passing that to our accordian component so I'm going to go into my accordian component right here and now let me just restructure the so I'm going to use like title and also the content so this is how we are going to be destructuring Them but the first thing that we have to

do is that we have to grab our Us St and we also have to grab or Styles sheet so I'm going to go ahead and go to my style. CSS and that's going to be it okay so yeah now the next thing that I want to use that I want to just make a state so which will give us like is active and then set is active that's going to be equals to the UST State and for the initial value we're going to be providing a false state today and now For this return statement I'm

going to remove this accordion and change this div to or section and now here for this section we're going to be first of all providing a class name and that's going to be the cion card we will also provide the key and key will be math. random you can like basically provide anything there like you can use The UU ID if you wanted to now inside there we're going to be creating with the class of header and when somebody clicks on there we're Going to be firing our function which will say like set is active

changing that to like is active like once again that is now set to false so now here if that is set to false it's going to change there to true and if that is set to true it's to change that to false okay and now inside this div we going to be creating yet another div which will just say like uh my title and now underneath this title we're going to be providing our paragraph with the class Of Icon and here if it is active so in come on if it is tail in that situation

we're going to be using this Dash but if that's not the case we're going to be using this plus symbol right here let me just save that and here you can see we have our accordion right here so if I click on that it's going to change the icon to minus and if I click on there once again so it's going to change there to plus okay so this step is now done the next thing that I want to do is that I want to take care of this content as well so I want to

show the content and I also want to hide the content okay so I'll just create a div the class of content and inside this content we're going to be checking if it is active and then we're going to be creating our paragraph let me just create my paragraph right here I'm going to provide a class name of card info and for this card info we are going to be rendering our cont content but if that's Not the case you're not going to see anything okay so now let me just show you there we have to

click over here you can see this how my UI looks like but if I want to see the content of like what is reactj so I can totally click on there and I can read the content I can totally uncollapse then and so on and so forth so yeah this is our basic or the most basic accordian component in reactjs time for the ninth project so now in this one we're going to be Building the form validation so I'll just create a form. jsx and let's just use our RFC sa my file and render my

form right in here semi file let's just go ahead and go to our stylesheet and remove every single thing from there and provide our new style right here and check this out our form is looking cool but our code will not look cool because we're going to have to create a lot of state and then we have to keep track of all of the stad and this because we are Not using a form validation Library which we will learn in this course but not right now called the re hook form we will learn there very

soon but not right now so the first thing that I want to do is that I want to import my used St save my file but I don't know uh here you can see we are getting this data God damn it what the hell am I doing God go to my amp comment this line out sem my file so the first thing that I want to do is that I want to create a Lot of State like the first state will be for the username and then Set uh username that's going to be equals to

the use St and the initial value will be just empty string let's create for the email and then set email set email that's going to be equals to the usad and once again empty string let's create for the password and then set password is going to be equals to the US St and the initial value will be empty string create for the confirm password so Confirm password and then set confirm password is going to be equals to the US St and let's just put our empty string right here next we have to create a lot

of State for the errors so I'll create like uh State for the username error username and then also create one more for the set error username it's going to be equals to the used St and the initial value will be empty string okay let's just create for the email one so error email and also set error email in equals To the used St and the initial value will be empty string create for the error password and then set error password it's going to be equals to the US St and the initial value will be empty

string let's just sare one more for the error confirm password c n f i RM yep that's correct we also have to use what set error confirm password right here it's going to be equals to the US St and the initial value will be empty string okay now underneath all of There we're going to be also creating for the color so I'll just provide like con um user color and then set user color it's going to be equals to the US St and the initial value will be empty string okay let's create for the email

color and also set email color it's going to be equals to the US St and that um initial value will be empty string let's create for the password color and also set password color it's going to be equals to the US St and empty string Let's just create for the final one which will be a confirm password color it's going to be equals to set confirm password color it's going to be equals to the used St and the initial value will be empty string okay that was a lot of strats okay so now let's just

keep track of all of their stats but first of all we have to build our UI then we're going to be jumping into all of that stuff so I'm going to just change that to like a react Fragments and inside these react fragments we're going to be creating our div with the class name of card okay so now inside this card we're going to be creating our card image and uh yeah I guess that's going to be fine now underneath this card image we're going to be creating our form and we're not going to be

providing any action today because we don't want to send our data to any server and we're going to be using our input field this input field Will have the text and also the placeholder of name okay so the style I'll just put like the style will be set to border color and the Border color will be equals to the user color which we've already specified right in here okay and for the value I'm going to provide the username as the value and I'm going to also provide the own change event handler when somebody change or

type something inside there so we're going to be using our set usernames come On set username and here we have to specify our event. target. value so if I sve my file and check this out so here you can see we getting our image and also we are getting this input field right here which is looking amazing so the next thing that I want to do is that I want to show my error if we have one error okay so I'll just use my paragraph with a class of error and here we're going to be

using like error username okay and Now underneath there we're going to be creating our input field so I'll just create input field with the type of text and also the placeholder will say email and we are going to be providing some sort of a style and that style we say like a border color and the Border come on Border color and the Border color will be equals to the email color okay which we've already specified up above and for the value we going to be passing an email as a value and when somebody Types something

inside this we are going to be carrying this event and also we going to be using our set email event. target. value inside the sem my file so now here you can see we have our email field right here and underneath them once again we're going to be using our paragraph the class of error and LS render or error email right here we're going to be creating yet another input field and that's going to be exactly the same thing but in this case we're going To be providing a password and we also have to change

there to password and this one to email right here so for the style I'm going to provide the style of the Border color of come on Border Co o r there we go and the Border color will be equals to the password color and now we going to providing a value and the value will be set to password okay so when somebody types something inside there we're going to be using our set password and here we have to specify our Event. target. value save my file and here you can see we have our password field

as well and underneath that we're going to be once again rendering our error so I'll create a paragraph with the class of error and which will say like error password and now to need this paragraph finally we are going to be creating an input field for the confirm password so I'll just for a password once again and we are going to be providing a placeholder which will say Like confirm password and also uh the style will be equals to that border color once again so I'll use like border color so l o r and the

value will be a confirm password uh color would be fine there we go and also I'm going to provide the value of confirm password and here we're going to be providing the own change event handler when somebody tried to change something so we we're going to be calling this function which is like set confirm password and provide Our event. target. value inside there now underneath there we going to be creating our paragraph with the class of Errors once again or just error and here we are going to be rendering for error confirm password like so

now underneath there we going to be creating our BN with the class of submit BTN and also we're going to be providing the on click event handler when somebody try to click on this we're going to be using our valid dat function which we going to be Creating in a few second so let's just create this validate function and that's going to be here I'm going to go to the top and create my validate function right here const validate is going to take the event and inside that we're going to be using like event. prevent

default come on p r v n t prevent default like so and provide our check so if we have like a username link is greater than a so in this situation we're going to be using Like set error username and we're going to be setting there to empty string and also for the set user color we're going to be providing a green color to there and if that's not the case so in this situation we're going to be using like set error username and for the error we are going to be specifying like username must

be at letters long or letters and also for the set user color we're going to be changing there to Red so if I save my File and check this out so if I just like provide like two s's and click on there it's going to give us like user must be or username must be at letters long okay so if I just put like random stuff and click on there it's not going to give us that error and now the line is set to Green okay that's cool now we also have to provide a validation

for the email so underneath that we are going to be checking like if email. includes this at gmail.com so if that's The case we're going to be using like set error email ins set that to empty string and also set email color will be set to totally green but if that's not the case in that situation we're going to be using like set email color and we have to set the to toally Red once again and we have to use our set set error email and change that to like email should be or should have

at gmail.com or yeah at gmail would be fine so if I save my file and if I just Specify something and here you can see we now getting this error right here so if I just use like at gmail.com or something C on there and now it's going to give us that green uh green line right here now underneath that the next thing that we have to do is that we have to also take care of the password so I'll use like if uh password. length is greater than add characters add characters not a ASX

so I'll use like set error password and change that to Empty string and also set password color and change the to totally green color and if that's not the case we're going to be using like said error password and provide like password should be add letters long and underneath that we're going to be using like set password and change that to Red so if I save my file and if I only provide like 1 two three and now if I submit this this error like password should be 8 letters long so if I just specify

something else click on That now it's going to gives us the green and now for the final validation we're going to be checking the confirm password so if our password is not equal to this empty string so and password is equal to the confirm password okay so we are going to be using like set error uh confirm password and we have to change that to empty string and also we have to use our set confirm password uh color and we have to change that to totally green okay so now underneath that we are Going to

be also providing the else class if that's not the case we're going to be using like set error confirm password God damn it set error confirm password we have to provide this error like passwords didn't match ah God damn it we have to WRA in double Cotes like so otherwise we're going to be getting an error change them and we're going to be also using like set confirm password password and provide a red color right here so if I Save my file let me just uh refresh there and if I just write like 1 2

3 and also if I just write like 222 click on that it's going to give us the an error and now if I write like uh 1 2 3 and also one 2 3 inside there it's not going to give us any error for the last one but it will give us error for this one because the password should be add characters okay so yeah this is how our validation will look like so if I click on that it's going to gives us an error And now if I specify like some sort of a name

like my own name husan or husan web rather test at gmail.com and then test1 23 test one 2 2 3 4 5 and test 1 2 3 4 5 it's going to giv us a green lines right here so yeah that was our basic form validation in reactjs hey guys and walk to YouTube channel so in this video we're going to be creating this project by just using react jss which means like we're not going to be using any backend services like mongod DB Mongoose and Express JS and all of that kind of good stuff

but instead we're going to be just building this project by just using reist so this is not a huge project to be honest but we are going to be rendering a few components and we are going to be learning about how we can do a filtering in reactjs so like we can filter items through search and we can also filter through this buttons right here and also these uh what do we call it custom uh radio buttons and all of That kind of stuff so let me just show you what this project is all about

so let's suppose if I want to search for a specific U product like I don't know I'm going to search for this one so if I just type Nike so I'm going to just write like n i ke so here you can see long uses all of the products right here which Nike has so I'm going to just write space and then I'm going to just write for zoom and here you can see it will now gives us this specific product Which I'm searching for okay so I'm going to just clear that and here you

can see it will now giv us that products once again and now if I just click on this Nike and here you can see it will now giv us all of the products which Nike has and now if I click on and by the way all of this data is totally random and and they aren't specific Nike and edits and you can provide a specific products for them but for me I just put random images of shoes and sandals and Stuff okay so you will find a link in the description below if you click on

it it will bring you to my gab repository and you can download all of the code or you can download that um db. JS file and then you can grab like all of that arrays of data okay so if I just click on this EDS it will now gives us all of the products of EDS and once again all of these products are totally random like I don't even know the names of these and here you can see we just Specify the amount of stars they get and also the reviews they get and the previous

price and the new price and you can change that however you want and I'm going to also show you how you can provide that functionality in this app as well if you click on the V so it will not uses all of the product which this Vans have okay so this is the second filtering this is the first one this is the second filtering let me just click on this all products right here and here You can see it will not goes all of the products if you click on this all one more time so

here you can see it will now gives us all of these products if you click on the sneakers and here you can see it will just gives us their sneakers if you click on a Flats it will gives us Flats if you click on a sandals and it will gives us these shoes they earn sandals as I said like all of the data is totally random but you can specify like different kind of images For the sandals and I'm going to also show you how you can do that if you click on Heels so here

you can see it when long uses heels and you can also filter through different kind of prices like if I click on this all it will now gives us all of these products which um these Pro prices like random prices we have if you click on from 0er to 50 it will gives us all of their products which has this 50 uh what do we call it 50 price right here let me click on 50 Through 100 it will now gives us all of the products which are 50300 and we have 150 and we also

have over 150 so here can see the prices and you can also change there however you want all right so that's that now you can also filter through the colors if you want to so I'm going to just click on all and here you can see it uses all of the colors but if I want to just get the black color I'm going to just click on black and here you can see it gives all of these black Color and I mistakenly put this one right here inside a black color as well but anyways that's

also awesome you can also change that if you want to and now I'm going to click on a blue it will now just use this blue products and now if you click on red it will just gives us red products right here if you click on green it will just gives us these green products right here and finally if you click on a white so here you can see it will now gives us all of the white Products right here I'm going to click on this all products one more time it will now gives us

all of these products right here and so this will be a good build and this project will help you monster different kind of techniques in reactjs like different kind of ways to filter through a data using just reactjs so we not not going to be using any uh Redix toolkit and all of that kind of stuff but we are going to be just using uh react JS and also react icons for These icons and we're not going to be also using any um bootstrap U react bootstrap and also we're not going to be using what

do we call it Talon CSS and and all of that kind of stuff for styling I'm going to be using CSS just a pure CSS if you don't want to write it so you can also get all of the styling from my G repository and by the way all of the code will be available in the description below you just have to click on that link which will bring you to my GitHub repository and there you can just uh search through different commits or you can also get all of the code if you want or

if you want to follow along with this video feel free to do that go back first of all and I'm going to just write code and then I'm going to just write Advan filtering and now I'm going to hit enter so here you can see it will now open this project right here inside this window right here okay so I'm going to just zoom in a bit so that you guys can See everything a bit better and I'm going to going to just hide that up above from there all right so here you can see

my sidebar is right here if there annoys you so you can just I don't know you can just right click on it and send it right here or you know I'm going to just stick with this setup right here because for a lot of developers that would be preferred way to go and what I will do is that I'm going to just remove this f. CSS file and also this index. CSS not this index.js file but just this logo svgs and all of that kind of bad stuff not bad stuff to be honest so now

I'm going to just go inside and I'm going to remove this gen6 from here and I'm going to just write H1 uh let me just write H1 right here of hello world right here okay and I'm going to also remove this logo from up above and also this app.js or app.css file I'm going to remove the whal from here and also that react strict mode as Well remove this one and also this one now I'm going to sell my file and now what I will do is that I'm going to close this one out and

I'm going to just write npm start to start my project right here okay so I'm going to just wait for it to start my project it will not okay would you like to run the app in another port in okay we've already opened this one so I'm going to just close that in a few second so I'm going to just close that in a second and then I'll come back now let me just close there hit contrl C now I'm going to just use npm start so it will now just start this project right here

inside this window and what we are seeing is this hello word right here which we've wrote inside this M.J file right here okay I'm going to just close this one right here from here all right so that's the the first thing which I would do is that I'm going to create a folder right here and I'm going to just give a name of like DB And inside this DB folder I'm going to just create a new file I'm going to give a name of like data.js and inside this data.js file I'm going to grab a

lot of things so I'm going to just grab that and I'm going to show you where you can find that here you can see I have all of these data right here inside this project and you can find all of this data in my giab repository so it's not much but here you can see we are just getting this data array and inside this Data array we have just a few objects right here and we are storing the image property and we are just specifying different kind of images to it and we also providing a

title for a specific product and we have a star which is just a icon which we going to be installing right here and I just provide a class of like rating star and here you can also see we have reviews and I just provide like one two three you can provide how many you want then we have a previous Price and the previous price is this one or used to be this one and the new price is $200 or something like that and we have a different kind of companies like Nike and we have uh

I don't know different kind of companies like w and puma and stuff like that and then we have different kind of colors and also different kind of categories like sneakers and heels and I don't know there was a lot of them so what I'll do is that I'm going to copy all of that Content and I'm going to place it inside this project right here so I'm going to just save this file and this is a lot of alms right here and you can specify more if you want to and now I'm going to just

cut this data.js file right here and I'm going to close this DB and what else do we have to do the first thing I would do is that I'm going to just create a components folder where we are going to be storing just or custom components you will see that just in a second so I'm Going to just write components there we go and we are going to be creating a few components right here so I'm going to just write button.js and I'm going to also create a new component I'm going to give a name

of like card. JS then we have another one which is input uppercase input. JS there we go and I'm also using this extension card let me just open that extension uh this es7 and react and Redux uh so let me just click on there and I'm also using this Extension if you guys don't know about that uh so feel free to check on my reactjs course or you can just quick Google search like what is that uh extens I was talking about so now I'm going to just uh close that and I'm going to also

place this import statement right here and let me just import it right here so let me just zoom in a bit so you guys can see everything a bit better I'm going to use RFC and I'm going to just cut that I just like It that way if you want to put it right here like this import Ser right here so feel free to do that but in my case I just kind of want to work with this kind of structure so I like this structure I prefer this structure uh and yeah you can choose

like export segment just in one liner but in my case I'm going to be using like this and now I'm going to just write like RFC and I'm going to remove that let me just copy it and I'm going to place this Input right here at the bottom so now we successfully created this card component input component and that button component but we are not going to be using it right now so say byebye to this components folder right here so now the next thing which we are going to be creating is that we are

going to be creating a navigation section then we are going to be creating a product section then recommend it and inside there or not inside but we are going to Be also creating a side Mar so let me just create a new folder I'm going to give a name of like navigation there we go and now inside this navigation I'm going to first of all create a nav do JS component and I'm going to also write like na. CSS right here as well okay so I'll just write like uh R A or RFC and I'm

going to remove that and I'm going to just write my navigation right here okay and I'm going to also import my CSS inside this file one more time as well So I'll just go one level and then now. CSS so we're going to be placing all of our CSS inside here so what I will do is that I'm going to render this component to the browser so I'm going to just use it right here remove that and I'm going to just write a nav right here hit enter and it will now grab this na from

their navigation component right here and I'm going to also change the name of it to like navigate ation there we go I'm going to hit enter Right here and I'm going to close it manually so now if you sell a file so here you can see we now just getting NAB right here okay so everything is working the way we expect them to work and yeah that's cool but what else do we have to do we have to create another component or another folder for products so I'm going to just write products inside this products

I'm going to create two files the first one will be just products. JS and the second one will be products. CSS So the same things will apply right here as well remove them I'm going to cut this component export products there we go and now I'm going to also import this um what do we call it products not this one but products. CSS there we go okay so that's also cool but now what I do is that I'm going to use my react fragments because I'm going to be rendering a lot of components right here

and I'm going to just use products okay and it will just import it by default if if you're Using visual story Rec corders so that's going to be awesome so here you can see we have navigation and products and you probably know all of these stuff and I'm going to close this one as well now let me just grate one more which will be recommended so recommended there we go r e c o m e n d e there we go I'm going to copy this one name because it's kind of a long name to

so we have recommended. Js and we have recommended. CSS file so I'll just write RFC remove that copy it And then we have uh recommend oh come on recommended there we go I'm going to also get my import statement of uh let me just copy this name it's kind of a long name to type you know what I'm saying so I'm going to just write recommended. CSS and also let me just grab it from recom not reacton but recommend ah r e o m e n d d okay it's not helping me in this case

so I'm going to have to import it import recommended there we go recommended come On from go level and recommended and we have recommended so I'm going to sve my file and here you can see we have this recommended right here anyway so that's cool I don't know why I just close this file but now let me just create a sidebar and inside that sidebar we going to be creating different kind of folders so I'm going to just write Side Bar and inside this sidebar I'm going to be creating different kind of folders inside that

folders We Are going to be Having different kind of categories of components so I'm going to just write category and inside this category I'm going to just write Cy g. CSS or not just CSS JS would be fine I'm going to copy them and we are going to be also creating category. CSS as well so I just write RFC remove that and come on Cut there and category and yep let me just grab my cat T come on category. do CSS there we go save my file remove both of them and now Inside this sidebar

folder I'm going to be creating one more folder and I'm going to just give a name of like colors uppercase colors there we go and inside this colors folder what I will do is that I'm going to be creating two folders or one component and one will be for styling like colors. JS and we have another colors. CSS is that color yeah I I write a colors there we go so cool anyway so I'm going to just remove that statement copy it and then we have Colors okay it's kind of a little bit challenging for

typing and talking so sometimes it's kind of it's kind of challenging so I'm going to just sell my file remove both of them okay so let me just save that file let me just create one more folder inside there and I'm going to give a name of like price and inside this price I'm going to just give a name of like price. JS price. CSS there we go now let me just write RFC remove them And let me just cut it from here give a name of price let me just import my uh one let's

just go one level above price. CSS there we go and now let's just remove that and now here you can see our folder structure is now totally complete inside this navigation section first of all I'm going to start from jsx so I'll just write navigation as the navigation tag and inside this navigation I'm going to just write a div with the class of nav container because we're going to be Placing our input inside their container and as a type will be set to text we are going to be changing that and we are going to

be also taking care of that own change event handler and stuff later on but in this section enter you search search uh shoes will be fine all right that's cool but I'm going to also give a clause of something like to style it I'm going to just give a class name of like search item or search input would be fine rather okay so that's going to be For this div and inside this div we just put or input tag Right Here and Now underneath this div what we have to do is that we have to

create another one so which will be a profile container so this is kind of a useless one but herey we going to be also putting it and I forgot to install react icons here we going to be using icons so I'll just create a new terminal I'm going to open new terminal and I'm going to just use npm install if you guys can see it npm Come on man what I will do is that let me just go back so you guys can see it I'm going to just drag it right here and say byebye

to this one now let me just zoom in a bit so I'm going to just install it by using this power shell I'm going to use npm install react react icons okay hit enter so it will just install in a few second all right so here you can see we successfully installed this react icons so I'm going to just close this Powers shell and now The first thing that you have to do is that you're going to be grabbing a few fonts so I'll just grab like fi and then heart and I'm going to just

import it first of all is f i hard kind of awful name from react um icons and we are going to be grabbing this one from fi and we would also need to import these parts which is AI lure gu I and then we have outline and then we have shopping card and then we have ai outline user ad okay So I'm going to just grab that from react icons and go to AI so I'm going to sell my file and I'm going to use it right here so here you can see we have this

first anchor tag right here I'm going to use it right here so we have fi heart and I'm going to just use that and I'm going to close it not like that but just let me write for Slash and here what I will do is that I'm going to just give a class of uh nav and also icons as well and now let me just save that Underneath this anchor tag I'm going to create one more anchor tag and it will go to nowhere and inside that what I do is that I'm going to use

my AI outline user edit or whatever kind of font you have okay so now I'm going to add that I'm going to just write uh I guess this shouldn't be a user add but it should have to be a shopping cart there we go and I'm going to also provide a cluster like n icons okay so I'm going to just duplicate there and now I'm going to Change this icon name to AI outline user edit there we go okay so it will go to nowhere I'm going to just a for slash right here and I'm

going to sve my file and what are we getting okay AI outline shopping cart is not defined let's go to the react icons all right so here you can see we have this react icons right here I'm going to just search for a shopping card there you go and now let me just grab that and I'm going to put it right here Okay so name was totally awful and the second one we have is uh I don't know outline user edit or something like that uh I guess this this one would be fine so I'm

going to just click on him and I'm going to place it right here sa my file and now let me check out and we have okay so I'm just meta type I'm going to copy it from there and I'm going to place it right here semi file and here you can see we now getting these icons and we have this input box Right here all right so now let me just Prov a little bit of styling to it so I'm going to just close this one and inside this SRC what I do is that I'm

going to just create index. CSS file for just a resarch so what I do is that I'm going to just provide a different kind of resarch you can f for if you want to so I'm going to just provide margin box sizing will be set to totally border box font family will be set to S SF and we are going to be selecting all of our Anchor tags and text decoration will be now set to none and color uh I'm going to just P like RGB of zero not Zer but 97 if I can get

97 I'm going to copy that place it two times so I'm going to remove that comma from from the bottom and now I'm going to select every Ali which we have inside this app and I'm going to just remove them like the list style will be just remove and then I'm going to be creating this uh buttons class for later buttons once we are Going to be jumping into the buttons so we are going to be using this class and that would be magic so I'm going to just provide a background of transparent and then

we have a border I'm going to set that to none and Border 0.6 pixel solid and totally CCC just a lighter border and I'm going to also provide border radius not this one but border radius will be now set to 5 pixel and then we have a color of uh 3 32 3 2 32 one more time okay so this is going To be the color and cursor will be pointer we are not going to be using this bones not right now and then then we have to go to in this na. CSS file let

me just highlight this so I'm going to just go inside this na. CSS file I'm going to click on them and I'm going to just start from the navigation first of all I'm going to be selecting this navigation container right here okay so I'm going to just select that and I'm going to provide display of tot flex and Border for the not border radius but border for the bottom I'm going to provide two pixel of solid F3 F3 F3 so this is going to be the color which I'm going to be providing justify cont will

be now set to space yeah space around was totally fine and align items was totally set to Center and I'm going to also provide a little bit of padding all around and then we have a z index of 999 because we are going to be using a display of what do we call it display of Flex so now let me just write margin of 2 pixel and now let me just save there and here you can see we are now just getting these icons right here and we just getting this input box so now let

me just go back and H be fine okay so you can increase or decrease that if you want to but in my case that's going to be totally fine now let me get all of the inputs which we currently have let me just remove this one from here and I'm going to provide a padding of 12 Pixel be fine and then 20 pixel and Border I'm going to remove all of the borders from here and then we have a background of this um F7 uh F6 F come on F6 one more time okay okay so

then we have the outline of none and then we have a margin for the right of 20 pixel and Border a radius I'm going to proide is like five pixel be fine and Position will be set to totally relative and width will be 14 pixel kind of voice I just metant 14 go back all right so that's cool and now let me just get my nav icons which are all of these icons which we provide these classes to it you probably noticed that but I don't know why I showed that 1.5 for Ram and then

high will be 1.5 for Ram and we have a margin for the left and it will be now set to Two Rim so if you s our file and that's looking more than awesome here you can see we have our input search field and then we have this I don't know why we didn't Specify color to it we have to provide some sort of a color to it uh input and I forgot to include some sort of a color to this anyways we will change that layer we don't have to worry about that oh yeah

we can change it right away not input but icons let me just change the color of them to I don't know yep that's looking yeah that's fine that's totally fine so this is our first navigation section so that Was it about this navigation section so the next thing which you have to do is that we have to jump into this product section and this product section will be responsible for all of the products where we are going to be rendering all of our products inside the cards and stuff so we later we are going to

be creating a component for cards but for this case we are going to be just uh rendering a few items so I'm going to just write a section right here and I'm Going to just give a class of like card container uh c t i n e r sometimes I made a lot of mistakes so that's why I'm just double checking these spellings all right so that's the card section so the next thing which you have to do is that we have to create a section for a card so now inside discard section we have

to render our image so for this case I'm going to go to my database right here my database my DB file so I'm going to just copy this image from here and I'm going To just place that image right here as alternative text I'm going to just write like uh Sho and now underneath that what do we have to do we also have to create a component or not a component but card uh details section and now inside this card details section I'm going to just write H3 of the card title I'm going to give

a class of like card title and now I'll just put some sort of a title like I don't know Sho and now you need that I'm Going to also provide different kind of section uh not different kind of section but just a section with a class of card reviews are e v i e WS there we go and now inside this cards reviews what do we have to do we have to get our uh start so I'm going to just click here and I'm going to just write star okay so let me just get this

one I guess this one will be fine okay I'm going to copy that and I'm going to just place it right here and like so and now what do we have to Do we have to also grab it from or react components so not react component but from react icon so I'm going to just write from and then react uh icons and now I'm going to go to the AI okay so now if you sell our file here you can see we are now getting our shoe we are getting the title and we are also

getting our star but we will need four star for this one so 1 2 3 four and now if you saell that here you can see we now getting four stars right here okay So that's cool as well and I'm going to also provide a span of total reviews so I'll just give a name of like not name but class of total reviews and now I'm going to just put like I don't know five reviews or four reviews would be fine okay so underneath this section what we have to do we have to create a

new section with a class of card and then price and now inside this carard price we have to put or price right here okay and now inside this price we are going To be writing our Dell and we are going to be rendering some like different kind of price like uh I don't know $300 would be $300 would be fine so that price is deprecated now we have to add a new price so I'm going to just add new price of like $200 or something like that and let me just put a dollar or you

know we're not going to be adding any uh dollar sign and stuff like that now let me just get my bag so I'm going to just Write bag and now we have to just search for a bag bag which is I guess this bag will be fine so I'm going to oh you know like this one would be fine copy them I'm going to past it right here like react component less than come on less oh my goodness less than sign and now we have to grab it from our react icons okay so I'll just

write import and then get this from react icons for slbs so now if you s file and now let me just refresh my Browser to render that component so here you can see this was a previous uh price this is a new price we have four reviews and we have this back right here so now it's time to style this component and then yeah that's going to be it for style so that's going to be it so I'm going to just go inside this product start CSS and I'm going to first of all select my

car container okay so I'll just write display of flex Flex W will be now set to W margin for the left will Be now set to 20 rim and now I'm going to also put margin for the top of Two Rim and also the Z index will be now set to minus 2 right right here I'm going to also select my card I'm going to provide a margin of 20 pixel and Border will be no not just come on what the hell border will be come on v d r will be to two pixel solid

Ed Ed Ed okay and I'm going to also provide a pading of 20 pixel and cursor will be pointer and also I'm going to just select my card image okay So did I provide a card image name to it I didn't so let me just provide a card image so I'm going to save this file I'm going to also save this oh you know what not going to save this file right now I'm going to provide a width of 13 uh 13 rims and I'm going to also provide a margin for the bottom of one

Rim there we go that's cool and I'm going to also select my card title and the margin for the bottom I'm going to just provide one Rim as as well and now Underneath that I'm going to select my car reviews there we go r e v i e WS let me just double check sometime I made a lot of typos so that's why I'm double cheing it so I'm going to just proide margin for the bottom like one Rim would be fine and I'm going to also provide a display of to flex and underneath that

I'm going to be selecting my rating star which I forgot to include but we will provide different kind of colors to it so like yellow color will be fine D5 a B55 this is going be the color which I'm going to be using for a star I'm going to copy this class from here and I forgot to include it right here because uh we are going to be putting all of these icons inside our data file we already have that but we will take care of that later in the refactor section so now let me

just remove um these stuff from here like so and we just provide this closes to it yep that's cool save my File and now I'm going to refresh it and I don't know why it's not working that's because we didn't import it correctly I guess we did import it but I don't know what's going on let's just refresh our browser why it's not working yep that's that's because we didn't save this file so we have to save it and here you can see we have our recommended Sho and we have this card right here okay

so now that's cool we have this yellow colors and we take care of all of them now let Me just take care of their total reviews which is this total reviews where is that to reviews all right there we go so we going to be taking care of that and I'm going to just provide a font size of 0.9 rims to it and I'm going to also provide a margin for the left of 10 pixel okay so then I'm going to just write card price and display will be totally flex and justify content will be

now set to space around and and align items will be now set to Center okay so Finally we have to take care of the this bag uh not this bag but we have to take care of let me just provide a class of bag icon or icon just a singular I'm going to save this file and we have to get that icon right here and we just have to put a color of 535353 so if you sell our file let me just save it and here you can see this is how component will look like

right here so we can duplicate that component again and again so let me just go back So you guys can see everything a bit better I'm going to just select this section right here and I'm going to just provide a little bit of items to it so I'm going to just duplicate that you don't have to do that you don't have to do that but here you can see all of my items will be placed right here let me just select all of these items uh through here I just kind of want to show you

like how all of my items will look like duplicate there and now let me just Refresh my browser and here you can see this is how all of my products will look like right here okay and everything is working like the way we expect them to work everything is a okay but now we have to refactor we are not going to be refactoring our code not right now uh but we will refactor all of our code later but I just kind of want to render some items so that we can see something first of all

and yeah that's going to be it for this section and once again we Are going to be refactoring all of these code at the end of this video not at the end but just in a few second but uh we have to take care of the other stuff but we cannot work with them all at once we'll have to take care of them one by one so we are going to be removing all of these jsx from here and we are going to be just providing a results just a results variable and that's going to

be it I promise we are going to remove all of these jsx from here anyway so that's A product section all righty so that was a product section so I'm going to just close both of them from here and I'm going to go to my recommended so I'm going to just open my recommended. Js and also this CSS right here so what I will do is that I'm going to just remove this recommended section from here and let me just zoom in a bit so you guys can see everything a bit better and what I'll

do is that I'm going to first of all using my react fragments and then I'm going to be using my div right here and then I'll just put some sort of a title to it like H2 of ROM r r e o m n d e d I'm going to copy this and I'm going to place it right here and underneath this H2 what I do is that I'm going to use my recommended buttons right here okay and now inside there we are going to be placing a few buttons so I'll just write button and

we are not going to be providing any stuff or you know what I'm going to just give a level like all Products okay so we have all products then we have Nike EDS and PMA I'm going to remove them I'm going to put Nike or Nike some people call Nike and some people call it Nike whatever then we have a puma and then we have a w w there we go I'm going to also provide different kind of Cl not different but we are going to be in a class to it and the class will

be just buttons right here so if you sell our file and you will not see that I don't know why you Will not see it let me just refresh my browser and you have to see that somewhere I don't know why it's not working maybe messed it up something I bet and yep we did okay we are getting that recommended section right here at the bottom but we shouldn't Appo it right here I'm going to go to my app and then what I'll do is that I'm going to just play this recommended section up above

this um product section or or component So I'm going to sell my file and here you can see we are now getting all of these buttons right here and also this style right here as well so now the next thing that you have to do is that we have to take care of the styling so what I will do is that I'm going to just select my recommended r e c o m e n d e d and then we are going to be providing recommended flex and display of Ls and I'm going to also

provide a margin to the left of like 20 rims and also I'll Just select select my recommended title and also I'm going to provide a margin for the left of like 20 rims and margin for the bottom I'm going to provide 20 yep pixel be fine and I'm going to also provide a margin for the top of 20 pixel and F font size will be now set to 20 pixel as well so if you s our file refresh it nothing is going to happen because we didn't use these Clauses so I'll just copy this class

name which is recommended flex and I'm going to just Place it right here in inside or you know not inside but inside these items so we just provide recommended buttons I don't know why I did that I don't have any idea why I did that but it should have to be a recommended Flex so now if you sell that and here you can see it will now just push all of our items right here and what else do we have to do is that we have to also provide recommended title right here so I'll just

provide a class of recommended Title so if you sell file and here you can see it will also push this title right here but there's not looking that cool uh let me just go inside this index. CSS file right here and I'm going to just scroll down and I don't know why they didn't apply it so I'm going to just cut this styling from here and I'm going to just place it right here so I'm going to just save my file and here you can see this is how my buttons look like and we can

also change this font family If you want to so I'll just go to my font uh what do you call index. CSS and I'm going to just select everything we did provide font family of Sor but I don't know why it's not working working you know I'm going to just close it from here and I'm going to right here so I'll just put for family of s surf right here sem my file and let's just refresh it okay I just put it in the wrong way I'm going to cut it and I'm going to place

it right here So F family of s ser and that's looking cool and here you can see we have our buttons we have our search fields and we have a few items right here all right so that was it about recommended section so now the next thing which you have to do is that inside this sidebar I'm going to be creating one component given name of like sidebar. JS I'm going to be also writing a sidebar. CSS file as well right here okay so inside this component I mean like inside this folder but Outside from

this category color and price components right here so I'll just also write RFC remove that and I'm going to just cut it from here and then let me just grab my sidebar right here I'm going to zoom in a bit and now I'm going to go you know first of all let me also get my import statement from here like sidebar. CSS and now I'm going to go inside this sidebar I mean like this app right here and we have to use it right here and I'm going to be placing it at The top so

I'll just give a name of like sidebar and now I'm going to S my file I am going to go inside here and here you can see we have the sidebar right here okay so we are going to be placing all of our content right here so what else do we have to do you know what first of all I'm going to be writing my uh what do we call it um got I forgot the name of this one what do you call it okay fragments there we go I forgot the name of it now

let me just create a section I'm going to give my name of like sidebar and now inside this sidebar I'm going to be creating a div with the class of logo container and here we are going to be just runting H1 and I'm going to just place like card logo or something like that I'm going to place it right here and that's going to be fine underneath this div I'm going to be creating or you know let me just get my category C A come on c a t e g o r y if we

can get we can't so we have to import It manually so I'm going to just go and category come on it's not helping me in this case I don't know why but let's go inside this category and then category I'm going to copy that copy this category and what else do we have to do we have to just place it right here so we have our category I'm going to duplicate that three times just two times not three times and I'm going to change that to price and then we we have to change that to

price and we have to Go to the price I'm going to change that to uh colors and I'm going to remove them and let me just put my colors uh and inside these colors we are going to be just providing that color so I'll just copy this uh price from here and I'm going to just place it right in here and I'm going to also copy this colors and I'm going to past it right here so I'm going to just zoom out so you guys can see everything a bit better so now if you SE

here you can see we are now Getting category we are also getting a price component and also our colors component right here and here we are also getting our logos so now the next thing which you have to do is that we have to style our component so that's cool I'm going to go inside the sidebar and I'm going to just style it so I'll just write sidebar Das title zoom in a bit and I'm going to just provide a font size of 22 pixel and I'm going to also provide a font weight of normal

and Margin for the bottom I'm going to just provide like 20 pixel okay so then I'm going to be selecting my sidebar and I'm going to just provide a 15% of with to it you can just specify however you want and then I'm going to just provide a position of fix height will be 100% And then we have a border uh to the right we have two pixel solid and we are going to be reusing E5 E5 E5 one more time okay so the Z index I'm going to just Pro three3 and display Will be

set to polex in this case and F next direction will be now set to column and align items will be also set to Center okay so that's then now if we s our file and this is how it looks like right here uh this is how currently stuff looks likees but we have to put this underneath so we have to now select our logo container and we have to put our margin margin uh for the bottom we are going to be just writing po rim and also We have to select our logo container one more

time and select our H1 one and margin for the top I'm going to provide 1.3 Rim St it so if you sell file and that's looking totally awesome right here so here you can see we are almost getting there we have our um what do we call navigation we have this component we have all of our products right here and then we have all of our categories price and colors right here so now we have to take care of each of these Component one by one so now we are totally done with that so now

the next thing which you have to do is that we have to take care of this category component so I'm going to go inside this category component and what I will do is that first of all uh I'm going to just remove this category from there and I'm going to just write H2 with the class of sidebar title right here and I'm going to just provide category and I'm going to go back so you guys can see Everything a bit better inside this div you're going to be writing a label label right here and I'm

going to also provide a sidebar label container close to it okay so we are not going to be providing any HTML 4 attributes stent inside this level what we have to do we have to just write input with a type of radio instead of text and we also have to give him some sort of a name of like test would be fine uh yeah that's going to be fine and then we have to finally write or a Class uh I mean like span with a class of check mark there we go and we have to

specify a label for it so if you just s our file and here you can see we are now getting this one uh what do we call it checkbox or check mark right here where specif specifying that oh but we are not getting it okay we are getting it right here but we have to take care of the stying but before we getting into all of them we have to duplicate this jsx right here and once again I'm going to be Refactoring all of the jsx into multiple components but for now I'm just writing all

of these jsx so that we can see or markup right here okay we're going to be also formatting I mean like refactoring all of this code again and again so I'll just duplicate that I don't know like three times no not three times but four times so 1 2 3 4 okay and now I'm going to just change these labels to something else like I don't know we have all then we have our Sneakers uh s n e a n e a k e r s there we go and then we have instead of sneakers

I mean instead of all we are going to be also providing flats and then we have a sandals so sandals there we go and then finally we have our heels so heels say our file and yep that's looking totally okay so for now I am going to be writing a lot of CSS right here but if you don't want to write a CSS so you can just go to my guub repository and you can grab all of these CSS from there if you want to so the first thing which I would do is that I'm

going to be selecting my sidebar and then sidebar I mean like sidebar title and I'm going to be providing a font size of 22 pixel and font weight will be totally normal and margin for the bottom I'm going to just for 20 pixel right here and then I'll just provide my sidebar items right here and and I don't know what the hell I just did I'm going to close that and now inside there I'm Going to be providing a margin for a top of 20 pixel and now I'll just go up a little bit down

and sidebar uh label container inside that we are going to be writing display of poly block and we have position of relative because the other one was a fix and then we have piring for left and I'm going to just provide 35 pixel for the pairing left margin for the bottom I'm going to provide 12 pixel and then we have cursor and set to pointer then we have uh just One webcat uh user what do we call it select there we go and we're going to be set that To None then we have a moves

for Mozilla and user select will be now set to totally none okay we want to just remove that then we have MS user and then select we are going to be also removing that and finally we are going to be riding a user select and that will be set to totally none s file we are totally getting there but that will take a little bit of for a while or something That will take a little bit of while so I'll just write a sidebar and then level container one more time and I'm going to be

selecting my input field I'm going to be providing a position of totally absolute opens of zero cursor will be set to totally pointer and now let me get my check mark which is I guess check mark was there a check mark or something check check mark there we go I'm going to place it right here for double checking position or totally absolute Top zero left zero height will be 20 pixel width will be 20 pixel and also the background color will be set to totally e e e three times e and Bard radius will be

set to 50% there we go and we are going to be also taking care of that sidebar label container and once we hover over each the input we want to uh select or check mark okay so then we going to be also writing a background color of to CCC that's fine duplicate that and what we Are going to be doing is that once we check instead of how I'm going to remove this how from here and I'm going to just provide this checked on the input so once we checked our checkbox so you want to

just change the color to 21 uh 9 what do we call it uh 96 uh F3 kind of a blue color but not that much blue and we're going to be saving them and here you can see this is how currently things looks like right here so if you click on it and yep That's looking totally a okay I'm going to just go back and now let me just select my check mark one more time and I'm going to be using my after Studio selector so content nothing position absolute and we have a display and

let's just remove them okay and now I'm going to just use uh sidebar items not sidebar uh items but label container I'm going to be selecting my check mark let me just get my check if that's checked so what we want to do you want to select Our check mark and we want to use our after selector on it and we want to just provide a display of totally block to it in this case in this after case we provide a check mark of display of none and here we are just specify I mean like

once that's checked like that input is checked so you want to just Prov display of block to if it's s file I'm going to click on it you cannot see that you will see that just in a second but let me just get it sidebar Uh label container let me just get that let me get my check mark and I'm going to be using my after selector right here the top will be set to like here I'm specifying different kind of widths you can increase or decrease that how you want uh six uh Point what

do we call it 6.4 pixel and then we have a width of 7 pixel height of toally 7 pixel and then we have a border radius of Border radius of 50% just a totally rounded so that's why we are providing there and now if You sell file and here you can see we are now getting that Wide Circle right here so if you click on it and that's looking more than okay okay so that's fine but the final thing which you have to do is that we have to get this line right here from somewhere

so we are going to be just writing a line uh we're not going to be using this line right now so I'm going to just provide three rims and Border uh color will be now set to just like uh F7 F7 come on F7 F7 There we go and yeah that's totally fine s file nothing is going to be changed all right so that was totally cool we are totally getting there but the second thing which you have to do is that we have to take care of their price component and color component and then

we are going to be refactoring all of our project and finally we are going to be providing our functionality to this project all right so that's that now let me just take care Of their price and then we are going to be taking care of that colors so it's not going to be looking that awful we are going to be going into this colors you know we are going to be taking care of that colors a little bit later or yeah can we take a c I don't know you know I'm going to go with

this price and price will be fine now I'm going to remove this price from there and I'm going to just provide a class name of ml to it okay for margin left or yeah Margin left will be fine and then we have Edge two of that same title side uh sidebar and title and then we have a price title as well because we are going to be just providing a little bit of styling to that price title and now you know I'm going to go inside there and I'm going to copy a little bit of

code from it so I'll just copy this label from here and I'm going to place it right here so this is going to be for one time and then you know I'm going to Just duplicate this level um what do we call jsx a few times so we have uh for all then we have for $50 we have 400 150 and we have 200 okay so I'll just provide a test of like I don't know uh test of two so I'm going to just select one hit contrl d contrl d contrl d or command D

whatever and I'm going to change the label I mean like to name to totally test to and here this one will be set to all and now this one will be now set to Z you know I'm going to just Provide 0-50 okay so just $50 will be fine and I'm going to copy them their pattern and I'm going to just duplicate it right here and I'm just change the values to like $100 uh 100 will be fine and this one will be now set to $50 okay and this one will be now set to

$100 $1,000 and this one will be $150 and this one will be finally uh over uh $150 so sell file and here you can see we now getting all of these prices right here Totally fine uh but you know I'm going to go inside this ml I mean like this price styling and I'm going to just select my price title like so and I'm going to provide a margin for the top of 20 pixel and I'm going to also provide I mean like I'm going to select the ML and I'm going to provide a margin

for left of 20 pixel s file and that's looking a bit better all right so that's also done so now the next thing which you have to take care Of this uh color component so I'll just close these files from here I'm going to go into my color component I'm going to select my color. CSS file as well and I'm going to do that same copying and pasting one more time and once again I'm going to be refactoring all of that code from scratch so you know here I'm going to remove these colors from here

and then what I do is that I'm going to just pass all of these jsx right here okay so we have that same label I'm going to Change this all you know the first one will be all yep the first one will be all the second one will be black color uh let me just remove these labels or we can do this so this one will be now set to Black and this one will be now Seton blue then we have a red category like so and then finally we have our white categories we have

white but we also have a green one as well so let me just write uh green and then finally we have white cell file and let's just see here You can see we have all category black blue red green and white finally and here I'm going to be also passing my color title so we have a color title right here semi file and now I'm going to go inside this color title right here I'm going to select this color title and I'm going to just provide a margin for the top of two rims and I'm

going to also select all CLA and here we are not using this class but we will very soon so I'm going to just use linear gradient And I'm going to proide Blue and Crimson okay so if you s our file nothing will happen except here we are getting just all of these components right here so now it's time time all right so now we are totally done with these components so now it's time to do a huge refactoring in all of these components because currently our code is looking more than messy like we have all

of these components right here but trust me this is like totally a mess we have to Create a component I mean like separate component uh for buttons and we are just reusing that input again and again and we also have this color we are reusing it here we we are reusing it right here and and we our code is like totally a mess so now let's just refactor all of our code so before we getting into the refactor first of all we have to ask ourself a few questions like where we are repeating all of

our code so now what I'll do is that I'm going to go Inside this product section right here and here we are reusing this component not a component but this jsx like a lot of time like more than a lot of time right here okay so what do we have to do first of all I'm going to just select this one right here and I'm going to just select it through this section right here okay so I'm going to just select it and cut it I'm going to just cut it just right click on it

and hit this uh cut button right here or you can Also use this shortcut which is control or command or control or command X I'm going to remove all of the rest of this content right here so I'm going to just remove all of this content through this section right here okay so now we successfully remove that content from here so now the next thing which you we have to do is that we have to go inside this component folder and we have to find this CJs right here and we have to just place all

of our GSX which we Copied right here okay and this is also like really messy still but now if you sell file but instead of copying and pasting all of our uh jsx one by one what we are going to be doing is that we are going to be getting this card and we are going to be just rendering just this card okay so I'm going to just save my file and it will gives us an error that's because we didn't copy it and we didn't place this right here so if you save that and

it will still gives us Error because we have to import that card from that card component card so if you sell that and here you can see card is not defined card is not defined where is there let me just refresh it and here you can see it will now just gives us one card right here so instead of copying and pasting all of these jsx now we convert all of that coding into one component and we can just reuse this component like how many times we want see if you s that and here you

can see It will now gives us all of that uh items right here so this is just a first refactor but this is also not a great refactor to be honest we will come back here one more time so let me just refresh it and this is how it looks like right here so this is just a first refactor for this card component so we just already created this component and we are just reusing that component again and again so this was the first refractor so now the next refractor Which we going to be doing

is is this uh input Fields right here so that's going to be totally simple and here let me just open this category right here we are reparing all of our labels right here and input like label and input and all of that kind of stuff right here and we are also repairing inside this colors we are repairing it inside this price component as well so what we have to do we have to come up here and inside this input tag what we want to do we are Going to be just going into one of them

and I'm going to just copy this single LEL from there and I'm going to just replace it with this div okay so I'm going to just zoom in a bit so you guys can see it a bit better and now I'm going to sve my file so here you can see we are just getting like um what do you call it sidebar and we are just providing a sidebar and by the way this is not going to be the final refactor we are going to be still refactoring this Component but I just kind of want

to show you like the second way of refactoring or writing this code okay so we are going to be still passing a lot of props and we are going to be doing that once we jump into St management and all of that kind of good stuff but for now here you can see we just specify this input and this level right here inside this input container so what we have to do I'm going to just uh get my input container but before I do I'm Going to remove all of these inputs from here and this

input from here as well oh no we're not going to be removing that but here we are going to be just rendering or input container okay so now let me just save my file and here you can see we we are just getting all and we can just duplicate there like a few times like we have four times or five times right here and here you can see we are now just repeating all of our component one by one right here okay so That's totally okay but we will have to take care of that labels

and stuff but that's totally normal so now let me just use that component like that input component so I'm going to just use input and I'm going to close it and it will not import it because there was to level up above okay so input like so and then we have to go to the components folder and then we have to go inside this input so if you sa our file let me just duplicate that we will take care About that a few in a few seconds so here you can see we are now reusing

that component right here one more time and now it's time to go inside of colors and we have to remove these jsx from here so I'm going to select it save by all of them and I'm going to get my input container right here okay so not like so but let me just close them sem my file and here you can see uhuh I messed up something because I removed the label and I shouldn't have done that So we have this input title you know I'm going to leave this all from here uh we didn't

specify color to it or label to it let me just specify some sort of a label to it so we can differentiate between components so sidebar title and then we have color title as well so I'll just spr colors save my file and here you can see we have all of these colors but now I'm going to just remove this label from Here and I'm going to just get my input from that semi file and we have different kind of inputs and here you can see everything is not totally reusable anyways so that was just

a little bit Improvement inside our code so we just like really refactor work code like a little bit but there is also going to be a huge refractor inside all of these input component and all of these U button component and all of that card component so we will have a huge Refactor later but for now we I just kind of want to grab all of that code from one component and so that we can reuse that component again and again so now it's time to provide a little bit of functionality to our app and

then we are going to be reusing I mean like then we going to be refactoring all of our component to the final version of the refactoring okay all right so now it's time to provide functionality two or apps so here what I do is that I'm going To do a little bit of weird thing which a lot of people won't like it but I will do it anyways because I don't want to repeat myself again and again so what I'll do is that I'm going to treat this app component as a store if you are

coming from a Redux world so uh which means like I'm going to be placing all of my state inside this app component and then I'm going to be providing that St to these components by using a prop so if you don't like this approach Totally a okay like you can go to each of these component and then you can create your separate State and then you can change it there if you want to but for me I'm going to treat this app component as a store if you're coming from a Redux word so the first

thing which we have to do is that I'm going to just write first of all uh selected uh query right here or not query but category okay so then we are going to be just writing set selected C And it will be now set to the use stat right here and by default I'm going to be providing a null value to it so I'm going to just provide a little bit of spacing in there and now that's there but now the next thing which we have to do is that we are going to be writing

our input filter first of all we are going to be taking care of that input filter then we are going to be jumping into their radio buttons so what I will do is that I'm going to just create my Query and then I'll just use like set query and it will be equals to the used T and by default I'm going to be providing a like totally empty value to it and now what else do we have to do I'm going to be creating a function which will be really useful for a lot of function

for a lot of uh things to be precise so I'm going to just write handle input change so whenever this input changes like whenever user passes some data into this component into this Uh search field so what do you want to do we want to get our event right here like uh like whatever the user type and we are going to be passing it right here so event let me just write it event come on event. target. value there we go t a r g t there we go so now we successfully create this one

so now the next thing which we have to do is that we have to get all of our data which we have inside this DB folder right here okay so we are going to be getting all of that data and We are going to be itting over through the data all right so the first thing that you have to do is that we have to import it so I'll just write like a d data base right here and I'm going to just import my little database so we have a data oh you know I'm going

to give a name of like products okay so products will be fine and I'm going to go one level and I'm going to go to my DB folder and then we have our data right here you can give any name you Want but in my case we are storing a product so that's why I give a name of products right here you can give a data if you want to but here we are going to be iterating over through all of these items which we currently have inside this array and then we're going to be

performing different kind of filtering on uh title on what do we call it on uh previous price and also on a company and also on a color and on a category as well okay so that's going to be awesome As well so now the next thing which you have to do is that I'm going to just write fill uh third items there we go and it will be now equals to products. items not items but products. filter because filter there we go because because we are going to be iterating over through all of these items

right here each of these items and what do we want to do with them we are going to be just specifying or each product and I'm going to just set that to like one liner So that product title in this case we are just iterating orward through all of these datas right here like all of these items right here and we are just taking care of this title like we are just getting the styler from all of these items right here which we currently have okay so we are just using them and then let me

just convert that to lower case as well so it doesn't matter if you provide like upper case so it will just by default converted to Lowercase and now I'm going to just provide index of and then here I'm going to be specifying my query like what are the user type and I'm going to be also converting that to lower case as well and if that's not equal to minus one okay so I just mess it up here let me just cut that from here I'm going to place it right here so if that's not equal

to minus one so you want to get all of that items and we just store that inside this filter items right here okay So now underneath that so that's going to be it for the uh input filter so I'll just specify different kind of separators right here I'm going to copy that I'm going to paste it right here and now let's take care of the radio filters so we have these radio filters right here okay so now let me just filter all of the data once the user click on this each uh what do we

call it this each radio filter okay so what do we have to do First of all I'm going to be just writing const handle change and it will be now equals to event and here what are we doing we are going to be just setting the set category selected category which we are specifying right here so we have selected category and then we have a uh set selected category and by default we are just specifying the null value to it okay so I'll just execute them and here what you want to do you are just

specifying event. Target Value right here okay like whatever like whichever kind of input the user selects so you want to get the value from that each event right here like whichever kind of uh what do you call it custom radio selector user select so you want to get the value from that selector okay so that's how we can get that and we store that value inside this handle change event right here so that's going to be awesome as well so now the next thing which we have to do is that we Have to create a

filter for what do we call it a buttons so buttons so once we click on each of these buttons so what do you want to do we want to provide a filter for that okay so con handle I'm I'm just creating all of that functions right here okay which we're going to be passing into our components by using a props very quickly so I'm going to just write Set uh selected category once again we are just selecting that selected category right Here and we are just changing that state like when when somebody clicks on it

so what you want to do you want to just get the value from there so I'll just write like event. target. value okay so that's simple that was simple like how to filter data and this is also simple like when somebody clicks on each of these item so you want to filter through all of that data okay so that's going to be totally fine so now the final thing which you have to do not a final thing Yeah this is going to be the final function which you're going to be creating inside this app component

so I'll just write like function and here this is going to be the main function where we are going to be doing all of our filtering so I'll just write filter data so this is going to be the name of my function and what are we getting we are first of all getting all of the products and then we are going to be providing a selected like whichever Kind of thing is currently selected are we selecting something inside this category or inside this price or inside this color or we are clicking on something right here

or we are typing something thing inside this input field like what are we doing that's why we provide this selected um prop or perimeter or whatever you want to call it and then we are specifying our query right here okay so now let me just write like let filter data I mean like Filtered products so filter products and will equals to all of our products okay so this is going to be the end for our products now here let me just write a comment for myself like filtering filtering uh input items okay so now let's

just take care of that filtering items so I'm going to just specify if we have some sort of a query like if we selected something so what you want to do we are we are just going to be selecting that Filter data not filter data but this filter products I'm going to just specified right here and it will be equals to filter items so filtered items right here okay so which we are getting from these filter items let me just go back so you guys can see everything a bit better so here we what we

are doing if if we have some sort of a query so we are going to be just setting this filter data like all of the product through this new array which we are getting from This filter items right here like we are iterating o through all of that item and we are just specifying it right here and this filter data like all of our data uh will be now set to that filter data if we specify something inside this input so that's going to be happening okay so this is going to be it for the

filtering items in filtering input items and then underneath that then we are going to be also writing a selected uh filter as well so let me just zoom in a so you Guys can see everything a bit better and now here what I do is that I'm going to just write selected okay if something is selected so where is that selected coming from that selected is coming from right here we are going to be executing this function and we are going to be providing our first of all our products then we are going to be

specifying like whichever kind of thing is selected are we select in something from a category or from a price or from a color or like Where where which kind of selector do we have so this is going to be selected filter which we are going to be writing so so we already have our filtered products which is right here and it will now equals to filter products one more time and then we are going to be using our filter method right here so we are going to be itting over through this filter uh method right

here we can specify just a singular thing right here but here what I will do is that I'm Going to use my P6 magic so perimeter destructuring so I'll just write category we are going to be getting our category from this data right here so we are going to be getting our category we are going to be getting our color as well like this color from all of these item we are going to be also getting our company we are going to be also getting our new price and we are going to be also getting

our titles so now let me get all of that from all of this data Right here so what I'll do is we already selected or category let me just get my color and let me just provide my compy there we go CP n i spell company correctly or no let me just put it right here and that's awesome okay so that's that now we are going to be also providing a new price to it and then we are going to be also getting my title right here so we have uh let me just show you

so we have this new price right here and we also have this Tyler right Here anyway so that's that's looking okay oh we are writing this craes like extra CRA we shouldn't have done that we are going to be writing our equal to sign and now what we are going to be doing is that we are going to be just writing category and it will be now equals to selected right here okay and if you if you weren't doing this instead we are going to be just doing is like we were doing like product do

uh I don't know category and it will be now equals To that selected so we will have to do this yeah but now we already destructure our data right here so we don't have to provide this product dot category product do title product dot color and stuff like that so I'm going to just remove excuse me so I'm going to just remove that product and we are going to be writing I don't know why we are getting this error I'm not sure about that now we are going to be writing our code like this like

category uh is equal To uh triple equal to selected and then we are going to be also checking the other stuff but if we weren't writing this code like if you weren't destructuring or items right here so we would have to write first of all product products to be uh precise and then we going to be selecting our category then we will write like products. color and then products. company products. new price products start title we don't have to do that we are going to be just Destructuring all of that so I'm going to remove

this products from here and now we are going to be writing our old statement and color will be now triple equal to selected and now let me just write one more or statement then we have a company and Company will be on also set to select it and then we have old statement then we have a new price will be also set to select it let me just write one more statement of or and title will be equals to selected so now if you Sell our file and I am still not getting all of that

I don't know why we are getting some sort of error or something uh I guess we are getting some sort of error but I'm not sure about uh let me just close it right here something was wrong in here so I'm going to now finally past this Cod right here and now I'm going to save my file and yeah that's going to be it for a selected filter so now the final thing which you have to do is that we have to Return something right here so that's going to be it for this F statement

and also for this selected filter the final thing which you have to do is that we have to return this filter data and we are going to be iterating over through that data so we have this filter products I'm going to use a map method right to iterate over through all of that items and here what we are going to be doing is that we are going to be destructuring a few properties so I'm Going to just destructure that IMG and by the way we are destructuring all of that properties and their properties are coming

from all of these items like we are currently iterating over through all of these item and we are getting the image the title The Star reviews and all of that kind of stuff we are destructuring right here and we are going to be reusing it right here inside this card component and we will refactor all of this card component in a second But for now what what I'm going to do is that I'm going to just destructure that stuff so I'm going to just write uh image title star and make sure the spelling is totally

correct I'll also do my best to write uh the spelling correct so I'll just write a new price and then we have a new not not new price but yep the new price yeah new price is totally okay and then I'll go back from here and I'm going to use my C braces but I don't Know why we are getting this in eror and here we are going to be Ren ring or card component so here you can see it will now just import it right here at the top of the file so now it's

time to provide all of these data into this card component as a prop and then we going to be reusing it inside this card component so I'll just first of all start with a math. random and I'm going to just close this component right here and that's going to Be fine okay so here I'm going to just save this file so that I get uh that formatting so that was it for the key and do not write code like this but in this case I'm not using any uu ID and stuff so I just write

M random I'm going to just write image and it will be now set to image and now what else do we have to do we are going to be also writing a title and title will be also set to title and I am going to also provide a star and it will be also set To Star the destructuring version of that star to be precise and now let me just get this reviews and finally we have our new price right here and we going to be also reiring a new price to it now if you

s our file so what are we currently doing first of all let me just review all of that stuff which we are currently doing okay so now here you can see we are just first of all getting uh like these two let me just cut that from here and I'm going to place it right Here like so first of all we are specifying this St into this Us St uh hook right here so we have selected category and then we have select a set selected category then we have a query and set query and by

default we are providing the default value of null and empty uh string right here so then we are creating that function for the input filter right here so like when somebody okay so if price is not defined uh we do have this new price let me just uh come In here and then okay we have pre price now I'm going to set that to pre price and now let me just check him out new price is not defined let me just refresh my browser still not defined okay so we are going to be copying it

from here I forgot to included semi file and now new price will be defined right here anyway so that's a great story but hey here you can see now if somebody types something in that input we are going to be getting that value then here We are iterating over through every single character of that user like whatever the user type inside this input box right here we are iterating over through there and we are just getting our filter items then we have our radio filter and we are just iterating over through all of these filters

like if the user click on this one or in this one or in this one we are just getting the value of that or and then we have this handle click and which will be Responsible for these buttons right here and then finally we have this function right here and inside there we are going to be just specifying three parameters so we have this products parameter then we have selected and query parameter and we are going to be specifying the values in a just just in a second but here you can see we are just

declaring a variable and we are specifying it into the products like whichever kind of products the user provide and then what we are Doing is that we are just providing that filter for our input item and then inside there we have this filter products so what is a filter products filter products are all of the products which we are specifying right here and it will be now equals to filters filtered items and then we are providing a filter for the selected items like for these kind of uh buttons right here we can just write this

code without a destructuring but I write this code with Destructuring because I don't want to write like a code like this like uh product Dot and stuff like that then we don't have to just write a product so then we can just remove that and we can just write like product if you wanted to we can still write this code and that will be totally valid code but I don't like this approach I want to use destructuring so that's why I destructure all of that code right here okay so this is This might look a

little bit confusing to for some developer but for me that's totally awesome for me that's totally okay and then finally we are just returning all of our filtered products right here so now it's time to call this function so we've created this function I'm going to just call this function right here so I'm going to just call this function right here and I'm going to provide a few values to it so I'm going to first of all providing a Products which is our database right here so we are getting all of that products from this

database right here here and now the next thing which you have to do is that we have to also provide this selected category and we have this selected category right here okay so like whichever kind of thing we selected so we are going to be specifying it right here and then finally we have our query and we have this query right here for this St right Here okay so now we successfully call this function so now the next thing which we have to do is that we have to store in some sort of a result

variable you can give this variable like any name you want but for me that's totally okay so now let me just save my file that was a lot of writing and that was a lot of explanation so now the final thing which we have to do is that we have to provide all of that state values like these functions and all of that kind of data Into this each component right here so that we can reuse all of their data inside this component so for sidebar what are we going to be passing we are going

to be passing this handle change right here so where is that handle change we are going to be specifying this handle change for the sidebar so like whenever click on this button or this button or this button I don't care like whichever kind of button the user click on we want to select and we want To get that value and we are specifying that inside the set selected category so what we have to do I'm going to just pass my handle change into handle change as a prop so now what I will do is that

I'm going to come inside this sidebar right here let me just go inside the sidebar and I can destructure this so I'm going to just use my destructuring method right here and we can log that into our console if you want to so I'll just write handle change and now let me Just open my console right here and now let me just refresh it and here you can see we are now getting that function right here so we have event. target. value we can execute that function but we are not going to okay so I'm

going to just remove that from here so now the next thing which you have to do is that we have to paste this handle change from there I'm going to copy that and I'm going to place it in both of these area as a prop so I'll just pass it as a prop Right here okay so now if you sell files so we have that function available inside this category we have that function inside this price and we also have that function inside this colors so like let's suppose if I want to go to the

colors I mean like the price and we can destructure it right here and we can also console log it s my file and let's just refresh it open my uh console right here and here you can see we have that function available inside each of these These components right here so I'm going to just remove that from here so now we have this function available in all of that components so now the next thing which you have to do is that I'm going to remove that from here and I am going to remove it uh

from we are not going to be removing it from here but now that you know that we are just passing that state value like whenever we change something so we are just passing it inside the sidebar and then we are also Passing it inside each of these uh components right here okay so now the next thing which you have to do is that we have to come to our input container right here I mean like in input uh component right here so I'm going to just zoom in a bit and here what I will do

is that I'm going to specify a few items like a few parameters so I'll just provide like handle change first of all so this is going to be the first case I'm going to remove That I'm going to provide this handle change right here so the next parameter I'm going to be providing is the value is like which kind of value we are going to be specifying inside this input container then after that I'm going to be also providing the title like which kind of title we are going to be using inside this component and

then the name and also the color okay so a color we are not going to be using it for that much reasons but we will pass it right Here okay so we have this sidebar label container right here the next thing which I will do is that I'm going to use this handle change I'm going to copy that and now once we change something so we are going to be calling this method uh like handle change right here and we have the type of radio that's completely fine now we have to uh what do we

call it control this component so if you want to control this component so we are going to be also passing this value to It so I'm going to just pass this value right here and now the final thing which we have to do is that we also have to copy this name from here and I'm going to place it right here so let me just place it right here as a name and yeah that's completely okay but now the next thing which you have to do is that we also have to specify this color so

I'm going to just copy that and I'm going to also provide a style tra and then here what I will do Is that I'm going to just provide a background color of this color right here and now the final thing which you have to do is that we have to remove this all from here and I'm going to copy this title from here and I'm going to just space it right here randomly so if you sell our file let me just remove this space from here semi file and here you can see we are getting

these things but that's not working and that's not cool hose so what do we have to do we Have to go inside first of all a sidebar right here and then we have to go into the categories and we are reusing these inputs right here so the first thing which you have to do is that uh you know what I'm going to remove all of them from here and I'm going to just first of all write a label and the first one we cannot change so this why we are going to be writing it manually

so sidebar label you can check that in your spare time if you want want to but I don't Want to check it right now but we can change it like I I think of I think of every possible way but we can't change it right now but I'm going to change that to radio so the first all we have to specify that to like uh we have to specify that like manually so we have this handle change which we are getting from this uh as a prop right here so we have access to that handle

change you already know that and now what else do you have to do we are going to Specifying the value of nothing because we are going to be selecting everything and the name will be now set to test okay so that's that I'm going to be also providing a spent word with the class of check mark and now as a label I am going to provide all okay so if you sell file and let's just refresh so here you can see it now giv us all right here so now the next thing which you have

to do is that we are going to be reusing our basic input so I'll just write input Right here and now let me just close that and here we we have to specify all of our props so I'm going to just provide like handle uh handle change and I'm going to copy this handle change from here and I'm going to just place it right here okay okay so now the next thing which you have to do is that we have to provide a value for this uh input field so we have a sneakers right here

and I'm going to also provide a title of uh sneakers as well underneath That I'm going to be also providing a name of like uh I don't know man uh test would be be fine and I'm going to just duplicate this component like one time then two time and three time okay so we are not going to be changing this one we are also not we will change this one so we have to change that to from sneakers to Flats and also this one to Flats as well okay and test would be fine so you'll

have to just change this value to just um I don't know sandal would be Fine and this one will be also sandals and that's going to be fine and then finally we have a heels and we have a heels right here okay so now if is sell file and here you can see we are now getting sneakers and flat sandals and heels so this component is now totally reusable like we can reuse this component anywhere inside our program anyway so that's done now the next thing which we have to do is that we have to

go inside a price tag so this Price one right here and first of all I'm going to just uh get my handle change right here and I'm going to just remove this component from here okay and I'm going to also copy uh you know I just remove that right here so I'm going to just copy this component because we cannot do anything we have to just specify it manually uh value uh and stuff like that so this one will be for all we have a test uh and this one will be test two and we

have everything we Need and that's cool anyway so that's cool so now the next thing which we have to do is that we have to just get our input tag right here which we've been already using but I just deleted there but we are going to be first of all providing a handle change and then we have our handle change right here then we have a value and it will be now set to 50 then we have a title and as a title I'm going to just specify the string of like $0 to 50 okay

so now Finally I'm going to just provide a name of like uh test two right here okay so now I'm going to S my file I'm going to duplicate that a few times so let me just go back and I'm going to just duplicate that to like I don't know three times so one 2 three and I'm going to just change the value inside them so it will be now set to 100 and this one will be now set to 50 100 like so this one will be now set to 150 this one will be

set to 100 and 150 okay so then Finally we have a 200 right here and then let me just remove that from here and I'm going to just specify over $150 okay so if you sell our file and now here you can see it will now gives us all of that labels right here and all of that products anyway so that's going to be awesome as well so that's working the way we expand to work so now the next thing which we have to do is that we also have to go to the colors as

well so I'm going to just go to the colors so I'll go to the price one more time and I'm going to copy that from here and I'm going to just replace it right here here okay so underneath that I'm going to get my input and let me just close it manually H come on like so and we have to specify these values so we have a handle change we'll be now set to handle change and are we getting it or not we are not so we have to uh destructure it from the top and

now what we have to do we have to just specify value of blank And the title will be also set to Black and then we have a name of test one okay so this is going to be the test one and then we have a color of totally black one more time and now I'm going to duplicate them um I don't know maybe uh 1 2 3 four times maybe so I'll just write 1 2 3 4 so I just duplicate that component four times right here so this is a black color I'm going to

just replace that to blue color and also this color to toally Blue as well and also The color will be set to Blue and I'm going to also change that to from a black to what do we call it uh red would be fine but the title should be uppercase and I'm going to select it one more time and this one will be set to green and this one will be also set to green and I'm going to finally select it to I don't know um uh White will be fine so I'll just select it

to White the title would be White but we cannot see the tile and you know what I just realized that the final one we also have to create it manually so like we cannot do anything for this one as well so we have a label with a class of sidebar and then label and container as well okay let's just remove the HTML from here and I'm going to just specify um what do we call it our input area right here and I'm going to just change the type to like Radio and on change will be

now set to a Hand handle change there we go and now after that I'm going to also provide a type of radio uh we already provide type of radio to it didn't we y we did the value will be now set to totally white and also I'm going to provide a name of test one as well so now underneath this input area what do we have to do we have to write our span with the class of check mark and we also have to specify some sort of a styling into it so like inline styling

so I'll just write Background it'll be now set to totally white and I'm going to also provide a border of uh two pixel solid poly black okay so now if you sell file and here you can see we are now getting all of these colors right here so if you click on it and all of that colors right here but we cannot see that white one we can change the label of that if you want to uh but you know what I'm going to change that color to something else like uh I'm going to also

provide a color of white To not white but black would be fine so if you sell that and you know what I'm going to remove that from here and as a label where is that span check mark and then we have white where is our y text did we just put a y text or something okay we have to put it right here so I'm going to just place my white text and now here you can see we are now getting it right there I didn't know like okay so now it's St working so we

Have white green blue red and all of that but we also have to specify our all right here so I'll just provide class name of uh class name of all right here okay so I'm going to just put all right here so if you save that and here you can see it will not uses that linear gradient right here why is that that's because we already declared The Styling inside this all uh I mean like inside this color. CSS file and this is how we can specify and this is how we can Pride All right

Rus so that was a huge refactor so now the next thing which we have to do is that we have to take care of this card and render appropriate card like based on the user selection or whichever kind of filter the user perform all right so next thing which you have to do is that we have to pass appropriate data to each of these components so what I will do is that I'm going to first of all pass my query into this navigation so I'll just write query And I'm going to also provide like handle

input change so I'm going to going to just copy that and I'm going to place it right here so the next thing which you have to do is that we also have to provide or handle change event right here into this component so I'll just provide it as a PR so we have handle change there we go and not a handle change but um handle click to be precise not a handle change but handle click I'm going to copy that and I'm Going to place it right here as well so the final thing which you

have to do is that we are going to be passing all of our filter data into this products component and then we are going to be iterating over through that component and then we are going to be rendering each of these items right here like the appropriate image the title and all of that kind of stuff so here you can see we just have our results right here I'm going to copy that and I'm going to Place it right here as a pro but let me just show you like what is this results so I've

already write all of the code for it but here what we are doing is that we are getting all of that data from that item I mean like from their database which we have right here so I'm going to just open there real quickly so here you can see we have different kind of images different kind of title we have star reviews new price pre I mean like previous price new price Company Color and all of that categories right here so here we are just destructuring all of that data from each of that component and

we are passing all of that data to this card component as a prop so here you can see we have image we have title and all of that kind of stuff right here we are passing all of that data dynamically into my card component so we will have access to all of that data dynamically inside my card component so what I will do do is that I'm going to just s my file right here and now the next thing which you have to do is that I'm going to go into my product section right here

and I'm going to just remove all of this stuff from here I'm going to remove that the next thing that you have to do is that we already passed this result right here so I'm going to just copy there and I'm going to destructure it right here so I'm going to just destructure there and I'm going to just pass it right here Okay so if you just pass it right here if you s file nothing will happen so now the last thing which you have to do is that we have to go to this card

component and we have to just refactor the a little bit so let me just show you that I'm going to just remove that from here I'm going to save my file and now I'm going to go into my card component right here so now here you can see we have like the same image right here we have the same uh title we have the same Reviews and all of that same and pre I mean like all of their previous um price and all of their new price right like here you can see we have hardcoded

data into all of these card component and we don't want that we want to render a dynamic content into these components so like Dynamic image and all of that title and rating and all of that kind of stuff so I'm going to refactor this component from scratch so now if you want to refactor this component first of all I'm Going to go into my app component and I'm going to just copy them like this D structuring I can type it manually but it will take a lot of my time so I'm going to just place

it right here okay so we already D structure all of that data which we are passing to this component as a prop so here you can see we just destructure image and all of that kind of data so next thing which you have to do is that I'm going to leave this CLA and all of that alt right Here I'm going to just select my image and I'm going to just remove them and here what I will do is that I am going to just copy this IMG and I'm going to just past it right

here okay so now if I do that and if I sell my file and let's just wait for it so here you can see it will now just render all of their Dynamic content right here like all of their images right here all right that's cool so the next thing which you have to do is that we also have to provide that Title right here so I'm going to just pass my title in here just for random data and now the next thing which you have to do is that here I'm going to just remove

this shoe and I'm going to replace it with my title okay if s file so here you can see we have this different kind of titles right here and don't worry I'm going to change the fonts and all of that kind of stuff just in a second but I just kind of want to provide different kind of data into it Uh dynamically so next thing which you have to do is that I'm going to just remove that star from here I mean like that icon and I'm going to just replace it with star okay so

I'll just copy that four times you can provide three or two times whatever so I'm going to just pass it four times I'm going to save my file and here we are getting uh this black color what was that uh class I pr I forgot the name of that class let me just go back okay so it's this class I'm Going to just copy that from one component I'm going to delete it then I'm going to go into my data and and I'm going to select my okay I'm going to just select there and I'm

going to hit controll D and I'm going to select all of these items right here so we already provide this style but I don't know why it's not working class name of there let me just pass it manually I guess I missed have something in it oh I just write ratings instead of rating I just Proide s in here so I'm going to just sve my file and I'm going to save this file as well but it will just remove these Stars you know I'm going to just render it dynamically I'll just write star not

start but star and four times you can put three times if you want to but for me four star will be totally fine okay so we are totally getting there the next thing that you have to do is that I am going to also provide um reviews right here so I'll just write Like reviews in here and then finally uh as a label I'm going to remove this label from here or you know what I'm going to just remove this level and I'm going to just pass my new not new but uh pre price and

here I am going to just render my new price right here so if you sell file and here you can see we have our previous price and we have a new price right here for each of these items right here okay so we have all of this Dynamic content right here you can Provide more than that if you want to but for me that's totally okay so here you can see we already password um uh what do we call it or filter functionality right here if I just click on a sneakers it will just give

a sneakers if I click on a Flats okay we don't have flots uh okay so I'm going to go into my flat this component where is the category so I'm going to just go into category very quickly and instead of Flats uh I'm going to just change that to Flats uh F LS I bet and I'm going to change this one right here as well so if you s our file and now let me just refresh that I'm going to click on Flats it will gives a splash sandals and I'm not pretty sure about are

these sandals or I guess these are all Sneakers but I don't know I just put a random data in here I don't have any idea about all of these stuff so heels then we have all of the items right here one more time then We have uh from $0 to 50 here you can see we just getting the $50 uh items then we are getting a $100 item then we are getting 150 and then finally we have $200 of items right here so if you click on all of the colors so here you can see

it will just gives us all of the colors right here if you just want a black color so I'm going to just click on black and it will now give this black color right here if you just want to get a blue we have red we have green and we Also have white color right here okay so that's looking cool but now I'm going to just click on all of the products so that's not working that's not working we have to take care of that really quickly so that's in this recommended component so I'm going

to just copy the name and I'm going to go into there did you saw like how much fast I came into this component that's because you didn't take my visual Studio C course so you got to go into that course and you have to take That course and this is totally my guarantee that by the end of that Visual Studio coder course if you took that course you are going to be calling yourself as a Sonic coder I don't want to go that much fast in the recording because a lot of people get confused like

hosan how did you get this fast into this component and how did you write this code that much fast and all of that kind of stuff so that's why I don't want to just go that much fast in My recording so TR trust me like when I'm working on my personal project I just go like crazy and if if you're a programmer and you sit just uh with me you're going to be calling me a crazy because I type like a uh you know that's another story I'm going to just leave that anyways I'm going

to go into my app component right here and here you can see we just pass this handle click right here like whenever somebody clicks on this component so what do you want to do Here you can see we have handle click right here so we are just getting there data and then we are just filtering it right here okay so you already know all of that stuff but now let me just get there which is uh handle click but you know what uh I'm going to just remove there but first of all let me just

create a component separate component for these buttons they aren't looking that cool uh we already built that component But I forgot to refactor this component we just write a button right here so I'm going to just take care of that I'm going to just provide a few um what do you call it I'm going to just pass a few values like I'll just pass this values like on click a Handler and I'm going to also provide a value to it it will take some sort of a value and I'm going to also provide a title

for this button so what I will do is that I'm going to just remove them and I'm going to just Replace it with this button right here okay so now the next thing which you have to do is that I'm going to just write on click like when somebody clicks on this button we just want to find this perimeter right here this parameter um event right here which should passing and the next thing which we have to do is that we also have to pass our value which we are getting dynamically and I'm going to

also provide a value to it okay and then I'm going to just give him some Sort of a class name like buttons would be fine okay that's going to be totally fine and I'm going to just pass the title finally so I'll just write title tle there we go now we create this component right here so now let's just reuse there instead of these buttons I'm going to use my own so I what I will do is that I'm going to remove there you know what um I guess I'm going to leave that first one

I'm going to just leave them and now let me just get my own Buttons so buttons there we go and now I'll just provide on click Handler which we are taking and then we are going to be just passing or handle uh click event right here and I'm going to also provide a value of Nike okay uh I guess I'm going to have to close there otherwise it will giv us uh is there buttons or button okay buttons anyways uh uh I am going to just close it manually like so but why it's giving us

this nasty error once we have our Mouse ordered identify Unexpected I'm going to close that and yep that's cool but why it's giving us an error any time I want to pass some sort of a value to it so I'm going to P some sort of a value like Nike now it's not giving us any error and I'm going to also pass the title of Nik as well okay so that's cool so I'm going to just duplicate there for Ed puma and and I'm going to just remove this title I'm going to select that hit

contrl D And add add ID there we go and I'm going to just select Nike hit control D set that to puma and then we have uh Nike one more time I'm going to change that to W anyways that's cool and for this button we cannot do anything with it you know what I'm going to also duplicate let me just remove this one from here and I'm going to duplicate this one so instead of value I'm going to just remove this value right here and I'm going to just pass uh empty value like Empty string

and I'm going to also pass my all um products as a level so now I'm going to sell my file and now let me just refresh that we are not getting any kind of error now I'm going to click on Nike and then I'm going to click on a products and now it's working all right so now we are successfully done with all of our project but we just have to provide a little bit of styling for this typography and stuff anyway so I'm going to click on all of the product then Sneakers Flats sandals

heels click on all of the product then we have 0 50 and 100 and over 100 and then we have all of the colors then we have black color blue color red color green color and white um black color blue color red color green color and white color okay everything is working I'm going to click on all of the products then we have a Nike edid Dan Puma W I'm going to click on all of the products one more time and let's suppose if I want to get this one Like Nik Zoom freak so I'm

going to just P the name of him like on Nike it will give us all of the product of the Nik and then we have zoom all righty so this one is not working and I don't know why you won't believe me this error took me a lot of time to figure out like where in the world is I'm doing something wrong here you can see I just Rite this expression right here I'm going to cut that from here and I'm going to just Place it right here so I'm going to save my file finally

and now let me just search for something like Nike Zoom freak if I just write Nike right here so it will gives us all of the Nik products I am going to just search for a zoom it will now just giv us like Zoom freak and let's suppose if I want to get this one like uh let me just copy all of the name and I'm going to just place it right here so it will not giv us this item right here so this Book took me a lot of time you know what so finally

what I will do is that I'm going to go in here and I'm going to select all of that stuff and I going to Pro for family of s set of and let me just refresh that and why start taking all of that uh so we have access to this index. CSS right here I bet we didn't use that in here so that's why we are not getting all of that stuff let me just use um import and then we have to our index. CSS so now if we sell our file and here you can

see everything is working that way we expect them to work and everything is looking a okay so finally let me just test this for a final time and then we are going to be done for this project and if you are watching this video in my react course so then we are going to be done with or react course anyways I'm going to just click on all of the products it will give us all of the products if you click on a Sneakers and then we have flat sandals Hils I'm going to click on a

0 50 100 and over 100 I'm going to click on this one but I just figure out one more bug and that is occurring right here so we have to go into a sidebar then we have to go to the category so here what we are doing is that we are just providing a test right here and test for all of them that's cool I'm going to go into the price and here we are just specifying test two Right here that's also cool but now I'm going to go into the colors and we are specifying

test two right here so I'm going to just select that hit control d uh and you know what I'm going to just specify test three right here I'm going to copy that now I'm going to just select my test one and all of them and here I'm going to just specify test three if you s file and now let me just uh check that I'm going to click on this one click on this product and now that's Totally working so if I want to just get like blue I'm going to get blue then red then

green then white okay so that's also working let's suppose if I want to just get this product so I'm going to just copy that and I'm going to just place it right here so here you can see it uses just this one product right here and I'm going to just click on the sneakers and stuff and I'm going to just click on a Nik then we have IDs Poma ws and all of These products in YouTube channel so in this video we are going to be learning about tcri from scratch so what in the world

is tcri and why you should care about them so to give you a simple answer to them you can think about typescript is like a JavaScript with super power so what does that mean so typescript is like more powerful version of JavaScript it lets you do every single thing that JavaScript already does but it also adds Some extra features which we are going to be learning throughout this course to make you life easier when writing a larger and more complex programs so does it mean that we can only use typescript for a larger and complex

programs no of course not you and for any scale of project you can use it for smaller or for bigger and all of that so that was just a basic intro to what a typescript is so now let me just go ahead and go to the official page of typescript and how They call themselves so if you want to come to the same link you can just type this in your browser which is typescript lang. or and just hit enter and it's going to bring you to this website right here so here you can see

on the official page of uh typescript they call them themselves as typescript is a JavaScript with a Syntax for types like tcri is all about types right here Tye here you can see we have type and also for the JavaScript so you can think about Typescript like that so which kind of feature it provides you can learn more about that if you wanted to but you don't have to because you're going to be learning every single thing uh in this course right here typescript add additional syntax to a JavaScript to support a tire integration with

your editor catch errors early in your editor and also a result you can trust what is that mean typescript code converts to JavaScript which runs everywhere JavaScript runs like for the browser and also for node and you don't have to worry about Doo uh and in your right here and safety at scale typescript understand JavaScript and use type inferences our inference something which we are going to be diving into in a really great depth in this course to give you great tooling without additional code right here so you can go ahead and explore more about

typescript right here so here you can see cannot uh Find the name of or r i mean like they forgot something right here in the code and now the typescript is giving them complaints right here you can learn more about that and this is the official page of typescript right here and we we are going to be learning every single thing that is to learn about typescript in this course so yeah that was just it about the basic introduction of what a typescript is and now let's get into the installation so now let's install Typescript

in our machine so I'm going to just click on try typescript now I'm going to click on this button right here you can uh use it in the browser or you can say a playground so I'm going to just click on on your computer I'm going to click on that and it's going to brings us to this documentation right here so if you want to install this here you can see this is the command like n PM install typescript D- sell you can save that to your dependencies but we Are not going to be using

that we are going to be using something called this command which is npm install DG typescript let me just make that a bit bigger so you guys can see everything a bit better we are going to be using this Command right here I already installed there but now let me just show you how you're going to be installing there so I'm going to just open my terminal right here you can open your terminal anywhere you want and what I want to do is that I'm going to just check if I already have typescript or not

so I'm going to just write ts- V right here oh not ts. but TS c-v right here and it's going to gives us the time script compiler version which I'm using right here for this course which is 5.2.2 right here so if you already installed the cool if you did not install that you can just go ahead and copy this Command right here which is npm install DG and typescript and by the Way I forgot to show you something you have to have the nodejs installed already in your machine so I'm going to just write

like nodejs start .org I guess I'm going to go ahead and go to the nodejs right here and you just have to install each one of them like so you can install this version or you can also install this version right here so once you do just click on next next next and it's going to install in your machine and then you just have to write no- V so It's can also give you the version right here so currently I'm using 21.1 or something like that and this is my guarantee by the time you're watching

this video this version will be totally different than mine you're going to be using I don't know like 22 or maybe 25 or something like that but nodejs does not have to do anything with tcri right here I mean like there are a few things which we are going to be also discussing throughout the course but the versioning Doesn't matter you can install like as long as the version is like greater than eight you are totally good to go but if you using some version less than eight then you are not in a great spot

my friend so now let me just close that oh I forgot to show you that I just closed it let me just right click on that and open my terminal right here and let me just reinstall the typescript right here so now let me just make that a bit bigger and install that right here I'm Going to just copy this command let me just copy that I'm going to right click on that and here you can see I have npm install DG typescript I'm going to hit enter right here and here you can see I

already installed it so it's going to give us only this U message right here in your case it's going to be something different but anyways as long as you don't see any errors you are totally good to go so yeah that's then now the next thing which I want to show you is That you also have to install something called um TS node as well so I'm going to just write like npm and I and then you just have to write DG ts- node you have to do that right here okay so I want you

to just type this command in your machine and install that I want you to install that because throughout the course I mean like just for the beginning of the course we are not going to be using like all of that uh npm stuff like how to make a typescript Configuration and all of that we are going to be using a vs code extension and trust me then like supremely amazing for types script you're going to fall in love with that I promise but what I want you to do is that I want you to also

install this one as well so I want you to just hit enter right here I already installed that and it's going to reinstall that once again for me okay so yeah here you can see that's also install and there we go the next thing Which I want you to do is that I want you to make a folder anywhere you like in my case I'm going to create my folder inside my desktop and you can give any name you want like the name doesn't matter I'm going to just give a name of like has uh

playground or something like that come on playr right here and you can give any name you want I'm going to right click on that and then I'm going to open this folder in my vs code right here okay so this is how my vs code Looks like and chances are your vs code will not look exactly the same like mine but if you're wondering like Huzan I really like your vs code and your vs code extension and all of that kind of stuff you can go ahead and watch my vs code customization video and trust

me you're going to fall in love with my customization and the theme I'm using right here anyway so that's out of the course now I'm going to go ahead and go to the extension and let's just click on That in my case I'm using uh this shortcut right here but in your case it's going to look something like this I'm going to just go ahead and go to like code. vs code.com or something like that let me just go ahead oh that's not the thing uh I don't know vs code or something like that and

let me just open that and code. visual studio.com my bad and we are going to be using this score throughout the course and you are more than welcome to use whichever kind of Editor you I like yeah editor you like and in your case if you want to go to the extension area you're going to have to click on this button right here and it's going to bring you this similar interface right here so the first thing which I want you to install is this extension right here which is Javascript and also typescript nightly okay

so just install that and it is created by Microsoft so yeah we are to in the great hands and also install this code Runner Right here because throughout the code course I mean like just for the beginning of this course we are going to be using this code Runner a lot and trust me you're going to fall in love with this code Runner right here just click on that install button and it's going to install it in your machine so now I'm going to go ahead and create a file right here you can give any

name you want I'm going to just give name of like index.ts right here and we are Using a typescript so for this case we have to specify the TS extension right here if you are using a JavaScript so we just have to write JS right here we are now currently working with this DS I mean like we are currently working with typescript so we have to specify TS at the end as an extension so now I'm going to just hit enter right here and you don't have to do nothing else now let me just create

a binder or a shortcut whatever you want to call that so now I'm going to just write a bit of typescript code which you don't have to worry about right now so I'm going to just write like I don't know type of uh person or something like that and this person will have like I don't know name of string I guess that would be fine we don't have to worry about anything else I'm going to also provide this person right here you don't have to do anything else you just have to write this code right

here just this code nothing else And now if you want to run this code by using a timecrimes not right now but we are going to be going into all of that stuff a bit later in a really great great detail but not right now but let's suppose if I want to run this file how can I go about doing that and you know what let me just log to the console something like I'm going to just log to the console like person name right here and now if I sell this file and now if

I Want to run this code how in the world should I go about doing that this is how you're going to be doing there okay so here you can see we now getting John so now you might be asking like hosan how did you do that tell me I'm telling you but you have to give me a few seconds you already installed this extension right here which we have uh this code Runner extension right here you already installed that the next thing which I want you to do is that I want you to Open your

command pallet I don't know know how you're going to be opening the command pet in the Linux operating system and I also don't know how you're going to be opening your command pallet in the what do we call it in the Mac OS operating system but I do know how you're going to be opening your command pallet in Windows operating system right here but you got to search that for your own operating system for Windows users you just have to hit F1 and there we go Okay and here I want you to just search for

uh what do you call it the keyboard shortcuts right here so here you can see we have like open keyboard shortcuts I'm going to click on them and here you just have to search for the code Runner right here and here I want you to just select this one right here by default it's going to be set to something else I want you to just double click on that it's going to give you this input field right here and just provide shift and enter And there we go I want you to just hit enter one

more time and this is how you're going to be creating a shortcut for uh this code Runner right here okay so yeah that's amazing I'm going to just hold my shift and hit enter and boom there we go so here you can see we are now getting the result of JN right here now I'm going to right click on there then I'm going to go ahead and go to my panel position right here then I'm going to just set that to right if you like This layout feel free to make it like this if you

don't like this layout so you can just right click on that come on you can just right click on that go to the panel and you can make it to the left or also to the bottom itself okay so yeah throughout the course we're going to be writing our code like this or maybe in some some situation we are going to be also diving into the terminal and this is something which I will discuss in a really great detail Right here now we don't have to do nothing else and there we go I'm going to

delete this code right here and save my file and here you can see we don't even have any compile file right here so yeah that's also amazing so now let's get into the first technical topic of this course which will be annotations in typescript so annotation are used to specify the data type of a variable parameter function return values and other types of values So we are going to be learning about how to work with uh annotation for the functions and we're going to be also learning it for the strings for booleans and all of

that kind of stuff okay which are coming in a few se so now that we know what annotations is so what's the purpose of annotations so annotations help developers sketch errors early in the development by allowing them to specify what type of values can be assigned to a given variable or pass as An argument to a function okay so as I said that we are going to be learning about annotation for different kind of things which are coming up in a few seconds so now let me just show you the first example of using annotation

so here you can see we have annotation for string so how the syntax will look like first of all we are going to be creating some sort of a variable right here then we are going to be providing this separat right here which you can see and Then we have to provide some sort of a type so this is known as annotating or variable or you can say like annotation whatever you want to call that and finally we are going to be using the equal to sign and then some sort of a value which we

are going to be storing based on this type right here so yeah I know that sounds a bit confusing but here is the actual example of that so how we're going to be using that first of all we are going to be creating a Variable right here it doesn't matter if you want to create your variable by using the L keyword the cons or the war it doesn't even matter it's totally up to you but if you want to annotate there first of all you have to specify this separate right here then you have to

provide some sort of a type like which type of data this variable is going to be holding so in this case we are providing like the string value so here you can see so we anot or variable by String right here so yeah this is how the syntax will look like right here and you can provide some other value by just using the equal to sign and if you log there to the console it's going to give you like another value in this case because we are changing this value right here but on the other

hand I want you to keep that in mind if we annotate there by using a string but if we provide that like some sort of a number to it it's going to throw us an error right here so I want you to just keep this diagram in mind so this was for a string we can also write annotation for the numbers as well and the syntax will be totally the same so here you can see first of all we are declaring our variable then we are annotating there by using a number and we are providing

some sort of value of like seven and we can just add uh some other value to it but I want you to keep in mind that if you try to add some other type of value like in this case we Are specifying the string 11 right here this will not fly it's going to throw you an error or if you specify some sort of a Boolean value like true or false or something like that it's going to also give you an error and I'm going to also show you that in a few seconds so that

was for a string this one was for a number and now let's talk about boans so here you can see the syntax will be totally the same like if you try to add some other value for instance like Number or string it's going to throw you an error so I want you to just keep this syntax in mind and now let's get into the coding then you'll get to know what I'm talking about so first of all we are going to be learning about annotation for the strings then we are going to be also learning

it for the numbers and also for the boot as well okay so now let's talk about for the string so first of all I'm going to create some sort of variable like I don't know my name or Something like that and now if you want to annotate then so for that we are going to be using this uh colon right here and then we are going to be providing some sort of a type so in this case I'm going to provide a type of string right here and then we have to write the equal to

sign and which kind of value we want to store so like let's suppose if I want to store the value of like 12 it's going to gives us an error why is that if I hover my mouse overd It's going to gives us this error right here like type number is not assignable to the type string right here so why on Earth we are getting this error you already know why we are getting this error right here that's because we provide this string I mean like we annoted there is a string and we are storing

the value of 12 right here if you change that to some sort of a string like uh I don't know I'm going to just store my name like Huzan webd right here And if I just uh log that to the console like my name let me just go back and let me just run this code right here so here you can see it's going to take a bit of time and here you can see it's going to pronounce my name right here if you try to add or if you change the value of that like

my name and it's going to be equal to like some uh other person or something like that person there we go and now let me just save that and just run that and here you can see it's going To give us like some I mean like something other person right here okay so yeah this is how we are going to be um creating a variable this is how we are going to be annotating that and this is how we are going to be changing the value of them and yeah you already know how we are

going to be logging there to the console so now let me just remove them and now let's talk about for the numbers so what I want to do is that I'm going to create a variable like f number And I'm going to annotate that with a number and it's going to be equal to like I don't know it would be fine and now let me just log that to the console like Fair number and now let me just save that and run there let me just close that and rerun there once again so here you

can see we are now getting it right here why is that because we annoted that as a number and we are storing the value of at right here on the other hand let me just comment this Line out if I try to add some sort of other value like I don't know true in this case and you already know it's going to gives us an error like um type Boolean is not assignable to a type number but anyways I'm going to just save this file and run that and come on man I just zoomed in

let me just rerun that once again and here you can see it's going of gives us this nasty error and it is saying that um unable to compile like we cannot compile them and Here you can see the error like type Boolean is not assignable to the type number right here okay so you already get the error and this is how it looks like right here I'm going to just store the value of like 12 or something like that and finally now let's also create one for the Boolean as well I'm going to just create

a variable like is typescript hard or something like that and I'm going to annotate that by using a Boolean and it's going to be now Equals to false by default and now let me just log that to the console like is typescript come on is typescript or not typescript or typescript hard there we go now let me just set that and run that and here you can see it's going to give us a false right here why is that because we are now annotating that as a what do we call it Boolean right here and

we are storing the value of Boolean there we go so now let me just provide some other value like TSH hard like Typescript hard and I'm going to just provide like uh true right here and now let me just saell that and run that and here you can see it's going to gives us true right here because we are changing the value of there right here okay so that's cool but let's suppose if I try to access or let's suppose if I try to provide like know 12 or something like that and now let me

just H my mouse over to it so type number is not assignable to the type Boolean right here so this Is how you are going to be providing annotation for your variables right here so now let me just save them so that was it about for annotation and now let's talk about a type inference in typescript so what is a type inference and why you should care about that so the type inference is a feature in typescript that allow the compiler to automatically determine the type of variable based on its value baby in other words

if you declare variable with Explicitly specifying its type typescript will try to infert the type based on its value you assigned to it I know that was a lot of gibberish now let me just show you some code then you will get to know what I'm talking about so yeah here is the code so here you can see we are not providing any annotations right here and here you can see we are now inferring this type or I can pronounce this for iner inferring or inferring whatever you want to call them This type here you

can see we are declaring variable we are provid the value of string right here then we are providing the add then we are providing the true as a Boolean right here on the other hand if I just provide like uh for the string variable if I provide a Boolean it's going to gives us an error if I provide like um what do we call it for number I provide some sort of a string it's going to gives us an error and for also for Boolean if you specify Some sort of a number or a string

it's going to also gives us an error so now let me just write some code then you'll get to know what I'm talking about I'm going to delete all of that code and you will found all of that code in the in yeah the description below which will bring you to my gab repository and you will found all of that code so now let me just declare a variable um and I'm going to just give of like Tech and it's going to be equals to like I don't know Typescript right here so what I did

is that I just declare a variable right here if I H my mouse over to it so what are we getting we are getting this annotations right here let me just highlight that for you here you can see we are now getting this annotation right here by default so now let me just log that to the console and see what's going to happen happen and I'm going to just write tag and now let me just log that to the console and you probably already Know like uh which kind of fre oh I forgot to sve

the file now let me just save that and rerun that and here you can see we are now getting the type of typescript right I mean like the value of typescript right here now let me just check the type of this Tech right here semi file and rerun that it's going to gives us a string right here cool that's amazing but now let's suppose if I provide like some other value to it like I don't know maybe um I'm going to Provide some sort of like 12 variable or something like that if I have my

mouse over to it it's going to give us an err it's going to say like type number is not assignable to a string right here this is not allowed because you are currently working with a typescript not a JavaScript but if you are using like a JavaScript now let me just change that to the JS right here you already know it's not going to gives us any errors or anything like that let's just remove That save my file and run there it's going to give us 12 right here but on the other hand if we

change that to TS just to that anyway so if I just run this uh code right here it's going to throw us a beautiful error saying like um type number is not assignable to a type string right here and amazing you already know that now let me just infert some other value like I don't know F number or something like that and it's going to be equal to 8 and now if you Sell them and if I hold my mouse over to it so here you can see what are we getting we are getting The

annotation of number right here so it will automatically invert the value of number so if I try to change the value of to like something else like I don't know string so here you can see it's going to give us an error and you already know why now let me just remove that and now let me just create also is or not is but TS hard and it's going to be equals to Like true now let me just sa there if I H my mouse over to it it's going to give us The annotation of

Boolean right here so it's going to infert the value of Boolean you can say like that now let me just duplicate them and change that to Fair number and I'm going to also provide the TS hard word here sa my file and run them come on save my file and run them and here you can see we now getting typescript and and also true right here now come on let me just write A type off and save my file and run that come on you can't see I'm sorry I'm doing that again and again but

I have to so the first value we are getting a number I me like string and the second one we are getting a number and the third one we are getting the Boolean word here so that was a type inference or infering the type how however you want to pronounce that in typescript so now let's talk about one of the o one of the I canone say it but yeah one of the Weirdest type in typescript which is called any type so what is the any type and why you should care about there so time

script has a special yeah Special so time script has a special any type that can be used to represent any type so like let's suppose when a variable is annotated with any type typ script will allow it to have any value and disable all the type checking for that variable and its properties yeah that's totally awful like why on Earth we would use a Typescript uh if you want to provide the any type so now let me dig into this Rabbit Hole a bit more so warning while the any type can be useful in certain

situation yeah obviously uh it should be used sparingly um or use of any can leate to un type code and make it harder to catch type related bugs during the development and it's certainly better to use a specific type whenever possible to get the benefits of typescript type checking yep there we go so how that's Going to look like well you don't have to do nothing but you just have to declare variable and provide the any type to it and you can provide like I don't know the type of number the type of string the

type of whatever you want you can even um you can even call it as a come on you can even call it as a function right here you can provide the two uppercase and all of that stuff and then St the oful the any type can be in some situation useful but not all the Time and be aware of that and here you can see I mentioned that in this slide so I want you to always keep that in mind and now let's get into the coding so I'm going to just remove all of that

stuff from here and I'm going to just declare a variable called colors and I'm going to provide or annotate that with the any right here and I'm going to just set that to Crimson or anything like that now let me just log that to the console like you already know what it Will give us in return so here you can see we are now getting the color of crimson obviously and now let me just provide something else uh like I don't know color of 20 and now if I sell them and rerun there and run

that and here you can see it's going to give us 20 right here we can also provide like uh I don't know we can provide anything we want I'm going to just change that to like uh I don't know true we can provide uh I don't know let me just call that as A function you know I'm going to just uh comment this line out let me just sell that and rerun that and here you can see it's kind of gives us true right here but now let me just call that right here say my

file and run this file once again and here you can see it's it's going to obviously gives us an a like uh color is not a function or an object right here so here you can see it's going of gives us an error it's not going to gives us any error inside our editor but once we Run this code it's going to give us an error right here and that any is the most awful type you can ever find on typescript right here if you change that to something else like I don't know if I

just um provided annotation of string right here it's going to gives us an error here you can see if I have my mouse over to it so type number is not assignable to the type string and also type bu is also not assignable to a string if I hold my mouse over to it so This expression is not callable type string has no call signatures okay so yeah that was it about for the type any and I already show you the slides so now let's learn about a function parameters anotations in typescript so function parameter

annotation in types scrip are used to specify the expected types of a parameters that a function should take okay so how that's going to look like this is how it's going to look like right here you don't have to do nothing But here you just have to annotate the perimeter of your function to some something right here like which type of data this parameter should be taking like in this case uh we are currently adding a number so here you can see we are now providing this number as perimeter and we are inating that with

the number right here and then we would be able to perform this operation uh that was string so then we won't be able to provide uh This plus right here and It's going to gives us an error and this is a regular function flavor and this is the error function flavor right here okay so if you have like multiple uh perameters you can also annotate there right here like X and uh anot with number and also we have y and anot there and this is how we can work with the function perimeter annotation with a

regular function and also for the error functions as well so now let me just write some code and then you will get to Know what I'm talking about so first of all we going to be inating the regular function right here okay so I'm going to just create a function I'm going to give a name of like add one and here you can see see my ID automatically provide a type for that so I'm going to just provide a num and we are going to be annotating that with a number right here okay so inside

that I'm going to just return the numb plus one and now let me just create some sort of res like con Resin it's going to be equals to like add one and now let me just provide a three or something like that now let me just log that to the console go back and run that come on uh run that once again and here you can see it's going to gives us four right here why is that oh why on Earth oh there we go because we are providing one to it here we are specifying

three this number is going to tag that three and we are just adding this one right here so it's going to Give us four anyway so if I just change that to string let me just change that to string and here you can see if I have my mouse over to it it's going to give us this um error right here let me just highlight that for you argument of type number is not assignable to the perimeter of a type string okay so it's going to obviously gives us an error and there we go now

let me just provide a Boolean I want to show you single thing and it's going to also gives us an error If I hold my mouse over to it so operator plus cannot be applied to a Ty Boolean a number um and here you can also see that same error now let me just change that to like um number once again and there we go and now let me just show you for the arrow functions as well so Arrow functions or Funk would be fine rather now let me just sell them and yep so now

let me just create a double function and it's going to take two parameters the first one is going to Take is for x and it's going to also take the Y as well come on let me just proide a comma and Y and we are going to be just providing like x * y right here and now if I just log that to the console like double or you know I'm not going to log that to the console I'm going to just write conso res and it's going to be equals to double and I'm going

to provide like two and 10 right here okay so if I hold my mouse over to it so it's going to give us like Perimeter X implicitly has the any type right here by default as I said that you got to keep that in mind mind so here you can see it's going to give us like by default the type of any because time script do not know which kind of data we are going to be specifying it for this parameter right here like either we are going to be providing the number or we are

going to be providing some sort of a string or we are going to be providing some sort of a Boolean or something like That typescript don't have any idea what we are going to be providing right here inside a double so that's why the typescript will by default provide the implicit type of any rid here okay so what I want to do is then I'm going to just change that to uh number right here so I'm going to just annotate that with number and I'm going to also change this one to number as well and

this one is going to giv us an error because we redeclare uh block scope I didn't know That now let me you know let's just or you know I'm going to just comment this line out and now uh let me just log there to the console like res and now let me just saell there go back run my code and here you can see it's going to gives us 20 right here why is that because we are providing a two for the first parameter and we are providing 10 for the second one so that's why

we are now getting two right here okay so this is how the any Ty work this is how You're going to be annotating your function parameters right here oh I forgot to show you something uh let me just show you that right here let's suppose if you provide more values than we specified inside a perimeter uh signature right here it's going to gives us an error so also notice typescript will give you a warning if you provide more or less argument then you specify in the perimeter area right here okay so now let me just

provide something like Uh I don't know it's going to take two parameters like X and also the Y so I'm going to just specify like uh I don't know maybe 20 and here you can see it's going to give us an error if I H my mouse over to it it's going to give us like unexpected two arguments but got three or let's suppose if I just remove both of them and we just provide one to it if I have my mouse over to it expected two arguments but got one right here so it's going

to gives us this Error as well so I want you to also keep keep that in mind as well so now let's talk about the default parameter values in typescript so nowadays in JavaScript we also have this feature available in es6 like modern JavaScript we can specify the default value to our perimeter right here so if you want to provide a default value for your parameter in uh in a function by using a typescript you have to annotate that right here so you just have to provide This annotation and you can specify any value you

want so in this case we're just creating this function and blah blah blah yeah I know that was quick so now let me just write some code because I don't want to waste your time now let me just write some code and then you'll get to know what I'm talking about so now let me just remove that and I'm going to just create a function give a name of like greed or something like that and Also I'm going to provide a person and let me just remove that right here and I want to set that

to like I don't know anus I don't even know how to spell the anonymous but anyways now let me just return like I don't know hello and person right here okay and also I'm going to just for cons rest and uh greed and I'm not going to provide any value for them let me just log this rest to the console let me just go back and sell my file so what do you think will be the Result if I run this file and hello Anonymous right here which means like this is working totally a okay

if I have my mouse over to it so what are we getting we are getting the default inferring in typescript right here so person is now currently set to string so that's what we are getting right here like totally a okay but but if you want to provide a specific annotation for this person we going to be doing it like so so I'm going to just provide my Separator and then I'm going to write my string you can provide like number if I just write number it's going to obviously gives us an error it's going

to say like type string is not assignable to a type number right here let's just change that to string baby let me just save that and rerun that once again and hello Anonymous right here but if I want to provide some sort of value like hosan semi file it's going to give us like hello hosan there we go As I said like time script is not that hard and we are almost there baby we are almost there so now let's talk about the return value anotations for a function in typescript so what do I mean

by that so let's suppose in this function you are going to be returning some sort of a value so like in this case we are now returning the number right here we're providing the X and we are annotating there by number so obviously we are going to be returning some sort of a Number for this function so if you want to annotate the return statement as as well so for that outside from the perimeter area you are going to be providing your annotations right here and then you can do whatever you want okay so this

is for a regular function now let's talk about for the aror functions as well so here you can see we are just creating our double two and if you want to annotate the perimeter value so this is how you're are going to be Annotating that but if you want to annotate the return value so for that you are going to be writing syntax like this right here so this one will be for the return annotation and then you can do whatever you want to do inside that function and this is how you're going to be

logging there to the console so now let me just write some code then you'll get to know what I'm talking about so first of all for the regular function right here and I'm going to just create A function give a name of like double it's going to come on let me just do that once again function and I'm going to give a name of like double one right here it's going to take the perimeter of X and the type will be set to number right here so for this function we are going to be returning

like X time x so which means like we are going to be returning the value from this function if I have my mouse over today here you can see the typescript will Automatically infer the value of number right here we can also provide that by ourselves so I'm going to just provide the separator and I'm going to just provide a number right here and there we go so now let me just write con and it's going to be equals to like double one and in this case we are going to be just writing two now

let me just log this rest to the console sa my file run it it's going to give us four right here now we are doubling uh the value of this Function so I know that's not not that much difficult thing to learn but if you want to annotate the return type uh I mean like if you want to annotate the return value so this is how you're going to be doing that by using a regular function and now let's talk about for the arrow functions as well okay so let me just create an arrow Funk

and inside there what do you want to do we just want to create a double two and it's going to be equals to like um it's going To take some sort of a perimeter like X and we're going to be annotating that as a number and I'm going to just provide like a number and it's going to take x * X next there we go now let me just log that double and provider two or something like that let's just save that and run that come on I just way zoomed in okay so here you

can see it's going of gives us four and there we go this is how you're going to be annotating the return value which you are going to be Getting from this function sometime you would know that and a lot of time you don't so typescript will by default infert the value right here but yeah you get the idea so now let's talk about the wide in typescript so what is a wide and why you should care about that so wi is a type that represents the absence of any value so it is often used as

the return type for the function that do not return any value okay so then we're going to be using this wi okay and this Is how the code will look like so here you can see we have this function which is not returning something but we are just logging like this is my message or something like that to the console so here we have to specify W right here you don't have to do nothing but you just have to specify this word and it's going to do it for you okay so now let me just

write some code then you'll get to know what I'm talking about I'm going to delete all of that code I'm going to Create a function once again give a name of like print message or something like that it's going to take like a message as a perimeter come on just a message and we're going to be specifying the string value to and you can in that with anything you want and now let me just console log some value like this is my and let's just render or message right here and now let me just write

and provide a message right here let me just save that go back and run that come on I Got to do that manually and here you can see uh this is my message right here which is totally working if I hold my mouse over to it so here you can see what are we getting we are getting this white right here why is that because for this function we are not even returning anything if I just write like return and message and let's just close there and if I hold my mouse over to it right

now it's going to inate there with a string right here so we can ALS to do that Manually so we just have to write this separator and white and here you can see if I have my mouse over to it so we are now getting white right here okay so yeah this is aoide and you should avoid because you should return some value from your function so now let's talk about the brother the sister the mother or whatever you want to call that the grandfather of any keyword so what are we talking about we are

talking about the never resert keyword in typescript So what is the never the never keyword is is used to indicate that a function will not return anything but trust me it's totally different than the white or that a variable can never have a value the never type is useful for indicating that a certain code path should never be reached or that a certain values are impossible it can help catch errors at compile time instead of run time so how on Earth we are going to be using the NK keyword we are going to be using

that For three cases so like a function that always throw an error we are going to be using never keyword for that or a function that has a infinite Loop we are going to be using a never for that or a variable that can never have any value so for that we can use the never keyword so now let me just give you the example of that so now let's talk about the function that always throw an error so if you've already worked with a mer Stag and specifically in the express JS and I'm not

assuming that you already work with that but I'm going to just say like for some of you if you already work with a mer stack and specifically for the express yes a middle words for um you know what that's other story let's just get the hell out you know what that's just other story so here you can see we now creating a function we are providing some sort of a message to it and we are now providing an error for that message so for that we can annotate that with a Never resert keyword right here

okay so now let's talk about uh for the infinite Loop so now in this case we are just providing the infinite Loop so for that we can also use the never Reser keyword for like recursion or something like that we can also use the never keyword and by by the way this never keyword can be rarely used in this kind of situation like when we are throwing some sort of error and I have never used that some sort of a what do we call it for um Infinite Loop or something like that you can also

use it like a variable that can never have a value so here you can see we are declaring variable and we are specifying or annotating there with the never desert keyword right here and also in this function we are providing the infinite Loop so that's why we provide a never Reser keyword and now this x is going to be equal to this uh infinite Loop function so this line will cause a compile time error because the function Never returns so then uh it's going to be equals to the never resert keyword right here I know

that sounds confusing but now let me just write some code and then you'll get to know what I'm talking about and this one isn't that much use but I want to include it in this course anyways for some of you who cares about it so I'm going to just write through uh I don't know throw error something like that I'm going to provide a message and we are going to just Annotating that as a string and I'm going to just Pro like throw new error of message and we can annotate that with never resert key

right here and now if I have my mouse over to it so here you can see we are now getting the never um God damn it if I have my mouse over to it so here you can see we now getting the never resert keyword right here okay so yeah you can use that if you wanted to now let me just give you another example of infinite Loop so I'm going to just Write infinite or in fi come on in fi my nit Loop and we're going to be just not providing anything at all and

I'm going to just annotate that with the never Reser keyword and inside that we are going to be using the while and true if that's true so we would get some sort of infinite Loop and you already know all of that stuff so I'm going to just write let X and we are going to be annotating there with the N Reser keyword and let me just create some sort of a function And never uh returns will be fine we're not going to be putting anything right here and I'm going to just annotate that with a

new resert keyword and while true it's going to gives us an infinite Loop and we are going to be also providing the x is equal to never returns and there we go so now let me just go back so you can use the never Reser keyword when you are throwing some sort of error you can also provide it for the function which uh Loop and you can also use it for a variable who does not have any value right here okay so that was a never resert keyword in typescript so now let's talk about arrays

in typescript so arrays are a type of object that can store multiple vales of the same data type okay so arrays in typescript are type okay this is something which I'm going to be discussing right now which means you can specify the type of values that an array can hold okay so yeah that Was just a basic definition of arrays in typescript now let me just give you example of that but before I do there are two flavors of creating an array in typescript so the first one is using a bracket notation and the second

one is is using this kind of I don't know HTML is HTML is kind of syntax right here okay so now let me just show you the first one which uses the bracket notation so first of all we are going to be creating our regular array right here Like we're going to be first of all declaring our variable then we're going to be storing some sort of values by using a bracket notation but if you want to infert that first of all we are going to be using the separator then we are going to be

providing some sort of a type like which type of data this variable or this array is going to be holding it's going to be holding the arrays of numbers right here but if we try to provide like I don't know strings Or booleans or uh function SC or objects or something like that it's going to throw us an error something which I'm going to show you in a few seconds and this one is the second syntax of creating an array uh inside a typescript and this one is totally old nobody use this syntax anymore okay

so yeah this is how you're are going to be creating an array in typescript so now let me just give you example of that then you'll get to know what I'm talking about so now Let me just remove all of that code right here so now let me just create a nums variable or nums variable like so and I'm going to just annotate that with the number of arrays right here and it's going to be equals to uh some sort of a number like I don't know one two 4 six or whatever you want to

call that now let me just log this nums to the console right here sa my file go ahead and run that it's going to give us like 1 2 4 6 and all of that data which we are Already specifying it inside this area right here now let me just get into it let's suppose if I just specify something else like I don't know if I want to provide like string so string on string and if I want to provide some sort of other value like true or something like that it's going to gives us

an error why is that because currently we are specifying like this array should hold the numbers array only numbers nothing else later we are going To be also learning about this operator but we are not there yet so we are not going to be discussing that right now so if i h my mouse over to it so type string is not assignable to the type number right here if I H my mouse over to this one so type Boolean is not assignable so type number right here so we will get an error right here let

me just remove them and this one was a first Flav or you know what let me just also give you example of strings as well So stir and I'm going to annotate that uh with string right here and it's going to be equals to like I don't know one two or something like that three maybe now let me just log that to the console like you already know what it really gives us but now let me just run there anyways it's going to give us like arrays of uh strings like one two and three right

here so yeah that's the first flavor now let me just uh comment or you know let me just delete that disc Code right here or you know let me just leave that right here and let's talk about the second flavor uh of creating an array so before I get into the second flavor uh I'm going to just uh show you something right here you know first of all let me just create an empty array so items and it's going to be equals to string and we are not going to be providing anything right here let's

suppose if you want to push item to this array so I'm going to just write like Items. push you already know what push will do push will just insert an element at the end of this array so I'm going to just proide like I don't know keyboard or something like that and now if I log these items to the console what do you think will be the result if I save this file and push that item right push that item but run that file right here so it's going to gives us the keyboard right here

which is totally working a okay but if I just duplicate that and if I just proide like I don't know 12 or something like that and now if I just run my code it's going to obviously gives us this error right here it's going to say that um come on uh argument of type number is not assignable to the perimeter of type string right here so it's going to gives us an error so time script is supremely strict and it already knows every single thing right here okay so it already know knows the types that's

why it is called the Typescript baby welcome to the typescript words so you cannot do that crazy stuff which you used to do in the regular JavaScript okay so that's then and what I want to do is then you know let me just give you one more example of a numbers because I know some people will say like Huzan will it work for the numbers as well or will it work for the array and something like that yeah it excuse me all righty so now let me just write a number that was a horrible Voice

by the way and it's going to be equals to this array right here and I'm going to just write number of list and let me just push like 20 it's going to obviously work now let me just write number of list s this file and come on H we don't have a lot of time and we are now getting 20 that's cool but let's suppose if I just duplicate there and try to provide true right here and I'm providing the positivity but we are now getting the Negativity right here argument of type Boolean is not

assignable to the perimeter of number cool okay so it's going to give us that error let me just show you that and there we go you got your own favorite error which is argument is blah blah blah so yeah that's then now let me just show you the alternative syntax of creating an array in typescript which is not deprecated yet but I'm going to show it to you anyways if you want to create an array By using the I don't even know what to call this synex but I'm going to just call it like HTML

kind of synex I'm going to just WR item or items and it's going to be equals to first of all we have to write this array and inside there we are going to be writing or annotation like string in this case and now it's going to be equals to this uh array right here so let's suppose if I just um I don't know let me just log that to the console oh we are getting an Error why is that oh that's because we providing the equal to sign right here we have to annotate there and

now if I just copy these items put it right here it's not going to gives us anything because this is totally empty okay so now let me just run that it's not going to gives us anything it's going to gives us the empty array because we did not store anything inside there if you want to create one for the numbers as well so you can just put numbers and now let me Just save that and let me just put like I don't know one two or come on four or something like that let me just

save that and run my file so here you can see we now getting the numbers array but let's suppose if I try to provide something like string and also the Boolean and also let me provide the object or something like that and it's going to obviously gives us an if I out my mouse over to so type object is not assignable to the type number right here Okay so this one is the second flavor of creating an arrays in typescript so now let's talk about a multi-dimensional arrays or you can also call it Matrix or

you can also call it the nested arrays if you want it to so for the sake of this lecture I'm going to call it a multi-dimensional array and you can call it whatever you want to call it So What on earth is a multi-dimensional arrays and why you should care about that so A multi-dimensional array is an array that Contains other arrays as its elements so multi-dimensional array can be defined using the same notation as onedimensional arrays but with nested square brackets baby so how that's going to look like this is how it's going to

look like so here you can see if you want to annotate that so we are going to be just providing a number one bracket and also another bracket as well and inside there we're going to be creating our next array or multi-dimensional Array right here so now let me just write some code for that and then you'll get to know what I'm talking about so now let me just remove there and I'm going to just go ahead and create a single die like single dimensional array and I'm going to just create a number and annotate

that as a number right here come on I should annotate that I always forget that and now let me just write like one two three four five or something like that now let me just Create a two-dimensional or multi-dimensional array so I'm going to just write const and mult uh multi multi-dimensional array and it's going to be equals to number and let's just provide two pair of brackets right here and it's going to be equals to like arrays and you can provide ENT and provide you a n array like there but in my case I'm

going to just provide one more array right here like one two and three come on four and five like this One and now let me just create one for the Triple dimensional array so triple and it's going to be equals to number and let's just provide three pairs of brackets right here I know you guys won't go that much crazy but I'm going to just show you the syntax anyways so we have array then inside the array we have yet another array and now inside this nested array we have yet another nested array right here

okay so let's just provide one two 3 four five If you are coming from the linear algebra stuff so you already know all of that syntax uh anyways you don't even have to know a linear algebra in mathematics so now let me just write a console log of single D let's just duplicate that three times and multi- die and we also have for the Triple come on not this one uh triple die right here and now let me just save that and let's just run that baby it's going to give us first of all the

single Dimension array It's going to give us the Double Di or multi-dimension whatever you want to call that and finally it's going to gives us the um triple Dimension or whatever you want to call that so yeah that was it about for the multi-dimensional arrays in typescript so now let's talk about objects in typescript so an object in typescript is a structure data type that represents a collection of properties each with key and Associated values the properties of Object can have a specific type and the object itself can be annotated with a type often defined

using an interfaces or type aliases both we did not learn yet like we didn't learn the interfaces and also the type aliases not right now but we are going to be learning there in a few seconds so typescript uses something called a structural I and say this for structural typing meaning the shape of an object is structure or properties is what matters for the type Comparability so how the syntax of object will look like this is how the syntax of object will look like and I know a lot of people will say like oh my

God hus what the hell is that I don't even know what the hell is going on but first of all like just creating a variable right here and and here we have to specify The annotation and also a specific TI for The annotation it's going to be equals to the property and can value so how that's going to look Like this is how it's going to look like right here so first of all we are just creating our variable right here and then we are providing a property and also annotation for that uh property right

here and then we are providing the equal to sign and here inside there we are providing our first property like what we are going to be returning or like which kind of data or which type of data we are going to be storing inside this person right here okay so in this Case we are just returning like first name String last name String and also the edge so you have to provide that properties and it values right here inside this person object right here so now let me just give you a quick example of that

or you know what uh I also want to show you the this one right here oh you know let's just say that okay so you can also provide a return value for the function like let's suppose for some function like if you already know the Factory function from my JavaScript course I mean like you don't have to know that but if you already know what a factory function is from my course so you already know uh what's going on right here but now let me just explain it for those who don't know what's going on

so here you can see we are just creating a function a regular function right here and I want you to do not pay attention to this type right here not for now so we are just creating a Function right here inside this function we are just returning an object so inside this object we have a name Alex age 19 and location United States of America so now if you want to return this object from this specific function right here so we can also provide this annotation uh or what whatever you want to call that for

the return value right here okay so this is known as a factory function if you guys know it cool if you don't know it cool too so yeah now let Me just write some code and then you'll get to know what I'm talking about okay so I'm going to just remove that and first of all define a person object oh you know let's just remove that let me just do that right away so person is going to be equals to uh this annotation first of all so what are we going to be storing inside this

object we are going to be storing the first name right here and now let's just provide uh the type of string right here and we are not Going to be providing a comma in this case we are going to be providing uh I don't even know what to call this one semicolon there we go and last name and I'm going to also provide a string and provide a column and also the edge and the edge will be set to number let me just go back and then we are going to be providing the equal to

sign and inside there we are going to be just writing our brackets right here so here we have to specify these values right here like For the first name it will be set to John last name will be set to D and Edge will be set to 30 right here okay so now if I want to access that so now let me just write cons log of I know name will be now coming from the person. first name and we can also get uh what do we call it person do last name and we can

also get the edge right here Edge there we go person. edge and now let me just save that and run there right here so what are we getting we are now getting The name John do and we are also getting the edge which will be set to 30 right here but now let's suppose if I just remove that edge right here so now if I have my mouse over to it so it's going to give us this error right here it's going to say like property Edge is missing in the type this definition which we

are already providing right here but required in the type um annotation right here so you have to specify that edge right here which we Which we remove it inside this definition right here okay so you have to specify their Edge otherwise going to throw you their error and now let me just show you how this error is going to look like so now let me just run that and it will give you that same error message right here as well if you specify some sort of a signature right here then you have to provide all

of that values for that signature so now let me just write 10 and there we go so That was for the object literal notations and now let's talk about for the function parameters as well so now let me just create a function I'm going to give a name of like uh print user or something like that and it's not going to take any perimeter or anything like that and for the return value what I want to do is that I'm going to just provide this same you know what I don't want to copy that let

me just type that because I know some of you will say like Who then you just copy and paste the code so yeah that's now let me just write Edge and Ed is going to be set to number we are getting some sort of error but I don't know why let's just put a number and there we go and I forgot something on what's up a function whose declared types is neither undefined void nor any must be returned C the H on man we are just returning this type right here and there we go oh

what's up type object is missing the Following properties just give me a break brother I don't even finish typing and you throwing me some sort of random errors and now let me just write name of hosan and I'm going to also provide the edge of 20 and also the location will be yeah yeah Chinese hosan I'm going to just provide China right here Chinese and woohoo and now let me just log that to the or you know I don't want to log there let's just write cons res and print user and we're not going to

be Specifying anything to it but I'm going to just write res let's just save there baby and run there and come the hell on run that once again and we are now getting the name of hosan age of 20 location of China there we go baby so yeah this is how we are going to be providing a signature for the return value of a function and this is how we are going to be annotating uh or object right here okay and I'm pretty much sure that I did not forget anything so now Let's get into

the type aliases so now let's talk about a type aliases in typescript so a type Alias is a way to create a new name for existing type and it allow you to define a custom type that refers to another type and give it a more meaningful or descriptive name and a type aliases are defined using the type resert keyword followed by the name of the Alias and equal to sign and the type it refers to so this is how the syntax will look like and how we are Going to be writing that in a real

word example this is how it's going to be looking like so here you can see first of all we are providing the type resert keyword and this type resert keyword is a special keyword like you have to specify the type uh keyword whenever you are creating a custom type and then we are giving the name of like person you can give banana you can give any name you want and it's going to be equals to this object and inside there we can Specify our properties and a spef specific types for their properties right here so

like we don't have to no longer do this stuff again and again so in this case we are just uh providing a name and it will be now set to string and then we are creating an edge and we are providing a number for that and also for location we don't have to do that again and again we can just create a person type or a custom type whatever you want to call that and then we will Be able to use it right here and here you can see we can also use that for the

object itself and even in the definition I already told you that you can create interfaces or type alias so now they we learn about type aliases so we are going to be learning about interfaces in a few seconds which are more powerful than type aliases but we are not there yet okay so now let's get into the type alas is code so now let me just remove all of that code right here And I want to define a custom type so I'm going to just give a name of like user in this case and inside

this user we are going to be providing a name of string I'm going to also provide the edge of number and I'm going to also provide a location of string as well you can provide array as a location but yeah uh anyway so now let me just create some sort of a function cons print user info or something like that and it's going to take the user and here we are going to Be providing our type alas or you can say a custom type whatever you want to call them so we are now providing like

all of that types as a perimeter right here okay so it's going to be equals to this function and inside there if I just write return and if I just write name uh and if I just write like user.name in this case if I H my mouse over to there so what are we getting we are getting the user and annotated with the user type right here okay so that's why we Are now successfully able to get this name from this user right here and we can also provide the what do we call the edge

or you know let's just wrap there with some sort of a parenthesis so that we get an amazing output I'm going to also provide Edge and inside there we're going to be using the user. edge and also let me just write for the location as well so uh let's just write come on was then you can do that let me just for user. location and there we go okay so Now finally let's just go back oh my God what the hell am I doing okay so now fin let's just go back and create a result

and result is going to be equals to like print info or print user info right here and inside there we're going to be providing the name and the name will be set to Alex and I'm going to also specify the edge and the edge will be now set to 20 or something like that and let me just also provide I don't know location or something come on I like That location and location is going to be equals to United State of America and string is not assignable oh it's because I'm providing a string right here

uh I shouldn't be doing that and now let me just log the rest to the console and there we go I'm going to save this file and run that and we are now getting the name of Alex we are also getting the edge of 20 and we are also getting the uh location of United State and yeah this is how we are Going to be defining or custom type Alias and this is how we are going to be using the inside a function so we are not just limited to use these types inside of functions

later we are going to be using it for a different kind of things but for now uh I want you to just keep in mind the syntax of how to create a type aliases in type script right here so it's like not that much difficult thing to remember you just have to remember this type and the rest is Totally object right here and the convention is to make it the upper case like the first letter you should make the upper case for here let me just change that to I guess it's going to give you

an error if you just change that to lower case nope it's not going to give you an error the convention is to use the upper case but you can go with lower case as well and I just learned that so now let's talk about optional properties in typescript so you Can make a certain property optional in an object type by just adding a question mark after the property name for example let's say you have object type of an person like name aged and email but you want to make the email property optional so you can

just provide like question mark and that would be totally optional so here you can see in this example we are just creating our uh type Alias right here so we have a name property we also have the edge and let's suppose if You want to make the email property optional so for that we just have to write this question mark and it's going to make it totally optional so how in the world we are going to be using there this is how we are going to be using there so now when you create an object

of type person you can choose whether or not to include the email property like it's toally on you if you want to provide it you can if you don't want to provide it you don't have to okay Because we already make the optional right here inside or type right here so now in this example the endless object does not include the email property while the bomb object does because the email property is marked as an optional in the person type definition it is valid to create an object with or without it there we go so

now let me just give you a quick example of that and then you'll get to know what I'm talking about so now let me just remove All of that code from here and I'm going to just create a type of user and inside that oh I forgot to include equal to sign and inside that we're going to be giv name of like some name and it's going to be set to string and we're going to be also providing Edge and Edge will be set to number and I'm going to also provide a location of string

as well but now in this case I want to make this Edge totally optional so I can just provide a question mark right here or You can also say uh optional property whatever you want to call that and now it's toally on us if you want to provide uh this Edge right here so we totally can if you don't want to provide this Edge we don't have to so now let me just create a user object and the type I'm going to provide this uh user type right here and inside that we're going to be

using like the name and the name will be set to my own name and I'm going to also specify 20 right here and I'm going to Also specify the location the location of China yeah there we go and now let me just go ahead and log there to the cons and by the way I really love China really want to go to China sometime but I don't have enough money to visit to some other country so yeah that's that anyway so now let me just create a name right here and I'm going to just write

like username and I'm going to just write Edge and here I'm going to just write like user. Edge And also for the location I'm going to just render like user. location right here okay so I'm going to go back and now let me just saell that and run my code so you will get to see the result in a few second if I rerun that once again here you can see name is set to husan Edge is set to 20 location is set to China but now let's suppose if I want to remove this Edge

right here if I just remove that save my file and here you can see inside our coder we are not Getting any errors but if I just rerun that and here you can see we are not even getting any errors right here instead we are getting undefined like is requiring some property I mean like we are providing some property right here but which is currently undefined like we did not Define that so that's why we are now getting undefined rather than some sort of error okay so let's suppose if I just remove this question mark

from here so here you can see instantly we are Getting this error if I hold my mouse overr so the property Edge is missing in the type this definition but requireed inside the user here you can see it is requiring there we are not providing there so that's why it is now throwing us this error but if I just make that optional we don't have to do anything okay so yeah I'm going to just leave this code the way it is and then was there about for the optional properties in typescript so we are already

here so Now let me just talk to you about one other property which is called the read only property and I did not make a slide for that because this is totally simple and easy so yeah that's why I didn't make a slide for the SNM suggest that it will make our property read only which means like we can only read this property but we cannot change the value of that so here you can see we make this property read only we are setting that to China but let's suppose if I have Like uh user.

location and you want to set that to something else right here so we are already getting this error if I H my mouse over to it so cannot assign to the location because it is read only property right here okay so you just have to keep that in mind on the other hand if I want to change the name so I'm going to just write like name and here you can see we're not getting any errors whatsoever but we make this one read only so that's why if we try to uh Change the value of

that so it's going to give us an error so now let me just change that to location or something else and if I just run that it's going to gives us that beautiful error it's going to say like cannot assign to the location because it is a readon property so you just have to keep that also in mind so now let's talk about intersection types or intersection types in time script but I'm not here to tell you about the English intersection Anyway so what in the word is intersection types and why you should care about

that so an intersection type is a way to combine multiple types into a single type that includes all the properties and method of each constitute type and intersection type is denoted by just the ENT sign right here just the ENT sign so how we are going to be using that this is how we are going to be using there first of all we are going to be creating two types right here so we Have a a person type inside this person type we have a name of string the edge of number we also have the

employee type uh and inside that we are providing a number and ALS I mean like the ID and also the title and then if you want to combine or intersect this person and also so this employee together so for that we can just create some sort of other type and we can use person and a person right here I want you to keep that in mind this ENT and then another Type right here and then you can use this combined type right in here baby so let's suppose if you are creating some sort of a

u person object so here you can see we have Alis and we are providing this combined or intersected type right here so we are now providing the name of Alice the edge of 30 the ID of 1 2 three and the title of manager right here so now let me just give you a quick example of that and then you'll get to know what I'm talking about I'm Going to delete all of that code right here and I'm going to just create two type first of all to intersect them with each other or to combine

them with each other combine is a better word so now let me just create a user info and it's going to be equals to uh this type and let's just provide the first oh my god let's just provide the first and the first is going to be equals to string and also provide a loss and the loss is going to be also set to string and I'm Going to create an edge and the edge will be set number right here now let me just also create the account details it's going to be equals to this

object it's going to take the email it's going to also tag some sort of a password as well now let me just go back so here you can see we have two types right here but if you want to combine both of these types into one type so for that first of all let's just create a variable or not a variable let's just create a separate Type I'm going to give a name of like user and it's going to be equals to the user info and I want you to just keep this in in your

mind I want you to keep this nend in your mind so this n will combine both of these types right here so I'm going to just WR a user info and also the Account Details right here and now we can totally use that so these are our types and now we combine them into only this user type which means like whenever we use this user we have to Specify the first name last name Edge and we also have to specify the email and also the password itself okay so now let me just create some sort

of a user like myself and it's going to be equals to uh that user which we are combining and inside that oh my God not like we have to anot there like so and inside there what it requires now let me just hold my mouse over to it so the type object is not assignable to a type user what the hell are you talking about um Yeah type um type object is missing the okay there we go so type object is missing a few properties and user info first name last name and Edge and blah

blah blah okay so now let's just do that right here so I'm going to just write a first name and the first name will be set to husan I'm going to also provide a loss yeah loss will be fine and it's going to be set to web dev right here and I'm going to also provide um this password right here so the password I'm Going to provide like password one two or something like that let me just provide my own email address which will be @gmail.com right here okay and AG is 25 there we go

uh let's just change that to 20 now let me just save that and let's just use that right here whether everything is working or not and by the way here you can see that eror is also totally gone let's suppose if I just remove one of these properties here you Can see that error came back right here okay so if I just F my password once again and there we go everything is working a okay so now let me just L to the console like I don't know my name um I'm going to just write

hen our first name and also Zen last name as well and Edge come on edge is going to be equals to hen. Ed and I'm going to also put the email for the email address I'm going to write hen. email address and also the password itself okay so now Let's just render hen. password yeah totally authenticated project right here okay so now let me just run that here you can see we now getting the name H webd age is now set to 20 we are also getting the email of hen gmail.com and the password is

password one2 right here okay so that is known as the intersection type in typescript right here which will combine more than one types at once yep that's it for the intersection types in typescript so time To talk about Union types in typescript yeah that's kind of a poetry like time to talk about Union types in typescript anyways so unions are used to declare a type that can have one or several possible types so Union are useful when you want to allow a variable or a perimeter to accept multiple types so the syntax is we just

have to use the pipe symbol you just have to hold a shift key and hit um which is underneath or you know not underneath but which is Above the inner button there we go so how we are going to be using that this is how we are going to be using that for example we want to create a variable which can either be number or a string so we are going to have to just write this pipe symbol right here okay so there we go and we can also use it for a function parameter we're

going to be using it like this so we're going to be just writing some sort of perimeter and the perimeter either should be string or Also the string of array like if you're working with some sort of asynchronous function so yeah that's that and we can also use it for the interfaces but we did not discuss what interfaces are and so I'm not going to discuss the union type inside interface so now let me just write some code and then you'll get to know what I'm talking about so I'm going to just remove all of

that code right here and I'm going to just create some sort of a password um come on p a s w Rd And password variable should either be string or uh Union type number right here and by default I'm going to specify the value of 20 right here it is totally working but if I just try to provide something else like string okay so it is totally working as well but let's suppose if I just write a true it's going to gives us an error why is that because we only write a union type for

either a string or a number so that's why it is now giving us this uh error Right here so now let me just set the to 20 and there we go and we can also write a unit type for types as well so now let me just create a user info type it's going to take the first and I'm going to provide a string right here it's going to also take oh my God last and last will be also set to string I'm going to also put the edge of yeah edge of number now let

me just create one for the account details once again so Account Details and it's going to be equals to This type right here so we're going to be providing the email and the email will be set to string and also the password will be set to string as well here we want to use the that Union type so I'm going to just create a user object and I'm going to just annotate this so you either have to use the user info which requires the first name and also the last name and also the edge itself

or we can use the union type right here or use the Account Details Right here so it's going to be equals to Let's suppose let's try it with uh the first name and last name like for the user info so let's try it for the user info so we have first name of John the last name of to an edge of 20 right here everything is totally working because here we are providing or we are specifying all of the properties right here all of the properties which this user info currently have right here okay so

we are not providing all of that Property but if I just remove that and now let's work with this account details so I'm going to just specify like a email and the email will be like uh some uh come on someone gmail.com or something like that and now I'm going to also provide the password as well a password will be like password or something like that so here you can see it's not going to giv us any error but if I just remove this password and here you can see we are now getting this Error

like something is missing like password is missing you have to provide that password and there we go okay so we can use it for um come on we can use it for objects we can use it for types we can also use it for a single variable and later we are going to be also learning about uh something called the interfaces so we are going to be using it inside interfaces as well so now let me just use the inside array so we can just write items and here we have to Write first of all

our parenthesis because first of all we have to specify the type okay so I'm going to just write a number or uh it should be using the string of array so either the number of array or the strings of array right here so you can either use the number array and you can also use both of them as well you can even also use like both the user info and also the account detail as well like both of them at once I forgot to show you that but you can try that by Yourself so in

this case let's just provide a values for them so I'm going to just first of all specify values for a number so I'm going to just say like one and five or four or something like that and I'm going to also specify some sort of a string right here like hello or something like that I can also Pro but I can provide the Boolean if I just write it true it's going to giv us a cool little error and you already know which kind of error it will gives us it Will gives us like type

of Boolean is not assignable to the type of string or number okay so it's going to give their error now let me just remove them and we can log the items to the console baby let's just go back and run them and here you can see it's going to give us the array with uh come on with a number and also with a string as well so that was it about for the union type in typescript so now let's learn about literal types in typescript so literal Types allow you to specify a value that can

only be one specific literal value okay so this means that the variable with the literal type can only have have one specific value and no others okay so how the syntax will look like this is how the syntax will look like so we can use it for a string we can use it for Boolean and also for numbers as well so here you can see we have some sort of variable right here so we can either provide the value of red blue or green Okay nothing else like like if I just provide a value of

red poorly valid if I provide a yellow which we don't have inside this list it's going to gives us an invalid and it will not work on the other hand let's try it for the numbers so here you can see we are providing a literal values like one two or three like either one or two or three okay so let's suppose if you provide like the number of one to it totally valid you can totally work with that but now we Are specifying four to it which is not available inside this list so it's going

to gives us an invalid which means like it's going to throw some sort of error and the same will goes for the booleans so we are just declaring the what do we call it oh my God we just declaring a variable and we are assigning the value of true to it and but if you provide the value of false to it so it's going to gives us some sort of Errors now let me just give you example of that then You'll get to know what I'm talking about so now let me just remove all of

that code and I'm going to just write let color and the color we are going to be specifying some sort of a uh color like red and I'm going to also PR the color of crimson and I'm going to also PR the color of fuchia okay so now let me just provide these colors and I'm going to just provide a color and the color will be set to uh red in this case totally Accessible totally working like we are not getting any errors nothing right here if I log there to the console like color s

my file go back and run that come on let's just remove that crap and rerun that once again and here you can see we are now getting red right here which is totally working but if I just duplicate that and change that to like yellow and here you can see it's going to gives us an error and the type yellow is not assignable to the type red or Crimson or fuchsia which means like this type which you are providing right here is not inside this list so that's why we are now getting an error right

here if I just run that obviously we are going to be getting a cool little error oh I didn't sell that let's just save that and rerun that once again and here you can see it's going to gives us that same error right here okay so that's totally cool uh but now let me just give you example of a numbers or you know Boolean L is true so the Boolean can either be true or false no other values so now let me just write is true and it's going to be equals to True right here

okay so we can log that to the console and you already know what it will gives us but if I just write like is true is equal to like something else and you already know it's going to gives us an error so that was it for the booleans now let me just give you the example of some sort of a you Already know how that's going to work for the numbers so I'm not going to give you the numbers example but now let me just create some sort of a password and I'm going to provide

the value of like SEC c t password like a secret password secret password and it's going to be equals to uh that secret P I'm going to copy that and now let me just place that right here go back okay so we are now providing this specific value for this specific uh password right here now Inside that what I want to use that if I just log to the console this password let me just go back and run that let me go back and run that and here you can see it's going to gives us

a secret password let's suppose if I want to change the value of that like password is equal to like something else and here you can see we are now getting this error like something else is not assignable to the secret password right here okay so if I just run that it's Going to give us that error right here oh come on I always forgot to save that grap and here you can see it's going to gives us that a full error right here so that was it about uh what do we call it that was

it about for the literal types in typescript now let's learn about a Python programming language topic which is called tobbles do you have to know Python programming language of course not but yeah this is already available inside of python if you wanted to check It out so what is a TPL or topples or whatever you want to call them so Tuple or topples uh is a type that represents an array with a fixed number of elements where each element can have a different type the order of these types in the twole definition corresponds to the

order of the values in the actual array so tubes are similar to arrays but then they have a specific structure and can be used with model finite sequence with known length Okay So that was just a definition of what a tuples or tles is now let's learn about how we are going to be using them this is how we are going to be using them it is similar to arrays but the syntax is a bit different and we already discussed there so we are going to be annotating there right here inside of brackets not outside

from the brackets but inside the bracket we are going to be using either string or number so we can provide some sort of a structur forward data which we Are going to be storing inside this twole like the first value will be set to string so we are now storing the string value and the second one will be set to number so here you can see we now providing the number right here so it's going to giv us their hello and also uh what do we call the number as well and by the way this

is also a zero index B so I want you to keep that in mind as well now let's also learn about a d structuring you don't even have to worry About destructuring but I'm discussing this topic for those who cares if you don't care about that you don't even have to worry about that so how we are going to be restructuring the value of that well we are going to be just using these brackets so we are going to be destructuring the value of hello and we are going to be giving it the name of

first you can give it any name you want and then we're going to be destructuring the value of number and we I mean like This p and we're going to give a name of like second so if you lock to the console first and second so for the first one we are going to be getting a hello for the second one we are going to be getting 42 right here so now let me just write some code then you'll get to know what I'm talking about so what I want to do is that first of

all I'm going to just create a simple tube let my two uh P I guess this is how you spell it and now we are going to be Providing The annotation so we are going to be providing a structure like which kind of data or which kind of structure we are going to be using for our data so we are going to be specifying the number and also the string as well and now let me just specify some sort of value St like my tub and it's going to be equals to First of all we

are requiring the number so in this case we have to specify some sort of a number right here so in this case I'm going to just Specify like 10 and then we have to specify the string value so for the string value I'm going to just say like Hello World there we go and now let me just log there to the console like my Tuple there we go let me just sell there and run there and here you can see it will give us like 10 and also hello word on the other hand let me

just try something else if I cut this 10 from here and if I just place it right here and let's just save there and it's going To give us an error why is that if I H my mouse over to it so type string is not assignable to the type number why is that because we made a structure like this first of all we would require some sort of a number then we would require some sort of a string so in this case we are providing first of all the string and then the number that's

not acceptable that's a big no no in two PS okay so yeah that's the only reason we are going to be using tuples in the First place and you are violating that rules so typescript is not going to be happy with that okay so I'm going to just comment this line out and now let me just create some other or you know um let me just create a tle for a product so I'm going to just write con products and it's going to be equals to it's going to take either number or the string of

one uh array and it's going to be equals to like I don't know item one and I'm going to also provide one two Right here okay now let me just go back back and if I log that products to the console you already know which kind of resor you would get why oh there we go I always forgot this uh annotation right here let's just run that come on and here you can see it's going to give us item one and also 12 right here which is totally cool so I'm going to delete that now

let me just give you one more example for the string string string so now let me just write a games and it's Going to take the structure like string and also string and also yet again string and come the helmon I'm going to provide The annotation sign rather than the equal sign and here I'm going to just write like game one and I'm going to just s like game two and also the game three as well now let me just log these games to the console semi file and run them it's going to give us

game one game two game three but if I just write like for the middle one I want to get a Number right here so if I just save them it's going to gives us an error if I just H my mouse over to them oh my God it's going to say like type string is not assignable to the type number because here we require the number we have to specify some sort of a number right here okay so we can create some sort of a structure like um the game name will be a string the

game ratings will be some sort of a number and the game true rating will be some Sort of Boolean so I'm going to just write bull or Boolean rather and here I'm going to just specify true and now let me just save that and run that here you can see is going to giv us like game one the rating will be set to two and also the real rating will be set to uh true right here so this is how we are going to be creating a tuple and this is how we are going to

be using a tups in typescript now let's learn about enums in typescript So enim is a way to define A set of name constants so enum allow you to define a collection of related values that can be used interchangeably in your code so how that's going to look like this is how it's going to look like like for example let's say you are building a weather app and you want to define a set of possible weather condition like sunny cloudy rainy and snowy you could Define an enom like this you going to be first of

all writing the enom Reserve keyword then you can give Some sort of a name to that and then you have to write the curly braces you don't have to specify some notation or a notation to be precise and you don't even have to use the equal to sign for that and then you can specify your constants like sunny cloudy rainy snowy or whatever so in this example wether condition is the name of the enum and each of the values for example sunny cloudy Etc is assigned to automatic numeric value starting from zero okay so This

one will be zero this one will be one two and three and so on and you can even specify your own values like this okay so you're going to be just writing the equal to sign and you can specify sunny cloudy whatever you want this is how the syntax will look like and now let me just give you some sort of example and then you will get to know what I'm talking about and you know what before getting into the example first of all I want to show you how you're going To be using the

em I forgot to show you that so this is how you're going to be using there like let's suppose some sort of a variable and then you are going to be getting that enim name and then the don't end then you would be able to specify which kind of property you want to access so here you can see the name of our enim is set two weather conditions and then inside that weather condition we have the sunny property right here which is currently set to Sunny and this is how we are going to be getting

there so conso log the current weather is current weather and we are now getting sunny right here as output so this how we are going to be creating an enum and this how we're going to be using an enum inside our project so I'm going to delete this code right here and I'm going to just create my enum and do we have yeah there we go uh we don't want that let's just remove the right here en once again and where w t h e r Conditions there we go and we're not going to be

providing the equal to sign but we are going to be just just providing the curly braces right here I'm going to specify Sun cloudy rainy and now if I just log that to the console or you know first of all let me just uh write like weather condition. sunny sunny let me just go back and see what it will gives us now let me just save that and run it and here you can see it's going to give us a zero because This is a zero index space and we did not specify any values to

it so it's going to gives us by default zero right here so these are our constants or enms whatever you want to call them let's suppose if you want to get the value of like I don't know rainy you already know what it will gives us but I want to run it anyways it's going to gives us two right here because this one is zero this one is one and this one is two so that's why we are now getting two Right here inside a console now the next thing which I want to show you

is that how we are going to be assigning a values to our enm properties so we are going to be just using the equal to sign and sunny we can also use like I don't know cloudy sunic and money and something like that sunny cloudy uh c l o u d y I guess this is how you spell it I'm not quite sure about that but now let me just write rainy and I'm going to just create one more for the Snowy okay snow I don't even know if that's a real word or not but

I'm going to just provide it anyways and run that it's going to gives us rainy right here why is there because currently we are accessing the value of rainy and we are providing it right here so that's why we are now getting rainy but if I just remove that and save my file and run it and it's going to give us sunny sunny cloudy cloudy rainy rainy snowy snowy okay so it's going to gives us all of That properties right here now what I want to do is I want to store there some sort of

variable like con Uh current or weather or something like that so weather condition and currently it is snowy here so I'm going to just specify snowy right here and I'm going to just write cons. log the current weather uh is and let's just render the current weather right here now let me just save that and run that and here you can see the current weather is snowy right here So yep that was enum and you can provide more crazy functionality than that it is nothing but we just use that for like a real word uh

constant right here so yeah you can go crazier than that but that was just our basic weather application in typescript no I'm just kidding so now let's learn about a classes in typescript but a word of caution if you don't know objective oriented programming in JavaScript so you don't have to watch this section I mean like If you don't care about the oop kind of stuff so you can totally skip this section you don't even have to worry about all of the classes and all of that kind of stuff but if you do care about

that and if you already learned that so good on you and welcome to the section if you want to learn about oop I have an entire course on there you can check out my complete JavaScript course and I have an entire section about oh o op and craziness of oop anyway so now let's get Into the classes so I'm assuming that you guys already know what a classes is in javascripts I'm not going to be explaining what a classes is but I'm going to be explaining the classes in the tcri point of view anyway so

classes properties annotation so you can annotate class properties with a type this allow you to define a data type of a property and ensures that it is always consistent so this is how the syntax will look like so here you can see we Have some sort of a field like name and we can also annotate there like for string and we also have like Edge and we can annotate there with a number and we can even also annotate these names as well right here if you wanted to okay so that was the basic annotation example

which I'm going to also show you in a real world example but you know what I want to get into the modifiers but you know first of all let me just write some code then you'll get to know what I'm Talking about so now let me just remove them and I'm going to just create a class right here and I'm going to give a name of like person I'm going to create a name and I'm going to provide a type of string right here this is totally simple and easy we just have to specify the

types in typescript so here you can see I just set that to number we can also provide a field right here so now let me just write like name and we can change the name of that to like string I Mean like the type of that to string and we can also provide an edge and the edge will be set to number as well okay now let me just use the this Reser keyword and this will be now set to name and also this. Edge will be now set to Edge as well now let me

just create a quick simple instance of this class right here let me just go back I'm going to just create a person and new person and inside this person I'm going to give him some sort of a name like uh I don't know John would be fine and he would be like 20 years old or something like that and if you also log there to the console sell file and run there and here you can see it's going to give us a like person the name will be set to John and also the edge will

be set to 20 right here you already know all of that stuff but you just have to specify these types to it right here okay so that's then now the next thing which I want to talk to you about is that you can also make the Properties read only which we already learned but now let me just show you that quickly once again so I'm going to just write like read only and there we go so we can totally access these properties but we cannot change the value of these properties right here so if I

just save them and if I just run it so obviously we are going to be getting the same result right here but if I try to like uh change the value of that to something else you know what I already Show you that I don't want to bother that once again so let's just remove that from here and there we go this is how we going to be working with the classes in typescript now let's talk about something called modifiers in typescript so what are modifiers and why you should care about that so in JavaScript

we do not have the concept of modifiers I mean like we can achieve the same result like uh these keywords which I'm about to show you we can totally use That but for that we have to perform Advance concept like closures and we also have to use encapsulation polymorphism and all of that big words which I already discussed in my uh JavaScript course if you are interested and you want to check it out so feel free to check it out anyway so what are access modifiers or just modifiers whatever you want to call them so

in tcri you can use the access modifiers to control the visibility of class members Properties and methods you already know that access modifier determine the way in which class members can be accessed from within and outside the class so how many exess modifiers do we have we only have three just like a Java programming language if you're already coming from a jav or maybe if you are coming from a C++ background so you already know uh all of these modifiers but anyways um let's talk about it so here you can see we have only these

three modifiers so The first one we have a public the second one we have a private and we have a protected one as well so now let's just discuss each of them one by one so first of all we have a public modifier so public as the name suggest like Members Mark as a public can be accessed from anywhere both inside and outside in the class but if you talk about a private modifier so the private modifier like member Mark as a private can only be accessed within in The class they are defined in not

outside in this case you can access your modified both inside and outside inside a public but on the other hand if you are working with a private so you can only access your property or your method inside the class in which they are defined in but not outside but now let's talk about the protected one Members Mark as protected can be accessed from within the class they are defined in as well as any sub Clauses that extends the Clause so you already know about the extend Reser keyword so uh for if you mark a specific

property or method by using a protected modifier so they can be only accessible inside their specific class in which they are defined in and also uh when you extend a certain class and you want to use the there they can be also accessible there on the other hand if you are working with the private one they can only be accessible within the class but not outside from the class But if you are working with the public class so they can be accessed anywhere you want so yeah that's the love of typescript so how that's going

to look like now let me just show you that I know this is a lot of code and you don't even have to worry about that but here you can see we can mark for property by either providing the public modifier the private or the protected one right here okay so by public it can be accessible anywhere inside your program but if you Mark that as a private it can only be accessible inside this animal uh class right here but if you mark this protected one it can be accessible inside the animal and also if

we extend some uh some animal like dog or something like that it can also be accessible there and I hope that makes sense if it doesn't yeah now let me just write some code and then you'll get to know what I'm talking about first of all let me just create my class once again So I'm going to just create a class I'm going to give a name of like P come the hell man person once again let me just Pro a few properties like first name will be set to string and also we have a

last and it's going to be also set to Strings as well now let me just provide my first and it's going to be equals to string and I'm going to make that as public so if I just write public there we go it is now working and I'm going to also make this one public as well like For the last one as well so now inside there what I want to do is that I'm going to just use this do first and also this do last and now let me just create an instance of them

so I'm going to go back and this how we're going to be creating an instance of them like oh my God uh person yeah personall okay and now let me just log there to the console like P1 dot I don't know do first name right here so now let me just save that and Here you can see it's going to gives us John right here if you try to log the last name if you just write LA s file and run that it's going to gives us the D right here which means like totally accessible

right here and now if I make them uh private right here if I just mark this one as private if I save them and here you can see if I just write first uh come the hel on First and if I save that it's going to already give us this are like property first is private And only be accessible within the class uh person right here in which we are creating it right here okay so let me just create some sort of a method like I don't know get name yep that's cool so I'm going

to just uh create this get name so we are writing a this. first name and also this. last name right here and we are also annotating that right here okay so what I want to do is that instead of writing a get uh I mean like instead of writing a first which is not Accessible outside from this person right here but it is now totally accessible inside this person class so here you can see we can totally have access to that so instead of writing this first I'm going to just copy this get name and

let me just put there right here and execute that so now if I sve this file so what do you think will be the result if I run this code okay let me just remove that and run that once again so we are now getting John down Which means like everything is successfully working and we can only use this first property which we Mark as a private only inside this person object right here let me just highlight that we can only use this property which is marked as a private keyword only inside this person class

not outside from this person class okay so this is how we are now getting there anyway so that was it about for the Public and also for the private as well so now let me just create one more for like protected so protected and I'm going to just specify like Edge or something like that and Edge will be set to totally number now let me just save there so what this protect is going to do for us this protect it means like we we can totally use this property inside this person right here not outside

from this person but if we just extend or if we borrow the functionality from this Person to yet another person and we create instance of that we can totally access that edge there okay so what I want to do is that here I'm going to just write like Edge and I'm going to just set that to um Edge right here or you know this start Edge rather okay so it's going to totally work and it's not going to give us any errors right here but if you try to provide some sort of a number right

here like 20 in this case it is going to gives us this error like Unexpected two arguments but got three oh that's because we have to register the anyways but you get the idea like it will give us that error right here so now you get the idea like we can totally access this. Edge inside this person and we can also access it by creating some sort of a instance right here and now let me just create some sort of a user like class and then I'm going to just create myself right here or you

know what uh human this one should be human This one should be human so I'm going to just select that hit control D and I'm going to just change that to human and this one should be myself or person rather I'm going to just Sate a person and we are going to be extending which means like we are going to be borrowing the functionality from this human right here and we are going to be providing it right here so uh we are going to be getting the functionality from the human and this is how it

looks like and we Just only only need this functionality right here so we have a first name we have a last name and we have every single thing right here and we can also use this Edge right here so let's suppose if I just create some sort of you know let me just delete that from here I'm going to also delete this one from here let me just go back and I'm going to just create an instance of this person right here not a human but a person so I'm going to just write like Con

hosen it's going to be equals to person and we have to specify the first name so I'm going to just write like hen for the first name oh we got to include the new resert keyword uh why are we getting this error uh oh there we go it accept three parameters so we have to specify for the last one like webd and I'm going to also specify one for the edge so which is set to number I am 20 years old and there we go we are now totally able to access This property which is

set to protect it inside this extended class right here so now let me just log that to the console so I'm going to just use like Huzan this file and run there so we are now oh God damn it where in the world we even getting the error H property Edge has no initializer and not definitely assigned in the Constructor yep you're totally right brother let me just assign that right here I'm going to just put a comma and I'm going to just use like Edge and Edge is going to be set to number right

here and let's just duplicate that and I'm going to just set that not number but not it's going to set to uh Edge right here I'm going to also copy this Edge and I forgot to do that so I'm going to just remove this Edge from here and I'm going to just specify it right here for the edge and now let me just run that and here you can see we are now getting the person first name we be now set to hose the last name will be set to Web dev and also the age

will be set to 20 and that's it baby that was it about for the modifiers and also for uh this annotation in classes okay so yeah I guess there is only one left which is called the gets and Setters yeah now let's just discuss the gets and Setters and they will be for the oop section of typescript so what is a Getters and Setters and why you should care about them so Getters and Setters are used to access and modify class properties and Getters and Setters allow you to define a property in a class that

looks like a simple variable but internally has additional Logic for getting and setting the value okay so how that's going to look like so here you can see we have a class and we have this private property which is currently set to zero and then we can just specify this get res keyword to get the specific property and we can also use the set and to set the specific logic inside there okay so we're not Going to do anything crazy so now let me just show you that totally quickly so what I want to do

is that first of all I'm going to just create my class I'm going to give a name of like my class baby you can give any class you want I'm not going to be providing any parameters to it but now let me just make this first property as private and which will be my property would be fine and I'm going to just annotate that as a number because We're going to be providing the initial value of number right here for the Constructor I don't want to write you the Constructor so now let me just remove

that let me just save that but underneath this property we are going to be just creating our get method and I'm going to just say like my uh proper come on my p r o p rty y and now let me just annotate there with a number and I'm going to just return this dot my property which is now initially set to Zero and we are providing it uh and we are providing a type of number to it so this is how we are going to be getting something now let's learn about a Setter okay

so I'm going to just write a set Reser keyword and my property it's going to take a value and the value should be a number and inside that we are just setting this property like this start my property and we are providing that value to it okay so now let me just create an instance of that now let me just save There and go back and create a quick instance of this so I'm going to just use like cons my instance you can give any name you want but the naming doesn't matter some my class

and let's just create instance of there and we already use the gets and sets but I'm going to just log there to the console like current value come on current value uh and here we just have to use like my instance do my property right here okay so we just have to only use that now let Me just save that and let's just run that right here so here you can see we're now getting this data which is currently set to private but we now getting this data by using this function which we just cred

right here okay so now if you want to assign a value to that so how can you go about doing that and that's totally easy as well we we don't have to do nothing but we just have to write like my instance do my property we just have to access this Property which we have right here and also we have to specify some sort of a number like I don't know maybe 10 would be fine and this is how we're going to be assigning a number and now let me just log that to the console

like uh let's just cut that cut that copy this one and put it right here and now let me just save there and run there initially it's going to be set to zero and now we are changing there or we are setting a new value today so that's why we are now Getting this 10 right here and yep that was it about the oop section for the typescript and I hope you enjoy it now let's learn about interfaces in typescript so now let's talk about one of my favorite Topic in typescript which is called interface

so what in the world all interfaces and why you should care about them the interface is a way to define a contract for a shape of an object it specify the properties and their types that an object must have and The keyword is must have interfaces are powerful tools for enforcing a certain structure in your code so how in the world we are going to be creating a interface and how all of that works okay like yeah I know that's a lot of gibberish which I just said like how in the word we're going to

be creating an interface and how all of that works so this is how we are going to be defining an interface so first of all we have to just write interface Reser keyword then We have to give some sort of a name for or interface then we have to specify the properties and their types and there we go we can also Define the methods which we are going to be also discussing in a few seconds and if you want to use the interface you just have to annotate that right here and then you have to

specify all of the properties which currently this interface has okay so we have first name last name and Edge and we are not providing the first name last name and Edge right here so that was our basic interface but that's not it while interfaces are commonly used to define the structure of objects they are not limited to just objects interfaces in timecrimson classes and also for the objects as well so now let's talk about it so if you want to create an interface for a function so this is how you're going to be doing there

okay so here you can see you just have to create an interface like the syntax will be Totally the same but if you want to create some sort of a structure for a function so you just have to create that structure right here like in this case it will take a two parameter like X and also the Y and both of them will be number and the return type will be also number okay so this is how we are going to be doing that here you can see we have a add function and a add

Arrow function right here and we are providing our interface call right here like math Operation we are now providing this X and also the Y so we have to specify there right here and it's going to take the A and also the B and we are just adding there right here and we can also use for the subtract and we can log the values like uh for the add we are going to be using it like this and also for subtract we can also provide different kind of values right here I know that sounds confusing

like oh my God you are just showing us the slide show some code Yeah I am going to show you a code in a few seconds but first of all let me just explain all of that stuff in the slides then we're going to be jumping into the code okay so this is how we are going to be using interfaces for a class so here you can see we have a interface and as I said that we can also provide a method for that so we have a vehicle interface right here and as a methods

we have a start and it's going to take wide because we're not even returning Something from there and we also have a stop so we are going to be also annotating that as a wide because we're also not returning something from there and here you can see we are going to be using the implements okay not extends but implements right here so it's going to implement the vehicle interface right here and then we can Define I mean then we should Define the start and also the stop because we have to specify these properties which are

currently available For this interface so we have a start and we also have a stop and we can use it like that so this is how we're going to be using interfaces and we have yet another topic which is called declaration and merging I'm going to discuss that in a few seconds but first of all now let's just create interface the basic interface how this work and we are going to be also creating it for a function and also for the class as well and then we are going to be jumping into The Declaration and

merging so I'm going to select everything and I'm going to delete that and let's just Define our first interface right here so I'm going to just create interface and interface is a resert keyword which means like it have some sort of a special meaning inside a typescript and I'm going to just create a simple interface for computer the computer is going to have some sort of a name and it's going to also have some sort of a ram and the ram Will be set to number I'm going to also provide the hard disk drive and

it's going to be also set to number as well and now if you want to use this interface which we just created right here so how can we go about doing that first of all we are going to be using that with an object then we're going to be jumping into the functions and all of that kind of stuff so now let me just create like computer exam Comm ex M and here we just have to specify that Interface name right here there we go we just have to write the interface name which we are

declaring it right here and we just have to specify right here and we also have to put the equal to sign now it will instantly gives us an error and it's going to say like yeah you have to provide the name you also have to provide the RAM and also the hard dis drive as well so we can proide a name and the name will be like I don't know i7 or something like that and I'm going To also provide the RAM and the ram will be 8 gabt and the hard dis Drive will be

I don't know 100 GB or something like that now let me just go back and now let me just log all of these values right here so I'm going to just use like computer uh come on comp oh the name is ah computer exam examle there we go now let me just copy that and put that right here and I'm going to just access the name so now let me just access the name and run that so It's going to gives us the i7th right here I'm going to duplicate that a multiple times so I'm

going to just change that to Ram I'm going to also change this one to hardest Drive okay not three D but two D so now let me just save there and here you can see it's going to gives us the i7 and and also 100 and everything is totally working and this is how we are going to be defining the interface this is how we are going to be using the interface Right here so that was the first example now let me just give you one more example of interface because interfaces are supremely important right

here so now let me just give you the example of movie okay so I'm going to just provide some sort of a name for the movie you can give a title if you want and I'm going to annotate that with a string I'm going to also provide some for array come on r a t n gs and ratings will be also set to number and I'm going to also Specify the genre and genre will be also set to string but what I want to show you is a few things we can also make a certain

property read only like let's suppose if we want to just um change the not rating but let's suppose if you want to just make the name totally read only and by now you already know what read only means so you can just specify this read only Reser keyword and it's going to make this property totally read only right here and we can also use this Question mark which we already discussed the optional property or optional chaining property whatever you want to call that so it's going to make this property totally optional like if you want

to provide this genre property you totally can if you don't want to provide it you don't have to okay so now let me just create some sort of like I don't know movie one and it's going to be equals to this movie interface which we already created and inside they we're Going to be just specifying like the name of Star Wars the ratings will be .9 and genre will be set to action right here okay so yeah now I'm going to go back and I'm going to just L to the console like uh I don't

know movie one and now let me just save that and here it's going to give us all of their properties which currently this movie have but let's suppose if I want to access like the name if I just write a name semi file it's going to obviously Give us the name it's going to gives a Star Wars now let me just remove that but if I try to uh rechange the value of that to like uh some other movie or something like that so what are we getting we are now getting the error cannot assign

to the name because it is a read only property you cannot change that because we Mark that as a read only so you cannot change the value of that okay so you also have to keep that in mind let's suppose if you don't want to Proide this genre I'm going to cut that from here and nothing is happening right here like everything is a okay but let's suppose if I just remove this question mark from there and we are now getting this School error right here okay so yeah that was the basics of interfaces now

let's create interfaces for the functions I'm going to create an interface right here give a name of like math or operation or something like that and inside that we're going to be just Creating this signature right here so X is going to be a number and also the Y is going to be a number and we are going to be also providing a return type of number as well and there we go now let me just use the right here so let's suppose we have a add function and we want to provide that math operations

right here and also we are going to be providing the A and also the Y and we're going to be just using like a plus b oh not A+ y but a plus b rather I forgot to Provide this B right here okay what the hell am I doing and now let me just log there to the console like R 2 comma 2 or something like that now let me just save there and run my file so it's going to gives us full right here why is that because everything is successfully working that's why if

I have my mouse over to it so here you can see it's going to give us like math operation and the x value is set to number and also the Y value is set to number and the Return value is also set to number so everything is okay so let's suppose if you want to create one for the subtract so I'm going to just write like subtract baby and instead of writing this plus symbol I'm going to just change that to minus symbol let me just duplicate that and I'm going to just remove 10 from

20 or something like that let me just save that so it's going to gives us 10 ah we are adding there we are adding there oh that's because we are still Using add we have to copy the subtract and put it right here save my file and run that so here you can see it's going to give us minus 4 which is not correct oh we are doing the other way around anyways so it doesn't even matter but this is how we are going to be creating an interface and this is how we are going

to be using that inside a function so now let's learn about interfaces with methods so we can also specify the methods inside the interface we can just Create a person interface right here I'm going to provide a first name and the first name will be set to string the last name will be also set to string and I'm going to also specify the edge will be set to number and say hello this person will be also able to say hello right here and we're not going to be returning anything so that's why we have to

set there to Wi so now let me just create a function I'm going to give a name of like greed and also for the Perimeter it's going to take a person and for a time it's going to take that uh that interface which we already created right here so this one should be lower case and there we go and now inside this function body we're not going to be doing anything crazy but we are going to be just loging to the console like hello and uh person. first name and also the person. last name as

well now let me just go back and I'm going to just use like person. say hello Right here and execute that so now if i s that what I want to do is that I wanted to create that first name last name I want to create a separate object right here it is already giving us right so I'm going to just provide all of these properties like first name of John the last name of Dow The Edge will be 30 and say Hello uh let's just remove that right here sell my file and say hello

and inside that we are just providing like uh I don't know hi there or you Know I'm going to just write like hi there right here instead of hello so this is how we are going to be creating uh or this is how we are going to be providing interface for the object as well we can also provide that method body right here and here you can see we have this John and that's that now let me just duplicate that right here I'm going to just duplicate that I'm going to just create one more person

so I'm going to just change the name up there To like husan and I'm going to also change this not this one come on I'm going to change this name to husan and also let's just change this name to webd and the age will be 20 and I'm going to just say like what's good or you know what uh was good would be fine okay now let me just use that grid method right here which we already created right here I'm going to just create that greed method and I'm going to specify the John and

also hosan right here so now let me Just save that and now let's just run that right here we are getting all of their results but that's not looking that much cool so I'm going to just run it once again and we are getting like hello John do hi there hello hose web what's good okay so this is how we are going to be defining our interface this is how we are going to be using that interface inside this function this is how we we going to be creating an object based on this same interface

right here We have two objects and this how we're going to be providing a value for this same interface right here now let me just give you one more example because I want to give you a lot of example uh for these interfaces because I know a lot of instructors say like oh my God interfaces are supremely awful and I cannot give a lot of example oh God damn it my throat kind of hurts I got to stop doing that now let me just write my interface once again And I'm going to just create an

interface of song and I'm going to just write a song name you can also provide a title whatever and I'm going to also provide a singer name and singer name will be string and also for the print song in come on print song info uh what we are going to be doing is that we are going to be providing the song name and the song name will be set to string and I'm going to also specify the single name and the single name will be also Set to string and we're going to be also providing

it for the return as well now let me just go back and I'm going to just create a song one right here and it's going to be equals to the song interface and now inside this object we're going to be using like song name and it's going to be equals to like natural okay and the singer name will be equals to uh imagine and also print song info and we are going to be providing the song name first of all and we're Going to be also providing the singer name and inside there what do we

want to do we are going to be just returning like uh I don't know song and first of all we have to render the singer name so not a singer but a song name right here and then we also have to render the singer also as well so I'm going to just use like singer name singer if you already have that let me just copy the singer name and put it right here but why on Earth we are getting this error oh I forgot to include these annotations right here there we go now that's looking

better I'm going to save this file and I'm going to just use that right here so I'm going to use like song one. print song print song info and I'm going to just provide natural we already provide the but yeah I'm going to just do it right here once again and I'm going to provide like imagine uh dragon right here so now let Me just save that and execute that once again so here you can see we're now getting the song name which will be set to natural and we also have a singer Imagine Dragon

right here everything is okay and that was just it about for interfaces using with function and also with methods as well now let's learn about how we are going to be extending the interfaces or borrowing the functionality from the parent interface to the children interface so how can I Go about doing that I'm going to create an interface right here and I'm going to give a name of like movie details the first property I'm going to set that to read only and I'm going to just set that to name and string I'm going to also

provide ratings to it so the ratings will be set to number number and also for the print movie info right here what you want to do we just want to provide a name it's going to take a string we also have to provide a price as well and the Price will be set to number and we also want to provide a ratings uh and the ratings will be also set to number as well now let's just provide for the return so we are going to be either using a string or number right here now outside

from there what do you want to do we just want to uh extend both of the interfaces so I'm going to just write interface I'm I'm going to give a name of like movie genre and I'm going to extend EXT NDS extends this movie uh Detail right here so what I'm doing is that I'm creating a new interface and I am borrowing all of the functionality which we currently have inside this interface to this movie genre right here okay so this is what I'm doing right now and I'm going to just write like genre and

set that to string okay and what I want to do is then I'm going to just create a movie right here like con movie one and it's going to be equals to some sort of a movie like movie genre so now We are using this movie genre so which means like we are also extending the functionality from this movie D so we have to first of all satisfy this one then we have to satisfy this movie genra or this specific genre right here so now let me just write a code then you'll get to know

what I'm talking about so I'm going to just use like name and I'm going to just fill it with this one right here so the first one requires a name I already provide that name and it Requires the ratings I already PR the ratings then we are using this movie uh genre right here you can put that at the end you can put it anywhere you want but I just put it right here so we have a genre as well and then we have the Sprint movie info so we satisfy both of these interfaces right

here in this case what we are doing is that we are borrowing all of the functionality of this interface and we are putting it right here in this interface right here Okay then we are providing that movie genre interface right here so which means like we have to now satisfy both of these interfaces like this interface and also this interface as well so there we go we already provided values for them so now let me just create a response like cons response and we're going to be providing a movie one. print movie in for right

here and I'm going to just specify like John Vick and I'm going to also provide uh I don't know The price of 100 and the ratings of ADD and there we go now I can log there to the console successfully now let me just run that and here you can see we have a movie name of John Wick the price is 100 and also we have a ratings of a right here amazing so yeah this is how we are going to be extending interface from another interface now finally let's learn about interfaces with classes baby

so what I want to do is I'm going to just create an interface give a name of Like vehicle and inside this interface we would have like uh two method like I don't know start and it's going to be also a wi because we're not going to be uh getting some sort of a return statement so it's going to be wide and we also have a stop one as well I'm going to execute this one as well and it's going to be wide as well now let me just create a class I'm going to give

a name of like car and we are going to be using the implements right here IM l m NTS if I can spell that today and vehicle okay so we are going to be providing this vehicle right here so now we are using this vehicle interface inside this car or we are implementing that so we have to just use this Implement resert keyword right here okay so I'm going to just satisfy this interface which we already using so I'm going to use like start method and I'm going to just write like car is starting and

now I'm going to just duplicate that Part a comma change that to stop and by the way we don't have to specify the Comm I don't even know why I did that and car is stopping uh or stopped uh s o p let's just remove that I'm going to go back and this is how we are going to be using there this is how we are going to be defining our interface and this is how we are going to be using that and this is how we are going to be satisfying all of the properties

or methods in this case of this vehicle Interface right here okay so now how the what we are going to be using this so I'm going to just use like C my car and it's going to be equals to new car because this is a class and we can now use like my car. start we can start the car now let me just start the car and saell them and car is starting right here if I want to stop them I'm going to just duplicate head there and change that to stop sem my file and

run there so we have car is starting and we also Have car is stop right here okay so this is how we are going to be using the interfaces with classes baby so now there is only one topic left which is called declaration merging so now let's talk about the Declaration merging so once the interface is declared it cannot be directly modified however typescript allows what is informally referred to as declaration merging or interface extensions which is often misconstructed as reopening some people like call it Reopening so all of these three names work if you

want to call it whatever you want to call it so what is a declaration merging declaration merging in typescript refers to ability to extend or argument an existing declaration including interfaces as well and this can be useful when you want to add a new Properties or methods to existing interface without modifying the original declaration okay so how in the word we are going to be doing there the syntaxes To simple like once we Define some sort of interface we provide a property we provide our method and we want to later provide something else so we

can totally do that or if you want to change the existing ones so we are going to be using this exact same syntax like this exact name this exact syntax and in this case we are going to be providing this new uh properties right here like model will be set to string and also we have a stop method right here in this case we Have a brand of string and we also have a start method but now in in this case we are using a declaration merging or you can also say the interface extension or

some people also call it God forbid reopening an interface so yeah this is how we are going to be using that so you just have to specify your interface name and then you just have to satisfy there but this is how we are going to be doing a declaration merging so what I want to do is I'm going to delete all of the Code and now let's talk about a declaration merging so I'm going to just write like original interface right here so first of all we are going to be creating original interface so interface

and I'm going to just give a name of like car and inside this car we would have a brand and it's going to be set to string and I'm going to also provide a start method right here so a start method would be set to wide right here so later in some cases if I want to Change specific property or if I want to provide a new ones to it so then what we are going to be doing we are going to be doing a declaration merging or you can also say like interface extend or

whatever you want to call that now let me just delete that stuff from here and I'm going to just write model and model will be set to string and I'm going to also specify the Stop and this is going to be the method and I'm going to just set that to Wi now let me just Create my card so I'm going to just create like C my carard and this going to be uh the car interface and we are going to be just satisfying all of that methods and this is how we're going to be

satisfying all of that methods so we have a brand of BMW we have a start method we also have a stop method but did we forgot something else brand oh we also forgot this uh the model I don't even know what a model is but I'm going to just write a model of Yep this one M3 thank you so much AI so now let me just save that and this is how we are going to be satisfying them so now let me just go ahead and use that right here so I'm going to just loog

to the console like my car do I don't know start method I'm going to just save that and run that so it's going to gives us start and undefined uh oh that's because we are already console logging there that's why we get this undefined so now let me just Remove then and save that it's going to only give a start right here we can even stop work car let's just stop work car baby stop run that and it's going to stop our car it's going to first of all start it and then it's going to

also stop it right here and you can have access to the brand and also the moral as well and that was it about the Deep dive into the interfaces in typescript so now let's talk about one of the best feature in typescript which is called Generics so what in the world are generics and why you should care about them so in tcri generics allow you to create reusable component that work with a variety of types like generics makes it possible for you to Define function classes and interfaces that can work with different data types without

having to duplicate or code and here the keyword is different data types now you might be thinking like husan isn't that any type like if we use the any type we Can provide any data type no generics are totally different than that so we can also create a generic function and we can also create a generic classes which we are going to be also learning in this section now let me just give you some sort of a code without using a generic function and then we are going to be refactoring that code to use a

generic function so here you can see we have like three Arrow functions right here the first one will only take a String value like here we have to specify string value right here because here we are now annotating our parameter as a string so here you can see we have to specify a string right here if we specify like I don't know some sort of a number or I don't know if some sort of like a Boolean value so it's going to throw us an error and here you can see for the next function we

have to specify the number if you specify something else like string or Boolean or something like That it's going to throw us an error why is that because here we are requiring the number right here like we are inating our perimeter as a number so here we have to specify number right here now the the final one we'll also do the same like for Boolean we have to specify a Boolean right here if we specify some sort of a number or string it's going to throw us an error so now the one way to solve

this problem is to use one of the orful typescript feature Which is called uh any so we have to remove this string we also have to remove this number and also the Boolean so here we have to just replace them with any type and that's going to do it for us but that's not a best practice we have to figure out some way so that we create some sort of a function and we provide some specific type for that function and then we have to specify some sort of value based on that specific type okay

so for them we are Going to be using generics and how we are going to be creating a generics this is how we are going to be creating a generics like totally easy but the thing is here you can see for this function let me just say that here you can see for this function we are specifically providing or we are specifically annotating that to the string to the number and also to the Boolean as well and what are these thing called These are called a function perimeter area Right here like all of these things

are called a function perimeter right here now on the other hand let me just show you this this is a typ perimeter right here like anytime we want to create some sort of a generic function here this area we can also specify type right here or we can also just abbreviate that to T in this case I just abbreviate that to T but you can also write a type if you wanted to so this area here you can see that I just highlight that this area is Known as a type perimeter like which kind of

type we are going to be specifying right here for the specific function this area which you can see right here is a function perimeter area right here also I want you to notice like also this area is a tie perimeter area right like for this area we have to specify some sort of a value like we can either provide a string we can provide a number we can also provide a Boolean word here and it's going to gives us Based on there like here you can see the first one is going to gives us a

hello because we are now annotating there or we are specifying the value for this perimeter area right here the string type so here you can see we have to specify the string value right here and it's going to gives us the result of string then for the number we are providing a number and we are also getting the number right here then finally for the Boolean we are providing A Boolean and finally we are getting the Boolean value right here okay so yeah that was a lot of talking so now let me just give you

some sort of example and then you'll get to know what I'm talking about so the first thing which I want to do is that I'm going to create a lot of function and they are not going to be a generic function so I'm going to just create a regular like typescript or JavaScript function right here the first one will be for the print number right Here and it's going to take the perimeter of like item or something like that and I'm going to otate there with a number and I'm going to also specify default value

here like come on default and here I'm going to just specify the number right here and I also forgot to include the return type as well so it's going to take a number and also the number as well so now let just go back and here inside this function what do you have to do we are going to be just Returning the item and also the default value right here okay so instead of writing a default I'm going to just change that to like uh default value or something like that and here you can see

that error is gone so now if I want to run this code so what do I have to do for that well I'm going to just write like I don't know con number is going to be equals to this Sprint number number right here and I can specify any number I want and now let me just loog to the Console this number right here what is is going on print number expect two parameter right here so I'm going to just specify like 12 and 20 right here now let me just save that and run my

file so here you can see it's going of gives us array of 12 and also 20 right here which is a okay so let's suppose if I specify something else like string now let me just write like something and I'm going to also specify the Boolean right here like true and now if I sell that And if I run that it's going to give us this air like argument of type string is not assignable to a perimeter of type number right here you got to do something about that so now let me just remove that

from here now let me just provide one and I'm going to also specify two right here so which means like we can only specify the number values right here we cannot specify the string we cannot specify the Boolean or anything like that so the next thing Which I want to do is I'm going to just create one for like I don't know for a string like I don't know print string or something like that and I guess that would be it so now let me just duplicate them and change this one to stir for a

string and also print string right here and in this case we are not able to provide let me just write a St right here and by the way I forgot to also change this to string right here so now let me just change that to String and here you can see it is now giving us an error if I have my mouse over to it so it is also giving us that same error like argument of type number is not assignable to a perimeter of type string so yeah we have to specify some sort of

a string value right here so I'm going to just write like uh I don't know hello and I'm going to also specify word or something something like that and now if I sell my file and run that and let's just remove that from here and let me Just rerun that once again so here you can see it's going to gives us hello and also the word right here so now let me just also write one function for the booleans as well so I'm going to just write like print bull bull or Boolean rather I'm going

to change the timee to Boolean and now I'm going to just duplicate this line of code change this one to BU or something like that and print bull right here or Boolean rather so it's going to give us that like Argument of type string is not assignable to a parameter of type Boolean we have to specify some sort of a Boolean value right here okay so if I just write like true and false and now if I save that and let's just log that bull to the console as let me just save this file and

run there so here you can see we are now getting true and also the false value right here which means like everything is totally working a okay but the problem which we are currently Facing is that uh we have to specify number for this print number right here we have to specify string for the print string function and we have to specify the Boolean for this print Boolean function right here like we cannot provide a number for the Boolean we cannot provide a number for a string and also Boolean for a string we cannot provide

Boolean or number I mean like we cannot provide Boolean or string for this print number function right here we Have to do something about that well the first answer is now let me just remove that and also these other functions as well now let me just remove that I can just specify the any type of right here if I just write any I don't even have to like annotate that with any right here but anyways if I just save that now let me just log to the console this num and I'm going to specify um

yeah a number will be for the first one and for the second one I'm going to just write like Something and it's not going to take three parameters so yeah that's it now let me just save that and run that and here you can see it's going to give us one for a number and also something as a string word here now our problem is totally solved but I want to ask you a question like in this code where in the word is typescript playing their role well nowhere like we are not even using a

typescript for that we are just writing this extra code right here we Are not using typescript anywhere inside this code and typescript is all about types and we have to do something about that okay so to do something about that we are going to be refactoring all of that code which I just wrote right here we are going to be refactoring all of that code to one simple function which is called generic function and trust me the syntax is totally simple and awesome so now let me just create a generic function right here so anytime

you want To create a generic function we are not going to be doing anything special but we are going to be just creating our function just like that let me just highlight there for you we're going to first of all providing the function Reser keyboard then specific name for our function then the perimeter area and also our curly braces right here but now I'm going to just specify some sort of a name right here let me just zoom in a bit I'm going to specify some sort of a Name like unique data type come on

typs I guess that's going to be fine or unique data types function would be fine rather and I'm going to also remove this prems and I'm going to just change that to like uh I don't know item and I'm going to just annotate that with something but you know first of all let me just write a comma and then the default value so I'm not going to even annotate that and I'm not going to provide any annotation for the return Value as well so the first thing that you have to keep in mind anytime you

want to create a generic function is that how many data types this function is going to take as a value so in this case I'm going to just specify one right here just for this specific example we're not going to do anything crazy not right now but we will very soon so I'm going to just write a less than sign come on less than sign and here we have to specify type right here and I'm going To close that this area is a type perimeter area right here and also this area is a function perimeter

area right here so now that we make clear that you can specify any type you want right here this a type perimeter area right here like we have to specify some sort of a type for that so type is declared but its value is never readed okay so we are going to take care of that in a few seconds now the next thing which you have to do is that we have to use this Type somewhere inside our function so where we are going to be using that I'm going to copy that and I'm going

to annotate that for the item now let me just write item and I'm going to just specify this type right here and I'm going to also specify it for the default value as well and I'm going to also specify it for the return value of this function as well or you know what we're going to be returning like two values so I'm Going to just write array of type and also the type right here just like for this function we are returning like uh two values right here so we are now just annotating them like

this okay so this is how we are going to be creating our generic function and I know that's going to look a bit weird but trust me this is not that much weird thing to learn in typescript but yeah let me just say that once again first of all we are going to be creating some sort of a JavaScript or Typescript function we can give it any name we want and then we have to specify some sort of a type right here like this area is known as a perimeter area you have to specify some

sort of a value for this perimeter right here and then we are reusing that perimeter right here and also here as well and also for this return type as well so currently we are not even specifying or we are not even returning something from our function so that's why we are now getting this error Right here but now what I want to do is that I'm going to just return that item and also the default value as well okay so now let me just return that the next thing which I want to do is that

you know let me just save this file and it's going to format my code like that but now we have to use this um unique function right or unique data type function somewhere I'm going to copy the name of that so now let me just ask you a question I'm going to just place it Right here so now let me just ask you a question like what in the world we are going to be doing right now well the first thing which you have to do is that we have to specify some sort of a

value for this type right here so how we are going to be doing there this is how we are going to be doing there I'm going to just write a less than sign and here we have to specify like which kind of type we are going to be providing for this specific type perimeter right here like This is going to be the perimeter area and here we have to specify some sort of an argument for this specific type right here so in this case uh you know what I'm going to just specify like number right

here so I'm going to just write number and I'm going to have to close that the next thing which you have to do like this area is totally done now the next thing which you have to do is that we have to take care of the function perimeter right here or function takes Two parameter like the first perimeter it takes is the item and the second one it takes is a default value right here so now we have to specify some sort of a value for the item and also for the default value right here

so I'm going to just write my all like parentheses like that you know let me just remove that for a second so now let me just specify some sort of value for the item and also for this default value right here okay so I'm going to just specify like 10 for The item and also 20 for the default value right here so that is totally satisfied so now here I'm going to just write this code once again it did not confuse you so this is how we are going to be registering or creating our first

generic function and this is how we are going to be using that so we can also wrap that with a console log but you know what let me just throw in some sort of variable like cons and it's going to be equals to this uh generic function Call and now let me just log this res right here to the console okay so if I save this file and now let me just run that so it's going to gives us like 10 and also the 20 right here which is totally amazing you you can like re-watch

this video if you wanted to but you don't have to like I explain every single thing about generics right here so now the question is here we can specify the number right here can we also specify the string as well yep you Totally can now let me just duplicate that and here instead of writing a number I'm going to just specify string right here but here we also have to specify the string value so I'm going to just write like I don't know hello and I'm going to also write word right here and let's just

change that to like stir or something like that this one will be just num and I'm going to duplicate that change this one to num and this one to stir for a string now let me just save My file and now if I run that what do you think will be the result you already know the result but hey here you can see we are now getting hello and we are also getting the word right here so I want you to think about generic functions is like a component a component which you can use throughout

your project here you can see we're using it for a number we can also use that for a string and you can also use it for Boolean as well so now let me just write Boolean and here We have to just um change that to Bull or something like that I'm going to duplicate this kind of code and let me just write a bull and instead of writing hello let me just remove that hello from here and true um I don't know true once again or you know let me just write a false right here

now let me just save that and if I run my code you already know what it will gives us it's going to gives us true and false right here for the values so if this is the first time You're watching a generic function so it may look a little bit intimidating but trust me it's not here we have to specify some sort of a perimeter for um come on for a type and here we have to specify our own perimeter for a specific function if you want it to you totally can but if you don't

want it to you don't have to okay so now let me just remove this type I'm going to just hold control and hit D hit d d d instead of writing this type we can also change That to T right here okay now let me just save them and this is how we usually write or generic function right here and now I'm going to give you a lot of example by using generic functions so you're are going to have a lot of experience right now so you know what before we move on to next topics

uh I want to explain one more thing now let me just remove there also remove this one as well let me just create some sort of interface so now let me just write Like interface I'm going to give a name of like dog and inside this dog we're going to have some sort of a name which will be string and also the breed itself and the breed will be also string right here so you know in instead of providing a number or a string or a Boolean we can also specify our own type or our

own interface right here to a generic function so how we are going to be doing that so this is how we going to be doing there so I'm going to just write cons Dog one or something like that and it's going to be equals to that specific function so the first thing you have to do is that we have to specify some sort of value for this perimeter right here so we are going to be specifying the type of dog so now let me just specify that and we can also specify our own values for

this item and and also for the default value as well so what I want to do is that I'm going to just specify some sort of value for the name uh I Totally can yeah you know what let me just provide like some sort of a name right here and the name will be I don't know buddy or something like that I'm not that much good with dog so now let me just write breed and the breed will be this breed right here I can't even pronounce this name let me also put a comma and

I'm going to also specify the name once again and the name will be set to default and also let me just provide some sort of a breed and the breed will Be like unknown or something like that now let me just save there the next thing which I want to use I'm going to just log there to a console like dog one let's just save there and run there so it's going to give us like a name of this name which you can see right here like the name of biry the breed of this breed

and also we have another one like name will be set to default and breed will be set to unknown okay so that's the now let me just clear this out and That's the so now the next thing which I want to do is that I'm going to remove every single thing from here and now let me just give you one more example which will be a generic functions to get a random key value pairs from an object so how we are going to be doing that well first of all we have to create our generic

function so let me just write get random uh key value pair or something like that and I'm going to specify the type of uh you know first of All let me just write my generic signature right here so it's going to take one t like type parameter right here and I'm going to specify some sort of object and I'm going to inate that as a key let me just put a key and it's going to take that key as a string and also outside from this object we are going to be also providing our own

type right here which we specified right here inside this perimeter area Okay so that's that or you know what not outside From that now let me just cut that and put it right here and now let me just specify for the return value so I'm going to just write like uh I don't know the object of key which will be string and I'm going to also specify the value which will be set to type or yeah the type which we are going to be specifying in a few seconds so that's then now let me just

sa there and if I have my mouse over to it so a function whose decare types is neither undefined white nor any Must return some values come on time script give me a break now let me just write the code then you'll get to know what I'm talking about so you know let me just write some sort of a return statement so it stop giving me that error right here so now let me just write or logic so I'm going to just write like cons keys and it's going to be equals to this object. keys

right here and here we have to specify our object which we are getting as a Perimeter and all so let me just get a random keys or Rand key or something like that it's going to be equals to that keys and here we have to use our met. floor and let me just provide a math. random so we want to get a random number from there from where from the keys do come on keys do oh my God not that not L there we go so that's then now underneath this random Keys what do you

want to do we just have to return something so what do you want to return We just want to return the key of random key and I'm going to also return the value and the value I'm going to just return the object and here we have to specify that random key right here now let me just save that but I don't know why we getting this error right here oh instead of writing this array we have to change that to object so now let me just change that to object and also remove that so yeah

now let me just use it right here so the first thing which I Want to do is I'm going to just create some sort of object then from that object we're going to be getting some sort of a random um keys right here so now let me just do that so the first thing which I want to do is I'm going to just create some sort of a string object so con ring obj or object rather and it's going to be equals to this object and I'm going to just provide the property of a and

it's going to be equals to Apple and I'm going to also Specify the B of banana and also one for the cherry or I don't know whatever you want to call that so yeah that's then now let me just log to the console or you know why we are not even using our function so now let me just use my generic functions to get random values from this object right here so I'm going to just write like get random values my function name and the first thing you have to do is that we have to

satisfy the type okay so the type I'm going to Provide like uh string right here because currently we are working with a string and then we have to specify the value which this object is taking right so I already created this object right here so I'm going to copy that and put it right here so now let me just log there to the console so cons and log there to the console like res save my file and run that so it's going to gives us like key of A and value of apples so now let

me just rerun that once again And it's going to give us the qy ofc and the value be cherry or cherry whatever you want to call that and here you can see we have the key of B and the value of banana right here so it's going to give us a random keys from this object right here so this is how we're going to be testing for a string so now let me just duplicate that and put that right here at the end I'm going to change that to number object and it's going to be

equals to like some sort of a number Like I'm going to change this one to one and this one to two and this one to three right here I'm going to also change this a b and c I'm going to just change it to one and two and also this one to three and I'm going to use my function my generic function to be precise so first of all I'm going to use like get random values and in this case we have to specify the number because we are taking the number right here and here

we have to specify for the Parenthesis we have to specify this object so now let me just copy that and place that right here and now I'm going to also log that to the cons like uh instead of writing res I'm going to write like random number here and now let me just just log that random number pen not string let me just copy that put it right here s my file and run that so it's going to give us uh the key I me like it's going to give us yeah the key Of two

and the value of two right here okay so now let me just rerun that once again so it's going to give us the key of three and also the value of three so yeah we test it and it is working totally a okay now the next thing which I want to do is I'm going to just create a generic function that filter array based on a condition so yeah we totally can provide a conditions as well so now let me just remove this coding from here and by the way you can find all of the

Coding in my gab repository and Link will be in the description below so now let me just create a function I'm going to give a name of like filter uh array or something like that and I'm going to also specify the type parameter and in this case I'm going to also have to specify this array right here and the type will be set to type of arrays and I'm going to also specify the condition so condition there we go and the condition will be item and also so That type right here and it's going to

return the Boolean come on Boolean if I can get that let me just go back and for the return value I'm going to specify the type of arrays right here so now let me just write my code so I'm going to just write like return array. filter or JavaScript like or regular JavaScript filter method and I'm going to specify the item in this case and here we have to write our condition and for this condition we have to specify the Perimeter of item right here so now the next thing which we have to do is

that we have to create some sort of array so that we can iterate or through the array and we can perform some sort of a logic on that array so I'm going to just write like con number array and it's going to be equals to like uh I don't know 1 2 3 4 5 6 7 8 9 10 I guess 10 would be fine so what I want to do is I'm going to just get a even numbers from there so I'm going to just use like con even Numbers and it's going to be

equals to my filter array uh generic function right here so the first thing which I want to use I'm going to just specify the number and the next thing which I want to do is then I'm going to just specify the number array right here which is this number array and the next thing which you have to do is that we have to specify the condition function right here so I'm going to provide a comma and now let me just specify the Condition function so I'm going to specify the number and I'm going to also

just use like if num mod 2 is equals to zero triple equals to zero so it's going to gives us the even numbers now let me just log there to the console like even numbers now let me just go back and save my file and this is how it looks like now let me just run my code so it's going to give us like 2 4 6 8 and 10 which are totally correct and these are even numbers in MA mathematics and yeah And also typescript as well okay so what I want to do is

that the next example is using the array of strings so let me just create array of strings so con string array and it's going to be equals to like uh I don't know apple and also banana and also some sort of a cherry or cherry whatever you want to call that and that or whatever so now let me just get a short words from this array so I'm going to use like Shard words and it's going to be equals to like filter array My generic function and I'm going to specify the string value and for

my actual parameter I'm going to specify like string array which we are already creating and now let me just specify the condition uh and for this Condition it's going to take a word and word come on word. length uh is less than six so only gives us them so like short words if i s my file and run that so it's going to only gives us the short array so here you can see we have a apple and we also Have a dead so yeah that's also totally correct and yeah now the next thing which

I want to do is that I'm going to also create an interface right here so now let me just create an interface I'm going to just write like interface and I'm going to also specify the fruit name to it and the name will be set to some sort of a string and I'm going to also specify some sort of a color like string as well now let me just use con uh PR f r UI T PR array and here we have to Enter right there with our fruit interface right here it's going to be

equals to this array and here we can specify a lot of fruits right here like I don't know apple and also the color will be set to red and they shouldn't be array it should be an object rather so now let me just change that to object let me proide my comma and just put a little bit more like I don't know banana banana is yellow yep and I'm going to also specify The Sherry of red as well I'm going to also make this one uppercase R and also this one uppercase r as well so

now let me just use my uh generic function which is filter array let me just use that on this array right here so what I want to do is I'm going to just get a red roots from the array so it's going to be equals to filter array and here we have to specify that fruit and close that and the next thing which you have to do is that we also have to satisfy or uh Perimeter area so now let me just copy there and put our array and I'm going to also specify our condition

so fruit and here what you have to do we have to specify if fruit. color is triple equals to Red so what do you want to do we just wanted to log the red fruits right here so if I sell my file and run that so it's going to gives us um these fruits right here the color will be red so here you can see we have a name of apple and the color is red and we also have a Cherry or cherry and the color is also red so we are now getting there inside

a console so which means like they are totally working okay and we learn about generic functions a lot but that's not it baby we got to do a lot more than that now let me just talk to you about generic function but which takes uh multiple types now let me just create a generic function which reverts the order of two values so I'm going to just create my generic function so I'm going To give a name of like reverse um pair or something like that and in this case we have to specify two types of

uh perimeter right here okay so two types of perimeter you can abbreviate that to T and U or you can abbreviate that to anything you want and now let me just write like value one right here and for the value one we are going to be specifying T and now let me just also write a value of two and for the value two we can specify the U right here so Now let me just return the U and T and we are going to be just reversing the order of there like we're not going to

be doing anything crazy but we just have write like value two and value one right here and there we go so now let me just create some sort of example like reversed uh let's just change that to cons reversed pair and it's going to be equals to the reverse pair right here and inside there we have to specify like hello and also 20 or something like that And now let me just log to the console this reversed I'm going to copy then and place it right here sa my file now let me just run that

so it's going to gives us like uh 20 and hello right here here we are specifying hello and 20 so it's going to give us like 20 and hello I don't know why but it is not G us some sort of an error so now let me just clear out the terminal once again and rerun that so in this case it's going to give us like 20 and hello which is Totally amazing so here you can see this is how we are going to be specifying multiple types of perimeter right here so the final thing

which you have to learn about generics is a generic classes so we are not going to be doing anything crazy but we are going to be just creating a class and I'm going to just give a name of like box and here we have to specify the dynamic or not a dynamic but the perimeter for a type right here so I'm going to specify the Property of private and content right here it's going to also tag their perimeter right here and for the Constructor what do you have to do I'm going to remove this parameter

and I'm going to just set that to initial content right here and initial content will be also set to this type and I'm going to just say like this. content is now equals to this initial content right here underneath that we're going to be defining two methods of get content and Get content is not going to take any parameter so inside there what do you want to do we just want to return like this. content just to get the content right here and we can also set the content so set z t NT and I'm

going to just specify like new content and that new content will tag that perimeter and I'm not going to return anything from that so I'm going to just specify the white to it now let me just go back and here we have to just write like this. Content is now equals to the new content right here now let me just save that and execute there now the next thing which I want to do is that I'm going to just uh create instance off there so I'm going to use like new box and here we have

to specify some sort of a value for the perimeter or type perimeter so I'm going to just use like string and I'm going to just provide a actual value for that function some or not function but class like hello typescript and now let me Just store in some sort of variable like string box or something like that and now let me just uh log to the console like string box uh which we have right here and we are going to be just getting or executing this method right here like get content and now let me

just execute that go back this is the code looks like and now if I run there so it's going to gives us uh wow it's is not giving us an error oh it should not be equals to we have to annotate that come on let me Just save that and rerun that once again so it's going to gives us hello typescript right here but we can do crazier stuff than there so I can also set the content so I'm going to just write like uh I don't know string box do set content and I can

specify any content I want like new content edit or or something like that and you know I'm going to just put this one right here duplicate that and put it also at the end as well so now let me just save that And run there once again so it's going to gives us like uh hello typescript and new content edit right here okay so which is totally okay so now let me just also run this specific class for the numbers as well so I'm going to just remove that from here and let me just zoom

in I'm going to create a number box and it's going to be equals to like new box and for the premier I'm going to specify number and also 20 or something like that and underneath that we're Going to be also using like you know let me just log their value to the console like number box. get content and execute that if I save there and run that so it's going to give us like 20 totally working now let me just use that for setting the value number Box come on if I can just oh my

God number box there we go do set content is now going to take like 100 right here and I'm going to also log that to the conso let me just copy that and place it right here s my File and run that so it's going to gives us like 20 and also the 100 right here so yeah that was it about generics in typescript and I hope you love them okay so yeah next we're going to be learning about type narrowing in typescript so now let's learn about a type narrowing in typescript so type narrowing

is the process of refining a variable's type within a conditional block of code and this allow you to write more precise and type save code so how in the word we are Going to be achieving a type narrowing there are a lot of way to achieve the type narrowing but in this specific section we're going to be just learning about the type guards the instance of and also the insertion types okay so now let's just start from the first one which is a type guards so type guard are mechanism that help typescript understand and narrow

down the types more precisely and one common type gun is the type of operator right here so How the code's going to look like this is how the code's going to look like so you can take a screenshot of that or you can just pause the video and write The Code by yourself but now I'm going to go ahead and write the code and then you'll get to know what I'm talking about so the first thing which I want to do is I'm going to just Define a union type like my type and it's going

to be equals to a string or a number right here so now underneath there we're going to be Also creating a function I'm going to give a name of like example or function rather it's going to take a value and the value type will be my type right here and for the return statement what do you have to do I'm going to just specify the white because we are not going to be returning any value from that so that's why we specify white right here so now let me just use my first type guard which

is called the type of right here if the type of the Value is triple equals to string so what do you want to do we just want to lock to the console uh value. two uppercase right here and now let me just execute there so if I save my file so what are we currently doing right here so if I H my mouse over to the value so what are we getting we are now getting the value is now currently set to string so what's going on if I just put that right here at the

top and now let me just save that and here you can see very quick it's Going to giv us this error right here if I have my mouse over to it so it's going to gives us this error like um property. two uppercase does not exist on a type my type right here but if I put that right here inside this F statement we are now telling the tcri compiler if the type of value is set to string then run this code if that's not set to string so what do you want to do we

just want to log to the console like value. two fix right here it is going to be some sort Of a number like we are just sing that to the compiler So within this block of code typescript knows that the value will be string and outside from their first block now outside from this block of code inside the else block this types compiler will already know that the value will be some sort of a number so if I H my mouse over to that so here you can see we are now getting the number right

so this is how we are going to be narrowing the types right here so now Let me just use them I'm going to go back and I'm going to just call my function with the string of hello so it's going to gives us like uppercase hello right here so if I sve my file and run that so it's going to gives us uppercase hello right here which is totally cool now let me just duplicate that or you know let me just write example function once again and if I just write like 20 so it's going

to gives us 20 right here so if I save that Or not 20 but uh 20.0 0 because we use this method of two fix right here and we specified two so that's why we are now getting this uh dot z0 right here so that was the first way of type narrowing so now let's learn about a type narrowing with the instance of operator right here so the instance of op is another type guard that allow you to check whether an object is an instance of a particular class or a Constructor function so this is

how the code's going To look like and I know that's a lot of code so here you can see we have first of all like two classes right here and then we are creating some sort of a function and for the type of perimeter we are passing either the dog or the cat clause and we're not returning something so that's why we put white white here so you know what let me just write this code and then you'll get to know what I'm talking about so now let me just remove that and I'm going to

just Define A CL I'm going to give a name of like dog and now I'm not going to even bother providing a Constructor function I'm going to just use like a Bar Method right here we are not going to be returning something from there so I'm going to just write a white and inside this function we are going to be just using like wo or something like that I'm going to duplicate this uh class right here now let me just create one for the cat as well and for the cat we would Have a meow

like that or I guess this how you spell it meow or something like that and here I'm going to also just write like meow something like so you know let me just sve my file and this is how we are going to be creating two classes and now the next thing which you have to do is that we have to create a function and inside that function we're going to be using the type narrowing by using the instance of operator right here so I'm going to give a name of like Animal sound and it's going

to take the perimeter of animal and I'm going to also provide the type of you know what not animal sound uh animal I guess animal would be fine and for the type I'm going to specify either the dog class or the cat class which we are creating right here up above so we have this dog class and we also have this cat class right here so we are not going to be returning something from that so I'm going to just specify the word right Here and now let me just check if the animal is the

type or not type but the instance of uh dog so what do you want to do in that case we just want to write an animal bark right here and I'm going to execute that and now here you can see if I hold my mouse over to the the animal is annotated with the dog right here not a cat but with a dog because here you can see we're using the type narrowing we are narrowing down over type right here so that's why inside This block of code the animal type should be a dog right

here so now for the else class what do you want to do let me just write that and I'm going to just write animal. meow and now let me just execute that right here so if I hold my mouse over to this one so here you can see for this one we have animal of cat if I my mouse over to this first one it's going to gives us the animal off Dog right here so yeah that's the now let me just use that right here so I'm going to just create two instances so I'm

going to write like my dog it's going to be equals to like new dog and execute that and I'm going to also create my cat it's going to be equals to the Cat part here and we're not going to be ping anything because we did not require anything so now let me just use my animal sound and I'm going to specify my dog or you know what let me just log to the console my dog so that you can see uh you already know all of that Stuff but now let me just loog to the

console there s file and run there so here you can see it's going of gives us the dog and also the cat classes right here okay so that's cool now we have to provide this uh dog and also this cat to this animal sound right here so I'm going to just specify my dog and it's going to gives us for the output of woof or woof woof I guess because currently we are providing this wo wo so it's going to give us that result and if I Just write like animal sound once again and if

I just write like my cat and it's going to gives us me or something like that and now let me just save my file and if I just run that it's going to gives us wo wo for the first one and it's going to giv us meow for this cat right here so yeah and this is how we are going to be narrowing down our types by using a typescript type off operator right here so now let's learn about a type narrowing by using the intersection Types in typescript so you already know like I already

discuss what intersections is but if you don't know that let me just read the for you so intersection types in types scrip allow you to combine multiple types into a single type and the resulting type will have all the properties of each individual type and you can create intersection types using the end operator right here and this is how the code is going to look like so here you Can see we have two types of like the first one we have a employee the second one we have a manager and we are now just using

this intersection operator right here or intersection type whatever you want to call that and it will now combine both of these values or these types to this one right here and we can use that anywhere we want so now let me just write a code for that and then you'll get to know what I'm talking about so I'm going to just delete all of That code and I'm going to zoom in and I'm going to first of all Define uh two types right here like employee or something like that and inside there I'm going to

specify the IDE of number to it and also the name will be some sort of a string and that's that now I already forgot to include the equal to sign and here I have to just write a manager and the manager is going to be equals to the department the TM and and for the Department I'm going to specify the String and for the role I'm going to specify the string as well and so these are our two types now let me just create uh or not create but now let me just use my intersection

type right here so I'm going to just write like type of manager m n a on manager uh manager with mloy info something like that will be now equals to the employee and the manager right here so now I am going to use that right here so I'm going to just write like manager come on Lower G cons And manager and now let me just annotate that with this manager with employee information is going to be equals to uh this object right here so first of all I'm going to specify values to the ID then

I'm going to specify the value to the name and also to the department and Rule right here because currently we are combining both of them to this one right here and we're now providing that right here for this object so I have to write all of that value so ID will be now set To like one 2 three or something like that and I'm going to also specify some sort of a name like Alex meren or something like that and I'm going to also provide a department and the department will be engineering and also the

role will be some sort of like team lead or something like that and finally now let me just log there to the console I'm going to go back and now let me just log to the console like manager. ID if I just write ID and now let me just Execute there so it's going to gives us like one two three right here and now let me just duplicate that a few times and I'm going to just get like name and I'm going to also get the department and also for the rule as well so if

I sell my file and run there it's going to giv US 1 2 3 4 ID Alex smon as a name and Engineering as a department and role will be team lead right here okay so that was it about our type narrowing in typescript so now let me just make a Genuine setup for writing a typescript code because currently we've been using this extension called this code Runner right here and trust me we love this extension but the thing is that in real world project we are not going to be using the code Runner we

have to compile or typescript code to the JavaScript because uh our compiler don't have any idea like what the hell is a type what the hell is all of that insertion operator all of the thing that we learn About timecrimes JavaScript for the front end and also for the back end and we don't use the typescript code for the front end and for the back end we have to compile our typescript code into the JavaScript code so how we are going to be doing that okay so to do that I mean like to compile our

code into the JavaScript code we don't have to do nothing but we just have to write a TSC which we already installed in the Beginning of the course and we are going to be just writing a dash and and if I hit enter and what are we getting we are now getting this TS config file right here and there are a lot of stuff inside this TS config file now let me just close my terminal right here and I'm going to open my ts config file and here you can see we have like crazy amount

of stuff right here you can learn more about this uh TS config file by your own but I'm going to just explain a few Things right here so now let me just go ahead and go to this TS config right here if I hit enter this going to brings us to this TS config right here I'm going to have to go to the top and this is how it's going to look like right here so you can learn about a compiler option type checking modules inid JavaScript support and all of that kind of stuff but

what we are currently interested in is that how in the world we are going to be compiling work code Well we don't have to do nothing let me just zoom in a bit we don't have to do nothing but we just have to open our terminal right here and we also already have our TS config file right here so everything is already set up so we just have to use like TSC and then we have to include the specific path of the file which you want to compile so I'm going to just write I and

d and if I hit Tab and if I hit enter right here it's going to give us that adj file right here so Here you can see it is now giving us this index.js file right here but we would have some sort of a problem if I open this uh Javascript file right here we are getting all of that same code right not a same code but we are now getting totally a JavaScript code right here but the thing is that we are using the war resert keyword and this is not the newer way of

writing a JavaScript code oh you know what let me just give you some sort of example like uh I'm Going to go ahead and go to my typescript code right here I'm going to remove every single thing which I currently have right here and I'm going to just create some sort of error function like const add and it's going to be equals to like uh I don't know x uh and the X will be set to number and I'm going to also specify the Y and the Y will be also a number and now let

me just annotate that to the number as well and I'm going to also specify the X + Y Right here as a return value and now let me just go back and here you can see this is the newer way of writing a JavaScript code like here you can see we're using the arrow function and all of that so now if you want to compile that now let me just compile that right here if I just use this TSC right here let me just clear that and if I just use like TSC and then this

index.js or not JS in this case we have to write this TS right here if I hit enter so now it's Going to replace all of their previous code to this code right here so now let me just show you that if I sell my file so here you can see it is now using the function expression but this is the older way of creating a function like here you can see we're using the one Reser keyword and we are using the function resert keyword and we are also returning there right here but in the

typescript right here we use this Arrow function and we are not getting the Arrow functions right here so how in the world we're going to be doing there so well for that we have to go ahead and go to our configuration file and I'm going to just scroll down and what are we getting we are now getting this target right here and the target is now currently set to the es 2016 or ES um 16 whatever you want to call that so I'm going to just uh click on this hash right here and I'm going

to specify the Target and if I hit so here you can see It's going of brings us to this target documentation right here you can learn more about that if you wanted to but basically what this target means is that in which kind of version of JavaScript we have to compile this typescript code into okay so currently It Is by default set to this es 2016 I'm going to just remove that and I'm going to just hold control and hit space so it's going to give us 2015 16 17 18 19 till this 2023 and

also we have the es next right here But currently I want to just compile my code to the es6 way so I'm going to just click on this es6 right here and if I sell my file nothing will happen so yeah I want you to keep that in mind nothing will happen if I just delete this file and now instead of writing like TSC and index and all of that we just have to write this TSC that said baby we just have to write this TSC and if I hit enter right here here you can

see it's going to giv us that compile file and Now hopefully if I open that it's going to gives us that aror function right here which means like we are now using the newer way of writing a typescript I mean like JavaScript code right here so that's totally amazing so that was it about for the Target and now let's learn about um compilation so here you can see it's going to compile all of the file right here let's suppose if I have a lot of files now let me just delete that I'm going to just

delete that right here Just like that and I'm going to just create a few other uh function right here now let me just duplicate that and I'm going to give a name of like multiply or something like that and instead of writing this plus symbol I'm going to just change that to like uh time symbol right here we don't have to worry about the code right now I'm going to cut this code from here and I'm going to just create a file give a name of like something now let me just make that A bit

bigger I'm going to create a file give a name of like M.S for multiplication. typescript okay so for real word project we are going to have a lot of typescript files so in this case we just have like mt. TS right here I'm going to just put my code inside this m. TS right here and also I'm going to just create a folder give name of like SRC or you know I don't have to create a folder not right now now let me just show you that so here you can see we have this Mult

.ts file right here I'm going to also cut this code from here and now let me just create one more file give a name of like .ts for adding two numbers so I'm going to just place this code right here now let me just go back so you guys can see everything I better so here you can see we have three files the first one we have is this .ts file then we have a mult like multiplication. TS file and I'm going to also just write like subtract right here inside this um index File so

I'm going to just write subtract or something like that and I'm going to just put my minus right here so if I save that so currently we have three files right here the first one we have is ADD which is responsible for adding two numbers then we have a index which is responsible for subtracting two numbers and then we have a multiple multiplication okay so if I just write TSC right here in this case if I just write TSC and if I hit enter and here You can see it's going to compile all of the

code right all of the file which we currently have inside our directory so if I open this Mt it's going to provide that same code right here it's going to compile there and if I open this one same will go for the add and all of that but in some situation we don't want to compile all of the file we just only want to compile a certain file like a certain typescript file so now let me just delete this compilation file And now I'm going to go ahead and search for the files right here so

I guess that was a files files I'm going to hit enter right here so it's going to brings us to this documentation right here so find specify the allow of the file to include in the program and error will occur if you don't have that file already created right here so how the syntax going to look like this is how the syntax going to look like but I want you to keep in mind something it will be underneath This compiler option n inside there like for this compiler option we have a lot of things now

let me just show you that if I go to the uh TS config file I'm going to go to the top first of all so here you can see we have only one object right here inside this Json so which is currently set to this compiler options if I go to the bottom we don't have anything we just only have that so if you want to provide that files I'm going to just provide a comma there and now Let me just even copy that right here I'm going to copy that and place it right here

and I'm going to just remove almost every single thing right here but I want to just leave like I don't know maybe index so I'm going to just write index.ts right here I'm going to sve my file right now okay so if I just save my file right now and if I run that once again like that TSC once again and if I hit enter in this case it's going to only compile this index.ts right here so Here you can see it's going to only compile that and it's going to ignore the rest of the

file right here so yeah that was the first way of compiling something or ignore something by using these files now let me just show you the include and also the exclude as well so I'm going to comment this line out and now let me just search for include so include like which kind of file you want to include to be compiled okay so you can learn more about that so this is how The directory will look like like all of these file which you can see right here they will not be compiled and the rest

of them will be compiled so you know what I'm going to just cut that from here and I'm going to just create a folder given name of like SRC and I'm I'm going to also create one more for the disc because in the disc folder we are going to be providing our compilation file like the compile code so we're going to take care of that a Bit later but I'm going to just cut out all of that files and I'm going to just put it inside this SRC directory Right Here and Now inside this DS

config file what do I have to do I'm going to just specify this include right here okay so now let me just copy that and I'm going to just write double Cotes and pro that include and here we have to specify the array but I'm going to also have to specify that uh comma right here to get rid of that error right here okay so I'm Going to just copy that and now let me just place that right here so what this syntax means is that every single thing which are currently available inside the SRC

folder I want you to compile all of them like leave none of them compile all of them so if I just save that and now if I just write a TSC command one more time so if I just write TSC and if I hit enter so it's going to compile all of that file right here so here you can see it's going to compile all of these files And I don't want that like in some situation we would want to compile all of that files but a lot of times we don't want to compile all

of the files so how in the word we are going to be omitting there I'm going to open there once again so now let me just show you the documentation as well you can even also specify a single file if you wanted to like let's suppose if you want to just compile this index.ts right here I'm going to just write index.ts right Here and if I save there and now let me just run my TSC one more time and if I hit enter so it's going to only gives us that index.js right here like it

will only compile this index.ts but we don't want that we can also use the exclude right here so I'm going to just write like exclude ex ex c l u d e and it's going to brings us to this documentation right here I'm going to copy that and underneath this one I'm going to specify this exclude right here and I'm going to Just write the array and inside this array we are going to be specifying all of the files which you want to ignore for the compilation so I'm going to just write SRC folder because

inside this SRC folder we are going to be compiling or ignoring the file so now let's suppose if I want to just ignore this multiplication file but I want to compile the rest of them so we are going to be just writing like mt or I guess that was mold mt. TS yep I'm going to Just provide this mold. TS and inside there let me just copy there once again uh I'm going to just copy like every single thing right here like I want to compile every single thing so I'm going to just pass this

syntax right here like I want you to compile every single thing but I want you to just remove this mult do or I want you to just ignore this mold. TS file okay so now let me just compile that and if I hit enter so here you can see it's going to compile all of The file but it will not compile this M.S file right here so here you can see we have this index and we also have this .js right here which is totally okay so now I'm going to just delete this ad and

also this index compilation file and now let's learn about the outdor right here outdor I'm going to hit enter right here so you can learn more about this outer like what it will do for you but now let me just show you in action so for this out there we are going to be specifying Where we wanted to put our compiled code so now if I just use like TSC one more time it's going to compile all of the code right here inside this SRC folder but we don't want that I'm going to just delete

these files right here I want all of the compiled code to be inside this T folder right here so how in the what we are going to be doing there I'm going to just open my ts config right here and I'm going to just search for the out right here the out directory okay so I'm Going to just uncomment that and first of all I'm going to just Pro I'm going to hold control and hit space and you know what I'm going to just provide a disc right here in this case so if I just

save that in this case we want to compile all of our code into this disc folder so here you can see we provide the path of this disc right here okay so now let me just close that and finger crossed and if I just run that so here you can see going to compile all of our Code into this test folder right here so we can also just remove uh this one right here I'm going to just remove this exclude I'm going to comment this line out and now let me just delete all of that

files once again and now let me just rerun that TSC one time so if I run that so it's going to compile all of the code into this DS folder or D folder right here so that was there about the genuine setup of typescript so we're going to be writing Our typescript code by using this extension which is the TS extension but we have to compile our code into a JavaScript code so that we can work with the real word JavaScript right here okay so that was it about the typescript genuine set or whatever you

want to call that so that was it about compilation and all of that now let's learn about our declaration files I'm going to just copy that and put it right here and I'm going to go ahead and go to this Typescript .org right here and I'm going to just click on this docs right here then I'm going to just scroll down to this declaration file so I'm going to just click on there and I'm not going to read you through all of that documentation but trust me declaration files are totally simple and amazing and straightforward

so what in the word all declaration files and why you should care about them well you don't have to worry about any of the Declaration file But these are the files which can be end with this extension right here DTS extension so you know what instead of wasting your time I'm going to just go ahead and remove this test folder right here and I'm going to also remove all of that folder I mean like I'm going to also remove this folder right here as well and I'm going to just create like index. uh TS file

right here and I'm going to lock to the console like console or not console or I'm going to Just lock to the console like I don't know document would be fine so now let's just uh work with a little bit of document object model we're not going to be working with the document object model because typescript know every single thing about that and we don't have to worry about the document object model uh types as well so if I H my mouse over to this so the typescript compiler already know which type of uh data

this uh document will be holding so Here you can see it is now currently set to document right here so if you're using a vs code so I want you to just hold control and click on that so it's going to brings us to these declaration files right here so now let me just take a screenshot of that so here you can see it's going to brings us to this lip. dum. D.S file right here so we are not going to be providing any other stuff inside this uh declaration files but inside this declaration files

we are Going to be only like only specifying the types okay so just a types nothing else so here you can see we have a event object so it's going to be either the event or undefined and you can learn more about that so if I just search for like I don't know document not a document but get element by ID or something like that so if I just click on that so here you can see we have that get element by ID method right here and the type of that will be set to This

HTML element right here so if I hold control and click on that so here you can see it's going to only include the types right here so inside this declaration file you are not going to found any real code but you will just found uh what do we call it the Declaration or the types right here okay so that was it about the Declaration file and this is how the typescript compiler knows every single thing about the Dom and all of that kind of stuff Like third party libraries but now let me just show you

or before before I show you that first of all let me just install one library right here and if you already know exus totally cool if you don't know xus you don't have to worry about xus because we're not going to be writing a lot of xus code I'm going to just write a little bit of xus code and you don't even have to worry about that so xus is the library which already comes with the Declaration file So what I want to do is that I already make a setup for them I'm going to

just remove that stuff from here which I specified right here here I want to compile all of the files right here so I'm going to just remove that and yep I guess the rest of them will be totally the same I'm going to just remove that and now what I want to do is that I'm going to just use like npm uh init d d or not d d but Dy right here I'm going to hit enter right here so it's going to Just gives us this package.json file it is nothing but it will just

keep track of all of the dependencies which we are going to be installing for this project So currently we just only want to install the xuse if you already know xuse cool if you don't know xus you don't have to worry about that but now let me just use like npmi and xus and if I hit enter so it's going to install this xus library inside my machine and yep that's totally installed the next Thing which I want to do is that I have to use that xus right here somewhere so I already created this

index.ts file right here and the next thing which I want to do is that if I just write like import xuse from xus right here and if I sve that and if I hold control and C click on this exus right here so it already comes with the types right here like the Declaration files and here you can see we have a lot of types right here like we don't have any actual code But we have a lot of types right here yeah xus already comes with uh the types like not even exus there are

a lot of libraries and Frameworks which already comes with the typescript types right here so now let me just show you where you can found that I guess that was uh not quite sure about that about typescript types uh GitHub or something like that I'm going to just search for that and there we go this one definitely type right here so if I open that if I Go ahead and go to this definitely type I'm going to go to that and yeah this repo is super popular right here and you can even contribute to that

by yourself if you have some sort of a library or framework and that needs uh types so you can also provide this now let me just open this types right here and here it's going to gives us an error let's just wa for that here you can see it's going to gives us this error it's going oh not even error it's I guess a warning sorry We have to truncate this directory because it includes over 1,000 files I mean like it can only show you the 1,000 files but yeah it will just fail to load

all that files so here you can see we have a lot of types for every single thing right here but there are still a lot of projects like uh for instance you can think about X not xus but you can think about exess Express yes Express yes does not come with the built-in types so yeah now let me just write a Lowes I guess lades does not include their types so now let me just write low Dash come on low Dash and this repository is supremely awful because it is totally big I'm going to just

click on this loaded and yeah it is loading a lot anyway so here you can see we don't have anything else but we have like all of their files right here which ends with this D andt yes right here so we have all of that files for all of the things so if I just open this head right Here and here you can see we have just simple one file right here uh you know that's other story you don't have to worry about that but anyways you already learned about what a type declaration are and

how it works so you know what let me just use this xus right here I'm going to just create a function P data and it's going to be equals to this as synchronous function and I already assume that you guys already know all of that stuff so I'm going to use the try And catch for a tri block what do you want all you know first of all now let me just take care of the else log so I'm going to use like console you know console. error and I'm going to just write some sort

of error right here and for this one we're going to be just writing error. message m e s a g e there we go and we are getting this awesome error message right here which we are going to be taking care of in a few seconds so yeah so next thing which I Want to do is that I have to fit some sort of a data so I'm going to just write like Json come on Json place folder P database right here and I have to fix some sort of a data from there I'm going

to just copy this to-do right here and I'm going to just write like cons response and it's going to be equals to um this x use response right here come on X here oh we have first of all import it right here okay so I'm going to just provide a comma and I'm Going to just import like X use response right here I can get that right here and now we have to use that so I'm going to just write like X response what the hell is going on now let me just copy that place

it right here and here we have to annotate that with the to-do like which kind of data which we are going to be getting from this specific API right here now let me just copy them place it right here so we are now getting this data like the user ID is going to be equals oh come on like the user ID is going to be equals to one the ID will be set to one the title will be set to some string and also the complicator will be set to some sort of a Boolean value

right here so we can also create order to do right here now let me just create interface uh I'm going to give a name of like interface to do and inside there we can specify a type for the user id id title complicated right here so I'm going to Just write like user ID and it's going to be equals to the number I'm going to also provide the ID will be also set to a number and also we would have some sort of a title which will be set to string and also we would have

a completed not complicated did I say complicated it's completed okay so yeah we already import that and we are using that right here but I forgot to use the aent uh a and xuse and then we have to specify the link where we want to get That data so I'm going to just write like do get and we are going to be getting our data from this um uh URL right here I'm going to copy that and now let me just place that right here uh I have to write the inside of quotes let's just

go back and why in the word we are getting this response and if I hold my mouse over to this so cannot extend interface x a come on I'm using the equ two sign right here I have to annotate that with this to do and also This xus response right here and now let me just save that and r e s p o n s e not i s e okay so underneath them we're going to be just logging into the console like some sort of a to do and I'm going to specify this response

what the hell am I doing right now so response to data there we go okay so yeah for the error the error is going to be any error right here like yeah we don't know which kind of error it's going to throw us so we can specify any Error well you know what let me just handle that properly so I'm going to cut that from here and here what I want to do is that I'm going to just search for like if x use dot is X use error uh and here we have to specify

that error right here so if that's the case so I'm going to just write like console. error now let me just write console. error and I'm going to just say like xos error and also let me put error. message right here which kind of message we are going To be getting from that error and underneath that what we have to do we have to just search for that error response uh if you have the error response so what you want to do we just want to log to the console the status so status and I'm

going to just write like error response. status right here I'm going to duplicate that and change this status to data right here and we're going to be getting the data from that response and also let me just sa that For this L CL what do I have to do I'm going to just write like um console. error and here we just have right that error come on error. message right here now let me just save that and now let me just execute this method right here I'm going to just execute that right here I'm going

to send my file and I'm going to just run my code right here so it's going to giv us all of that data right here it's going to take a bit of time so here you can see we have to do and to do Is equals to this object right here so we are now getting the user ID also the ID and also the title and completed is now set to false right here so which means like everything is a okay and this is how we going to be using a typescript with exus Library do

you have to know that you don't have to know that but yeah that was a typescript with XU so now finally I'm going to just show you some sort of a library which does not automatically comes with a typescript Types so for that we're going to have to install a separate type so what I want to do is that I'm going to just install the express JS right here so I'm going to just use like uh npm come on npmi and express and we're not not going to be writing a lot of express code but

I'm going to just make a general setup of Express JS so yeah it's going to take a bit of time to install this Express J into my machine and I'm going to just leave it to do its thing and there we go It is now successfully installed I'm going to go ahead and go to my package.json right here and now let me just write some sort of a uh script for myself you don't even have to worry about what Express JS is if you do care about this so I have a complete course on there

if you want to check it out but if you don't care about that so you don't have to let me just write a start come on start and I'm going to just write like ts- node SRC directory and I'm going to just run my index I mean like uh index.ts right here now I'm going to just create SRC folder right here and I'm going to just put my index.js right there and there we go so yeah I'm going to open my index.ts file right here now let me just remove that inside there what do I

have to do if I just write like uh import Express uh from Express right here so if I hold my SC to there so Express is declared but value is never read we can take care of There in a few second but could not find a declaration file or a module expressjs right here so we successfully install expressjs but we also have to install the Declaration files for the so if I have my mouse over to that and here you will see that quick fix right here uh I'm going to just click on that so

here you can see either install the types or just remove them okay so here you can see if you want to install them manually by using a terminal so you're going to Have to write this command which is first of all write npmi and then you have to use like uh add types and then for/ expressjs right here but if you're using a vs code so you just have to H your mouse over to that click on a quick fix and then click on this install right here so it's going to automatically install it into

your machine so yeah I'm going to have to wait for that to install all of that types so here you can see that it is successfully gone and I'm going to just write like cons app and it's going to be equals to like Express chz come on Express uh exps yeah and now I have to just write Express e and also e here as well now let me just create some sort of a port and it's going to be equals to like oh my God 3,000 right here and now let me just use like app.

listen and we want to listen to the port and also now let me just execute con. log and come on server Running on Port and now let me just render my port right here let's just go back and I'm going to use my back text right here like that and that's it I'm going to also create one route right here so I'm going to use like f. getet it's going to go to the home and let's just provide or request and also the response as well and here what do you have to do you just

have to write rest. not oh yeah response there we go response. send you can also abbreviate That to the rck and res but request and response would be good so I'm going to just write hello typescript uh press just or something like that and now if I hold my mouse over to this response right here so response is response any response and yeah this is our generic function right here but we can also import the responses manually so I'm going to just have to write a comma and I'm going to just get the request and

also the response as well okay so if I Get there we can also provide a types for there so I'm going to just copy there and annotate that as a request and I can also copy this response and annotate there with this response right here okay so now let me just save that and I'm going to just use my terminal and I'm going to just say like npm Star to start my server and I guess that would be it okay so here you can see everything is starting a okay but it's going to take a

bit of time so server is Running on Port 3,000 so I'm going to just write like a local host of 3,000 and if I hit there so here you can see we now getting like hello typescript with Express JS okay so in your case it's going to look something like this so yeah that was the end of this course and there are still like two section left if you want me to make a course on that like typescript with reactjs and also typescript with nextjs I can totally make a courses on them but this Course

was just for those people who wants to learn typescript and want to use it in their projects so that was all of the things I know about typescript and I use that daily so that was the end of this course and I only have one request from you guys let me just say that if you guys want to support me so I'm going to give you a link in the description below uh and it will bring you to my GitHub repository and you can just start that repo and you Can provide um you can for

that repo and you can do whatever you want to do with that repo so what I'm asking you from you guys is that please follow me on GitHub and if you want to support to this channel so feel free to subscribe so if you don't want to support so yeah thanks for watching anyways and maybe I'm going to see you in the next SC bye-bye from now and love you all all right guys so now we are going to be using a typescript with reactjs so If you guys don't know what a typescript is I

have a complete course on there right here so this is going to be like more than a crazy course like if you care about learning T script this is going to be the last course for you to learn okay so yeah learn that and then come back to this video and now we are going to be learning about typescript with reactjs so to do that first of all we have to make a setup so I'm going to open my terminal right here and now I'm Going to be using npm Create we at latest now if

I hit enter now we have to give it some sort of a name like TS demos or something like that in this case I'm going to be choosing reactjs and also typescript we are not going to be choosing JavaScript we're going to be choosing typescript so if I just hit enter now we have to go into this TS demos and now if I hit enter and I'm going to be using a code dot to open there right here next let me open my Terminal and I'm going to be using npmi to install all of their

dependencies and all of their dependencies are now successfully installed so here you can see we have our SRC folder and now inside this SRC folder we are now using TSX extension right here you can either use TS or you can also use TSX instead of a GSX now we are working with time scripts so for that we have to use a TSX so I can just clean up every single thing we Don't need there so I'll just remove all of there and let's just say byby to this one and I guess that's going to be

fine but I'm going to have to remove this index. CSS file from there we have to go into the app and I'm going to just remove every single thing from here and let's just use our RFC and that's going to be fine I'm going to also remove this public folder because we also don't need that and now if I save my file and open that inside my browser by using npm run Dev and here you can see we are now getting our app so the setup is now totally done next we are going to be

learning about component props in action so to do that first of all we're going to be creating a component so I'll just create a components folder and inside this folder I'm going to create like user. TSX we are now working with typescript so we have to specify TSX as extension now inside we're going to be using our rfcu to create our component Right here save my file now I'm going to go into my app component and now I'll just just remove this app and instead of that app I'm going to just replace that with this

user we going to be importing that totally directly in N semi file and we are now getting our user right here which is amazing so what I'm going to do is that I'm going to pass a few props through it so I'll just use like name and name can be anything like Alex or hosan or something like that I'm going To also specify the age of 20 to him and also the is student is a student or not so I'll just specify True Value and as soon as I do that I'm now getting this error

right here so if I hold my mouse over there it is now telling me that the type this prop which you are specifying right here is not assignable to the type intrinsic attribute okay like you have to do something about that like you're providing these props but you're not using them inside this component and to Use them you already know how we going to be using there so we can just use like props right here and now we can totally use the right here in server component so I'll just use like I don't know maybe

H2 and we're going to be using like problems. name first of all let me just duplicate a few times prop. Ed and also is student right here so if I sell my file and as you can see we are now getting Alex and also 20 and we cannot see the E student because this is A Boolean value and now here if I hold my mouse over today it is giving me an error like perimeter prompts implicitly has any time like which simply means you are not using any typescript so if you want to use typescript

you got to do something about that so I want to use typescript so for that I'm going to have to specify a type for the name for the age and also for the student and why is there because we are now passing this data and we are not providing any type For there so to provide a type for there we going to be annotating our prop like this okay I'll just first of all take care of the name and name is a string value which I already know because we're now specifying a string value and

now we know that we also have a edge and Edge is a number and also we have a a student property which is a Boolean okay so as soon as I provide the in s my file here you can see we are no longer getting that error and why is there because we Are now explicitly telling our compiler that the name should be a string The Edge should be come on let me just get the Ed should be a number and also the student should be a Boolean value so that's why our typescript compiler now

know which type to use so now if I save my file and just refresh there we are still getting that same result and we are not getting any errors inside our vs code now that's the first way but in some situation we would also want to Restructure our values from this props so how are we going to be doing there well we already provided a type for there we just have to destructure all of that value so I'll just remove these prompts and I'll just replace them with these curly braces you want to destructure the

name the ede and also the E student right here so as soon as I do that here you can see I'm now getting like cannot find name of prop like we're not using a prop so that's why we are Getting this error so I'm going to select that first one hit contr d contr d and remove there so as soon as I just remove the semi file this is how my formatting will look like I know it seems a bit crazy but yeah this is how we are going to be destructuring our data and this

is how we are going to be providing a types for our data so I want you to keep that in mind so this is just a basic way of providing our prop now let me show you how we're going to be Extracting all of their types into either a separate shape or a separate type okay so I'll just cut that from here and I'm going to also remove that from here and once again we are getting all of that errors right here so to do that we can either create a type you already know how

to create a type if you are coming from my typescript course but if you don't know how to create a type you should go ahead and watch my typescript course now I'll just create My type and I'm going to give it the name of like user shape you can basically give it any name that you like and now inside there we are going to be just spacing our types right here so we are now creating our user shape but now we have to tell our component that we want to use this user shape so I'm

going to copy that from here and I'm going to just rate my component props to this user shape so as soon as I do that I'm going to save my file and refresh that And still we're getting that same result and that errors are now successfully gone so that's the first way now I can totally comment this line out and we can also create an interface for this so I'll just use like interface and I'm going to give it the name of like user shape one more time and we're not going to be using any

equals to sign because we're now working with the interface and now inside there we can use like name will be a string and age will be a Number and also we have the property of is student come on is student and that's going to be the Boolean value so as soon as I do that sa my file and here you can see we're getting the same result and we are no longer getting their error messages right here this is how we are going to be working with the prompts with the component but now in some

situation we would also want to use the children so now let me just remove that from here I'm going to call my component As this way so we want to pass some sort of GSX inside there I'm not going to do anything crazy but I'll just put a paragraph which you just say like hello which means like we want to use our children right here so to use them for that we are going to be using our children so we have to destructure our children right here come on children I'm going to copy that and

we have to replace that with this H1 or maybe H2 and we have to render our children right Here so if I save my file still we are getting this error right here because this children has no property and it is not available inside this user shap so I'm going to remove that from here and I can just write like children and now what will be the type of this children like this is not a prop this is neither a string nor a number or Boolean or undefined or anything like this so what in the

world we are going to be specifying for this children so we are Going to be using something called the react node okay so if I just use like react node and if I hit enter so it's going to Auto Import it right here as you can see so if I sell my file here you can see we are not getting any errors and here you can see we are getting what hello but now want is see like what is inside this react node so if I hold my control or command and if I click on

that so it's going to brings us to you guessed index. d. TS which means Like this kind of brings us to types file like this file only includes the types nothing else than there so this react node can either be a react element either a string number a triable portal Boolean null undefined and there are a lot of things that you can explore in this file but I will never recommend you to like explore this file there are a lot of things going on right here okay so I'll just remove that from here and this

is how we going to be specifying or React node for our children now this is the modern way of providing our shap for our prop but there is also another way you will found like in the documentation or somebody else code so I also want to show you there so which is called the FC or functional component so what I'm going to do is that I'm going to just remove that from here and I'm going to go back to my old prop like we have the name Edge and also the student I'm going to save

that file I'm going to also Remove that from here we also don't need these children so let's just remove that and also remove this okay so we only have this user shape and I'm going to uncomment there right now save my file now I'm going to also destructure my name ede and also the E student property right here and now let me show you the older way of providing a prop for our typescript so this is how we going to be doing there first of all we have to provide our colon then we have to

write FC which will be coming from the reactjs as you can see right here FC like a function function component is coming from the reactjs and now we have to write like less than sign and here we have to specify like a user shape and we have to close there and once you close there and if I have my mouse over to there it is saying like all D structure element are unused like you are not using the inside your code and now to fix this problem we going to be using This I'll just use

like H1 I'll write my name and then H and then finally is student property right here so if I save that and here you can see this is yet another way of pro providing a prop to our component welcome to the react typescript first challenge so in this one I want you to create the button component which will take three prop like label on click and disable so label will be just a label forward button and the on click will be a function which Will be executed whenever somebody clicks on our button and also the

disable will be a state like uh we can indicate either the true or false and it's going to make our button either disable or enable so then finally you have to import that component inside the app. TSX file and just run that and and make sure that you didn't get any errors so give it your best shot if you can do it that's completely okay then come back and watch the solution and I'm going to Give you my solution so what I'm going to do is that I'm going to create my component and inside this

component I just create my b. TSX in this case because we are now working with timecrimes there like so as I mentioned this going to take three prompts I'll just WR a label and the label will be set to click so I'll just write a click right here and also the on click event handler in this case we're going to be passing our Arrow function and I'll just Say like con log and click like so and I'm going to also past the disabl state so d s a b l e d and for the disabled

state I'm going to set that to false now that we successfully provided our prop we have to get that prop inside our component so how can you go about doing that and this is how we going to be consuming or accessing that props I'll use the prop and here we also have to define a type for there so I'll just use like label for the label that's going to Be a string we're going to be also passing the on click event handler and this going to be a function so we have to just provide a

wi right here because we're not going to be returning anything from there and also the disabled State and for the disabled that's going to be a Boolean value so we also have to otate there now we have to use the inside our UI so I'll just remove this button and replace the with this button actual button right here and here we are going To be passing like prop. LEL and also we have to provide the on click event handler and for the on click event handler we are going to be using like on on click

like so we're going to be also ping the disable okay and that's going to be equals to that prop. disable so I'm going to sell my file open my terminal and use npm run Dev so it's going to run the inside my browser so that's cool and everything like we are getting our button we're not getting any Errors right here but we can also refactor this code to user destructuring so I'll just remove these props and I'm going to write like label and on click event handler and also the disabled State you no longer have

to provide these props and dots I'll just select one and hit control d contr d and remove them now let me just save my file and this is how my code looks like and yeah we can click on our button and it's going to gives us like something inside Our console as you can see welcome to the reusable prop typing with reactjs and typescript challenge so the first thing that I want you to do is that I want you to create a file with the name of typ .ts inside the SRC directory then Define the

info type and extend the admin info list inside the types. TS file so what is the info type this type represents the best information shared by all users it includes essential properties like ID name and email about A specific user and yeah that's going to be the first portion of this Challenge and in the next portion you're going to have to create a component with the name of user info and that component will display the user information based on the info type then create ad info component and that will display the user information and additional

admin detail based on the admin info list type okay and finally you have to import all of them inside the app. TSX file and just See like if you got some sort of error or not so give it your best shot if you can do it that's completely okay then come back and watch the solution and now let me just give you my solution so I'm going to remove that and create first of all my component user info. TSX and also admin info. TSX so I'll just create like RFC in inside this one and also

the rafc inside the admin info component now let me go ahead and go to my app and register both of that component right Here so I'll use like user info and grab there I'm going to also use the admin info and also grab there right here now let me create some sort of a data so what I'm going to do is that I'm going to create my user and that user will have the ID and that's going to be set to like one and also have the name which will be like I don't know John

do and also the email will be set to John gmail.com so that's going to be just for a normal user we're going to be also Creating one for the admin and the admin will have the ID of Two And also the name will be set to Janny Smith or something and also we're going to be providing an email and this can be set to jany gmail.com okay and now we are going to be providing a role and the role will be set to admin come on admin like so and we going to be also providing

the last login so I'll just use like new update and it's going to giv us the last login Now here you can see we've defined our data and now we're going to be passing that data but we also have to create a type for this data so how can you go about doing that I'm going to show you how we can do that but now let me just P this data as a prop so I'll just write like user and user and I'm going to also specify the admin and which will be set to this

admin data okay so now let me go ahead and create my types right here inside this SRC folder so I'll just Create like type or types. TS and here we're going to defining word types like let me just show you all of them like so ID is now set to one so first of all I'm going to just Define like type of info and this going to be a type so the ID is now set to number so we're going to be providing a number and also come on I forgot to include the equal to

sign I thought I was just creating some sort of object anyway so the name is set to string also the email is set to string Okay now underneath that we're going to be also defining another type which will be the admin info list type and that's going to be coming from the info like we want every single thing that the info have and we also want to attach this new one so for the role here you can see we already get all of their data or all of their types from this info and now you

want to attach the role and also the last login role will be set to string and the last login will be set to date Okay and finally we have to export that so we can use the inside our file so I'll just export there but we have to explicitly tell it like this is a type so I'll just use like info and type type of admin list info right here okay so now that we successfully created there we also exported there but now we have to use the inside Word file okay so to use them

I'm going to grab first of all my info and also the admin list or admin info list to be precise and we also have To inverted this list or this user with our type so I'll just use like info and I'm going to also provide my admin right here so I'll use like uh admin list or admin info list right here okay so now that's to done now let me just go ahead and go to my component grab all of their data let me just zoom in a bit and the first thing that I want

to do is that I want to grab my info from my types file and here we're going to be defining our own type so I'll just use like type um User info prop will be fine and that's going to be equal to the user and for the user we're going to be defining all of that type so I'll just use like the older way of providing a prop so I'll use like react let me just get there and I'm going to use like fc4 functional component and here we're going to be providing our user info

prop and I'm going to close that I'm going to also destructure the user like all of the data which we are now providing for this User and we have to render that inside this component so we use like H2 which will say like user info or information would be fine and underneath that we're going to be creating our ID which will just use us like user. ID and I'm going to duplicate that a few times so we have a name and we also have the email address so I'm going to just change this value to

like name and also change this ID to email and that's going to be fine we'll be doing exactly the same thing For the admin info component so what I'm going to do is that first of all I'm going to grab my admin info list okay so once we grab them I'm going to create my type of admin info props and here we're going to be using like for the admin we're going to be providing like admin info list like this one right here we're going to be placing that here okay now I'm going to also

use my react so I'll just use like react uh. FC for the functional Component and I'm going to provide my admin in full list right here it's going to also take the perimeter or not perimeter but the prop of admin so we have to take that and we have to use that inside our component so I'm going to remove them and I'll use like H2 of admin information like so and provide a paragraph with the ID of uh admin. ID and just duplicate there a few time two the name and also email and also the

Rule and finally we have to just replace there with or you know what yeah we have to write like admin. last login and from there we going to be getting like two local string okay and I'm going to execute there instead of providing the ID I'm going to just change that to a name and I'm going to also provide the email here and also the role and finally we going to be getting the last login like so I don't know why we getting this error does not exist on what type let me Just grab that

and put this one right here now that successfully gone and this should be local string now let me sa my file and check this out so here you can see we are now getting the user information and we are also getting the admin information and anytime I sell my file it's going to gives us a different second right here which is cool but now we are no longer getting any errors and we are now successfully providing our types for each of the compon component Prop okay so now let's talk about the reusable types so to

show you there first of all I'm going to be creating my components folder and we will have like user info. TSX and I'm going to also create here another component which will be for the admin info. TSX and I'm going to go into my app component but first of all we have to write our RFC inside this component and also inside this component as well I'm going to go into my app component and first of all I'm going to Be importing my user info component and save there and I'm going to also import my admin

info component and save there as well I'll just provide a bit of label right here like H1 and user info and then I'm going to select this downand and I'm going to also copy there and now let me just place it here and let's just change this one to the admin info so I'm going to save this file and as you can see right here first of all we have our user info component and then we have our Admin info component right here so now I'm going to pass a bit of prop to it so

I'll just use like username and username will be Alex let me just write Alex right here and we are going to be also specifying the email like Alex gmail.com and I'm going to also provide the edge and Edge will be set to 20 and I'm going to also provide a location and location will be I don't know Earth and also United State I'm going to save this file and now I'm going to copy every single Thing from this component let me just place it right here to the admin component as well so we providing a

name of Alex we're also providing the email Ed and also the location you know let me just change this location to something else like Mars or something and unknown and I'm going to also provide the admin property and this will be a totally unique property like this component does not have the prob of admin and this component has the prop of admin right Here okay so what I'm going to do is that I'm going to go into my user info component right here and first of all I want to create my info so I'll just

write like type of info you can create interface if you want it to so it's going to take like a username and username will be a string you're going to be also providing an email and email will be a string as well this is provide a edge and Edge will be a number and provide a location and location will be A string of array so now we have to use that inside our user component I'll first of all destructure my username then email and then Edge and also the location and we will annotate there with

this info component not a component but a type now if I sa my file it's going to say that we have to use all of these props inside our component so to do that I'm going to change this D to the UL and now inside this UL we're going to be defining a few allies like uh Ali for The username and also let's just duplicate there a few time for the email and also for the edge and I'm going to use my uh json. stringify so you can see the value of this location so I'll

just Pro like location and now I'm going to save my file and I'm getting some sort of error l o c a t i o n c a t i o n there we go so now if I save my file we are getting all of that data which is looking amazing I'm going to basically copy every single thing from this Component now let me just place that inside this component right here so my file now we also have to destructure the username email and also the edge copy them and place that right here so

now I'm going to copy this info we're going to go into our admin component and now let me just place that here and instead I'm going to change that to a info like for the admin component info I'm going to copy there and now let me place it and as you can see right here we are not Getting any errors but if I go into my app. TSX component here you can see we are getting this error like this admin is not defined so if I go ahead and go to my admin component and if

I just use like what a comma and provide my admin right here sa my file I just going to complain like Huzan you have to register there inside your a info type so to do that I'm going to use like admin and provide a string right here so here you can see that it is now successfully gone But did you notice one thing we are now repeating ourself we are copying this type and we are now placing there right here here just because of this one admin and why are we doing that that's because this

admin is unique to this component we can totally use it right here so if I just copy there and now I can totally use my admin right here say my file that's totally done and because of this admin prop we are now copying the entire thing and we are now placing there right Here so if you don't want to use that so for that we are going to be using the reusable component inside the typescript so how are we going to be doing that to do that I'm going to go into my users info and

I will just provide the export right here so if I just provide this export so which means like I can totally use this type anywhere I want in any component I want okay so now if I go ahead and go to my admin component I can totally remove there and now I can Import my info right here so if I hit enter right here so it's going to import that from the user info I'm going to copy there and now let me just place it right here sa my file once again we are getting an

error for this admin so to fix that we have to find another type so I'll just use like admin info list and we are going to be using first of all the info like all of the props which are already available inside this info we also want to use all of them and we are Going to be providing an end and now we have to Define our new one so we also want to use the admin and admin will be a string okay so if I copy there and now let me just place it right

here come on let me just place it right here save my file and as you can see right here those errors are now successfully gone so this is how we going to be defining the type for our prop in one component we just have to export there this is how we are going to be importing there and now Later if you decide to add some more prop so this is how we are going to be attaching there by using this end operator okay now the final thing I want to show you is that you can

explicitly type A type right here which means like we are now telling our typescript compiler like this is going to be some sort of a type this is not a component this is not some sort of a data available inside other file these are types so now we are telling Our compiler like these are the types so it's going to treat it as a type okay so yeah that was the reusable component and next we're going to be learning about the used St types okay so now let's talk about how we are going to be

using a types for or used so to do that I'm going to create my components folder and I'm going to Define my counter. not jsx but TSX right here let's just use our rafc save my file and registered that counter ins inside my app so I'll just Use like counter and now let's just register there right here so if I save my file and as you can see we are now getting our counter which is looking amazing so the first thing that I want to do is that I want to Define my count so I'll

just use like const uh count and then set count will be equals to the us and we're going to be providing the initial value of zero today okay so it is not complaining but if you want to provide a type forward used it this is How we are going to be doing there so if I H my mouse over today and as you can see right here this is a generic function which means like we can provide more types at once and if you guys don't know what a generic function is or generics are so

you should definitely go ahead and watch my typescript course and there I explain generics in a more great detail so I'll just specify the type of number right here and here you can see we can specify the number we can specify The string we can provide like undefined we we can provide null if you want we can provide any kind of type so I'm going to just specify like number and this is how we're going to be defining a used St inside our typescript component okay so now we can totally use it we can do

like basically anything we want to do with this I'll just use like counter app and inside that we're going to be creating our count as a paragraph and I'm going to specify count as a value Underneath that we're going to be creating our button which will just say increment and also we are going to be creating a component and let me just duplicate that and change that to decrement and let's just provide a bit of the on click on there when somebody clicks on that so what we have to do in that situation we're going

to be using our set count in the first case we're going to be incrementing our counter by one and in the second case we're going To be decrementing our counter by one so now if I save my file and as you can see right here I can increment my counter and I can also decrement my counter so yeah this is how we're going to be providing a type for our user welcome to the user challenge with reactjs in typescript so the first thing that you have to do is that you have to define a state

variable by using the U state and type that explicitly so I will recommend you to create a counter component by Using the US and annotate there with a number okay so if you can even do this one you don't even have to do the first step to be honest now for the Second Step you have to create a user profile component and then inside that profile component you're going to be defining your state by using the US state which will hold the object with the user information and type it accordingly okay like basically you're going

to be creating some sort of object which will Have like the username Edge and some sort of location or something like that you can put like basically any kind of user information if you wanted to next you have to create a to-do list. TSX Define a state variable for the to-do list item and type that accordingly so give it your best shot if you can do it that's completely okay then come back and watch the solution and now let me just give you my solution so I'm going to create a user profile oh you know

We're not going to do that not right now first of all let me just show you uh the counter component so I'll just create like cons count and then set count come on set count like so and that's going to be equals to the used State and the initial value will be zero and now if you want to annotate there with the number so this is how we going to be doing there so we can also just write our H1 and here we're going to be defining our counter or count to be Precise and next

we have to create our button which will allows us to increment or counter so I'll write like on click and when somebody clicks on there we're going to be firing this function so I'll just use like cons increment function and inside this function we're going to be using the set count and let's just provide our previous uh yeah previous count would be fine and then previous count plus one so now if I save my file and I'm going to use my npm run Dev to Run there and here you can see we are now getting

our counter if I click on this it's going to just increment there by one so that was the easy part now we are going to be also creating our user component and we're going to be typing there so I'll use like user profile do not jsx but TSX in this case let me just use my RFC inside there go to the bottom and here we're going to be rendering or user profile component like so and this is how it will look like right here so What I'm going to do is that first of all I'm

going to Define my state so I'll just use Like Us St and here we're going to be passing an object and first of all I'm going to past like a name we're going to be also providing a edge of zero and the email will be set to empty string okay so I'll just annotate there with the interface or you can also create the type if you wanted to so I'll just create an interface and the interface name will be user profile or Yeah user profile state or something so I'll write a name which will be

a string I'll also write the edge which will be a number and also the email which will be a string okay so I'm going to copy this user profile you know what user profile uh state would be fine so I'm going to copy them and now let me put there right here or annotate there here like so and what I want to do is that I want to create my profile and also set profile it's going to be equals to this us next We have to use it so I'm going to remove this user profile

and I will just write like user profile inside the H2 and I'm going to also write the input field and inside this input field uh the type will be set to text and I'm going to also provide the placeholder of name today and the value will be set to profile. name and I'm going to also provide the on change event handler when somebody change something or type something inside this input Fields we're going to Be firing this function which will say like update name this is the function which we going to be creating in a

few second and it's going to take the event. target. value do value and it's going to past it for this function and you know what I'm going to just create this function right away so yeah I'll just do that right now I'll use like cons update name it's going to take the name and we will annotate there with the string and inside there we're going to be using a Set profile it's going to take the previous profile and here we just have to use like um first of all we have to copy our previous profile

come on previous p r e v i o u s or pre profile to be size and we're going to be also providing a new value too there okay so this is how we're going to be defining our update name and let me just see so if I just type something but I cannot submit there so that's why we cannot see there anyways you will get there in a Few second I'm going to also Define yet another input field so I'll use like input with the type of number in this case and here we're going

to be providing the placeholder of hge today I'm going to also provide the value and for this value we are going to be using like profile. is great greater than zero if that's the case we're going to be getting like profile. Edge but if that's not the case we're going to be setting there to empty string and also when Somebody change or type something inside there we're going to be firing this update Edge function update Ed function which we're going to be creating in a few second and I'm going to paste like event. target. value

inside there and now underneath this input field we're going to be defining yet another input field so I'll use like input and the type will be set to email we're going to be also passing the value and value will be coming from the profile. email and When somebody types something inside there we're going to be firing the event object and creating this update email function in a few second and I'll use like event. target. value finally we have to render or content I'll used like H3 and here we're going to be writing like profile summary

and underneath them we're going to be creating our paragraph and first of all let me just render my profile. name and I'm going to duplicate there like three time so we have a Profile. Edge and also profile. email okay so let's just change that to Edge and change this one to email and yeah I guess that's going to be fine but we also have to create this update Edge and also the update email so I'm going to just create there right here PA update Edge it's going to take Edge as a parameter and we will

just annotate that as a string okay so now inside there uh we are going to be using like set profile and here we have to provide our Previous profile and inside there we're going to be first of all cloning or previous come on previous profile and then we have to just provide a new value to them okay so we're going to be passing an edge and now we want that edge to be a number so we can convert this Edge to a number like so by using this number Constructor or we can just write a

plus so it's going also convert there to a number and now underneath them we're going to be also defining our Update email so I'll use like update email and it's going to take the email as a perimeter and there going to be a string so we also have to annotate them and I'm going to use like set profile and here we once again we have to provide our previous profile and then we're going to be making a clone of there by using dot dot dot previous profile come on p r o f i l e

and I'm going to also provide the new email to there okay So that was a lot of talking so let me just see here you can see we have our uh user profile we don't have nothing for the name for the edge we have like only zero and for the email we don't have anything so if I just write like my own name and it's going to add the right here for this name I can also change the age to like 22 and I can also provide the email like test gmail.com it's going to add

there right here so this is going to be my profile summary so that's done Now it's time to create or to-do list application so I'm going to go ahead and create my to-do uh. TSX or too come yeah today list. TSX would be fine I don't know what the hell am I thinking right now so let's oh my God you know what too would be fine so Tod do. TSX is fine and I'm going to write my rafc inside there and I'm going to go ahead and go to my app and register there right here

so let's just find what to do and register there and The first thing that I want to do is that I want to write like todos or yeah todos would be fine and then set todos and that's going to be equals to the US state and the initial value will be just empty array I'm going to also create an interface for that because because we're going to be creating our to-dos which will have a interface of to-do I'm going to provide the ID and ID will be a number I'm going to also provide the task

and the task will be a string and The completed will be set to Boolean and now let me get this to do interface and we have to annotate our state to there so let's just write where to do and here we have to inate there like so and now let me go to the UI and change this UI so I'll use like H2 to-do list and underneath there we're going to be creating a button which will say like add too like so and for this button when somebody clicks on there we're going to be firing

this function so let's just Use like um add too and we're going to be providing God damn it add Todo and we're going to be providing a new to-do inside there let me just create this function right away so I'll just create that right here and yeah I guess that's going to be fine so let's just create the add too and it's going to take a task as a perimeter and we will annotate that as a string okay so inside there first of all we are going to be creating a new to-do and I'm going

to also Annotate that with this to-do and here that's going to be equals to this object so it's going to take the ID and ID will be coming from to-dos do length + one so that's going to be just basically my ID and we're going to be also providing a task which we are taking as a perimeter and we're going to be providing there for this function and I'll also provide the completed and that's going to be set to false just like a I'm going to have to provide a commas instead of providing That whatever

that was let this is provide a set to-dos and finally we have to write a previous to-do or to yeah to-dos would be fine and here we have to just make a clone of previous to-dos so let's just WR our pre to-dos and I'm going to add my new to-do to there okay so let's just hide this one I'm going to put that at the top we're going to be rendering our to-do so I'll use like you and I'm going to iterate over through all of the to-dos by using the map it's Going to take

a to-do as a perimeter and inside then we're going to be using our Ali to render or each to-do so for each of the to-do I'm going to write like too. task and then I'm going to write like is it completed or not so I'm going to use like to-do do competed completed God damn it so just to do. completed if that's the case completed if that's the case we're going to be just writing like uh completed but if that's not the case so we are going to be setting there to Empty string okay and

I'll also provide a key so I'll just write like to do. ID as a key I'm save this file and finally let me go into my ab. TSX we already provided all of them so let's just test this out so here you can see we have our a to do I'm going to click on this so it's going to just add a new to-do anytime I click on that so yeah that was uh our example about the user and we learned a lot about how we can annotate or used so that was it about for

the Count example for the user profile example and also the to-do list example as well now we are going to be covering three topics at ones like use ref forms and events like how we are going to be providing up types for the US ref forms and also for the events so what I'm going to do is that I'm going to create my components folder and inside this component folder we're going to be providing our form. TSX and inside there I'm going to just use my RFC save my File and we also have to register

there inside our app component so I'll just use my form and if I hit enter so it's going to grab that from my components folder so what I'm going to do is St first of all I'm going to Define my state which will be like submitted and also set submitted data and we're going to be storing that inside the used St and for the initial value I'm going to specify the name and name will be set to empty String we're going to be also providing an email and email will be set to string and we

also have a password and password will be also empty string so now we can create a separate type for all of them to do that I'm going to be using a type and I'm going to give it the name of like form data and inside there we're going to be defining a name which will be a string I'm going to also provide the email which will be a string and also the password which will be also a String okay so I'm going to copy this data right here and now we have to annotate where used

state with this data I'm going to be using my form data and now let's just anot what used it with that data so now that's slly done next we're going to be also using the US rep so I'll just use like con name and we are going to be using a use RI for there and if I hit enter so it's going to aut to import there from the reactjs we don't need the reducer so let's say Bye-bye to that and the initial value will be set to null okay and I'm going to just duplicate

there a few times so I'm going to just change the variable name to like email and also to the password as well so now we have to specify a specific type for this us ref so we are going to be using this us ref inside our form and inside our specific HTML input element so we have to tell our user ref that we are going to be using this name email and password Inside the HT L input element okay so I'll just use like HTML input and if I hit enter and here you can see

we are going to be using our type on the HTML input element so I'm going to copy that from here let me just use that here and also here okay so this is how we're going to be providing a type for the US ref and now let's just use the inside our component so what I'm going to do is that I'm going to just uh remove this de and I'm going to change that with this Form I'll just remove this form from here and now I'm going to provide my input field and that input F

will take the type of text we're going to be also providing a placeholder which will say like enter your name and also I'm going to be defining my ref come on my ref and it's going to be referencing to this name okay so I can totally duplicate there a few times I'm going to just change that to email and also to the password as well okay so I'll also Change these to email and also this one to password as well so if I sa my file that's everything that we have to do for now but

I'm going to also create a button which will say uh submit okay and we're going to be also providing a type for there and the type will be set to submit now underneath that we want to show our data so I'm going to just write a section and now inside this section I'm going to write my H1 which will be set to name and first of all we have to Grab our submitted data and we're going to be using the dot name property on the okay so as you can see right here so we have

our submitted data and we have the name we also have the email and also the password if you want to see all of the data so I'm going to just duplicate there like a few time we have to change that to the email and also change this one to the password as well just like this I'll just change this one to the email and I'm going to also change this One to the password so if I save my file and that's everything that we have to do for the UI but now we're going to be

attaching our event on the form so when somebody submit that form like when somebody fill that form and submit there and if you want to provide our Arrow function right here like this we don't have to specify a type for the but if you want to extract all of that logic into a separate function so for that we have to specify some sort of a type for That so I'll just use like handle submit and I'm going to copy them and let's just create what handle submit right here okay so I'm going to be using

like cons handle submit it's going to take the event and as you can see right here we now getting this error so to fix this error we have to tell our typescript that we are using a form event like we are using a event on the form right here and we also have to tell it that we are going to be firing this function on the HTML form element like this one okay so we also have to tell it there I'm going to be using like HTML form element and now if I hit enter so

this is how we are going to be telling our compiler that we are going to be firing this event on the form event and then we're going to be using the on the HTML form element okay so I can just use like event. prevent default so it's going to just prevent our default behavior and now you can just grab like uh con name value like Whatever user type inside this input field right here like the name input field so what I'm going to do is that I'm going to just use like name and I'm going

to be getting a current property that's because of this name right here which is now set to this reference and now if I just use the dot value and what are we getting we are now getting an error if I how my mouse over to there it is now giving us like name do current is possibly null it is null not possibly Because we already set there to null so how can we fix this error to fix this error we can use the null insertion operator right here which we already covered in my typescript course

if you guys don't know about this so you can definitely watch my typescript course but if you guys already know that that's cool so basically we are now telling our compiler like you don't have to worry about this code like it can never be null and it can never be undefined we Are now telling this to our compiler like you don't have to worry about our code okay so now I'm going to just duplicate there like a few time maybe two times more and I'm going to change this VAR aable name to like a email

value and I'm going to also change this one to the password value as well okay so we can totally log that to the console or we can just submit that to our Dom so I'll just use like set submitted data and we are going to be Providing our object let's just provide a name and for the name we're going to be providing like a name value which is this variable right here I'm going to also provide a comma and let's just provide a email and that's going to be the email video and also for the

password we are going to be using the password value or password value rather so if I save my file now we no longer have any errors right here because we successfully type types or we Successfully provided a types for everything and now here you can see we are now getting this U so anything I type inside there like for instance if I specify my name of Huzan and my email will be test at G come on test and gmail.com and uh what is the password enter your email enter your email and enter your password there

we go so if I save that now I can write like uh my real password and now if I submit that here you can see oh we are getting Husan husan husan once again and I'm providing a test and my real password why is that oh that's because we're using a name again and again we have to change that to the email and also we have to change that to the pen transfer right here so if I save my file now and if I submit there now we are getting a name as husan email as

a test gmail.com and password my real password right here so if I just refresh there and let me type something something at gmail.com And something cool and now let me click on the submit and this is how we are going to be getting all of that data right here okay so this is how we are going to be providing a types for the prompt for the form and also for the event and also for the use ref create a file with the name of focus input. TSX inside the SRC directory and Define a component that

use a US ref to focus on the input field when the button is clicked type the ref appropriately so That's going to be the first part in the second part create a file with the name of contact form. TSX inside the SRC directory and then Define a form component with the type of state and form Handler after that create a file with the name of event handling. TSX inside the SRC directory and Define a component that demonstrate typing different event handlers so you your best shot if you can do it that's completely okay then come

back and watch The solution and now let me give you my solution so what I'm going to do is that I'm going to Define my focus input. ESX I'm going to use my RFC inside there go to my app first of all let's just say there and register my focus oh God damn it f o c u s oh my God f o c s if I can type it today so Focus input right here and now if I check this out so here you can can see we are now getting our Focus input which

is looking cool and what I'm going To do is that I'm going to be using the use ref which not reducer use ref which will be coming from the reactj and here we're going to be providing the initial value of null to them I'll store in the variable with the name of like input ref and that's going to be equals to this use ref and we will also annotate there with the HTML input element which will be coming from the definition file so if I hold control and click on there and here you can see

we can now get like all Of that um what do we call it that types from the types script so yeah that's the first thing now next we have to use this so I'll just write like input field with the type of text and I'm going to also write the ref and we will just reference that to the input ref let me Define my placeholder which will say like uh click the button to focus me like so and finally we are going to be also providing a button and when somebody clicks on that button you're

going to be Firing a function which will be a handle Focus uh yeah handle Focus would be fine and focus input will be the label now let me create this handle Focus right here underneath this input ref so I'll just use like con const handle focus and that's going to be an aror function we're going to be getting our input ref. current value and we are going to be only using the focus inside there so now let me save my file and check this out so anytime I click on this input field So it's going

to focus my input field and this is how we going to be anot creting there so that was the first step now for the next step we're going to be creating our contact form so contact form uh. TSX and here let's just use our RFC and register the right here so we have our contact form and register the and sa there so what I'm going to do is that first of all I'm going to use my Us St and here we're going to be providing our object and inside this object we Will have our name

and also we would have our email email like so and we're going to be destructuring the form data and also set form data it's going to be equals to this used dat now for this form data we are going to be annotating there with the interface so now let me just create an interface for there so we're not going to be doing anything crazy you can either create a type if you want it to put in my case I'm going to create an interface with the name of Like contact form St and basically you can

give it like any name that you prefer and I'm going to write a name and annotate there with the string and email and annotate them come on email with the email and otate with the string as well so I'm going to copy there and I'm going to annotate my U state with this contact form state right here so what I'm going to do is that I'm going to just remove this div and I'm going to replace that with the Form and I'm going to also replace this other one to the form as well so let's

just create our div inside this div we're going to be creating our label remove this HTML 4 from there and I'm going to also provide my name inside there first of all we are going to be register string the input field and this input field will have the type of text name will be set to name and we're going to be also providing a value and that value will be coming from the form data. Name okay so we're going to be also providing the own change event handler and when somebody types something inside there so

we're going to be fting this handle change event now let me duplicate this uh d right here for the email so I just duplicate there and change there to email and also change this text to email and we're going be also changing the name to the email as well okay so change the name to the email and in this case we're going to be still providing this Handle change and underneath this div we're going to be creating our button which will say like submit and for this button we're going to be providing the type of

submit to there okay like so and now finally we have to just create our handle change function inside this component so I'll use like con handle change it's going to take the event object and we're going to be annotating there by using the change event so let's just write our change event and here for This change event we're going to be using the on the HTML input field so we also have to explicitly specify that HTML input field as well okay so from the event. target we're going to be destructuring the name and also the

value so now let me just destructure the name and also the value out of this event. target okay so here we're going to be using like set form data and let's just provide our previous state today and once again we are going to be making A clown of our prev previous state and here we're going to be defining a name and then we have to provide a newer value which we are now getting from this event. target right here okay so now I'm going to save that and that's going to be it for our handle

change next we also have to Define our on submit function so whenever our form is submitted so we're going to be firing our handle submit function I'm going to copy there and create my handle submit right here Provide our event and we will annotate there with the form event and here we also have to tell it that we are going to be using there on the HTML form element HTML f o RM and then element like so okay so here we have to use our Arrow function we're going to be preventing the default behavior and

also underneath that we have to just loog to the console or form data and here uh we are going to be using some sort of a label like form submitted like so okay That was a lot of talking and yeah you know what let me just test this out so here you can see we have our name and email for the name I'm going to specify my own name for the email I'll just write like test gmail.com and now if I click on this submit and open my console so it's going to gives us all

of the data right here but we are getting some sort of error I type hen and test gmail.com and click on there now we are getting our form submitted and also our Email and our name data so which means like everything is working the way we expect him to work and this is how we are going to be providing an annotation or typescript for our event object and this is how we're going to be providing the or this is how we're going to be creating an interface forward State now let me create the final component

which will be for the event handling so we're going to be using like event handling. DSX I'm going to use my RFC inside there Go to my app and registered that component right here so event handling and I'm going to just call this component check this out and we have our EV event handling which is looking amazing the first thing that I want to do is that I want to create my H2 which will say like uh event handling example and now underneath that I'll just create a button and that button will say like click

me and here we also have to provide the own click and Handler and When somebody C clicks on the handle click so in that situation we're going to be just firing this function like handle click and we're going to be also creating an event for this one so like when somebody Mouse enter so in this situation we're going to be firing this function like handle Mouse enter okay so what I'm going to do is that I'm going to Define both of these function so first of all let's just Define this handle click one then we're

going to be Defining this handle Mouse enter okay so I'm going to copy there and create my handle click it's going to take the event object and we're going to be annotating there with the mouse event and we also have to explicitly tell it that we are going to be firing that event on the HTML button element like so and here inside there we're going to be logg to the console like event. current come on c c u r n current Target and also we have to just provide some sort Of a level like button

click or something like that I'm going to sve my file and we are getting some sort of error oh that's because we have to write a react dot so I'm going to use react and hit enter so is going to grab this react react from the reactjs that's the first thing now we also have to Define this function so what I'm going to do is that I'm going to Define there right here so const handle Mouse enter it's going to also take the event object and We're going to be annotating there by using react. Mouse

and mouse event and then we're going to be telling it that we're going to be firing there on the HTML Dev element okay so I'm going to also provide uh what do we call it cons. log and here we're going to be using like e do current Target right here and I'm going to also provide some sort of a label which will say like Mouse entered or something now let me save there and test this out and here you can see we Have our uh label and we also have our button let me just refresh

there and whenever I H my mouse over to there so it's going to gives us that Mouse enter and it's going to also gives us you know let me just show you it's going to also gives us that specific div so now inside this div we have our event handling example and also our button and now if I H my mouse over to this click me it's going to also gives us like Mouse enter it's going to give us that data so yeah That was example or that was a challenge for the let me just

show you the focus input contact form and also the event handling now let's talk about how we are going to be using a typescript with context API so to do that I'm going to create a folder with the name of context and now inside this folder I'll just create like my context. TSX and now inside there first of all we're going to have to import our create context from reactjs and now the next thing that we Have to do is that we have to create an instance of the so I'll use my export and then

cons my context and that's going to be equals to the create context so we're going to be creating an instance of there and now for the initial value I'm going to provide a count and count will be equal to zero and we're going to be also creating a increment function which will just return nothing for now and then we are going to be also creating one more Function for the decrement okay so I'm going to save this file and now if you want to add a types script forward context so this is how we going

to be doing there you can either create a type or you can also create an interface if you wanted to so I'll just create my interface right here and I'm going to give it the name of like my context props and now inside there we have a count which will be a number and we also have a increment function and from this Increment function we are going to be only returning the wide like nothing for now then we are going to be also creating one for the decrement so now let me just duplicate there and

create our decrement function and now if you want to add there so I'll just write my less than sign and then I'll write like my context prop and I'm going to close that at this way okay so this is how we going to be defining our context and now let's talk about how we are going to be Creating our provider so to create our provider I'm going to just write like cons my provider come on my provider there we go it's going to take a children as a prop and then inside there we are going

to be using like const and then count and then set count this is going to be the state which you want to pass into our component so we are going to be using Like Us St and the initial value will be set to zero so it is now taking a children so we have to provide A type for there as well so I'll just use like my FC like my functional component which will be coming from the Rea and then we have to provide uh or prop right here so this is how we're going to

be creating the I'll use my interface and then my provider yeah that's that's going to be fine we're going to importing a children and that's going to be coming from the react node and if I hit enter so it's going to Auto Import there right here okay so now I'm Going to take that and I'm going to put that right here sem my file and now it's going to gives us an error because we have to use it now first of all let me just export this so that we can use it in other file

so I'll use like export default and then my provider come on my provider likes so save my file and now inside this my provider I'm going to just return first of all my my context and come on what the hell am I doing and then I'm going to use the provider Method on there okay so I'll just close there inside this provider I'm going to have to P some sort of data so I'll use like value and for the value we are going to be passing a count which we've already defined right here and now

let me just use my increment and decrement function so I'll use like increment and now inside this increment we're not going to be doing anything crazy but I just use like set count and then count + one and I'm going to also create one More function for the decrement as well so I'll use like decrement right here and I'm going to decrement my value right here I'll just write a minus and I'm going to also copy both of them and place there right here along with the count so I'll just Place their increment and I'm

going to also copy the decrement and I'm going to place the okay so if I save my file and here you can see all of the errors are now gone and obviously we have to use this children inside our jsx So I'll just word there right here like so so if I save my file and this is how we are going to be providing a type for our context now I'm going to go into my main component and we have to use that right here so the first thing that I want to do is that

I want to grab my provider right here I'm going to copy that from there and let's just use there on all of the entire app okay so I'm going to put the here sa my file and this is how we are going to be Successfully adding there but now I'll just create a counter component I'll write like component and then counter. TSX would fine I'm going to use my rafc semi file go into my app component and let's just register that counter right here so that we can see what's going on okay so I'm going

to just register my counter component right here and now we have to use our context inside this counter component so to do that first of all we are going to be importing the use Context from the reactjs and then we are going to be also importing our own context like my context okay from the context folder and now to use that the first thing that I want to do is that I want to write my FC so I'll just use like FC for the functional component and I guess that's going to be fine and inside

there I will use my use context I'm going to provide my own context today like my context and we are going to be destructuring a lot of things from It so like uh I need the count and also the increment function and also the decrement function from my context or my use context so now inside there let's just use the inside our component I'm going to remove this D from here and provide my paragraph and provide the count and the initial value for this count will be set to that count which is coming from our

context we're going to be also creating a button which will say like increment come on increment and Also this is create one for the decrement and attach event handler on both of these button the first one will take the increment and the second will take the decrement so now if I save my file and here you can see you're now getting our count if I click on this it's going to increment my counter and if I click on this one so it's going to decrement my counter right here by one so yeah this is how

we are going to be providing a typescript forward context Now let's talk about how we are going to be providing a type for our use reducer so I'll just create a components folder and inside that we're going to be creating our counter. TSX and I'm going to use my rafc so that I can see something on the screen and here you're going to be registering our counter component so if I save my file and check this out so here you can see we now getting our counter which is looking amazing now inside this counter Component

the first thing that I want to do is that I want to import the use reducer from the reactjs and then we have to use the inside work counter component so I'll use like use reducer is going to take the reducer function and and also the initial stat so we're going to be providing like count and count will be set to zero okay so we are going to be destructuring our state and dispatch functions so I'll just use like State and also the dispatch and now that We have to create our reducer and also we

have to provide a type for this St okay so what I'm going to do is that I'm going to just create my reducer function right here I'll just give it the name of like redu it's going to take the Strate and also the action and now in this function we're going to be using our switch and cases one more time and first of all we are going to be providing if the action. type come on let me just write a type is set to increment i n c r E m e n there we go

so in this situation we are going to be only returning the count and count is going to be coming from the state. count + one and if that's not the case and the case is decrement so in this situation what we have to do we have to once again return work count and count will be coming from the state. count minus one okay and also if that's not the case so for the default value we're going to be providing our start right here I'm going To remove that and here you can see we now getting

an error like what is a start and what is a action so to do that we're going to have to provide a type for that so now I'm going to just create a type right here with the name of action or actions I guess action would be fine because we going to be doing only one action and I'm going to provide the property of type to that and that type can be either increment or that type can be come on let me just write Type can be set to decrement as we've already specified there right

here like either increment or decrement so now we have to use that right here for this action so I'm going to just anate there with this action the next thing that we have to do is we have to take care of the state so we're going to be also creating a type for the state as well so I'll use like type and then let's just use a state and now inside there we are going to be specifying a count and count Is now set to number and we have to take this state we have to

provide there right here and we are going to be also returning a count property from there so we can also inate this entire function as a state okay so this is what we have to do first of all we have to create an action type and we have to specify therefore for the actions then we have to create a state type and we have to specify there for the state okay so this is what we have to do for this reducer Function and now let's just use the state and also this dispatch function inside this

UI so to use that I'm going to be using a paragraph and I'll just for a count and that count will be coming from the st. count and now underneath that we're going to be creating a button which will just say like increment and also we're going to be creating one for the decrement EC m n there we go I'm going to provide on click event handler on both of them Which will just fire this dispatch function let's just fire this dispatch function and we're going to be providing the type of increment for the first

one and decrement for the second one so let's just use our decrement there we go and now if I save my file and everything should work the way we expect him to work so if I click on this button it will now increment our counter and if I click on this button is going to decrement our counter okay so yeah this Is how we're going to be providing a typ for our use reducer this is a lot of instructions so basically you're going to be creating a counter by using the used reducer and you're going

to be also providing the appropriate types to this so give it your best shot if you can do it that's completely okay then come back and watch the solution and I'm going to give you my solution so here first of all I'm going to just create like a folder with the name of reducers and Inside there we're going to be defining our counter reducer dots and here we're going to be just defining our reducer so I'll use like counter reducer and it's going to take the state and it's going to also take the action and

here inside there we're going to be using our switch and cases not like that but switch and cases like so so for the switch we're going to be defining our action. type typ with the E and for the first case we going to be providing an increment to There okay so if that is set to increment we're going to be returning the count in count will be coming from the state. count + one we're going to be only incrementing there but if the case is set to decrement so I'll use like decrement d e c

r e m e n t decrement so we're going to be returning the count and let's just get there from the state. count and let's just write a minus one because we're going to be decrementing there after that let's just remove there After that we're going to be also providing a default state to it so for the default we are going to be only returning our state now that's totally done but we also have to provide a type for the state and also for the action and we're going to be doing that totally separately I'll

write a type with the name of counter State and here we're going to be only writing like count and count will be set to a number we can also make that as a one liner we don't Have to split the in multiple line we can also write a type for the increment action which will also take the type and the type will be set to increment so let me just write an increment or you know what let me just copy that from here in a lot of time I misspell things so now let me just

duplicate there and I'm going to change that to the decrement so I'm going to copy and place there and also inste of writing an increment counter I'm going to change that to De Come on e e c r e m n decrement action now let me make the as a one type so I'll use like type and make that as a counter action and that's going to be equals to the increment action or the decrement action like so and finally I'm going to also export this so that we can use that in other file two

I'm going to also export this counter so I'll just use like export right here and finally we're going to be also exporting the first one so now let me just use export For this one as well now it's time to annotate our state with our counter State and also our action with our counter action like so so now that's to done now let me go ahead and create my counter. jsx or TSX component I'll use like counter. TSX inside there I'm going to use my RFC sem my file go to my app and register that

component right here inside my app the first thing that I want to do is that I want to grab my use reducer so I'll use like use reducer From the reactjs you would also need to grab our counter reducer and also the counter start from where from our counter reducer so now underneath that we have to Define our initial State for the initial I in I initial State we are going to be annotating there with the counter State and that counter state is coming from this use reducer which we've already defined like count is now

set to number that's going to be equals to the count And count will be equals to zero then St it done now we have to use our use reducer to get our dispatch function and also our initial St all use like use reducer and here we're going to be passing our counter reducer and then the initial State inside there let me destructure my state and also uh the dispatch out of that use reducer and now I'm going to create the UI for there like not a magical UI but a very simple UI like count and

here we are going to Be only using our st. count to see our counter we're going to be also creating a button the first one will just increment our counter and the second one will be decrementing our counter so I'm going to provide the on click and Handler on both of them so the first one will increment our count not interface but increment i n c r e m n t and the second one will be decrementing our counter okay so now let me just go ahead and Create the increment and also the decrement counters

increment and that's going to be an aror function and this aror function will just dispatch and here we have to specify that now the final thing that we are going to be learning in this section is that how we are going to be providing a type for the use effect okay so to do that I'm going to first of all create my components folder and I'll just with the name of like my component. TSX inside There let's just use our rafc sa my file go to my app and use that my component right here I'm

going to call this semi file and check this out so here you can see we have our my component which is looking amazing so the first thing that we have to do is that we have to grab our use St because we would need some sort of a state to store our data and we would also need the use effect as well okay so now we going to be using the inside our component so this is how We're going to be doing there first of all we're going to be creating our data and then set

data and that's going to be equals to the use St and we are going to be providing the initial value of null to it I will also annotate as a null value now that we have to fetch our data so to fetch our data you already know how we are going to be fetching our data so we are going to be using the use effect Right Here and Now inside that we're going to be passing the call back Function and also our empty dependency array now the first thing that I want to do is that

I want to use my fet data function that's going to be coming from this as syn function like so and inside there we're going to be using our try and catch block and if we have some sort of error so in that situation we're going to be using like console. error and let's just use like error fetching data okay and we will also specify our error right here and if that's not the Case so for the tri block we are going to be getting our data by using the fetch method and we are going to

be getting our data from this API which is Json placeholder.png first product okay so we have to also change there or convert our response to Json and we have to store there in some sort of variable like so and I'm going to also set the data to I mean like set the result to our set data so this is how we going to be fetching Our data and now let's just execute this function so that we can successfully fish this data so if I save my file and now if I click on this it's going

to show us all of their stuff right here like it's going to give us the ID the title and also the description and we have a few more things like discount percentage and so on and so forth so for all of that data we going to be creating a product type okay so to do there I'm going to be using like first of all we Have to go ahead and create our type right here so I'm not going to waste a lot of your time but we will just create this type right here so first

of all we have a product type it's going to have the ID title description price discount percentage rating stock brand category thumbnail and images okay so these are all of the data that we are going to be using in inside your app so that's why we now successfully created a type for there so we can now annotate our St by Using that type so I'll just put a type or null and now that's done the next thing that I want to do is that I wanted to render all of the data right here inside my

UI so to render that first of all we are going to be checking like if you already have the data or not so if you have the data in this situation we are going to be rendering our data but if you don't have the data we going to be using a paragraph come on let's just use our paragraph and inside this Paragraph you will select dot dot dot okay and I'm going to also close my paragraph right here okay so if we have the data so in this situation what do I have to do I'm

going to create here another div and now inside this div we're going to be rendering all of our content so I'll just use like paragraph and this paragraph will have the ID and we will use like data. ID basically you can also render your data or destructure your data right here if you wanted to But I'm not going to I'm going to fast forward the video because this is just a UI stuff and we can totally do that a bit quickly so I'll just use like data. title now if I save my file and check

this out so here you can see we have our ID we have the title price the discount and so on and so forth and we also have our thumbnail right here so which I can copy and place it here it's going to gives us the thumbnail of our product so if you want to go into like another Product so we can just choose like second one s file and refresh this so now it's going to give us the updated data I can totally copy that I can totally render there if I wanted to but you

know what I guess that's going to look better so yeah this is how we're going to be providing a type or this is how we going to be creating a type for or use effect so now we are going to be using a TN CSS inside your reactjs project so if you guys don't know what a TN CSS is I have a complete course on there which is about like almost 4 Hour of content plus you're going to be also building three amazing responsive projects so if you care about learning T in CSS I promise

this is going to be the best course for you so now let's get into it like how we going to be using T and CSS inside our reactjs project so to do that first of all I'm going to just click on this getting started button then I'm going to go into the framework Guides now we going to be choosing we and if you want to choose some other framework you more than welcome to use that I'm going to just choose whe right here so the first thing that we have to do is that we have

to create our we project so I'm going to copy there from here and I'm going to open my terminal right here I'll just right click on this so it's going to place my command right here first of all we are going to be using like npx create we project and I'm Going to just give it the name of like my project and we're going to be using the reactjs template so now want to go into their project by using a CD command now I'm inside their project I'm going to use like npmi let's just use

npmi it's going to install all of their packages by which your reactjs is depends on right here while it's doing its thing I'm going to also copy there so it's going to install a few things like T CSS post CSS and also Auto Prefixer it's going to also initialize our tailin CSS inside our project okay so now that's successfully done I'm going to just copy that once again and now let me place it right here and find we have to initialize our tman CSS inside their project by just using npx tman CSS in it D

piece so I'm going to just hit so it's going to initialize my tailin CSS right here and I'm going to open that by using my vs code so now inside there we have to go into our Tailin config.js file so I'll just copy it and place it right here so now we are inside this Stalin config.js file so we have to replace this content with this one word here okay so we only want to provide our index.html file which is inside SRC file file and we want to select like all of these extension right here

okay we just have to replace and also we have to go into our index.css file I'm going to copy that from here and now let me just go into my index. CSS file I'm going to select every single thing and replace that with this these three directives right here now finally I'm going to copy this H1 and I'm going to go into my app not app. CSS but app.jsx and I'm going to remove every single thing from there I'll just use my RFC and replace their D with this H1 so I'm going to sem file

now let me use my npm run Dev so to start my server so here you can see we now getting the styling so now what I'm going to do is That I'm going to go into the components then I'm going to go to the browse component and now I'm going to just choose this component right here okay so we can totally copy the HTML code I'm going to just select a few things like maybe I'm going to just select this D right here and copy there because I just want to test my code so I'll

just remove that from here place this DS right here save my file check this out refresh there And we're not getting anything oh that's because we are using a class instead of class name so we have to select all of them and change that to the class name instead so if I save my file and now refresh that and it has the class of headden so I'm going to just remove there save my file and here you can see we now getting these kind of a component they are not looking that great but yeah trust

me you can do a lot of crazy stuff with tman cses and I have a complete Course on there and if you want to check that out here it is okay so yeah this is how we going to be using a tan CSS inside our projects okay so time for another challenge and I guess that's going to be the final challenge for our react jsn typescript Series so what you have to do is that you have to F your data from this Json placeholder type a code and this endpoint will give you a lot of

users so it's going to give you the user data structure like this you're Going to have the ID an ID will be a number then we will have a name name will be a string username will be a string email will be a string and phone will be also a string so use the use effect to fish the data use the use state to store that data and then finally just renter in some sort of a table or something like that so give it your best shot if you can do it that's completely okay then

come back and watch the solution and here is my solution so I'm going to just create my what the hell user list. TSX and I'm going to use my rafc S my file go to my app and render there right here like user list like so okay so the first thing that I want to do is that I want to create a few stats so we are going to be creating a state for the users like so and also the set users it's going to be equals to the use State and the initial value will

be set to empty array okay so let's just create an interface for this array I'm Going to place this interface right here so we have our user and we have the ID which will be set to number and the rest of the stuff will be set to string so we're going to be annotating our state by using this user and we have to provide our array inside there like so and we have to close there now underneath that we have to use our lowering and then set lowering and it's going to be equals to the

use State and the initial value will be set to true And we also have to annotate there as a Boolean because we are storing the value of Boolean inside there now finally we also have to create one for the error and that's going to be set to the set error and we have to use our use St one more time and the initial value will be set to no okay so I'll annotate there like it's going to be either a string or null okay and we have to close this so then it's going to be

at forward state now we have to fetch our data by using The use effect so I'm going to be using like use effect and here we have to specify our callback function and for this callback function we're going to be providing our empty dependency array and we're going to be also creating a function which allows us to fish the users like so and this going to be an as synchronous function and inside this function we're going to be using our try and catch blocks for the catch we'll be using like set error and we have

to Provide where error and instance of come on that error will be the instance of of error if that's the case we're going to be getting like error do message out of there but if that's not the case we're going to be just saying like an error occurred like so we're going to be also providing the final St finally and for the finally we're going to be setting the loading to false okay and now let me take care of the tri block so for the tri block first of all we're going to be Fetching our

data by using the fetch API and I'm going to specify this URL inside there and let me just thr in some sort of VAR varable like response response like so and I'm going to also check if we don't have the response if the response is not okay so in this situation we are going to be throwing a new error which will say like Network response was not okay and if that's not the case we're going to be getting our data so I'll use like con data and we're Going to be annotating there by using our

user like so and it's going to be coming from the AIT and then response. Json and we have to convert our data to the Json response we also have to push our data to our user so we're going to be using like set users and let's just push our data inside there so now that's to done so I'm going to hide or you know what we also have to call this function inside there like so and now we have to hide this use effect now I'm going to be Checking so if loading so in this

situation we're going to be returning or lower so I'll just write like da or I can also write H1 which will say like low dot do Dot and we can also duplicate that and change that to the error so I'll just change that to the error like so so I'm going to also render my error inside there and here we have to just write error so if you have some sort of an error we're going to be displaying there now for the UI I'm going to remove This user list from here and I'm going to

have to change that to the table and also change this div to the table and inside this table we're going to be defining our T head okay and inside this T head we have to Define our TR ins inside this TR we're going to be defining our th with the name let me just duplicate there a few time we also have to write a username and we also have to write the email and finally we have to write the phone come on phone Like so and underneath this D head we have to write our T

body and inside this T body we are going to be itating over through all of the users by using this map it's going to take the user as a yeah as a perimeter and here we have to specify our TR and for this TR we're going to be also providing a key which will be a user. ID and here we also have to use our TD to render our element so use like user.name and also I'm going to just duplicate that a few times change That to the name yeah you know what that was the

user ID and this is going to be the name and we also have to change there to the username and change this one to the email and finally change this one to the phone now let me S my file and check this out so here you can see we are now getting the name it should be the name we also have to provide the ID so let's just duplicate that change that to ID now we are get so now let's talk about the da UI so What is a DA UI and how are we going

to be using there with reactjs as you can see right here on their landing page they are saying like Desi is the most popular component Library for tman CSS if you guys already know what a tman CSS is you will love thisi so you can choose different themes if you want it to like dark and we have a cupcake and so on and so forth theme okay so in my case I'm going to only choose this dark theme right here and inside their landing page You can learn more about there like instead of writing all

of these tman CSS classes you no longer have to write all of these tman CSS classes now you can use D UI to only write a few classes it will give you the same result right here okay so you can choose different kind of themes you can choose a lot of things inside the D UI and if you guys want me to make a separate course on deui I can totally do that or maybe a crash course and I want you to notice this animation These are the themes that you can choose from the dayi

and if you want to learn there as I said you can either learn it from their documentation or if you want me to make a separate course on there I can totally make a course on there but now let's talk about how we are going to be using them to use the we only have to run this Command right here and also just right there but first of all we have to make a tailan CSS setup so I'm going to go into the tailan CSS right Here and I'm going to go to my framework guides

one more time then I'll choose the weat and I'm going to copy them then I will open my terminal right here I'm going to place this command but I'm going to also change the name of that to like something else DUI would be fine and I'm going to hit enter right now then I'm going to go into my DUI component and now I'm going to just use npmi to install all of the packages now I'm going to open that in my vs code and Then I'm going to install all of that other packages and stuffs

so now it's time to install Desi inside our project so I'm going to copy that and now let me just open my terminal right here and let me just place this command which is npmi and then da UI at L so it's going to install dii inside our project so now that's successfully done now I'm going to select the esm and I'm going to copy this Command right here first of all you know let me just copy the import and Then we will go into the tailin config.js file which is this tailin come on where

in the what is okay so I'll just use oh I forgot to install my tailin CSS I install this one but I forgot to install my tailin CSS so I'm going to copy there and now let me run this Command right here so it's going to install and configure my T CSS inside my project let me just hit enter so it's going to initialize my tailin CSS right here now that's successfully done and we Also have to copy there we have to go into our tailin config place it right here save my file and we

also have to copy this these go to our index. CSS file and replace it with this component and yeah we are totally done with the TN CSS but we also have to copy there now we have to go into our tailin config.js file which is this file and I'm going to just place it right here and also let me just copy this T UI we have to go inside the plugins and just place it right here And now we have to use some sort of a component so I'll just go ahead and go to the

components and in this case I'm going to go to the buttons and I'll just copy the code for there so maybe I'm going to go to this one and copy the GSX code from there let's just copy there I'm going to go into my SRC folder then my app component folder so I'll just replace it with my RFC and remove this div or you know what we're going to be just removing the app and I'm going to Just place all of my code right here so if I save my file now let me run my

npm run Dev so it's going to run that right here and here you can see we are now getting all of these buttons like just a simple button and we have a neutral primary secondary asent and ghost and so on and so forth but right here we can go ahead and do lots of stuff right here like we can get the model if you wanted to we can get the accordians if you wanted to we can do all lot sort of Stuff like if I click on there we can get this model so I'm going

to just copy all of these code and now let me just replace that with this code right here so if I save my file now if I go there click on there we are now getting our model so yeah this is how we going to be using a d UI inside our reactjs projects now let's use another component Library which is called redex inside our reactjs project so here you can see redex is an open source component Library optimize For fast development easy maintenance and accessibility just import and go on so here are the live

demos so these are the amount of things that you can do by using the RX uh component Library so these are just the themes we can also go to The Primitives we can check out the icons we can also go to the colors and there are a lot of stuff going on so I'm going to go into my redex one more time and now to install there the first thing that we have to do is that we have to Make a reactjs setup and now let me show you how we're going to be doing this

so I'll just open my terminal word here and I'm going to write npm create weed and latest and if I hit enter so it's going to ask me for the name I'm going to give it the name of like redex um project or demo would be fine I'll just give it the name of like redex demo I'm going to choose reactjs as a framework and JavaScript I'm going to go into the redex and I'm going to open the My vs code let me open my integrated terminal and I'm going to use npmi to install all

of my packages so now while it's doing there I'm going to click on this getting start button and here you can see this how we going to be installing there so we just have to copy this command I'm going to copy this Command right here and now they successfully done so I'm going to just past this command here and hit enter okay so while it's doing that I'm going To go into my Global main component and I'm going to just place this Command right here so I'm going to copy there now it is doing its

thing and now they successfully so I'll go into my main component and inside this main component I'm going to also import the Red X right here so I'll just save there next we have to go into our main component and we have to use our theme context so I'm going to copy that from here and now I'm going to also import that right here Okay so let's just import that I'm going to wrap my entire application by using this theme context like so okay so let's just close there hit enter and wrap my entire application

by using this context if I just remove there next we have to use the in sort of a component so I'll just copy this component from here and I'm going to go into my app component and I'll just remove every single thing from there and I'm going to use my RFC or you know what let me just place this Component right here cut that from here use that right here I'm going to use my app copy them and just change the name of my function to app so if I save my file and now I'm

going to use npm run Dev to start my server and here you can see we are getting this result right here which is saying like hello from the RX theme and I guess we are not getting that much cool result this because we are now getting these stuff right here so I'm going to remove every single Thing from the app.css and now let me just refresh them I'm going to also riew every single thing from the index.css as well and now if I just refresh this hello from the redx themes and let's go okay so

this is how we going to be using a redex inside your reactjs project now let's talk about the copy pasta component Library which is called the shars and UI and shars and UI is by far the most popular and the most our full front end UI Library so to install them And I'm thinking about making a course on there but anyways there other story so to install them I'm going to just click on this getting started button right here then I'm going to go into this installation and I'm going to just choose we right here

and first of all we have to make a setup so I'm going to copy that from here open my terminal one more time now inside this terminal I'm going to place this command and hit enter I'm going to give it the name of Like uh Shar CN demos and now I'm going to just choose reactjs and typescript now I'm going to go into my Shar and demos and come on CD and then Shar CN demos and now let me just open there right here and I'm going to open my terminal one more time and use

npmi to install every single package the next thing that we have to do is that we have to install tailin CSS inside our project so I'm going to copy that and now we have to use that right here okay so That's done now let me place this Command right here so it's going to take a bit of time to install tmin CSS post CSS and an auto prefixer and also so it's going to initialize my T CSS right here which is amazing so next thing that we have to do is that we have to go

into the TS config file and I'm going to copy there let's just go ahead and go to the TS config so I'll just provide a comma here now let me just place my compiler options and now let me just save there And close there next we have to go into our TS config.js file so I'll just write there hit enter and now inside there we only have to provide this base URI and also this path so I'm going to copy that from there and nor need this skip l check I'm going to just place my

command word here and now finally we have to install the typescript type so I'm going to copy there and we also have to install them right here inside uh our project the next thing that we have to Do is that we have to place all of them into our we. config.ini where sh and UI so I'm going to copy there now let me open my terminal and place this command which is Shar send UI and initialize there and we are getting some sort of error no till CSS configuration found at this location it is likely

you don't have t CSS installed or have a invalid configuration so how is that even possible we set up every single oh there We go so we have to go into the not Sharon but tail wi CSS tailwind css.com and here I'm going to have to copy this content and place it right here sa my file and we also have to copy these components and we have to go into the index. CSS file and place the here semi file and now it will work okay so if I just rerun there and now it's going to

initialize my tment CSS right here I'm going to just choose this New York neutral will be fine for the color and We are not going to be using CSS variables but I'm going to just set that to yes everything will work just fine okay so now that successfully done finally we have to install something from the shets and UI so I'm going to go ahead and install some sort of a component I'm going to go into maybe button so this is how the shet and UI works it will give you a lot of component to

choose from and let's suppose you choose like button first of All you have to install that in your project and then you will be able to use this so in this case I'm going to install my button right here so I'm going to copy there and first of all we have to install there and here you will see a components folder right here and here you can see we have a components folder inside this component folder we have a UI folder and inside there we have our button right here we're not going to be playing

around with these Buttons but we are going to be just using them and how are we going to be using them let me show you how we can use there I'm going to go into my app. TSX and I'm going to remove every single thing from there and I'm going to just use my RFC and now I want to use that button okaye so I'll just use like button right here and here you can see we have this location like component UI and button now if I hit any right here and now we can just

write like whatever I want to write like uh learn more and now if I say my file run our server by using npm run Dev copy that place it right here and here you can see we are now getting our button right here which is amazing but that was a huge setup to make okay so we can get like the card we can get like uh come on a cordan we can get like a lot of stuff so what I'm going to do is that I'm going to just create my card right here so I'm

going to copy them and run that first of all Let me just terminate there and install my card inside my project so it's going to install that card right here then successfully done now I'm going to go in there and copy all of that content and I'm going to just copy all of that code right here now inside there we just have to use there okay so if I just place this coding right here you're now getting a lot of stuff but in this situation I only want to get there so I will cut that

from here and remove all Of that stuff from here and we need all of these Imports so instead of providing this button I'm going to only provide all of their stuff so if I sem my file we getting an input and also the labels we also have to inst install there okay so we're getting a button twice we don't need reactjs and we're now getting this ER like we have to install the input label and also the select so I'm going to go ahead and add there so to add there we are going to be

using that same Command but we only have to change the component name like instead of providing a card I'm going to write like input I'm going to also provide the label and also finally we have to add the select okay if I hit ENT right here so it's can install the inside my project and now that successfully installed and if I cut this file and open there once again here you can see those errors are now successfully gone okay so this is how it will look like but now I'm going to use My npm run

Dev and if I just refresh there and here you can see we are now getting our form so we have our input field we have also a select statement right here so yeah this is how we're going to be using a shetsen UI inside your react GS project so now let's learn about the react hook form Library which will allows us to provide easy to use validation forward form okay so I'm going to click on this getting started button and here you can see this is how We going to be installing there and this is

how we are going to be using there so what I'm going to do is that first of all I'm going to make a setup so I'm going to open my terminal right here and I'm going to be using npm Create weed and latest and I'm going to give it the name of like react hook form um demo would be fine and I'll choose reactjs and also typescript let me go into my react Hub form and I'm going to use npmi to install all of the Packages so that's successfully done I'm going to open there in

my vs code by using a code dot so it's going to open there right here I'm going to open my terminal and install the react hook form package from here so we just have to write npm install or I and then we have for react hook form and I'm going to hit enter so it's can install that in my project so here you can see that's done now let me just close there and I'm going to be using npm rund to run our Server I also made a cleanup so now it's time to focus on

the re hook form so I'm going to create a folder with the name of components and inside there I'm going to create my form. TSX component right here I'm going to use my RFC and registered that in my app okay so first of all we have to just use like form and we have to import that from the components folder so now I'm going to save that and this is how it looks like right here which is looking amazing so Now the next thing that we have to do is that we have to grab or

use form from where we're going to be grabbing there from the react hook form going to be getting all of our magic like form validation form handling and also the errors from this hook that is why we call it as a react hook form okay so we have to also execute there right here and now from this use form hook we are going to be restructuring a few things first of all we are going to be Destructuring the register we would also need to destructure the handle submit and also the form State and from this

form State we're going to be also Ned D structuring the errors and also the is submitting uh is submit there we go so I'm going to save my file and now let me explain all of that stuff right here so the first thing that we are restructuring is a register and register is used to connect input field to the form then we have a handle submit and This is a function which allows us to handle the form submission then we have a errors which contains the validation error for the form and then we also have

a is submitting so this is basically just a flag which I'm going to show you in a few seconds okay so yeah that was just a bit of explanation about the register handle submit and errors so I'm going to remove that from here here now we are getting this error so we have to also resolve this error so which is a Typescript error so I'm going to create my interface right here with the name of form data and inside there we are going to be first of all defining my name which will be a string

and also the email which will be a string and also the password which will be a string as well okay so I'm going to take this form data right here and we have to put the or annotate or use hook with this form data so here you can see that's now successfully done we are now getting These errors because we have to use these okay so now to use them the first thing that I want to do is that I want to remove this form from here and instead of pring this D I'm going to

change that to form and I'm going to also provide the on submit Handler today and for this on submit Handler we are going to be calling this function which is a handle submit which we now importing from this hook okay so we have to provide there now inside there we are Going to be providing our own custom function which will be the on submit function and now let me create this on submit function right here okay so basically we we're not going to be doing anything crazy but we're going to be just loging to the

console or data okay so we have our own submit and it's going to take the data and now inside there we're going to be just logging that data to the console that's everything that we have to do but I'm going to also provide My uh typescript Magic right here so we're going to be using like submit Handler okay so now let me just grab that from the reog form and we are going to be annotating there with this form data which we' have already defined right here so the form submission is now totally done the

next thing that we have to do is that we have to create our input field so that we can type something inside there so I'll just create a div and inside this div I will Provide like a label and for this HTML for I'll just provide like a name and I'm going to also provide a name as a label now underneath that we're going to be defining what input field right here it's going to take the type of text and we're going to be also providing the ID of name to the here now we are

going to be using our register function okay so I'm going to use dot dot dot and here we have to call this register function which is now coming from this uh use Form hook right here so we are now calling there right here so the first argumented text is a name as you can see right here like argument name was not provided like you can provide the name of name or email or password or anything that you prefer then you have to also specify like you don't have to but if you wanted to you can

provide a validation data there so instead of talking about the theory let me just provide a name right here okay and I'm Going to provide a comma and then we're going to be providing some sort of validation rules okay so I'll just use like required this should be required but if somebody did not specify the name so we are going to be throwing this error which will say like name is required okay so I'm going to save my file so this is how we are going to be making a set of for our input field

this is how we are going to be telling our react hook form that you have to take Care of this input field if somebody did not specify anything inside this input field so we're going to be providing this error which will say like name is required okay so this is going to be our constraint or our Rule and this is how we are going to be registering for re hog form now what if somebody did not provide something inside this input field so we are going to be just throwing some sort of error right here

case I'm going to use like my curly Braces and inside then we're going to be going into our errors which we are also importing from or use form right here we're going to be grabbing them and here we have to use the dot notation and from where is our error coming from our error is coming from this name so I'm going to select that so if you got some sort of error we're going to be using this end operator okay so then we have to specify or show that error right here we're going to be

using like error. name and We are going to be getting the message out of there okay and now here for this paragraph I'm going to also provide a bit of styling to that so I'll just use like the color will be now set to totally red I'm going to sa my file and now let me just test this out here you can see we have our input field but so you know what let me also create some sort of a button which will just allows us to submit I'll just write like type of submit to

the save my file and now if I didn't specify anything today and click on the submit so it's going to gives us like name is required if I just write like I don't know maybe a b c s my file and now let me click on this submit button one more time so it's going to give us that ABC right here this is how we are going to be registering our input field this is how we're going to be providing a constraint for there and this is how we are going to be rendering that specific

error right here okay so That's done I'm going to also remove this button from here now let me take care of the email and also so I'm going to create yet another div and inside this D first of all we have to provide our label which will take a email and also we have to Define our input field and it's going to take the input or the type of email now that we have to tell your re hope form that you have to keep track of this input field so we're going to be using the

register function and we Are going to be providing an email right here and I'm going to also provide a bit of rule today like this will be required if somebody provide invalid email so we're going to be writing like email is required that's going to be the first thing and now we're going to be supporting our pattern like what will be the pattern of our email okay so for the value if you know what a jsx is cool but if you don't know what a jsx is but so this is how it looks like to

be honest I Also don't know what a jsx is I just copy this sniffer from a CH GPT so yeah I'm using there right here and we also have to specify some sort of a message right here which will say like invalid email address like so now I'm going to sve my file so now that we successfully tell or re hook form that you have to keep track of this input field and also we are telling it if somebody did not specify nothing inside there we're going to be showing like email is required and Also

if the email is invalid so we're going to be showing like email is invalid now underneath that I'm going to also provide the ID of email and the placeholder will also say email right here I'm going to save my file but we also have to show those errors okay so to show those errors we're going to be using like errors. email in this case and if that is the case so come on if that is the case so we're going to be just creating a div and now inside this Div we're going to be rendering

our error right here like error email. message and we also have to change the color of that to like uh color will be now set to totally red like so I'm going to save my file but we cannot see there because we have to create our button which will allows us to submit this form so I'll just use like submit and the type will be also set to submit if I didn't specify nothing to that and if I click on this submit it's going to give Us two errors right here so it's going to give

us like name is requ Reed and email is also required so if I just specify some sort of a name and for the email I'm going to write like uh I don't know or you know what test yeah test would be fine so here you can see we now getting our invalid email address so if I use like test at gmail.com that eror is now successfully gone and now if I click on that we are no longer getting that error this is how we are going to Be keeping track of that now outside from this

div we are going to be creating yet another div okay so just created a div 4 uh what we call for the password so I'll just create a input field with the type of password and here we have to specify first of all our register function so that we have to tell our Rea hook form that you also have to keep track of this input field and we're going to be providing our password today and also the minimum Length will be um value let's just provide a value and the minimum length will be add characters

if the password length is less than add character so we are going to be showing this error like password must be at least add characters and now outside from there we are going to be also providing our placeholder and the placeholder will be just a password like so so if I save my file and now underneath I'm going to also render my errors right here so if you have some Sort of error inside the password so we going to be showing that error and we're going to be also providing a color of red to that

so here you can see we have our name email and also the password and we can also provide a label for there but I guess like we don't have to and now we're going to be creating our button which will just say submit and now we are going to be also providing a type of submit to there so if I save my file now let me just spill this form so I'm going to just provide like the name of Huzan and test at gmail.com and I'm going to only provide like one two three and now

if I click on submit so it's going to gives us that ER like password must be at least eight characters if I write like 4 five still 7 8 99 10 and here you can see that it is now successfully gone so yeah this is how we're going to be working with the validation or the the re hook form library but I'm going to also show you The disable state if you want to disable this button on the form submitting state so for that we can use the disable come on not this one the disable

and here we have to specify the is submitting so it's going to gives us a Boolean value so if our form is submitting so the button will be disabled but if our form is not submitting it's going to giv us a false and our button will no longer be disabled okay so just keep that in mind and I'm going to also change the text of There to like uh if it is submitting let me just use like if it is submitting so in this situation we're going to be using like lading dot dot dot and

if that's not the case we're going to be using submit now let me just save my file and now I'm going to just write like hosan and this email and also I'll just proide some sort of a random password and here you can see if I click on that you cannot see that because that's super quick so you cannot see That in the production you will see that so yeah that was just the basics of react hook form Library now let me give you one more example of the react hook form so if you care

about that you can totally watch there or if you don't so you can go ahead and jump to the next section and now let's just create another form which will be a bit of advanced form it's not that much Advanced to be honest like we're not going to be learning anything new but This form is only for the practice okay so let's just save that and go ahead and go to our app Advance form right here registered then save my file and I'm going to also go ahead and go to my SRC folder and use

my St CSS right here and I'm going to provide all of the CSS which you can find on my giab repository so what I'm going to do is that I'm going to just create a bit of advanced form not that much advanc to be honest but the first thing that we have to do Is that we have to grab or use form from where from the react hook form we would also need to grab the submit Handler from this react hook form and we also have to import our styling so we are going to be

using like style. CSS say my file and this is how it looks like for here which is looking amazing now let me provide interface of the form data so we are going to be providing like first name last name email city state ZIP code country and complete location okay so I'm going to use that inside my component so what I'm going to do is that I'm going to use my use form once again from this use form we going to be destructuring a few things we would just destructure our register which will allows us to

register our input field we would also need our handle submit whenever we are submitting our data and we will also need a few St from this component so we will just need like the errors that's going to be it now let me Just annotate my form data right here so that we don't get those errors so that's cool I'm going to just remove that from here and change this one to the form so I'll use like or you know what we're not going to do that we are not going to do that okay let's just

put a class name of form container and inside this Dev we're going to be creating our H2 which will say like registration form and now underneath there we're going to be creating our form it's not going to take Any action but we are going to be providing our own submit Handler and whenever we are submitting this we going to be using the handle submit from the react hook form and let's just provide our own submit function to there so I'll use like on submit and let's just create our own submit right here so basically we're

not going to be doing anything crazy but we are going to be just logging all of that data to the console so I'll just use like onsubmit and Whenever we are submitting there we're going to be using our submit Handler and let's just provide our form data today and that's going to be to this data we are going to be taking that data as a perimeter and then we are going to be logging that data to the console and now inside this form what I want to do I want to create a d inside this

D Pro a label which will say like uh first name and it's going to take like a first name as a label we're going to be also Providing our input field and the ID will be set to first name first name like so and we're going to be also providing our register so I'll use like register and here we have to use our first name and now for the next parameter we have to provide our pattern so I'll use or not a pattern but or constraints so I'll use like required and that should be required

we have to provide like first name is required there we go save my file let's just go Back and this is how it looks like and now underneath there we are going to be also rendering our errors so if you have some sort of Errors inside our first name so in then situation we're going to be rendering our paragraph which will say like uh errors first name do message so we going to be just basically grabbing the message from there so that's done now underneath this div we are going to be defining yet another div

okay so inside that D we're going to be Defining our label which will say like last name and inside there let's just provide our last name right here we're going to be also providing our input field with the type of text and the ID of last name to that and now we have to register that so we're going to be using our register function let's just provide a last name inside there and here there going to be required so we also have to provide or required okay so I'll use like last name is required there

we go And finally we have to render those errors we're going to be using like errors. last name and uh let's just render our paragraph right here and inside this paragraph you're going to be using like errors. last name. message there we go next we also have to take care of the email so let's just create our label for the email in lowercase email like so and we are going to be providing what input field and for this input field we're going to be providing A type of email the ID of email and also let's

just registered there right here okay so I'm going to be using like email and inside there let's just required there by providing a email address is required and this should be double D I'm going to also provide my pattern and for the value of this pattern we are going to be passing this pattern which I copy from the chat gbt to be honest okay and we are going to be also providing a message message which will say like Invalid email a r e s we also have to render our errors so I'm going to be

using like errors. email and we have to render our errors by using our paragraphs so I'm going to be using like errors. email and then do message now outside from there we're going to be creating a d one more time and inside there let's just create a label for the City come on City and let's just also provide our city here and also the ID will be set to city and let's just Register there by using dot dot dot register function we have to provide our city and also that's going to be required okay so

if that is required so we going to be using like city is required there we go and also let's just render our errors by using errors uh errors. City God damn it why the hell am I not getting there errors. City and if we have some sort of error coming from the city we're going to be rendering our errors. c t. message there we go that's Going to be a lot of typing we have to create another div and also provide you a level and level will say State and also provide your state here for

the input field we're going to be providing uh text obviously and ID will be set to State then it's going to be required and we going to be providing what state inside not required but that's going to be register we have registered the here okay so it's going to take the state and that is going to be required required There we go so stad is required now underne this input field we have to use our errors. St one more time and I'm going to use my end operator and provide my paragraph and change that to

uh errors. state. message and now outside from there I guess I have to just duplicate it like a few times so I'm going to create for the ZIP code next for the country and also one for the complete location okay so now here that's going to be it for the state we Also have to create one more for the zip so I'll just change that to a zip like so change this one to zip or in uppercase zip the ID will be set to zip and the state will also be zip and zip is required

next we have to create a country Sol provide like country and here we have to provide a country as a label and uh ID will be set to Country the register we're going to be registering our country and country is required like so and the final one that We have is a complete location so I'll just write like uh complete location l c a t o n and here we also have to provide our complete location and for this text I'm going to also copy them place it here and place it here as well and

complete location is required so I'll use like complete location is required and we did not change the state so instead of providing a state for all of them I'm going to change there to zip change this one to Country and also this One to the complete complete location right here so now if I hit enter oh I also have to change this value right here so I'm going to copy that place it here I'm going to also copy the country place that to the stand and the complete location will also be here okay so now

finally if I sa my file and now let's just test this out so here you can see we are now getting our form button which will just say submit and we are going to be also providing a type of submit to The sa my file and we are now getting our button right here so if I didn't specify nothing today and click on submit so it's going to give us These Warnings it's going to say like first name is required last name is required email address is required city and state is required zip country and

complete complete is required complete location is required what the hell complete location is required so it's going to give us like a complete location is Required so I'll provide like my own name H last name is set to webd and provide a email as a test gmail.com and also the city will be uh something state will be I don't know the ZIP code will be uh 4312 and Country will be uh uh uh uh and complete location will be uh God damn it uh I'm going to copy this uh something then I don't know then

the ZIP code will be 5 31 to and also the country is Yeah and now if I click on the submit button we not getting anything but we can also go ahead and go to the inspect element we can see all of that content right here so we are getting these errors and now if I you know let me just refresh there we're going to submit one more time now we are getting all of that data like City complete location country email first name last name State and zip so yeah that was a lot about

the react hook form that we've learned so if you Have a spare time you can definitely go ahead and do some other stuff with them but yeah I am done with the react H form welcome to the react 19 master class so in this section we're going to be covering every single thing that there is to learn about the react 19 and keep in mind I'm going to be also making a separate video about the react 19 because I know there are a lot more feature coming in the react 19 and I cannot cover there

right now because They are not even released yet I've met with a lot of meta developer and they tell me about a certain feature which are coming into the react 19 but not right now but I promise they are coming so yeah now let's talk about the biggest feature about the react 19 which is their own compilers react 19 now includes its own compiler which will not only speed up the performance but also automate a certain terious task reducing the overload for developers so yeah we Have a new compiler hooray next we no longer have

to care about the memorization and the memorization and stuff like that with react 19 new compiler there is no need for the memorization or memorization the process of optimizing a component to prevent unnecessary renders previously we relied on the used memo and also on the used call back hook for these purposes but now thankfully they are totally obsolete because of the react 19 Compiler we also have another feature in react 19 which is called the metad DAT so we no longer need to install third party packages for SE and metadata because react 19 now offers

built-in support for these features we can place the text anywhere within our component and that will work totally fine in the client component and also on the server component so yeah that's also a big thing now let's talk about everyone's favorite topic which is called the Directives so react 19 now includes built-in support for the used client and also the used server directives we are not going to be covering the use server one because it involves some sort of a backend functionality but we are not going to be covering that not right now but I

will make a separate video about this allow component to be rendered on the server resulting in improve SEO faster page load time and more straightforward data fetching so yeah That was a few things but now let's talk about what are the things which are now completely obsolete in the react 19 so we no longer have to worry about the forward ref we also have to don't care about the react lazy loading and also the use context I mean like yeah we totally can use the use context like Nothing is Stopping Us but we are not

going to be using the use context we are going to be only using use that's it which is something I'm going to be Showing you in a few seconds we no longer have to care about the memo the use effect and also the use callback we are going to be using the use effect for the side effects but not for the data fetching so yeah that was a few things but now let's talk about the use so now let's talk about the use hook in react 19 so the use hooklets you read in low resources

asynchronously such as promises or context so unlike any other hook we can use the use hook inside the Loops and we can also use that inside the conditional statement in certain situation it can serve as a replacement for the use effect when fetching the data something which I'm going to be showing you in a few seconds and it also streamlines a context usage by allowing you to use the use context like just use the use and then provide your context inside there instead of using the use context hook and then providing your context so yeah

this just a theory about The use hook and now let's write some code and then you will get to know what I'm talking about so now let's talk about the actions in react 19 react 19 introduces actions which are asynchronous function designed to simplify form submissions actions can be utilized on both client and also on the server side so yeah this just a basic theory about the actions now let's get into the cording part and then you'll get to know what I'm talking about now Let's talk about the use form status hook in react 19

so use form status is a hook that give you a status information about the last form submission and this is how the syntax will look like first of all we're going to be using the use form status like we're going to be executing our hook and then we're going to be D structuring the pending data method and also the action totally self-explanatory so now let me just write some code then you'll get to Know what a use form status is now let's talk about the use action hook in react 19 so when I was recording

this video this hook used to be a use form stat hook but this is no longer a use form stat hook this is a use action stat hook so that's the only reason I'm going to be making a separate video about the react 19 features because I know there will be a lot of changes and I can totally guarantee there so now let's talk about it so what is a use action State so use action state is a hook that allow you to update the state based on the result of a form action and this

is how the syntax will look like first of all we're going to be calling our use action State we can provide the function we can also provide the initial value and now it's going to give us the return value of array and now inside this array we can totally restructure the state and also the form action which we can provide for our form so this is the Theory and now let's get into the coding then you will get to know what I'm talking about I know what you're thinking you're thinking where in the word is

hosan getting these amazing wallpapers I'm going to show you from where but first we have to make a setup forward course let's just make a setup for this course I'm going to zoom in a bit and the first thing that we have to do is that we have to install react I'll use like npm create we at latest and Then I'll get the name of like react 19 uh features or something like that I'm going to choose reactjs and also typescript so now let's get into the reactjs and now we going to be using npmi

to install every single thing inside there that's done now reactjs by the time of this recording react 19 version is not available so we're going to be using the experimentals so you just have to provide this command so now just place there so first of all you Have to use npmi then react at experimental and also react Dum at experimental so I'm going to hit enter so it's going to also install the inside their project so now let me just open that in my vs code and this is how it looks like so I'm going

to remove the public folder I'm going to also go into the SRC and remove this assets folder remove the app. CSS file and let's just empty out this f. TSX and I'm going to only write my RFC inside there save my File and also I'm going to remove every single thing from this index start CSS file and now I'm going to go into the tment CSS T css.com click on the getting started go to the framework and guides choose we and copy this command open my terminal place that here and it's going to install 10in

CSS inside my project I'm going to also hit enter so it's going to initialize T CSS inside my project so I'm going to copy there and let's just go into our T config and Replace that with this new content okay and finally we also have to copy this this index. CSS stuff and place that here and we have to run there by using npm run Dev check this out all used like Local Host and yep everything is working the way I expect them to work I fast forward the video and created a component folder and

inside there we have our fish too. TSX file and now inside this file we are now fishing our data so now let me just show you every Single thing first of all we importing the use St and also the use effect then we are creating an interface for or to-do which will only hold the title and title will be a string then we have our component with the name of fetch to-do and inside there we have a to-do state which allows us to store our to-dos inside this St next we also have a loading ST

which allows us to either show the loading or hide the loading then for the side effect we are now Using the use effect and inside this use effect we are now fetching our data okay so we are now creating a function with the name of fetch data which is going to be an asynchronous function and inside this function we are now providing a TR and catch block so first of all we're going to be fetching our data from this URL if we don't have the data so we're going to be throwing this response but if

we do have the data so we're going to be converting that to Json finally we Have to send that to or to do so that we can render there if that's not the case we are going to be getting some sort of error which we are logging to the console and if that's also not the case we are going to be providing our lader finally we are just calling our function to get all of the data so now let me just collapse them we are also checking if we have the loading so we're going to

be showing this lower and if that's not the case so finally we have to just Render our title from this studio so yeah that was our entire component and now if you want to execute or call that component inside our app so this is how we are going to be doing there and now I'm going to render this component right here so I'll use like fish to do and let's just close there like so I'm going to try to import there so this is how we're going to be importing this so let's just save our

file and here you can see we're now getting our title Right here which is a random to-do title which means like everything is working the way we expect him to work but we no longer have to write like all of that code like using the use effect and using the if andl statement and all of that crap we have to just remove them and the first thing that we have to do is that we have to just use our component right here which is a fch to-do component and inside this fch to-do first of all

we're going to be creating a variable with the Name of data and inside this data we're going to be using the use and where in the word is use coming from use will be coming from the reactjs so I'll just import the use from the reactjs okay so this how we're going to be importing the use function or the use Hook from the reactjs and now inside this use we have to specify our promise so I'll just provide a function which will be a fetch data function and now we have to create this function separately

we can also Provide our function right here if you wanted to so I'll just create my function separately with the name of like P data and inside this function what do you want to do let's just write our as synness function and inside this function we're going to be making a request to this URL which is H HTTP https and then Json placeholder do type io.com and then todos and one okay we're going to be storing that in the res variable and now we have to just return The res. Json okay like so now that

we successfully fetch our data now we are providing that to our use function next we have to render the data to the Dom so I'll just remove this fch to do from here and I'm going to only use data Dot and then title so if I use this save my file this also is going to gives us an error and why is that because whenever we want to use the use function or the hook we have to wrap that inside the suspense so I'm going to just select This div and we have to convert that

to suspense like so suspense is a huge topic which we are going to be covering in this course but not right now okay and here you can see we're now getting our title which is looking cool so yeah this is how we're going to be fetching our data by using the use hog so now let me just show you that once again first of all we're going to be importing the use hog and inside this use hook we're going to be providing our promise okay So here we're now providing our fetch data function and now

we're creating that fetch data function and inside this fetch data function we're now fetching our data from this URL and then we are converting the data to our Json okay so this how can allows us to fish the data and this how we're going to be showing the data to the do now let me show you how we're going to be using the use hook with context so first of all I have my app component and inside this app Component I'm now rendering my theme comp component so now let me go ahead and go to

my theme and wo that's a lot of coding H that's a lot of coding so now let me just explain all of them one by one first of all we are defining a typ forward theme it's going to be either a light or a dark theme and then we are creating an interface and then inside this interface we have a theme which will be coming from that theme like either the light or the Dark theme Then we have a toggle function which will only return the white then we are creating our context and this context

will either take the theme cont text type or undefined so for the initial value we are now specifying undefined to there now we're creating our provider and inside this provider is going to take a children so we're now just annotating there right here and now inside there we're now creating our theme which will be sharable for all of Our components so we now just creating a stare for or theme and the initial value will be set to light we also creating a toggle theme function which will allows us to either provide the light or dark

or toggle that to either light or dark theme then we're just spacing the theme and also the toggle theme function to our context provider like theme context provider to be precise and here you can see we have our theme component and now inside this theme component we are now Wrapping our card component by using our theme provider okay and finally we're just creating a custom hook which is a used theme and we are checking if we have the context so cool get the context but if you don't have the context then show this error like

us theme must be within the theme provider component so that's everything for this component now let me go ahead and go to my card component and we are not doing anything crazy but we are first of all importing Our context from theme context and we're now passing them to the use context and if we don't have the context so then we're going to be rendering this error so if we have the context so we're going to be restructuring the theme and also the toggle theme function from there we're providing a bit of styling today and

we are now rendering our theme totally dynamically so if our theme is equal to light then we're going to be changing the background color to totally White but if that's not the case we're going to be changing the background color to kind of a tealish color okay and we are also providing our H1 providing our our styling totally dynamically and also we are creating some sort of a paragraph and providing our style to them and and finally we have our button which allows us to toggle our theme so this is how the UI will look

like as you can see I have this UI I have this theme card and also Some sort of a lum Epsom if I click on this switch to dark mode it's going to make it as a dark mode if I click on there once again so it's going to make it totally light mode so yeah this is what's going on now using the react 19 version we no longer have to use what do we call it uh this use context so now we can totally replace that with the use function so how are we going

to be doing there I'm going to comment this line out and I'm going to be importing the use Function or Hook from where from the reactjs and now we no longer have to use the use context we're going to be only using the use okay so now if I sa my file test this out and click on the still it works exactly the same so yeah that's the only change that we have to do for the react 19 now let's talk about actions in react 19 but first of all I want to say that we're

going to be only covering actions on the client side we're not going to be covering that on The server side because we did not learn about the back end so that's why we not going to be covering that not right now but we will cover there very soon so what I'm going to do is that I'm going to create my components sper and inside there we're going to be defining our form. jsx file or you know what this should be a TSX rather so now let me just change that to TSX I'm going to use

my RFC component and go into my app and register my component right here so Let's just scate to our form and register this component and here you can see we now getting our form so first of all I'm going to provide my UI today and then we will provide the rest of the stuff so I'll change this St to a form and now inside this form we're going to be creating a label and this label will be a name label I'll just write like label for the name and we're going to be also providing an

input field with the type of text and we're going to be also Providing an ID and the ID will be set to name and please do not forget this one you have to specify a name if you want to work with a form okay so you have to specify some sort of a name for your input field so I'll just write like name for this one and now I'm going to save them so now underneath this one we're going to be also creating let me just write a v right here so we're going to be

also creating a label for the email I'll write like label and I'm Going to just write like email and also email there now let me just provide my input field with the type of you know what email would be fine so I'll just change that to email I'll also provide my ID of email and once again I can stress that enough you have to specify the name if you are working with the action so we have to specify some sort of name for there and yeah now underneath this one we're going to be creating our

BR once again and let's Just create one more label and also input field for the password so I'll just write like password and then password inside there so I'll just use my input feeld with a type of password in this case and we're going to be also providing an ID and the ID will take a password and once again we going to be providing a name and the name will be password so now underneath there let's just create our button which allows us to submit our form so I'll just write a Br and now we're

going to be creating a button for the submit so I'll just put a type and the type will be submit okay and yeah I'm going to just save this file this is how my form looks like I know it is looking super ugly so now let me just provide a bit of styling today so what I'm going to do is that I'm going to provide The Styling to this input field to this input field and also to this input field we're going to be also providing a different styling for This submit button so now let

me just place this so now if I save my file and check this out so here you can see this is how my UI looks like I know super amazing right yeah it is amazing so let's talk about the forms so as I said that forms are just an asynchronous function which we are going to be attaching forward form so what we have to do I mean like action or asynchronous function which we going to be attaching forward form I don't know what the hell I just said in the first place so I'll just use

like action we just have to specify our action and change it to the PHP code if you guys are aware of a PHP code you guys already know all of that stuff but if you don't you don't have to worry about there so here we have to specify some sort of a arrow function or some sort of a function so I'll use like form action function and this should be action form action function and now I'm going to copy them and now let me just Crate that right here so I'll use like con form action

and it's going to take a special perimeter which will be a form data okay so now inside then what we have to do we have to create some sort of a user data so I'll use like cons user data it's going to be equals to this object and I'm going to provide the property of name to there and that data will be coming from this form data we now attaching this uh function to this form by using our action then we are Providing this perimeter which is a form data so now we are going to

be copying and pasting there then we have a property inside this so if I just use the do get and here we can now get our data so where in the world is this name coming from this name is coming from this name which we are now providing right here okay so it's going to select that name form or that name input to be precise now I'm going to provide a comma I'm going to also provide an email and For the email we're going to be providing our form data. getet method once again and now

we're going to be providing our email and finally we have to also create the for the password so I'll use like form data and then get method and provide our password in this case password there we go now I'm going to sve my file and now underneath them we have to just log to the console this uh user data and now let me just save there it is giving us an error and you Know what let me just proide like any type to there so yeah we are now getting all of the data so you

know what let's just go ahead and check this out and now if I open my console let's just go ahead and go to our console and I am going to provide my name like husan and then something or test atgmailcom and some random password now if I click on the submit button it's going to give us that data right here as you can see I have my name data I have my email data And I also have my password data so now you are totally free to do whatever you want to do with that data

you can totally modify that you can send that to a server you can do whatever you want to do with that data so now let me just explain that once again first of all we're going to be creating some sort of a form and then we have to specify some sort of a name for our input field so that we can select that specific input field by that specific name we also have To use our action and for this action we're going to be providing some sort of a function so you can pass your function

right here or you can create this separately as I did right here okay so now inside this function it's going to take this form data as a perimeter and you can totally get your data by using this form data. getet method and here you have to specify your name okay and then you can do whatever you want to do with that data so yeah that was just the Basics of actions in reactjs on the client side we not going to be covering the server side because we are not there yet so now let's talk about

the most easy a bit weird and also not that much useful hook in react 19 which is called the use form hook so what I'm going to do is that I'm going to create my components folder and I'm going to create my form. TSX inside there and let's just use our RFC sem my file and register this component right here this I'll use like P and here in is going to gives us their home right in here which is looking cool so let's just remove them and first thing first I'm going to just remove that

and change it to a form and inside this form we're going to be creating our div and inside this div we have to provide our label and for this label we have to provide some sort of a label like name or something and underneath that we're going to be also creating an input field with a type of PEX we're going to be also providing a class of Border all around will be or yeah all around will be set to two and the ID will be set to name and we're going to be also providing a

specific name because we're going to be using our ction inside the and this should be required and now underneath this div we're going to be defining yet another Dev so let's just use our Dev and provide my label inside there and we have to specify the email and email like So so inside there we have to specify our input with a type of email and we are going to be also providing a ID and the ID will be an email we also have to specify the name and the name will be an email and this

should be required to and finally we're going to be creating a button but we are going to be creating that in a separate component which will be a form button okay so that's why I said that form status Hook is a bit weird one because whenever we have to Use that function we have to create a separate component or use that hook we have to create a separate component for that so what I'm going to do is that I'm going to go ahead and Define or create my component right here with the name of form

button. TSX I'm going to only use my RFC inside there and just call this function s my file import this component right here now I'm going to also create an action for my form so I'll use like uh action and here we have to specify Some sort of action so I'll give it the name of like my action I'm going to copy that and let's just create this action right here okay so what I'm going to do is I'm going to just create my action and this should be an asynchronous action here we have to

specify our form data and inside this form data we're going to be using like a and then new promise promise and and that's the only reason we marked it as an asness component or action to be precise and Inside this promise we have to provide a resolve and when this is resolve we are going to be firing this function which is a set timeout and here we have to specify the resolve function today and also we have to provide the delay of 2,000 now underneath here we're going to be getting our data Sol use like

new post or post rather and inside there we're going to be first of all getting the name and name will be coming from the form data and then we have to use The get method to get the data by using one name I'm going to also duplicate and change it to email and also change this want to email as well and now I'm going to be using like console.log of new post and now let me just save my file we are now getting this error so I'll just annotate with the any flag now this component

is done I'm going to go ahead and go to my form button component and now let's just use our form status hook inside there so the first thing that I Want to do is that I want to grab my use P status we have to grab them manually from where from the react D not from the react J but from the react D like so now that we successfully get there so now I'm going to be using this all use like use form status and execute there I'm going to store there in some sort of

variable like form or something now let me just log this form to the console so if I save my file and now I'm going to go ahead and go to my console and here You can see we're now getting an object SOI just refresh that so we have a action which we can provide for our form we are not interested in there we can also have a data which we can also render inside our component we're not interested in there we also have a different methods I'm not quite sure what in the word is a

method thir but yeah we have this black which is a pending so now it is giving us a status of our form okay so we are now only Interested in this pending so I'm going to just destructure there so to destructure there I'm going to only use this bracket and I'm going to use like pending inside there okay so now if I just use like pending save my file once again and refresh there and now it's going to give us a false right here so now what I'm going to do is that I'm going to

just remove there and change there with a button component or just a simple button and we also want to Provide a type and the type will be set to submit and here we have to specify our flag so I'll just use like if that is pending then make this component disabled but if that's not pending so then we can just do whatever we want to do with that and I'm going to also provide like if we have a pending state so in this situation we can just use like submitting dot dot dot but if that's

not the case we can just write like submit like so submit there we go So now if I save my file and test this out so now let me just refresh there and yeah you know what let me just go ahead and provide a provide a style to this one I'll copy this style and place there right here inside this input field so now both of them are looking cool so what I'm going to do is I'm going to specify hus test at gmail.com and now if I click on this submit and watch what happened

is now giving us a submitting and then it will submit that data it's Going to give us all of that data right here and then it will give us St submit let me just try that once again case I'll use like something then something at G mail.com come there we go so now if I click on there once again let me just clear this out if I click on there once again here you can see it is now giving us a submitting and then it's going to giv us that data and then it's going to

gives us that submit I don't know why we Are getting this error but we are getting that so this H will only gives us the status about our form so now in this case we are now only interested in the pending state so we can totally use that so now let's talk about the use action St hook in react 19 so what I'm going to do is I'm going to create my components holder and inside there we're going to be providing our count. TSX and now inside there let's just use our RFC and register this

component right in Here like my counter or just account and execute and here you can see we're now getting our count which is looking cool so the first thing that I want to do is that I want to call my use action stad hook so I'll use like use action and then come on use action St hook and now we are going to be grabbing that from the re yes so I'll import that by using import and then use action come on action St it is still not giving me a suggestion so we're going to

be graving That from the react J okay import there we go so now if I sell my file still we are getting this error I don't know why but we are getting this error and what I'm going to do is that I'm going to try to explain that but I want you to give me a few seconds because it takes a lot of things we going to be restructuring the chat and also the form action which we can proide forward form okaye we're going to be destructuring the state and also the form action and for

the initial Value we're going to be specifying first of all the increment function which will allows us to change our form and we can also specify initial value and the initial value will be like basically anything you want to WR I'm going to only provide zero for the initial value so let me just explain that once again first of all we're going to be providing some sort of a function which will allows us to change our data or our initial state or just our state then we Can provide initial value forward State and it can

be anything you can provide a string you can provide object you can provide array you can provide anything that you prefer but now in this case I'm now creating a counter so I'm now specifying a zero value inside the okay and we're going to be restructuring the state we'll be holding the value of zero inside there which means like we're now destructuring there so that we can use the inside our UI then we have an action And you already learned like what in the word is an action so I'm going to also show you that

in a few seconds which means like we're going to be using the inside our form so now let me just save them and I'm going to change that to a form once again and also change this one to a form so now let's just remove this count from here and I'm going to be using my H1 come on this H1 and I'll just say like uh I'll just render my state inside there but it will give me An error and you guessed it why it will gives us an error so I'll just provide a styling

of like text 3XL it's going to gives us an error because we have to create this function right here or this action whatever you want to call it so I'll just use like s flag and create my function inside there like so and the name will be increment so it's going to take a few perimeter now let me provide like previous state and it's going to also get the form data if you don't want To provide this previous state you don't have to but if you want to get the data you have to specify the

form data to there okay so I want to use my previous St so it's going to also gives us a previous St right here so now if I want to loog to the console my data so I'm going to be using like uh form come on form data. getet method and here we have to specify the name inside there and why is there oh we did not create our uh what do we call it we did not create our Input field but yeah we going to be getting our data by using this name and also

let's just use our return statement and here we have to specify our previous state plus one okay so now I'm going to save my file I know it is giving us a lot of errors but we don't have to worry about the errors right now we only have to care about this use form actions so this is how we are going to be rendering our data and now let me show you so here you can see we're now getting the Initial value of zero because we are providing a zero to there but if I change

that to this number and save my file and now let me just refresh there and here you can see it's going to gives us that number right here so I'm going to make that as a zero right here once again and now we have to create our button which allows us to increment or change your St so I'll use like button and inside this button I'll provide my increment flag right here and also I'm Going to provide a bit of styling like background will be set to tot T of 300 300 and also ping will

be set to two and I'm going to be using my form action inside there and here we have to specify our form action okay which we are providing right here I'm going to provide my BR so I'll use like BR and now underneath you have to create what input field and the type will be set to text we're going to be also providing a placeholder and I'll just say like Please enter your name enter God damn it enter your name like so and also I'm going to provide a bit of classes to it so like

border will be set to two pixel all around and now let me just use that name and what did I provide right here we are now getting our data by using this name so we have to specify that name come on name right here so now if I sa my file test this out and here you can see we're now getting a lot of weirdness but now let me just refresh There and yeah if I click on this increment function so it's going allows us to increment or counter and if I type something inside there

and click on this increment it's going to also gives us the data inside there so yeah that was our use action State let me just explain that once again this function will take increment function or some sort of a function which allows us to change our initial value and this is how we going to be providing initial value to there It's going to gives us a state which we can render inside our UI it's going to also gives us a form action which we can execute on our specific button or on our specific action okay

so this is how we're going to be creating our increment function it's going to take a previous St and it's going to also take a form data and now we are logging that data to our console and we're also just incrementing our counter by one and yeah that was just it about the use action State in react 19 okay so now let's talk about the used transition hook in reactjs so what I'm going to do is that I'm going to create my components folder and inside there we're going to be creating a lot of components

I'll use like home. TSX I'm going to also use the contact. TSX and also um the post. TSX so I'll use my RFC inside this component rafc rafc rafc e rafc C give me a pepc or what what the am I saying so let's Just create our states I'll use like active Tab and then set active tab it's going to be equals to this function which is a used St function and the initial value will be set to home and now we have to create a function which allows us to render our content so I'll

use like uh render content and here we're going to be just creating a function and here we just have to use our switch and cases baby so I'll use like X active Tab and for the active Tab Case we're going to be providing a home and now we're going to be returning the home component from there so let's just import there remove this bread from here and also provide a case for the Post like so and return the post post there we go and I'm going to also close that now we also have to use

the cas and the case will be set for the contact and if that's the case so we're going to be returning the contact component and first I want to give you the example Without using the use transition hook and then we're going to be refactoring that hook I like then we going to be refactoring that code to use the use transition hook so now use like home and import there right here okay everything is working the way we expect him to work and now we have to create our UI so I'm going to go ahead

and create my UI right here I'll use first of all my dat with the class of tabs and inside there we have to create our button and I'll just Use like home and then change that to post and then change that to contact and I'm going to be calling my function on there so when somebody try to click on this function we are going to be firing these function so like set active Tab and let's just provide our tabs inside there so I'll use like home I'm going to also provide a post inside there and

I'm going to also provide a context now if I save my file and underneath that we are going to be rendering our content so I'll just create a d with the class of content content God damn it content there we go and now we have to render or what do we call it render content function inside there now let me just save my file but here is a bit of catch if I go ahead and I'm going to also put AIT of styling to these buttons so I'll just select it and provide a class name

of Border two and sa my file yep that's cool so I'll use like pairing for all around will be set to four and I guess That's looking better so if I click on the home so it's going to gives us a home if I click on a post so it's going to give us post if I click on the contact it's going to gives us a contact but what I'm going to do is that I'm going to go ahead and go to the Post and I want to just render a lot of post so so

I'll just generate come on generate a lot of post okay so to do that we're going to be using our post and inside there we're going to be Using array. from method and let's just provide our length and how many you want so I'll just provide like 1 2 3 4 5 6 okay and then uh we don't need the data we only need the index and I'm going to just write like post inside there or just a simple post and render my data inside the like index + one there we go so now it's

going to give us a lot of post and now we have to iterate over through all of that post by using the map method and render there so I'll use Like post. map and here I'm going to only provide a post inside this as aror function and I'm going to also create a div and inside this div we have to specify our key and the key will be set to post and provide a class name of post and inside this div we have to render our post okay so now if I sa my file and

now if I click on this post and watch what happened everything is now freezed out I cannot click on the home I cannot click on the contact you know what let Me just uh say that once again if I go ahead and click on this post once again now I can't click on the home I can go to the contact page until I render all of that data it will not let me to go to any other component and everything is now totally freeze up so if you want to try this code by your you

can totally go ahead and try there by yourself but I think I'm demonstrating that a bit cool if I click on this post I cannot go to any other component until all of their Data is rendered okay so it is taking a lot of time and now for this kind of situation we're going to be using the used transition hook we are not going to be using a used transition hook in the day-to-day life that's just a thing you have to keep in mind but whenever you want to render a lot of data like I

mean this amount of data so for this situation you may use the use transition hook and yeah let me just show you how we can refactor our code to use the use Transition hook so to do that first of all I'm going to go into my app component and I am going to import the used transition Hook from the reactjs so I'll just use like uh use transition so I'll just create first of all or you know what let me just call this use transition uh function and I am going to store there in some

sort of a something or something like I'm going to store the inside the something and log that something to the console so now if I Save my file and I'm going to go ahead and go to my inspect element go to my console and now let me just refresh there so it's going to gives us a few things it's going to gives us first of all the false it's going to also gives us a function okay so that false will be the state like is it pending or not okay so if it is pending it's

going to giv us true but if it is not pending it's going to gives us false no so now in this case it is not pending so it is now giving us A false and yeah we have a function which we can provide for loaded data so what I'm going to do is that I'm going to restructure my uh what do we call it is pending and I'm going to also destructure the start trans come on start transition function from there now I'm going to delete this line of code next we only have to refactor

this code so I'm going to also collapse there and I'm going to go ahead and just change the instead of using this set active tab I'm going to change that to like uh handle tab change or something and I'm going to copy the name of there and put there here and also I'm going to just replace there with this handle change now I'm going to go ahead and just create that handle change function I'll use like con handle change it's going to take a tab as a perimeter and now inside this function we're going to

be using our start transition function which is coming from this use transition so we Have to just it's going to giv us an asynchronous function which causes a state update that can be deferred I know this is a bit mouthful to say but yeah I am going to provide my arrow function inside there and now inside this Arrow function I'm going to be using a set active Tab and provide my tab inside there I'll basically call this set active Tab and we have to specify this tab inside there which we are providing right here like

we're now providing a Home we are also providing a post and we are also providing this contact word here okay so I'm going to also use my flag word here so if it is pending so I'll use like if it is pending in that situation we only want to show some sort of a loader so I'll use like paragraph and I'm going to say like loading dot dot dot and let's just say our file and that's the refactor that we have to do so now I'm inside the Home tab if I click on this post

so it's going to give Us that loading and that loading is coming from this is pending flag okay so it's going to give us that P I mean like that loading and then it's going to render all of our content right here let me just refresh there I'm now inside the home component if I click on the post then I can also click on the contact and it's going to brings us to the contact so yeah that was just the basics of what do we call it the use transition function or hook to be precise

in react 19 time for our tabs project setup so I'm going to use npm create we at latest and the name will be tabs I'm going to choose reactj and typescript and now let me go into the tabs project and install every single thing for there then done I'm going to also install the react icons Library I don't even know if you're going to be using react icons or not so I guess that's going to be here so I'm going to open there in my vs code right here so close there now let me Make

a cleanup so I'm going to remove this public folder and I'll also remove this assets app. CSS and also we will remove every single thing from the app. TSX and replace it with our own custom component I'm going to also REM every single thing from there and the rest of them is fine so now let me just click on the getting started and go to the Frameworks and guides choose we and copy this command and now let me open my terminal and place there right here so It's going to install table CSS in my machine

so I'm going to go back now let me hit enter while doing there I'm going to copy there and let's just go into my tailing config.js file and replace it with this content like so I'm going to also go ahead and copy there and go to my index.css and place my styling there and let me just test this out so I'm going to copy this line out go to my app and replace it with this new H1 right here save my file and now let me use my Npm run Dev so it's going to start

my server and let's just refresh there we now getting our hello the word with the styling which means like everything is working the way we expect him to work the first thing that I want to do is that I want to remove this H1 from here and we are going to be rendering our sidebar and also our profile but first of all let me just create a div and inside this div we're going to be rendering both of that components so I'll just create a component with the name of or you want a folder with

the name of components and inside there we're going to be defining our sidebar. TSX and also our profile. TSX I'm going to go into the sidebar use my rafc inside them go to my profile and use my RFC rafc inside there as well and now let me render both of these components so I'm going to use like uh sidebar and render them I'm going to also use the profile and also render this component And this is how both of them looks like so I'm going to start working on the sidebar so I'm going to go

into the sidebar component and we're not going to be doing anything crazy inside the sidebar but we're going to be providing a lot of styling so what I'm going to do is that I'm going to remove this div and I'm going to replace it with the assign side a s i d e there we go okay and I'm going to also put the class name of sidebar fixed and top will be set to Zero left will be set to zero let me go back for a few times and and height will be set to screen

which means like totally full with will be set to 20 I'm going to also provide a background color of uh 1 A 1 C and 1 e that's going to be the background color I'm going to also change the text to totally white and inside this sidebar let me just zoom in a bit we going to be creating our UL which will have the classes of pairing for all around will be set to four flex And flex will be set to column and let's just write what justify like so justify will be set to between

and items will be set to Center for the height fa could be setting there totally full let me just save my file I'm going to create a d with a class of top and inside there we're going to be creating our Ali with a class of margin for the bottom will be now set to two and create a d with the class of flex and also items will be set to Center inside there We're going to be just creating our fa home and that's going to be our icon and I'm going to also style this

icon so I'll just write like class name of margin for the right will be set to two margin for the bottom will be set to three and the size I'm going to increase that to 18 save my file and this is how everything looks like right here we only have our uh home icon and which is looking cool now underneath this Li you know let me just duplicate this li4 like A few times let's just duplicate there one time and I'm going to change the fa user fa user and grab that from the react icons

let me just save that and yeah we are getting the user which is looking cool and I'm going to also duplicate there for the final time so let's just duplicate there and change this icon to fa search like so and yeah we are now getting our search which is looking cool and now underneath this div we're going to be defining our bottom Div like that was for the top UI let me just collapse there that was for the top UI which you can see see right here now we are going to be pushing our icons

to the bottom so for that we're going to be creating our bottom uh dep right here so let me just give it the class of bottom and you can basically give it in any class that you prefer I'm going to write Ali inside the Ali we're going to be using our iomd settings s e t NS and I'm going to also provide the size of 18 to Them and now underne them we're going to be also rendering our fa user from or react icons and provide a class name of margin for the top will be

set to five and the size will be set to 18 semi file and now we are also getting these icons right here basically you can change that anything that you like but in my case that's that's looking better so that was it about for the sidebar next we're going to be working with the profile component now let me just zoom in a bit And the first thing that I want to do is that I want to create a state for the banner URL and also for the profile URL so I'll just create a banner URL

uh in lower case and then set Banner URL and that's be equals to the used and for the initial value I'm going to specify this string okay so which is going to be basically just a prototype or a simple image you know let me just show you there if I go to a new screen and we're going to be getting like 1500 x400 so This is going to be basically our Banner image and just for Prototype and we will be able to change that in a few seconds okay so that's going to be for the

banner we're going to be also creating a profile URL so I'll just create like profile URL and also set Prof profile URL and this going to be equals to the US T and this us will have this link right here is just a placeholder image with 100 so now let me also show you that one so this is how God damn it uh I'm going to have to copy only the image link and let me just place that here and yeah this is what we are going to be getting for the profile now let me

go into the UI so I'll just remove this profile and provide my class name to there so it's going to be relative relative and width will be set to 94% 94% just like that and the margin for the left will be set to five rims inside this div we're going to be creating a div with the class of Relative and inside this div we're going to be defining our image and I'm going to remove them now we're going to be providing our Banner image so I'm going to copy them and place it right here and

for the alternative text I'll just provide like some sort of a you know what background image or something like that would be and for the classes I proide like withth will be set to totally full and height will be set to 60 and also the object Will be set to cover so it's going to take the entire de so now let me show you there and here you can see we now getting our Banner which is looking cool now let me also take care of the profile but now underneath there we're going to have to

create our button so this button will include a lot of classes so now let me just put all of them the first thing that I want to do is that I want to make it so that this is going to be absolute this is now Rel relative so this button Will be absolute for this relative top will be set to two and the right side will be set to two background will be gray of um 800 you know what 800 and text will be set to totally white pairing for all will be set to two

rounded totally full and whenever somebody H over there we want to change the background color to gray of 600 like so and inside there let me just save my file inside this button we're going to be creating our label And you know what we're not going to be providing any HTML 4 today but or yeah we will provide HTML 4 so I'll just write like Banner upload or something like that upload and we're going to be also providing a class name of cursor to pointer uh label we're going to be creating a fa camera icon

let's just get that from the react icons and I'm going to increase the size of there to 24 now let me just save there and yeah this is How we are going to be getting our icon now underneath this level we're going to be defining what input field so I'll just write input type will be set to file in this case because we're going to be uploading some sort of image okay so I'm going to also provide the IDE of banner upload to this one because we've already specified this Banner upload for the HTML 4

okay and I'm going to also provide the accept flag so it's going to accept every single image and also we're Going to be providing a class name of herden today so it's going to hide there and when somebody try to change something we are going to be firing this function which is a handle Banner change is so now let me save there it's going to obviously gives us an error because we have to create this function okay so you know let me just create this function right away so I'm going to go to the top

and here I'm going to Define my banner image so I'll use like const Banner or handle excuse me handle Banner image or handle Banner change it's going to take the event we're going to be first of all creating our file so I'll just use a file and it's going to be coming from the event. target. files and we only want to get the first element out of there okay I'm going to explicit Define there as any because this is just a file so it doesn't really matter the type and we're not going to be doing

anything crazy and now let me just check If we got the file if we have the file so in this situation we're going to be running this set Banner URL and we want to change that to the url. create object URL and here we're going to be specifying our file so now what in the word is this URL and then. create object URL this line of code is used to create a temporary URL that point to the blob or file object in JavaScript so yeah this is what we are going to be doing right now

and we are totally done with This one so now let me just test this out first of all I'm going to go to my YouTube channel and then I'm going to download my own Banner I'm going to save there to my desktop and now I'm going to click on this icon and here I'm going to just choose my banner right here so whenever I click on there it's going to add my banner from my YouTube channel and it's going to add there right here so which is looking cool but we also have to take care

of our uh profile Image as as well so now underneath there we going to be also creating a logo or a profile image whatever you want to call there so now underneath this T here we're going to be defining our come on ah Channel logo there we go and here let's just take care of our Channel logo I'm going to create a with the class of flex and items will be set to Center margin for the left will be set to four and margin for the top will be set to arbitrary value like two rims

and now Inside this Dev we're going to be defining our IM and for the image text we're going to be providing our profile URL which we've already set up up above and now for this alternative text I'm going to write like Channel logo or something like that and for the class name I'm going to provide a width of 40 and the height will be also set to 40 and object will be set to totally cover okay and I'm going to also make it totally rounded full so that we get our Perfect Circle I'm going to

also change that to border totally white and relative r e l a t i v e there we go so now I'm going to save my file and yeah we are getting our profile kind of a logo but we also need a camera icon there so now let me just put a camera icon there okay so I'm going to first of all create my button button with the class of absolute and inside there I'm going to also provide the margin for the left of 3.6 rim and margin for the top Will be set to 10

rim and background will be set to totally gray of 8 100 and text will be set to totally white ping for all around will be set to two rounded will be set to four and whenever somebody H over there we're going to be changing the background color to gray of 600 and inside this button we are going to be rendering our fa camera icon and I'm going to also provide a class name or you know not class name but the size of 24 so if i s my file and check this Out so okay we

are getting something this is not what we want so I'm going to cut there and create my label first of all and for the label I'm going to provide like uh profile upload and we're going to be also providing a class name of cursor and which will be set to pointer and inside this level we're going to be providing our camera and I just specify these two classes and I remove the other ones so here you can see we are Providing a margin for the left but we are now reverting there by using the minus

and I just specify six RM and we are also providing a z index so that we can see our icon so if I remove this we are not able to see there if I do provide my Z index we are now able to see or icon there I'm going to also provide the margin for the top of two rims so that we can see that or you know what six Rim would be fine God damn it eight or nine rims nine Rim is looking Cool yeah nine Rim is looking cool now underneath this label what

do you want to do we just want to create our input field so I'll use like input and the type will be set to file here we also have to specify the ID which will be set to profile upload okay like so we're going to be also providing the except flag which will be set to image in every single image okay and class name will be set to Hidden so we just want to hide there and when somebody try to change There we're going to be firing this function which will handle which will be handle

profile change I'm going to copy the name of there go to the top and create this function underneath that I'll just use like con handle profile change it's going to take the event and that's going to be set to any and here I'm going to write like file not files but just a file which will be coming from the event. target. file or God damn it files and the first file now to need That we just have to check if we have the file so in this situation we are going to be using like set

profile URL and we are going to be providing a URL API and then inside there we have our create object URL and then just P our file inside there okay so here you can see if I click on there but before I do I'm going to have to save my profile image and also save there now let me click on this icon I can choose my image and who is this amazing guy Awesome so yeah I can change the background color and I mean like background image and I can also change the profile image now

underneath this button we're going to be providing our Channel details details there we go and now need the let crate over D with the class of margin for the left will be set to four margin for the top will be also set to four okay so H1 with the class of text to Excel and font will be set to bold which will take my own name you can Specify your own name name if you wanted to Sol right like hosan web dev baby see if I save there we're now getting there but that's not looking

that cool set just provide a margin for the left of four would be fine and now underneath them we're going to be creating our paragraph with the level of 1 million views did I even get a 1 million views not quite sure about that but create a paragraph with the class of margin for the top of two and which will have a bit Of description I'm going to just place this description right here like this is a short description for the YouTube channel it gives the overview of the content and what viewer can expect or

yeah expect so I'll also provide the margin for the left of four to this one for REM copy there and create a class name for the paragraph and place that there still amazing finally I'm going to create a subscribe button and you guys should subscribe to my YouTube channel So margin phot top will be set to four and background color will be set to Red of 600 and I'm going to also provide a text of totally white ping for the Y AIS will be two ping for the xaxis will be four and totally rounded and

whenever somebody H over there we are going to be doing that arbitrarily so I'll just write like background totally red and 500 inside the and inside this BT I'll just say like subscribe subscribe baby sem my file now We are getting our subscribe button but we also have to specify the margin for the left or for Rim like so and yeah this is looking better now that we have to create our tabs component so I'm going to create a component with the name of tab. TSX or tabs rather and I'm going to be using my

rafc inside there now let me just save this file and here we have to call our tabs component right here okay so I'm going to save my file right now check this out so here you can See we have our TS component which is looking cool so what I'm going to do is that first of all let me just zoom in a bit I'm going to place the tabs data right here okay so here you can see we have our tabs array and inside this tab array we have a few objects so each object will

have the ID icon label and content so this is how our content will look like first of all we are going to be creating array with the six item and then we're going to be iterating over Through each of that item then we're creating a card component and that card component will accept the key prop title description and also the image okay so yeah here you can see we have there like a few times and we are going to be trading over through there so what I'm going to do is that I'm going to just

import all of that icons like first of all we're going to be importing the fa home and we are going to be also creating this card or you know let me Just create this card right away so I'm going to just create a component with the name of card. TSX and let's just use our rafc inside there and I'm going to also import that right in here I'm going to remove this D and rewrite that and hit enter so it's going to import there right here okay so let's just import this icon and we are

going to be also creating the about component so I'm going to also do that right now now okay let's SC we about TSX and use the RFC Inside there save this file and go to this steps component and import my about right here okay and we're going to be also importing this this icon let's just import this icon I'm going to also import this phone icon and I guess that's going to be the last one we also have to create this contact component so I'm going to create a component with the name of contact. TSX

and I'll just use the RFC inside there and now let me import there right here so if I save my File so that's going to be like all of the data so I'm going to collapse that and yeah that's done next thing that we have to do is that we have to create our state forward tab so I'll just write like uh active Tab and then set active tab it's going to be equals to the use St and for the initial value we're going to be providing all of the tabs data and we are going

to be getting the first stab out of there and from that first step we going to be getting the IDE Okay so that's done now let's get into the UI so I'm going to remove this tab from here I'm going to provide a class name and pairing all around will be set to four margin for the top will be set to three R and inside this D we're going to be creating a d with a class of flex and Border for the bottom and also border gray of 200 let me just go back and inside

this div now we going to be iterating over through all of their tab okay so what I'm going to do is that I'm Going to write like tabs and then it right over through all of their Tab and let me just spr it tab like so inside there we're going to be creating our button and this button will have a lot of styling but you know what yeah I'm going to just do that right now for the key we're going to be getting the key by using the tab. ID I'll also provide the class names

today but they will be dynamic so I'm going to have to use the template leral for the so I'll use like Flex one text will be set to totally Center pairing for the y axis will be set to two pairing for the xaxis will be set to four and font will be set to medium like so text Will to totally small and we have to render our active tab right here so if our tab is active and let me just write like triple equals to tab. ID so if that's the case so in this situation

we're going to be changing the border to border bottom of two but if that's not the case we're Going to be setting there to Tex gray of 600 right here let me just write a 600 God damn it 600 and when somebody clicks on there they're going to be fing this function so I'll just use like this aror function which will say like said active Tab and here we have to specify the tab. ID inside there inside this button we're going to be creating a d with the class of Le and then items me just

write items and Center we're going to be also providing a justify of Center space will Be set to the xaxis of two inside this de I'll just use like uh what do we call it tab. icon and also underneath there I'm going to create a span which will tag the tab. label I'm going to save this file so we are now getting these tabs if I click on the about it's going to gives us the about section if I click on the project so it's going to gives us the project courses and also the contact

so that's looking cool now underneath this div what I'm going to do is that I'm going to create a div with a class of margin for the top will be set to four pairing will be set to four and also totally rounded large and inside this one we're going to be using tabs. find and here we have to specify the tab and now we just have to use a tab. ID that's going to be triple equals to the active tab let's just WR our active Tab and if that is the case we only want to

get the content out of there now let me just save my file and here you can see It's going of gives us like card card card that much time so what I'm going to do is that I'm going to go into my card component and now let me just take care of that time to create the card component so we first of all need the title description the image and also the link from our props and for them we are going to be also creating an interface so I'll just create interface with the name of

card props and inside there let's just Prov our title and that's Going to be a string and description will be also a string and the image will be string and finally we have to provide the link everything is a string okay and we have to also inate the with our card prop right here sa my file next we have to use there so what I'm going to do is that I'm going to just remove this card go back and inside there we will first of all Define our card by providing a Max come on let's

just provide our Max with of small and Also provide the MX like margin for the x-axis will be set to Auto and margin all around will be set to one ram and let's just put the background color and background color will be set to uh 1 A 1 C and 1 E like so and we're going to be also providing a rounded large Shadow will be set to medium and overflow will be set to Hidden in this case now let me just use my image and for the image we're going to be rendering our image

totally dynamically so I'll just use the Image I'll just write like right here and I'm going to also provide the class name withd will be set to totally full and also height will be set to 48 like so and object will be set to totally cover so that we can see all of this now let me just save my file and here you can see we are now getting all of their images which are looking great now underneath we're going to be defining our D with the class of pairing all around will be set to

six and now inside There let's just use our H2 with the class of text 2 Excel and the font will be to totally Bard margin for the bottom will be set to two and here let's just render our title like so we're going to be also using a paragraph with a class of text totally set to gray of 700 margin for the bottom will be set to four and let's just render or description right here so I'll just use a description and now to need that we have to create our anchor tag which will Not

take anything but we are just going to be providing our link right here so I'll just use a link and I'm going to provide a lot of class names to it so I'll just use like inline block and also pairing for the xaxis will be set to four pairing for the y- axis will be set to two background color will be set to totally white text color will be set to totally black font will be semi bold like so and totally rounded large and Shadow whenever somebody H over there so We just want to change

the background color to gray of 600 and also on the hour text will be set to totally white we going to also specify the Transitions and duration will be set to 200 inside this anchor tag we will just select learn more if I save my file and this is how it looks like but they are looking off they are looking super awful to fix that I'm going to go into my CSS and provide this line of CSS so we only want to change the background color to this One and provide a text color to that

one okay so now if we change that and that's not looking that cool yeah it is not looking that cool remove that once again also remove the text color and and yeah it is looking cool yeah it is looking great so we can do a lot sort of stuff with them but you know I don't have a lot of time for this UI you can change the UI to like however you want but I only want to focus on the logic so let's get into the about section the about Section will be super straightforward so

I'll just go ahead and remove the about right here and change that to section and also change that one to section as well and let's just provide our class name of background gray of 100 and pairing for for the y axis will be set to 12 pairing for the xaxis will be set to four and for the smaller screen size we're going to be setting the pairing for the xaxis of six and for the largest screen paing for the xaxis will be set To add Okay add and inside this section we're going to be creating

a d with the class of Max with which will be set to for Excel and also margin for the xaxis will be set to Auto inside this D let's just create our H2 with the class of text two 3 XEL to be precise and font will be set to extra Bol okay and the text will be also set to gray of 900 and margin for the bottom will be set to four God damn it six there we go and I'm going to write like about husan and you Can specify your own name and here you

can see we now getting our about H which is looking great but now underneath this H2 what do you want to do you just want to create our paragraph in which will select text of totally large and text will be set to gray of 700 now let me just place all of this stuff about myself you don't even have to worry about any of that and you can also copy and place there or you can just ask CH gbt to Write there for you and now underneath then I'm going to also create a paragraph once

again with the class of margin for the top will be set to four text will be set to um extra not extra large but just large text will be set to gray of 700 so I'll just write a 700 and hit enter and inside then I'm going to place my more content so these are just the videos if you want to watch them and this this is just about section about me now let me just go ahead and go to the Projects and that's also done we also have to go into the courses that's also

done but finally we have to take care of this contact Section and we are done now let me go ahead and go to my contact and let's just provide my contact Section right here as you can see I have a links array and inside this array I have a few object each object will have the reference the label and also the icons so what I'm going to do is that I'm going to also place all of that icons Right here here so that errors are now successfully gone if you want to provide your own links

you are more than welcome to do there but if you want to provide mine so you can also go ahead and copy that from my gab repository so let me just close there and now we are going to beating over through there and then we are going to be rendering there so what I'm going to do is that I'm going to just remove this contact from here and select this div and change there to a Section I'm going to provide the class name of background gray of 100 pairing for the y-axis will be set to

12 pairing for the xaxis will be set to four and for the smaller screen size we're going to be providing pairing for the xaxis of six and for the large screen size we are going to be providing pairing for the xais of add inside this section we're going to be creating our H2 with the classes of text 3 XEL and font will be set to extra bold and text will be gray 900 and margin for the bottom will be set to six so contact me and sa my file now here you can see we're now

getting our contact me section right here and now to need the let's just create or div with a class of links and items is now set to Center and here we're going to be iterating over through all of that links from here like as you can see we have all of that links now you want to over through all of them and provide each of the link inside the links we're going to Be rendering our anchor tag and I'm going to remove this HF and change that to uh link. HF I'll also provide the key

and for this key I'll just rer like link. label we also have to provide the Target and Target will be set to- lank WR the relation and also the classes so for the classes flex and items will be set to Center space will be set to X XIs of two and text will be set to gray of 900 and somebody how over there so text will be set to gray 600 margin for the Right will be set to two RS like so r two r r m there we go and now inside this one what

do you want to do you just want to write over uh link. icon save my file and now underneath this link icon let's just create our span the classes will be text large this going be it and here we have to render our link. Lael like so and that's going to be it for the contact Section so let's just check this out here you can see we have a Twitter or X nowadays we have a YouTube GitHub and Instagram okay so there a contact Section we have a courses projects about and home we can also

provide our own profile image we can also provide the banner image from our computer and this is just our basic project time to make a set of four or third projects so let's just write npm create we at latest the project name is blogs and I'm going to choose reactjs with typescript go into the blogs and now let's just install every single Thing now I'm going to go into the tailin CSS click on the getting started go to the framework and guide now let me copy this command and place a right here inside my integrated

terminal hit enter to configure tment CSS and also I'm going to copy this content let's just copy there and go into my tailing config and replace it with this content so let's just do there I'm going to also go ahead and copy every single thing from there go to the index. CSS file and Replace it with this new one okay and I guess that's going to be it but I'm going to copy there let's just go into the F do not CSS but f. TSX and remove every single thing from there and I'll just write

RFC and let's just write this H1 word here okay so I'm going to open my terminal once again and use npm run Dev and let's just check this out yep we are getting a hello world but I'm going to also make a bit of cleanup so I'll just remove this assets folder the Public folder the app. CSS folder and yeah I guess the rest of them will be fine next we're going to be defining our navigation so I'll just create a div and inside this div we're going to be rendering our navigation but first of

all let me just create a folder with the name of components and inside there we going to be creating our navigation. TSX I'll use the RFC and register there right here inside the app component like navigation this component semi file and Here you can see we're now getting our navigation which is looking cool so let's just style our navigation then we're going to be jumping into the next stuff so I'll change this div to nav because we are creating our navigation and I'll provide a class name of Border 2 and text will be set to

totally black border will be gray of 200 pairing will be set to four and it's going to be a flex justify will be set to between and items will be set to Center inside this Navigation we're going to be creating a d with the class of legs and then items will be set to Center border will be set to two and totally rounded four paing for the xaxis will be set to four ping for the y- AIS will be set to two Max width will be set to medium and margin for the left will be

set to arbitrary value so I'll just use like uh five R inside this we're going to be rendering our icon but first of all we have to install that so I'll use npmi and then React icons so it's going to install the in my machine now that's done let me use my npm rund once again and I'll just use like fa search from where from the react icons so let's just render them now underneath them we're going to be using our input Fe with the type of text I'm going to also provide the placeholder which

will say like search dot dot dot and I will also provide the class name background will be set to totally transparent and also I'll outline will Be set to none and width will be set to totally full okay I'm going to go back so you guys can see everything a bit better and this is how it looks like right here I know it is looking awful but yeah it is looking still a bit better now underneath this day we're going to be creating a section with the class of flex and then items come on items

will be set to Center and I'm going to also provide margin for the right of five Rim like so and inside This section let's just render our fa user Circle okay render them and I'm going to provide the class name of text will be set to 3 XEL margin for the right will be set to two if I sell my file and check this out so here you can see we now getting our icon we are also getting this search field word here now I'll go to my f. TSX once again and here inside there

I'll create with a class of flex and justify Center and inside this D we're going to be creating our main Area right here but not right now now now underneath we're going to be creating our div with the class of width and the width will be arbitrary value like 30% and let's just close there inside this div we're going to be defining a few component let's just start from a people to follow component so I'll just create a component with the name of people to follow. DSX and I'm going to use my rafc inside there

and render People to follow right here semi file and here you can see we now getting more people to follow component which is looking great so the first thing that I want to do is that I want to place these people to follow and we have a few people names and also the following list so what I'm going to do is that I'm going to iterate over through there and render there into this component okay so I'll just remove this people to follow I'm going to provide a bit of classing To it so background will

be set to totally white and padding will be set to four and round it totally large Shadow and now underneath there create H3 with the class of font semibold text will be Lar mer and merger for the bottom will be set to four which will select people uh or who to follow whatever you want to call them then create a with a class of space y inside the list is itate or through all of that people to follow so I'll just put that right here and I'm Going to use the map method it's going to

take the person and also the index and inside this Arrow function we're going to be creating our user card which will take a key as a prop and inside the key we're going to be providing our index and then it's going to also take the person is the main value okay so I'm going to close there and create my card component right here I'll just use a or user card. TSX inside there let's just use our RFC sem my file and render that Right here so we have to render our user card component and here

you can see we're now getting user card user card a lot of time now let me go into this user card and create there so it takes the index and it also takes the person okay so let me just create uh interface for this so like user interface user card props or something like that I'll provide index which will be set to a number and I'm going to also provide a person which will be set to a String and I'll annotate there with the user card prop and now let's get into the UI I'm going

to remove this user card from here and I'm going to put the class name to this so let's just put a flex and items will be set to Center and justify will be set to between in this case inside this let's we're going to be creating a section with a class of legs and items will be set to Center inside there let's just render our icon which is fa user Circle and render there right here with also these classes like text will be set to 3 XEL margin for the right will be set to three

and text will be set to totally gray of 500 500 like so now let me just save my file and here you can see we're now getting that icons right here which is looking cool but now underneath that we're going to be also creating a spin and let's just render our person. name inside there and yeah this is how it Looks like and they are looking cool now underneath this Dev uh or this section to be precise we're going to be creating our button and inside this button we will just say like person f o

l o w iing if that's the case we are going to be saying like following but if that's not the case so we will just say like follow and here you can see we now getting the follow button and also the following button right here now let me just style that a bit but that St triling with Now let me go ahead and create another component with the name of uh Trends list. TSX and I'm going to use the RFC inside come on RFC inside there once again and go to my f. TSX and render

this comp component right here like Trends list yeah and render there this is how it looks like is there I'm going to render all of their Trends right here so you can also copy that from my giab repository if you wanted to so basically we have array with the name of Trends Inside there we have a few objects which will have a title and also the author okay so you can also create that by yourself if you wanted to but if you want to copy that from my gab repository you can totally do that so

I'll just remove this Trends list from here and I'm going to provide the class name background will be set to totally white pairing will be on around set to four and rounded large Shadow will be also provided and margin for the top will be Set to eight and inside this da we're going to be creating our H3 with a class of font semi Bold and the text will be set to totally large margin for the bottom will be set to four and I'll just say like today's uh top trends or something like that now if

I save my fil so this how it looks like they are looking great and now let's just use our UL with the class of uh space on the y- AIS will be set to four and I'm going to itate all through all of their Trends by Using the map method it's going to take the trend and also the index so inside this function what do you want to do we just want to get our Ali and inside that lii first of all let me just provide a key and the key will be that index and

I'm going to also provide the class name let's just write a class name class name will be set to flex and flex will be set to column inside that Ali we're going to be using our span spin like so and proide the font of medium turn so in This case we're going to be using trend. title and now need this span we're going to be creating our span once again with the class of text small and also the text will be set to gray of 500 okay and by who by the trend and then do

author come on go to the top remove that icon from there and change this one to trend. author now that's done let me check this out so yeah there other component which is also looking cool now I'm going to go to the ab. TSX file once again and Create my topic list component so I'll use like topics list. TSX and create my component right here and register that topics uh list component here I'm going to sa my file go there once again and the first thing that I want to do is that don't want to

just place these topics like we have technology and design and thinking and so on and so forth I'm going to place that here now I'm going to go into my UI so I'll change the background to totally wide Pairing will be set to four totally rounded large and Shadow margin for the top will be set to eight and inside this D we're going to be creating our H3 with a class name of font semi bold and also the text will be set to totally large margin for the BM will be set to four which will

say like topics uh for you sa my file once again and we are now getting our topics for you right here now underneath the I'll create with a class of flex and also Flex will be set To W and WP like so and GAP will be set to two inside this D we're going to beating over through all of their Topics by using the map method and provide my topic let's just write a topic and also the index inside there and this pen will have pairing for the xaxis of three and piring for the y-

axis of one background will be set to gray of 200 and the text will be set to gray of 700 like so if I hit Tab and I'm going to also provide a text of totally small And rounded full cursor will be also set to pointer and when somebody how over there change the background to gray of 300 and I'll also specify the key and the key will be our index inside this pen what do you want to do we just want to render their specific topic and now let me just save my file and

check this out so here you can see we are now getting all of the Technologies and stuff uh topics right here now let me create my context so the first thing That I want to do is I want to create a folder with the name of shared and inside there we going to be creating our block context. TSX and here we will need a few thing like create context we would also need the user and also they use context as well okay and now underneath there let's just Define our context I'll just use like create

context and the initial value will be undefined and I'm going to store there some sort of a variable like block context and it's Going to be equals to this context so now let me also create an interface for there so let's just create our interface and here it's going to take like block context type and inside this one first of all we are going to be creating our blocks this will be a huge block so I'm going to separate that into a separate file so I'm going to go ahead and create my file right here

with the name of types. TS and I'm going to just place these types right here so we have ID Which will be a number the title will be string description will be string the image will be string and the time will also be string okay so what I'm going to do is that I'm going to grab that right here and underneath that we're going to be also defining our add block that's going to be a function which will take a Blog as a perimeter we're going to be also providing the blogs as a type and

it's going to return the wide and now also let's just provide our update blog It's going to be set to the blog once again and here we have to annotate the with the blog and inside there we're going to be only returning the white and also we have to delete the blog so let's just put to our ID and ID will be set to a number and it's going to return the white okay so now that's St done I'm going to annotate my context by using this block cont context type or undefined so initially we're

providing the value of undefined today so that's Great now that we have to create our provider so I'll use a cons and then block provider and here we're going to be annotating there by using react J and then functional component okay so if you want to annotate them we're going to be providing a children and for this children we're going to be using react. react node which will be coming from the reactjs and now let's just create our context right here so what I'm going to do is that I'm going to only provide my Children

now let me just save there the first thing that I want to do is that I want to just use my use St and the initial value will be set to this empty array and I'm going to also inate with the block and here we have to just write a block of array I'm going to restructure the blogs and also the set blogs out of there now we are going to be also creating a function which allows us to add a Blog so I'll use like add blog and it's going to be equals to the

Blog and I'm going to also annotate the with that blog okay and inside we're not going to be doing anything crazy but I'll just write like set blocks and first of all we have to clone our existing blocks and then we have to add our new one now underneath there we're going to be also creating one for the updating a Blog so I'll just use update blog and here we have to write like update blog and annotate the with or blogs type inside there I'm going to use My set blocks because we are going to

be mutating them and here we have to itate over through all of the blogs I'll use like blogs. map and let's just provide our block to them and here we're be checking if block bog blog. ID is triple equals to the updated blog. ID in this situation we going to be rendering our updated blog come on uh updated blog but if that's not the case we're going to be rendering our blog just like there I'm going to copy this updated blog and now Let me just put that here and finally let me create one more

function for the delete block I'll write a delete Block it's going to take the ID and ID will be a number and inside there we're going to be using our set blogs here we have to provide our blogs and use a filter method and it's going to take the perimeters we're going to be providing the blog as a perimeter we are going to be removing that specific block whose ID is not equal to the ID which we are Providing for the perimeter okay so now that we successfully created or stad the add function update function

and also the delete function now let me provide there by using my provider or context provider so what I'm going to do is that I'm going to just return and inside I'm going to be using my block context which we've created it up above and here it has a provider property so I'm going to call them and now for the value I'll just provide my value right here like Blogs and then add blog and update blog and also delete blog like so now inside there we're going to be also rendering our children that's going to

be it for the blog I also create a hook for myself I can totally create in the separate file but I guess I don't have to so I'm going to export that because we're going to be using the into multiple file so I'll use like use blogs and inside there we're going to be first of all consuming our context so for that we're going to Be using our use context and provide my block context inside there and I'm going to also store there in the context uh variable so I'll just use like context and now

underneath there I'm going to be checking if you don't have the context so in this situation we're going to be throwing new error which will say like use blocks must be used within a Blog provider and now underne this check we are going to be just returning or context and that's going to be fine okay So now we are totally done with this provider but we also have to export them so we can use them so I'll just use like export and then we will be able to use there now I'll use my provider to

provide all of that Valu so I'll just use like block provider and then I'm going to close that right here like so now here inside this main area what I'm going to do is that I'm going to create a section with the class of margin for the xaxis will be set to Auto and and Pairing will be set to six and inside this section we're going to be creating our div and then create a button and which will have a few classes like uh you know let me just put a bit of classes to it

like margin for the left will be set to seven R background will be set to totally black flex and justify will be set to Center and items will also be set to Center text will be set to totally white and pairing for the x-axis will be set to four pairing for The y axis will be set to two totally rounded margin for the bottom will be set to four inside therefore the I'll just use like add new block and here we're going to be adding a new block so I'll just use like IO MD add

Circle and hit enter so it's going to add there right here and for the class name I'm going to provide the margin for the left of zero of5 rims case now if I save my file check this out so here you can see we are now getting our button which is Looking cool but we're going to be also attaching a event handler on there so when somebody clicks there we're going to be fing this function which will be open model for new block okay so we're going to be creating this function in a few second

but first of all we have to create our stat so I'm going to go to the top and create my stat right here I'm going to Define these two State like is model open and then set is model open and inside there We're going to be also getting or Us St and also editing block and set editing blog and we're going to be getting our block types from this types file as now underneath we also have to Define two functions so for the first function we going to be defining like open model for new block

inside this function what do you want to do set editing block you want to set that to now and then set model open and you want to set there to true now underneath this function we're Going to be defining one more function for the open model 4 edit and here inside this function we going to be saying like set editing blog and the initial value will be set to blog and also set model open here we're going to be setting that to true now that's successfully done I'm going to go to my UI once again

again now underne this button what do you want to do here we're going to be also rendering our article list component which we're going to be Creating in a few second but now I'm going to check if our model is open then show this UI but if our model is not open then don't show anything at all and I'm going to first of all create my model component which I am going to do in a few seconds so I'm going to close there and it's going to take a lot of things and it should be

a model like so I'm going to copy there and place it right here and now let me just go ahead and create this model component inside My components folder so I'll use like model. TSX and Define my model component right here so I'll use my RFC inside there and here what I want to do I want to use my react and then functional component from the reactjs and here it's going to take a children so I'll just write like children and that children will be react. react node just a react node like so and I'll

also close them and now the next thing that we have to do is that we we also have to specify The own close prop it's going to be a function it's going to just return the wide okay so that's already done I'm going to close there like so now for the actual props we're going to be only returning the children and then the on close right here so now if I save my file so this is how it looks like and now for this UI I'm going to first of all provide a lot of classes

like fixed and then insert will be set to zero and background will be set to totally black Background opacity will be set to 50 in this case and also Flex items will be Center justify will be Center and inside this div we going to be creating yet another div with a class of background totally wide pairing will be set to four totally rounded large and also shadow in this D will be relative like so and provide my children inside there and now underneath there we're going to be also creating a button and which will just

say x like cross and we're going to be Also providing a classes for this one as well like absolute top will be set to two right will be set to two and text will be set to gray of 500 100 lik God damn 500 there we go and when somebody clicks on this button so we're going to be firing the on close on close function which it is taking as a prop now our model is totally done we have to import that model right here and I'm going to just hit enter so it's going to

import that here for this model I'm going to Pass my own close function on close and that function will be just an arrow function which will just say like set model open and here we have to specify the false value inside there and inside this one we're going to be also providing our blog form which we are going to be creating in a few seconds so now let me just save my file and create this blog form component so I'm going to just use like blog form. TSX and I'm going to use my RFC Inside

there and import my blog form component right here check this out so if I click on there it's going to gives us that block form it's going to also gives us that X symbol so if I click on this it's going to make it up here now let's start work on this block form component so it's going to take two props so the first prop it will take is the existing block this going to be set to the editing blog which we' have defined up above and I'm going to also Provide the on close so

on close and it's going to take the arrow function so I'll just use like Arrow function by providing a set model open and I'm going to change their two fils okay so now let me just save my file and let's just go into this blog form component and the first thing that we have to do is that we have to grab our custom hook which is the US blog okay we already find the in the cont and what I want to do is that I want to just destructure uh the add blog And also the

update blog from where from the used blog okay and now underneath that we're going to be also defining our title and then set title and this going be equals to the use State and for the initial value we going to be first of all destructuring our existing blog uh you know what let me just go ahead and grab the name of them so I'll just copy the name of that put the right here and I'm going to also get this on close and put there right here so now it's going To gives us a lot

of Errors so I'm going to use my react functional component and annotate there with the blog form props and now let me just create their types right here so we're not going to be doing anything crazy but we're going to be creating our interface with the name of blog form props it's going to take the existing blog and we have to annotate them with our blog which we're going to be getting from these types and now we also have to provide the on close And it's going to be just a function which will just return

the wi that's really done and we now successfully annotating there and now we have to use the inside our component so what I'm going to do is that I'm going to also create a state for the description description and then set description it's going to be equals to the US and here I also forgot the initial value for this one so if we have the existing block and then we're going to be getting A description out of there so if you already have there so then use there but if you don't have there then we're

going to be Shing there to empty string and now for this description we're going to be also providing the uh existing existing blog and from this existing blog we're going to be getting a description and for this one we going to be getting a title there we go okay so if you already have the existing description then use them but if you Don't then just provide the empty string Right Here and Now underneath that we're going to also creating a state for the image and then set image this going to be equals to the U

State and we're going to be using the existing data exis s t iing existing block if you have this we want to get an image out of there but if you don't so we just want to set that to empty string now let me just provide one for the time and then set time it's going to be equals to the used St and we Are going to be getting our data from this existing block if we have that data then use that data but if we don't then we're going to be setting that to empty

string now we are going to be using a side effect so like whenever our component first renders so we just want to f all of that field I'm going to be providing my existing blog okay so whenever our component first rendered so it's going to take all of that data it's going to fill that inside their input Field so I'm going to just write like first of all if we have the existing block come on existing block so in this situation we are going to be getting the set title and we have to provide our

existing block data to this I'll use like existing L you know I'm going to have to copy there and I'm going to use my title and now we are going to be doing exactly the same thing for the description so existing block. description and also the set image Whenever our component rendered so we are going to be also providing the image and finally for the time okay so I'll just write like existing block. time and that's going to be fine okay so then said now let me just go back and now let's get into this

UI I'm going to remove that from here and provide my class name so for this class names the background will be set to totally wide pairing for all around will be set to six rounded large and also with will be Set to 30 rim and also margin for the xais will be set to Auto and here we have to use our H3 with the classes of font semi bold and text will be set to extra large and the margin for the bottom will be set to two text will be set to totally gray of 800

okay inside this one we're going to be checking if we have the existing blogs so then we will say like edit blog but if we don't have there then we're going to be changing there to add block okay so now Let me just save my file and test this out so here you can see we have like add new block so if I click on there now it's going to use us like add block because we don't have any data inside there so that's why we are now getting like a block so that's cool now

underneath this H3 we are going to be defining our dat with the class of space on the y- axis of four and then inside the we're going to be defining our input field with a type of text and also the Placeholder will be set to title and here we're going to be also providing the value and the value will be coming from this St so I'll just get the title and put the right here inside this title okay and then we are going to be also providing the own change even hand whenever somebody types something

inside this input field we're going to be firing this set not time but set set title there we go and we're going to be providing that value which we are Getting from this input field now what I'm going to do is that I'm going to just specify these classes and that's going to be done now if I click on that so here you can see we now getting our input field with the placeholder off title so that's looking great next we have to Define our text area so I'll use like text area and we're not

going to be providing any IDs and names I'm going to remove that from here and for the placeholder I will just say like Description and we don't want to close this separately we want to close there as a on liner and for the value we going to be passing our description which we've already created up above and when somebody types something inside this we are going to be fing this function and we will say like set description to e do target. value and also I'm going to be placing these classes for The Styling so let's

just check this out if I click on there and this is going to be my text Area now underneath this text area we're going to be defining our input field once again and now what I'm going to do is that I'm going to just provide my placeholder image URL and also provide the value and the value will be that image value and somebody types something inside there so we're going to be firing this function which is a set image and provide my event. target. value inside there and also for the classes we're going to be

placing these classes right Here now underneath this input field we're going to be defining or you know what underneath even this uh div we're going to be creating a section with the class of flex and justify will be set to end and margin for the top will be set set to six space on the xaxis will be set to four and inside this section we're going to be creating our button and for this button you will first of all check if if we have the existing block then we will just say like update But if

we don't have the existing block we will just say add now for this button we're going to be attaching the own click event handler which allows us to submit our forms so we're going to be providing like handle submit and we're going to be also creating this function in a few seconds now let me just Place The Styling and that's going to be it for this button now underneath this button we going to be defining one more button with the class of you know what We're not going to be providing any classes today we are

but I'm going to just copy and place there and when somebody clicks on there we're going to be fing this on close function okay and it's going to just say like cancel and now let me just style that a b that's going to be fine now we have to copy there and create the up above so what I'm going to do is that I'm going to Define my handle submit function and inside this handle submit first of all We're going to be creating a Blog and I'm going to also annotate the with my blog and

here it's going to be equals to the ID and the ID will be the existing come on existing blog if that's the case we are going to be fing the existing blog. ID but if that's not the case so we're going to be using that. now for that new second or for that new time okay we're going to be also putting the title description d e s c r i p t i o n and Also the image and the time so that's going to be basically my blog now we have to check the if

you already have the existing blog so in this situation we are going to be using the update blog and we're going to be also providing the blog inside like all of the existing data but if we don't have the existing data then we're going to be creating a new blog and providing that newly created data which we've already created and all of that data is coming from Their appropriate stat so you know let me just show you there this title is coming from this title come on this title and then description then image and also

the time and we're now providing the inside this blog now for this blog we're going to be providing our blog and also we have to close them by using the own close function okay that was a lot of talking so now let me just test this out so what I'm going to do is that I'm going to click on there And now it's going to give us like the title description image and so on and so forth and I'm going to just write like um I don't know oh my God Vlogs Wikipedia blogs top 50

blogs I'm going to choose that first one and I need some sort of a block so I'm going to go into that first one yep I'll go to the Reddit and copy some stuff from there okay so 3 months of whatever this is I'm going to copy there and place There and for the description I'm going to only place this first portion and for the image I'll just copy the image from somewhere so I'll just go to the unsplash.com go to the unsplash and copy some sort of image so I guess no that's bad one

I'm going to have to choose some sort of a free image like this one now let me right click on there and copy the image address place it here and click on the add so it's going to add there right here but we cannot see there and the Reason we cannot see there is because we have to create our article component so that we can render our articles inside there and we're going to be rendering our articles right here there we go so what I'm going to do is that I'm going to create my article

list. TSX component and I'll just provide my RFC inside the sa my file and render that article list component right here article list and hit Ander is going to render there right here yep we are getting our article list Which means like we are providing some sort of a data inside there it's going to also take one PR which will be the on edit and we're going to be providing the open open model for edit right here now let me go into that article component and let's just create the right here the first thing that

we want to do is that we want to grab my use blogs and we want to use it right here but first of all we have to destructure the block and also the delete block so I'm going To save there next we're going to be also annotating this component so I'll just create an interface for there with the name of article a r t e a r t e list props and inside there we going to be also returning the own edit and this is going to be a function which will take a Blog and

we are going to be annotating there with our blogs type and let's just return the white out of there and I'm going to copy there and annotate my component component by using react. FC For functional component and annotate my component like so it's going to also take the on edit as a prop that's done now for this UI what I'm going to do is that I'm going to just remove that from here and I'm going to Prov the class name of margin for the left will be set to fire frames and inside this D we're

going to be iterating over through all of that blocks and I'm going to provide a block as a perimeter and inside there we're going to be rendering one more Component which will be article card component and we're going to be creating this article card component in a few second just going to take the key and we're going to be providing a blog. ID as a key we're going to be also providing an article and that article will be that entire blog we're going to be also providing the on delete so that we can totally delete

there if you wanted to so in this situation we're going to be finding this function like Delete blog and here we have to specify our block ID and also the on edit it allows us to edit the block so we're going to be firing this function which allows us to edit our blocks all used like on edit and we have to specify our block inside there now let me go ahead and create this article card component so we just create my article card. TSX and inside there I'm going to be using my RFC s my

file and grab this component right here this is s file and now let me Test this out so if I click on that I can just write some sort of a gibberish like so and now if I click on the add button so it's going to use us a article card which means like everything is working the way we expect him to work now what I want to do is that I want to first of all create my interface for all of that prop so I'll use like rtal card props inside this one first of

all we going to be providing our article a r t i CLE and that's going to be our Entire blogs we're going to be also providing the on delete so we can also delete the and for this one we're going to be returning the wi function and on edit you would be also able to edit our um card so let's just proide the right inside there okay so what I'm going to do is that I'm going to annotate there with the re functional component like so and I'll just provide My article card prop inside there

and from this one we're going to be restructuring all the Four props so I'll provide My article the on delete and also the on edit like like so okay so that's cool now for this de I'm going to provide a lot of styling Place The Styling and for this label I'm going to remove there and render my image and for this image I'll just say like article dot not this one but a r t i e article. image and we also have to specify some sort of alternative text for there so I'll use like article

do title and we also have to specify some Sort of classes for this so now let me just go back with will be set to 36 36 like so height will be six to 24 and object will be set to totally cover and totally rounded large Shadow will be medium and that's going to be it and here you can see see we're not getting any image that's because we are providing some sort of a Gib to there let me just refresh there and add a new block I'm going to copy this image from there and

put that image and if I C and If I hit on this add now it's going to gives us that image right here which is cool now underneath there we're going to be also creating a d with the class of margin for the left will be set to six and flex will be set to One Flex and then Flex will be also set to column and H3 and let's just put our text of totally extra large and font will be set to semi come on semi bold and text will be set to gray of 800

and margin for the bottom will be set to two cool and we Also have to render our article. title inside the so now if I save my file and here you can see we're now getting our article title which is also looking awful because we did not specify nothing inside there and let's just take care of the paragraph so I'll just write like uh article do God damn it r t i e article description and provide a styling to this I'll just use like Tex of to is small and text will be cray 700 and

flex will be set to one Save my file and yeah this is how my description looks like underneath this paragraph we going to be defining where div with the class of flex and items will be set to Center justify will be set to between margin for the top will be set to four text will be set to of 600 and inside this D we're going to be creating our spin with a class of text small and and inside this one we're going to be using article. time save my file and we cannot see the time

I don't Know why let me go ahead and go to my blog form God damn go to the blog form so we have a title then we have description then we have the image we oh yep we forgot to include the time so let's just render the time as well so I'm going to create input with a type of date and placeholder will say time and also provide the value which we've already specified as a time or did we even specify the time or not I forgot yep we Did yeah we totally did so here

what I'm going to do is that I'm going to proide the on change EV hander and when somebody try to change there we're going to be firing this function which will take like event. target. value and we're going to be also providing a bit of classes today so I'll just go ahead and place these classes and now if I just refresh there here you can see we have our timer can write whatever I want to write copy the image of that place it Right here and I'm going to set there to today now if I

add there and here you can see we are also getting their time now let me go to My article card and underneath this span uh I'm going to be creating yet another day with the class of flex and space on the xais will be set to three and inside there this is render or fa book Mark Mark like so and I'm going to be providing a classes to it so all we just place these classes and now underneath this bookmark we're Going to be also providing the fa edit and also import there and provide a

classes to this one as well like so when somebody tried to edit there so we're going to be firing this function and provide our own edit inside there and also let's just render our final icon which will be fa a trash and hit enter and here we have to specify the final icon like so and we're going to be providing the on click event handler when somebody to click on there we're Going to be removing that uh that specific article and we are totally done with that let's just test this out so if I click

on this edit okay that's not working if I click on the delete that is working so what's up with that edit let me just test this out so I'll just provide some dat enter there and click on the edit go to my inspect element we're getting some sort of error blog is not defined and that is coming from 23 let me go into the app go into the 23 block is not defined what do you mean by there oh here we have to specify that blog so I'll just write a blog in here now it

is defined so we are going to be also annotating there with the blog like so now it is defined so now let me just refresh there add a random blog here like so enter there and now if I click on the edit so it's going to gives us all of their data okay that's working if I change that to my own name like Huzan webdev and change this description to Hello I am hen webd amazing YouTuber and for the image I'm going to go into my github.com and search for my own image which is hosan

webd go there copy the image and place it here and now I'm going to just update there to 14 click on the update okay the update spelling is incorrect up okay let me just fix that I'm going to go into the card and where is my update where in the world is that update button I'm going to search for you dtl dtl up DTE updte search for that and here we have to change that to update like so now this looking better okay so this is how we're going to be adding our block this is

how we're going to be editing there like let me just edit it with some random uh gibberish and click on the update so it's can also update there and I can also totally delete there that was a lot of talking and that Was our blogs project so now let's make a set of forward projects so the first thing that I want to do is that I want to install reactjs inward machine so I'm going to be using like npm weed or npm create weed at latest I'm going to give the name of like projects and

I'm going to choose a reactjs and typescript so now let me go into my projects folder and I'm going to install every single thing inside there now that successfully done I'm going to open that in my vs Code like so and first of all we have to remove this public folder because we don't need that we're going to be also removing this assets and app. CSS and index. CSS but we have to remove every single thing from there and also remove every single thing from the app and just provide like RFC inside there go to

the main and that's going to be fine okay so now let me install 10in CSS in my project so I'm going to copy there open my terminal and place this command here Hit enter to initialize my tailin CSS and now I'm going to copy this content go to my tailin config file remove there and replace it with this new one okay so that's to done and we also have to provide these directives inside our index.css so now let me go ahead and provide the save my file and then St it done so you know what

let me just check this out I'm going to be using npm run Dev to run my project so here you can see we now getting an app but I'm going To copy this H1 and go to my m. TS one more time and place it right here and we are now getting our hello word with the styling so which means like everything is now successfully working next I'm going to create my utl folder and inside there I'm going to Define my data. ts file okay so now I'm going to place a lot of data and

you can find all of their data in my giab repositories so here you can see first of all we have a data and we are now exporting there so That we can use the in other file okay so we have array inside this array we have a object and inside this object we have a client country email project progress status date and also different images for each of the client right here okay so yeah we have a lot of data and if you interested in all of that data you can totally go ahead and go

to my gab repository and grab all of their data from there but if you want to just proide like your own you can totally do That by yourself okay so that's done now let me just go ahead and create my component folder and inside there first of all I'm going to be defining my dashboard. TSX and I'm going to use my RAF come on rafc sa my file go to my app and registered there right here so I'll just remove there and I'm going to replace there with Dev and inside this D let me just

render my dashboard component okay so let's just save our file and here you can see we now getting Our dashboard which is looking amazing next let me just go to this dashboard and the first thing that I want to do is that I want to just make a bit of UI so I'll just write like class of FX and also the height will be set to screen and inside there we're going to be rendering first of all the Side Bar which we're going to be creating in a few second and we are going to be

also providing a d with the class of Flex one and background of totally gray of 900 And inside this one we are going to be rendering our project table like the main table in which we're going to be rendering all of our content so now then toally done so I'm going to go ahead and work with the sidebar so what I'm going to do is that I'm going to create my sidebar. TSX file file right here and I'll just use the RFC inside there and I'm going to go ahead and go to my dashboard and

remove this sidebar and replace it with this actual sidebar Component now let me go ahead and just style the sidebar right here so I'm going to remove that and provide a lot of styling to it so first of all we're going to be providing the width of 16 to it and we're going to be also providing a border and Border color will be this color like uh 24 24 24 this is prob a bit of pairing of four pixel and also Flex Flex will be set to column and items will be set to Center and

space on the y- axis will be set to add and That's going to be it and now inside this div we're going to be defining first of all our text of totally white logo so I'll just write a logo Right Here and Now underneath that I'm going to just create like text of totally come on text of toally gray of 400 it's going to take this icon like folder icon or something so I'm going to just place this folder icon and now let me just duplicate there and change the icon to like a person like

basically here here You can just specify any kind of icon that you prefer but this is just a sidebar and we're not going to be providing any functionality to it so that's why I'm just providing this icon so I'll just write like settings settings or gear Gear would be fine now let me just save there and check this out so here you can see we now getting our sidebar and which is looking amazing so that was there about four our sidebar and now let's get into the main table Now let me take care of this

table temporarily so I'm going to go ahead and hide there and it right over through all of my data so for the T body I'm going to just like cut every single thing from there and I'm going to be using a projects which is that state in which we are defining all of the data okay so we're going to be iterating over through them by using our map method it's all used like map it's going to take the project and also it's going to take the Index as a perimeter and now inside there we're going

to be defining all of our data like we have our TR and also our TDS I'm going to select these projects and just select all of them by hitting control D and remove this s out of there so now it's going to give us their project and now inside their project we have our image client country email and project and now if I save my file and test this out so here you can see we are now getting all of our data Which is looking cool but we have to take care of this uh image

and also this UI so now let's just do that so what I'm going to do is that I'm going to take care of the image first of all I'll provide a class name of with will be set to three rim and also uh we're going to be providing a height which will be also set to three rims okay and for the object which will be set to totally cover so that our image will contain all of the DAT okay so we're going to be Also providing a rounded for sem my file and now we are

getting this amazing UI which is looking cool and you know what underneath this TD we're going to be also providing our project so for that we are going to be creating our TD with the class of pairing for the xaxis will be set to two four and also pairing for the y axis will be set to two inside then we're going to be defining our width with the class of uh 20 I mean like d with the the class of width 24 And height will be set to totally two just height will be set to

two and we're going to be also providing a background color of totally gray of 700 and totally rounded okay so now inside this div what do you want to do we just want to create our div once again and it's going to take the height of two and we're going to be also providing the background of totally green 500 and totally rounded so now if I go ahead and save my file and check this out so here you can see we're Now getting our progress which is looking cool now underneath this TD we're going to

be defining yet another TD with the class of pairing for the xaxis of four and uh come on pairing for the xaxis of four and pairing for the y axis of two with will be set to this arbitrary radio so I'll just write a width and that's going to be equals to 10 rims inside this 3D we're going to be defining our Spin and here we just have to write our project. status and now we Are getting like all of that project statuses I'm going to also render my date so I'll just use like TD

pairing for the xaxis of four pairing for the y axis of two and render my project. dead project. de like so and we are getting the date and finally we have to take care of that action button and this can be it okay so what I'm going to do is that I'm going to Define my TD with the class of pairing for the xaxis of four and pairing for the Y AIS of two inside There we're going to be defining what D with the class of relative so I'll use like relative I'm going to provide

my three dots icon so I'll use like bs3 dots we're going to be rendering them I'm going to also put the class name of cursor and we are now getting these three dots which is not doing anything but we are not toly done with this UI I know this is not looking that great UI but we will take care of the rest of these stuff now let me just remove the Sidebar from here and we're going to be defining our table component right here so I'll just use RFC inside there let's just register that inside

our dashboard so instead of providing this comment so I'm going to write like uh uh table component like so so if I save my file here you can see we are now getting our table but which is not looking that great so we are going to be taking care of the styling right now I'm going to go ahead and provide a bit of state and Also the styling to it so I'll just remove there the first thing that I want to do is that I want to grab my data like this entire data that we've

specified right here okay so we're going to be grabbing them inside our table components I'll use like import uh data from where uh we want to get that data from let's just go ahead and go to uh the UTS folder and we want to select this data that's all done now we have to store that data inside our state so I'm Going to be using like H state for there and here we want to provide all of that data okay and here we just have to restructure the projects and also set projects from where from

this Us St now let me go back because we're going to be writing a lot of GSX and a lot of classes so I'm going to just uh select this one and provide a classes to this so so paing for all around will be set to four with will be set to 93 93% and also margin for the left will be set to five RS okay and now inside this Dev we're going to be first of all defining or sorting and then we're going to be defining our main table and after that we're going to

be defining our pagination so let's start from the Sorting so what I'm going to do is that I'm going to create a with a class of F and also the items will be set to totally Center and for the bottom will be set to five inside there we're going To be creating our button with a class of border and Border will be set to gray of 700 this is right or 700 and we're going to be also providing a flex and items will be set to Center justify justify will be set to Center and text

will be set to totally wide pedding for all around will be set to two and rounded and inside there we're going to be rendering our icon which will be bi sord and that's going to become from the react icons so we have to also install This so I'm going to be using npmi and then react icons now then successfully done so I'm going to use the npm Run Dev to start my server and now we have to grab this icon from that react icons okay like so and I'm going to also provide the class name

of margin for the right will be set to 0.3 RM okay now let me just save my and we're going to be also providing a sort as a label to it and now let me also renter my AI outline AI outline down we also have to get this Icon and I'm going to provide a class name of margin for the left will be now set to two let me remove this empty space from here and this is how my icon looks like right here of course we're not providing any functionality to it but this is

just for the UI now let me go ahead and take care of this main table so what I'm going to do is that I'm going to create my table with a class of minimum width of totally full and also the table will be set to Auto Like all around and we're going to be providing around it and also border border gray of 7 100 text will be set to totally white inside there we're going to be defining our T head not fed but T head like so and then let's just Define our TR and inside

each of these TR we are going to be defining our th with the class of pairing for the xaxis of five and pairing for the Y AIS of three and text will be set to left and let's just proide an image right here for the first Level and I'm going to duplicate that like a lot of time okay I'm going to remove this image and replace that with name and also replace this one with country e y but c n TR r y there we go and email then we have a project name we also

have our task progress status date and finally we have our actions okay so I'm going to remove the last one sa my file and this is how it looks like right here so that's going to wa for the basic header now we are Going to be also providing a filtration for this one but we're going to be taking care of the in a few seconds okay so what I'm going to do is that underneath this T head we're going to be also defining our t b so it's going allows us to give this all of

that b so I'm going to write like t b and inside this T Bor we're going to be using our TR and that's going to have the border and also border will be set to to gray of 700 like so and inside this T we're Going to be defining our TD with the class name of pairing for the x-axis of four and pairing for the y axis of two I'm going to also render my image but you know what yeah I'm going to just render some sort of image right here and that image will have

the value of project and then image I im a g and we are going to be also providing our alternative text so I'll use like project. client so now you might be wondering like where in the world is This image coming from and where in the world is this client coming from so if I hold control and click on this projects so it's going to brings us to this state and now if I hold control and click on this data so it's going to brings us to this data Okay so so we are now grabbing

this image and also this name of the client and we are now putting that inside this image right here so it's going to giv us the image of that specific person it's going to also gives Us the client right here it's not going to gives us any data because we're not iterating over through our client so that's why or our array to be precise our client but you know what I'm going to just complete the UI and then we will take care of the functionality so underneath this TD we're going to be defining yet another

TD with the class of pairing for the x-axis uh of four and pairing for the y axis will be set to two and here we have to Define our project. client as a name and I'm going to just duplicate there a few times I know we are getting a lot of errors but this just a typescript error so now let me just Define a country and also the email and finally we have to just write um the project right here like so now if I sell my file and check this out still we are not

getting any data because we are not iterating over through nothing okay so you know what I'm going to take care of the rest of The UI in a few seconds because you are not able to see anything but yeah I'm going to take care of there in a few seconds so you know what I'm going to just hide this entire main body and we're going to be also taking care of the page ination so let me just create a UI for this page ination right here so I'm going to create a different the class of

flex and justify will be set to end and also pairing for the top not pairing but margin for the top will be Set to four and inside they we're going to be defining our button with the class of pairing for the xaxis will be four and pairing for the Y AIS will be set to two background color will be set to gray of 700 and we're going to be also providing the text of totally white t totally arounded and margin for the right will be set to two and disable d i s a b l

e d will be set to opacity when it is disabled so we're going to be changing the opacity to 50 there we go Okay so now inside this BT what do you want to do we just want to write a previous p r e v i o u s there we go and yeah that's going to be fine so now underneath this button you know let me just go back so you guys can see everything a bit better and we're going to be also creating a spin with the class of piring for the xxs we

be set to four and pairing for the Y AIS will be set to two text will be set to totally white and inside there let's just start Our page okay so it's going to basically gives us like page one out of two or page two out of three or something like that so in this case I'm going to only provide like page one of uh four would be fine let's just check this out so here you can see we are now getting what previous button and we are also getting this shouldn't be a project it

should be a page okay so yeah we are now getting a page 1 hour four now let me just copy this entire button and let me just place There right here instead of writing a previous I'm going to change that to next save my file and now we are getting this next button which is looking cool so now let me take care of these drop- down menus so I'll just Define a St with the name of drop down visible and then set drop down visible or you know what it set drop down v i s

i b e that's going to be equals to the user and initial value will be set to false f a LS e there we go now let me go ahead and Go to my UI which is the Sorting so I'm going to go ahead and go there and when somebody clicks on this button so what do you want to do we just want to fire this function so let's just write like on click event handler and we want to fire this function which will just set the drop down menu to not false okay so I'll

just use like drop down menu like so so so if our drop down menu is set to true this will make it false so if our drop down menu is set to false it's Going to make it true so which means like if it is hidden it's going to unhide there and if it's not hidden so it's going to just hide there okay so now that's all done next we have to show our content based on our true or false state so what I'm going to do is that here we're going to be defining like

if our drop down menu is visible then we're going to be showing this UI but if our drop down menu is set to f then we are not going to be showing anything at all Okay I'll just created with a class of absolute and also top will be set to totally full and the left side come on the left side will be set to totally zero margin for the top come on margin for the top will be set to two and background will be set to totally gray of 800 and border border gray of 700

totally rounded and Shadow will be set to large and inside this D we're going to be defining our button and here we're going to be just writing a name I'm Going to duplicate or you know we are going to be duplicating there in a few seconds but I'm going to also provide bit of classes to it so like block and pairing for the xaxis will be set to four pairing for the y axis will be set to two text will be set to totally white with will be set to totally full and when somebody H

over there we're going to be changing the background color to 700 off totally gray and also when somebody clicks on this buttons we're Going to be finding this function which will be handle sort sort off option click and here we're going to be also providing a client today we're going to be creating this function in a few second but now let me just save my file and also I'm going to have to duplicate this button a few times so I'm going to just uh duplicate the one for the country and one more time for the

DAT I'm going to change the values of them instead of providing a click I Should have to provide like client not click okay and here we also have to specify the country and also country here change this one to dat and this label to dat as well so it's going to gives us an error obviously because we have to create this function so I'm going to go ahead and go to the top and create this function so what I'm going to do is that I'm going to just write like cons handle option click and it's

going to take a key and that key will be A string and inside this function we're going to be defining our set drop down visible and we have to set there to false we also have to do a lot more things inside there but you know what let's just check this out so if I click on there we are not getting anything so you know what let me just take care of the set sort project so we are going to be using like uh sort projects and here we have to Define our key and now

let me just create the sort projects up above Right here the first thing that I want to do is that I want to just write like sort project it's going to take a key and that key will be the type of string and here what I'm going to do is that first of all I'm going to just make a clone of all of that projects right here not this one but this one to make a clone of all of their projects so basically what we are going to be doing is that that we're going to

be using the spread operator so I'm going to use like Dot dot dot and clone all of the projects right here and we also have to store them some sort of variable so I'll use like let sorted projects and that's going to be equals to this clone of this data now outside from there we also have to Define one more State for the sort configuration so I'll just write like sort config and also we have to write like set sort config that's going to be equals to the US state and the initial value will be

set to now but I'm going To also annotate there with this object and this object will have the key and key will be set to string and we're going to be also providing a Direction so I'll use like Direction and direction will be set to string otherwise if that's not the case we're going to be only providing a now which this is right here like initially the value is now set to know and now we have to use this sord configuration inside this functions so we already made a copy of this projects The next thing

that we have to do is that we have to provide our checks I'm going to provide a check right here so if our sort config like if we have some sort of A Sort config in this situation we're going to be defining yet another check so if our sort configuration do key is triple equals to the key which we are now taking as a perimeter so if that sort. key is equal to that key so in that situation we are going to be providing the sort config Direction and That's going to be set to ascending

a c n d i NG like so and I'm going to have to use triple equality operator right here if this expression is true so in this situation we're going to be sorting our item by using like sort projects which is going to be the clone of our projects and then we're going to be using the JavaScript sort method on there here it takes two perimeter like a comma B and what do you want to do with there we just want to fire a function And here I'm going to be doing a bit of magic

and then I'm going to explain that magic so I'll use like a and key and also if that is greater than b do B not do key but just a key so in this situation we're going to be returning minus one but if that's not the case we're going to be returning only one so now let me explain like what in the word is this line even mean you already know like this is going to be the clone of our project and then we can use the sort Method on them because this is array inside

the array we have a lot of objects which means like we can use the sort method on there this is an arrow function that takes two parameters Like A and B which represent two elements inside the projects array to be compared like it will first of all compare you know let me just show you there it's going to first of all compare this element with this another one like the second one so this is what's going to Happen for the first step and now let me explain this line of code so this is a expression

that compare the values of A and B at the property of key which we've already specified right here so if the a key is greater than the b key then the function will return one which means like a should compare with B in the sorted order so if the a key is not greater than the b key for example like if it is less than or equal to or something like that will return one Meaning the B should come before a okay so I hope it makes sense but if it didn't so you can just

quick Google search or something like there we're going to be also using our set sort config and here we have to Define our key first of all and also we have to give it the direction so I'll just write like Direction come on what the hell d i r e c t i o n and the direction will be set to descending d e s e b e s c e n d i n g like so so that's going to be it For the first case and what about the next case like for the

else class like if that is not the case then we're going to be jumping into this else class and for this else class we're going to be copying and placing both of these code and here we only have to change that minus one to one and also we have to provide a minus for this second one right here like basically we're just reverting our expression that's it and we also have to change this one from Descending to ascending a a s c n d i n like so and finally we have to push then to

our projects we're going to be using like set projects and we have to push our sorted projects in there okay like so it should be a sorted okay so I'm going to copy there and place it right here and now that are is successfully gone let me just refresh there and check out the UI so if I click on there I don't know why we're not getting there drop down menu so let me just take care Of there and I forgot to include the relative div right here so I'll just create a with the class

of relative and I'm going to cut that div and we have to close that right here so now if I save my file and now if I I click on this drop down menu so it's going to give us that name country and dat so if I click on the name it's going to sort my data but I cannot see that sort data we will see that in a few second but we also have to take care of the filters so what I'm going to do is that I'm going to Define my filters right here

underneath this div we're going to be defining our filters so I'll just create a with a class of like relative and also margin for the left will be set to four with will be set to totally full and inside there we're going to be once again defining our button with the class of border and Border will be set to toally gray of 700 and also we going to be providing a flex class to it and items Will be set to Center justify will be also set to Center and text will be set to totally white

pairing for all around will be set to two and totally rounded inside this Buton we're going to be defining what MD sort as icon so let's just grab there and also I'm going to provide a class name of margin for the right that's going to be equals to 0.3 rims outside from there I'll just Define my filters and also provide my AI outline and down there we go a class Name of margin for the left will be set to two so it's going to gives us that button right here and this is not something that

we want so we have to cut this div and we have to put that inside that D and now let me test this out so here you can see we're now getting our filters and also our sorts now let me also take care of this drop down menu here so what I'm going to do is that I'm going to just Define my drop down menu and when somebody clicks on this button So we going to be firing this function okay so this function will have like set filters come on set filters not filter visible like

so so we're going to be defining this filter visible and also set not filter visible right here as a St so now underneath there I'm going to just create my filter visible and also set filter visible like so that's going to be equals to the US and the initial value will be set to false and this should be set filters visible now let me Just save my file and go ahead and take care of the rest of these stuff okay so now our filter will show up our UI but we also have to create our

UI to see there so to see our UI first of all we're going to be rendering our UI totally conditionally so I'll just use like filter visible if that is the case we're going to be rendering this UI but if that's not the case so if which means like if this is not set to true so we not going to be showing nothing and if It is true so we're going to be creating a d with a class of absolute and top will be set to four and left will be set to zero and I'm

going to also provide the margin for the top will be set to two and background color will be set to 800 like so border and also border will be set to totally gray of 700 and I'm going to provide the rounded border and Shadow will be set to totally large and pairing for the y axis will be or you know what piring all around will be set To four inside then we're going to be creating with the class of margin for the bottom will be set to two and label will be just like uh you

know we're not going to put any HTML 4 but I am going to provide some sort of a class name to it so block and text will be set to totally white and here we have to Define our filter by and then name like so okay so now underneath that we're going to be creating our input field with a type of text and also the name will be set to Name and I'm going to also you know we're not going to be providing any IDE today so for the value our value will be coming from

the filters. name come on or filters and then the dot name and we're going to be also providing the own change event handler so you know what we're going to be taking care of all of that stuff in a few second but you only want to see the UI so I'm going to put a class name and background color will be set to totally 900 and text will be set To toally White and I'm going to proide the rounded pairing come on pairing for the Y AIS or ping for all around will be set to

two and width will be set to four now if I my file and check this out so if I click on there we are not getting anything I don't know why and it is not working because we have to cut this code and we have to put that underneath this button right here so now if I put that here and now we are getting our filter by name and we can just prob we filter Like some sort of a name right here okay so now you can click on this so it's going to unhide there

and now if I click on there once again so it's going to hide there or the other way around I just said they wrong uh yeah now underneath this t what do we have to do we have to Define yet another div so I guess I'm going to have to copy and place this one so I'm going to just copy therefore the filter by country filter by email filter by project and filter by Status okay so now let me just change these video so we have like filters I'm going to just remove that from here

we have a filter by name we also have a filter by email or you know what let me just change that to filter by country name will be set to Country and also we have a filtered by email so I'll write like email and the name will be set to email like so I'm going to make the uppercase E filter by project so I'll just use like project and also provide a Project right here for the name okay then we have a status so I'll just change that to status and finally we also have to

change this name to status right here now let me just s my file and check this out so we have a filter by name by country email project and Status so which is looking cool now let me go ahead and take care of the filtration so I'm going to go to the top and first of all I'm going to Define my filtration state right here so I'm going to just Create a filters or yeah filters will be fine then we have a set filters that's going to be equals to the US and the initial value

will be set to this object object will have the name and here we just have to provide this empty array or not array but string and Country c u n t r y will be also set to empty string we also have to proide the email will be set to empty string the project will be empty string and also the status will be empty string so now we have to use the Inside or project so I'm going to go ahead and go to my filtration and use that right here first of all I'm going to

provide a value to this so I'll use like value value will be coming from the filters. name we are only interested in the name in this case and when somebody types something inside this we are going to be firing this function which will be a handle filter or yeah filter change okay so now let's just Pro there for this one so for the value we are going To be providing like filters. country and also when somebody clicks on there we're going to be fing this function which is a handle filter change filter change like so

next we also have to provide the value for this one and this one will take the value of filters. email and when somebody try to type something inside there we're going to be firing this function then we have a value and for this value we're going to be Providing our filters and when somebody types something inside there we're going to be firing this function and finally we have a status so we just have to write a value and value will be set to filters. status right here and when somebody types something inside there we're going

to be firing this function okay that was a lot of talking so now let me just create this function I'm going to go to the top and Define my function right here underneath that one So we're going to be using like cons and then handle filter change it's going to take the event object and we are going to be using this event object on the react. change event and we are going to be using that on the HTML input element so we have to explicitly Define okay so now inside there we're going to be using

our set filters and inside that set filters we're going to be first of all making a clown of all of the filters that we currently have and then we're Going to be using like e. target. name and we have to set that to e. target. value that's all that we have to do but now we also have to take care of all of that filtration logic so what I'm going to do is that I'm going to just write like filtered projects and that's going to be equals to our entire projects which means like our entire

data which is now set to this entire data right here we're going to be defining our filter method on there project and here Inside there what I want to do I want to just create my UI but first of all we also have to create yet another state which will be for the search query okay so I'm going to go ahead and go to the top and now underneath there I'm going to Define yet another state for the search query so I'll use like search query and then set search query that's going to be equals

to basically like the use and empty string inside there and so now let me just go ahead and use there Inside this project but you know what we don't have to specify this curly braces I can use my parenthesis and inside these parenthesis I'm going to be first of all providing this condition if search query is triple equals to like if search query is equal to m string we have object. values and we are going to be just providing our object inside there and inside this object. values and project we have to find the sum

method on there and then we have to provide a Call back function to the sum method so we're going to be passing a value for the sum method and we're going to be making the as a lower case so I'll use like value. to lower case and here uh we going to be also using the includes method on there okay so here we have to just specify our search query and we also have to make that to lower case like so I'm going to save my file so this is how my currently code looks like

and that's going to be it for the first Condition so now let's just put more conditions okay so I'm going to just write like my parenthesis right here first of all we have to just write the end symbol so if that is the case then we're going to be using like filters. name and if that is equal to empty string so in that situation we're going to be getting like all of the data and we only want to get the project out of there then we have to make the as low case because we don't

want to get like The casing conflict so we just want to change that to two lower case like so and we have to uh use the dot method and check if it is including filters. country and then to lower case like so so in this situation we're going to be getting our data so that was it for the name and now let me just Prov for the email so let's just write the end symbol and use our filters. email and if that is triple equal to empty string or project. email. to lower I'm going to

Also have to change that to lower case and then use the included method on there and here we have to specify our filters. email and change this one to lower case as well so that's going to be it for the email and now we have to use that for the project so I'll use like filters. project is triple equals to empty string uh come on or we have to write our project and then the project inside there we also have to change that to uh lower case come on what the hell To lower case like

so and we have to check the includes method on there so if you have the filters. project. to lower case so you know let me just semi file so we get we have to file this function right here and now for the final one we are going to be using that once again so we going to be using like filters. status is triple equals to empty string so in that situation what we have to do we have to just get like project status and then we have to make there two lower Case like so I'm

going to execute this function and check out the includes method on there and use the filter. status. to lower case right here so now if I sa my file and that's toally done and now we have to use that inside your UI so this should be filters there we go I just pause the recording and set back and enjoy the code and it turns out that I made two mistake the first mistake that I made is this one so you know let me just go to the top and here you can See inside the sort

we are not going to be using a sort projects we are going to be using a sorted project so sorted project right here okay which is that sorted project array so I'm going to copy there and now let me just place there right here for this one as well so now if I save my file and now if I try to sort something by either the name or country so this is how we going to be doing there if I click on there and if I click on this name and it's going to Sort the

by name if I want to sort the by country so here you can see we have first of all the Canada then we have a South Korea so if I click on the countes so now it's going to giv us Argentina and Australia and Canada and so on and so forth I can also sort the by dat so here you can see we have like 279 2023 and now if I click on there it's going to sort there from one so now that error is now successfully gone and I made a lot of errors in

this uh function right Here so I want you to take a look at that and this then I'm going to remove this entire function and I'm going to replace it with this function and as you can see right here on the other function I did not specify these parentheses right here like this is going to be my opening parenthesis and this is going to be the closing one and here you can see I just provided this parenthesis and that says I want you to pause the video and I don't want to like retype all of

The entire function so this is how you're going to be doing there so I want you to pause the video and type all of that code or if you don't want to type there you can totally get there from my gab repository right here so everything else is exactly the same like I did not change any code but I have to specify these parenthesis right here on the exact same places pause the video and if you want to type there so feel free to type there and you know what I'm going To hide there from

here and now let me just copy this filtered project and now e e now to take care of the pagination I'm going to go to the top and underneath this filtered project I'm going to start work on pagination okay so now underneath this comment I'm going to first of all create a state which will allows us to take care of the current page so I'll write like current page and Then Set current uh page it's going to be equals to the use State and the initial value will be set to one like we want to

basically start from the first page so that's why we specified one in there now let me just write items per page so per page you want to set the items so let's just write per page on per page we want to set the items to only five elements like here you can see we have like Petra of a lot of people but we only want to set the five people On per page nothing else than there so that's going to be for the second one and now let's just write a start index I'll write like

start index and that's going to be equals to uh let's just write the current page and then minus one from there it's going to gives us basically the last index and now we want to multiply there by items per page okay so here you can see we have the items per page which simply means that we're now multiplying all of them by five let Me just undo there and now underneath there we're going to be getting the current projects I'll use like current projects and it's going to be equals to the filter data uh or

filter projects to be precise which is that filter project so in which in this filter project we have all of that logic about the search query and the filter name country email and so on and so forth you get the idea and we're going to be using there right here and then inside there we're going To be using the slice method and then first of all we have to specify the start index which is this variable right here and then we have to specify the start index plus the items per page and that's it for

the current projects now the next thing that we have to do is that we have to get the total pages so I'll just write like total pages and that's going to be equals to to the math.co and here we have to specify the filtered projects right here come on Filtered projects. LIF and we have to divide them by items per page okay so that's going to be it for the total pages and finally we have to take care of the handle submit but we're going to be doing that in a few seconds so I'm going

to go to the very bottom and here we have to specify all of that values right here so what I'm going to do is that first of all I'm going to provide a disable start on there and it's going to be disabled if the current page is Triple equals to one like if you are on the first page so we going to be setting the previous button to disable and when somebody clicks on this button we're going to be firing this function which we're going to be creating in a few second which will be a

handle page um yeah handle page change and here we're going to be specifying the current page and then minus one now for the next button we're going to be also taking care of there but instead of providing This one I'm going to just replace that with Dynamic value which will be the current page and also how many pages we have so I'll just write like total pages okay so it's going to give us like the current page and also how many pages that we have now let me also provide there for the button so I'll

just write like uh disable and this button will be disabled if we have the current page triple equals to the total Pages like if you have the last page then we're going To be disabling this next button okay so if that's not the case we're not going to be disabling there so when somebody clicks on this button we're going to be firing this function which is the handle page change okay so let's just write our handle and here we have to specify the current Page Plus one and now I'm going to save them now let

me create this handle page change on the top so I'm going to go to the very top and underneath all of them we're going to be Defining our function you're not going to be doing anything crazy but I'll just write like const this should what the hell am I doing let's just remove the and con handle page change and this can be equals to the page number and that's going to take a number as a perimeter and we are going to be using the Set current page and we only have to specify the page number

inside there and that ladies and gentlemen was the entire thing but now I'm going to copy this current project and instead of providing all of that filter data we are going to be using this current page right here so now if I save my file and now let me just test this out so here you can see on the current page we only have five people I can also increase the size of that if I wanted to so I'm going to go to the top and change that to like I don't know maybe seven or

something now it's going to gives us that seven people right here I can also make there like 10 and I guess 10 would be fine you know what let me just change that to nine or8 would be fine rather and now that's looking better I can also click on the next page so it's going to brings us to the next page right here and now we are getting like page and we're now in this page like the second page so now here you can see this button is disabled like I cannot click on there and

now if I want to go back I can click on this previous One so it's going to brings us to this previous right here now I can also sort anything by name I can also sort it by country and I can also sort the by dat we can also provide a filtration like I don't know let's suppose if I want to get like Lucas uh LCS so it's going to give us that Lucas right here and everything is working the way we expect him to work anyways so that was it about for this entire project

so here you can see we are now getting the images we are Getting the sidebar we can sort our data we can filter our data by using name country email we also implemented the page ination so we can go to the next screen and if you have like a lot of data we're going to be getting like a lot of pagination right here so yeah that was the simple project for the typescript this is what we're going to be building in this project by using reactjs typescript and tman CSS so now let me show you

the functionalities that We are going to be implementing in this project the first thing that we have is a filter so we can select the cheap products as you can see this one is the cheapest one we can also select the expensive one one here you can see we have a expensive product we can also select the popular one and this one is the popular one right here we can also search by the product name suppose if I want to search for a Rolex so I'll just write like Rolex and here you can see It's

going to give me all of their products which have the name of Rolex so I'm going to remove that from here we can reset our filter so I'm going to click on there you can also search by a minimum price and also the maximum price so suppose if I just write like the minimum price of 20 and then I'm going to also put the maximum price of like 200 200 so here you can see it's going to only give me that two products right here and we can also select by a Category so if I

just select like Beauty so it's going to only give me the beauty products you can also select by different kind of things let's suppose if I click on the furniture it's going to only give me that furniture right here and so on and so forth okay so now let me just refresh there one more time we can also select by a keyword so let's suppose if I click on the Apple it's going to give me all of that Apple product right here we can also search For the watches fashion trend shoes shirt and so much

more okay so that was the first thing so now let me just reset there and we also implemented the pagination so if I click on the second one and here you can see it's going to brings us to the second page and I can choose like different kind of pagination and so on and so forth so I can click on the next button going to show me the next page I can also click on the previous one so it's Going to brings us to the previous page and now if I click on a specific product

so I'm going to just choose like watches and now if I click on a specific product and is as you can see right here is going to brings us to that specific product page so we have the product image we have the product name description price and also the rating as well okay so we can go back to see all of the products once again we can also follow someone and unfollow someone if You wanted to and these are totally Dynamic people like we're going to be sending a request to the random users API if

I refresh there so anytime I refresh there it's going to give me all of that random people right here and finally we have these blogs and they don't do nothing so now let's get into the setup of this project and I'm going to see you there let's talk about the requirements for this video so for this video you will Have to know the JavaScript so if you don't know what a JavaScript is so I have a complete course on there you also would need to know a tellin CSS so I have a complete course on

there you also have to know a typescript and reactjs and also you have to take this course which is Advanced typescript types for nextjs but this course is not only for the next JS uh develop I made this course for both rejs developers and also for the next year developers if you Complete these courses I can totally guarantee that you're going to be calling yourself as a typescript and reactjs monsters now let's get into the setup of this video now let me make a setup for my coding Journey so I'm going to open my terminal

right here on my desktop and I'm going to just P this command which is create a new project by using the weed and I'm going to just give it the name of like R Ecom you can give it any name that you like and I'm Going to just hit enter right now I'm going to write Y and hit enter and now I'm going to choose the react I'm going to also choose the the typescript because in this video we're going to be also using a typescript as well so I'm going to go ahead and go

to that folder which is react Ecom and now let me use npmi to install every single thing now then successfully done so I'm going to clear this out and now we have to install more packages Which is AOS Lucid icon and also react router Dom I'm going to hit enter so it's going to install that in my machine now then successfully done the next thing that we have to do is that we have to go ahead and go to the tman css.com then dogs guides and we so once we are there so this step is

now successfully done the next thing that we have to do is we have to copy this command and I'm going to place that right here paste it anyways and I'm going to also hit enter So it's going to initialize my tman CSS inside my project now thenly done so I'm going to open my vs code right here inside that specific folder next we have to copy this configuration and we have to go to the tailin config.js file and we have to place that right here so I'm going to sell my file and now let me

just scroll down so we also have to go to the index.css file so I'll just write index.css and let me just place that right here okay so now let's just remove That from here and finally I'm going to go ahead and go to my app app. TSX and I'm going to just replace that with this code okay and finally now let me just run there I'm going to be using npm run Dev and it's going to run there right here so and we are now getting what hello word right here which is amazing so now

let me just do a bit of cleanup so I'm going to just remove This Ss from here I'm going to also remove this f. CSS and I'm going to go into my main and Yeah I guess that's going to be it so you know what let me just check this out let's just refresh fres there and yeah that's going to be it for the setup and you know what we also don't need the public so I'm going to also remove the public from here so that was it about for the setup next we have to

create our components folder and I'll just give it the name of like components and now inside there we're going to be creating first of all our sidebar. TSX and I'm Going to just create my component by using our FC now inside this component first of all we have to create our state for the categories so I'll just write categories and then set categories just like that and it's going to be equals to the used St and not transition but the use St I'm going to set that to empty array because here we are going to

be storing all of our categories and now I'll just annotate there with the string of array just like that okay so that's Going to be our first state now I'm going to also create a state for the keywords but now in this case we are not going to be changing our keyword so I'll just write like keywords and I'm not going to just write like set keywords or something like that because we are not changing our um state so I'll just write like UST St and all of these item I'll just place that right here

here and I'm going to also annotate there with the string okay so string of array Underneath that we are going to be fetching our data by using the use effect and now inside there first of all let me provide my empty dependency array now inside there we are going to be creating our fetch categories it's going to allows us to fetch our categories by using this function that's going to be an asynchronous function because we going to be calling some API okay so I'll just write a try in catch block and for the catch block

I'll just write like Um console. error and then error pitching products okay and I'll just pass my error right here and if that's not the case so first of all we are going to be getting the response by using the aware we're going to be fetching our data from https and then the dumy jon.com and for/ products and now let me get a data adjacent data from that response I'll just write data and then it's going to be equals to uh you know is going to be equals to the aware And then we're going to

be using response. Json but you know I'm going to also create interface for there so I'll just give it the name of like uh uh fetch response and now let me just create the right here up above and first of all we're going to be creating an interface for the product itself and I'll just write like category and it's going to be equals to the string and now underneath that we're going to be creating an interface for that fetch Response and it's going to be set to the products and then that products interface which we'

have created up above okay and it's going to be set to this empty array so that's there and now let me just log my data to the console so I'll just write like cons. log of data and also let me just call this function right here okay so I'll just use like fetch categories and now let me just execute this function I'm going to save my file and nothing will happen Right here why is there because we did not register this component anywhere so now let's just do that I'm going to go ahead and go

to my app and here now let me just register my component so first of all you know what you need a few things so I'll just import first of all my browser router so I'll just write like browser router is router I'm going to rename that to the router and also let's just import our component which is a sidebar component so I'm going to copy That From Here and Now inside there let's just remove that from here I'm going to write my router first of all like the opening and closing off router inside there we

are going to be creating our D with the class of flex and also the home of screen and I'm going to hit enter Right Here and Now inside there we just have to call our sidebar I'm going to sve my file and now let me test this out and now let's just refresh there and here you can see we are now getting all Of that data right here so we have a products here you can see each of that product will gives us the category of beauty but we want only the unique ones right here

we don't want to get like Beauty again and again we only want to get the beauty one time okay and then we want to get like I don't know maybe uh something else like this one I can't even pronounce this word but yeah we only want to get the unique categories we don't want to get all of them so how In the world we're going to be getting our unique categories so we're going to be using like array. from and now inside there we're going to be passing a new set to there and that set

takes an itable and it will only gives us the unique value out of there so I'll just use like data and then we are going to be iterating over through that products and now we have to use like map method for this so I'm going to just write like product and then I'm going to be using Like product. categories now it's going to give us only the unique ones so I can totally store them the variable like uh unique categories and it's going to be equals to that code and now let me just Lo to

the console my unique category so if I save my file and now let me just run that and here you can can see we are now only getting these four categories right here okay so we have a beauty and so on and so forth so yeah this how we going to be getting a unique values from Our data so I'll just remove that from here and I'm going to just set that to my categories so I'll just write like set categories and we are going to be only passing a unique categories to there okay so

this is how we going to be fetching our category and now it's time to render this so I'll just remove that from here I don't know what's happening with this GSX maybe I'm going to have to restart my vs code okay now it's better so first of all you know what I'm going To have to just provide a few classes to it so I'll just write like width of 64 and pairing all around will be set to five and height will be set to screen that's going to be our first D now inside there we're

going to be creating our H1 with a class of text 2 Xcel font of totally Bard margin for a bottom will be set to 10 and margin for the top will be set to four and I'll just give the name of like react store you can give it any name that you like I'm going to sell My file and here you can see we are now getting our react store right in here which is looking amazing I'm going to also hide this sidebar from here now it's looking better underneath that we are going to be

creating our section and now inside this section we are going to be first of all creating our input Forex and I'll just write like uh the class name of Border 2 pixel and also totally round it ping for the xaxis will be set to two on the small screen size we're Going to be providing margin for the bottom of zero okay and I'll also provide the placeholder of search come on search product okay and in this case I'm not going to be providing any values to that so I'm going to save my file okay so

that's going to be it for the first one now I'm going to also create a d with the class of flex and also the justify come on justify of Center and we are going to be providing the items of Center as well and now inside that we Going to be creating our input with a with a type of text and I'll also provide a class name of Border two margin for the right will be set to two ping for the x-axis will be set to five ping for the y- axis will be set to three

and also margin for bottom will be set to three and width will be set to totally four and you know I'm going to also the placeholder of Min I'm going to duplicate this line of code and I'm going to also provide a Max right here Okay so now let me just save my file and this is how it looks like right here I know it's looking awful but yeah we will change the next we have to take care of our categor so I'm going to come underneath this div and I'll just write like categories section

first of all we have to create our D with a class of margin for the bottom of five and we have to create our H2 with the text of extra large extra large and the font will be semi B margin for the bottom Will be set to three and now let's just write our categories inside there and this is how it looks like right here so that's amazing now underneath there we are going to be iterating over through all of that categories which we've proved right here so we are going to be itating over through

all of them and then we are going to be rendering like only the unique ones so I'll just write like categories and now let's just use our map and here I'm going to provide my Category and also the index and now inside there first of all let me provide my label and for each label I'm not going to be providing in HTML 4 I'm going to provide my key of Index right here and also let me just provide a class name of block and margin for the bottom will be set to only two okay so

now let's just go inside there and I'm going to be creating my input first of all and for this input we're not going to be using text but instead we're going To be using a radio I'll just provide a name of like category and I'm going to also provide the value of category as well and you know I'm not going to be providing any on change or anything like that so I guess that's going to be fine but but I'm going to also provide a bit of styling to it so like uh margin for the

right will be set to two width will be now set to 16 pixel and height will be also set to 16 pixel so now let me just save my file and this is how my Categories looks like right here but now we have to render our categories and to do that we are going to be using my category uh yeah category just like that and I'm going to be using two upper case if you don't like the upper case you can totally change that but yeah in my case that's looking better so yeah we are

totally good here so that's looking amazing now you know what I'm going to also take care of the keywords as well so and I just realized that I'm going to Have to wrap in some sort of a section so I'll just cut that from here and now let me just put that right underneath there and now let's just take care of the keyword so I'll just write like keywords and section okay so now let's just take care of this so first of all we're going to be creating margin for the bottom of five H2 with

a class of text extra large and also the font will be set to semi Bol margin for bottom will be set to three and let's just Right to our keywords right here so I'm going to sell my file and this is how it looks like right here you can also provide like some sort of margin for the top of four or something I guess that's looking pretty good underneath that let's just create another div and now inside this div we're going to be iterating over through all of the keywords and let's just use a map

right here and I'm going to pass my keyword and also the index as well okay so now Inside them we going to be creating a button you can create like any kind of UI if you wanted to and I'll just past like the key of my index and also let sty I'll just write block margin for the bottom will be set to two pairing for the xaxis will be set to four pairing for the Y AIS will be set to two and width will be set to totally full text will be set to the left

and let's just provide a border and also rounded once we have our over it we want to change The background color of gray to 200 okay so that's going to be it and now inside this BT we want to use like keyword dot to uppercase if you want to change there you are more than welcome to change there okay so here you can see I have my buttons right here the keyword buttons right here which is also looking amazing and now finally we have to take care of that one button okay so I'll just go

down here and now let me just create a button right here and let's just style There a bit so I'll just put the width of totally full MB margin for the bottom will be set to four rim and pairing for the Y AIS will be set to two background will be set to totally black and text will be set to totally white and round it margin for the top will be set to five and I'll just put the level of like reset filters I'll just save my file and here you can see this is how

my reset filter will look like so we are now totally done with this UI stuff but now The next thing that we have to do is that we have to take care of the functionality we are going to be making some sort of a changes inside this sidebar. TX file and we want to render that change data inside the main content. TSX file which we are going to be creating very soon so how in the world we are going to be doing there well the first way is to use a Redux toolkit or Redux whatever

you want to call them and the next way is to use the Context so this project is not the big project so we're going to be using only the context so I'll go ahead and create my context right here so I'll just give it the name of like filter context. TSX not text but TSX just like that and inside this context first of all we going to be importing a lot of things like uh we have to import our create context we also have to import our use context and also we have to import our

use St and also we have to import our React now so we are going to be importing all of that from the react CH next we have to create our big interface so I'll just write like interface and I'm going to give it the name of like filter context type and I'm going to just make the as uppercase and now inside there first of all we have to write our search query and you know let me just zoom in a bit right here and it's going to be set to string we already know that we

also have to write Our set search query and it's going to be set to a function which will take some sort of a perimeter of query and that's going to be a string and now we have to provide our white right here and also we have to write our selected category and it's going to be set to a string we already know that and then select set selected category will be now equals to this function which will also take a category as a perimeter and that's going to be a string okay so we Also have

to set that to the white let me provide my minimum price and that minimum price we already know that it's going to be either a number or it's going to be totally undefined we don't want to accept anything else in the case so either a number or undefined then we have to provide our set minimum price and it's going to be set to this price and that's going to be totally a number okay or maybe undefined okay so let's just provide our wide right here because That's going to be a function and let's just provide

for the max price and Max price will be either a number or undefined and also the set max price will be now set to this function which will be a price and now let's just provide either a price or the undefined and now we also have to return the white because this is going to be a function or a method rather and now let's just provide our keywords or keyword singular and it's going to be set to a string and Then we have to WR our set keyword and that's going to be a function which

will take the keyword as a perimeter and that's going to be a string and now we have to just return the Y inside this so let's just go back and this is how we going to be creating our filter context types that's going to be only the types okay so let's just create our uh filter context right here so I'll just write like create context and now here inside there we're going to be providing only The undefined right here but for the type we're going to be providing first of for the filter context type or

undefined and now let me just close them I'll just write like const filter and then context and now we have to store them in this variable right here okay so everything is looking good but we have to just use these unused variables the next thing that we have to do is that we have to create our provider so I'll just write like export cons filter provider And you can give it like any name that you like and I'm going to be using like react. functional component right here in this case and we're going to be

providing uh our children so that's why I'm using the so we're going to set the children come on children to the react node and now we have to just set that to equal to this children right here okay and now finally we have to go to the bod now let me just send my file it will gives us that error but I want you to Just ignore that for a few seconds because it will fix itself this is just a typescript error so first of all we have to define a lot of stats so we

are going to be defining like the search query State and also set um search query it's going to be equals to the used St and now inside there we are going to be setting there to empty string so I'll just set there to only a string okay so yeah that's going to be the first one now the next thing that we Have to do is that we have to create our uh selected category and then set selected category as well it's going to be equals to the use St now inside there we're going to be

also setting there to the empty string just like that and also we have to set the minimum price and also set Min price is going to be equals to the Ed St and we have to set that to undefined initially because we don't want to set the initial value to anything and you will see that why I'm Providing the undefined right here okay in a few seconds so now let me just uh annotate with the undefined and you know I'm going to just you know I'm not going to duplicate that so I'll just write like

the max price and then the set max price it's going to be equals to the use St use St and we're going to be providing the undefined as initial value okay so let's just provide either the string or undefined and why am I providing a string these are the prices So we have to set there to number underneath that we have to create our keyword and let's just write our keyword and then the set keyword K going to be equals to the US St and we have to just set that to the empty string just

like that now we are totally done with that so I'll just write like return provide my filter context. provider case now inside there uh we are going to be also providing our children right here so I'll just write Like uh children and I'm going to also provide my values right here so I'll just write like value and I'm going to destructure there so I'll first of all provide my search query and I'm going to also provide my set search query and selected category and also the set selected category minimum price and also the max or

you know set minimum price as well set Min price and also the maximum price and set max price and also the keyword And set keyword just like that so I'm going to sell my file and then finally we have to just create our use filter okay so let's just use our export cons use uh filter it's going to be equals to this function right here and now let me just provide first of all my context you can give any name that you like and I'm going to just use my use context right here and we're

going to be providing our filter context to there okay and now we have to check if we don't have have that Context so what do you want to do in that situation we just want to throw the new error and you want to say that use filter must be used with within a filter provider provider just like that and if that's not the case we just only want to return our context just like this so I'm going to sve my file and that was a lot of talking I don't know where in the world this

used transition came from but yeah that's everything that you have to do for the filter context now that we Successfully cre our context so now the next thing that we have to do is that we have to go ahead and go to our main and we have to register that right here so first of all we have to import our filter provider and now we have to wrap every single thing inside this so I'll just write like filter provider and I'm going to close that and let me just put my app inside this filter provider

so that's to done next we have to use this filter context inside this sidebar Component so how are we going to be doing there first of all we have to destructure every single thing from there so we going to be using like use filter now inside this use filter we are going to be restructuring all of that properties so I'll just put that right here and yeah we did not use that so that's why we are now all declare element are unused so that's why we are now getting this error like we have these variable

but we did not use this So now let's just use them first of all we have to take care of the first input field which is this input field right here so I'm going to provide the initial value of the search query and I'm going to also provide the on change and once we change something inside there so we're going to be using like set search query and we're going to be providing e target. value like what did we type inside their input okay so that's going to be the first one and next we have

to Take care of this input field right here like the minimum and also the maximum okay so for the minimum we're going to be providing the value right here and the value will be either the minimum price which we are now getting from the top and now if that's not the case we are going to be only setting there to empty string okay so once we change something inside this we are going to be calling this function which is handled uh price change this is not big function To create it separately but you know what

I don't want to clutter my UI so I'm going to go to the top and now let's just create that right here so I'll just use like const and handle Min price change and it's going to be taking that event object and now inside then we're going to be first of all getting the value from this we can use like e. target. value and we can also just set that to the minimum price right here so value if we have some sort of a value And convert our value to that floating Point number and if

we don't have the value so we just want to set there to undefined and now let me take care of this event error right here just use like fre dot change event and now we have to just pass our HTML input element right here inside there so this how it's going to resolve their error right here okay so that's going to be the first one now let's take care of that maximum one right here okay so we're going to be Providing the value today so let's just write our value and the initial value we're going

to be setting there to the maximum price and if we don't have the maximum price so for that we are going to be using the empty array not empty array but just empty string okay so then we have to use our own change when we want to change something inside there so for that we are going to be using like handle Max price change kind of a Long Function name so we just have to create That right here so I'm going to be using there it's going to also tag that event so you know I'm

going to have to copy this entire thing from here now let me just place that right here and let me close them and we're going to be doing the same thing like we have to get the value by by using the e. target. and we also have to change the set maximum price and then we have to provide our value if we have the value so we have to change that to the parts Float and if we don't have the value so we just want to change there to undefined okay so I'm going to save

this file and that's going to be it for the handle Max price change okay so let's just see what else is left and here you can see we also have to take care of this input field right here which is not going to be that much of a problem so what I want to do is that I want to provide my what do you call it um I'm going to provide my my own change and It's going to be taking this function as input Handler so I'll just use like handle radio change Kor just like

that and we're going to be passing our category category inside there and I'm going to copy there from here and let's just go to the top and I'm going to just create that right here we not going to be doing anything crazy but we are going to be just creating this function and it's going to be taking the category as a perimeter and that's going to be a String and now inside there we have to just write like set s category let's just provide our category inside there underneath this class name what do we have

to do we have to just provide our check and we are going to be setting there to the selected category and if that's equals to the category so only just check that and if that's not equal to the category and make it disable Okay so that's going to be for the checked and now let's just take care of these Keywords right here when somebody clicks on this button right here so what do we have to do in that situation we want to change the hand keyword click okay and we're going to be only passing the

keyword inside this so I'm going to copy that from here and we have to just create that right here inside underneath this handle radio change category so I'll just create there right here it's going to be taking a keyword and let's just for a string to there now let's Just change our set keyword and we're going to be only passing our keyword inside there okay so I'm going to sve my file and I guess that's going to be it for the functionality if I am not wrong yeah I am wrong because we have to take

care of this filters as well okay so how we are going to be doing that to do that first of all we have to provide our Handler right here so we're going to be just writing like on click Handler so we're going to be passing like handle Reset okay so I'm going to copy that from here and let's just go to the top and set everything to the empty string okay so I'll just write like const handle reset filters and now inside then what do you have to do first of all we have to ride

our search query and we have to set there to empty string we have to get our search selected category we have to set to empty string we have to get our set minimum price we have to provide the undefined inside there we Have to get our set maximum price we have to set there to undefine and also the set keyword to empty array to empty string so I'm going to sell my file and I guess that's going to be it so you know what the functionality is not toly done but now the next thing that

we have to do is that we have to render our content right here the sidebar is now totally done okay so that's going to be it for the sidebar and now let's just create our main content comp component So main content con main content. ESX and I'm going to just write like RFC and Main content inside there so I'm going to sve my file and now let me go ahead and go to my app underneath this sidebar we're going to be creating a div I'll just provide a few classes to it like rounded and then

the width will be set to totally full and also the flex justify will be set to between and also Flex will be set to totally wrap okay just like that and inside the then we're Going to be just providing our routes you don't have to do that but if you want to do that so that's going to be a better idea if you want to create a separate page you can totally do that but you know what I'm not going to do that I'll just write like route and let's just get that from the react

router and let's just close it right here I'm going to provide a path to that and path will be just a home and for the home we are going to be just providing An element of our main content component which we just created right here so I'm going to sve my file and here you can see we now getting our main content right here which is amazing so I'm going to close there and let's just close this filter and also this sidebar and now let's just take care of this main content component so what I'm

going to do is there first of all I'm going to have to import a lot of things from uh what do we call it from or use filter Okay so let's just execute them and now inside that we have to destructure like the search query and also the selected category and also the minimum price the maximum price and also the keyword okay so I'm going to go back come on let me just go back and I'm going to sell my file and that's the thing that we have to import right here next we have to

create a few stats like products and then set products it's going to be now equals to the used St and we can provide Like basically anything anything for the array okay so let's just provide our empty array right here and also let's just create our filter and set filter it's going to be equals to the use St and for the initial not a used transition but a used St and the initial value we're going to be passing all to it and also I'm going to pass my current uh page and then Set current come on

Set current page it's going to be equals to us St use stad and we're going to be Passing one to it like for the initial value and then let's just also create for the drop down menu because we're going to be also creating a drop down menu as well and then set drop down open okay so it's going to be equals to the use St use St and we're going to be providing the initial value of false it okay so that's really done but I'm going to also create one one variable not a state but

one variable like items per page and it's going to be equals to only 12 item if you want to increase that you can totally do that but in my case only 12 will do let me take care of the UI and then we're going to be going into how we're going to be fetching our data okay so first of all let me just change this D to the section I'm going to copy that from here and now let me just replace that with this one I'll provide a class name of like for the extra large

screen what you want to do you just want to provide this the width of 55 rim for The large screen you want to change the width to 55 Rim as well and for the small screen uh we want to change the width to 40 rim and for the extra small screen you want to change the width two to one rim and also for the padding all around will be set to five so that's going to be fine and now we have to create our D with a class of margin for the bottom will be now

set to five and we also have to create another d uh with a class of flex and also the flex of Column and the small will be set to for the smaller screen size we're going to be providing the flex of row to just like that and you know what I'm going to also provide the justify of between and also the items will be set to Center inside there we're going to be creating yet another D with a class of relative and also margin for the bottom will be set to five and for the top

will be also set to five okay and we're going to be creating only one button inside there That button will take these classes like border and also pairing for the xaxis will be set to four pairing for the Y AIS will be set to two and totally round it full and flex will be also set to item Center okay inside this button what do you want to do we just want to provide um or icon just for now we are going to be only implementing our icon which is tell3 tell3 we're going to be importing

there from the Lucid icon and I'm going To just provide a class name of margin for the right will be set to two Okay so I'm going to save my file and this is how it looks like right here so we're going to be changing all of that stuff inside there but for now this is looking better you know I'm not going to do that later I'm going to do that right now so first of all let me just check if filter is triple equals to uh all which is already set to all right here

which we have already set there to all so if That's the case what you want to do we just want to set there to filter and if that's not the case so we just want to get like filter. character add and you want to provide a zero and then two lower case inside there not local but to lower case you also have to concatenate the filter. slice and number one okay so I'm going to save there for now and this is how it looks like right here but currently we don't have any drop down menu

so that's why we cannot see that But you know let me just create that drop down menu right here okay so what do I have to do underneath this button I'm going to just create my drop down menu which we've already created up above so I'll just write like drop down menu and if that's the case so what you want to do we just want to first of all create a div right here Pro a few classes to it like uh absolute we not providing an absolute because in this case we are now providing the

relative Value so this will be the absolute value for there okay so now inside there what do you have to do we have to change the background color to totally white and also I'm going to provide a bit of border and border of gray of 300 and also totally rounded margin for top will be set to two width will be set to totally full for the smaller screen size we're going to be setting the width to totally 40 um yeah totally 40 just like okay now inside then we are going to be Creating yet another

button and which will say like when somebody clicks on there so we're going to be only firing this function which is like set filter and we are going to be setting there to cheap instead of a full you know let me just show you there right here which was set to full now we are going to be setting there to the cheap one right here I'm going to also put a bit of classes to it like totally block pairing for the xaxis will be set to four and Pairing for the Y AIS will be set

to two withth will be set to four and text will be set to left I'm going to provide the how Str to it like when somebody H over it so you want to change the background color of that to like 200 uh of totally gray so now I'm going to just provide the level of cheap inside then I'm going to sell my file and you know I'm going to just duplicate there a few times so I'm going to just select this button and we have a cheap so we have expensive and We also have popular

one right here so I'm going to just change there to like instead of a cheap I'm going to proide expensive and here I'm going to also put expensive and finally I'm going to put a popular so po o want p o l r and here popular as well so I'm going to save my file now if I click on there so nothing will happen so you know I'm going to go into my drop down menu it is now set to false so I'm going to just set there to like true now if i s my

file and here You can see we're now getting a cheap expensive and also the popular one I'm going to set that to false once again and now we have to take care of the rest of the UI so next we're going to be working with the card okay so I'll just create a d with a class of like grid and I'm going to also write a grid of columns and and four and I'm going to also provide for the smaller screen size we're going to be providing the grid of columns for the medium one we

are going To be providing a grid columns Columns of four and also I'm going to provide a bit of Gap to it so like Gap will be set to five and here we're going to be rendering the book card very soon okay so first of all we have to take care of the filter product and then we are going to be jumping into the book card so we are going to be placing our card in a few second but first of all we have to fetch our data okay inside this component so what I'm going

to do is That I'm going to be using my use effect right here so I'll just use like use effect and here we're going to be passing our function inside there and also our dependency array so for the dependency array we are going to be passing the current page when the current page changes and also the keyword so you want to just free fetch all of our content So based on that first of all we are going to be declaring our URL and it's going to be Equals to you know let me just zoom in

a bit right here and we're going to be setting that to like https and then once again our dummy jon.com and then for/ products and then here we're going to be providing a limit to the if you don't want to provide the limit so you don't have to do that but in my case I am going to do that I'm going to be rendering my content dynamically so I'm going to change that to the template literal whatever you want to call it I'm Going to provide my dollar symbol right here and then items per page

which is now set to only 12 item right here you can increase or decrease that if you wanted to and in my case I'm going to just set that to like uh 12 and 12 will do and Skip let's just provide our skip right here and that's going to be dynamic so I'll just write like my dollar symbol and let me just provide a current page minus one and then outside from there we just want to proide a Times items per page okay so it's going to giv us our URL based on there now underneath

this URL we have to check for our keyword okay so if you already have our keyword so you have to change our URL to this URL like HTT ttps and then where Demi come on Demi jason.com for/ products and then search Let Me provide a key right here and here we are going to be rendering our keyword word right in here okay so that's going to be the next one and finally we have to use our Exus to fetch all of our content so you can totally use the fetch if you want it to but

in my case I'm going to just set that to like xuse but to do that we already installed that but we have to grab that right here up above so I already imported there okay so we have to grab our xus and now we have to just call our get method and we have to pass our URL inside there and then we have to password then okay so let's just provide our response and now for the response What we have to do we have to set the products to response. data and then that product okay

so if you want to check it out let me just show you there so I'm going to just copy that from here and I'm going to just log there to the console like um response. data. products but I'm going to also provide the catch statement so if you got some sort of a error so you want to see that error okay so I'll just use like um yeah this error function will be fine and I'm going to Just come on what the hell am I doing let's just provide our console. error and here we're going

to be passing like error patching the data and I'm going to just use my error right here so I'm going to sve my file and now let me show you all of that content okay so here you can see oh my God we got some sort of error right here let's just check it out so what's going on it should be a product not what the hell I just write like products so I'm going to save my File and run there and here you can see we are now getting all of their data right here

by using our XS so yeah that was a simple and easy stuff the next thing that we have to do I'm going to just remove that from here the next thing that we have to do is that we have to take care of of the filtration okay so I'm going to be just creating my function right here like get filter item like get filter product so I'll just write like this is going to be a huge Function by the way I'm going to go back and now let me just put a bit of spacing right

here and let's just create our get filtered products come on p r octs and now inside this function what you have to do first of all we have to set our filter products to that filter uh not a filter but the products which is that which is a state which we have already defined right here here which is now set to the empty array right here and now let's just change there okay so we're Going to be setting there to that filter products and now underneath there what do we have to do we have to

check if you already have the selected category so what you have to do in this situation you want to get the filter products come on the filter products that variable which we just created right here so I'm going to copy that from here and now let me just place it right here so filter products and we have to call our filter method on there and now here what you Have to do we have to pass our product in side there like as a arrow function and then we are going to be checking like product. category

come on category is triple equals to the selected category so I'm going to just rename that to like the filter products which we've already defined up above so let's just place that right here and I'm going to save there so if I save there and now let me just log there to the console like products right here so I'm going to Save my file but for that we also have to call it somewhere so you know I'm going to call it right here uh I'll just create a variable I'll give the name of like filtered

products and it's going to be equals to the get filter products and I'm going to execute there so if I execute there so we also have to log there to the console oh you know I'm not going to store in any variable not for now so I'm going to sve my file and yeah let me just refresh there and here you Can see here is my categories so if I click on this first one and it's going to gives us all of their data based on their specific Beauty right here so this one will have

the uh this one will have the category of beauty and all of them will have the category of let me just show you the beauty right here so if I click on the furniture it's going to giv us the data based on that furniture right here and here you can see both of them will have the ID why am I saying ID But the category of furniture is right here so now let me just refresh there and that was the first filter now let me just take care of the rest of them but you know

I'm going to also store the inside this variable okay so let's just remove that from here and that was our first if check now underneath this if check we also have to check for the minimum price okay so if the minimum price is not equals to undefined you want to get our filtered products and You want to set there to the filtered products come on filtered products. filter and now inside there we're going to be passing our product inside there and you have to just check like product. price come on Price is greater than or

equals to the minimum price which we've already defined up above okay so now let me just go there and here you can see we are now getting this minimum price from the use filter we want to filter through like if the product that price is Greater than or equals to minimum price price so in that situation we can totally loog that to the console like filtered products but you know it's going to waste a lot of your time so if you have a free time so you can totally go ahead and filter through there so

I'm not going to do that okay so that was for the minimum one but now let's just also provide for the maximum price is not equals to come on not equals to uh undefined so in this situation we want To get our filtered products and we want to set that to the filter products. filter method now inside that we have to pass our product product. Pro price is less than or equals to the maximum price which is also coming from the use filter context okay so it's going to giv us values based on there and

next we also have to take care of this search field as so I'm going to do that right now and next we also have to take care of this input field as well if we search for Some item so we're going to be rendering only that specific item okay so let's just do that I'm going to provide my if statement right here so if search query which is also coming from the context API so we're going to be using like filter product and now it's going to be equals to the fil filtered product. filter method

and we are going to be passing our product inside there okay so let's just use our product. title we are only interested in the title and you Want to set that to lower case because there can be a lot of conflicts between the upper case and the lower case so that's the only reason I'm changing there to the lower case I'll also provide the include method on there and here we have to pass our search query and then to lower case come on Lower come on to lower case there we go and I'm going to

also execute there okay so so now that's St done and you know I'm going to also take care of uh that Filtering as well so I'm going to save this file and now let me just show you there let me take care of where in the world is there that is now set to false so I'm going to set that to true I'll set that to true and here you can see now let me just take care of the cheap expensive and the popular one so let's just go back okay so let me take care

of there and I guess that's going to be the final filter so I'll just use my switch right here and I'm going to be passing a Filter the entire filter inside there and now inside there we are going to be using the cases like if the cas is set to expensive so what do you want to do in that situation we only want to return the filtered products do sort method we are going to be using that sort method and then we are going to be passing like two parameters Like A and B you can

pass X and Y you can pass anything that you want b. price minus a. price okay so that's going to be for the first one Like for the expensive one and I'm going to also just duplicate there for the popular one and also for the cheap one so I'm going to just write like cheap in this situation and then here we are going to be changing there from the B to a and also this one from the A to B okay so it's going to only gives us that cheap ones and we're going to be

also searching for the popular one as well and now in this case we're not going to be working with the pricing we are going To be working with the rating b b do rating minus a do rating like this okay so then it's going to give us all of the data if that's not the case we just want to provide a default state today and we want to only return the filtered products right here so I'm going to sve my file and that's going to be it so I'll just log that to the console and

now let me just show you all of them so I'll just use like filter products I'm going to save this file and now let me Just show you all of them so here you can see it's going to give me a lot of data let me just wipe this out and first of all I'm going to be searching for something like e s and here you can see it's going to gives us that data but we cannot see that data because we did not render our book content which we're going to be doing in a

few seconds so if I just expand there and here you can see it's going to gives us e scnc and eiy and so on and so forth so that was the First filter which means like the first filter is totally working if I write like the minimum value of 19 and then the maximum value of like 200 maybe and here you can see it's going to give us the minimum value and it's going to also gives us Max you know let me just show you the minimum ones so I'll just expand there and check out

the pricing so it is now set to 19 because I provided the minimum value of 19 today and now let me just check the maximum one so let me Just check this out no that's not the maximum one let me provide 200 right here but first of all let's just clear this out let me provide a 200 and now it's going to gives us I guess 200 let me just see yeah it is not equals to 200 but yeah this dat is toally coming from the API so this is not my own API so we

cannot test that right now but anyways both of them are now working I mean like all of these three are working let me Check out the next one so if I check out this beauty and here you can see it's going to uses all of their beauty products if I click on the Apple so it's going to only giv us that Apple product and yeah we got an error because we have to bind there we did not bind this we're going to be doing that in a few seconds oh yeah let me J oh here

you can see I made a mistake I thought I'm going to be binding there but no we have to change that to instead of a ocm we have to Change that to coom I'm going to save this out and now let me just try this out so I'll just clean this out and here I'm going to just choose the Apple it's going to only gives us that Apple product right here like apple apple apple apple and if I click on the watch it's going to give us all of that watches right here like we have

a brown leather built watch and so on and so forth and everything is working and now let me just refresh there and now Everything is working the way we exper work but now we have to render all of that filtered content inside our screen right here so how we going to be doing there let's just do there so what I'm going to do is that I'm going to go to the bottom and here we're going to be rendering our book component but before I do that we're going to be using like filtered products and then

we are going to be iterating over through all of the product and we have to get the filtered One and now inside there here we're going to be rendering our book come on book card okay so I'm going to just render there right here and I'm going to comment this out I'm going to save this file it's going to gives us an error but now let's just create our book card right here card. TSX now inside there first of all we are going to be grabbing our link component which you will see why I'm doing

there and then we are going to be just using our Rafc and let's just create our book component book card component to be precise I'm going to uncomment there and let's just grab that right here s my file and here you can see we are now getting book card book card and so on and so forth you get the idea for this book card we are going to be passing a few props like first of all we're going to be passing the key like product. ID and then we're going to be also passing the ID

itself like product. ID once Again and we're going to be passing the title so that will be equals to the product. title and also let's space our image because we are going to be also rendering the image so we can use like product. thumbnail thumbnail come on N I just like that and then the price and price will be set to product. price okay so now let me just save my file and that's going to be everything I don't know why I'm getting this error but we will fix it in a few second first of

all Let me just drro all of their data so I'll just use like um ID come on let's just get our ID title and also image price we going to be getting all of there but first of all let's just create an interface for there and that will be a bookard props and now inside this interface we're going to be putting the ID of string and also um not a comma and the title will be also a string everything will be a string so I'll just write like image will be a string and Also the

price will be a number in this situation by using my react functional component so react come on react. FC for the functional component and I'm going to just pass my book uh card there we go book card crd and then props okay so I'll just pass it right here and it's going to be equals to this function it shouldn't be equal so I'll just remove there and I'm going to just change that to this data okay so that's all done now the next thing that we have to do is That we have to use there

so to use there first of all let's just remove this book card and I'm going to be providing a class name or border and ping all around will be set to four and totally rounded okay so now inside this D we're going to be passing first of all our link and then that link will be going into that link will go into the product and also that specific ID okay so now inside there let's just render our image first of all and I'm going to Just remove this IMG from here and let me just P

my image inside there I'm going to also change that that alternative text to that title itself and let me just put a class name of like with will be set to four and also height will be set to 32 object will be also set to totally cover and be like margin for the bottom will be set to two Okay so I'm going to save there and now underneath this link or you know what instead of that link underneath This image we're going to be using our H2 and let's just provide a font of um bold

will be fine or semi bold will be fine I'll just change that to title and now underneath there let's just render our uh paragraph right paragraph right here so I'll just write like and I'm going to sell my file and here you can see we are now getting all for data right here which is looking amazing so we have the product image we have the product title and also the money the Price if I change there it's going to only gives us that first one and by the way now let me just show you all

of that filter if I want to search for like this Dior so I'll just write like di o r and here you can see it's going to only give me that and if I just write like Gucci it's going to only give me that specific item right here and now if I want to search for the Apple so if I click on there it's going to only give me Apple product right here if I click on the Watches so it's going to only give me the watches the fashion the trend and it's going to give

me all of their data based on these filter which we have already done so yeah that's looking amazing now let's just take care of the final thing which is called the pagination time to take care of the pagination so first of all we will have our previous button then we will have our next button and we will also have our one two three and so on and so forth Button right here okay so first of all let's just take care of the first button I'm going to also have to wrap it in some sort of

a container so I'll just use like Flex and also Flex will be set to column and the for the smaller screen size we are going to be using like Flex row and also justify will be set to between and then items will be set to Center margin for the top will be set to five okay so now inside there what do we have to do first of all let's just take Care of the the previous St okay so for the previous one we are going to be creating first of all the button that button will

take a few styling like border and then the pairing for the xais will be set to four pairing for the y axis will be set to two margin for the xaxis will be set to two and totally around round it full okay and yeah that's going to be it and here we are going to be just passing like previous and I'm going to just duplicate there And I'm going to also change that to next one as well okay first of all we have to take care of the functionality so I'll just use like if somebody

click on the previous button so you want to just fire this function which is the handle page uh change we did not create this function but we are going to be creating there in a few seconds so it's going to take one perimeter like current page and then minus one so let's just do that I'm going to copy the name of there I'm going to go to the top let me just create that function right here like con handle page change and it's going to be equals to that page and let's just provide one number

inside there so before I do that first of all we have to declare a few variables like con total products like how many products do we want we want only 100 products and then cons total come on total Pages you would have like math.co and we are going to be passing The total products and then let's just divide that by items per page okay so it's going to giv us the total pages right here so we have to just check if page is greater than zero and come on let's just put our zero right here

and uh page is less than or equals to the total pages so what do we want to do in this situation we just want to write like Set current page and we want to password page inside there okay so now if I sa my file but it will not do Anything because we have to first of all take care of the next one as well okay so it will not do anything for now okay so that's really done but I'm going to also provide a disabled St for there and to disable there first of all

we have to use the disable attribute and we have to provide the current page is triple equals to one so if our current page is set to one so you want to disable this entire button if the current page is greater than one so you want to just do Something about the you want to change there so then inst you're done I'm going to also cut that from here yeah you know I'm not going to cut that from here let's just cut there and past that right here okay so that's going to be the next

one so now let's just take care of the next button right now and you know I'm going to also cut that and let's just place it right here for a few seconds and now let me just take care of the previous button so what I'm going to do Is that I'm going to be passing my own click method right here and for this on click we're going to be using that handle page uh change one more time and in this situation we are going to be ping that current patch and what the hell am I

doing let's just close that right here and I'm going to also remove that from here so current page in this case will be set to plus one in this case we we are now decrementing one in this case we now incrementing there okay So now that's already done and now we also have to provide our disabled State on there so for the disabled State we are going to be checking if the current page is triple equals to the total page that was the only reason I made that as a global variable so that we can

use the word here okay so if that is set to Total pages so you want to disable that now the previous button is totally done and also the next button is done now we have to take care of these 1 2 3 4 5 and So on buttons right here okay so how are we going to be doing that to do that first of all we have to just use so I'll just write like Flex and then Flex will be set to W and then just come on justify will be set to center now inside

there here we're going to be rendering our uh P come on p a n a t o n pagination button so how are we going to be doing that let's just first of all create a function for that so I'll go to the top and we are going to be creating A new function for the pagination button so I'll just use like con get pagination buttons and it's going to be now set to the this uh Arrow function right here and first of all we have to get the buttons so we are going to be

using like buttons and it's going to be a number so let's just pass one numbers of array inside there and now it's going to be set to totally empty array okay so not numbers but just a singular number there we go so now let's just also take Care of the start and this the start page and also the end page okay so let's just use like the start page and it's going to be equals to math. Max and we are going to be passing one and also the current page minus two so it's going to

give us the starting page and now let's just take care of the end page and end page will be set to math. minimum and here in this case we're going to be passing our total pages and also current Page Plus two not minus two but plus two And now let me just put a bit of conditional statement right here if our current page minus 2 is less than one so in that situation we want to get the end page and we want to set that to like math. minimum and we have to provide our total

pages and then end page right here in this case and we have to also so combine this two and then minus current page and also let's just provide our minus one right here okay in this situation this going to give us the end Page so I'm going to also duplicate there and let's just take care of the what do we call it the starting page so if current Page Plus two is greater than the total pages so in that situation we are going to be just changing this start like that into the start page and

I'm going to just remove all of that stuff from here let me provide one for the first perimeter and then start page minus 2 and then minus total page and then minus current page so it's going to Giv us the starting page okay so now let's just iterate over through all of there so let's just use like let page is equals to start page and then um page is less than or equals to end page and then finally let's just use our page Plus+ you can use I if you wanted to but in my case

page would be fine so now let's just use a buttons. push method and we have to provide our uh page inside not Edge but page and finally we have to just return our buttons okay so I'm Going to sve my file and this is how we are going to be creating our get page ination buttons and now let's just use the right here inside this area so let's just use that I'm going to execute there but first of all we have to wrap the inside these curly braces I'm going to also remove this command from

here and now we have to over through all of that pages so we have to use the map method inside there and we're going to be only passing the page inside there so I'll Just first of all create a button right here here inside there and first of all we have to paste the key and the key will be set to page and we're going to be also providing the on click like when somebody clicks on there so we want to just pass for handle page change and now in this case we we don't want

to do nothing with there but we only want to pass the page inside there okay and let's just put a bit of styling to this I'm going to be using like a few Dynamic Styling like border first of all pairing for the xais will be four and pairing for the y axis will be set to two margin for the xaxis will be set to one totally rounded and full and yeah in this casee I'm going to be passing my page is triple equals to the current page so in this situation we want to change the

background color to totally black and we also want to change the text to totally white that's not the case what do you want to do in that situation we just Want to set there to the empty string just like that and here we have to just past the page name and that's going to do it so I'm going to save my file and here you can see we now getting our pages right here so if I refresh my page and here you can see we are getting like 1 2 3 I can click on the

previous I cannot click on the previous right now because we are now at the first page if I click on the second one it's going to render my content right here I can also Click on the next one and here you can see it's going also render all of that content I can click on the fourth I can click on the previous one and now if I cck click on the previous one it's going to just gives us the previous items right here I can go to the next one and so on and so forth

which is looking amazing so yeah I can provide a filtering in this situation but I forgot to take care of this filter right here so now let's just do that I'm going to Go to the top where I have this drop down menu right here or button which you can see right here so we have this button and I'm going to be just placing my on click Handler come on the on click Handler when somebody clicks on there so what do you want to do in this situation we just want to set the drop down

to not drop down open okay so if that is currently set to false it's going to make it true and if that is said to true so it's going to make it false okay so Let's just check it out if I click on there I can go to the cheap item and I can totally select the cheap item and I can also select the expensive one and I can also select the popular one as well so yeah everything is working the way we expect him to work and they are looking awful so I'm going to

take care of that in a few second but yeah everything is totally working I can click on the Apple it's going to only give me the Apple product and watches and so on and so Forth so now we are totally done with the main content page but now let's just take care of the product page like if I click on this specific product so we have to also take care of this product as well okay so let's just do that I'm going to go ahead and create a new component I'll give it the name of

like product page. TSX let me just use my rfca and I'm going to go into my app and let's just register there right here okay so I'm going to just duplicate this Lineup code and then we want to go in come on product and we want to go into a specific ID of that product and now let me just render my product page right here in this case I'm going to save my file and now let me just take care of there first of all there will be a few thing that we have to take

care of so so first of all let me just go ahead and grab my ID okay so ID will be coming from the use per RAM and which is coming from the react ROM and here we have to Just pass the ID right here so ID will be totally a string it's going to be set to this parenthesis right here okay so it's going to give us the ID now we also have to get our navigation so we're going to be using like use navigate for there which is also a function coming from the react

rou Dom and we will just store there in the NV weate uh variable right here n AIG G at yeah and let's just create word state so I'll just use like uh product and also the set product Right here and it's going to be equals to the use State and it's going to be set to initially now and now I'm going to annotate there with the product which we did not create but we will create there in a few second and also the null okay so either the product or the null so now let's just

create interface right here so that interface will be that product and now inside this product we're going to be providing the ID which will be set to number I'm going to also Provide the title and title will be set to string and then we have our description and descriptions are also a string and the price will be set to a number and I'm going to also provide the rating and rating will be set to a number as well and then finally we have our images okay so images will be set to a string of these

Mt array okay so it's going to take the as the so we are going to be an trating or used by using this product and now let's just take care of The UI but before I do that I'm going to have to fetch all of that content right here so I'm going to be using us effect in this case now inside there we have to first of all provide the dependency array of that ID like if that ID changes so we want to just call this function and first of all we have to check for

the ID if you already have the ID then we are going to be using the Xs and then we are going to be using the get and so on and so forth so let's just get our Aus and I'm going to be using the get method on there I'm going to also annotate as the product let's just do there and I'm going to also provide the https and that same dummy Json API so let's just go to the products and we have to render our ID dynamically okay so if that's the case so it's going

to give us that response P okay just like that and we have to use our uh what do we call it set product and we have to pass our response. data inside there Okay I'm going to sve this file and now underneath this then we have to also provide the catch statement as well so if you got some sort of error so in that situation we are going to be just using like con. log okay so cons. error would be fine rather so I'm going to just use like error patching come on patching product data

and let's just render our error right here so I'm going to save that and this is how we going to be fetching our products right here in this Component so yeah that's cool and you know I'm going to also put a ler right here so if you don't have the product so in that case we just want to return uh H1 off loading dot dot dot would be fine and now let me take care of this UI so I'm going to go ahead and first of all provide my piring all around will be set to

five and width will be set to uh yeah 60% will be fine now inside this D we are going to be creating our button and let's just start our own click right Here and when somebody clicks on this so what you want to do we just want to navigate minus one okay and also let's just style okay so I'm going to put a few styling like margin for the bottom will be set to five ping for the xaxis will be set to four ping for the y axis will be set to two and background will

be set to totally black and text will be set to totally white and totally rounded so for this SP label we will just say back I'm going to sve my file and now Let's suppose if I click on this icon it's going to give me the loader first of all but something is not right okay we are still getting a loader let me go to the console and we got some sort of error so error fetching a product data exus it should be dummy why am I keep forgetting there let's just save our file and

now let me just refresh there and here you can see we now getting our back button right here which is looking amazing so That was the first thing that we have to create our back button now let's just create our image so I'll just use my image right here and I'm going to be using like first of all my product. images and we want to get only the first image out of the and now for the alternative text we're going to be providing um the product. title and then for the class names I'll just write

like with will be set to 50% and also uh height will be set to Auto and margin For the bottom will be set to five I'm going to to save that and let's just refresh there so it's going to gives us that image right here I'm going to go back and choose another one like maybe I want to choose yeah this sofa would be fine is there a sofa or I don't know what the hell this is so yeah here you can see we're now getting that image right here and now we have to provide

our H1 and I'm going to be providing a few classes like text will be set to 2 Xcel margin for the bottom will be set to four and font will be set to totally bold okay so let's just use our product. tile and let's just sa our file and here you can see we're now getting the product title I'm going to also put a paragraph with the classes of margin for bottom will be set to four and text will be set to totally gray 700 and also the width will be set to uh you know

the width is arbitrary value so we are going to have to do the manually so I'll just Use like 70% and close that and now inside that we're going to be using product. description I'm going to save that and here you can see it's going to giv us their description Right Here and Now underneath that we're going to be using a flex you can provide more styling if you wanted to but in my case that's going to be fine so let's just provide our price right here so we are going to be using product. price

and now underneath this paragraph we going to be Using like margin for the left will be set to 10 and let's just provide your rating right here in this case and then product. rating okay so I'm going to save my file and here you can see we're now getting our price and also the rating which is amazing so now I can go to any product that I like so let's suppose if I want to go to the next page and I'm going to just choose cat food it's going to giv this first of all the

image it is taking a bit of time because Of my internet connection so it is now giving me the image the name the description also the price and rating you can totally change like anything that you want so that's there and that was it about for the product page and next we're going to be taking care of the top seller and also the blogs that was it about for the product page and now let's create our popular blogs and also the top sellers okay so I'm going to just create two component I'm going To give

it the name of like popular blogs. TSX and inside there let me just create my component and then we are going to be also creating uh for the top sellers. TSX as well so let's just WR our RFC and now let's just register that in our app component so underneath these routes we're going to be creating one more Dev and inside this Dev first of all let me just render my top sellers and then we are going to be also rendering or popular come on popular so I'm going to sve my file and now let

me go into the top sellers and now let's just create there so the first thing that I'm going to do is I'm going to just create my authors uh state so then set authors and it's going to be equals to the used St and here we're going to be only passing array okay so now let me just annotate there by using the author which we going to be creating in a few seconds and now let's just provide there Okay so now let's just create that interface right here so I'll just write interface and then author

and name will be a string we're going to be also providing is following and that's going to be a Boolean and also and also we have to PR the image and image will be a totally string okay so that's to done now we have to fetch our data so we going to be using the use effect and now inside there for the dependency area I'm not going to provide anything and now Inside there first of all let's just create our function so I'll just give it the name of like fetch data it's going to be

an asynchronous function because we are now fetching some sort of a data inside there so now let's just use our try and catch block for the catch block I'm going to be using cons. error and I'll just say like uh error fetching authors and list render or error as well and for the tri block first of all we are going to be getting the response by Using the aware and fetch method and here we're going to be passing our https and then the random user. me and then API and uh question mark results equals to

five because you only want to get five users if you want to get more you can totally provide there like let's suppose if you want to get 10 users you can just write 10 right here but in my case five will be fine case I'll just write like data and now let me convert my response to Json okay and now we Store the inside the data so the next thing that we have to do is that we have to iterate over through their data so I'll just write like authors data and here I'm going to

be passing my author right here and that was an array now it's going to be equals to data. results. map and now here we are going to be also providing our perimeter which will be a user and for now we are going to be only hasing any word here cuz we don't know what kind of data we are now Getting right now okay and now inside that we're going to be providing first of all the name and here let's just provide our user.name do first and then we're going to be also providing uh user.name do

last okay so it's going to gives us the username and now for is Following come on uh is following will be set to false initially and the user image will be user. pictures picture. medium and here we have to provide our commas and that Error is now successfully gone change our set authors and provide our own authors data to there so that's everything that we have to do for this fetch data and let me just call that right here fetch data and now I'm going to execute there let's provide our GSX so first of all

I'm going to just change the background color to totally white I'm going to also provide the padding for all around will be set to five margin for the xaxis will be set to five Margin for the top will be five as well and uh I'm going to also provide a border and width will be only 23 RAM and totally rounded now inside there we're going to be creating our H2 with the classes of text text Xcel and also the font will be set to Bard margin for the bottom will be set to five and let's

just proide our top sellers inside this so I'm going to sell my file and this is how it looks like right here next we have to provide Our ul and inside this U we're going to be iterating over to all of the authors and then inside that we are going to be providing the author and and also the index of the author and then inside there I'm going to first of all write my li and for the key I'll just provide my Index right here you can use The UU ID and you can use all

of that stuff but for now I'm going to only provide this Index right here and for the class names I'm going to provide like Flex and items Items will be now set to Center justify will be set to between and the margin for the bottom will be only set to four inside them we're going to be creating our section and section will be a flex justify will be set to Center and also items will be set to Center let's just render our image and I'm going to just remove there and replace that with the author.

image and for the alternative text we're going to be providing like author. name as well and now let's just Provide our classes like with will be set to 25% and also the height will be set to 25% let's just provide our justify Center and totally rounded off full so if I save my file and this is how it looks like right here so underneath we're going to be creating what a span with a closes so margin for the left will be set to four and let's just provide your author. name if I save my file

and now they are looking amazing Okay so they are looking super amazing right now underneath this section we're going to be creating our button and that button will have a few things like uh you know what yeah I'm going to just proide first of all my uh author so author. is following and if it is following so we going to be using like unfollow and if that's not the case we going to be only providing like follow if if i s my file and here you can see we are now getting the follow button if

I click on that nothing will happen and I'm going to proide that logic in a few seconds but first of all we have to style there so I'll just use like uh class names and we are going to be rendering Dynamic content so for that we are going to be using like Ping for the Y AIS of one pairing for the xaxis of three totally rounded and here let's just render our Dynamic content like is author dot uh come on uh author not is following if that's the case so what do We have to do

we just want to change like the background color to totally black uh I mean like red and also the text will be set to totally white and if that's not the case we going to be changing the background color to toally Black and the text color to toally white so if I save my file and let me just check this out and here you can see we only have like this black color and let's just put that functionality right here on click when somebody clicks on That so what we have to do we have to

just fire this function which is handle follow uh click and we also have to put our index inside there okay so I'm going to copy there and now let's just create there I'm going to go to the top and underneath this use effect we're going to be creating this function right here and it will take the index and index will be a number and now inside there we're going to be setting our authors and here we have to provide our previous Author and let's just use our previous author Dar map and here we're going to

be providing the author and also the index okay so let's just wrap the like as author and also the index and now outside from them we're going to be checking like index index triple equals to the index itself if that's the case we just want to use like all of the author and then we want to provide like is following and we want come on uh f o l o o w i n g you want to set the is Following to not author is following okay and outside from that we are going to be

only providing our author okay so now let me just save my file and now if I click on there and here you can see we are now getting like unfollow and also the color is totally changed you can follow everyone and you can unfollow follow that if you wanted to so that was the top seller component next we have to go into the popular blogs component and here I'm going to P an array and inside This array we have a object and inside that object we have a title and their title can be anything then

the author can be also anything and likes can be anything and comments can be like basically anything you want okay so this is our blogs array inside this array we have a few objects right here which I just duplicated so this is my blogs uh array right here and now let's just itate over through there but first of all let me just remove there and I'm Going to style there first of all let me just provide the background color of totally white ping for all around will be set to five width will be set to

23 rim and I'm going to also provide margin for the top of four and totally provide a border margin for the left will be five and rounded inside then we're going to be providing our H2 text will be set to totally Excel and also the font will be set to bold margin for the bottom will be set to five and let's just Provide our popular blogs inside this if I save my file and here you can see we now getting our card underneath we are going to be providing our ul and inside this UL we're

going to be iterating over through all of our blogs and let's just use our blog and also provide our index as well okay so now inside them we're going to be using our UL I me like our lii and here we have to provide our key and the key will be index and also let's just provide our class name of margin For the bottom will be set to four and inside this UL we're going to be also providing first of all the day with the class of flex and justify will be set between and items

will be set to Center okay and inside there we're going to be also providing our span with a class of font Bol margin for the bottom will be set to two and let's just render our block title so let's just use our blog. tile I'm going to save this file and here you can see we now getting all of The blocks titles right here underneath this span and div we're going to be creating yet another span and I'm going to provide the classes of like text Gray of 600 published uh by and then the blog.

author and here are the author underneath this man we're going to be creating yet another div with a class of F and items items will be set to Center margin for the top will be set to two and here we're going to be rendering first of all the icon like message Circle which is now going to be coming from the Lucid icon and I'm going to also provide the size to this so the size will be now set to 16 or just 16 would be fine so I'm going to save there and this is how

we are going to be getting our icon let me provide my span with a class of text to gr 500 margin for the right will be set to five margin for the left will be set to only one and inside this pen I'm going to provide like blog. likes come on likes like There and I'm going to close there so outside from this Spen and also the dev or you know outside from just this pan you're going to be rendering one more like thumbs up and then let's just provide our size to this so size

will be set to 16 and now underneath there we going to be using a spin with a class of text totally gray of 500 and also margin for the right will be set to two margin for the left will be set to two as well so let's just provide our blog comments And that's going to be it so if I sve my file and here you can see we are now getting like all of the likes and all of the comments as well so yeah that's everything that we have to do for now but we

have to change a few things inside there so we have to change the sizes of these and let's just do there there are a few changes that I made so the first thing that you have to do is that you have to go into the app. TSX and instead of providing a justify bit You have to change that to a justify Center and then you have to go into the main component and just provide the margin for the right of 10 RAM and then you have to go to the sidebar and you have to provide

margin for the top of three and also uh you have to provide these stuff right here like we already provided some of them but here you have to provide like with or full and this is how your UI will look like so now let me just test that for the final time I'm Going to provide like something maybe uh I'm going to just search for like red now come on now so it's going to give me that first one and then if I search for like minimum price I'll just write like 10 or you know

19 would be fine or 20 would be fine okay and then 200 so it's going to give me all of that products now let me just click on the reset you can click on the beauty so it's going to only gives us the beauty item let me click on the reset one more time I'm Going to click on the Apple so it's going to only give me the apples uh product and then if I click on the watch so it's going to give me the watches and so on and so forth now I can also

select the cheap one I can select the expensive one and also the popular one and we can also work with the paginations if I go to the next page and so on and so forth so it's going to give me all of that items right here okay and we can also follow someone and unfollow someone and This is how our entire UI will look like so thank you so much for watching if you like these kind of projects so feel free to comment there below and I'm going to do my best to make an amazing

project like these in the future as well so I'm going to see you in the next video thank you so much for watching and bye-bye e okay so let's talk about the first question will I get a job after completing this entire Rea J series and I'm not just talking about this video or a previous one I'm talking about the entire Series so the answer is simple yes and no I know it sounds a bit weird like yes and no which kind of answer is that while completing this entire series it will give you a

lot of confidence skills and knowledge to learn your first job but this is not my promise like I cannot promise you like this course will give you a job but I can definitely give you a guarantee about that I can totally Give you a guarantee that this course will give you a job but I cannot make a promise about that which also leads us to the next question how can I even get a job and the answer for this question is super amazing and trust me you're going to love this one and the answer is

you have to be unique I want you to keep that in your mind I want to say that two times because I want to stick that into your mind you have to be unique and you have to be unique if you build something Unique which value other people's they will hire you because I've seen like I don't know maybe 10 or 20 people who did that same thing and I swear they weren't even qualified enough so they just built something amazing and totally unique if you want me to show you a few peoples I can

definitely show you there so you can definitely go ahead and check out my Instagram stories and I will definitely show those people to you they are not even qualified enough and they just Built something unique so they got H God damn it and here a lot of people are asking me hus how can I even get a job well stop asking Chad GPT or other AI Bots to give you idea for your project you have to build something by yourself which has to be unique which also have to offer some value to other people and

trust me I can totally promise you that they will hire you let's talk about the third question isn't this just a tutorial hell yeah I've seen a lot of Popular YouTubers make the same videos like stop watching videos and stop paying for online courses and do this and do that by yourself and stop listening to other people's and yeah I've seen a lot of crap like this but I have to ask you a question if you don't watch any tutorials if you don't watch any videos how in the world you're going to be even learning

that specific topic let me just give you a challenge a few days ago ten tener Lindley or I can't Even pronounce that guy name but uh he dropped a new framework called uh 10 Stag and I'm not talking about the 10 stag query or a 10 stag crouter I'm talking about the 10 stack itself so I want you to go ahead and just learn there Cod is totally complicated and if you try to learn that you're going to have to watch the entire documentation and also you're going to have to go ahead and go through

a lot of code bases to even learn that framework and what if I make a complete course about there and give you all of my experience and save you a lot of time I spend 10 years in this indust and by the way I love 10 St query I love tener Lindsay I can even pronounce as name but yeah I love him I also love Tyler meinz so yeah no hate about them but I'm just saying go ahead and learn that framework by yourself you can because nobody made any tutorial about that so I'm going

to be making a complete course about that don't worry About that framework which will be dropping very soon what I was trying to say is that you have to go through this tutorial hell then there would be a point that you don't have to watch any tutorials and you would be able to build anything by yourself like imagine for a second when you are first learning about the HTML and CSS you had to watch a lot of tutorials now if I ask you to watch the HTML and CSS tutorials you won't even watch them Because

I know your experience you are now experienced developer who is watching this video so you don't even have to watch the HTML and CSS tutorials you can do every single thing by yourself so first you have to go through the tutorial hell and then you don't have to watch there let's talk about the next question will there be more parts of this course yes there will be because we have to cover cover the 10 stack query 10 stack router 10 stack framework Itself react design patterns react design system react testing and also next year 15

so yeah there will be a few parts now let's talk about not the most important one but why do I laugh so much in my videos I know some people don't like my laughter but to be honest I love it and I love to love and you can't take this away from me because this is my channel and I will do what the I like to do let's talk about the frame or motion so Frame or motion is a popular open- Source library for reactjs that allows developer to create animations and transitions easily it provides

a set of tools and apis to animate component enabling smooth and high performance animation with minimal effort so this just a basic definition of what a framer motion is now let's talk about what's the difference between framer and framer motion so a framer is a design tool that allow you to create High Fidelity Prototypes and Interactive design on the other hand a frame or motion is a library specifically for reactjs that enable developer to create smooth animation and transitions now the big question is why should I even care about learning frame or motion if I

can do my transition and also animation in CSS why should I even bother learning frame or motion and now let's talk about the CSS animation pros and also CSS animation cons then we're going to be also Discussing the frame or motion pros and also the frame or motion cons CSS is great for simple how effects transitions between stats or animation that doesn't require a complex logic CSS animation are typically very performant and can leverage GPU acceleration you also don't need to install some sort of a third party library for there you can totally go ahead

and just write your code it will work totally fine so that's just a pros of what a CSS animations and Transitions is now let's talk about the cons they are more challenging to manage complex animation such as coordinating multiple elements or responding to the user interaction be beyond the simple events animating properties based on a component State can be also cumbersome in a CSS animation so that's just the pros and cons of a CSS animation and now let's talk about the pros and also the cons of a frame or motion so let's just start from

the pros so framer motion Offers Advanced capabilities like drag gesture and layout animation which can be hard to achieve with a pure CSS and also it allows us to integrate seamlessly with react component model allowing for easy management of St driven animation it makes it easy to Define in switch between different animation State and now let's talk about the cons of the frame or motion so it might take some time to get familiar with the apis and stuff the learning Curve can be a bit difficult sometimes but not all the times and you would also

need to install a third party package which is called the frame or motion package which we're going to be seeing in a few seconds so yeah that's just the only cons about the frame or motion and welcome to the word of animation and framer motion let me show you the difference between framer and framer Motion in action so here you can see I am now inside the frame.com for/ motion Right here and it's going to brings us to the frame or motion documentation which is something that we want and here we're going to be spending

a lot of time but now if I only remove this motion and if I hit enter right now it's going to brings us to something called the framer okay so here you can see you can learn more about that if you wanted to which is basically a design tool and you can do a prototyping and all of that kind of stuff which is something which we not Going to be doing in this course okay so yeah this is a framer website and now if you want to go into the framer motion documentation you're going to

have to specify the motion right here and if you hit enter so it's going to brings us to this frame on motion documentation right here okay so time to make a set of for recording Journey so what I'm going to do is that I'm going to open my terminal right here and then I'm going to make it a bit bigger so that you guys can see Everything a bit better like so now we use npm create with at latest and here I'll give it the name of like Prim motion demos or something like that I'll

choose reactjs and also typescript now I'll go into the framer motion and now let's just install every single thing inside there so I'll use like npmi to install all of the packages now that's done I'm going to also install the frame or motion so I'll just click on the getting started and I'm going to copy This command from there and now let me just place this Command right here and hit enter so it's going to install that while it's doing then I'm going to also go into the T css.com click on the getting started I'm

not quite sure if I'm going to be using T in CSS or not but yeah I will still provide this all choose the weat and then I'm going to copy this command and let's just place it right here so it's going to install tailin CSS inside my project so I'll Also copy this command or this content from here and I'm going to hit enter so it's going to initialize my T in CSS let's just open our vs code right here and this is how it looks like so I'll just remove there I'm going to also

remove the public folder let's just go into the SRC remove the assets the app. CSS and also remove every single thing from the app and I'm going to be using my rafc inside this sa my file let's go into this T config file and I'm going to Replace it with this new content and I'm going to also copy these components from there so let's just go into the index.css file and replace it right here okay so finally I'm going to have to run that but I'm going to copy this line of code and place there

right here with this new one so let's say sa our file and I'm going to be using npm run de so it's going to run there inside my server so use like Local Host and here you can see we are now getting our hello word Which is looking cool but also I want to provide more styling to this so I'm going to go ahead and go to my index. CSS file and place it right here sa my file let's just go back and here you can see we are now selecting every single thing providing a

pairing of zero and margin of zero box sizing will be set to border box then we are selecting the body changing the background color also changing the text color and centering out every single thing and then we have Our box and this box have the width of 300 and also the height of 300 and we have a border pixel or Bard radius of 100% And we are also changing the background color of there so this is how currently things looks like and that was just a simple setup now let me show you the basics of

Animation I'm not going to be writing a lot of code and you can think about that is just like the hello Word program in the frame or motion so I'm going to make things side by side Like so so I'll just remove that and also remove that one and make things side by side remove there zoom in a bit so you guys can see everything a bit better the first thing that I want to do is that I want to import something from the frame or motion which is called the motion from where from the

frame and motion so that's going to be the first thing next we have to create some sort of a div not this div but we have to create them manually and inside there We're going to be using something called the motion. div and I'm going to also close it you can close your div like this but I'm not going to close my div like so okay I'll just close it like a self closing tag I'm going to also Pride the class name of box today and remember this box is coming from this CSS as you

can see if I go into this index. CSS so here you can see we have this box and we are now providing The Styling today okay so yeah we can now totally see our Circle and I'm going to use like animate prop and here inside this animate prop what I'm going to do is that I'm going to proide the X and the X will be set to 20 okay so if I save there or you know let me just change that to 100 and here you can see we're now animating this ball so what is

this motion which we are now importing from the framer motion and what is this animated prop so now let me just explain that in the diagrams let's talk about that motion thing which we Just import from the framer motion so motion is an object that provides a set of component and hooks for creating animation and transitions in react applications so that's just a theory but now let's just explore the bit more so when we use the motion dot element and that element can be basically any HTML element you can specify motion do H1 H2 or

U Li span image div article a side section or text area in Imports or anything that you prefer so you're going To be using that like this first of all you're going to be importing the motion then you're going to be using motion Dot and then you're going to be using the element name so basically we are indicating that we want to animate this specific HTML element framew motion then provides additional props and feature to facilitate those animations such as the initial prop animate prop and also the exit prop allowing for more powerful and customizable

animation okay so we just Mentioned these three things like and also the initial and also the exit prop so I want to discuss there a bit more let's talk about the initial prop so the initial prop is used to define the initial state of an animated component before it enters the Dom it specify how the element should appear when it first renders so that was just the initial prop and now let's talk about the main part which is called the animate prop so the animate prop is used to create an Animation for the component it

lets you set the target value for the different CSS properties making it easy to have smooth changes when the component State updates that was the animate prop and now let's talk about the final not a final but now let's talk about uh yet another most useful one which is called the exit prop so the exit prop is used to define the animation that occurs when the component is removed from the reactory this is particularly useful for Creating an animation when the elements are unmounted or removed from the Dom enhancing the user experience by visually indicating

that something has disappeared and now we are going to be covering the first part of for animation which is called the Transformations so transformation allow you to change the shape size and position of the element on the web page I know there was a lot of theory but now let's get into the code and then you will get to know what I'm talking about okay so let's talk about the transformation and I know there was a lot of theory so now let's just Implement all of the theory in action so anytime you want to work

with a frame or motion there are a few things that you have to keep in mind the first thing that you have to keep in mind is that you're going to have to import this motion object from the frame and motion and then you have to tell the frame or motion that which element or which Specific HTML element you want to animate so this is how we're going to be telling our frame or motion that we want to animate this specific Dev okay so now frame or motion will gives us a super power to animate

that Dev so the first super power it will gives us is the animate prop so it's going to take a CSS properties and which will allows us to animate word div so I'll just use like translate property right here so if I just use like translate card Translate and now if I hit penter I can also use like translate on the x-axis and also on the Y axxis like 200 pixel and as soon as I save my file here you can see it's going to move my element I can also write like translate on the

x-axis so if I sa my file it's going to move my element on the x-axis I can also push that on the y- axis so here you can see it's going of push that from top to bottom so we are not going to be writing our code like this because in the frame And motion there are a lot of shortcuts okay so instead of using like translate on the X axis and translate on the y axis we are allowed to do that if you want to do that but we don't have to do that okay

so let's suppose if you want to use like the translate on the x-axis we just have to write like X so as soon as we write X then we can specify like how much we want to move our element so I'll just write like uh not 200 but 100 pixel and now I sem my file so it's Going to move that 100 right here I can also change that to 200 and it's going to push that right here on the 200 we are also not limited to only writing a x instead of writing a translate

on the y axis we can only use the Y okay so if I change that to like 100 and S my file so it's going to push it down right here I can also write like 200 and here you can see it's going to push a bit more and once again we are not limited to just provide these properties we can also use Our own custom CSS pixel rims percent and all of that kind of good stuff so I can use like 100 pixel sa my file so it's going to push that right here I

can also use like 10 rims or something like that sa my file F so it's going to push a bit more and I can also use like uh you know what 80 80% this is for 80% it's going to also work exactly the same so that was there about the translate on the x-axis and translate on the y-axis now let's talk about the rotation so to Work with the rotation first of all we're going to have to go into the index.css file and we have to comment this Bor radius right here from this box so

now if I save my file and by the way if you are wondering here is the index. CSS file okay so now we can totally rotate our element so to rotate them we have a few properties like the first property we have is a rotate on the xaxis then we have to specify the values in the degrees so I can just write like 60° let me just write a 60° right here semi file and it's going to rotate my element on the xaxis 60° I can also change that to like 20° it's going to also

rotate there as a 20° and I can also change that to like 70° and it will work exactly the same we are not only limited to work with x-axis we can also use the y axis and I can just write like 60° semi file and it's going to rotate my element on the y axis 60° I can also change that to 20 and this is how it Will look like in some situation we would also want to use one value for the x-axis and also for the y- axis so for that we can use just

a short hand which is called the rotate property so I'll just use like 60° semi file it's going to flip it up and also we can for 20 degree we can use any kind of value so that was the rotation and also the transformation or a translate value let's talk about the scaling so we can also scale our element you know what First of all let me just show you something here you can see if you go ahead and go to our index. CSS now we are providing the width of 300 and also the height

of 300 to our specific box which means like we are now using the scale of one okay so if I just write like scale of one it will look exactly the same but if I change there to two so which means like like we're now duplicating or multiplying this value like here you can see this is a 300 it's Going to make it as a 600 and also make the height as a 600 okay so in some situation we would want to increase the size of that so for that we can just use like scale

then we can just specify two which means like we want this element to scale up twice so now if I saell my file and boom okay so that was the scale property we can also just change the One Direction like on the x-axis I say my file so it's going to change the on the x-axis you can also change their on the Y- axis and this is how it will look like and we can also provide like obviously four and five and stuff like that bang this is looking huge so then was it about for

the X Y roted X roted Y roted scale X scale Y and just a scale property let's talk about the final one which is called the skew so skew will allows us to tilt our element okay so we can also skew that on the x-axis let me just write like skew on the XA is of 20 and as soon as I do the and sa my file And here you can see it's going to tilt my element as 20° we can also change the direction to the y-axis like so say my file and it's going

to tilt or skew there on the y-axis s 20 so I can also change that to like 40 and this is how it will look like and we can also like obviously use the short hand which is called the SK sa my file and this is how it will look like we can also change the value of that to 20 and bang okay so in this section we learned all of that Properties let me just show you there so we learn about the come on we learn about the animate and we also learn about the

motion motion Dot and specific element and we learn about the x-axis the one I know that you like transformation but now I'm going to tell you about yet another property which will make you fall in love with itself and that property is called the transition so let's talk about it what are transitions And why you should even care about them so transitions are the effect that control how the animation happens and you can think about them as the rules of how the element moves or changes so there are a few properties about the transitions which

is called the duration easing and the delay so let's talk about the first one which is called the duration so duration simply means that how how long the animation will take and easing simply means the speed curve of The animation like it will start from slow and it will go fast or it will go fast and then it will stop slow and something like that then we have a delay and delay just simply means how long we have to wait before starting the animation so yeah that was just the basic theory about the Transitions and

now let's just discuss the inaction so let's talk about the transitions inaction so what I'm going to do is that I'm going to uncomment this line of code And now we have to provide our initial State and we just saw initial state in the diagrams but this is the first time that we are using there so basically this is going to be the initial State or the starting point of our animation so we want our animation to start from zero and then we want to animate to the xaxis 100 pixels so now if I save

my file here you can see our animation will start from zero and then it will go to 100 pixel on the x-axis so which is cool and Everything but now you want to control the behavior year of this animation so how are we going to be controlling there so to control there we have another properties called you guessed it transition okay so I'll use the transitions right here and inside this transition prop we can proide the delay duration and also the easing so now in this case I'll just put like the delay I'll write like

delay like so and delay will be set to maybe 2 seconds okay so I'm going to save my file and now let me just refresh there so we have to wait 2 seconds like one and two then it will start work working so you know what let me just refresh there one two bang okay so this is the delay like how long we have to wait before starting the animation okay so I'm going to duplicate this lineup code I'm going to comment this line out and I can also set there to like 5 seconds or

something like that now let me just refresh this so we have 1 2 3 4 5 and bang so now it will take like 5 seconds so that was delay but I'm going to also duplicate that and change that to something called the duration and this is by far one of my favorite property and we can provide a seconds to that like how long our animation will take so I'll just provide like 2 seconds and now if I just refresh there and bang this is super smooth you know I'm going to change that to 200

and now let me just refresh there and here you can see This is how it will look like so now what animation will take 2 seconds to complete I can also change that to like 5 seconds and now let's just refresh there and it will take 5 Seconds to complete now so this is also cool but we can also change the behavior of there a bit more okay so now let me just duplicate this line of code and comment that one out so I can also provide the easing and we have a lot of easing

so we have anticipate back in back in and out Circle in circle in and out circle out and EAS in ease in and out and linear and there are a lot of them so I'm going to only choose this ease in and out I'm going to save my file now let me just refresh there so it's going to start slow and then it will go a bit fast let me just refresh there once again okay so it's going to start slow then it will go a bit fast I'm going to change that to like maybe

two seconds so that you guys can see everything a bit better and yep We also have the ease so if I change there to ease so everything will go as a ease so you know what let me just change there to uh linear linear now if i s my file and here you can see it will go linearly so yeah we have these few transition properties we have a delay duration and also the easing welcome to one of my favorite Topic in this entire course which is called the key Fram so what are key Frames

and why you should even care about that so key frames allow you to create more complex animation by specifying multiple points in animation sequence instead of just animating from one state to another we can Define several intermediate state or you can also say frames to control the animation more precisely and I know that's a complex definition to say but to put them in more simple terms you can think about the key frames is like splitting Or dividing any into multiple frames or multiple parts so that's just as simple as that so how the syntax will

look like this is how the syntax will look like so first of all we are going to be using the array and inside this array we're going to be providing the starting point and then the ending point and we can provide as many as we want so that was just a theory about the key frames and now let's get into the coding then you'll get to know what I'm talking About okay so now let's just use the key frames in action so I'll use the animat prop once again and inside this animate prop we're going

to be doing a lot of magic so first of all you want to scale up this ball so I'll use like scale and here once again anytime you want to use the key Fram so the first thing that you have to do is that you have to write the array and inside this array you have to specify the starting point and then the ending point so I'll use like start from One like the scale of one then go to two Okay so if I just write the in semi file here you can see it's going

to start from one then it's going to go to two and I'm going to also provide the transition so I'll write like Transitions and here for the transition I'm going to provide a duration of like maybe 5 seconds or something like that say my file and now let me just refresh there it's going to start very slow from the one scale then it will go to two Scale and now let me just refresh there here you can see it's going to start from the one scale and then it will go to two scale now we

can also specify and we can also tell it that we have to start from Two and then we have to go to three okay and we can also provide more than this so I'll just use like this start from that three then start from the four then go to three and we can also go backward then start from the three then go to two then start from the Two then go to one okay so I know there was a lot of saying so let's just save our file and refresh there so it's going to start

from one then it's going to go to two then it's going to go to two once again then it will eventually go to three and four and it will start from the four then it will go to three then it will go to two and finally it will reach to the one and this is how it looks like so you know what let me just play this animation once again I'm going To just refresh okay bang bang bang bang bang bang bang so that was there about for the scaling but we are not only limited

to provide the scaling we can also provide the rotation if you wanted to but for the rotation you guessed it we're going to have to comment this line out and we can use like rotate and here we have to specify our key frames so we want our rotation to start from the 0 Dee and then it should go to the 0 Dee then it Should go to the two 270° and then 270° once again and then finally go to the zero point okay so if I say my file and now let me just refresh there

here you can see it's going to start from 0 0 then it will rotate there to 270 and then it will reverse it back to 20 270 and finally it's going to make it zero so we can rotate the uh what do we call we can also provide a key frame for the rotation but we can also provide the Border e so we are now at the point of the course where I'm going to give you the examples now I know a lot of people will ask me husin why didn't you give us this example

in the transformation and also in the transition section and the answer is obvious because you guys already know what a transition and also transformation is from CSS but now in framer motion we have this new concept of key frame so I'm going to give you a Few examples of there if you don't care about the examples you can totally go ahead and skip this uh example section so I'm going to create a components folder and inside there I'm going to create my pulsing button. TSX file let's just hit enter what the hell did I just

do godam remove there and create a file with the name of pulsing b. TSX and create my RFC inside there sa my file and let's just try to animate that but before I do Here's a question for you now I'm using a frame motion what's going to be the first step that I have to do and 3 2 1 and the answer is we're going to have to import the what do we call it the motion object come on oh my God motion object from where from the frame motion that's going to be the first

thing that we have to do next we have to tell our frame motion that we want to animate that specific thing let I'll just remove the or know let me just Select and remove both of them and I'm going to use like motion. button right here and now let's just start working on our button I'll use my click me as a label for that and now if I sell my file I'm going to go ahead and go to uh and let's just remove my action and create my pulsing p l s i n g pulsing

button and register this component right here remove this setion from there you're now getting your cute little click me b or something like that okay so let's just Refresh there it's not doing anything but now we have to start working on there the first thing that we have to do is that we have to specify our animate prop or you know what let me just provide a bit of styling to that so that we can see what are we working on so I'll just provide like pairing for the xaxis of four pairing for the Y

AIS of two text will be set toally white background will be blue of 500 and totally rounded outline will be one Outline would be set to none I save my file so this is how my button looks like and now it's time to animate there so to animate there I'm going to go ahead provide a bit of spacing today and provide my animate prop right here for this animate prop I'm going to use my key frames all just try a scale and the scale starting from the one then go to 1.1 and then go back

to the one okay so that's going to be it for the scaling I'm going to also change the background Color of there and the background color will be set to these colors so first of all you will have this color then it will go to this color and then it will go back to that color okay so now if I save my file here you can see we are now getting this animation it's going to provide just a bit of opacity to that then it will go back to it existing color so now let me

just provide duration and duration will be set to Z Point Ed and also I want to provide a Bit of easing and ease will be set to ease in and out and also I want to use my uh repeat I also forgot to tell you the repeat but yeah we can also repeat our properties and I'm going to set there to to infinite there we go so now if I save my file let's just save our file go back a little bit this is how the code will look like and this is how the animation

will look like okay so here you can see we are now getting this amazing button and that was example Number one and basically we only have to write this amount of code to create this amazing animation by using the framer motion so that was example number one let me give you one more example which is uh what do we call it bouncing loader. TSX yes so use my RFC inside there go to my app and comment this line out I'm going to be using my bouncing loader import it right here sa my fine and this

is how it looks like right here obviously the first thing that we have To do is that we have to import the motion from the frame motion like so next we have to provide a bit of styling today so I'll just use like uh flex and justify will be set to center items will be set to Center and space on the xaxis will be set to two Okay so now inside this div on want to just iterate over through a lot of data so we can get overloaded so I'll just use like uh dot dot

come on dot dot dot and then I'm going to use my array and here we only Have to specify three items and then we have to itate over through that items this all use like map method and here we are not interested in anything and we are only interested in the index okay so now inside there let's just go back the first thing that we have to do is that we have to use our motion DOD or you know what I'm not going to close there like this way I'm going to close there as a

self closing tag now we have to specify our animation right here so First of all we have to take care of the key prop and this is how we going to be taking care of that we also have to just uh put a bit of styling today so I'll use like width of four and also the height will be set to four the background will be set to totally till 500 now underneath that this is how we are going to be animating our stuff you know let me just save my file so here you can

see it's going to gives us that three dots and that dots are coming from This array right here we can also change that to like I don't know maybe five or something like that now it's going to gives us that five one but I only want to get these three so now finally we have to animate these balls right here okay so I'll use like my animated prop and inside this animate prop we have to provide the y-axis and for the y-axis we want to start with animation from zero and we want to go to

minus 50 and then zero once again okay so as soon as I do That here you can see all of them are now bouncing but I can also PR the transition so I use like Transitions and here inside this transition what do you want to do I want to provide a bit of duration and it is going to to take like 0.6 seconds we also want to provide the easing and the easing will be ease in and out and I also want to provide the repeat and it's going to repeat itself like infinitely so now

if I save my file and refresh there here you can see they Are bouncing which is cool but I only wanted to add one more property which is called the repeat delay okay so like how much time each of the repetition will take so I'll just write like index time uh 0.5 okay so if I just save my file and refresh there this one will take like I don't maybe. 1 second then it will take like. 1.5 second and it's going to take like 1 second completely okay so yeah this is how our loader looks

like and it is looking super cool I don't know if that's going to be impressive or not but for me that's looking super cool let's talk about the variants so variants are a way to define different state or style for or animation in more organized way you can think of them as a predefined animation setup that we can switch between easily so that's just a definition of what a variant is but now let's talk about how we are going to be defining our variants so we can just create a set of names Like hidden visible

or basically you can give it any name that you prefer they describe how the element should look or behave in each state something which we are going to be seeing in a few seconds then we have to use the then so we can apply these variance to or animated component making it easy to switch between State without repeating or code so this just a theory of what a variants are but now let's get into the coding then you will get to know what I'm Talking about there are a few ways to Define your variants the

first way is to provide it in line the second way is to create a separate object and provide the reference of that object to the variant prop and the final way is to just create a separate file Define your variants there so I'm going to start from the first one I'll just provide my variance right here as a inline we're going to be using the variance come on v a r i NTS and now inside this variance prop we are Going to be defining our different state I'm going to give it the name of like

here and right here basically this this is going to be just a simple object property like uh you know let me just show you there this is going to be the object we are going to be providing some sort of property today and then a specific value for their property so which means like you can give it any name that you prefer you can give it the name of like banana you can give it the Name of like orange you can give it the name of like my name hose you can give it any name

that you prefer but now in this case I'm going to give it the name of hidden so which means like when my state is hidden in that situation I want to set the opacity to zero and I also want to scale it down to like 0.8 or just a zero if I wanted to so this is how we are going to be defining our variant this is how we going to be providing a property over a state for Our variant and this is how we're going to be setting the value for the specific variant okay

so that's our first variant I can also create one for the visible so visible come on v i s i b n e and now when my object or my state is visible so in this situation I want to set my opacity to one and I want to scale it up to one that's going to be for my visible State we can also provide one for the exit and I can like basically go on and on and I can specify how many I want but Now in this case I only want to provide two so

I'll just provide the opacity and opacity will be set to zero I'm going to also provide a scale and the scale will be set to 0.5 okay so now we successfully Define our variance but now the question is how in the word we are going to be using these State like we have a hiden state we also have the visible and we also have the exit State okay so now that we successfully defined there now let me show you how we are Going to be using us them so now initially like initially I want my

state to be hidden okay so I'm going to only copy the hidden name from there and now let me just place it right here so as soon as I save my file and refresh there Watch What Happens where in the word is that ball that ball is totally disappeared and why is there because we specify our hidden property inside our variant and now we are using there let's suppose if I just increase it to one now Let me just save my file and refresh there it's going to give it back so this is how we

are going to be defining our variant and this is how we going to be using this so you know what let's just back there two Z and now I'm going to also provide the animation so I'll just use like animate property so on the animate property I'm going to set there to visible okay not visibility but this specific visible uh prop or variant whatever you want to call them oh I'm Getting an error because we are creating already this object so we don't have to specify double uh curly presses right here so I'm going to

have to remove one so now if I just remove there and sa my file and here you can see it will be visible I can also set that to here and if I wanted to Sol just use like here and sa my file bang that's gone okay so we can also provide the exit so when it is exit we want to just use our exit variant which is this exit variant right Here I'm going to also provide a bit of transition to this so let's just use like Transitions and for this transition I want to

provide the duration of 1 second so everything is working the way we expect him to work but I also want to Define my own state so yeah you know let me just Define the so I'll use like is it visible or not so like is visible and then set is v i s IBL e it's going to be equals to the US St and here we have to specify true value for there so now that We successfully defined there now here we are going to be showing our content based on that visible flag okay so

I'm going to copy that and now let me just place it right here and here we can use the tary operator so if this property is true you want to set there to visible so let me just write like v i s i e but if that's not the case we want to just set that to here and like so okay so now let me just save my file so obviously it's going to give us that Circle because we Are setting that to true but if I change that to FSE sem my file here you

can see that gone let's just save there I'm going to also provide the on click when Handler on there so when somebody try to click on this B so we just want to make it disappear there I'll just use like uh set is visible and I'm going to provide like not is visible which means like if it is true it's going to make it false but if it's false it's going to make it true so if I click on the ball bang That's gone if I click on there once again here you can see it

will make it visible so yeah this is how we're going to be defining our own custom variants and that's just a first way we can also extract all of that variance from here let me just extract that and we can create a separate object for this so I'll just give it the name of like uh I don't know variance would be fine and that's going to be set to all of that variant so as soon as I do this going to Gives us an error obviously so I'm going to copy this variance from there and

just write the reference right here and if I click on that everything is working the way we expect him to work so that's the second way we can also create a separate uh file for this so I'm going to copy the name up there and create my variance. ts or TS would be fine and here I can cut that from here and I can just place that here and put my export statement sa my file So now I can use like import variants uh from where let's just go ahead and go to our variants file

now if i s my file but we're going to have to grab them manually like so now if i s my file here you can see we are now getting this uh Circle you can click on there and it's going to show it and it's going to hide it that was just the basics of variance welcome to the example number one in this one I'm going to be showing you how we are going to be creating the flipping Card uh by using the variant so I'll just create a component with the name of flipping card.

TSX and here I'm going to just Define my rafc like so okay so let's just Define the or registered there right here so we have our flipping card and execute this save there and here you can see we're now getting our flipping P card which is looking amazing so the first thing that we have to do is that we have to import something called the motion I guess you Don't know that from the frame motion and now inside there let's just take care of the UI we'll just remove that from here and here I'm going

to also provide my perspective right here like perspective and set there to 1,000 inside there we're going to be defining yet another div so I'll just Define them right here and I'm going to give it a few classes like which will be set to 64 and we also have to provide the height of 40 and background will be set to Totally white rounded totally large and also Shadow will be set to totally large and overflow will be set to totally large and I'm going to Al you know overflow will not be set to large it's

going to be hidden like so and we also have to specify the transform property like transform and we have to proide the transform style to preserve 3D preserve 3D like so and let's just save our file so this is how looks like I'm going to Go ahead and go to this div and inside this div we have to create yet another div so now for this div it's going to say like uh front side not size but front side like so we also have to provide few classes to this so I'll just use like absolute

come on AB s o l u t e and then we also have to specify the inser inser will be set to zero background will be set to totally wide F and irems will be set to Center and justify will be Center come on Center Like so text will be set to tot the extra Lar and font will be also set to totally bold okay so if I save my file this is how it looks like right here so this going to be the front side I'm going to also duplicate there and change that to

the back side so let's just duplicate there and change that to the back side you know back side like so and change the background color to uh come on totally blue of 500 and this should also rotate so I'll just put a bit of Rotation right here like rotate on the y- AIS of 100 and area degree so here you can see we now getting this different color now it's time to provide the animation okay so what I'm going to do is that first of all I'm going to be defining my St all use like

is flip and then set is fli come on l i p d it's going to be equals to the US St and the initial value will be set to false okay so that's done we also have to make this div as a motion div so I'm going to Select that and change the to motion and here at the bottom we are now getting this error so we also have to change that to motion do div okay like so and when somebody try to click on this button you just only want to fire this function which

is uh just set the is FP property to if this is set to true we have to make that as a false if this is false we have to make that true okay so if I click on there anything is happening obviously because we have to Change a lot of stuff inside there now inside this div we have yet another div so we also have to convert there to the motion div so I'm going to just convert it to the motion div copy the name of them and place it right here and and here for

this motion div we have to specify our variance so I'll just use like variance and here inside this variance property what we have to do we have to provide the front side so I'll use like not font but front side and That's going to be set to the rotate Y and the Y rotation will be set to zero I'm going to just duplicate this line of code and change that to the back okay and on the back we have to change the rotation to 180° so now let's just sa our file and use these variants

inside our component so I'll just use like uh for the initial State we have to set there to the front and now for the animate we have to provide them as a trary operator so if This is flipped we want to use the back one but if that's not the case we want to use the fourth one or the front one you also want to provide the transition to it so for the transition I'm going to specify the duration of 0.6 seconds so now let me just save my file we're getting this UI which is

not something that we want so I'll just uh remove this stying from here so now if I save my file here you can see when now getting this uh card right here here so here you Can see we are now getting our backside but now if I click on there we are now getting that to revert okay so yeah this is looking amazing so this is how we're going to be creating our flipping card by using the framer motion so we don't have to do a lot of stuff like we using uh what do you

call it our tailn CSS classes for The Styling like we're not doing anything with that but for the animation we are only creating our variance right here and which is just Simply a front and also the back so whenever we are using the front side we just only want to rotate the Y AIS to zero and whenever we are using the back side so you want to rotate that on the 180° so if I click on there here you can see we just flipping our card that's as simple as that I know this is simple

but yeah uh that's cool uh these aren't looking that great so I'm going to cut that from here and I'll just Define my variance right here at the top so I'll Give it the name of like card variants it's going to be equals to these variants right here I'm going to copy the name of these card variant and provide the reference of there right here so still we're getting our flipping card which is looking amazing let's talk about one of your favorite topic and I know you're going to love this one I can totally guarantee

that what am I talking about I talking about the gesture animation so what are they and why you Should even care about that gestures allow you to add interactive animation based on the user action like dragging or Hing or tapping makes our component responsive to how user interact with them so that's just a theory of what a just animations is and in this section we're going to be learning about the dragging hoing and also the tapping only use frame or motion but there is something wrong with this code and I want you to pause the

video and answer Me what's wrong with this code and you guessed it the answer is obviously we're going to have to import uh what do we call it not the create function but we're going to have to import the motion function or object from where from the not Z but from the frame or motion I'm currently working on the zeen course so that's why I'm like importing every single thing from The Zo anyways let's talk about the what do we call the G animation in the framer motion so the First thing we are going to

be learning is something called the while how and you guys already guessed it we going to be working with the Hing animation so you know what first of all we have to Define our motion. div and inside this motion. div you know what we're going to have to remove there and close it like so okay so inside there we're going to be providing a class of box so it's going to gives us that Circle right here which is looking amazing and now we we Have to provide our animation so let's talk about the while how

animation Cas all used like while how in this property or prop allows us to provide our animation whenever somebody H over our element okay so I'll just proide like let's suppose if I want to increase the scaling of there so I'm going to increase the scaling of there to like 1.2 and I'm going to also rotate this so for the rotation I'm going to set there to 10 I'm going to also go ahead and go To my index. CSS file and comment this line out and now if I H over there it's going to first

of all increase the scaling to 1.5 five and it's going to also rotate there to 10° let me just H over there once again and we're not only limited to just proide there we can do a lots of crazy stuff with there but you know what let me just put a transition okay so for the transition I'm going to use some different uh things like the type will be set to Spring and also Stiffness will be set to 300 now I know a lot of you will ask me bzen what the hell is this type

and what the hell is this stiffness you don't have to worry about that let me just say that once again you don't have to worry about that if you want to go to the physics animation you can definitely check out like what is a spring animation and what is a stiffness and all of that but basically I using both of them right now because it's going to make my animation Super smooth and if you want me to make a separate video about what do we call a physics animation I can totally do that but I

guess I know a lot of people will not be interested in there because they are super difficult to work with so you know what let me just how over there and here you can see it's going to gives us kind of a bouncy like a spring effect and do you guys even know what a spring is I'm talking about the actual spring like a spring sp sp r n you know let me Just type there right here like s SP r i n I'm talking about that spring so if I H my mouse over today

it's going to just bounce it back if I comment this line out save my file and H my mouse over today it's not going to gives us that kind of a spring animation but now if I just uncomment there and how my mouse over today it's going to give this kind of a springy animation right here and then coming from this type of spring and also this is something called the Physics animation so yeah this is how we are going to be working with the wild how whenever somebody H over there so we want to

just make this styling right here or provide this animation so that's the while H I'm going to remove that from here and the next one is also totally self-explanatory so we are going to be using the while tab whenever somebody clicks on there so this this is also super simple and easy to work with so we're going to be creating our D once Again and here we have to Define our box first of all so that we can see something and whenever somebody tap there so we're going to be using like while T okay so

whenever somebody tab there in this situation we once again want to increase the scaling of there so I'm going to just uh convert it to like 0.8 and I'm going to also change the background color to totally I don't know maybe uh Crimson would be fine so now if I save my file and now if I have my Mouse over to there you know let me just refresh there if I hold my mouse over to there nothing will happen but if I click on there it's going to first of all decrease the scaling and it's

going to also change the background color to Crimson okay and we can also provide the transition once again and for the transition I'm going to provide like the type of spring and I will also provide the stiffness and set there to 300 okay and you know let me just refresh there Once again and if I click on there we are now getting That Bouncy effect that spring effect okay that's amazing yeah and now finally once again finally let's talk about one of your favorite one which is called the wild rag I know a lot of

people were waiting for this one so I want to show you that as quickly as possible so let's talk about it now I'm going to also put the class name of box and now if you want to make this element dragable so we don't have do nothing we Just have to provide drag that's it so if we just specify this drag I can totally drag this uh element to whatever I want so here you can see this is totally dragable and if I just leave there it will remove it from from the UI if I

go ahead and check it out you know what that's super gone so we can just only R then we can leave it wherever we want but this is not something that we want we want to provide some sort of a boundaries today we can totally provide The boundaries if you wanted to but now we can also make it as a XX is dragable so if I just write like X right here sa my file and here you can see if I click on the and put the on the top I'm no longer able to move

there or drag there on the Y AIS it's going to only work on the xaxis right here I guess you can see the but here you can see I'm trying to drag that on the top but it will not let me because here I'm now specifying this x property which means like we only want To drag the on the x-axis okay so let's just try that once again let's remove this it's going to hide it from the viewport and we're going to have to refresh our page to get it back so that was just a

drag and now let's talk about the constraint in some situation but not in some situation but in a lot of cases we would want this element to only be dragable in certain area like maybe we only want it to be dragable in this area in this area not More than that okay or maybe we want it to just like be dragable on this area or maybe smaller one so how can we provide our constraint or our rules for there so to provide there we have yet another property which is called or prop which is called

a rate constraint okay so we can now specify our different constraint today so I'll just put Pro like that on the top it's going to be set to 50 and we can also P like on the left it's going to be set to 50 on the right it's Going to be set to positive 50 and on the bottom it's going to be also set to positive 50 so now if I sve my file here you can see it's going to gives us that constraint right here if I try to drag there here you can see

it will make it drag but if I leave there it's going to put it back okay let me just try there once again here you can see it's not going to be dragable like anywhere and it's going to push it right here back okay so this is this is how we going to Be making our element totally dragable and this is how we going to be providing a constraints for the you can definitely try the by yourself and it's going to be a lot of fun okay so time for the demo one I'm going to

create a folder with the name of components and then animated card. TSX let's just use our rafc inside there and register my component right not animated presence God damn it animated card and create my component and remove that one here you can see we Are now getting our animated card which is looking super awesome all righty so let's talk about it the first thing that I want to do is I want to remove the and put a bit of classes to this one like maximum width will be set to small margin on the x-axis will

be set to AO background totally white rounded uh totally large and Shadow large over flow will be set to hiden and cursor will be set to pointer go back cursor will be set to pointer like so say our file Inside there we're going to be rendering our image but first of all we have to uh you know let me just provide a bit of alternative text for like card image or something like that I just copy this image from the unsplash.com you can definitely go ahead and go to my beh have repository and only grab

this image from there I'm going to also provide a bit of classes to this like with will be set to totally full height will be set to 48 and object totally cover like so Okay so here you can see this is how my image looks like and now underneath this image what do you want to do you just want to create word d with the class of pairing for the xx6 will be set to uh six and also you want to proide our H2 and text will be set to extra large P will be set

to semi B and margin for the bottom will be set to two and and for the title I'll just put like C title or my you know what that's going to be fine I'm not going to waste your time on the UI let's just create our paragraph with the classes of T will be set to totally gray of 700 God 700 and also margin for the bottom will be set to four and here I'm going to just write like this is a simple card um with framer motion animations and tail come on tail CS come

on tail CSS for styling and react craziness or something like that I guess that's going to be fine this St for The Styling would be fine so if I save this here you can see we now getting this um Body and now underneath we're going to be also creating a button and which will select learn more I know the button is not looking great so we're going to have to provide a bit of styling to there like pairing for the xaxis will be set to four pairing for the y axis will be set to two

background will be set to here 400 or you know 500 would be fine text will be set to Ho white and also rounded uh when somebody have this we just want to change the background color To like uh teal I know maybe this color and also provide our transitions today okay so let's just part our transition so now let me just save my file if I H my mouse over to there so yeah this is how we are getting this kind of a crazy card right here so now it's time to animate there so to

animate there you guessed it we're going to need something called the motion uh from where from the framer motion like so next I'm going to convert this div to the motion. Div I'll go to the bottom and here we have to change the to motion. div okay like so now I'm going to go ahead and go to the top ones again and provide my animations right here the first thing that I want to do is that to provide my initial State let's just zoom in a bit okay so for the initial state I'm going to

provide the scaling and scale will be set to one and rotate will be set to zero okay just a zero God damn it so that's going to be my initial St when Somebody how over there so in that situation we want to just increase the size of that like 1.05 and also you want to rotate it down to three okay and now underneath that when somebody try to tap there or try to click on there so in that situation we're going to be scaling it down so I'll just use like scale of 0.95 now underneath

that we also want to make it totally dragable you know let me just save this file and check this out so yeah that's totally cool I also want To make it dragable so I'm going to write like drag it's going to be dragable totally dynamically I'm going to also provide the drag constraints and for the drag constraints we're going to be providing a left and left will be set to minus 50 and I also want to provide the right and right will be set to positive 50 and on the top we're going to be providing

my - 50 and on the bottom let's just put 50 right here okay and we also have yet another property Which is called the drag elastic you don't have to worry about that but basically it's going to make just or dragable more elastic so if you care about that you don't even have to worry about that but yeah this property is also available if you care about that so I'm going to only specify like 0.2 and now if I just drag there it's going to make it a bit elastic right here okay as you can

see you know I'm going to show you that in a few second now I'm going To also proide the transitions and the transition will be set to the type will be set to spring because I want my spring animation and the stiffness will be set to 300 like so so let me just make that a bit bigger and this is how my card looks like right here so if I hold my mouse over today it's going to make it a bit tilt now if I click on there it's going to change the scaling of there

and yeah this is how it looks like right here I can totally drag it if I wanted to and that's going to be amazing card for your upcoming portfolio yeah yeah that was cool okay so you know what let me just give you one more example which will be the animated image gallery so I'll just create like image gallery. TSX right here and create my rafc go to my app comment this line out and render my image gallery there we go semi file and here you can see we're now getting our image gallery which is

looking cool let's go to our image Gallery and take care of there the first thing that we would need is the motion object so we're going to be importing the motion from where from the frame or motion like so and also we are going to need some sort of images so here I'm going to place these images right here so we have array with the name of images and inside there we have a few objects so each object will have the image and also the caption you can totally definitely modify there if you wanted to

But yeah we have a few images right here and if you care about these images you can totally find them in my gab repository so that's done next I'm going to just remove that from here and I'm going to provide a bit of uh width to this so like with be set to 80% and that's going to be set to flex so inside this T I'm going to itate over through all of that images so I'll use like images uh what the hell did I just copy the images place it right here and let's Just

itate over through there by using the map method and we're going to need the image and also the index right here so now inside there we are going to be defining our div so what the hell let's just Define your div totally manually like so I'm going to also close there and for this D we going to providing the key and the key will be there index which we are now getting for each of the image we're going to be also providing a bit of classes today so I'll use like Relative margin will be set

to one Rim all around and overflow will be set to Hidden and rounded totally large Shadow will also be set to large and yeah that's going to be fine now inside this D what do we have to do we have to render our image so if I just use the image tag and here we only have to use like image and then SRC which is coming from this image right here and then this image is including all of that image and we are only interested in this SRC like The source of our image okay so

it's going to render our image I'm going to also Prov a bit of caption right here so I'll use like uh image. captions I'm going to just render there like so and here I'll also provide a class name of with will be set to totally full and the height will be also set to Auto and here you can see this is how they looks like I know they are not looking that better but we are going to make it a bit better in a few seconds so you know what let's Just create here another diff

inside this div we're going to be providing a lot of styling so I'll just use like absolute come on AB b s o l t e this one is relative so now this div is absolute to this relative div which means like this div will be inside this div right here but no matter what happen this div will be inside this div no matter how much height we provide or no matter how much with we provide this div will be inside this relative div okay so that's Why we are now providing the proper of absolute

today let's just our insert will be now set to zero f and items will be set to Center and justify will be set to Center and background will be set black uh black like so background opacity opsy opacity will be set to 50 and provide a text only white opacity will be set to zero and somebody how over this we're going to be changing the opacity to 100 and we also have to Provide the transition for the opacity and duration will be set to 300 like so the cursor will also be set to pointer and

now inside there we only have to render or paragraph and this paragraph will say like we only want the image. caption like so okay close them import the class of text only l s file check this out so if I have my mouse over today it's going to gives us that transition and that bit animation but now we have to use our frame and motion To add there okay so I'm going to go ahead and uh attach my frame and motion right here okay so let's just first of all start from this one I'm going

to make it as a motion. div and I'm going to also make this one motion. div right here and when somebody how over there so I'll just use like while how and when somebody how over there so we just want to change the scaling so I'll write like scale will be set to 1.05 and so now let me just H over there it's going to change the scaling right here okay so they are looking better and when somebody H over this D I'm going to just change the opacity of this I'll use like while how

come on while how h o r like so I'm going to provide the opacity and set there to one and I'm not getting suggestions because we have to convert this one to motion. D and also convert this one to motion. div like so this one if I save my file and here you can see If I H my mouse over today so it's going to make the opacity to one I want to make them on a center so I'm going to go ahead and go to my app and on this app I'm going to provide

the CL class so the minimum height will be set to screen and background will be set to gray of 100 black items uh will be set to toly Center just ay will be set to Center semi file check this out so yeah they are looking cool yep I can totally remove the background if I wanted to Yeah they're looking cool now we are going to be combining variants with gesture animation so to do that we're going to be creating our animated ship. TSX file and I'm going to be using my RFC go to my not

index but M component and Define my animated ship come on let's just put our animated ship right here and close there s our file and here you can see we're now getting our animated shape which is looking cool and the first thing that You want to do is that you want to import the motion from where from the frame or motion like so now we have to Define our variance I'll use like cons boox variance it's going to be equals to this object right here so we have to Define three states so the first state

will be the initial State i n i t l and now I'm going to provide a comma and duplicate that three times we're going to be also providing the how Strate and also the click okay so these are going To be my state and now let's talk about the initial State for the initial State we're going to be providing a scale of one and the rotation of zero and I'm going to also put the SK and skew will be set to zero okay so when somebody try to H over there we're going to be changing

the scale let's just right a scale to 1.2 and we're going to be also providing the rotation to 15° and the Q will be also SK will be also set to 10° okay and provide the transitions Transition will be set to duration of 0.3 seconds okay so when somebody have over there and now let's take care of the final state which is a click state so when somebody clicks on there we're going to be changing the scale to 0.9 and also the rotation will be set to minus 50° and the transition the transition will take

this duration and duration will be set to 0.3 and where in the world is this error coming from we have to specify there okay so this is How we going to be defining or variant box or box variant or shape variant whatever you want to call that I'm going to comment or hide there let's just go ahead and go to our UI and zoom in a bit and the first thing that we have to do is that we have to provide a bit of classes today just going to be set to flex and also items

will be set to Center and justify will also be set to Center and height will be set to totally screen okay inside this div we have to Define our motion. div okay and I'm going to close that and now we have to provide a bit of styling to this one like with will be set to 40 and height will also be set to 40 and background will be set to totally blue or 500 rounded totally large and here you can see we are now getting our box which is cool so next we have to provide

our variants or our animations so I'll just use like variants and now here I'm going to copy the name of this box variant and Put them as a reference right here okay so let's just say our file and now we are going to be using those variant so I'll just put the initial State and for the initial State we are going to be using this initial state right here which we already Define inside our box variant which means like scaling will be set to one the rotation will be zero and also the ski will be

zero and next we also have to specify when somebody how over there so in this situation we want To use over how right here okay so we already defined there the scaling will be set to 1.2 the rotation will be 15° skiing will be set to 10° in transition t r n s i t o in transition will be set to duration uh 0.3 okay we also have to specify when somebody tap on there so we're going to be using this click animation which we' have already specified right here like scaling will be set to

0.9 rotation will be minus 50 transition will be uh 0.3 so if I hold My mouse over today so it's going to change the shape of there but now if I click on there it's going to also change the shape of this one you can also make it totally drag we can do a lot sort of stuff with there like whenever somebody have over there so we can totally change the color or whenever we drag there so we can also change the color and so on and so forth but now the reason for this example

is that we can totally mix the what do we call it the variant gesture Animations now let's quickly talk about something called the Stagger animation in stagger animation refer to a technique where multiple elements animate in a sequence rather than all at once and this creates a more Dynamic and Visually appealing effect as each element appear or move slightly after the previous one adding a sense of Rhythm and Float to the animation so that's just a quick definition of what a stagger animations are and now let's get Into the coding examples and then you'll get

to know what I'm talking about now to work with the Stagger animation I'm going to create a folder with the name of components and Define my Stager animation. TSX file inside there okay so let's just our file and register my stagger animation component right here okay so here you can see we're now getting what ster animation which is looking cool okay I'm going to also go ahead and go to my index. CSS and remove This Flex from there and here you can see it's going to make it at a center the first thing that I

want to do is I want to remove that ster animation and grab my motion uh from where from the frame or motion like so now inside there what do you want to do you just want to get like five array elements all use like array and here we have to specify five inside there and I'm going to it right over through all of this so I'll just use like map method and inside this This one we don't need the data we only need the index okay so inside there we're going to be creating our D

once again so let's just create them manually and I'm going to duplicate there and close there like so okay so for this D I'm going to provide a class name of box and margin for the top will be set to to rim s our file and this is how it looks like right here and for this demo I'm going to go ahead and go to my index. CSS and remove every single thing from There and provide this new CSS right here so once again we have all of their previous code but now in this situation

we are just providing a bit more styling to this box so width will be set to 150 height will be set to 150 and Border radius will be set to 50% we changing the background color and and also providing a bit of blur filter today and we are also adding a box Shadow the background color will be set to totally yellow and then we are just centering Out every single thing uh so that's just the styling that you have to specify for this box and now let's get into it now this is how everything looks

like but I'm going to also provide the key and the key will we set to index and here we have to specify our variant so to do that first of all we have to create the parent variant and then we're going to be creating the child variant okay so what I'm going to do is that I'm going to create my parent variant and parent Variants will have the hidden property and inside this here we have to specify the opacity and opacity will be set to zero we also have to provide the visible and visible will

be set to the opacity on the visible opacity will be set to one and the transition come on let's just SP our transition and for this transition we have a stagger children property s a g e r and then children and basically this property will allows us to provide a delay between each element Okay so if I just write like 0.8 okay so it's going to add that delay to each element that we now animating right here you're going to see that in a few seconds but this is going to be basically my parent variance

now we have to define the child variance so I'll just use like uh child variance and it's going to be an object we have to specify the hidden leg and here the opacity will be set to zero and the y- AIS will be set to 20 okay so let's just duplicate There and change there to visible and the opacity will be set to one and the y axis will be set to just zero okay so now that we successfully Define the parent variant and also the child variant and now we have to use the inside

vares so to use that the first thing that we have to do is that we have to convert that to the motion. div okay so I'm going to just convert that to the motion. div and next we have to or variant right here and not this one but The variant like so I'm going to go ahead and go to the top and copy the name of the parent variant and proide there right here and let's just use there so for the initial flag we're going to be using the hiden from the parent variant okay and

whenever we want to animate this so for the animation we're going to be using this visible so just proide like visible like like so same my file so this is how it looks like and I'm going to also use where is The the child variant inside this div so which means like we have to convert it to the motion div so I'll just or you know I'm going to remove this one and close there as a self closing tag and make that as a motion. d like so say my file now here inside there we

have to specify our variance and for the variance it's going to take the child variance so now let me just save my file so these are all of the codes so if I just refresh there nothing is happening And I realize the spelling is incorrect so we have to provide the tager children okay so now if I just refresh there here you can see it's going to gives us first of all the first one then the second and so on and so forth and it's going to provide their delay right here so we are now

just delaying each element before the other one comes up so let's just refresh there once again 1 2 three and so on and so forth so yeah this is the basics oftware stagger animation we can Achieve them by only using the Stagger children property okay so that was the demo one now let me also show you the demo two this one will be a bit complicated because we're going to be creating our animated Gallery so I'll just use like rafc inside this save my file comment this line out and here I'm going to be using

my animated Gallery right here close my file or close my component to be precise and yeah everything is looking great now the First thing that I want to do is that I want to grab my motion so use like motion from where from the primer motion that's going to be the first thing next we have to Define our stair so I'll just create like show images and set show images it's going to be equals to the UST and here we have to set the to fals now let me go ahead and go to the UI

and take care of this UI right here so first of all we're going to be creating a button which will say like uh I don't Know show images or hide images we're going to be taking care of the button in a few seconds but yeah or you know what let me just take care of that right here this I'll just use like if we have the show images like this St so in this situation what do you want to do we just want to provide like uh hide image or images rather but if that's not

the case we're going to be providing this level which is a show images right here so if I save that and refresh there so here You can see we're now getting our show images we cannot click on that because first of all we have to attach the event handler so I'm going to be using like on click Handler and when somebody click on that we're going to be fing this uh handle click function okay so let's just create tab right here I'm going to be using like con handle click event handler and inside there we're

going to be firing like set show Imes come on set show images and provide the previous St And not previous St right here okay not just a previous St now if I save there and click on the show images it's going to change there to the High images right here which is cool so then done I'm going to also provide a bit of styling to this so I'll use like classes and margin for the bottom will be set to uh Two Rim I'm going to also provide ping all around will be set to four rounded

toly large background yellow uh 300 will be fine this will be set to totally Black and font will be set to bold so our file and yeah that's looking cool you know I'm going to make the a bit bigger and that's totally fine here you can see we are now getting our button and we are also getting our coding right here so now underneath this button what you want to do we just want to create our D in this de we'll have the class name of flex okay and we're going to be attaching a lot

more stuff in there but now let's just it right over through all Of our images so I'm going to go ahead and go to the top and provide my images right here okay so these are the images that I copied from the unsplash.com if you want to copy this exactly the same images like mine you can definitely go ahead and go to my gab repository and copy all of the images from there but if you want to choose your own you are more than welcome to do that so I'm going to go ahead and go

back and now we have to R over through all of the images so I'll Use like um Gallery images and I'm going to use like map method here we have to specify the image and also the index of the image and inside there what do you have to do we have to WR our image and this image will take the SRC you know let's just write them manually oh we can't we have to write there like so it's going to take the source and it's going to also take the alternative text and I'm going to

close there like so so for the source what do you have to do You have to just provide our image and for the alternative text I'm going to write like I don't know Gallery uh image and let's just provide our index + one to there that's looking cool I'm going to also provide a bit of styling to this so I'll just use like class name what the hell is that I'll use like class name and class name will be set to margin for the left of Two Rim and width will be set to 300 pixel

like so and totally rounded so now if I sa my file And here you can see we are now getting these images they are looking cool if I click on there nothing will happen now finally it's time to add our animation today so I'll just go ahead and create my variance right here like so so I'll just first of all Define my parent variant and then my children variant par R variance it's going to be an object we have to specify the hidden property and the opacity uh opacity will be set to zero now underneath

that we also have to Specify the visible when it's visible so we have to provide the opacity of one today and also we have to provide a transition and for this transition we're going to be using a Stager animation so we have to use our stagger children come on s d a g r stagger children and stagger children which means like this going to take 0.5 second for each element and now I'm going to also introduce another one which is a stagger s g stagger Direction and Stager Direction will be set to one which simply

means like forward the Stager when it's showing okay so I'll just save my file that's the parent variant now we have to define the child variant so I'll just go ahead and Define my child variant and now inside there we have to specify the hidden flag opacity will be set to zero and the y- AIS will be set to 20 okay so I'll just duplicate that change the to visible and the opacity will be set to one and the Y AIS will be Set to zero and first of all I'm going to just change that

to the motion Dev so I'll provide like motion. div and also provide my motion m o t o n motion. div like so and here we have to use our variance so I'll just write like variance and for the variant we're going to be using our parent variant and let's just use there like for the initial prop we're going to be using our hidden and when it is animating here we have to use our tary operator so I'm going using Like if we have the show images in that situation we want to make the as

a visible v s i b e but if that's not the case we just want to set there to Hidden like so okay that's to done let me show you there if I click on there here that's going to happen but that's going to happen very quickly let me click on that once again and bang it's going to take their time but it's going to show it totally instantly so to prevent that from happening I'm going to also convert This image to the motion div and here we also have to specify our variants right here

I'm going to be using like variants and for this variant we're going to be providing our child variants now if I refresh there and click on the show images it's going to show all of them one by one now if I want to hide there click on there once again and bang there an amazing animation let me just click on there Yep this is how we are going to be getting Our animated Gallery this is how we are going to be making it disappear so we don't have to write a lot of code but we

only have to first of all Define or state or variance whatever you want to call them and then we have to use the inside word Dev okay as simple as that welcome to the second part of this course so this is going to be basically the intermediate part of the framewor motion and in this section we're going to be covering the hooks inside the Frame or motion Library so let's talk about the first hook which is called the Ed motion value hook so the use motion value hook enable find control over the animation allowing us

to trigger animation program ically based on the component state or events it allows for the integration of more complex animation logic that goes beyond what's achievable with just Pro on the motion component like we just saw the animate prop the variant prop and so on and so Forth so now the use motion value hook will allows us to create something called the motion value I'm going to show you what a motion value is in a few seconds but yeah let's just go ahead and go to the cording so before we talk about the use motion

value hook first of all we have to talk about something called the motion and value in general so the first thing that I want to do is that I want to import the motion from the frer motion and also I want to make This div as a motion div okay so I'll just write like motion. div and now let's talk about something called the motion values so I'll just use the animated prop and I want you to pay attention please pay attention Okay so if I use like X and if I write like 200 pixel

and as soon as I save this file why in the world am I getting there smooth animation so if I save it Bang I'm getting that smooth animation like why is that I'm not providing a Transition I'm not providing any animation I'm just only providing like translate on the x-axis 200 why am I getting that smooth animation if I change that to like Y in case if you haven't see there so I want you to focus right now case so if I sell there why am I getting there smooth animation well I'm getting there because

of the motion value and whenever I'm using this animate prop frame or motion will gives us that motion value totally For free and now let's talk about how we are going to be creating our own custom motion values so to do that we're going to need to import something called the use motion value okay so I'm going to import that go back and we have to just create an instance off there and you can specify any kind of initial value today but in my case I'm going to only specify 100 right here now we have

to store in some sort of variable so I'll just use like X and yeah that's fine and I want You to once again pay attention if I use the animate prop for there and if I just set the x value to this X and this x is coming from this used motion value we are already getting an error but now I want to save there and let's just watch what happens if I just refresh there here you can see nothing is happening if I hold my mouse over to there it's going to tell me like

yo you cannot do that this is just a motion value that you're creating and that is not assignable to The Boolean value you cannot do that that's a big no no but now the question is if you are creating your own custom motion value so how that we're going to be using that inside our animation and to do that we're going to be using our inline CSS and there is that we have to use this style and we can just use the X property and that X property will be set to this x but we

don't have to specify that x and x we can just write X right here and now if I save my file and watch What happens this time we are not going to be getting that smooth animation we're going to be seeing this div move very instantly so if I save there here you can see it's not going to give us that animation anymore so let me just refresh there and bang it is no longer giving us that animation so if I just change that to like 200 maybe and let's just refresh that Bang You're not

getting that smooth animation and why is that because we are no longer using the Framer motion motion value we are creating our own motion value and then we are using that motion value right here okay so we can totally change that programmatically if you wanted to but yeah there are also a few hooks that want to talk about narrow hooks but the event handlers to be precise they are something that you don't have to worry about because they are just an event which will help you debug your animation so I'm going to use like use

motion uh Event and here we have to specify your motion value then we have to specify like which kind of event that you want to fire so if I hold control and space so we have like animation cancel animation complete animation start change and so on so I'm going to only choose this animation start and here we have to specify the motion value keep in mind now I'm going to provide a comma and then we have to specify our Arrow function this just provide our Arrow Function right here and I want to check this I'll

just use like uh animation started on X okay so that's going to be the first thing that we have to do I'm going to basically duplicate that and change that to uh the animation change like so and we are going to be also providing this latest value and here we have to just use that latest value right here okay sa file you don't even have to worry about this stuff like yeah you don't have to worry about that now I'm Going to make my component dragable so I'll just uh provide my drag right here and

also the drag constraints for the drag constraints we're going to be providing the left value and left will be set to zero and also the right value will be set to 200 so now if I save my file you know I forgot to do something we also have to change that to um X Change two so now let me just save my file and now if I just refresh there nothing will happen but if I drag my Component so here you can see it's going to give us like Xchange to this new value which means

like we now successfully created our own custom value and we are now successfully using there and this is how we are going to be debugging there now I know a lot of you will ask me hose like this is not a real world example like we want to get some sort of a real world example and I'm going to give you that in a few seconds but yeah I want you to keep in mind that This is how we going defining our own custom motion value and this is how we are going to be using

that custom motion value and for the example one of the motion value hook I'll just create a components folder and Define my range slider. TSX file inside there I'm going to use my RFC s my file and register this component right here okay so use the range slider hit enter so it's going to import that and now we are getting a range slider next I'm going to go ahead And go to the div and create my motion div but first of all we're going to have to import the motion from the framer motion so now

inside this div what we have to do we have to create our motion do button and now we have to close there like so I'm going to also put the class name of box to there and now we are getting that box which is looking cool now underneath there we're going to also create a d with the class of margin for the top and that's going to take an Arbitrary value like six rim and close them inside this div I'm going to create an input with a type of range because we want to just create

a range slider and the minimum height will be set to 0.5 and we also want to proide the maximum maximum it will take like five and let's just provide our step and step it will take like 0.01 I'm going to also proide the default value not check but default value to them and the default value it Will take one this is s file I'm going to also provide the own change when Handler when somebody try to change there we're going to be firing this function which is a handle uh or change Handler would be fine

like so I'm going to copy the name of there and Define my function right here so let's just use our cons range slider or whatever that is sa my file and yeah that's looking cool now to provide our animation the first thing that we have to do is that We have to create our own motion value so to do that we're going to be using our motion value and provide like one to them for the initial value I'm going to store in the variable with the name of like scale it's going to be equals to

this use motion value okay so now when somebody try to change them we're going to be firing this function but it's going to take the event object and let's just annotate there with the change event this is just A typescript stuff you don't even have to worry about that WR what HTML input element right here because we want to use the inside our HTML input element so now we have to use the scale and then inside the scale we have the get method we also have the set method which will allows us to set a

new value and we also have a get method which allows us to get or return the letter this new value of the motion value okay so I'll just uh use like event. Target come on target. Value and say my file okay so it's going to gives us an error because we have to convert there to a number so if you want to convert it to a number so we are going to be providing a plus to there it's going to convert that to a number but now in this case we're going to be providing our

parse float because I know the value will be a float floating Point values that's why we have to specify this pass float to the oh here we are using the get method we have have to Change that to set because we are changing that so we have to change that to set but yeah you get the idea like now that we successfully get the data but now we have to bind there right here guess I'll use like style and let's just start our style here we have to use the scaling which is our own custom

motion value hook so let me just refresh there and now if I change the slider here you can see it's going to increase the size of there and also decrease the size of There but this is not smooth like you can also almost feel there I guess you cannot see that in the video but if you write this code by yourself you will totally feel there like this is not smooth because whenever we convert that to a use spring which is also something which you are going to be learning in the next section then you

will feel how much smoother that animation can get but now in this case like look at this yeah we are getting our slider like Everything is cool but this is not smooth animation and why is it not smooth because we are not using the frame or motion motion value we are creating our own custom motion value and then we are changing that motion value by ourself that's why it is not looking that great but yeah this is just a first use case of using the use motion hook inside our component let's just quickly talk about

the use spring hook so the US spring hook allows us to create smooth Spring based animation it provides a way to manage animated values that follow a spring physics model resulting in more natural and fluid motion compared to the linear animation which we just a few seconds ago so we are not going to be doing anything crazy but we only have to refactor this amount of code instead of using this used motion value let me just show you there if I change that here you can see it's not going to work that much smooth but

if I change that to the use Spring let just use like use spring and I'm going to copy the name of that and place that right here that's the only change that we have to make and KN I save my file and Watch What Happens so now if I just scroll there here we can see we're now getting this smooth spring base and animation right here like kind of like a bounciness and there is coming from the US spring okay as you can see you can also play around with it and then you will feel

the animation but now I'm using the that's why you cannot feel the let me try out this once again here you can see this is not that much cool but now if you use the use spring motion or use spring uh hook to be precise here you can see we're now getting this smooth animation right here yeah that's also another hook okay so let me give you a quick test of what a used transform hook can do okay so right now I'm going to give you just a quick test of what a used transform hook

can do and How it works and later in this course we are going to be covering that in a lot more great detail once we learn about the use scroll hook and so on and so forth so let's talk about it so one is a use transform hook so the use transform Hook is used to map one range of values to another it's great for smooth animation and effects based on the input values like scroll position or Mouse movements so this just a quick definition of what a use transform Hook Is and let's get into

the coding then you will get to know what I'm talking about now we are going to be working with the dragable box so I'm going to create a folder with the name of component and inside there we're going to be creating our dragable box. TSX or use my R fce and now I'm going to sell my file go into my app and register their dragable box component not dragable event but dragable box component right here so as soon as I do There here you can see we're now getting there which means like everything is working

totally fine so the first thing that we have to do is that we have to import something called the use transform Hook from the framer motion going to be the first thing now I'm going to call that hook so I'm going to use like use transform and here we have to pass a few things first of all we have to specify the value and that value should be a motion value you can use the Frame one motion motion value or you can Define your own one androide there next we have to specify the input range

okay and then we have to specify the out put range and that's going to be it okay so you know what let me just first of all create the motion value then we're going to be passing that to this use transform so I'm going to comment this line out and we would also need the what do we call the use motion value Hook from the framer motion because now we are Creating our own custom motion value so I'll use like cons x and x will be equals to the used motion value and here we can

specify any kind of motion value so I'm going to just specify like one or you know zero would be fine okay I'll just specify that zero I'm going to also duplicate there and change the variable name to Y so now I'm going to sve my file so this is how we going to be defining our custom motion value now I'm going to uncomment there and here we Have to specify our motion value I'll only provide the x and I'm going to provide the comma and next here you can see we have to specify the input

values and next we have to specify the input range start and also the input range come on range and okay so this is how we are going to be providing this so our input range will start from minus one and then we want to go into the positive one so that's going to be the starting point of our range next we have to Specify the output range start and also the output output range end so what are going to be the values we want to specify for the output range start and for the output range

end I'm going to only specify color right here like the red color and also the green color so I'll just write like FF then four zeros okay so this is going to be basically my red color and we want to go from red color to the green color so I'm going to write like 0 0 ff0 0 and I'm going to Store the in some sort of variable so I'll give it the name of like background color and it's going to be equals to this use transform value let me just say that once again first

of all we have to Define our own motion value then inside this use transform the first value it will take is the motion value which we are providing right here next it will take the input range start and the input range end then we have to specify the output range start and the output range ER okay so that's the only thing that we have to do and now let's get into the UI so that we can use that I'm going to hit enter and I'm going to also zoom in a bit so you guys can

see everything a bit better and I'm going to change this de to the motion D so I'll use like motion. d not the motion value but motion come on m o t i o n there we go oh my God I guess we didn't import there yep we did not so I'll use like motion and I'm going to copy them select this T and hit Control d the motion. d That's go inside this motion D I'm going to specify my span with a class of text toally white uh White like so and it will say

like drag me and here you can see we now getting this drag me I'm going to also specify a bit of classes to this one so I'll say like width will be set to 32 and height will be set to 32 flex and items will be set to Center justify will be set to Center toly Round it large and also Shadow will be set to toly large C Will be set to pointer and I'm going to also provide the background of poorly yellow and this is going to be the background color so yeah this is

how it looks like but I'm going to remove this background color from here and I'm going to specify my animation so I want this D to be dragable so I'm going to just provide like drag and also I'm going to specify the drag will constraints so I'll use like drag constraints and for these drag will constraints we're going To be providing the left value or you know what let me just hit enter right here we're going to be providing the left value and the left will be set to minus 200 I'm going going also specify

the right value and the right will be set to positive 200 I'm going to specify top to minus 200 and finally we also have to specify for the bottom of 200 so now if I save my file oh we cannot see that because we have to provide this background color today we cannot provide The as animate value because you guys already know that here you can see we are now using our custom motion value so so that's why we cannot use our animate prop so we can just use the style and here inside the style

we can provide our background color and here you can see it's going to gives us that background color right here but now if I drag then nothing is happening and why because we did not specify this X and also this y value so let me just put there right Here okay so I'm going to use like X comma y you can also specify x to the x value and Y to the Y value but this is not what we're going to be doing cuz we want to use our modern JavaScript and here we also have

to specify the comma Now I'm going to save my file and now if I drag there here you can see it's going to change its color and that's because of uh this us transform hook let me just show you there once again here you can see these are just a constraints if I Drag there to the left it's going to gives us like red color if I drag there to the right it's going to gives us a green color and so on and so forth you get the idea so yeah this just the basics of

the use transform hook and we're going to be covering the use transform hook in a lot of great details I want you to prepare yourself for a lot of theory because in this section we are going to be covering the scroll animation so let's talk about how many Types of scroll animation there we have so we only we have two types of scroll animations so we have a scroll trigger animation and we also have the scroll driven animation so let's start from the first one which is a scroll trigger animation so these animation are trigger

when the user scroll to a specific point in the viewport and once the scroll reaches to the specific point the animation plays so what are the use cases for them they are great for Revealing the elements changing the style or starting animation at a specific section of the page now let's talk about the scroll driven animations so these animation continuously change has the user scroll allowing for smoother more interactive experience the animation property can be mapped directly to the scroll position so what are the use cases for the scroll driven animation and the use cases

are like they are ideal for the parallx effect Transforming the element or existing opacity based on the scroll depth let's talk about how we are going to be achieving the scroll trigger animation so to achieve that there are two props for there so we are going to be covering the while in view prop and we're going to be also covering the viewport prop let's start from the first one which is a while in view prop so the while in view prop is used to trigger animation when the element comes into the view Port it allows

us to Define how the element should animate while it is visible on the screen it enables us to create engaging animation that activates when the user scroll to a specific part of the web page okay so that's just a while in view prop and now let's talk about the viewport prop so this prop is used to customize how the animation are trigger based on the visibility of the element inside the viewport it allows us to specify the setting that effect when And how animation should occur is the element scroll into or out of the view

okay so yeah keep that in mind and now let's get into the coding then you will get to know what I'm talking about okay so let's talk about the scroll trigger animation and we're going to be achieving there by using the while in view prop okay so first of all I'm going to go ahead and create my components folder and inside there we're going to be defining our animated card. TSX file And I'm going to be using my rafc inside there and let's just put there right here but first of all I'm going to write

my H1 with the class of text will be set holy Center and text will be also set to 3XL Mar for the bottom will be set to four and it's going to say like I don't know scroll down to see the animation the come on the an n i m a t o n like so and here you can see we're now getting this text which is looking cool now underneath this H1 what do you want to Do we just want to create a d with the class of height will be set toly screen KN

i s there here you can is going to gives us that scroll bar right here and here is our text as you can see right there and now what I'm going to do is that I'm going to Define my animated card component uh right here so we have this animated card I'm going to close there let's just go ahead and go to our component let's start working on our animated component so I'm going to Remove there and change the styling of there first of all I'm going to be providing the flex justify will be set

to Center and items will be uh not Center but start in this case I'm going to also provide margin for the top will be set to 30 r uh like so I'm going to save my file and as you can see we are now getting the scroll bar now inside this D what do you want to do we just want to Define our uh div in this div we have a few classes so just proide like The class name the height will be set to 200 pH and I'm going to also provide the width of

totally four F and justify will be set to Center and I'm going to also provide the items to be Center okay so if I save there now inside this div we're going to be defining our motion div so I'll use like uh motion but first of all we have to import this so I'm going to be using like import the motion from where from the framer motion okay so this is how we are going to importing There and now let's just create our motion. div and I'm going to close this now inside this motion div

I'm going to also provide a bit of classes to this so I'll just write like background will be set to totally white totally rounded large and also pairing for all around will be set to six and Shadow will be also set to large text will be set to to Center say our file inside this D we going to be reading word H2 which will have the uh class of text to Excel and Also the font will be set to totally bold margin for the bottom will be set to two Tex toally black okay like so

and I'm going to say like amazing card this is sell file and here you can see we now getting our amazing card we did not specify any scrolling effect today and we did not do anything right now so what I'm going to do is that I'm going to also just complete this card so I'll just provide a paragraph let's just go back and this paragraph will have the Classes of of text to gray of 600 it's going to say like this is or you know what this card animates beautifully into the view or something like

that and here you can see we are now getting this text and also this card which is looking amazing so let's just provide our animation right here so how in the we're going to be providing our animation and how our animation will look like first of all we going to be providing our initial state so for the initial state I'm going to provide the scaling and decrease the scaling to 0.5 I'm going to also provide the opacity and opacity will be set to zero and I'm going to also proide the transition and the transition will

take duration of 0.5 seconds okay so that's cool and now here we are going to be defining our while in view okay so as long as this card is inside the view that animation will happen but if this card is not in the view that animation will not happen Okay So I'm going to use like while in view prop here inside there we can specify any kind of Animation so I can use like scale scale will be set to 1.1 I'm going to also provide the opacity and opacity will be set to one and the

Y AIS will just say like Min -00 so now if I sve my file and Watch What Happens so if I just refresh there and if I try to scroll there did you see that so we are now scaling it up and we are also providing a opacity to there so you know let me Just show you there and Yep this is looking cool this is looking cool but now if I comment this line out I'm going to just comment this line out and here you can see there on and now if I scroll down

here you can see it's not even showing because we are providing a scaling of what do you call it the scaling of 0.5 and also the opacity will be set to zero so if I change that to from zero to one and I'm going to also change there to like one and here you Can see this is how my card looks like right here so if I scroll down still we are not getting any animations but now if I go back and uncomment this code and now if I save my file here you can see

this animation will happen so let me just go to the top and refresh there and if I scroll down so yeah that animation is happening and we can change the color we can do a lot sort of stuff with there so if I just write like uh I don't know background color come on background Color um and I'm going to just change that to like maybe red color or something like that and if I just refresh that come on what the hell if I just refresh that and if I scroll down here you can see

it's going of gives us that background color of tot red so yeah that was a while view I mean like while in viewr now let's talk about the use scroll hook so the use scroll hook help track the scroll position of the page it makes it easy to create Animation or effect that respond to how much the user have scrolled so yeah that's just a definition of what a use scroll is and now let's get into the coding then you will get to know what I'm talking about now let me give you a quick test

of the use scroll animation so what I'm going to do is that I'm going to create my folder with the name of components and inside there we're going to be creating the scroll animation. TSX file and I'm going to be Using the rafc inside then now let's just go ahead and go to our app and register that scroll component right here and I'm going to close that so if I save this file right now and now the next thing that we have to do is that we have to use or use scroll animation and now

we have to import that not from the framer but from the framer motion so I'll use like the framer motion and now we have to store in some sort of a variable so I'll use like scroll L going To be equals to this you scroll I'm going to log there to the console like scroll and now if I save my file I'm going to open my console and here inside this console now we are getting these two objects so if I expand there and these properties are a motion values and remember we already cover a

motion values so we have like scroll on the x-axis and scroll X progress y AIS and also scroll YX is progress so yeah we can use these properties to make amazing Animation I'm going to remove that from here and next I'm going to destructure only the scroll on the y axis not the x-axis but on the y axis and the next thing that I want to use I want to use event so I'm going to use like the use motion uh value event come on use motion value event like so it's going to take the

motion value first of all so I'm going to copy a name up there because we already know that this property is a motion value and the next thing that we Have to do is that we have to specify which kind of event you want to fire so here you can see we have a change we have the animation start the animation complete cancel and so much more I'm going to only choose the change and now the next thing that we have to do is that we have to call for call back function and get the

latest Rue out of there okay so I'm going to go inside there and now let me just loog to the console this page scroll and here we're Going to be rendering our latest value inside there I'm going to save my file right now but now we need a place to scroll through so I'm going to remove that from here and inside there I'm going to use my ul and Li uh I want them to be like 50 maybe and as soon as I hit enter so it's going to gives us like 50 Li and now

if I save my file let me just test this how I'll use like H one of hello something and yeah we are getting there but why aren't we getting that you Know what I'm going to also proide the class name of um how it will be set to all the screen so now if I do that and now we are getting our scroll bar right here so I'm going to open my console once again and go to my console now we are getting this data but now as soon as I scroll here you can see

we are now getting this different data first of all we are getting this data then we are getting the two and so on and so forth so as soon as I scroll there it's going To give us new value So based on these new values we can create a smooth animation or a scroll smooth animation and yeah that's just the basics of the use scroll hook now let me show you how we are going to be using the use scroll hook with the use transform hook so what I'm going to doce that I'm going to

create a folder with the name of components and inside there we are going to be defining the scroll animation n i m i t o n animation. TSX and now let me Use my rafc inside the save this file and call this comp component right here so we have a scroll animation component now let me just save there and now let me go into my component and now let's start working on there so the first thing that I would need is the use scroll and now we are going to be getting there from the framer

motion motion like so and next we have to store them in some sort of a variable or we have to destructure the scroll ya AIS From the use scroll so that's done next we have to Define our use transform hook so we are going to be defining that for the SC SC and also for the opacity so I'll use like scale and scale will be equals to the use transform hook and for this use transform hook it's going to take the motion value and we already know that this scroll y AIS is a motion value

so I'm going to pass it right here next we have to provide the starting point so when our animation start from Zero so in this situation we wanted to change that to one and when our animation reaches to 300 so in this situation you want to set there to 1.5 like the scaling to 1.5 that's done now let me also use the transform hook for the opacity so I'll use like opacity op s CIT T YN it's going to be equals to use transform hook and here once again we're going to be passing our scroll

on the y- axis as a motion value today and then when it start from zero what do you Want to do in that situation we want to set that to one and when it reaches to 300 so in that situation we want to set that to zero now I'm going to save my file and now let me go ahead and go to my UI and use there so what I'm going to do is that first of all I'm going to be attaching like height of to screen and flex and items come on items will be

set to toly Center and justify will be also set to to Center inside this div we're going to be defining our motion. div Okay so first of all we have to get the motion and then we would be able to use that motion right here so I'm going to be using motion. value and inside there I'm going to be putting a bit of classes to it like background totally blue of 500 and with will be set to 32 come on let's just set to 32 and height will also be set to 32 toally rounded large

and Shadow will be set to toally large and now for the styling we know that we are going to be using the motion values Which also means that we are going to be passing the scaling and also the opacity to this style so I'm going to past the scale and also the opacity let me just copy a name up there and place it right here sem my file and now underneath there we're going to be creating a div for the scrolling so I'll just use a div and the will be set to totally full and

for the height we're going to be using 150 viewport height now let me just close there and it should be height not Width and here you can see we now getting this box and when I scroll down here you can see it will make it disappear so you know what let me just go ahead and provide a bit of styling to my body I'll just Place The Styling now let me just save my file and here you can see we're now getting this de and now as soon as I scroll there here you can see

it's going to make it disappear and I can also make the high to like I don't know maybe 200 so now let me just Change that to 200 and here you can see it's going to make it disappear so I want you to notice here you can see it's going to increase the scaling of there and also it's going to change the opacity and we can totally achieve that by using just a use scroll hook and also the use transform hook so yeah I know that's just a simple and basic animation but that's just example

of the use scroll and the use transform hook now let me give you another example so I'm Going to remove this coding from here and I'm going to create another component with an name of Animation or animation scroll. TSX will be fine now use the RFC inside there go ahead and go to my app and use the animation scroll right here and close there now let's just go ahead and go to our animation scroll and start working on there the first thing that we will need is the use scroll animation I mean like the use

scroll hook to be precise And now we have destructure the scroll on the y- axis from the use scroll hook the next thing that we have to do is that we have to transform the scale and the board radius based on the scroll position so how in the what we are going to be doing there we going to be calling the used transform Hook from the framer motion and we would need that from the framer motion rather than just a motion and here it's going to take the motion value so I'm going to copy a

name of That and place it right here and starting from zero you want to set it to one and then going through 1,000 we wanted to decrease the size of this all use like 0.5 and now we can store the inside the variable all use like scale and it's going to be equals to this use transform hook next we have to create our border radius so it's going to start from square and then it will make it as a circle so I'll use like border radius it's going to be equals to this use Transform hook

and for this use transform hook we're going to be specifying the scroll on the y- axis starting from zero and then we want to set there to 0% and then when it goes to 1,000 we want to set there 2 50% that's also done now we have to use the inside our UI so what I'm going to use that I'm going to remove this animation scroll from here and now I'm going to provide a bit of classes to this I'll use like the class name will be set to relative right Will be set to to

screen and the overflow will be set to totally hidden inside this T we're going to be defining our motion. image and so first of all we want have to import the motion so I'll use like the motion from the framer motion and inside this D we going to be defining or motion. image or IMG like that I'm going to close that and here is going to take the source and also it's going to take the alternative text so for this alternative text I'm going to Specify background and for this Source we're going to be providing

this image so now let me just save my file I'm going to also provide a bit of classes to this so I'll use like uh it's going to be set to totally absolute and insert will be set to totally zero with will be set to totally full height totally full and object totally cover I'm going to save this file right now now we also have to attach our styling so for this styling we're going to be providing our Scale so I'm going to copy a name of the and and provide the scale right here I'm

going to also specify this border radius so I'm going to copy a name of that and place it right here and now underneath that what do we have to do we have to create a d with a class of sticky and top will be set to toally zero the height will be set to toally screen items will be set to to Center and also justify will be set to toly Center inside there we going to be creating H One with the class of text to White and text to 4 Excel and inside they will use

like scroll to animate so now let me just save my file and here you can see we are now getting this image but now as soon as I scroll there okay we can even scroll there so you know what let's just go ahead and go to our app and now underneath we have to just provide some sort of a div with the class of a lot of classes so I'll use a div and here we're going to be providing the height of uh 200% so that we can see them and also background po gray of

800 inlex items will be set to totally Center justify will also be set to totally Center inside there we're going to be creating H2 with the class of text only white and here we have to specify the scroll down I'm going to save this file right now now as soon as I scroll here you can see we are now getting that border radius and also that smooth animation on the scroll so if I scroll it back here you Can see we're now getting this full image and that's oh what the hell is this guy one

doing so that's our you scroll hook welcome to the first exercise of this course so in this one we're going to be building six amazing amazing animation but they are not going to be Advanced like they are going to be totally simple because this is the first exercise of this course okay so let's start from the first one the first thing that we have To do is that we have to create a box that moves across the screen you should have to create a simple Box by using the div or you can also create a

section or anything that you prefer then use the framer motion to animate that box from the left side of the screen to the right do that then we're going to be doing the rest of them so let's just start working on there so I'm going to be creating my components folder and inside there is Define our box. TSX file and I'm going To be using my rafc S my file and register there right here so we have WR a box and hit enter so it's going to render there right here check this out so we

now getting that box which is looking cool okay so the next thing that we have to do is that we have to Prov our animation so I'll just import my motion from where from the framer motion so that's done we also have to specify or motion. or you know what I'm going to remove that from here I'm going to also Remove that box and I'm going to close there like a self closing tag and I'm going to provide my motion div I'll also provide a bit of classes like the background will be set fully blue

of 200 and the width will be set to 20 and also the height will be set to 20 okay and now let me provide my animation so I'll just provide my initial State and for this initial State we're going to be providing the x value and X is going to be set to 100 minus 100 and when we want To animate that so we're going to be setting the x value to positive 100 and finally we're going to be providing a weit of transition and also I'm going to put a duration of 2 seconds so

now I'm going to save my file now if I just refresh there and here you can see we now getting our box we can also use or what do we call it or box simply so I'll just write like that box save my file and yo that's super big okay so if I just refreshed there you're now getting This amazing animation so that's the first thing that we have to do next we have to create a vertical moment so make a circle bounce up and down so create a circle by using a CSS or you

can also use a TN CSS then animate that Circle to move vertically bouncing at the top and bottom of the container so this is what you have to do next so give it your best shot if you can't do it then that's completely okay then come back and watch the solution so I'm going to go ahead And create my component right here I'm going to give it the name of like bouncing or bouncing Circle rather. TSX ah spelling is incorrect b o u n c i n bouncing circle. TSX and I'm going to be using

my RFC inside there and now let's just register this component right here so I'm going to be using my bouncing Circle and close that and now inside this component what do we have to do the first thing that we have to do is that we have to import the motion so I'm Going to be using like import motion from where from the frame or motion and now we have to Define our Circle so I'll just remove there and close that like so and I'm going to make the as a motion. div and you can also

make the as a motion do section or article or whatever you want to call there I'm going to just make it like there and I'm going to also make a circle by using the tailin CSS and I'll use like background totally red of 500 and round it totally full with Will be set to 20 it will also be set to 20 and now let's just provide our animation so I'm going to be using the animate prop and on this animation we want to set the Y AIS to 0 comma - 100 comma 0 now underneath

that we also have to specify the transition and for this transition we're going to be providing a duration of one and the repeat will be set to one and not one but and repeat will be set to infinity and also the easing will be set to ease in and out Like so so I'm going to save my file and that's all the code that we have right and here you can see we now getting our bouncing ball right here which is looking cool okay so that's also amazing and that's the second exercise next we have

to create our rotation animation so what we have to do we have to spin an icon continuously so you can either use the SVG tag or you can use some sort of a react icons if you prefer the then animate that icon to Indefinitely so give it your best shot if you can do it you know what to do okay so let's just create a component with the name of spinning icon. TSX and I'm going to be using my RFC inside this semi file go to my app. TSX like so comment this line out and

I'm going to be using my spinning s p come on SP i n i n g spinning icon and we're now getting there I'm going to go ahead and remove there and change that to the image tag I'm going to also close them And inside this image we're going to be providing this Source okay so now let me just provide there right here and now let me import the motion come on motion from where from the framer motion I'm going to sve my file and this is basically the logo of the frame or motion okay

so we're going to providing the class name of with will be set to 20 height will also be set to 20 and let's just proide our animate uh prop so let's just use our animate inside there we're Going to be providing our rotation but first of all we have to convert that to the motion. image right here okay so now inside this animate prop we're going to be providing the rotation and and we want it to be rotate on the 360° I'm going to also provide a transition and for this transition test is part to

a duration of two and the repeat will be set to uh infinity and I'm going to also provide the easing and ease will be set to linear like so so Let's say s our file and here you can see we are now getting the rotated logo of the frame and motion so yeah that's also done let's just go ahead and perform this fourth one so we have a skewed transition now in this case so animate the rectangle that skews when we click on it so create a rectangle using a telin CSS or you can also

use just a simple CSS if you wanted to and when somebody clicks on that then skew that rectangle and return it normal when we Clicked again so yeah once again give it your best shot so for this one we're going to be creating a component with the name of skew rectangle. TSX and I'm going to be using my RFC inside there let's just go in there and register our component right here so we have our skew uh skew rectangle to be precise and now inside there the first thing that we have to do is that

we have to create our motion and let's just get that from the frame and motion and we already know That whenever we are clicking on something so we would need some sort of a state so I'll just create a state with the name of like is skewed and then set is skewed it's going to be equals to the U State and let's just provide a true as a value to that so now let's just make this deal as a skew de so I'm going to provide like motion dot there and inside that we have to

provide a bit of styling today so I'm going to be using like the class name background will be set to Totally yellow of 500 and also width will be set to 40 he will be set to 20 and now underneath there when somebody try to click on there in this situation we want to just set the isq property to not isq which means like if this is true make that false if this is false to make that true so if I save my file this is how it looks like so if I click on then

nothing will have I'm going to also provide animation to this so I'll just use like this animate Prop and provide the skew on the x-axis and we have to provide like if this is sked so in that situation we want to provide the 20 value to that but if that's not the case we want to set it back to zero I'm going to also provide a transitions right here and for the transition we're not going to be doing anything crazy but just Prov a duration of 0.5 seconds say our file and now if I click

on there it's going to just give it up as simple as that so yeah that's Also amazing so that was our fourth challenge and now let's talk about the fifth one which is a combined transformation so create a complex animation combining multiple transformation so you just have to create some sort of a shape it doesn't matter if there going to be a circle or a square or something like that and then animate that shape to move diagonally while rotating and scaling simultaneously so yeah give it to your Best shot and I'm going to just create

a component right here the name of combine animation. TSX or use my RFC inside there copy the name of there and go ahead and register that comp component right here like so I'm going to go into my combine animation and here the first thing I do is that I'm going to be importing the motion from the framer motion like so next we have to Define our div and I'm going to close there like so and Define them as a motion D I'm going to also provide a bit of styling to them let's just use our

class name and for this class name we are going to be setting the background to totally purple and 500 with will be set to 20 height will also be set to 20 so there you also have to provide the animat prop and on this animate we want to set the xaxis to 200 and the rotation to be 360° and also for the scaling we're going to be setting that to 1.5 Underneath that we have to provide a transition and for this transition we're going to be providing a duration of 2 seconds so now if I

save my file and check this out so let me just refresh there and here you can see it's going of gives us that rotation right here and that's looking super amazing next we have to create our sequential transformations in this case we have to create animation sequence so use multiple animats like square or Circle Or something like that then animate them in a sequence when where one moves to the right then the next one follows after the delay using different transformation like move rotate or skiing and something like that okay so yeah once again that's

going to be the final one so give it your best shot if you can do it that's completely okay then come back and watch the solution and now I'm going to give you my solution so I'm going to go ahead and Create my oh what the hell is I just do let's just remove there and create my file right here with the name of sequential boxes. TSX file and I'm going to be using my rafc inside there go ahead and go to our app component comment this line out and then I'm going to be providing

my sequential boxes and this run there let me go ahead and go to my component and the first thing that we have to do is that we have to import the motion from where from the framer motion Inside there you would need a few boxes so we can define an array like so but we don't have to do that we're going to defining our array by using these curly braces we're going to be using like dot dot dot then we want to create like five elements inside this array and then we want to it over

through them by using the map method so we are not interested in anything but we want to get the index like so and inside there what do we have to do we have to Define our motion. div And I'm going to close there so now inside this div I'm going to providing the key and key will be set to that index which we are now getting from this array right here I'm going to also put a bit of classes to it so I'll just write BG will be set to taal of 500 with will be

set to 20 height will also be set to 20 and margin for like all around will be set to two and I'm going to be also providing the animate prop and on this animate we want to move that to the X-axis of 100 pixel and for the transition uh we going to be providing the duration and for the duration we're going to be setting that to like 0.5 seconds I'm going to also provide a delay so I'll just use like delay and delay will be set to that index times 0 0.5 second and that is

it okay so let me just check this out so if I just refresh there it's going to first of all move this one then this one and then finally that one you Know what let me just set that one second and now if I refresh that first of all it's going to move that one then this one and then the third one but if you have like a lot more boxes like you know let me just increase the size of that to like five boxes or maybe 10 boxes so this is how the animation will

look like so I'm going to go back and now let me just refresh there so first second third fourth and so on and so for so yeah that was the first exercise Of this course welcome to the second practice module so in this one we're going to be creating amazing amazing animations so let's talk about the first one the first thing that we have to do is that we have to create a simple fade in and Fade Out animation so what we have to do we have to create a component with the name of fed

in component or just a Fed component then use the motion. diff from the frame on motion to create a diff that feds in and feds out You can style that by using the tailin CSS or you can also style there by using just simple CSS if you wanted to then add a button that toggles the visibility of the FED component so yeah give it your best shot if you can't do it you don't have to worry about it okay so what I'm going to do is that I'm going to create my components folder so I'll

just Define my compon oh my God comp components folder and inside there we're going to be creating our fed component. TSX file so I'll use my rafc inside this sa my file and register this component right here just like that I'm going to save my file and this is how it looks like right here so next thing that we have to do is that we have to grab something called the motion uh from where from the framer motion like so and inside there let's just take care of the toggling and untl or you can say

the visibility or unisil so I'll just create a state with the name of like visible And then set v i i it's going to be equals to the US St and here we have to set there to false okay so now inside this component what do we have to do we have to Define our class names so I'll use like Flex and flex will be set to column and items will be set to Center so now inside this div the first thing that we have to do is that we have to Define our button and

now I'm going to say like toggle fed and here we also have to provide a bit of styling to this All use like margin for the bottom will be set to four pairing all around will be set to two background will be set totally blue of 500 and text will be white totally rounded I'm going to say my file and when somebody clicks on this button we want to fire this function okay so which will just set the visibility to not visibility or not visible which means like if this is true it's going to make

it false if this is false it's going to make it true and Here you can see we are now getting our amazing button we click on there nothing will happen so yeah let's just take care of the rest of the content so I'm going to collapse there and here we are going to be defining our div and our data so now let me just go back and what we have to do we have to first of all check if this is visible and then based on their visibility we are going to be showing this UI

but if this is not set to true and this is not visible you're not going To be showing nothing at all okay so let's just create our motion. div and here what we have to do we have to do a lot of things so I'll just put the class name pairing all around will be set to four background will be set to gray of 200 and totally rounded so now underneath that we have to create our initial State and for this initial State we're going to starting our animation by providing the opacity of zero then

we going to be providing the animate prop On this animate prop we're going to be setting the opacity to one and now we also have to provide the exit prop so on this exit you want to set the opacity to zero once again and then finally we have to provide some sort of transitions so I'll just say like um duration will be set to 0.5 I'm going to S there but this is not how we are going to be closing our D I'm going to close them manually and I'm going to just put some sort

of a text right here and I will say like First of all let me convert there to the motion. D and then I'll just say like hello um I don't know I am a feding component or something like that and now let me test this out so here you can see we are now getting there but we have to change the text to totally black like so and now this is looking better if I click on the struggle fed it's going to hide there if I click on there once again it's going to unhide there

so what I'm going to do is that I'm going to Wrap that in this section you know what we're not going to be wrapping in the section but I'm going to wrap it in the animated presence I'm going to import there and close there like so so I'm going to cut that from here and I'm going to place that right here so now if I click on the struggle button so it's going to unhide there if I click on there once again it's going to hide there from the UI and that's because of this animate

present so if I just remove There for a second and Watch What Happens so if I click on there it's going to unhide there but now if I click on there once again so it's going to hide there totally in instantly like as you can see right here but now if I provide this animated presence once again save my file and click on this so it's going to hide there and if I click on there it's going to slowly hide there so yeah that's just a basic animation and that was our basic fed in component

Or just a Fed component to be precise so now I'm going to go ahead and perform the second practice challenge or whatever you want to call it next we have to create a sidebar that will slide in from the left when we click on the button so what we have to do we we have to create some sort of a component and then we have to use the motion. div then we can style our sidebar by using the TN CSS we can use the frame or motion animate prop to slide the sidebar in the Form

of the left then we have to add a button that will toggle the visibility so once again if you can do that go ahead and do that but if you can do that then don't worry I'm going to show you the solution right now so I'm going to Define my sidebar component and here we have to use our rafc inside the semii comment this line out and provide my sidebar right here let's just go ahead and start working on this component so the first thing that we have to do is That we have to grab

the motion from where from the framer motion next we have to create our stat so I'm going to be using like is open and then set is open it's going to be equals to the use St and here we have to specify the false value to there now I'm going to go to the UI and remove that from here I'm going to also provide the class name of flex today inside there we going to be defining our button and which will just say like sidebar or something like that Okay I'm going to also a bit

of styling to this so like margin for the bottom will be set to four pairing all around will be set to two background will be set to Blue of 500 you can also set the text to totally white totally rounded so if I sa my file and this is how it looks like right here so if I click on there nothing will happen but I can also attach my event handler on there so when somebody try to click on there what we have to do we have to just use the set Is open and set

there to not is open okay so which means like if this is true make that false if this is false make that true if I click on that still nothing will happen because we have to provide our UI underneath this button next we have to use our motion. div and create our sidebar so I'm going to be using like this motion. div and then I'm going to close there like so inside this div we're going to be defining our H2 which will have the class of text only Large and also the font will be set

to bold it's going to say like a sidebar or something now need this H2 we can create a paragraph now we'll say like uh some random content that will goes here or something like that now let me provide a bit of classes and also a bit of styling to this component or to this element to be precise I'm going to be using the class name and here we are going to be providing our classes totally dynamically so I'll use like f class and Also left will be set to zero top will be set to zero

and height will be set to totally full background will be set to gray of 700 and I'm going to also provide the text and text will be set to totally wide pairing all around will be set to four and here now we have to render our classes dynamically so what we have to do is this is open then we have to set there to empty string but if this is not open then we have to set there to minus translate value t r NS l A t e on the xaxis is going to be set

to full okay so now let me just save my file and now underneath that you know let me just show you there if I click on there here you can see we're now getting our sidebar and side sidebar and then some random content right here you can specify the input field or the check boxes or or whatever you want to put right here but yeah we are now getting our sidebar but we are not providing any animations today so to provide our Animation the first thing that we have to do is that we have to

use our initial State and for this initial State we're going to be setting the x value to minus 100% And now underneath there we also have to provide the animat prop and on this animat prop you want to set the x value if this is open so in that situation we want to set there to 0% but if this is not OP so we want to set there to minus 100% and we're going to be also providing a bit of transitions So let's just provide a bit of Transitions and on this transition we're going to

be setting the duration to 0.5 seconds and now if I click on this strle button it's going to unhide there and it's going to gives us this sidebar totally animated if I click on there once again it will make it disappear so yeah this is also amazing practice that we've just work on so you can totally animate and you can also specify different styling for the button you can Also specify different styling for the sidebar if you wanted to but yeah that was our practice number two now let's start working on the third one what

do we have to do we have to create a model with a transition so the first thing that we have to do is that we have to create a component then we have to use the motion. D we can style it by using the tailin CSS or you can also use the just CSS if you want to then we have to use the frame and motion to animate the Model entrance and also the exit Okay so we can just create a button which will trigger the model so yeah let's just start working on there I'm

going to go ahead and create my model right here so I'll just use like model. TSX and use my rafc inside there copy the name of there and register that model right here just like that I'm going to go ahead and go to my model component and the first thing that we have to do is that we have to import um the motion from where from The framer motion now inside this model we're going to be creating our state like is uh open once again and then set is open and it's going to be set

to the US St and then we have to set there two fils now I'm going to remove this model from here and I'm going to provide a bit of classes to this so I'll use like FX and also fle will be set to column and items will be set to tot the center and that's done next we have to Define our button and on this button it's going to Say like open the model and now we have to provide the class name so I'll use like margin for the bottom will be set to four pairing

all around will be set to two background will be set to Blue 500 and text will be set to totally white rounded Cas when somebody try to click on this model or this button to be precise we're going to be firing this function and in this function we're going to be setting the is open flag to True okay so initially it's going to be Set to false and we are now setting there to true if I click on this button nothing will happen so you know let me just the color of there to like crimsom

500 or uh you know what change that to T 500 or something like that yep you're now getting what K model button right here I'm going to collapse that and now underneath this button what we have to do we have to specify our model content so I'm going to go back and we have to check if we have the model like if this Is true then we want to show this UI but if this is not set to true then we don't want to show this UI okay so I'll use like motion div right here

so I'm going to use like motion and then set the to motion Dev okay and inside this motion we're going to be providing a lot of classes to this so I'll use like P and then insert will be set to zero and background will be set to totally black background opacity will be set to 50 and flex justify will be set to center items Will be set to Center I'm going to say my file and inside there when somebody clicks on there so we're going to be fing this function once again it's going to say

like set is open and you want to set the to false okay so that's going to be it for our model styling now inside there we're going to be defining our motion do once again and close them I'll also provide a bit of classes to this one so background will be set to totally white and pairing all around will be set To four totally rounded okay and yeah that's going to be it let me just save my file and inside this Dev what do we have to do we have to just write like H2 which

will say like model title and I'm going to also style there a bit I'll use like text only large font will be set to bold if I save there and test this out if I click on there here you can see it's going to gives us that background of gray and it's going to also gives us that model content right here but we Have to change that to text only black I click on there once again we are now getting this model title we are not providing any animation to that right now we will do

that in a few seconds I'm going to also provide a paragraph which will say like this is some random model content come on content here or something like that and now if I click on there once again still we have to change that to uh text toally black and s file click on there and now we are Getting the model description as well now underneath this paragraph We are going to be creating a button which will just say like close the model and now you can also specify different classes today like margin for the top

will be set to four pairing all around will be set to two background hold red of 500 and text will be set to totly White rounded if I save there click on there once again and now we are getting this close button right here I click on this Can also hide there now finally let's just Pro our animation right here okay so what I'm going to do is that I'm going to go here and provide my animation right here so when somebody clicks on that what we have to do we have to take this event

object we have to use this event object and we have a stop propagation uh method on this so let's just use our stop propagation and execute them and also for the initial State what we have to do we have to use The y axis and on the y-axis we're going to be using like minus 100 VH okay and also we going to be providing the animate and when we want to animate this we're going to be changing the y- AIS to zero VP height and also on the exit prop we're going to be using the

y axis and it's going to be set to 100 VH and let's just proide a bit of transitions today so I'll use like uh duration of 0.5 seconds okay I'm going to save my file if I click on this it's going to show us This model if I click on the close oh we also have to attach this on click Handler on this one God damn it I'm going to use like set is open and set there to false uh yeah let's just set that to false so now if I click on there it's going

to hide there from the UI you know what I'm going to wrap there in the animer presence component and let's just close there I'm going to cut there from there and place there right here okay so if I click on there it's going to show Us this model and if I click on there once again so it's going to hide this so now that's looking better I'm going to click on the open model so it's going to open this model if I click on there once again it will make it disappear you can also click

on there and click somewhere else it's going also hide there from the UI so that's our amazing model the next exercise will not be that much complicated so I'm going to zoom in a bit and what do we have to do we have to Create a responsive animation so what do we have to do make a responsive button that animates on the click okay that's going to be very simple one write a button using the motion do button and then style it by using tman CSS or you can also use just a pure CSS then

use the frame and motion while tap crop to animate the button when clicked so once we click on this we just want to scale it down a bit okay so we can also provide the how effect by using the While how if you want to give it a shot you totally can but yeah if you don't want to do that you don't even have to do that so what I'm going to do is that I'm going to Define my responsive button. TSX let's just use my RFC inside there and go ahead and go to my

app and register this component right here like so so my file go ahead and go to our component and the first thing that we have to do is that we have to import the motion from where from the framer motion And now inside there let's just remove that from here and make there is a motion come on motion. D and inside this motion D I'm going to quite a bit of classes today so I'll use like pairing all around will be set to two and background blue will be set to 500 text will be set

to totally white rounded and also we are going to be providing a transition transform the duration will be set to 300 and also so the e in and out inside there I'm going to save my File right now I'm going to say like click me save my file once again so if I click on then nothing will happen I'm going to also change the uh cursor to pointer and now let's just proide our animation so I'm going to be using like the while H when somebody H over there so you want to scale it up

to like 1.1 and when somebody tap on there like while tab so what do you want to do we just want to use the scale and provide uh 0.9 scaling to there okay so if I H over there it's going to pop it up if I click on there it's going to pop it back okay so that was also our simple animation or responsive button whatever you want to call it now let's create the heart accordion component and I know a lot of you will love this one so what do we have to do we

have to create an accordion component that expands and also collapse on the click create a component that renders a list of item Each with a title and also with the content so you can use the motion. D to animate the height of the content you can use the tman CSS for The Styling or you can just use the pure CSS if you wanted to if you want to give it your best shot you totally can but if you don't want to do that you don't even have to do that so I'm going to be creating

my accordion. TSX file and inside there let's just use what rafc is sell my file go ahead and register this Component right here okay so I'm going to close there and the first thing that we would need is the motion from the frer motion okay so let's just use our frer motion next we would need some sort of items by which we can iterate over through so I'll use like con items or content whatever you want to call them we would need array and inside this array we would have a few objects I'll use like

title and I'll say like um my you know what title one I'm going to Also provide the content and content will say like this is content of item come on of item one and I'm going to put write a comma and duplicate there like a few times okay so then I'm going to change the two two and three and then four I'm going to also change the from the item one to two to three and four next we have to define or St so I'm going to be using like const uh open index and then

set is or set open index rather it's going to be equals to the US St and the initial value will be set to now and now let me go ahead and go to the UI and remove from there and I'm going to provide a bit of classes xace on the xaxis or not the X but the y axis will be set to two inside then we have to iterate over through all of the items by using this map method we have to provide the item and also the index inside there and let's just iterate over

through all of the items so I'm going to be using a div and I'm going to also Close there like so and we also have to specify the key and the key will be coming from this index so now inside this div we're going to be first of all defining a button and this button will have a few class is all used like uh with of totally full and text will be set to left pairing all around will be set to two and background gray will be set to 300 fully rounded and focus it uh

will be set to outline come on outline none this is say our file and inside This button we're going to be rendering our item. title when somebody clicks on this button we're going to be firing this function like when click this Aspire this function which is a toggle irm function which we are going to be creating in a few second it's going to be taking an index so now if I comment this line out and see so here you can see we are now getting a title one and so on and so forth so then

set for the button I'm going to comment or hide There for a few seconds and now underneath this button we're going to be defining where motion. div okay so I'll just close there and inside this button we we're going to be creating our H1 just create our H1 which will say like uh item do content and here we have to specify like pairing all around will be set to two backround will be set to 200 and totally rounded yep you are also getting that I'm going to also change the text to totally black text is

Totally black and there or copy that from there go to my button and place that right here Yep this is looking cool I'm going to hide there for a few seconds and provide my animation to uh this H1 right here or you know what we not going to be providing our animation to this one we're going to be providing our animation on this motion day what the hell am I doing so let's just use our overflow first of all like overlow low will be set to toden and underneath We have to provide our initial State

and the height will be set to zero first of all I'm going to also Prov the animate prop on this animate prop you're going to be setting the height two if the open index is triple equals to the index which we are now getting so in that situation we're going to be setting there to rrow if that's not the case we're going to be setting there to zero and on the transition we have to specify the duration of 0.3 seconds and finally Let me just create this function and I'm going to uncom it there from

here and create this function right here so I'll use like conle uh item and it's going to be equals to this function is going to take a index as a perimeter and I'm going to annotate that as a number like so and it set open index will be set to if the open index if that is equal to the index in that situation we want to set that to no but if that's not the case we want to set that to the Index itself okay so you know what let me just inate there with any

so that it doesn't gives us that errors and now I can click on there so it's going to show us this content I can also click on there so it's going to hide this content right here and they are looking super amazing you can totally modify the styling to whatever you want but in my case they are looking great now we are going to be creating a notification toaster so what we have to do we have to Create a notification toaster that will slide in from the top and Trigger so yeah if you want to

do that by yourself you can definitely go ahead and do that by yourself but now I'm going to give you my Solutions so I'll just create this component like toast notification. TSX file and I'm going to be using my rafc inside the s file and register that inside our app component so I'll just provide my tost notification and hit enter save my file and use my npm runev Because I stopped the server I'm now re-recording this portion and here you can see we are now getting our tost notification which is looking amazing so I'm going

to go ahead and go to my toast notification and the first thing that I want to do is that I want to grab my motion from where from the framer motion like so next we also have to create our visibilities all use like visible and also uh set v i s i b and it's going to be equals to what the hell it's going to Be equals to this Us St and we have to specify the false as a state to there we already seen all of that stuff like a lot of time so I'm

going to remove that from here and I'm going to style there a bit so I'll just provide like Flex and flex will be set to column and items will be set to Center like so inside there we have to Define our button and this button will have a classes like margin for the bottom will be set to four ping All around will be set to two background toally blue of 500 or you know what let me just change the two the teal of 500 and I'm going to also put the text of totally white today

and totally rounded so inside this button I'm going to say like show notifications I'm going to save this file and also when somebody clicks on there they're going to be firing this function which is a post right here so I'm going to copy the name of there and create this function Right here so I'll use like con short tost and inside this function I'm going to say like set visible and set theory underneath that we're going to be also using a set timeout okay that was fast I'll just TR like 3,000 for a duration and

inside there I'll just set the visibility to false yes I'm going to save my file and this is what we have to do right now I can also remove these curly braces from here if I wanted to yeah yep I can totally do that so now Let me just save my file and this is now looking better now let's just go ahead and go to our UI and create our notification so I'll use like uh first of all or visibility so if that is visible then we want to show this content if that's not visible

we don't want to show nothing at all so I'm going to be using like motion div and I'm going to close there like so I'll provide the classes like the class will be set to fix and also for the top will Be set to four right will be set to four beiring all around will be set to four background p green of 500 text totally white and totally round it like so okay so I'll just say like notification an action successful or something like that if I save this file check this out so if I

click on there it's going to show us this notification right here it will make it disappear like so so I'm going to also put a bit of Animation today so I'm going to be using like the frame and motion I'll just proide like for the initial State you want to change the opacity to zero and also the y AIS will be set to minus 20 I'm going to also put the animate prop on this animate prop can specify the opacity to one and also on the Y AIS we want to set there to totally zero

now underneath there we can also provide the exit St when this is exiting so we want to set the opacity to zero and also on the Y AIS we want to Set the bank to Z minus 20 okay and we also want to Prov a bit of transition to them so I'll just write like duration and duration will be set to 0.5 now let me save my file and click on there and here you can see it's going to give us that no ification right here it's going to make it disappear so what I'm going

to do is that I'm going to wrap that inside the animate presence and now I'm going to close there like so I'll cut their animat present and I'll just put there right here oh we have to put the underneath there no like so now if I click on there so it's going to show this notification and then it's going to hide there like so you can totally change the UI you can totally change the animation and stuff like that but now our transformation challeng is totally complete welcome to the key frame practice so in this

one we're going to be building amazing animation so yeah if you want to give it a try by Yourself you can totally do that nobody is stopping you to do that but if you can do that here is how I would do that so what do we have to do first of all we have to create our bouncing ball so create a bouncing ball animation using a key frame so the first thing that we have to do is we have to create a simple circular div to represent a ball then we can use the frame

on motion key frames to create a bouncing effect then we can style it by either using a tailman CSS Or just using a CSS so you know what if you want to give it a try by yourself you can totally do that but here is how I would do that let's just create our components folder and inside there we're going to be creating our bouncing ball. TSX file and I'll use my RFC inside there sa that file and register there right here just like that I'll use this save my file and once again I restarted

my computer comp because there was a problem in my OBS so you know what let Me just refresh there and we are now getting there amazingly I'm going to also put a bit of stying to this one so I'll use like height will be set to screen and also Flex justify will be set to Center and items will also set to Center and background will be this colors all used like 0 D1 and then 017 I'm going to save my file still we are getting that animation so I'll just use like text to I mean

like not animation but that color so yeah that's looking Cool now let's get into it the first thing that we have to do is that we oh my God my keyboard is getting super fast so you know what the first thing that we have to do is that we have to import the motion from the framer motion and now inside there we have to Define our div so I'll just remove that from here and now we are creating a circular box so I'm going to call my component like this or create my div like this

I'm going to also provide the class names like the Width will be set to 16 like so and also the height will be set to 16 and background will be set to totally yellow 400 totally rounded and full I'll save this file and now let's just provide our animation today so I'll use like on the animate okay first of all you have to make the as a motion div so I'll use like motion don't D and then I'm going to proide the animate prop on there and inside this animate prop now we are going to

be using our key frames so for The y axis we want to start from zero then we want to go to minus 100 and then we want to go back to the zero okay so this is how our key frame will look like now we can also specify different transition to there so I'll use like the duration will be set to 1 second we can also provide the repeat and it's going to repeat infinitely and also on the repeat type you want to use like Loop uh loop like so come on Loop and also we

are going to be providing the easing and Easing will be set to ease in and out like so now if I save my file and here you can see we are now getting this cute and amazing ball and that was our challenge or our practice number one next we're going to be creating our pulsing effects we have to create a pulsing effect on a button by using the key frames so we have to Define our motion. button then we have to use our key frame from the frame and motion to animate the scaling of our

button and Make it pulse and yeah you can also use the tman CSS or you can use just a pure CSS so you know what let's just start working on there I'm going to go ahead and Define my component right here which is a puling button. TSX so I'll use like RFC inside there and here I'm going to also register my component like so I'll just call this say my file and this is how it looks like and which is looking amazing once again the first thing that we have to do is that we have

to import The motion from the framer motion and inside them I'm going to be refining my div so I'll just remove that from here and inside this one I'm going to make the as a button so I'll just select motion dot button and come on motion do button like so it's going to say like pulse now we we have to style there so for the styling we not going to be doing anything crazy but I'll just proide like pairing all around will be set to four and background will be set to totally Green 500 text

will be set totally white and rounded if I save there so this is how it's going to look like yep it is looking awful I know that now we have to specify our animation and also our key frames so inside this animate prop you want to scale so for the scale we want to start from one then we want to go into the 1.1 then finally we want to go back to the one so that's going to be forward animation I'm going to also specify the transition and for this Transition we are going to be

also providing that same transition like the duration will be set to one the repeat will be set to infinitely and also the repeat type will be set to Loop once again we want to Loop through them and then finally we have to use the easing so I'll use like ease and ease will be set to ease in and out say our file and yep we are now getting this dancing bouncing effect right here on our button that's cool let's go to the third one so What we have to do we have to create our color

changer animation so we have to create a component that will change the color using the key frames so we have to Define our Square div that changes the color continuously and we have to use the key frames to Define multiple colors for our animation and we can style it by either using the tailin CSS or just a CSS so what I'm going to do is that I'm going to create my component right here and the name will be set to color change Square. TSX and I'm going to be using my AR fce inside there go

into the app and comment this line out and register my component right here this is how it looks like right now now the first thing that we have to do like always always we have to import the motion from where from the framer motion and inside there we have to define or D I'll remove that from here and I'm going to call it like so I'm going to provide the withd and width will be set to 32 height will also Be set to 32 and inside there let's just s our animat I'm going to have

to make that as a motion div so I'll use like motion. div now we can definitely use our animate prop on there and we have to specify the background color and on this background color we are going to be using our key Fram so I'll use like uh this color which is f f and then 0 0 or you know four zeros we're going to be also providing like hash 0 0 ff0 0 and we're Going to be also using uh 00 0 0 0 FF and then we have to specify in 1 2 3

4 zeros there going to be forward uh what do we call it Forward background colors we're going to be also providing a transition today so let's just provide our uh Transitions and on this transition we're going to be providing a duration of three and the easing will be set to linear and underneath we're going to be also providing the repeating and repeating will be set to infinitely Let's just check this out and now we are getting their different colors so we are getting the teal uh crimson and also green yellow and sign and so on

and so forth I'm going to go ahead and do the sliding text effect right now so what we have to do we have to create a text component that slides in from the left by using the key frames so we have to create our component I mean like text component and also we have to use the key frames to define the moment from Offscreen to its final position and then we can style there by either using the telin CSS or just using a pure CSS this one is going to be super simple so we have

to create our component and just Define our RFC inside there now we have to go into our app and register this component right here just like that just like that as Uncle Bob said just like that so we are going to be defining our component like so okay so let's just import our motion uh come on motion from Where from our frer motion and also we have to create our H1 inside the so I'll just replace that with motion. H1 and this H1 will say like I don't know slide in text or something like that

I'm going to change that to in and now we have to specify our classes all Ed like text to Excel and font will be set to B text will be set to totally white and I'm going to save this file this is how it looks like right here and now we have to specify our animations all use like on The initial State we want to start from the xaxis and the xaxis will be starting from 100% now you want to animate to uh the x-axis of zero and then finally we have to specify our Transitions

and for for this transition we're going to be providing a duration of one say our file refresh there and here you can see our text will now slide in from the left to the right next we're going to be creating a zigzag animation and that's going to be a lot of fun so what we have To do we have to create a zigzag animation for a box moving across the screen so create a square box by using the motion DOD and then use the key frames to animate that box in a zigzag pattern then you

can use a tailin CSS or just a CSS for The Styling and yeah you can give it your best sh if you wanted to but in my case I'm going to just create this component right here and I'll use my rafc go to my app and register there uh right in here oh my God let's just register there like like so okay so let's just go ahead and start working on that so the first thing that I want to do is that I want to import the motion from the frer motion inside there we are

going to defining our D so I'll just remove there and I'm going to replace there as motion dot there like so and I'm going to close there next we have to specify the styling all used like width will be set to 16 and height will also be set to 16 Background will be set to totally green of 500 and now let's just provide our animation to it so for the animate class we're going to be providing key Fram so let's just start from the x-axis so you want to start from zero then you want to

go to 50 then you want to start from zero then you want to go to the minus 50 then you want to go to the zero once again on the y- axis we're going to be doing there once again so I'll just copy that and place that right here okay now Underneath that oh I forgot to remove this minus From Here and Now underneath that we have to create our Transitions and for these transitions I'm going to proide a duration and duration will be 2 seconds I'm going to also put the repeat and repeat will

be uh come on let's just put a repeat and repeat will be set to infinity and I'm going to also proide the easing and for this easing let's just set that to ease in and out so save my file and let me just start there from Scratch so here you can see we now getting this box and it is now animating as a zigzag animation so yeah that's also cool you can totally modify there and you can change the colors of there if you wanted to you can also change the Border radius and all of

that kind of stuff if you wanted to but now let's get into the sixth one so what do we have to do we have to create our wave effect so create a wave effect using a series of boxes so first of all we have to define A series of boxes in a row then we have to use the key frames to animate each box with a slight delay to create a wave effect then we can use a tan CSS or just a CSS so what I'm going to do is that I'm going to Define my

web effect. TSX file and I'm going to be using my rafc inside there and first of all we have to import the motion uh from the framer motion like so then we have to Define our boxes so I'm going to be using like con boxes it's going to be equals to Array. from and here we have to specify the length and the length will be set to five now here inside the I'm going to remove the from here and I'm going to provide the class names of Le and also space will be set to xais

of two inside this div we want it over through all of their boxes and now we want to use the map method on there we don't need the data but we do need the index and here I'm going to be using my motion. D and close there like so okay so now let's Just start working on there the first thing that we want to do is we want to specify the index to there next we also want to provide a bit of styling so I'll use like withth will be 6 to 16 and height will

also be set to 16 background will be set to purple and uh purple 500 and now underneath this is animate so for the animation you want to set the Y value to start from zero and then go to minus 20 and then go to the zero so that's going to wait for the key frame And now let's just put a bit of transition to there so I'll use the transition and inside this transition you have to specify the duration of 0.6 I'm going to also put the repeat value and set that to Infinity repeat type

uh repeat type will be set to reverse because we want to reverse it out and also provide a delay to there so I'll use like index time 0.1 now that's it now let me just go ahead and refresh there I guess I didn't I you know let me Just copy there and go ahead and go to my app okay we have to comment this line out and we have to render our component like so so here you can see we're now getting the zigzag animation so now let me just refresh there and now we I

mean like not a zigzag animation but our wave effect so you you can also change the Border radius of there you can also change the colors of there you can also move the around you can do a lots sort of stuff with there but in my case That's going to be it so yeah what do we have to do next for the final one we have to create our background animation create a background that changes the color using a key frames so we have to create a full screen D that acts as a background and

we can use the key frames to animate that background color through multiple colors and we can style there by using either ailment CSS or just a pure CSS to ensure covers the entire screen I'm going to create my component Right here inside this components folder with the name of animated background. TSX now I'll use the rafc and go ahead and register there right here just like that as soon as I registered there we are now getting our animated background which is looking cool so now let me go into this component and start working on the

so I'll use like uh import the motion uh from where from the framer motion I'm going to remove this text and convert it two is a motion Dev so I'll Use like motion. D I'm going to also specify the class name and the width will be set to screen the height will also be set to screen and inside there we have to provide the animate prop and on this animate prop we going to be providing or key frames or use like the background color it's going to be set to this background color so let's start

from this one and background colors are going to be set to these colors now underneath that we also have to specify The transition so I'll use like the Transitions and for this transition we have to spe specifi duration of five or 5 Seconds rather and the easing will be set to linear in this case and also we have to provide the repeat and set there to Infinity I'm going to save my file check this out so here you can see we are now getting this Dev or background color animation or whatever you want to call

that and that's also looking cool so yeah we build a lot of stuff in this Project or not a project but a lot of Animation so now let me just show you all of them in action so we created The Bouncing animation the Ping button and also the color changer the sliding text and zigzag and also the web animations this is super amazing yeah that's super amazing welcome to the variance practice SL challenge whatever you want to call that so what do we have to do the first thing that we have to do is that

we have to create a simple fed In component then we have to create our navigation menu with the slide animation then we have to create a tool tip with variants and also you have to create a Toggler switch or Toggler whatever you want to call it Toler switch there we go so then we have to create a progress bar animation and finally we have to create our Dynamic list animation so let's start from the first one so create a component that feds in when it appears Define a variant for the FED in effect Create a

motion. d that uses that variant then you can use either the tailin CSS or just a CSS for The Styling I'm going to go ahead and create my components uh folder right here components and inside them we're going to be defining our fed in component. TSX now I'll use my AR fce inside there go ahead and go to my app and register there right here so I'll use like fairin component and close there like so I'm going to save this file and now let me Also provide a bit of styling like it will be set

to screen legs and also justify will be set to Center and items will also be set to Center and background will be this color so we have 0 d10 17 Close there and this is how it looks like I'm going to also provide the text of toly white today and that's looking cool first thing that we have to do is that we have to Define I mean like we have to grab the motion from where from the let's just grab the motion from The frame or motion there we go next we have to remove the

and pride our H2 which will also have the text off come on H2 with the class of text only wi there we go wi there we go and I'm going to say fed in component sa our file check this out so now we are getting our F in component I'm going to also provide a bit of classes to this D so I'll use like class name of background totally blue 500 and pairing all around will be set to four totally rounded and Shadow Check this out so we now getting our kind of a button or

whatever you want to call there now we have to Define our variants I'm going to create my variant separately and you can definitely provide the inside your Dev so I'll use like con fed in variance it's going to be set to this object inside then we have to define the hidden property and when it is hidden so we want to change the opacity to zero and when it is visible so in this situation we're going To be changing the opacity to one as simple as this so now let's just use that right here first of

all we have to convert that to the motion. div and now we can definitely use that right here so I'll use like the variance and I'm going to go ahead and copy this variable name and place that right here which means like I can now use the hiden prop and also the visible one I'm going to provide the initial State and for this initial State we're going to be using Our Heron which we Define right here I'm going to also use the animate and when it is on the animate we going to be setting that

to visible I'm going to also provide a transition and for this transition we want to provide a duration and duration will be set to 0.5 just like that check this out and now let me just refresh there and here you can see we are now getting this fed in and also fed out okay that's amazing I can also change that to like 2 seconds maybe and Now if I refresh there now this is looking better let's start work on the second one so which is create a navigation menu with the slide animation so what we

have have to do we have to create a navigation menu that slide in from the side so we have to define a variant for the open and close St for the menu we can use the motion. D for the menu and we can also use like either the T CSS or just a CSS for The Styling so yeah if you want to give it your best Shot you can definitely go ahead and do that but in my case I'm going to Define my slide in or sliding menu. TSX file I'm going to be using the

RFC our file and registered there right here inside our app so I'll use like slide and just registered there right here this is how it looks like right now let's just go ahead and start working on there the first thing that we have to do is that we have to grab the motion from where from the framer motion next we Have to Define our state so I'm going to be using like uh is open and then set is open this going to be equals to the U St and provide your false value for the initial

State that's also done I'm going to remove that from here and inside there we're going to be creating our button and for this button we going to be providing like pairing all around will be set to two background will be set to gray of 500 text will be set to totally white and when somebody try to Click on there we're going to be firing this function which is a set is open and set that to not set is open so I'm going to save this file and for the text we're going to be providing like

toggle menu if I save there this is how it looks like right here and you know what I'm going to also make the bit rounded so use like rounded SM yep that's looking cool or you know what we don't have to do that okay so I'm going to remove that from here next I'm going to collapse That and we have to Define our navigation menu so I'm going to be using uh D and now inside this D you know what first of all let me just put a bit of styling to there so I'll use

like for the class name I'm going to set there to fixed will be set to zero lift will be also set to zero width will be set to 64 and the height will be set to totally full background will be set to totally blue of 600 and inside that we have to Define our UL with the class of pairing All around will be set to four text will be set to totally white inside the let's just proide our Li which will have the text of home then about and then finally the contact right here so

if I save there here you can see we are now getting this amazing sidebar but yeah you get the idea it's not the most cool looking sidebar but you get the idea next we have to Define your menu variant so I'm going to go ahead and Define my menu v a r i a n TS And here we have to specify the open when it is open so we want to set the x value to zero and when it is closed so we want to set the x value 2 minus 100% that's what we have

to do right now I'm going to go ahead and apply that on this Dev first of all we have to convert that to the motion. div also change this one to the motion. div like so and we are going to be using our variance right here so I'll use like not a viewport but a variance and variance will be set to This menu variant and which means like I can now use the initial prop and this can be set to the close and also I can animate and we're going to be using a JavaScript tary

right here so is open if it is open so in there come on is open so if it is oh you know what we are providing a double quote so that's why okay so now if this is open in that situation we want to set there to open but if that's not the case we want to set there to close underneath there I'm Going to also put a bit of transitions today so I'll use like transition and on this transition you want to provide the duration and duration will be set to 01 three check this

out so now if I click on there it's going to show this sidebar if I click on there once again it's going to hide there and that's looking somewhat of cool maybe yeah I wouldn't call it cool but yeah we are getting this amazing animation by using our variants next we Have to create a tool tip with variant so create a tool tip that appears and disappear with the FED effect so what we have to do we have to define a variant for the visible and here instead of the tool tip we can use the

motion. D for the tool tip and we can also provide a styling by using either detailin CSS or just a pure CSS so I'm going to go ahead and create a component with the name of tool tip. TSX and let's just Define our tool tip inside there go ahead and Comment this line out and Define our tool tip right here say our file go ahead and go to the tool tip and grab the motion from the frer motion like so first thing first we have to Define our state so I'll use like v i s

i and then set v i s i e this going be equals to the UST and N scroll US state and for the initial value we're going to be setting there to false now let's take care of our UI so I'm going to remove them and provide a bit of classes today So the class will be set to relative and inline and Block B and OC the like so inside there we're going to be defining our button which will say like how over me or something something like that I'm going to also put the classes

for this one so pairing all around will be set to two background totally blue of 500 text will be set to totally white like so now I'm going to attach two event handlers so which means like when somebody Mouse enter so in this situation we going to Be firing this function which is a set visible and set that to true and also we're going to be providing like when somebody Mouse leaves so then we're going to be still firing that same function but we going to be changing the value to false okay that's set for

this button I'm going to collapse there and now underneath this button we have to Define our data so if this is visible so in that situation we are going to be showing this data so I'll use like Motion. div and close there and it's going to say like come on two two and then tip God damn it tool tip there we go tool tip content or something like that so if I H my mouse over to there so it's going to show us that tool Tab and if I leave it back so it's going to

hide there now I'm going to go ahead and Define my variants so I'll just Define the right here I'll give the name of like tool ship variant or something like that and when it is hidden we're going To be changing the opacity to zero and on the y- axis is going to be set to minus 10 and I'm going to duplicate that and change that to SI and set there to one instead of providing a minus we have to set there to only zero I'm going to copy the name of that go to our tool

tip Dev and here I'm going to be using them let's is pro our variant n viewport variants and set there to this tool tip variant now underneath them we have to use the Inline why am I saying in line initial State and for this initial State we want to set that to heren and when it is animating so we're going to be setting that to v i for the visible St we're going to be also providing an exit prop and when it is exit so we want to set that to Hidden I will also provide

a bit of transitions to this so for these transitions I'll provide a duration of 0.2 seconds right here I'll also put a bit of classes like uh absolute a b s o L u t e background will be set to gray of 700 and also text will be set to totally white ping all around will be set to two totally rounded let me just save our file test this out so if I H my mouse over to there it's going to give us that tool tip but if I leave it back it's going to hide

there and as you can see it is not looking that much cool but yeah we are getting this tool tip or you can say or animated tool tip right here that's also done what do we have to do Next we have to create our toggle switch animation and that's going to be a lot of fun so create a toggle switch that animates between the on and also on the off start then we have to define a variant for the on and also for the off position on the switch so you can use the motion. D

to represent the switch and you can use the tailin CSS or just a CSS for The Styling let's just do that I'm going to create a toggle switch. TSX file and Define my R fce inside there Save there and go ahead and register there right here inside our app so I can use a toggle switch go ahead and go to this toggle switch and grab the motion from the framer motion like so next we have to Define our stat all use like is open and then not open but is on and then set is on

it's going to be equals to this US state and the initial value will be set to false underneath there we're going to be taking care of the UI so I'll just remove there and provide a Classes to there to relative and also inline block and width will be set to 36 and the height will also be or you know what the height will be set to 16 inside this div we're going to be defining our own div and which will have the class name of uh you know we're going to be providing a dynamic classes

for there so we can use like the WID will be set to totally full the height will also be set to full totally rounded one rounded and then full background will be set to tot Gr of 300 like so and cursor will also be set to point now we can render over State totally dynamically so I can use like you know first of all let me just save there and I can make a bit of room and now I can use like if is open which is our state like if our state is set to

open if that is set to true what do you want to do you want to change the background to totally green of 500 but if that's not the case you want to set that to empty string okay and I'm going To also provide the on click when Handler on there so when somebody try to click on there you're going to be firing this function which will say like set is on and set there to is on like so and you know what let me just show you there so this is how it looks like right

here but inside there we have to create our ball okay not my balls but we have to create our ball so I'm going to be using like motion div and close there like so I'm going to put a bit of classes today Like absolute top will be set to one left will be set to one withd will be set to 14 height will also be set to 14 totally rounded and background will be set to totally white shadow like so inside this D we have to provide our animations but before I provide the animations I'm

going to go ahead and go to the top and create my variance right here so I'll use like cons switch uh variance and it's going to be equals to this object we can put the off St and When it is off so we can set that to zero and also on the on St let me just change that to the on you want to set that to 70 now that's already done I'm going to copy the name of that and provide my animations right here so let's just use our variants and here we have to

specify our switch variant and on the animate we want to set there totally dynamically so which means like we're going to be using only one curly braces if our St is set to open or on You want to Pride the on St if that's not the case so you want to set that to off I'm going to also put a bit of transitions right here and for this transition we're going to be setting the type to toly Spring one of my favorite animation type and the stiffness will be set to 300 like so so and

here you can see we're now getting our ball now if I click here so it's going to move it right here if I click on there it's going to move it there so this is how we Going to be creating our basic animated Toggler you can also change the transition of there if you don't like that but in my case that's looking super amazing so yeah that's number I don't know whatever number there that's number four there we go all right guys so welcome to the gesture based practice animation so in this one we're going

to be building amazing gesture based animation so first of all we're going to be creating a swappable card then Dragable box then rotate on drag also tap to change the color long press to change size and finally we're going to be building a gesture based image gallery so now let start from the first one which is a swappable card so how are we going to be doing there and what exactly we're going to be doing first of all we have to create a card that can be swapped to the left or to the right to

remove it from The View first we have to create a motion. d to represent the card Then we can use the frame or motion drag prom to detect the swap gesture finally we have to animate that card position based on a swap so if you want to give it your best shot you definitely go ahead and can do that but you know what here is how I would do that I'm going to create a component folder and inside there we're going to be creating swapable card. TSX and let's just use our RFC s there and

go to our app and register there right here so we are Going to be using a swapable card say our file and this is how it looks like right here I know it is not looking that great but we are going to be making it great right now so I'll use like heart will be set to to the screen flex and justify will be set to Center and items will also be set to center background will be set to this color which is 0 D1 017 close this s our file this is how it looks

like I'm going to also provide the Toft toally white to there and yep now That's looking cool so I'm going to go ahead and start working on there the first thing that we have to do is that we have to import the motion from where let's just use the motion from where from the framer mod motion now inside there we have to Define our set so I'll use like is removed and then set is removed and it's going to be equals to this Us St and the initial value I'm going to set there to false

now let's define our div so what I'm going to do Is that I'm going to write like swipe me or something like that and I'm going to also provide a bit of styling to this so I'll just say like class name and we're going to be also using the dynamic classes so I'll use like with will be set to 64 and the height will be set to 32 and background will be set to Blue 500 totally rounded come on rounded large and we're going to be also providing a shadow of totally large F and items

will be set to totally Center Justify come on justify oh my God justify will also be set to Center and text will be also set to totally white so now let me just save my file this is how it looks like right here now we are going to be also providing our state right here so what I'm going to do is that I'm going to render that only dynamically so I'll use like if this is removed so if that's the case we're going to be using the hidden prop but if that's not the case we

are going to be Setting there to empty string so now let me just save my file I'm going to also attach the event handler which will say like on drag and and it's going to be equals to this handle swipe I'm going to copy the name of that and create this function right here so I'll use the cons handle swipe and it's going to take two perimeters so it's going to take like the data we are not interested in there I'm going to also annotate there as any prop and I'm going to also put the

info And info can be a string or you know I'm going to also set there to n What The Hell Or Not N but just any okay so now let's just check if you have the info. offsetx value if that is greater than 100 so in that situation we're going to be using like set is removed and we're going to be setting there to true and which means like if we uh swipe there to the right then you want to remove there okay swipe right to remove but if then not the case we're going to

be also Providing yet another check which will be a info. offset dox value if there is less than minus 100 in that situation we're going to be still using like set is removed and we're going to be setting that to true in that case okay so now let me just save my file now let me also provide the drag and drag will be set to you know first of all we have to make the as a motion div so I'll use like motion. div and now I'm going to use my drag and we are going

to be setting that To the x-axis only I'm going to also provide the drag constraints and for these drag constraints I'm going to provide the left value and left value will be set to minus 100 and the right value will be set to only 100 oh this should be motion. there okay so I'll just remove this semi file check this out so I can only swap it to the left and also to the right so if I do this it's going to remove that from The View and here you Can see if I just swap

it right here and leave my cursor bang it's gone now let me try there once again so if I just put the right here or r that right here is going to remove them from the Dom so yeah this is our simple swap component that we wanted to create so now let me just remove that and now next we're going to be working on the dragable box so what we have to do we have to create a box that can be draggable around the screen okay so we have to use like Motion. d and we

have to use the frame on motion drag Pro for the functionality and also we can either use the tailman CSS or we can just use a Pure CSS that's going to be quite simple and easy so I'm going to go ahead and create this component right here with the name of dragable box. TSX and let's just use our RFC inside there I'm going to register there right here inside my app so I'm going to comment that line out and grab my dragable box and close it here you Can see we're now getting there which is

looking cool the first thing that I want to do is that I want to grab the motion uh m o t i o n motion from where from the framer motion that's going to be the first thing next we have to remove this drag will box and I'm going to say like drag me or something like that now also so change that to the motion. div so I'll use like motion. div now we provide a bit of styling to this so I'll use like with will be set to 32 it will also Be set to

32 background will be set to totally green 500 and totally rounded large and Shadow will be also set to large and this is how it looks like right here so you know what let me just provide my animation so I'll use like the drag and I'm going to also provide a drag constraints right here so for these drag constraints I'm going to set the left value to zero and the right value will be set to 300 not 1,000 but 300 on the top we going to be setting there to Zero on the bottom we are

going to be setting there to 300 so now let me just save there and we can drag that to the left to the right and also to the top and also to the bottom okay so yeah this is how it looks like and I can totally remove that also remove that one and provide my closing tag Yep this is looking better we can also change the color of there to like uh Crimson or cyan and come on sign there we go and yeah it Is looking kind of cool but yeah this is how it looks

like next we have to create the rotate on drag so what do we have to do we have to create a box that rotates when we drag there so we have to use motion. div to represent a box we have to use the own drag event to calculate the rotation angle then we have to animate the rotation of the Box based on the drag moment so you know what let's just start working on that I'm going to go ahead and create my component with The name of rotate on Dragon do TS6 and let's just use

our RFC inside there go to the app come and this line out and render the right in here save this file and here you can see we now getting this text which means like everything is working the way we expect him to work so I'll just go to the top and import my motion from where from the framer motion next we have to Define our rotation so I'll use like uh rotation and then set rotation it's going to be equals to the UST State and the initial value will be set to zero and now we

have to make make there as a rotatable box so I'll just change that to the motion. div and here we have to specify the you know let me just hit enter right here drag and also we have to use our own drag event and here we're going to be passing our handle drag which we're going to be creating in a few seconds so you know what let's just do that I'm going to copy the name of that and Define this Function right here so I'll use like const and then handle drag it's going to take

event as an object so I'm going to just inate there with any for now also it's going to take the info and I'm going to also inate there as any so inside there we're going to be using our new rotation it's going to be set to rotation times the info do offset do x value so basically these are just the calculation of the rotation based on our drag okay so I'll just provide the four Rotation state so I'll use like new rotation and I'm going to save this file okay so we don't need the you

know I'm going to just WR there and annotate with any now this looking better I'm going to go ahead and bit of styling today so I'll use like class name and width will be set to 32 he will also be set to 32 background will be set to totally red of 500 all rounded large and flex items will be set to Center justify will also be set to center it's it's going to say Like drag me or something like that let me check this out so if I drag there it is not rotatable so we

have to provide our style so for this style I'm going to be setting the root head property to the rotation which is coming from our St right here I'm going to test this out so if I drag there here you can see it is now rotating I know the rotation is a bit funky but yeah this is what it is I'm going to also provide a bit of uh duration to this so I'll use like Transition and here I'm going to Define my duration and duration will be set to maybe 3 seconds okay and now

let me just refresh there and still we are getting that super fast but yeah you get the idea so that's also cool so let's just remove that line of code and next we have to create our tab on change color so create a box that changes the color when we tap on it so create a motion. for the box and then use the own tap event to change the Box Color you can either use a t CSS or just CSS for the classes I mean like for the styling so yeah let's just work on there

I'm going to go ahead and Define my component right here with the name of T to change color. TSX and I'm going to be using my rafc inside there let's just go into the app comment this line out and register my component right here I'm going to go ahead and first of all we have to import the main thing which is the motion object from where from the Framer motion next we have to Define our colors so this is how our color will look like so we have a blue green red and also the yellow

color which are the TN CSS classes next we have to Define our color state so I'm going to be using like color uh index and then we have to set that to the set color index and it's going to be equals to the use St and here we have to annotate that or provide value of zero to the I'm going to remove that from here and change that to T me And pro and change that to the motion. D I'm going to be providing a classes so use like class names and we're going to be

rendering our classes to dynamically so use like withth will be set to 32 will also be set to 32 and let's just render our colors I'm going to be using like uh colors you know what we have to get their colors God damn it so I'll use like colors and then color index we're going to be providing there right here so essentially these colors are coming From these main colors and now we are providing a specific index to them so which means like it's going to start from zero and then we will increment there so

what I'm going to do is that I'm going to provide like rounded large and flex and items come on items will be set to tot the center and justify will also be set to toly Center I'm going to save this file right now and when somebody tap on it so let's just use the on tap not capture but when somebody use The own tab then you want to F this function which is a handle tab function so I'm going to copy the name of that and register this function right here so I'm going to go

back and use handle Tab and it's going to be equals to this Arrow function and inside there we have to use the set color index and provide our previous index and here we have to use like the previous index plus one and we are going to be rounding them by using this modular operator and then we Have to get the colors. length so we want to divide both of these value and get the remainder of that by using this modular operator so that's done we don't need this color from the frame or motion and you

know what let's just try this out here tap me if I click on there here you can see it's going to change the color to whenever I click on this it's going to just change the color but I'm going to also provide the cursor of pointer to this so cursor will be set to Pointer come on let's just WR the pointer and now if I click on this so anytime I click on this it's going to just change the color to these different colors which we now specifying right here that's also something that I want

to show you that we can build next we have to create long press to change the size so create a box that changes the size when we long press on them so you can use the motion. dev and on Tab and animate the size of there so yeah let's Just do that the first thing that we have to do is that we have to create our component with the name of long press to change the size. TSX and RFC go to our app and register the right here here so long press to change the size

I'm going to go into this component and first of all we have to grab the motion object from the frame or motion so motion from there from the frame or motion and next we have to provide the size so I'll use like is large and then set is large it's Going to be equals to the use St and provide the initial value of false to them I'm going to remove them and change that to you know first of all change that to the motion. D and I'm going to also put a bit of classes to

this all use like uh the class of come on with will be set to 32 height will be also set to 32 and background will be set to totally blue 500 rounded totally large and the flex items will be set to totally Center and justify will also be Set to to Center and transitions transition will be set to all and duration will be set to 300 I'm going to also change the cursor to to pointer and here we have to render our data dynamically so if we have the large icon so we're going to be

using like uh with will be set to 48 come on 48 and also the height will be set to 48 if that's not the case we are going to be setting that to empty string like that and for the label I'll just provide like uh long Press me or something like that and if I save this file check this out if I click on there nothing will happen now I can provide my events so I can use like on Tab start and here we can specify the handle long press start going to be creating there

in a few seconds now let me Define another event which will be the on Tab cancel and here we have to specify the handle long press end and now finally we have to define the on Tab and here we're going to be using like Handle long press and one more time okay first of all we are going to be creating this function so what I'm going to do is that I'm going to Define this function right here and now we're not going to be doing anything crazy but we're going to be using like set is

large and change that to true now this done we have to create this function so I'm going to copy the name of there and duplicate this line of code and change the name of there to handle long press and and I'm Going to set there to false in this case so now if I sa my file test this out so if I click on there it's going to increase the size of there but if I leave it down it's going to bre it to its normal size next we have to create a gure based image

gallery so create an image gallery that can be navigated using a vertical swipe gesture so you can use the motion. D for the gallery that contains the images implement the Swip gesture to navigate between images Vertically and down and then use the animated presence for the smooth transitions between the images so let's just do that I'm going to go ahead and create my component right here with the name of gesture Bas image gallery. TSX and Define my component and go ahead and go to our file and register there right in here just like that I'm

going to close there let's just go ahead and Define there remove that one you know I'm going to remove every single thing And and go to this uh just a function or component rather the first thing that we have to do is that we have to grab the motion object from where from the frame and motion that's going to be the first thing next we have to render these images you can get these images from my giab repository or if you want to use your own images you are more than welcome to use them now

we have to create our current index for our image so I'll use like uh const current index And then Set current index and it's going to be equals to the U St and the initial value will be set to zero now I'm going to go ahead and remove that from here and provide my class name first of all we're going to be providing the relative class with will be set to 7 to2 the height will be set to 7 to2 once again and overflow will be set to not overline but overflow will be set to

totally hidden inside there what do we have to do we have to create our animate Presence for the smooth transition so I'll use like animate presence and close there and inside this animate presence we're going to be defining our image so I'll use like IMG to Define my image but first of all we have to convert this image to the motion. image okay so for the source we going to be using the what do we call it the images come on this images you know let me just go to the top we're going to be

us we're going to be using this variable Which is now holding all of their images and I am going to place that right here and inside that we have to specify this current Index right here so I'm going to copy the name of the m place there but what the hell am I doing uh we have to convert there to the curly braces like so I'm going to also convert that one and for the alternative text I'll just change that to I don't know maybe slide and then I'm going to put that current Index right

here so current index and I'm going to sve my file so this is how currently things looks like and I also forgot that I'm going to also proide the key and that key will be coming from the current index now let's just save there now that's looking better I can also make it dragable so I can use like drag on the y axis in this case I'm going to also provide a drag constraint today and for these drag constraints we're going to be using like top will be set to totally zero and bottom will be

also set To zero okay and now let's just use the on Rag and function and here we're going to be creating this function like handle swipe I'm going to copy name of them and create this function right here so once again we're going to be defining this function it's not going to take any data we're going to be annotating there with any and now we have to also annotate the information to any and now we have to check if we have the info dot come on offet do y value greater than 100 so in This

situation we are going to be setting the current value to the previous not yeah current value to the previous one and let's just remove one from this so I'll use like uh previous minus one and then times the images. length Okay and we also have to divide there so if I want to divide there first of all we have to wrap there in inside these parentheses and then I'm going to divide that by the images. length let's just use the images. length right here So this the formula to swipe it down now if that's not

the case so what we have to do we have to use our lse if block and use our info. offset on the Y AIS if that is less than minus 100 so in this situation we're going to be setting the current index to the previous one and then we can multiply there so I'll use like previous * 1 and I'm going to also rep inside the parentheses and then let's just divide all of them by images. length Okay that was a lot of talking I'm going to save this file right now and now let me

test this out if I drag there nothing is happening okay nothing is happening right now so I'm going to also provide the initial and all of that kind of transition so I'll use like initial and for the initial we're going to be providing the opacity and opacity will be set to zero so that's going to be the initial stage of my animation and when we want to animate there then we going to be increasing the opacity to One and also on the exit we want to set the opacity to stor zero I'm going to also

provide the class name and the class name will be set to totally full withd it will also be set to totally full and totally rounded so now let me just save there test this out and if I swipe there to the top you're not getting a new image I don't know why let's just test this out oh this shouldn't be times this should be a plus symbol now let me see there and if I Break there to the top still nothing is happening and this should be a plus so now let me write a plus

and now let me just test this out here you can see it's going to remove there from the Dom and now if I swipe there to the top it's going to remove that image it's going to gives us the new image if I scroll there to the bottom it's going to remove there and gives us a new image like so so yeah that's amazing looking Gallery if you care about that you can Implement in Your projects but if you don't care about that you don't even have to worry about out there so yeah that was

the gesture practice welcome to the Stagger animation practice so in this one we're going to be building amazing animation so first of all we are going to be creating a stagger list item then the Stagger image gallery then the Stagger button press stagger grid layout and finally we're going to be building a stagger text Review starting from the first one we to create a list item that animates into a view with a stagger effect and you guys already know what a Stager effect is so what do we have to do we have to create an

array of items like strings or something like that then we can use the motion. D to display each item Implement a Stager effect so that each item appears one after the other when the component first mounts so now let's start working on this so I'm going to go Ahead and create my uh components folder and inside there we're going to be defining a Stager list. TSX file I'm going to be using the rafc and now let me just save them I'm going to go ahead and go to my app and register that component right here

just like that this is how it looks like like so I'm going to also provide a bit of classes to it so the height will be set to toly screen flex and justify will be set to toly Center and items will also Be set to center background will be set to this background like 0 D1 017 I'm going to say my file and this is how it looks like I always forget this text of white so yeah that's looking great and the first thing that we have to do is that we have to grab the

motion uh from where from the framer motion next we have to Define our item so I'm going to be using like items and I'll say like item one and then item two and then I don't know item three and also Item four finally item five and I guess that's going to be fine next we have to go into the UI and remove that and change that to the motion. div inside then we have to itate over through all of that items so I'm going to be using like items. map method you want to get the

item and also its index so now inside there what you we have to do we have to first of all create one motion. Ali and inside this Ali first of all we're going to be providing the key and The key will be coming from that index I'm going to also provide a bit of classes today so margin for the bottom will be set to two pairing all around will be set to five background yellow 300 like so okay and here we're going to be rendering each of the items so I'll just save my file test

this out so yeah we are now getting these amazing items yeah you get the idea next we have to Define our variants so I'll just Define like uh coner on sgr stagger variant It's going to be equals to this object and we're going to be providing the hiden property and opacity will be set to zero I'm going to also duplicate that and change that to visible and change the opacity to only one I'm going to go ahead and provide my variance right here as well we can also make this separately if you wanted to but

you know what I guess that's going to be fine so I'll use like uh variant and inside there we have to Pro or visible flag so VI i s i B e and inside that visible we're going to be using the transition and for this transition TR a n s i t i o n for this transition I already explained that we have a stagger children property so we're going to be using the St stagger children and provide a 0.2 delay for each element to animate now I'm going to use this tagger variance I'm going

to copy the name of them and use the inside your lii so I'll use like variants and provide the right here let's just sa our File test this out so now if I just refresh there nothing is happening I don't know why but now let's just test this out oh that's because we also have to use the initial state so I'll use like the initial State and set that two hereen I'm going to also use the animate and for this animate we're going to be setting there two visible and now let's just refresh there and

now we are getting like each item one by one 1 2 3 4 5 I'm going to go ahead and remove This item from there and also I'm going to change there to instead of a Eli I'm going to change that to div now that's looking better so if I just refresh that yep that's looking cool I can also change the timing of there to like 1 second or something like that and refresh there one 2 3 bang bang that's cool what do we have to do next I'm going to go in there and next

we have to Define our stagger image gallery so what do we have to do we have To create an image gallery where the image feds in with the Stager effect uh when loaded yeah create array with image URLs and then use the motion. image to display each image and then implement the Stagger effect for each image to Fed in as they loaded so let's just start working on there I'm going to go ahead and go to our component folder and register my stagger image gallery. TSX right here I'm going to be using the RFC go

to our app and register there right In here just like that I'll go to my component and the first thing that we have to do is that we have to grab the motion from where from the frer motion you also have to Define these images which you can get from my giab repository or if you want to provide your own you are more than welcome to do that I'll just remove that from here change that to the motion. D and here we have to specify the class name of flex now we have to go into

this div and I'm Going to be itting over through all of that images so I'll use like images. map method and it's going to take the source and also the index and inside there I'm going to use the motion. image and and here let's just close it it's going to take the key so for the key we're going to be passing our index inside there for the source let's just pass our source for the alternative text I'll use like provide my index totally dynamically I'll use like index and here we also Have to provide the

variance and for this variance we're going to be passing our stagger variance which we're going to be defining in a few seconds so stagger variance like so and I'm going to also provide a bit of classes to this so I'll use like with will be set to 20 rim and also will be set to Auto margin for the left will be set to to rim and totally rounded r o u n d a d like so so if i s my file I'm going to Define this variant at the top here so I'll use like

Con tagger variants and inside there we have to Define what hidden and when it is hidden so we want to change the opacity to zero and if that is set to visible we want to change the opacity 2 one that's totally done I'm going to go into this Dev and provide my animation right here so I'll use like for the initial prop or initial okay so you want to use the hidden but if that's not the case so on the animate you want to use the animate not animate but or visible And also we are

going to be defining our variants I'll use like v a r i NTS and we're going to be providing the visible State and for the visible State once again we're going to be using that same transition so let's just provide this transition and for this transition we have a special property called the Stagger children and I'm going to provide like maybe one second would be fine so now let me just save there test this out so let's just refresh there and Here you can see we're now getting one two three all of that images so

let me just refresh that once again first of all it's going to give us that image then that one and then this one I provided a lot of time but you can change there to like 0.5 or 6 or something like that and it will work totally fine so now let me just refresh there and I guess that's looking a bit cool you can also change that to like 0.2 now let me just refresh there yep it Is super quick yeah this one is super quick I can probably change that to I guess five would

be fine definitely five would be great yeah that was the Stagger image gallery what we have to do next we have to Define our stagger button press create a set of buttons that animate Into The View with with the Stagger effect when we H over it so we have to create a set of buttons then we can use the motion. div to animate each button and then we can Implement a ster Animation effect when Hing over the button container this going be quite simple and easy so I'm going to go ahead and go to my

component folder I didit it again God damn it so we have to create a stagger button first. TSX file and I'm going to be using the rafc inside there go to the app comment this line out and register my uh stagger anywh come on stagger press button there oh my God stagger button press there we go I can't even speak no more I speak a lot today Because I was recording this course so it took me way much time and energy to record this course but yeah let's just first of all create our button so

I'll use like array and we are going to be using like button one button two and button three also button four would be fine okay so we're going to be going in there and change there to the motion. D and inside there let's just itate over through all of their buttons buttons. map method here we have to specify the Label and also the index inside then okay so inside this one we're going to be using our motion. button and Define our buttons right here so it's going to take that label I'm going to render that

level right here s file and it's going to gives us that uh what do we call it button one two 3 and fourth one so I can also to the style then I can proide first of all the key and the key will be set to the index I'm going to use the class name ping all around will be set To two background will be set to Blue of 500 text only white and rounded sver file this is how it looks like right now I'm going to also put a bit of margins so margin two

rims would be fine yeah they they are looking cool now underneath there let's just use when somebody how over there so I can use like while how so we can just increase the scaling of this so I'll use like scale 101 I mean like 1.1 and now if I H over there so it's going to increase the Scaling of these buttons and they're looking cool next I'm going to also use my stagger on this button I mean like on this Dev so I'll use like the class name and the class will be set to flex

and space on the x-axis will be set to four like so and when somebody H over there while how so we're going to be using the transition property and we want to use our stagger children and set there to 0.2 and now if I have my mouse over today so yeah we are getting this kind Of a smooth transition but I wouldn't call it as a stagger animation I don't know why I put the in this practice but yeah we have a little bit of practice about what do we call it the while how effect

or the while how prop as well so you know what I'm going to either crop this part out or I'll just remove that from the giab depository anyways let's talk about the Stagger that was a button so now let's talk about the Stagger grid layout so what we have to do we have to Create a grid layout of item that animate Into The View with the Stagger effect and you guys already know what a stagger effect is so we have to create an array of items that can be displayed into a grid format and then

we can use the motion. D for each grid item we can implement the Stag effect so that each grid item animate with a slightly delay relative to its position so let's start working on that one so what I'm going to do is that I'm going to Define this uh Stagger grid layout. TSX and I'm going to be using my rafc inside there go there comment that line out and register my component right here so I'll use this layout sem my file and let's just start working on there by importing first of all the motion from

where from the framer motion now I'll also Define my item so I'll use like item 1 2 3 and so on and so forth until item six now we also have to convert that to the motion. D and I'm going to also put a class name Of grid grid will be set to columns three and g I'm going to provide like four inside this div let's just iterate over through all of that item so I'll use like the map method and specify the item and also the index inside there is I'll use like the motion.

D and close there duplicate this line of code and close it like so I'm going to provide the key and for the key which will be coming from the index I'm going to also provide the class name I'm ping whe all Around will be set to four background gray will be set to 200 come on 200 and round it totally so I'm going to sell my file right now check this out so yeah this is our simple basic GD layout so now let's just provide a bit of styling today but first of all I'm going

to also render the items so let's just check this out we have all of that items you want to change the color of that to text come on uh text totally black the color is now changed to tot black and you know What let's just provide a bit of Animation to that so I'm going to go to the top and Define my Stager right here not a stagger but my variance so I'll use like con stagger variance it's going to be equals to the hidden prop and the opacity will be set to zero initially on

the visible the opacity will be set to one and we have to specify a comma in there copy the name of that put that stagger variants right here so I'll use like the variant not the viewport but The variant r i NTS and provide my stagger variants in there here for this div I'm going to also provide my variants and for this variant what do we have to do we have to provide our visible and I'm going to say the transition that's tager children and. 0.2 as a delay to them we're going to be also

using the initial St and for the initial State you want to use the hidden and for the animated State you want to use the visible VI i s IBL now let me Just save my file test this out so if I just refresh there it's going to gives us this amazing amazing amazing uh look right here amazing trade so yeah and you know what that is looking horrible so I'm going to have to remove that one and close that manually like so now let me just refresh there here you can see it's going to gives

us this layout I can also change the styling of that to 1 second and now let's just refresh there and 1 2 3 slightly Slow okay so that was our stagger grid layout the final thing that we have to do is that we have to Define our stagger text review create a title where each letter animate Into The View with a stagger effect are we going to be doing this split a string into array of characters then use the motion. spin to display each character Implement a Stager animation effect for the character to appear one

after the other so let's just start working on there I'm Going to go ahead and Define my component right here with the name of stagger text. I me like Stager text reveal. TSX and let's just use our RFC inside there go to the app come and just line out and Define my component right here just like that I'm going to go into that component now let's start working on there the first thing that we have to do is that we have to import the motion from where from the framer motion so we have to Define

our text all use like Cons come on cons text and it's going to be equals to my name like husan webd or you know instead of writing my name I'm going to write like hello I'm going to save that but providing a comma I'm going to proide a space next we have to remove that and change that to the motion. H1 and here I'm going to provide the class name of um text for Excel F will be set to bold text will be set to totally white and here we have to render our text so

I cannot render my text like This but you know what I'm going to hit enter right here the first thing that I can do is that I can use the text. split method and then I can just provide empty string so it's going to convert my string to array so now let me just save there and here you can see it's going to gives us that string but basically this is array right now because we are now using the split method on there so it's going to convert there to array so which means like I

can also iterate over Through there so I'll use like the map method I'm going to get the character and also its index like for each character you're going to be also getting its index now I can use like motion. span and I'm going to close them and here we also have to specify the key and for the key we're going to be passing the index and yeah now let me just past that character right here the character name to be precise we can totally see there right now but now we Have to animate there so

if you want to animate there first of all we have to animate this H1 then we are going to be animating this Dev I mean like this spin to be precise so what I'm going to do is that I'm going to specify my variants come on v a r i NTS and for these variants we're going to be using the visible and provide our transitions on there so let's just choose this uh transition and provide our stagger children and for this stagger children I'm going to provide like 0.1 seconds for the delay I'm going to

also use the initial when initially it renders we are going to be using the hidden prop and on the animate you want to use the visible and now if I just refresh the nothing will still happen because we also have to split this out I mean like we already split this out but we have to animate them so to animate that I'm going to go to the top and first of all we have to create our stagger variance so I'll use Like con stagger variance and inside there we have to use the hidden prop and

the opacity will be set to zero put a comma in there change that to visible and change that to one I'm going to copy a name of there go to the bottom and provide my variants right here and paste the Stagger variants check this out so now let me just refresh that and we are now getting each character one by one let's just refresh there once again that's a cool effect that's a cool 2007 Effect yeah I know 2007 effect so now let's just change there to like maybe 1 second sa our file and now

if I just refresh there 1 2 3 4 and it will take forever but yeah that was our amazing stagger animation practice and I hope you loved it welcome to the use motion value hook practice so in this one we're going to be building amazing animation so first of all we're going to be creating a dragable box then how link scale after that we are going to be Building a string animated position and dynamic rotations so let's start from the first one which is a dragable box so create a dragable box that Updates this position

using the use motion value so here are the instructions cre a motion. div that can be dragged around so use the used motion value to drag the x value and also the Y position of the Box finally we have to display the current position of the box as a text so let's just start working on there I'm going to Go ahead and create my components folder and inside there we have to create a reg box. TSX and I'm going to just write my RFC inside there go to my app and register this component right in

here like so I'm going to save this file I'll use npm run Dev run there so this is how it looks like so I'll also Prov a classes I'm going to say like the height will be set to screen flex and justify uh will be set to center items will also be set to center background will be this Color so which is a 0 d101 7 and let's just close this our file and this is how it looks like also change the text to totally white now let's start working on our dragable box so the

first thing that I'm going to do is that I'm going to grab the motion from where from the framer motion next I'm going to Define my motion value so I use like Con X and it's going to be equals to the use motion value hook now a template by use motion value and the initial value will Be set to zero I'm going to also duplicate there and change the variable name to Y so now we are cre in two motion values and now we have to use the inside our UI so I'll provide a class

name things can be set to flex and flex will be set to column and items will also be set to Center so inside this div now I'm going to be defining my motion. div so I'll use like motion. div and close there like so now the first thing that I want to do is that I want to Style that a bit so I'll provide the width of 32 height will also be set to 32 background will be set to totally blue 500 totally round there so now let me just save my file and this is

how it looks like I'm going to also provide my drag and then I'll provide the drag I mean like then I'm going to provide the style and for this style I'm going to specify the x value and also the Y value which is now coming from these motion values so now underneath this div I'm Going to create a paragraph and now this paragraph will have the text of toly white uh White like so now I'm going to render my position so I'll use like uh position come on p s t o n and here we

have to render our position so I'll use like x.g and it's going to give us the x value I'm going to also put a comma here uh and I'm going to say like y.g and it's going to gives us you know what outside from this one I'm going to say like y.g and it's going to gives us the Y position so now let me just save my file and now here is the catch if I move there nothing will show up right here inside this position area but if I leave there and make some changes

like for instance if I just remove this class name from here semi file now we are getting that value look at this they are super long so I'm going to change that to two fix so I'll use like do two fixed and fix there with two numbers I'm going to also provide the Two fix right here and fix the with two numbers s our file and now we are getting the actual value so yeah if I move there nothing will show up like yeah nothing is showing up right here but now if I go ahead

and just make some sort of a changes like I'm going to specify the class name of I don't know something like that and now let me just save my file now I can totally see the changes so so yeah that was our first dragable box next we have to create the How link scale so create a button that scales up when howed using the used motion value in this case Okay so just create a motion. button and then you can use the use motion value for the motion value to control the scale of the button

and also update the scale value on H and reset day when we are not Hing so you know what if you want to give it your best shot you totally can but now let me just create this component with the name of our link scale. TSX and I'm going to Use my rafc inside there go to my app comment this line out and register this component right here I'm going to go to this component and now let's start working on this so the first thing that I will need is the motion and we will also

need the use motion come on the use motion value from where from the framer motion now we can totally do that so the first thing that I want to do is I want to Define my scale motion value so I'll just give it the name of like uh scale And it's going to be equals to the Ed motion value and the initial value I'm going to specify zero today because if I specify zero value we would not be able to see anything so I want to specify the motion value of one today so that we

would be able to see something and now I'm going to also change that to motion. D and inside this de you know I'm going to say like how me or something like that and now let me just style that bit so I'll use like class name ping all Around will be set to four background totally blue of 500 text toally white and rounded now let me save my file and here you can see we now getting our boring button but now I'm going to make a few changes today on how star we going to be

firing this function which is the arrow function and we're going to be getting the scale. getet value and then we have to specify like 0.2 in there okay so now let me just save my file not get but set God damn it this is how we Going to be setting this now I'm going to also proide the on how end and here we also have to specify the arrow function and on this Arrow function we are going to be using the scale and then setting a new value today so I'll just provide like one today

and I'm going to also render my scale inside this this style so I'll use like uh scale right here s file and now if I hold over there so it's going to bump it up and now if I leave the mouse so it's just going to Throw it back here you can see this is not looking that much cool but yeah we are achieving this animation by using the motion value from frame or motion next we have to create a spring animated position so create a box that spring to a new position when we click

on it and to achieve there we're going to be using the use motion value hook the first thing that we have to do is that we have to create a motion. d that can be clicked to move to a new position we can Use the use motion value for controlling the X and also the Y position and animate the box to a new position with the spring effect so you know what let's just start working on there I'm going to create this new file with the name of spring animated position. TSX and I'll use my

RFC inside there go to the app commment this line out and register there right in here like so now let me go in there and the first thing that we would need is the motion and obviously We would need the use motion value hook from where from the frame or motion now inside there we're going to be defining the x value and X going to be equals to the used motion value and the initial value will be set to zero I'm going to also specify that for the Y AIS as well and now we have

to change this D to the motion do or you know we're not going to be changing this div but we are going to be defining yet another div inside there so I'll use like motion. div and close There I'm going to also specify the class name of with will be set to 32 height will also be set to 32 and background holy blue 500 only rounded and I'm going to say like click me save my file and we are now getting this amazing box once again now let me render the X and Y values by

using the style so I'll provide the x value will be set to this x motion value and also we are going to be setting the y-axis value to this motion value as well and now let me Attach the on click event hander so when somebody clicks on there we are going to be moving the box so how are we going to be doing there this is how we are going to be doing there so I'll just create a new function with the name of uh move box and inside this function we are going to be

getting the x value then we can use the set method and now we need a random position so I'll use like m. random and then I'm going to just multiply there by I don't know maybe 300 I guess 300 would be fine I'm going to also duplicate that and change that to the y- AIS as well and this is how we going to be getting a random number we're going to be getting a random position once we click on that box if I click on there it's going to move it to the bottom if I

click on there so it's going to move it right here anytime I clicked on it so yeah this is also something that we achiev by using the use motion value that's also looking Cool so now let's start working on the next one what we have to do next we have to create a dynamic rotation so create a component that rotates based on motion value r a motion. d that rotates when the button is clipped and use the use motion value to track the rotation angle animate the rotation of the Box based on the motion value

now let's start working on there I'm going to go in there and Define my Dynamic rotation. TSX file now I'll use my RFC inside there go to the App comment this line out and render there right in here just like that I'm going to go into this component and the first thing that I would do is that I need the motion and also the use motion value from where from the frame and motion next we have to Define our rotation so I'll use the cons rotation it's going to be equals to this use motion value

and the initial value I'm going to set there to zero now let me just remove and change that to the Motion. D and here I'm going to provide the classes all used like with will be set to 32 and that same exactly the same classes I'll use like background of blue 500 totally round it and now it's going to say like click me once again say our file I'm going to render the rotation so I'll use like style and we have to set that to rotate and rotate will be set to this rotation which is

coming from this uh you know what I'm going to copy the name of this rotation I mean like rotate And we know no longer have to specify this rotation now let me save my file and I'm going to also attach the on click event hand let's all use like on click and we have to specify the roted Box function inside there and let's just create this function so I'll use like con roted box and then we have to call this function we have to use the rotate we have to use the set method on there

here we're going to be using the rotate once again and then the dotk value so It's going to gives us that new value then we have to add like 45 to there 45 like so so now let me save my file and now if I click on there here you can see it's going to start rotating ah what the hell was there but yeah we are now getting them by using the use motion video and it is not looking that impressive to be honest but here we are achieving something like this is just a practice

of use motion value we are now working with the motion values we are Not making some amazing animation which we will in this course but yeah that was amazing uh practice about the use motion value now very quickly we have to change all of their use motion value use the use spring animation so I'm going to copy the name of that and change that right here sa my file and test this out so now if I just refresh there still we are now getting this amazing animation okay that's super bouncy super duper bouncy but now

if I change something Inside there like you know what I'm going to change this this text white and here you can see we are still getting that same result but now we are getting that spring animation I'm going to go there comment this line up uncomment there save this file go in there once again and change there to the US spring okay us spring sa our file now if I just H over there it's going to gives us that springy animation cool I'm going to also comment that one out and uncomment this One go in

there and change both of them to the use spring animation so my file and now if I click on there here you can see it's going to move there right here but that is smooth animation so if I click on that that is looking super cool I'm going to go to my app and comment that one out uncomment the dynamic rotation go there and change and change that to the use spring this our file once again if I click on there it's going to rotate there but it's going to Also apply the spring animation to

that so that's also looking cool and that was the US spring animation challenge or practice to be precise welcome to the while in view prop challenge or exercises or practice whatever you want to call there so in this one we are going to be building amazing stuff so the first thing that we are going to be doing is that we're going to be defining the Stagger fed in and slide in then we're going to be creating a card flip Animation after the complex timeline animation and finally interactive H and in view animation so let's just

start from the first one which is a stagger fed and slide animation so what we have to do we have to create a list of items that feds and slide in staggered when they move into the view what do we have to do we have to create an array of items to display there then we have to use the motion. for the list and motion. for each item finally we have to Implement the SAG animation by using the variance and the transition prop so now let's just start working on there I'm going to go ahead

and Define my component folder and inside there we're going to be defining our staggered list. TSX file and now let's just use our rafc inside there go to our app and register this component right in here just like that and we are now getting the Stagger animation and now I'm going to also provide a bit of classes to this one so I'll use like class name and right will be set to 150 rim and then I'm going to provide the flex and justify will be set to Center and items will also be set to center

background will be set to 0 d10 17 and close there I'm going to save my file test this out so we are not even able to see something because we are now providing a lot of height today and now you'll be able to see that stagger list I'm going to also change the color of That totally white and now that's looking better let's go to the Stagger animation so the first thing that we have to do is that obviously we have to import the motion from where from the framer motion now inside there we have

to define the items I'll use like items and can be equals to like item one and then I'm going to proide like item two item three and then we have to specify the item four finally we have to provide our item five inside there here we have To remove the and change the to the motion. and inside this motion. first of all I'm going to provide the class names it's going to be set to flex and flex will be set to column and items will set to Center come on item Center and now inside this

UL we have to itate over through all of our items so I'll use like items. map we need the item we also need the index inside there and inside this one we're going to be using the motion. not just a motion but Li and Close there and here we have to just render our items inside there I'm going to save this file the next thing that we have to do is that we have to create our variants so I'm going to go ahead and Define my list variants and it's going to be equals to this

object you have to specify the hidden prop and it's going to be set to opacity of zero and I'm going to just duplicate the sign of code and change that to visible and change the opacity of that to one now we have To use this list variant inside this UL so I'm going to hit enter right here and provide my variants and for these variants we're going to be using the list variant I'm going to also provide the initial State and for the initial state is going to be set to hien and then we have

to provide the while come on the while in view when it is in view then you want to set there to visible like so that's to done I'm going to also provide the transition today so for this Transition we have to use the tager children and set the transition to 0.3 I'm going to also animate each of these allies so I'll use like first of all we have to provide the key and key will be set to the index we also have to provide a bit of classes today like pound will be set to totally

blue 500 pairing all around will be set to four text will be set totally wide Mar for the Y AIS will be set to two totally rounded large I'm going to say this file and provide my Initial State and for this initial State what we have to do we have to provide the opacity and opacity will be set to zero and on the y- axis we want to set that to 20 while our item is in view so I'll use like while in View and in this situation we're going to be providing the opacity and

opacity will be set to one and the y- AIS will be set to zero I'm going to also provide a transition come on transition and for this transition we're going to be setting That to a duration of 0.5 seconds now let me just save my file so you would not able to see that now let me just refresh there and if I scroll down Watch What Happens and bang bang bang bang bang you're now getting that animation that is looking super cool and watch what happened like initially that's going to be set to Hidden but

now as soon as I scroll there each of the items are now coming up very smoothly and we're now providing this amazing Transition to there so yeah you can totally change the colors off there you can totally change whatever you want to change inside there but in my case the Stager fed in is done next we have to create a flipping animation or card flip animation so here are the step create a card component with the front and also the back side and then we have to use the use motion I like use while in

view drop to animate the rotation along with the y-axis and you can either use the Tman CSS or just use a Pure CSS for them time to Define our flipping card so let's just use our card. flip I mean like card flip. TSX and Define my rafc inside there go to the app comment this line out and here we have to render our component like so okay so I'm going to go in there the first thing that I want to use I want to start from uh by importing the motion so I'll use like import

motion from where from the frame or motion I'm going to save this file And now I'm going to remove that from here and provide my class name so I'll use like perspective 1,000 persective 1,000 and withth will be set to 64 and height will also be set to 6 four inside there we have to Define our motion. Dev and close them and inside this motion Dev we have to Define our class with the name of absolute come on absolute and also width will be set to totally full height will also be set to totally full

and we have to provide the background of Totally blue 500 x will be set to totally white and we have to provide the flex and items will be set to Center justify will be Center and totally rounded so I'll use like rounded and save my file okay so here I'm going to s like front side now I'm going to duplicate there and change that to the back side okaye I'll use like back like so but I'm going to also specify the animate so I'll use like on animate come on we have to also change this

one to The motion. D so I'll use like motion. d and here we have to specify the animate prop and on the animate prop we're going to be using the y axis and we have to change the to 180° now we have to specify our motion values so what I'm going to do is that I'm going to hide this one and what the hell am I doing comment that I'm like hide that I'm going to provide a bit of classes to this div so it's going to be set to relative with will be set to

full And height will also be set to full or screen whatever you want to call it now if i s my file here you can see we now getting these dos but they are not looking that cool so what I'm going to do is that I'm going to specify the initial and all of that states so I'll use like initial and for the initial State you want to rotate the Y AIS all use like rotate on the y- AIS and set that to zero while this is in view then you want to change the rotation

of the Y- axis to 180° then we have to also specify the transition and for this transition we have to provide the duration of 0.6 seconds I'm going to also use the style and provide the perspective to there so I'll use like transform style uh come on transform style I'm going to choose there and set there to preserve 3D and I just realized that I cannot do the animation right here so instead I'm going to have to use the style and Provide my transform property and change that to the rotate on the Y AIS and

change that to 180° like so let me just close there sa my file now if I refresh then and go to the bottom and Watch What Happens so we are now getting this flipping animation go to the top we are now getting that back first of all we are going to be getting the front then we are going to be getting that back if I scroll to the top still we are now getting the that Flipping card animation and I guess you've seen that in a lot of websites but I cannot just give you a

quick example of that because I'm going to have to do a lot of research for them but you get the idea now we are getting this amazing animation or amazing card flipper okay so next we have to Define our timeline animation so what do we have to do we have to create a complex timeline animation create a sequence of Animation that occurs when the section Comes into the view including the rotation scaling and also the fairing so what do we have to do we have to set up a multiple element that will animate in a

sequence then we can use the variant for the complex animation like we Define the rotation scaling and also the feding and we can control the animation by using these transition properties so let's just start working on there I'm going to go ahead and Define my component with the name of timeline Animation. TSX and I'm going to be using the rafc inside there go to the app come this line out and Define my timeline animation like so and let's start working on there the first thing I would need is the motion so I'll use like motion

from frame and motion so I'll use like frame or motion like so next we have to change that to the motion. D so I'll use like motion. div and inside there we're going to be defining or you know what I'm going to use like one two Three like so and we're going to be itating over through there so I'll provide a map I mean like item inside there and now we have to Define our motion. div once again so I'll use like motion. div and close that right here I'm going to also provide the key

and key will be set to this item and I'm going to also put the class name and set there to background totally purple of 500 and margin for the left will be set to two rims I'm going to also provide a Pairing all around will be set to four x will be set to totally wide margin for the Y AIS will be set to two rounded totally large so this file and now we have to render and now we have to render our items right here all used like item next we have to Define our

variant all used like cons item variance this going to be set to this object and we have to provide the hiden prop and on the hiden prop we're going to be changing not the MD opacity but just the opacity set that To zero to the scaling so scale will be set to scale will be set to 0.5 and rotation will be set to 180° I'm going to duplicate this line of code and change that to visible and the opacity will be set to one the scaling will be set to one and the rotation will be

set to zero now I'm going to copy the name of there and use there right here for each item so I'll use like variants and here we have to specify the items variant now I'm going to go to the top And also and provide my animation and stuff so I'll use like Flex and items will be set to totally Center and now here I'm going to hit enter a few times and for the initial State we're going to be providing a head instead and while this is in view then we're going to be setting there

to visible now underneath that let's us also Pro a transition and the transition will be set to stagger children and set it to 0.5 I'm going to save this file and now if I just refresh This so 1 2 3 that's cool and everything but now let me just refresh there once again and now let me scroll down so animation will start right here just like that let me try that once again that's an amazing animation okay yeah I know that's simple but still that's an amazing animation and a creative want to be honest let's

create the final one which is a interactive how and in view animation so create a grid of card that scale and Changes the color when we H over there and animate them when they are in the view so what we have to do we have to create a grid of layout card then we can use the while in view Pro for the entrance of the animation and we can provide the how effect by using a TN CSS in the framer motion so you know what let's just start working on that I'm going to go ahead

and create a component with the name of interactive cards. TSX not TSD so something like that let's just create this component and go to our app and Define the right here so I'll just remove the creative or interactive animated cards let's just go to there the first thing that we would need is the motion from where from the frer motion next you have to create our grid so I'll provide a class names and the class will be set to grade and gr columns will be set to two Gap will be set to four inside there

we have to Create a few items like 1 2 3 4 now we have to over through there so I'll use like only the item we don't need the index or yeah you know what I'm going to also specify the index right here and inside there we're going to be using our motion. div let's just use our motion. div and close or you know we're not going to be closing there like this we're going to be closing there like so so I'm going to use like H3 and I will say like card and render my

items inside There I'm going to also provide the class name of text to Excel and save my file this is how that looks like so we now getting card 1 2 3 and four I'm going to also proide a bit of classes to this so I'll use like uh background blue of 500 and piring all around will be set to six text will be set totally white and text will be set to Center and we also have to make it totally rounded large s file and now we are getting these cards right here I'll also

provide The key so for this key we have to provide our index sem my file and next we have to provide our initial St so initially my animation will start like this so we have to provide the scale and scale will be set to 0.8 and while they are in the view so in this situation we're going to be scaling it up to one while somebody how over there so in that case we going to be scaling there to 1.1 and we are going to be also changing its background color to toally three come on

3B at at2 F6 like so and I'm going to also for a bit of transition so for this transition duration will be set to 0.3 seconds now let me save my file and now if I just refreshed there here you can see they are now appearing if I have my mouse over today they're also looking cool but now if I scroll up and now if I scroll down here you can see we're now getting this smooth kind of a yeah we are getting this animation but we can totally change the duration to like I Don't

know maybe 3 or 4 seconds rather now let's just refresh that and scroll down so it's going to take a while to complete this animation I'm going to change that to like maybe 1 second complete one second let's go to the top and when they are in the view so now we are getting these items right here so yeah that was our while in view Pro practice welcome to the projects module so in this one we're going to be building a lot of projects so we're Going to be starting from the very Basics project and

then we're going to be jumping into a bit Advanced so what I'm going to do is that I'm going to open my terminal right here and I'm going to make it a bit bigger so you guys can see it a bit clear like so I'm going to use npm create with at latest and hit enter right here I'm going to give it the name of like uh FM like for the frame or motion projects or something like that I'm going to choose Reactjs and typescript let's just go into the FM projects and use npmi to

install all of the packages now that's successfully done I'm going to go ahead and go to the framer motion now a framer but we want to go into the framer Dash motion okay so we are now inside the framer motion I'm going to click on the getting started I'm going to copy this script and place it right here inside the terminal whil it's doing that I'm going to also go ahead and Cy the tman CSS click on the getting started and then I'm going to choose the framework and guides go to the weed and copy

all of them place it right here so it's going to install the tailin CSS and I'm going to also initialize the only hitting enter okay so now let me just hit enter so it's going to also initialize my CSS I'm going to copy all of that content and now let me open that in my vs code next I'm going to go into the where is my. config file and I'm Going to replace it with this new content I'm going to also use npm run I'm going to do that in a few second but first of

all we have to remove the public folder also the SS folder the f. CSS file and remove every single thing from the f. TSX and replace it with the rafc and remove every single thing from there as well and I'm going to copy all of that component Plus right here and then we have to just test this out so I'll go ahead and go to my app and Replace that with this new content I'm going to use npm run Dev to run there on my Local Host 5173 yep everything is working the way we expect

him to work I'm going to also quickly go ahead and go to the package.json and check for there we go we are now using a frame motion which means like this is the correct version of the frame motion the first project that we are going to be building will be super basic project so what are we Building we are building you guessed it first of all we have to create a component folder and we are now building a scroll indicator and now let me just create a TSX file and I'm going to be using the

rafc inside there go to my app once again and register there right in here so I'll just remove it and replace it with the div and I'm going to be rendering my scroll indicator and close there check this out so now we are getting their scroll indicator which is Looking cool so let's just start working on them I'm going to go back and the first thing that we would need is obviously we will need the motion from the framer motion come on from the framer motion I'm going to save this file next we have to

provide a bit of height to this so I'll just provide like class name and the height will be set to 200 viewport height and also the Ping will be set to 20 pixel I'm going to save this file and inside there we have To create first of all a red line okay or indicator line whatever you want to call there so to create that I'm going to only use the motion. D come on we have to use our motion. div and I'm going to close them like so I'm going to also put a bit of

styling to this so it's going to be set to fix and the top will be set to zero left will also be set to zero right will be set to five pixel you can increase and decrease there if you want it to and then we're Going to be changing the color of that like fed 500 like so I'm going to save this file and go back check this out so we are not able to see anything that's because we are now setting the Top Value to zero and also the left value to zero so that's

why we cannot see something but we will see that in a few seconds next we have to create a random text so if you want to get a lot of text first of all we going to be creating a DAT with the class of margin for the top That's going to be an arbitrary class so I'm going to be providing like 50 pixel to there and inside this de I'm going to be using like my array so I'll use like dot dot dot array and then here I'm going to provide like 100 item now you

want itate over through all of that 100 item we don't need the data we only need the index okay so inside there I'm going to be using my paragraph and I'm going to close there and I'll just say like LM EP or something like that and here we Also have to specify margin for the top of 20 pixel and here for the key I'm going to also specify the index right here so if I save that now we are getting this UI and we are also getting a lot of text which we can scroll through

finally we have to work on our indicator so to work on that so the first thing that we would need is the scroll on the y- axis progress from where you guessed it from the use scroll function so now we are going to be Getting there and this should be God damn it scroll y progress okay so we're going to need them next we have to use our use transform for the line width so I'll use like con line width and that's going to be set to the use transform hook not a St but transform

hook for the initial value we are going to be providing this motion value which is a scroll y progress and I'm going to specify the comma and what we have to do I'm going to provide both of these stats On the initial St when when it start from zero you want to set the width to be 0% but when it reaches to the one we want to change that to 100% as simple as that okay and now we have to render the inside our Dev so what I'm going to do is that I'm going to

be using my style because now in this case we cannot use the animated prop and for the width I'm going to set there to the line width I'm going to also provide a bit of transition to this so I'll just use like Um transition and for this transition it's going to be set to like WID and zero .1 second and is let me just save my file check this out so now if I scroll there I want you to notice this area right here so as soon as I scroll there it will scroll with me

and this is a lot of text so here you can see we are now getting this amazing indicator and you can totally change the shape of there you can totally change the color of there you can do a lot sort of stuff With there but yeah I am done with this basic scroll indicator project and that was our basic first project welcome to the basics project number two so in this this one we're going to be creating amazing lower so how are we going to be doing that first of all we have to create our

components folder and inside that we have to Define our loader. TSX file and I'm going to be using my rafc and render there right here to the Dom like so check this out we are now Getting a loer which is looking cool so first thing first if I can get my cursor today I'm going to have to grab the motion from where you guessed it and then we have to provide or classes to it's all used like legs and also items will be set to to Center justify will also be set to Center and height

will be set to totally screen so that we can set every single thing totally on the center of the view next we have to Define our div so I'll Define my div and I'm going To also put a of classes today it's going to be set to relative and the width will be set to 16 the height will also be set to 16 border all around will be set to four and Border for the top will be set to four and Border color will be set to Blue 500 border will be totally solid rounded so

now let me save my file and check this out so now we are getting this amazing circle at the middle of the viewport next we have to Define another div so I'll use like div Once again I'm going to also specify classes to it so it's going to be set to Absolute and here we're going to be using inset of zero border come on Border will be set to four border color will be set to Blue 300 and Border totally solid make it totally rounded for and save my file let's just test this out we

now getting this inner border inside there finally we have to animate there and to animate there we're going to be converting our D to the Motion div and also convert this D to the motion. D like so and now we can specify our animation inside there so I'll use like animate and on the animate we're going to be rotating there let's just use the rotate and rotate come on r o t t e rotate there on the 360° I'm going to also ify transitions today for the transition we're going to be providing a duration and

duration will be set to one and it's going to repeat infinitely I'm going to also Proide the eing and eing will be set to linear s file and now it's not going to do anything for now because we also have to change this one to the motion. div and also specify animation for there so I'll use like motion. div now we can specify our animation inside their Dev only use animate and on this animate I'm going to provide the opacity and on this opacity we're going to be using our key frame so start from zero

I mean like start from one and then go to 0.5 and Then go to one back okay so we are going to be also copying this transition now let me just place it right here say our file and let me just refresh there nothing is happening I don't know why oh I forgot to include the transparency so I'll use like style and here for the style we're going to be setting the Border top color we have to make that as a transparent so now if I just provide this sem my file and now we are

getting this amazing ler right here so we only Have to write this amount of code like we have to provide the animate and set there to like 360° and then we can specify the transition and duration stuff like that and we have to set the Border top color to transparent it's going to gives us this amazing loader animation right here welcome to the project number three so in this one we're going to be creating our dragable card and trust me this is not going to be just a simple dragable Card okay so let's just work

on there first of all we're going to create our components components folder and inside there we're going to be creating our dragable card. TSX file not TXS file just a TSS TSX and I'm going to be defining my RFC inside there go to our app component and register there right in here not like this but we're going to be closing there because here we're going to be also specifying a text inside there so I'll use like card one And then I'm going to save there I'm going to duplicate there a few times so now let's

just change that to card two and card three we're going to be also providing different styles today so for the styling we're going to be specifying something called the linear gradient okay so I'll use like background and I'm going to provide a linear gradient for all of these component so I'll use like uh linear and then g r a d i e n t and close there so for the first one 135° and then we're going to be providing this color like f93 FB and starting from the 0% now we have to specify the last

color so I'll use like f55 76 and then C and we want to show that totally 100% that's going to be the first gradient now for the second one uh we're going to be providing 135 degree once again just use our degree and we are going to be using this color like 5 e e 7 DF it's going to start from the 0% and then we want to Use this color like B 490 come on 90 and then CA and we will show them 100% and now we have to provide like 135° once again and

provide this color like FF 9 a 9 e and starting from the zero then provide like f e c f e f 99% like that I'm going to save this file and yeah this is how we're going to be providing our background color of linear gradient today and now let's start working on our dragable component the first thing that we would need is our uh Motion so will use like motion come on motion from where from the frame or motion and inside there we're going to be restructuring all of the children like this text which

you can see right here like this card two card three and so on and so forth and we would also destructure The Styling which we are now providing right here like this style which will have the background of this linear gradient okay so now we are destructuring there but we are going to Be also creating an interface for this so I'll use like uh interface this is just a typescript stuff if you don't know typescript scpt you don't even have to worry about that and I'm going to say like dragable card prop okay so I'll

just create the word here and I'm going to provide the children and children will be coming from the react node and then come on let's just grab that from the react node and then we're going to be Using the style property and we shouldn't have to put the comma in there and the style will be a CSS properties like that now I'm going to copy the name of them and annotate that right here just like that now we have to use the inside or UI so I'll just change that to like motion. div and here

I'm going to render that children so I'll use like uh children like so and inside there let's ISRO our class name so I'll use like call rounded 2XL and Shadow will be set To large pairing all around will be set to five margin four all around will be set to two width will be set to 52 and height will be set to 72 in this case this is use our 72 flex and items will be set to Center justify we also so will be set to Center God damn it I can't even type today and

text will be set to White text will be set to extra large so these are going to be forward styling now here we're going to be also rendering our background gradient which We are now specifying right here so we have to use a style prop for there and then we going to be getting that style and we have to paste it right here and now if I sa my file this is what we are getting right now we are now getting the card one two and three and they're looking cool I'm going to also make

them Center so I'm going to go into my a once again and here for this Dev we going to be providing a class name it's going to be set to flex and justify will be set To Center and also items will be set to Center and height will be set to 100 V close there and I'm going to also provide a background color of F3 F3 F3 close there and here you can see we are now getting our cards but they are not dragable so now let's just make them dragable and to make them dragable

they are super amazing to make dragable so I'll use like drag and I'm going to also provide a constraints for them and for this constraint we're going to be Providing a left value and it's going to be set to minus 200 I'm going to also provide the right value and it's going to be set to positive 200 and the Top Value will be set to minus 200 once again and provide the bottom value of 200 so now let me just save my file and this is how they looks like but they are not looking still

that cool I also want to provide the while how animation so while somebody how over there so we want to do something with them so I'm going To provide the while power and here we have to provide the scaling and scaling will be set to 1.1 we just only want to increase that by 1% let me test this out so let's just refresh there if I hover over them yep they are looking cool but now I'm going to also provide the wild tap when somebody Taps over there so when I tap [Music] them so while

tap and on the while tap I'm going to provide the scaling of 0 Point was trying to be some goddamn per so you know if I just H over there and click on there now getting this animation and that's looking super cool and yeah you can proide transitions if you want to Sol just right like transitions of duration 2 seconds and now if I hover over there it's going to gives us a slow transition let me change there to one and here you can see still they are looking cool but this is super slow I'm

Going to also change there to like 0.6 or something like that let me H over there and yeah they are now looking a bit cool in my opinion that was our card or dragable card project in the framer motion welcome to the project number four so in this one we're going to be building amazing Carousel so I'm going to go ahead and create a components folder and inside there I'm going to define the carousel TSX file I'll use the rafc save this file and now register The inside our app component like so so I'm going

to save this file and test this out so here you can see we now getting the carousel but this is not something that we want so I'm going to go ahead and make that tot l so I'll use like Flex and justify will be set to Center and items will also be set to totally Center and height will be set to totally screen and here you can see we now getting a carel which is now perfectly at the center of the viewport Next I'm going to go into the carel and the first thing that I

want to do is that I want to import the motion from where from the framer motion next we also have to Define our images so here are all of the images that I'm going to be using inside this project so if you want to use these same images you are more than welcome to use them or if you want to use your own one you are still more than welcome to use your own one if you wanted to now I'm going to go ahead And go to the index. CSS file and place a bit of

styling right here so the first thing that I'm going to do is that I'm going to change the background color to totally black or the button the background color will be set to blank border will be set to none pairing 10 pixel cursor position top will be set to 50 transform property will be set to translate on the y axis ofus 50% Z index will be set to 10 color will be set to totally white and font size will be set To 1 .5 frame and when somebody how over there so we are going to

be changing its color to like the opacity of that so you know what this is how it looks like right here currently we cannot see anything because we don't have any content inside there so now let me go ahead and start working on there so the first thing that I'm going to do is that I'm going to Define my stats so I'll use like first of all the current index and it's going to be set to the Set current Index and now we are going to be using our use State and the initial value will

be set to zero I'm going to also Define for the the Howard state so I'll use like is Howard and then set is it's going to be equals to the U State and the initial value will be set to false I'm going to also create one more for the thumbnail so I'll use like show thumbnails and then set show thumbnails it's going to be equals to the US St and the initial value will be set to false So that's cool now let me go ahead and go to the UI and remove the scel from there

and here I'm going to provide a bit of styling today so I'll use like class name relative and with will be set to 50% and also totally rounded large overflow will be also set to here and inside this div we're going to be first of all defining our clickable thumbnails so I'll just write like uh clickable come on clickable thumbnails just for myself I'm going to use the motion. D Because we're going to be animating there so now let me renter the div in this div we'll have a few classes so we use like the

class name and we are going to be rendering all of that classes totally dynamically so that's why I'm using this template later Al so use like Flex margin for the bottom will be set to two RM and transition uh come on this not transition all and transition will be set to opacity and duration will be set To 300 now we are going to be rendering our thumbnail totally dynamically so if show thumbnail or is H if that is the case so then we are going to be changing the opacity to 100 but if that's not

the case so what we have to do we have to use the opacity of zero inside there okay that's also done now here here inside this D we're going to be iterating over through all of their images that we are now currently setting okay so now let me just provide there Right here and inside there I can use the map method on there and I can get the image and also the image index so inside there we also have to Define our div I'm going to duplicate this line of code and close there and here

we have to specify the key and the key will be set to this index so I'm going to copy the name of there and place it right here and I'm going to also attach a lot of classes today and once again we are going to be using a dynamic class so so That's why we are now using these template literals so I'll use like withth will be set to 10 rim and also height will be set to five rim and then outside from them margin for the top will be set to two rims I'm going

to also set the cursor to to pointer and rounded large overflow will be set to totally hidden border all around will be set to two now let me just save my file and that's going to be it but I'm going to also render my content dynamically so If our current index is equal to this index let me just write triple equals to if there is set to this specific image index so in this situation we want to provide the Border blue of 500 but if that's not the case we're going to be changing the border

to totally transparent so now let me just save there and inside this div I'm going to render my image so I'll use like the IMG tag also the SRC for the source and for the source we are going to be rendering That image which we are now iterating over through okay so we are going to be rendering all of that images and I'm going to also provide the alternative text for the so I'll use like alt and for this alt I'm going to say like uh I don't know thumbnail or something like that and then

index come on index + one I'm going to also Pro a bit of classes today so width will be set to totally full and height will also be set to totally full object toly cover and come On cover and close there like so so I'm going to save my file and now let me just refresh there we are now getting our images we cannot see anything and the reason is we are now setting there to false so now if I set the true come on let's just write a true and sem my file so now

we are getting these images I can also change that to like maybe two or something like that and now if I just refresh there we would be able to see this image selected right here okay so If I change it to I don't know maybe one and now if I save my file so it's going to select this image right here so which is something yeah that we want okay so that's our basic thumbnail images and now let's work on the real images so what I'm going to do is that I'm going to comment or

hide there from the UI and next we're going to rendering the actual uh come on actual images right here so now underneath them they're going to be creating our div and this div will have The class name of leg and also inside this div what do you want to do you want to Define another div so for this div we are going to beating over through all of our item so I'll use like the images once again come on that images and now let's just iterate over through this I'll use the map method and proide

the image and also uh the index itself so inside there we're going to be using a div and now just duplicate that and change that to a d one more time and Here I'm going to have to specify the index like so and also I'm going to provide the class name of minimum height will be set to totally okay so I mean like minimum width will be set to totally full and here we have to also render our image so I'm going to also provide the SRC and for the source we going to be providing

the image and for the alternative text I'm going to say like uh slide come on slide and here we have to render our index + one and That's toally done I'm going to close there but I'm going to also provide the class name of with will be set to totally full save my file and we are now getting these images which are not looking that great to be honest but yeah we are going somewhere and now we are getting these images you know what I'm going to also go ahead and provide the class name of

flex to this one now if I save my file and or UI is looking more than great right here so we are now Getting all of their images and by the way you can also definitely go ahead and change change these images to something else that you prefer but in my case that's going to be a I'm going to also hide there and now underneath then we are going to be providing our buttons so let's just write like uh render buttons or something like that so what I'm going to do is that I'm going to

Define my button and this button will have a lot of classes but I'm going to provide my Left eye conso used like the HTML entity which is to use the end and then HH 1094 this is a special HTML entity and I also forgot to close this so we're going to be also closing there now if I save my file so here you can see we are now getting this left or right entity or whatever you want to call I'm talking about this icon right here so this is basically something called the HTML entity if

you guys don't know about you can definitely go ahead and check out my HTML and CSS course if you prefer that but I'm going to provide the class names and these class names will be totally Dynamic so I'm going to use like the absolute and the left value will be set to four transform and here not translate but transform and here we also have to set the translate to the Y AIS so I'll use like y AIS on one O2 and then pairing all around will be set to two we're going to be also providing

a bit of transition today so let's just use Our transition and the transition will be set to the opacity and I'm going to also provide the duration of 300 in this case and now we have to render our content totally dynamically so is howed so in that situation we going to be providing the opacity of 100 but if that's not the case we're going to be providing the opacity of zero today so now let me show you that here you can see nothing is happening but now if I H over there oh you cannot see

that Because we also have to change the set I forgot to do that so I'm going to duplicate this line of code like so and here I'm going to also change the HTML entity to something else so I'll use like um instead of providing a four I'm going to change that to five and this is how it looks like we cannot see that but you will see that very soon so what I'm going to do is that I'm going to take care of the UI and also the starts I'm going to hide there so let's

start from The thumbnails I'm going to expand there and here we're going to be attaching the what do we call it or event handler so I'll use like the key and the key will be set to the index I'm going to also attach the on click event handler when somebody clicks on there we're going to be firing this function which is a uh selected slide and here we have to specify our index inside there now let me go ahead and create this selected slide so I'll use like con selected Slide it's going to take a

index and index will be set to a number we have to annotate as a number for our typescript and now we are going to be using like Set current index index and it's going to be set to that index which we are now getting and we also have to provide like uh set show thumbnail and we have to set that to true and also I'm going to be using a Windows object and obviously giv this a Time script error so I'll use like Windows set time out come on uh set Time out and here we

have to specify oret show thumbnail and we're going to be setting that to false and the duration will be set to 5 seconds so I'm going to save this file I'm going to copy the name of there and provide there right here in a selected we're going to be changing that to a select oh and what the hell am I doing I'm going to have to cut that from there and put that right here like so so now let me just save my file and now if I just refresh there Here you can see we

now getting the images but now if I click on this one it's going to select that one if I remove my cursor from there and here you can see that images will disappear so if I H them back and click on there here you can see it's going to make it appear once again so that's also cool but now let's just take care of these images so like whenever I choose some image from there we also want to update that image first thing first I'm going to hide that And I'm going to go ahead and

go to the actual images and expand this one now let me attach my on Mouse enter and here we have to set the two the said is Howard and that's going to be set to true and now I'm going to also proide the on Mouse leave and here it's going to be set to come on what the hell it's going to be set to the is Howard and that's going to be set to false in this case so I'm going to save my file inside this div I'm going to make that as a Motion div

so I'll just change that to motion. div and I'm going to also change this one to the motion. div okay so I'll just use like motion. div and let is sa there we are getting some sort of error and we did import it there I don't know why we are getting this error what the hell we now closing the here you know I'm going to change the okay now that's looking better and now if I sa my file and test this out so here you can see we are now getting these images and now if

I H over there we're also getting these HTML entities right here which is also something that we want but I don't know why the hell we are getting these images I'm going to go to the top and you guessed it I forgot to include the N now let me just save there we are only getting this one image and I'm going to also take care of this HTML entity so let's just go to the bottom and here instead of riding a left I'm going to change there to the right and now if I Are over

there so now we are getting this amazing UI I can also choose different images if I want to but now if I click on this image what if I click on these buttons I want to change this image how can I go about doing there this is how we are going to be doing this so let's just go ahead and go to the button and attach my own click event handler on there and previous slide okay so this is going to be a function which we going to be creating in a few seconds And also

on this one we are going to be attaching the event handler and we're going to be saying like next slide okay so now let me just copy this previous one and let's just start working on that one so what I'm going to do is that I'm going to Define my previous one so I'll use like cons previous slide and inside there uh we have to Define what Set current index and inside this Set current index we're going to be providing our previous index now here What we have to do uh we have to get the

previous index and then minus1 times the images. length then we have to multiply there and we also want to get the remainder so that's why we are using this module operator so let's just use our images. length Okay so it's going to gives us a previous image so now let me just refresh there we are not going to be able to see anything in this because of this function so I'm going to also go ahead and create this function right Here up above so I'll use like cons uh next slide and inside there we're going

to be setting the current index to the previous index come on uh previous index and then here we have to use our previous index once again and then plus one now we have to use the module operator on the images. length so now if i s my file and here you can see we now getting the CI if I click on there it's going to gives us the next image right here but it is not updating this one Okay so I can also click on that one I can also click on this previous one it's

going to also update there so here you can see if I click on that one and click on the previous one okay it is not even showing nothing so to fix that issue we're going to be first of all providing our initial State and for this initial State we're going to be setting that to the xaxis of - 100% And also underneath that we going to be using the animate cross and on this animate prop we going To be changing that to this minus the current index and then times come on times 100% not th000

but just 100% And also you want to put a bit of transitions to there so I'll use like the duration and the duration will be set to one and here you can see if I just click on this image it's going to show us that image if I click on that it's going to show us this image now if I click on this one I don't know what just Happened this is some kind of a bug or something no this is cool we are now getting these images if I click on there it's going to

bring it back this is not something that I wanted let's just go ahead and figure this out so we have a previous slide and then we have a next slide I guess there is something wrong with the previous slide oh you know what I'm providing a times instead of a times we have to change that to plus sampol so now if I just refresh that we're going To be getting all of that images if I click on this one so it's going to use us the last image then the next one and then the next

one and so on and so for so yeah that was our basic Carousel by using our frame or motion welcome to the fifth project of this course so in this one we're going to be building amazing animated sidebar so what I'm going to do is that I'm going to Define my components folder and inside there we're going to be defining the sidebar. TSX File so I'll use like the rafc sa my file and registered there right here just like that I'm going to also make it totally perfectly centered so I'll use like Flex and justify

will be set to Center and also items will be set to to the center the height will be set to screen width will be full and also background cray of 950 let is say our file and this is how it looks like so what I'm going to do is that I'm going to also specify the text Of totally white and yeah this is how it looks like currently now let's get into the sidebar and start working on there the first thing I would do is that I'm going to import the motion from where from the

framer motion we're going to be also defining our state like whether our sidebar is open or close so I'll use like is open and then set is open it's going to be equals to the use St and here we have to specify the initial value of Fes today now let's get into The UI so I'll just remove them and provide the class of relative today okay so inside there we're going to be first of all defining our backdrop which we going to be doing in a few seconds but now underneath them we have to start

working on our actual sidebar content okay I'll use like sidebar content and here we can use our motion. D so I'll use like motion. and close there and inside this motion D I'm going to specify a few classes like it's going to Be set to totally fix stop will be set to zero and left will be also set to zero height will be set to totally full and width will be set to 64 come on 64 like that take around gray of 900 and text totally white shadow will be set to totally large so now

let me just save this file next we're going to be defining our variant so I'm going to go to the top and Define my sidebar variants right here so first of all provide the open St when it is open so We want to set the initial x value to zero and I'm going to also specify the opacity to one and the scaling will be also set to one so now I'm going to just put a comma and I'm going to also provide the closed one so close so when it is closed we want to set

the xais to minus 100% And also the opacity opacity will be set to zero in scaling will also be set to 0.8 so I'm going to copy the name of there and provide there right here inside Or sidebar okay so I'll use like the variants and for these variants we're going to be providing our sidebar variants now which means like I can definitely use my initial State and for the initial State we're going to be setting there to closed I can also use the animate so here what I'm going to do is that I'm going

to pass my content totally dynamically so if this is open you want to use the open St but if that's not the case you want to use the Closed state I'm going to also put the transition to this so I'll use like the transition the type will be set to one of my favorite type which is a spring and also the stiffness will be set to 300 and damping will be set to 30 now let me just save there inside there you cannot see anything but what I'm going to do I'm going to provide a

bit of content to there so I'll use like pairing all around will be set to four and inside that we have to Define our Button and this button will also have a few classes like absolute also the top will be set to four right will be set to four and Z index will be 10 so now let me just hit tab we also have to specif if I pading all around to two and background gray of 800 T toally white and round it full and on the focus we want to change the outline to totally

none and it's going to just say like uh you know what we have to render the icon first of all we have to install our Icons Library so I'm going to be using like npmi and then react icons so it's going to install that inside my project now then successfully install so use like npm run Dev now here we have to render our iomd Arrow back this I'll just rendered there and I'm going to also provide a bit of classes to it so I'll use like the height will be set to six and the width

will be also set to six so now let me just save my file and refresh there we cannot see anything That's because now our initial state is set to false so if I set that to True save my file and here you can see we now getting this sidebar with this icon so if I set that to the false once again save my file yeah it will totally make it disappear now I'm going to collapse this button and underneath this button I'm going to specify my H2 so use like H2 with the class of text

to Xcel and font will be set to totally Bard margin for the bottom will be set to four and I'll use like filters inside there you know what I'm going to go to the top and make there as a true so that we can see them and here you can see we're now getting our filters which is something that we want and now underneath this H2 what we have to do we have to once again Define our motion. D so I'll use like motion. d and close them inside this motion. D I'm going to specify

the classes of space on the Y AIS of four I'm going to also provide the the Variants I'll go to the top like so and Define my variants right here and these variants are going to be a lot of variants so I'll use like con and here we have to create our container variants and inside there first of all we are going to be providing the open State then we are going to be also providing the closed State okay so let's start from the first one which is the open state so we're going to be

using our transition come on t r a n s i t i o in And inside this transition we're going to be providing a stagger come on stagger children s a g e r children and that's going to be set to come on Stager children will be set to 0.2 and I'm going to also provide the delay between them so delay between the children it's going to be set to 0.1 and same thing we'll apply for this closed one so I'm going to copy them now let me just place it right here and instead of

providing a one I'm going to change there to zero And I guess that's going to be fine now I'm going to copy the name of there and go to the bottom and here we have to specify there right here so I'll use like variants and provide my container variants inside there so now let me just save my file and which also means that now I can use the initial State and initially my state will be set to close and on the animate we want to use like if it is open then we want to use

like the open state if that's not the case so We want to choose the closed one so now let me just save my file inside this div we are going to be defining yet another div which will be also motion. div so now let me just close them and here for this motion. div we are going to be also providing a Vari so I'm going to go to the top once again and here we have to specify our item variant so I'll use like cons item variants and inside that we have to use the open

State and for this open State we're going to be Setting the opacity to one and on the y axis is going to be set to zero and for the scale we're going to be increasing there to one now here we also have to provide for the close state so I'll use like the opacity and opacity will be set to zero on the Y AIS is going to be set to minus 20 and for the scaling we're going to be using like 0.95 I'm going to go ahead and copy the name of there and place there

right here for this de so I'll use like the Variants and here we have to specify our items variant inside there first of all I'm going to be using the H3 with the classes of text only extra large and the font will be set to semi B it's going to say like category or categories rather and here now underneath we're going to be using our ul and then Ali and for this each Ali we're going to be defining a label with the class of inline Flex and also the items will be set to Center and

margin for the top will be set to Two we're not going to be providing the HTML 4 and for the label we're going to be defining our input field with the type of checkbox so I'll use that checkbox and then we're going to be also putting a class names in the form it's going to be set to a form check box like so underneath that we also have to provide our span and it will have the margin for the left and it's going to be set to two and here we have to specify like the

option one now let me S there Check this out so here you can see we are now getting this checkbox and we are also getting these categories right here which is something that we wanted so what I'm going to do is that I'm going to duplicate there like a few time maybe three times so I'll just select this lii and I'm going to just duplicate there one time and another time so I'll just change that to like two and this one to three let me just save my file and this is how it looks like

right here now Underneath this div I'm going to collapse this div we're going to be defining yet another div so I'll use like the motion. D once again and close them and here we have to specify not the class name but the variance and we're going to be using that irem variance once again okay so inside this D we're going to be defining the H3 H3 with the class of text Excel and the font will also be set to totally semi Bard it's going to say like price range so now if I sa there test

this out so we are now getting our price range right here now underneath this hed3 we are going to be defining the input field and it's going to have the type of range and also you want to specify the minimum height and the minimum will be set to zero we also want to provide the maximum and for the maximum you're going to be setting there to like 100 and the class name will be set to full and I'm going to also put the step not stop but step and step will Be equals to 10 so

if I save them now we are getting this awful looking slider if I weren't using 10 CSS there wouldn't be cool slider but yeah we are getting this awful slider you can definitely go ahead and change that if you want it to but in my case that's going to be it so I'll just collapse that and underneath this one we have to Define yet another div so I'll use like the motion motion. D once again close them and here we have to provide Our variants once again so I'll use like the items variant and inside

there we have to define the H3 with a class of text Excel and the font will be set to semi B inside there will proide the rating s file and here you can see we now getting the rating now underneath there we're going to be using the UL and then the Ali for each Ali we're going to be providing a label and for this label we are going to be providing like in line uh come on in line flex and also The items will be set to to the center margin for the top will be

set to two inside then not HTML 4 inside this level we're going to be defining our input field with the type of radio in this case and here we have to provide the name and the name will be set to rating and the value will be set to one I'm going to also Pro the class name of like home ready you know we not going to be providing that let's just remove the class name from there sa file and yeah We are now getting or whatever you want to call that so now underneath that we

going to be also using a spin with the class of margin for the left of two it's going to say like first star and here you can see we're now getting the stars and I'm going to also duplicate this Li a few times so that star 1 2 3 4 and I guess four would be fine so I'll just change there to star two and this one to Star three this one to Star four and you know what We want to make there as a five star so I'm going to also duplicate there one more

time and change that to the star five that's all done so now let's just save our file and here you can see if I just refresh there okay we first of all have to save there if I just refresh there we are now getting this amazing looking UI and also the animation so if I just refresh there once again yeah you will see that in a few seconds so now underneath this T I'm going to collapse This T right here underneath this T we're going to be defining our button which will allows us to hide

or show that sidebar so I'll use the button with the class of absolute and also the Top Value will be set to four the left value will be also set to four the Z index will be set to 10 pairing on around will be set to two background Ray of add 100 Tex to White and round it for Focus ST we're going to be taking care of the Focus ST in a few seconds so I'll use Like the out come on outline will be set to none and for the label we're going to be providing

this level totally dynamically so if our state is open in this situation you want to show one icon but if that's not the case we want to show another icon so I'll use like IO MD and then Arrow back okay so I'll also proide the class name of it will be to set to six with will be also set to six and close them now here if that's not the case we are going to be using like The I MD Arrow forward and we also have to provide these classes like the height will be set

to six the width will be also set to to six and close there now this is how it looks like so if I click on there nothing will happen and why because we have to provide our event listener on there or attach what EV listener on there so when somebody try to click on there we going to be firing this function which is a set is open and not is open so now let me just save my File if I click on there that's gone if I click on there once again it will make it

appear I also want to make it so that if I click on this icon I want to hide there so what I'm going to do is that I'm going to go to the top and here on this icon if somebody try to click on there on clicks so we're going to be firing this function which is a set is open and not is open so now let me just save there if I click on there it's going to hide it if I click on there Once again so it's going to show there and this is

how it looks like I'm going to also take care of this backdrop so that's going to be a lot of fun but this is super simple so I'll just create a motion div and close them like so and here we have to specify our class name so use like only fix and insert will be set to zero background gray of 8 100 like so and also on the initial State it's going to be set to close and then on the animat state we can totally show There and also hide there so if this is open

like if our state is open then we want to provide the state of open to the from the variants but if that's not the case we want to set there to close St okay so we're going to be also providing a variance today I'm going to also provide this variance right here here so I'm going to go to the top and create this variant right here and this is going to be quite simple and easy so I'll use like con backdrop variant and Inside there we have to provide the open State and on this open

State we're going to be setting the opacity to opacity to 0.6 and now underneath there on the close St we want to change the opacity to totally zero okay so now we successfully provided there next I'm going to also specify the transition so I'll use like the transition and the duration will be set to 0.3 and when somebody clicks on there we're going to be setting that set is open to false now Let me just s my file now if I click on there once again it's going to hide it okay so yeah that was

our basic project time to create one of my favorite project which is called the scrollable carousel but we are going to be animating there so first of all I want to talk about this UIL folder so inside this utils folder we have this data. TS file and here you can see I have a few images which I copied from the unsplit if you care to use these images you can Totally find them in my giab repository but if you don't want to use them you can definitely use your own one if you wanted to but

yeah I'm going to be using this data for my card images so I'll just close them and now let's start working on there the first thing that I want to do is that I want to Define my components come on components folder and inside there we are going to be defining our scroll carl. TSX or use the rafc and go to my app and register this component Right in here oh my goodness and now I'm going to close there save my file let's get into the scroll level Carousel and start working on there okay I'll

use like import motion from where from the framer motion I'll sa there or you know we're not going to be using any frame or Motion in this one so yeah we are going to be using them I'm going to also go ahead and Define the card. TSX file and use my RFC inside there and import it inside the scroll car so use like import Card and from card you would also need to grab our data so I'll use like import come on import the cards from where come on cards uh from where from the let's

just go ahead and go to the top go to the UIL folder and choose this data from there now that we successfully grab all of the data we're going to be actually interacting with the Dom so for that we have to use our Target ref so I'll use like the use ref and here for the Initial value I'm going to set there to now we're going to be scrolling so which means like we would need the use scroll Hook from the framer motion I'll just grab the Y scroll from there so I'll just destructure that

from here I'm going to say like the scroll on the Y progress we only want to get there I'm going to also provide the target so I'll use like the Target and the target will be coming from the target ref okay which we are now specifying as a reference Right here next we have to Define our transform property all use like the use transform and here first of all we are going to be providing our scroll on the Y progress as a motion value and then we have to specify our initial State and also our

ending state so when our animation start from zero so we want to make the 1% but if it reaches to 1% then we want to make it - 95% just like that I'm going to save This file and I'm going to also store that in the X variable now let me go ahead and go to this UI and remove that from here and I'm going to put the class names and it's going to be set to relative the height will be set to 300 pH like the viewport height and background will be set to neutral

900 like so and for the ref we are going to be providing our Target Come On Target ref inside there now inside this div we're going to be defining yet Another div with a class of sticky the top will be set to zero legs and height will be also set to screen item toly Center and overlow will be hidden okay so inside this D we're going to be defining our motion. D and close there I'm going to also the class name of flex and the gapping will be set to four and for The Styling let

me just put the style right here we're going to be using this transform value which is now set to this X so I'm going to copy there and place it right here inside this motion da we're going to beating over through all of that card so I'll use like cards. map and here we have to specify each card and now inside there let's just render our card component which we just created it's going to take the prop of card and now let me just close there you're Now using this cards you know rating over through

all of that cards and then we are creating a separate card inside There as you can see and we're now passing that each image as a card prop to there so now let me go ahead and go to the card and start working on this card so what I'm going to do is that I'm going to go to the top and here we are going to be destructuring the cards or was there a cards or yeah it's just a card so I'm going to just destructure them and annotate as a string maybe or you know

what card then string so now let me just save my file and we have to Use the I'll remove this card from here and I'm going to also provide a bit of class or you know what we're going to be providing the key I'm going to provide the key right here so key or index or idx would be fine so for the idx we're going to be passing this index which will be coming from this cardr Index right here so I'll just also destructure this index let's just destructure them and I'm going to also annotate

that right here so I'll use like ID IDK it Should be idx God damn it idx come on idx and now let me just copy the name of there and destructure the idx instead and also this idx this will be a number so now let me just save there this is how we going to be annotating there but I'm going to also specify this idx right here that's totally done I'm going to also put the class names and it's going to be set to group and also relative with will be set to 10 Rim come

on 10 rim and I'm going to also put the Height of 10 Rim overflow will be set to totally hidden and the background will be set to neutral 200 inside this div we're going to be defining another div and here we're going to be rendering our image so I'll use like The Styling right here and for these styling I'll provide the background image first of all and it's going to be set to this URL this is for URL and close there and here we're going to be rendering our image only dynamically so I'll use like

card. URL And now let me just save this file and now underneath that we are going to be also providing the background come on not backdrop but the background will be set to size and it's going to be set to totally cover I'm going to also provide the background position and the background Position will be set to totally Center like so I'm going to also put a bit of classes to this so I'll use like only absolute and the inser will be set to zero Z index will be set to and The transition will be

set to transform I'm going to also put the duration and duration will be set to 300 uh we're going to be setting the two scale of 110 now let me S my file now let me just refresh my file and now if I scroll down here you can see we now getting all of that carel images right here and now if I H my mouse over to each of these images we are now getting the kind of amazing animation right here that's also looking cool and that was our scrollable Animation I'm not scrolling on the

xaxis I'm scrolling on the Y AIS and now if I scroll there we now getting all of that images and that's looking super amazing welcome to the new project so in this one we are going to be building advanced level sticky navigation bar by using the frame or motion so what we have to do first of all I'm going to go ahead and Define my components folder and inside there we are going to be defining a sticky n. TSX file I'm going to also Define the card. TSX file as well okay I'll use the RFC

inside the sticky navigation bar and also the RFC inside the card I'm going to go ahead and Define my uh what do we call Sticky navigation inside our app I'm going to save this file and now let's just start working on there okay so yeah we already started there I'm going to import something called the motion from where from the framer motion that's going to be the first thing that we have to do Next we have to Define our variant so that we can use the inside our animation so I'll use like first of all

we're going to be creating the menu variants here we have to Define our hidden State when it is hidden so we're going to be changing the height to 5.6 Ram okay and when it is visible so in that situation let's just write a visible in this situation it's going to be set to 29 rims and I'm going to also provide a transition to there so let's just use a Transition and this going to be set to the duration and the duration will be set to 0.3 seconds so that's going to be it for our menu

variance and now let's just create one more for the expand row variance so I'll use like expand what we have to do we have to first of all Define the hidden stad and when it is here and so we going to be changing the opacity to zero and also the y- AIS will be set to 50 and now underneath that we also have to Define our visible State And it's going to take the index and index can be basically anything so I'll just write like any I'm going to define the opacity and the opacity will

be set to one y AIS will be set to zero in this case and also we're going to be attaching a bit of transitions to there but first of all we have to wrap that inside the parentheses so let me just wrap that now here we have to specify our transition so I'll use like transition that transition will take the Delay and now let's just use the index times 0.1 and then we have to provide the duration and duration will be set to 0.6 I'm going to save my file I'm going to collapse this one

and also collapse that variance now let's just go ahead and go to what UI and I'm going to remove that from here I'll use the classes I'll use like background of totally black and minimum height will be set to totally screen inside this div we have to Define our motion. div and I'm Going to close there so here I'm going to specify the class name like it's going to be set to totally fix the Top Value will be set to zero the width will be set to totally full and pairing all around will be set

to add background totally white and text totally black rounded totally large and Shadow will also be to large so I'm going to save my file right now and here now we have to specify our variants so I'll use like the variant and now we are going to be Providing our menu variance inside there I'm going to also provide the initial State and for the initial State we're going to be setting there to hiden and also when somebody how over there so in this situation we're going to be setting the state of there to visible so

v i s i b e inside this motion Dev we're going to be defining or D once again it's going to have the classes of flex and also the flex of toly column inside this D we're going to be defining yet another Day which you have the class of flex justify will be set to between and items will be set to tot the center inside there we also have to create one more for the items so let's just choose like item Center and I'm going to also specify margin for the left of two and font

will be set to uh semi bold I'm going to also provide the upper case on the cas so I'll just write my own name like hose check this out so here you can see we now getting this navigation area So if I hold over there so here you can see we now getting this expanding navigation so if I leave it back so it's going to expand it back now let me go ahead and take care of the rest of the UI so now underneath this div I'm going to go ahead and Define another div so

which will have the class of hidden and also on the medium screen uh I'm going to set the two to flex and also the spaces on the xaxis will be set to five and text of to Center inside this D We're going to be providing an anchor tag which will have the class of text toally black and font of totally bold and I'm going to just write like this pound symbol inside there and I'm going to say like products I'm going to duplicate there a few times so I'll just change that to like uh use

cases and also change this one to resources I'm going to also duplicate that and change that to pricing now underneath this div we're going to be defining a div so Let's just write like black and it's going to be set to the item store L Center inside there I'm going to create my anchor tag once again and which will take this own symbol and I'm going to say join I'm going to also provide the class of text toally blank and font of toally light inside this so now let me just save my file and here

here you can see we're now getting this amazing sidebar but this is not looking that cool so I'm going to go ahead and remove This font of light from there and yeah I guess that's looking better I can also remove this spont of totally boldness from there so I'll just select there and remove there and yeah I guess that's looking cool now underneath this div I'm going to Define my motion div once again so what I'm going to do is that I'm going to Define my motion. D and I'm going to close there inside there

I'm going to also Define the classic of flex and flex will be set to totally column And pairing for the y axis will be set to totally six okay and I'm going to also Define the variance inside there we already created this expand variance so I'm going to use the inside there okay so now inside this Dev we're going to be defining a span which will have the class of totally block with will be set to totally full and also height will be set to PX and background gray of 300 and now underneath them I'm

going to define the motion D once again and close them I'm going to first of all Define my variance and it's going to take the expandable card or expandable row variance I'm going to also specify the custom value to there so custom and here we have to specify one inside there and for the classes we're going to be using a flex and also items will be set to to the center margin for the top will be set to five inside there we have to Define our Spin and spin will have the class of border and

also border totally Black totally rounded full and pairing for the xais of two and text will be set to smaller extra small rather and it's going to say apple let me just save my file if I H over this we are now getting this line and also this spill off Apple so yeah that's looking cool now underneath this pen I'm going to Define a paragraph which will have the margin for the left of two and I'm going to say like MacBook Pro let's just say our file and how over there so now we are getting

This MacBook Pro and now finally we have to start working on our custom card I'm going to start working on there but now underneath this div we have to Define yet another div so I'll use like motion. d one again and close there and here we have to specify that exact same value so I'm going to copy the name of the I mean like class of there and place it right here so we are going to be using the variance custom will be set to one and also here we are not going to be Providing

all of them but we are going to be only providing a flex and margin for the top will be set to five okay so now here we already created this card component so we have to use that inside this D so I'll use like card and execute there like so and this card is going to take a few props so I'll use like title and I'm going to set that to like my amazing card or something like that and the description I'll say like um this is some random description or something Like that and also

I'm going to specify the image URL so I'll use like the image URL and it's going to be set to this image URL so you know what we have to specify it like this I'm going to place the image URL right here and this should be HTTP so let's just write H right here check this out so if I have my mouse over today we are only getting this card because because we did not create this card so now let me just go ahead and go to this card and start working on there The first

thing that I want to do is that I want to destructured all of the props that we are now taking so I'll use like title I'm going to also put the description d s c r i p t i o n and also the image URL okay so now we have to create an interface for this so I'll use like the interface and then I'm going to give it the name of like card props and if you guys don't know what in the world is the interface so you should definitely go ahead and check out

my Typescript course about there I'm going to be using a title and title will be set to a string description description will be set to string and also the image come on the image URL will be also set to string I'm going to S my file copy the name of there let's just copy the name of there and annotate there with this card props the next thing that we have to do is that we have to use this so I'll just remove that from here I'm going to Specify B of classes to this all use

like Flex and flex will be set to column and margin all around will be set to five background white rounded large and Shadow will be set to totally large I'm going to also provide the Overflow and overflow will be set to totally hidden okay so now inside this D what do we have to do we have to use our image so I'll use like the image I'm going to also specify the source to there and also the alternative text to there I'm Going to also use the class name so the width will be set to

totally full and the height will be also set to 28 I'm going to also set that to object holy cover and close there like so the next thing we have we have to do is that we have to grab the image URL and we have to place there as a source I'm going to also copy the title and place there as alternative text so now let me just sa my file and now if I have my mouse over today so it's going to gives us the Image of that Macbook so what I'm going to do

is that I'm going to also use this description so I'm going to copy the name of there we have to define a d with the class of padding all around will be set to four and inside there we have to use the H3 with the class of font toally bold and text large and it's going to take their title first of all we have to render the title and then we are going to be rendering the description so I'll use like text of to gray 700 700 and Also margin for top will be set to

two and here we have to render their description underneath there we're going to be creating a button which will have a few classes all used like margin for top of four and background toally black text toally white and also pairing for the Y AIS will be set to two pairing for the xaxis will be set to four totally rounded so I'll just say like learn more or something like that now let me just refresh that and if I have my mouse over To that so it's going to giv us that card so if I want

that card to be like a lot of time so I can just duplicate this card and it's going to give us that card like a lot of time so yeah you can totally change the UI if you wanted to but that was our amazing animated navigation or sticky navigation to be precise so before we get into this project I want you to keep in mind one thing this project will be a bit Advanced so let's just start working on There what in the world are we building and how are we even going to be building

there we are building something called the progress steps and you will see that in a few seconds so first of all we are going to be creating a components folder c m p o n NTS and we have to Define our progress step. TSX file inside there I'll use the rafc go ahead and go to our app and register their progress steps right here and I also want to mention one more thing so if I go ahead and go To the index. CSS file I already specified the background color and the background color is now

set to this color and we are also changing the color to totally White okay so that's the first thing that we have to do next we have to import something called the framer motion from the motion I said it wrong the motion from the framer motion okay so next we have to Define our steps so I'll use likeon steps and here we are going to be creating an array and inside This array we are going to be defining a few objects so I'll just proide like the title and the title will be set to step

one and also I'm going to be providing a bit of description to them and for this description I'm going to just say like I don't know some s of like random description so say like this is the first step or something like that and I'm going to provide a comma there and I'm going to duplicate that a few times so I'll just change the two I'm going to Select them and yeah we have to just change the two three and four now I'm going to go ahead and go to my component and the first thing

that we have to do is that we have to Define our current step and then we have to Define our Set current step it's going to be equals to the US St and the initial value we have to specify 0 to the that's done we also have to go ahead and go to the UI and provide a bit of classes to this all use like Flex and flex will be set to column And items will be also set to Center pairing all around will be set to five inside the div we have to Define yet

another div which will have like relative and also Flex justify will be set to totally between b t w n between and also the width will be set to 40 Rim so I'll use like 40 rim and close there I'm going to also specify margin for the bottom and inside this div we have to Define our motion. div so I'll use like motion. div come on div and close there On this motion div I'm going to specify a bit of classes to this so I'll use like uh absolute because we're now providing a relative so

this class will be absolute to this relative class that's done and also background will be set to totally blue of 500 and I'm going to provide the margin for the top of one rim to there I'm going to also put a bit of styling to this so I'll use like this style and here we have to specify our styling dynamically so I'll just change The width and the width will be the dynamic width so what am I going to do I'm going to first of all add one parenthesis and inside that I'm going to attach

yet another parenthesis so I want you to notice we are now working with double parenthesis first thing that I want to do is that I want to grab this current step and I'm going to place there then we're going to be adding only zero to there and now outside from there we are going to be defining the steps. Length like how many item we have there you want to divide there by current step + one okay outside from there we also have to multiply there to 130% just like this okay so that's going to be

at forward width I'm going to also specify the transition so I'll use like the transition and here we have to specify the width and 0.3 seconds and ease this is right there and I'm going to also specify a comma inside there I'm going to save this file and now inside This Dev what we have to do we have to iterate over through all of our steps so I'll use like steps. map and we also need the step inside there come on step and also the index from there so what I'm going to do is that

I'm going to go ahead and Define come on let's just use our parenthesis if I can do that today I'm going to Define my div and inside this div it's going to take a key so I'll just write a key and key will be set to an index I'm going to also Provide a class name today it's going to take a flex and flex will be set to totally column and items will be set to totally Center and it's going to be also set to totally Rel inside there we have to Define our motion. D

once again and close there and for this motion D we're going to be attaching a class names and we are going to be rendering our classes dynamically so that's why we are now using this template literal so I'll use like the height will be set to hold 10 Withd will be set to toly 10 flex and justify will be also set to Center I'm going to also provide the items of totally Center to them round it totally full and Border will be set to two so I'm going to save my file right now and then

here we have to specify our styling to totally dynamically so I'll just say like if the index which we are now getting by iterating over through all of the steps so if that index is less than or equal to the current step which is The state of our entire component so if that's the case so what do we have to do in that situation we have to change the background color to totally blue of 500 but if that's not the case we want to keep it as background gray of 200 and when somebody H over

this I'm going to be using like while how we only want to scale that to 1.1 one and I'm going to also specify the transition and for the transition we're going to be setting the duration to 0.2 seconds inside this Dev We're going to be rendering our index so I'll use like if our index is less than the current step which is going to be our state so in this situation I'm going to only write this check mark if that's not the case we are going to be setting that to null okay this should be

a question mark because we are now using a tary and now under underneath this D we have to define the paragraph and it's going to have a few classes all just defined there and here we have to render Or step. title and now we're going to be defining our class names and we're going to be defining them totally dynamically so I'll just use like margin pH top of two and here we have to Define our index so if our index is less than or equal to the current steps so in this situation once again we're

going to be changing the the text to totally blue of 500 but if that's not the case we are going to be changing the text to to gray of 500 so now let me just save my file test This out so we are now getting this awful looking UI we will fix that in a few seconds but yeah we have to take care of this UI first of all underneath this div we're going to be defining our motion D once again so I'll use like motion. d close there and here inside there first of all

we have to provide a bit of classes to this so I'll use like Trix of toally Center ping all around with five and the width will be set to 40 Rim close then and proide the height Of 10 rim to there I'm going to also provide the border and round it totally large Shadow will be set to toly medium I'm going to also specify the key and the key will be that current step I'm going to also proide the initial State and initially it's going to be set to the opacity and opacity will be set

to zero the y- axis will be set to minus 20 let's just say our file underneath this initial State we have to provide our animate State and for this animate State We have to provide the opacity of one and the Y AIS will be set to zero I'm going to also provide the exit prop and for this exit uh let's just Define our opacity and opacity will be set to zero and the one X will be set to minus 20 I'm going to also Define the transition and for this transition we have to define the

duration of 0.3 seconds to there okay so finally we have to render our main card so I'll use the H2 and the classes will be set to text toally extra Large and for totally Bard and here we have to render our steps come on steps and now let's just use our current step and now get the title out of there I'm going to duplicate this oh you know we're not going to be duplicating this I'm going to be creating a paragraph with the class of margin for the top of two and I'm going to duplicate

this step right here so this's just copy there and place there instead of providing a title I'm going to change that to the Description so let's just say our file and here you can see we're now getting our card and this is not something that I want but yeah we are getting there now underneath this motion div uh we have to Define just a regular div and we are going to be setting that to flex margin for top of five and spaces on the x-axis will be set to four inside there we have to create

a button and this button will have few classes so first of all we have to write a previous button and then We're going to be also creating one more button for the next one so let's just add there so I'll use like uh you know what change that to the dynamic classes and pairing for the xais will be set to four pairing for the Y AIS will be set to two text of to white background blue 500 rounded and here we have to render our classes to dynamically so if our current step is triple equals

to zero so in this situation what we have to do we have to use the opacity and set the 250 And also the cursor will be not allowed okay but if that's not the case we're going to be only using the empty string which means like we don't want to provide nothing to them now underneath that we're going to be also attaching the disable State and for the disabled state if the current state is equal to the zero so you want to just disable this button and I'm going to copy this button and duplicate there

one time and change a few things inside there so if Our current STP in this situation is equal to the steps. length minus one which means like the last element so in this situation we're going to be setting the opacity to 50 and cursor will not be allowed and here instead of providing a current step is equal to zero we're now going to be attaching like steps. length minus one which means like gives us the last element and also we are going to be changing that to next so I'm going to save my file and

something is awfully Wrong with my component and I don't know why let me just click on this it's going to give us the next one and the previous one but we also have to attach the on click man Handler I'm going to attach that but I don't know what's wrong with my UI there is something off going on with my UI so I'm going to have to fix there first of all I'll just hide there oh you know what we have to take all of that steps logic and then we have to close this div

like so and now Underneath this div you know we have to remove the and render our content right here now let me just save my file and yeah this is now looking better and now if I click on that nothing will happen but now let me just go ahead and Define or attach the event handler on the next button and also on the previous button let me just go ahead and go to the previous button and when somebody clicks on there we going to be firing this function which is a previous step I'm Going to

copy a name of there and also we going to be attaching event handler on the next button so when somebody clicks on there we're going to be firing a Next Step function so now let me just go to the top and Define there right here first of all let's just take care of the previous one but you know first of all we have to take care of the next one so I'll use like uh next step is going to be equals to this function and inside there we have To first of all check if our

current step is less than the steps. length minus one which means like the last element okay then we're going to be changing the current step to the current step + one which means like basically we're going to be incrementing there but if that's not the case like if somebody did not click on the next button and they inste click on the previous button so we're going to be creating this function so I'll use like cons previous Button and in side then we have to check so if the current index or the current step is greater

than zero then we're going to be setting the current step to the current step minus one I'm going to save my file right now now here you can see we're now basically getting our basic animation if I click on there here you can see we're now getting a checkbox and also we are getting this line if I click on the previous button one more time we are not allowed to click on the Once again because this is the first item if I click on there once again the content will totally update the description will totally

update we're going to be getting an animation and also this line will cross out to the next step if I go ahead and click on there once again we're now getting that same animation and which is looking cool so yeah that's an amazing project and it was a lot of typing I know trust me that was a lot of typing so yeah that was our Basic or not a basic but our advanced level progress step so what is zustan zustan is a lightwe state management library for re applications it help you manage and share straight

across different part of your application without needing to pass prop through many layer or use some complex solution like context apis or using the use context H or also using the Redux tool kit which is something which we going to be also learning throughout the course But yeah that was just a definition of what a zustan is but now let's talk about why should Ione care about learning zustan so here you can see I have a component hierarchy so I have a app header nav card users date and time component and inside the app component

I have some sort of a data and let's suppose if I want to use that data inside the de component so how can I go about using there well to use there first of all we are going to be passing That data to the card component then we going to be passing that data to the user component and after that we're going to be passing the data to the de component and then we will be able to use that we can also solve this problem by using a context API but let's imagine for a second

that you are working with a Google so you will just W your entire application by using the context API of course not so you're going to be using some sort of other solution either using The Redux toolkit or also using a Zeus St so now in this case we learning about the zo so first of all we are going to be creating some sort of a store inside that store we are going to be putting our data and then we can use the data in any component that we like suppose if we want to use

the inside the card component we can totally use them and if you want to use the in the navigation totally allowed to do the in finally if you want to use the inside the DAT Component so so we can totally use that so this is how we're going to be extracting our state from our components and we're going to be storing that in the store and then we can use it in any component that we desire so now let's just make a setup four resistant now to make a setup first of all we have to

open our terminal I'm going to use npm create we at latest I'll give it the name of like Zeus demos and I'm going to choose react J with typescript now let Me go into the Zeus demos folder and I'm going to install every single thing inside so then successfully done I'm going to open that in my vs code inside my vs code I'll open my terminal and now we are going to be installing Zeus inside our project so I'm going to use npmi or you can also use install if you prefer that so I'm going

to use npmi and then Ze turn and I'm going to hit enter now then successfully done now let me open that in my vs code and this is how Everything looks like so now let me just make a bit of cleanup we don't need this public folder so I'm going to delete that we also don't need this SS folder and also app. CSS and I'm going to also remove every single thing from the or you know let me just delete this folder or file to be precise I'm going to also remove this import and go

into my app component remove every single thing from there and I'm going to just use my rafc sa my file and this is how it looks like Right here so that was it about for the setup now let's create our store so what I'm going to do is I'm going to just create a file with store. and inside there we're going to be defining our set and we're going to be also tning it like how we're going to be modifying updating or mutating or change changing or state so the first thing that we have to

do is that we have to import something called the create function from where from The Zo stand library in this create function Is the heart of this Ze okay so this is how we're going to be importing there next we have to create our custom hook so to do them we're going to be using like use counter and basically you can give it any name that you prefer you can give it the name of hoseen you can give it the name of banana you can give it the name of Alex you can give it any

name that you like but in my case I'm going to only give it the name of like use counter and that's going to equals To this create function now we're going to be calling that function from The Zo and here it will also take a call back function so I'll just put a callback function right here just like that now we have to tell it like what will be the initial value of my store so I'll just write like count and count will be set to zero you can also set that to some sort of

a string you can also provide some sort of array if you want to and also the object if you wanted to but in My case I'm going to only provide this counter and the value will be set to zero next we're going to be taking something called the set perimeter and keep in mind this set is a special name it's going to allows us to change your value like change our state so this is how we're going to be defining our initial State and this set method will allows us to change our initial state so

how are we going to be doing them you know what let me just create a function With the name of like increment and that's going to be just an arrow function like so and I'm going to use that set method and inside this set method we are going to be also providing a Cod back function once again so I'll just use like State and then we're going to be getting our data so to get our data I'm going to just use like count and that count will be coming from a state. count and we will

just increment one with there and here I forgot to Include the parenthesis so now let me just add that parenthesis right there and also at the end and we're not going to be using this colon we are going to be using a commas there okay so that's St done and this is how we're going to be defining our state and this is how we're going to be changing the value of our state so what I'm going to do is that I'm going to just remove the curly braces from here we also don't need that so

I can just toly remove that if I Wanted to and also just put a comma there and this is how we are going to be making the as a one liner but now we are getting a few errors from a typescript so now let me just fix that so I'll just create a type with the name of like counter or counter store will be fine and inside then we're going to be defining our count and count will be set to number and also we have a increment function and here we're going to be only returning

the white from there duplicate That change that to decrement d e c r e m e n there we go I'm going to copy them and annotate my create function with counter store so now let me just save there and now we have to Define this decrement function so I'm going to just duplicate this line of code go back and just write a decrement right here instead of providing this plus we're going to be removing that and replace it with this minus and there was it that was it so finally we have to just export

This so that we can use that in other file let me just say that once again first of all we're going to be importing the heart of zus which is called a create function then we're going to be defining our custom hook and we're going to be defining them by using this create method or function whatever you want to call them and this create function will take a call back function and here we're going to be defining our initial value and then we have a set method which will Allows us to change or mutate or

update or whatever you want to call them or St okay so this is how we going to be providing an increment function and this is how we going to be providing a decrement function to change our values so this is how we are going to be creating our custom hook but now let's talk about how we going to be accessing the inside our component so to access them obviously we would need or use counter so if I just use the and hit Enter so it's going to Auto Import there from my store like so so

now inside there if you want to get the state or the count value from there so there are a few ways to do that the first way is to just provide error functions I'll just use like St and then I'll just write like st. count and we can store in some sort of variable like cons count or something and that's going to be equals to this custom hook and now we can totally render there by using this H1 And I'll just write like count and here we have to render the value of that count so

now let me just save my file and go back and what are we getting we are now getting our count of zero which means like everything is working the way we expect him to work so I can also change this initial value to like 10 or 100 or something like that so it's going to gives us that count and that specific value from our counter which means like everything is working so this is how we Going to be accessing the data that's the first way to access our data now the second way is to destructure

our data so we can just destructure our increment function like increment and we can also destructure our decrement function from this St then we don't have to specify this do count there so I'm going to just remove that from there and now we can just create two buttons like button and I'll just write like increment and I'm going to also duplicate then just write A decrement right here I'm going to attach my on click event handler and the first one will just say like increment and the second one will just say decrement okay and now

if I click on the increment so it's going to increment my counter by one and now if I click on the decrement so it's going to decrement my counter by one which means like both of these functions are working but now in this case we also don't have to specify this Arrow function so I can totally Remove there now if I save my file and now let me just refresh there I can totally click on this so it's going to increment my counter and I can totally click on this one so it's going to DEC

my counter so yeah this is how we are going to be accessing the data but this is not how I want to access my data I'm going to just remove it and now let me give you one more example of how we going to be using our store or state inside other component so what I'm going To do is that I'm going to only access my count from the use store and not start God damn it use counter to be precise you're going to be accessing our data by use counter and I'm going to just

destructure that value and as you can see right here we are now getting the value of zero so next I'm going to also create another component with the name of other component. TSX and inside there let's just use our RFC inside there and now I can totally access my Data separately if I wanted to so now let me just write like increment it's going to equals to or use counter and we can totally access our data by using by providing our Arrow function like start. increment and we can also get our data by just using

st. decrement copy the name of there place there right here and I can just say like uh button and which will say increment let me just write increment right here change that to decrement and provide my own click event Handler on there the first one will increment our counter the second one will just decrement our counter now I can totally use this component inside my ab. TSX file so I'll just uh run this component right here I'm going to import the sve my file and now here you can see we have two buttons I can

increment and I can also decrement my counter which means like everything is working now let me just go ahead and like yeah this is just a one way importing or using or Store data but this is not the better way so as I showed you a few seconds ago like we don't have to specify this aror function we can just to the access our data by using this method like increment and then decrement and this is something called destructuring in JavaScript and still it will work so if I increment there and I can also decrement

there so yeah that was the entire Theory and the entire story about zeust first of all we have to import them then we have to grab Them and then we have to use them and provide our rules inside there and now if you want to access there we just have to access there by using this use counter and then we can destructure the data or yeah the data or the state or we can also just get our data by using the dot notation which I just show you Evo is EO lesser greater middling makes no

difference the degree is arbitrary the definition is blurred if I have to choose between one evil and another I Would rather not choose it all okay that was a lot of Witcher wise God damn it so now let's just make a set of four recording journey and then we are going to be making a lot of project like 10 amazing projects so what I'm going to do is that I'm going to write like npm create we at lat God damn it create we we at latest like so I'm going to give it the name of

like Zeus projects and now I'm going to choose reactjs with Tcri go into the Zeus project Zeus project and I'm going to install every single thing inside there I'll also install the Ze so I'll use like npm install Zeus it's going to install the in my machine that's already done so I'm going to open that in my vscore and that's looking better so what I'm going to do is I'm going to just remove this public folder I'm going to also remove this assets f. CSS and also we have to remove A single thing from there

now let me just search for the tailman css.com let's just go to the tailman CSS and I'm going to click on this getting started button I'm going to choose framework and guides go to the V and copy this command open my terminal and place this Command right here once again hit enter so it's going to initialize my tment CSS so so that's already done I'm going to copy there go into my taing config file and replace it with this new Content that's already done I'm going to also go into my index. CSS and replace that

with these new directives okay and finally we also have to copy this H1 to test it out so I'm going to go into my F.C not CSS but f. TSX and now I'm going to replace there with this content I'm going to use my npm run Dev to run my server and now let's just go into my Local Host run there yep this is working first thing first we have to Define our store or create our store so I'll just Give it the name of like store and inside there we are going to be defining

where UST store. TSX or TS to be precise first we have to import the create from where from the zoo stand now underneath them let's just create our custom hook with the name of like Ed store you can give it like basically any name that you prefer and I'm going to use my create function is going to take a set as a perimeter and also this call back function but we have to wrap that inside This parentheses first of all we would need our initial stat so I'll just write like recipes r e c i

p s and recipes will be empty array and then we would be able to add a recipe and also remove a recipe so I'll write like add recipe recipe it's going to be a function so it's going to take a perimeter of like recipe like so and now let me just create my arrow function without providing these curly braces I'll call my set method and inside this set method Once again we have to call our state and now we have to Define our initial St so we are going to be taking our recipes their array

so I'm going to copy there and now let me just past it right here and we are going to be first of all making a clone of the existing recipes so we are going to be saying like dot dot dot which means like spread operator and we're going to be making a clone of these recipes after that we are going to be providing our new recipe which we are Taking as a perimeter from this function so that's to you done now we also have to provide our types so first of all let me just create

an interface or you can also create a type if you want to and I'm going to give it the name of like recipe like so and inside this interface we're going to be providing the id id will be set to number we're going to be also providing a name of the recipe and that's going to be set to string we're going to be also including the Ingredients and ingredients will be a string of array after that we're going to be also providing the instructions and instructions are going to be a string okay now let me

also create an interface for the store so I'm going to go ahead and create an interface and that's going to be the rest recipe and inside there let's just Define our recipes that's going to be set to that recipes which we have created up above you know let me just copy the name of There I'm going to copy the name of there place it right here and we're going to be placing array of recipes after that we would also need the add recipe function which we have already defined right here so I'm going to copy

a name of there and place it right here and this going to be a name so we have to specify the recipe as a perimeter and that recipe will be that recipe typ so now let me just also Define there right here and it's going to just return the Wide after them we would also need to remove that recipe so I'll just write like remove recipe like so it's it's going to take the perimeter of ID and then that ID will be a numbers so that's what we have to do right now we also have

to annotate our create function with our recipe store and we have to close them now it is freaking out because we also have to create our remove recipe function so I'll just write like remove recipe and that's Going to take the ID and in there we're going to be once again using our set method let's space our St inside there like so and then we're going to be providing our object and inside there we're going to be getting that recipes once again and we have to get that from the standard recipes and we're going to

be using the filter method on there and now we are going to be filtering out all of the recipes so I'll just write a recipe right here and yeah I'm going to Have to store there in the parenthesis now outside from there we have to check if recipe. ID is not equal to what not equal to this ID right here so if I copy that and place that then we want to remove that specific recipe equal to sign so we have to provide three equal to sign and that's done finally we have to export this

so we can use this so I'll just use like export and that's totally it about the St so this is how we're going to be defining our St and Then this is how we're going to be adding our recipe this is how we going to be removing our recipe the store part is done now let's use the inside our component I'm going to create a folder with name of components and inside that we're going to be defining our recipe. TSX and I'll use my RFC inside there and I'm going to go into my app and

render there right in here like recipe app and close there yep we are getting our recipe app now let me go into that Recipe app and start working on there the first thing that I want to do is that I want to Define my state or you know what first of all we're going to be importing a lot of stuff from our use store okay and what are we going to be importing we are going to be importing or destructuring the first of all the recipes also the add recipe remove recipe and that's going to

be it now underneath that we also have to Define Our state so I'll just write name and set name and that's going to be equal to the use State not store but used St God damn it used St there we go let me just import there and for the initial value I'm going to specify string and I'm going to also inate with the string because I know a lot of people will ask me hose you are not using types script so now I am using that next we're going to be defining a state for the

ingredients and set ingredients it's Going to be equals to the use St once again and the initial value will be still that empty string so I'll just write a string inside there and now underneath let's just create for the instructions this should be const so we have instructions and also set instruction it's going to be equals to the US St once again and the initial value will be empty string and I'm going to also annotate there with the empty string finally let's just write where Editing recipe so I'll use like editing recipe and then set

editing recipe it's going to be equals to the used St and for the initial value is going to be set to know so I'm going to otate the with first of all you know let me just create a state for the or not a state but a types so let's just Define our interface with not inferior but the interface and I'm going to give it the name of like recipe and inside there the ID will be set to the number and also we have a Name name will be set to Str we have ingredients and

ingredients will be set to string of array now underneath there finally we have to provide our instructions like so i n s r u c t i o n instruction will be also set to string so now let me just annotate there by either using the recipe or using null value so now we are providing the initial value of null today so now the final thing that we have to do is that we have to use all of them let me go Inside the UI and start using this so I'll just remove that from here

and first of all I'm going to define a lot of classes for the first St so the Min height will be set to screen let me go back I'm going to provide a flex and items will be set to Center justify will be also set to center background will be set to totally green of 100 and inside this D we're going to be creating a div with a class of background totally white and pairing on around will be set to six Round it totally large and Shadow will be also set to large width will be

full and maximum width will be set to 2 XL inside this we're going to be creating our H1 which will be the text 3 XL and the font will be set to bold and margin for the bottom will be set to six text will be set to Center Green of 800 800 like so and I'm going to only say like recipe book or something like that now let me just test this out so we are getting some sort of error okay can I Read the property of un reading subscribe cannot read the property of undefined

reading subscribe and I realize that we are now import that from the zoo stand and we shouldn't be doing this let's just remove that and import my uh use store from where from my use store inside the store so now if I save my file check this out and yeah this is now looking cool let me go back I very zoomed in so now this is looking cool so what I'm going to do is that I'm going To just take care of the rest of the UI now underneath this H1 I'm going to create a

d with a class of space on the y axis will be set to four and margin for the bottom will be set to six inside there create word input field with the type this is crew input field with the type of text and I'm going to also provide the value and value it will take the name which is coming from the state like this name and here what I'm going to do is that I'm going to put the on Change event handler and when somebody types something inside we're going to be firing this function like

set name and the initial value will be set to e. target. value I'm going to also provide the placeholder which will say like recipe and let's just put a bit of classes to there like styling so with will be set to to full pairing for the xaxis will be set to four pairing for the y axis will be set to two border and totally rounded large and Border will be Set to gray of 300 and for the Focus ST I'll just put the outline and that's going to be set to n and for the focus

once again we are going to be providing a ring of two and focus ring will be set to totally green of 500 so now let me just save my file and by the way if you guys don't know what I'm typing right here you should definitely watch my T CSS course and yep we are getting our amazing input field and that's looking great underneath there or you know let Me just uh duplicate this input field for a few times so first of all you would have for the name next we will have for the ingredients

so I'll just write like ingredients right here and then set ingredients like so and I'm going to just replace this placeholder with ingredients and then comma separated and The Styling would be fine yep that's looking cool I'm going to also duplicate there once again for the instruction so let's just duplicate There for the in instructions instead of writing this ingredients I'm going to write like instructions and then set instructions and for the level I'm going to only copy this instruction and put there right here for this placeholder like so yep that's also looking cool oh

and this should be a text area iner so I'll just change there to text area and yep that's looking cool but I'm going to also remove that type and now that's looking better and underneath this text Area we going to be entering all of our recipes so I'll just write like d with the name of or with the class of legs and justify will be set to between and inside there we're going to be first of all checking like if we have the editing recipe then we are going to be come on if we have

the editing recipe then we're going to be rendering this UI so inside this UI I'll just write a react fragments like so and for now I'll just create a button and let me just save There yep we are getting some sort of error I don't know why but we are getting this error now that is gone so I'm going to just create my react fragments and inside this react fragments first of all we're going to be defining our button and I guess we are getting that error because of that react fragments not quite sure but

I'm going to just leave it right here just for now or you know let me just change that to Dev what the hell so I'm going to just Change that to D still getting that error by the way okay so got there you know let me just leave that the way it is and I'm going to write like update recipe here but what the hell is wrong with this oh that's because here we are not providing the closing tag so I'm going to provide my closing fragments right here and also the opening and closing there

now this is looking better I'm going to just God damn it so I'm going To just replace it with this new one and I'm going to just change this D to just react fragments and somebody clicks on this button we're going to be firing this function like handle update recipe and we're going to be creating this function in a few second but now let me just put a bit of class into this um button so I'll just write a background of totally yellow 500 and text will be set to totally white pairing for the xaxis

will be set to four pairing for The Y AIS will be set to two toally rounded and then large when somebody H over this button we just want to change the color of that to Yellow of 600 we also want to provide the Focus ST of outline of none and also for the focus we want to provide the Ring of two and on the focus the ring will be set to Yellow 500 so now let me just save my file we are going to be creating this function in a few seconds underneath there we're going

to be defining one More button so I'll just create a button and inside this button I'll just say like can card cancel and I'm going to just provide a bit of styling to that and also when somebody click on this button we're going to be firing like handle cancel edit and I'm going to provide a classes of you know exactly that same classes but instead of providing that yellow here we are providing this gray color right here so if I save there now let me take care of These two what you want first of all

let me also take care of this area then we're going to to be taking care of that other one so what I'm going to do is that I'm going to create a button once again and it's going to say like add recipe and when somebody clicks on there we're going to be firing this function which is a handle add recipe like so I'm going to also provide a closes to there so I'm not going to waste your time let me just proide these classes right here And yeah you can pause the video and just proide

these classes so now underneath this Dev what I'm going to do is that I'm going to just write a UL with a class of space on the Y AIS will be set to four and now let me iterate over through all of that recipes so I'll just use like uh recipes do God damn it RC yeah there we go and now we are going to be rendering all of for recipe so I'll just use like recipe and inside there I'm going to render my Ali and Inside this Ali first of all let me just provide

a key and the key will be coming from that recipe. ID I'm going to also provide the class name today so pairing for all around will be set to four and background will be set to totally green of five of 50 rounded large Shad or small inside this Al we're going to be rendering our H2 which will say like text will be set to totally extra large font will be set to semi bolt text will be set to Green 800 let me just write 800 and margin for the bottom will be set to two here

inside there we have to render our recipe and then name their specific recipe name underneath this issue we have to also render our ingredients so I'll just write a paragraph with the class of text Gray of 700 and margin for the bottom will be set to two and we're going to be using a strong tag inside there there and I'm going to write like ingredients that ingredient will be set to recipe not Recipes but just a singular recipe I'm not even getting a recipe and then that ingredient ingredients do join and here we have to

just put a comma here and space It should be a recipe instead underneath this paragraph I'm going to create a d with a class of flex and justify will be set to Center or not even Center but between we're going to be also creating a button which will say like edit and I'm going to also put the on click event Handler to there and when somebody clicks on this we're going to be firing this handle edit recipe function it's going to take a recipe as a perimeter and let's just put our classing today so I'm

going to place this classing Right Here and Now underneath this button what do you want to do we just want to create here another button and which will select delete I'm going to also provide the own click event handler on this one so when somebody clicks on there they're Going to be firing this function which is a remove recipe there we go and it's going to take a recipe ID just a singular recipe. ID there we go I'm going to also provide a classes to this one so that we can style there a bit and

this should be a REI re e c IP there we go I'm going to copy this one put the right here also in there also here and recipe. ID and it's going to take a recipe there we go now that's looking better I'm going to Create these functions like handle edit recipe handle delete recipe and so on and so forth so now let me just go to the top and create them so we'll start by first of all adding the recipe so I'll use like handle add recipe it's going to be equals to this Arrow

function and first of all we are going to be checking we have name. trim we also want to remove that empty spaces from there if that is equal to empty string or ingredients ingredients. trim Going to be also removing empty spaces from there if that is equal to empty string or instructions. frame if that is equal to empty strings in that situation what do you want to do we just only want to return but if that's not the case so we're going to be creating our recipes all use like a recipe and here we have

to specify the ID and that's going to be equals to dead. now and also I'm going to be providing a name today and here we Have to specify the ingredients start ID or just ingredients so I'll use not instruction but ingredients that's going to be also set to this ingredients from the St and we're going to be using a split method on there and we only want to split there by comma and then we want to it right over through all of them and let's just provide our ingredients as a perimeter for this function and

we're going to be removing empty spaces from them so I'll use like trim method inside There and also let me just provide a comma and here we have to also render the instructions now let me just save my file and whenever we add our ingredients we also want to empty out our St so I'll write like set name and empty this out and set ingredients empty this out and also set instructions empty that out out as well let me test this out so I'll just write like no and then I don't know one I don't

know two and then I don't know and if I click on this add recipe We cannot edit there but we can totally delete there if you wanted to now let me take care of the handle edit recipe so what I'm going to do is that I'm going to just create a function with the name of handle edit recipe like so and it's going to be taking a recipe as a perimeter just a single recipe and we have to annotate there with our recipe like so and inside there we're going to be using like set editing

recipe and we have to provide our recipe as a Perimeter to them now for the name we're going to be also providing a recipe. name and now underneath that we're going to be using our set ingredients and for the ingredients we're going to be providing the recipe. ingredients and we also have to use the join method on there and we have to join there by by just providing a comma we also have to take care of the instructions we are going to be using like Set uh yeah instructions you have to provide the Recipe do

instructions right here and that's going to be it for the hand edit recipe now let me test this out so right like test and then test two and testing testing dot dot dot click on the Ed recipe now you can click on this edit so it's going to gives us an error let me just go to the console go to the top and handle update recipe oh we also have to update there so you know let me just also take care of there right here so now let me just create my handle update Recipe so

I'll use like const and handle update recipe it's going to be equals to this Arrow function it's not going to take any perimeters and I'm going to go ahead and copy a few things from this function so I'm going to copy there and put that right here inside this function so that's done now underneath there we're going to be first of all checking so if we have editing recipe in this situation we're going to be removing our recipe by providing our editing recipe. ID to the next we're going to be creating our recipe so I'll

just go to the top and then I'm going to just copy this stuff and put there right here and now underneath this one we're going to be just providing like set editing recipe and we only have to provide a null value to there and finally let me just go to the top once again and copy all of that empty stuff copy there and put there right here inside or set updating recipe now let me just save my File and then that's going to be it for the handle update recipe let's just test this out so

I'll just write like test and then test two and then test come on testing now if I click on this add now I can click on the edit still getting an error and I know why we are getting this error that's because we also have to create this handle cancel edit component or a function so I'll just collapse this one and I'm going to also collapse that one and you know what I'm going to also Collapse this function and now finally we have to just create or handle cancel edit and that's going to be the

most easiest one so I use like cons handle cancel edit that's going to be equals to this Arrow function and we have to write like set editing editing recipe and we have to set that to now and we also have to change like all of that stuff so you know I'm going to copy that from here I'm not going to waste your time I'm going to copy both of these three or all Of their three and put that right here and that's going to be for the cancelling so if I click on this edit so

it's going to allows us to edit our recipe so I'll just write like um hosan then hosan 2 and then uh hosen 22 22 two now I can click on this update recipe so it's going to update that to husan and also husan 2 and all of that and I can totally delete that and by the if I click on this edit once again I can totally cancel this edit if I wanted to I can totally delete there and yeah we can add a recipe like uh computers and then chair GPT and then amazing amazing

AI stuff that's going to be my recipe book and if I click on there and yep they are now suc sucessfully added to my list and that ladies and gentlemen was our first project by using Zen so now let's make a set of 4 or expense tracker project so I'm going to open my terminal right here and now let's just use our npm create weed at Latest I'm going to give it the name of like expense tracker I'll choose react JS with typescript let's just go into our expense tracker project and I'm going to use

npmi to install every single thing inside there I'm going to also install Ze so I'm going to use like npmi Zeus 10 z s n d so it's going to install zus inside our project that's done now I'm going to go into my tailin CSS and click on the getting started now I'm going to choose framework guides go To the weed and copy this command and place it right here let me hit enter one more time so it's going to initialize my T CSS right here and finally we have to open that inside our vs

code now what I'm going to do is that I'm going to copy this content and let me just go into my T when config.js and place there with this new content so that's done we also have to provide the forward index file so I'm going to open my index. CSS remove every single thing from there and Place my components right there so that's done I'm going to also remove the public folder the SS folder the amp. CSS and I'm going to remove every single thing from the app and I'm going to replace that with the

RFC and go into my index. CSS and and that's cool so you know what let me test this out by providing this H1 so I'll just copy there go into my app and provide there right here sa my file open my terminal and I'm going to write like npm runev And let's just test this out right here and yep The Styling is working and everything is not toly done that's done now we have to create our store to initialize our state inside this I'll just create a file with the name of store. TS and now

the first thing that we have to do is that we have to import the create function from where from the zean and now underneath that we're going to be defining our use store once again and that's going to be equals to the Create function and here inside we're going to be providing a callback function which will take a set as a perimeter and inside there we are going to be providing our initial state so that's going to be set to expenses expenses and the expenses will be equal to this empty array I'm going to provide

a comma so we would be able to add our expense and also remove our expense and then in the UI we're going to be also calculating our expense so what I'm Going to do is that I'm going to just write like add expense and that's going to be equals to this errow function and it's going to take the expense right here e pnse and here inside then we're to be using our set method to change our set and I'm going to provide my callback function right here and inside this callback function first of all we

are going to be getting all of our expenses and we're going to be making a clown of this I'll use like dot dot dot and then Instead do expense and then we have to provide our new expense which we are now taking as a perimeter for this function like so now I'm going to save my file so we are now getting a lot of typescript error the first thing that I'm going to do is that I'm going to export this so I can use the in other file next we have to create our interface for

the expense so I'll just create interface for the expense e pnse e and inside that we are going to be providing the ID and ID will Be set to number we're going to be also providing the description and description will be a string and finally we also have to provide the amount so amount will be set to number so that's going to be the first interface now we're going to be creating yet another one for the expense store so I'll just write like expense store and inside there what do you want to do we just

want to initialize our expense like so or expenses rather and that's going to Be equals to our expense interface which we' have created above like this one and that's going to be equals to array of that expenses now underneath that we're going to be also adding the expense and also removing what expense so what I'm going to do is that I'm going to just write like add expense and that is going to be taking expense as a perimeter and now we have to annotate that with this expense perimeter now we have to just return or

wi from there and that's going To be done I'm going to also duplicate and change the name of there to like remove expense and here instead of proving an expense I'm going to write like ID and ID will be set to a number and that's done now we have to annotate or create method by using our expense tool like so and I'm going to close there now this one is freaking out because we also have to add our remove expense so I'll just write like remove expense and here it's going To take the ID and

now we're going to be using our set method and inside this set method we're going to be providing our call back function and here we also have to first of all get all of our expenses and to get there we are going to be getting there from the st. expenses and now we have to use the filter method on there so now we can use like filter method and for this filter method we're going to be providing our expense as a perimeter so I'll write like expense and Then uh we have to use our expense.

ID and if that ID does not equal to this ID which we now taking as a perimeter for this function so then we want to just remove that specific expense and this is freaking out because we have to provide s inside there that's done and also s here expenses now that's looking better okay so that was at about 4 hour store and now let's just Implement there inside our UI so what I'm going to do is that I'm going to create a folder with The name of components components and inside we going to be creating

our expense tracker. TSX component inside there I'll just use my rafc S my file and go to my app and here we have to render that component so I'll just write like expense tracker and I'm going to also close there and you know what I'm going to also just inside the div and inside this St we're going to be calling our expense tracker so that's done let me test this out so yep we are getting Our expense tracker so the first thing that we want to do is that we want to grab the expenses add

expense and also the remove expense from the use store not a St God damn it use store which we've just created but not from Z what the hell am I doing today God damn it you know let me just import them manually so I'm going to import the use T from where from let's just go ahead and go to our store from our store there we go now we have to use that so to use That we're going to be using our use store and initialize it and now we're going to be destructuring the expenses

so I'll use like expn sces and also that's going to be equals to this use store now we're going to be also importing or destructuring the add expense and also the remove expense and we are going to be getting that from the use store we're going to be also creating a few step forward description and also for for or amount so I'll just Write like description and then set description there we go it's going to be equals to the used St and now store but use state in this case and the initial value will be

just empty string I'm going to also just annotate with a string doesn't really matter but I'm going to still do that now we have to create one for the amount and then set amount and that's going to be equals to the use St and for this St that's going to be also equals to empty string but Now we have to annotate there with either the number or empty string like so and I'm going to close them we're getting a lot of Errors I don't know why we are getting these errors I'm going to restructure there

and now there it is gone so now we have to just use the inside of our project and then that's going to be done so what I'm going to do is that I'm going to go to my UI and remove that from there and provide a lot of styling today so I'm not going to go Ahead and tell you every single 10 when CSS class but we are going to be providing these classes to it so you can totally pause the video and provide the styling today if you wanted to if you don't want to

provide the styling I totally get it like you don't even have to provide all of that styling so I'm going to just fast forward this video I'll create a div first of all and inside this div we're going to be providing these classes so you know let Me just highlight there for you we going to be providing these classes so you can totally pause the video once again and provide there now I'll create my H1 and inside this H1 we're going to be providing these classes and now inside this H1 I'll just write like expense

tracker and now I save my file and this is how it looks like baby that's looking cool and now underneath this H1 what do you want to do we just want to create our D With a class of space on the y- AIS of four and also margin for the bottom will be set to six and inside there let's just create our input field with the type of text and also the value will be set to description and when somebody try to type something inside there so we are going to be firing this function which

will be equal to the set description and let's just Prov our event. target. value inside there okay now outside from there we going to be also providing our Placeholder which will say like expense descript DC r p TI o and now let me just save my file and finally we have to provide these classes to it for the styling so let's just go back so you guys can see everything a bit better and that's looking cool yep we are getting what expense and that's looking great that's going to be for the first one I'm going

to create yet another input field with the type of number in this case because we're going to be taking care of The amount and here we have to specify the value of amount that stat which we just created up above and when somebody try to typee something inside this we are going to be firing this function which will be set to or set amount and here we have to specify our event. target. value if that is triple equals to empty string so we're going to be setting that to just empty string but if that's not

equal to empty string then we are going to be getting the value of the And we also have to convert that value to a number because we are now working with the amount and we have to convert that amount to a number so we can convert our amount to a number by just using this number Constructor you know let me just highlight there we can use this number Constructor for there or there is another way if you guys take my JavaScript course you guys probably know that but if you don't that's completely okay so now

I can totally remove that And change there with this plus symbol that's everything that I have to do for this input field now I'll also provide the placeholder to this so I'll just use like placeholder which will say amount now underneath there I'm going to also provide these classes today that's done now finally we have to create our button which will allows us to add our expense or remove our expense or on and so forth so I'll just create a button with the level of add expense and here when Somebody clicks on their button not

change but on click so we're going to be fing this function which is a handle add add expense okay we're going to be firing this function and we also have to provide these classes today you can totally pause the video and just type there if you wanted to now let me take care of this ad expense so I'm going to copy the name of there go to the top and use that right here so what do we want to do first of all we have to create our Handle h n DL yep the spelling is

correct and we have to create this aror function then we're going to be checking if our description dot God damn it d s c r i p t i o n if or description. trim we want to remove every single empty space from there if there is equal to empty string or the amount is equal to empty string so in that situation we don't want want to do nothing but we only want to return that's going to be it okay but if that's not the case we're going to be Adding our expens so how are

we going to be doing there you'll just use our add expense function which is coming from our zust store and we have to provide the ID and ID will be set to dat. now and then we also have to specify the description and for this description we are going to be taking the from our state like this one and finally we have to provide the amount so I'll just write like amount and amount will be set to a number and we can just specify our Amount or we can just write a plus and it's going

to also convert there to a number so that's done now underneath that we also have to clear out our description and also our amount input field so we can just say like uh set description empty this out and then set amount empty this out and that's done okay so this how we are going to be adding our expense but now the question is how are we going to be rendering there like I can totally add expense Right here I can provide some sort of amount to there if I click on this so it's going to

empty this out but we cannot see the result of there so now to see the result of there underneath this button then we are going to be iterating over through or expenses so I'll just use like ul and this UL will take the classes of spaces on the y axis of four and margin for the bottom will be set to six and now inside this Ur we're going to be trading or uh through our expenses Like expenses which we are now getting from or Us store right here like we now iterating over through all of

our expenses and what I'm going to do is that I'm going to be fing not even fighting but I'm going to be using a map method which will take a arrow function with the perimeter of expense not expenses but just expense okay and then we have to create this Arrow function and inside that we're going to be creating our Li and that Li will take Like the key and the key will be coming from our expense. ID and we're going to be also providing these classes today and now inside this Ali what do you want

to do first of all you want to create our span and classes will be text Gray of 800 and also font will be to semi Bol and inside this Pence first of all we have to render the expense description so I'll use like expense. description and then what do you want to do we just want to render our description right Here like uh let's just use our expense. amount. to fix and we want to just fix there with two characters or two numbers like let's suppose we have some sort of amount with the numbers of

20 dot uh this amounts we want to remove every single thing and we only want to provide these two numbers right here so for that we are now using this fixed method right here okay so if you want to learn more about that I already explained all of their topics in my JavaScript so if you Guys care about that you can definitely go ahead and watch my course on there oh I made a mistake I'm going to have to cut that and then we have to create a span with a class of text PPL of

600 and inside that then we're going to be rendering or expense there we go now finally we also have to create a button which allows us to remove our expense I'll just write like button and when somebody it clicks on this button we are going to be firing this function which Will be a remove expense which is coming from our store and we're going to be providing our expense. ID inside there now let me go ahead and just write uh Delete delete would be fine and I'm going to also write some sort of a sample

like X I'm going to also style there so let's just provide a space and provide these classes you can pause the video and provide these classes by yourself if you wanted to and here you can see we're now getting that expense So now let me just refresh there I'll right like um he computer with the amount of 4 million and add that so here you can see we now getting our uh yeah the description and also the amount and now if I click on the delete this can also delete there now what I'm going to

do is that now underneath this UL we're going to be creating a d with the class of text all Center and now inside the let's just create our H2 with the class of text text of 2 XEL and the font will Be set to semi Bol and text will be set to totally purple and then 700 this is right this God damn it oh my God 700 there we go and write a total expenses expn s and here we're going to be rendering our entire expenses so I'll use like span with a class of text

only purple and 600 and finally we have tried our dollar symbol and now let's just use our expenses. reduce method on there and on this reduce is going to take the total and also for the accumulator value We're going to be providing our expense right here our expenses but just expense and then we have to use our total plus our expenses. amount and then we have to provide the comma and we want to accumulate the by zero and then we going to be getting some sort of a random value like 20 point something something we

want to just only prefix there with these two characters or two numbers so for that let's just use our DOT to fix method and here we have to specify only Two and now if I save my file and here you can see we're now getting a total amount and if I write like some sort of a I don't know I don't know and some sort of amount and click on the add expense so it's going to add there right here and then I can add something something else and then yep another amount just going to

add there right here so that was our expense tracker by using reactjs TN CSS and zustan and also typescript welcome to the Call of Duty Ghost Edition I'm your host Charlie I mean um moist I mean penguin z0 okay let's just build our project so what I'm going to do is that I'm going to just open my terminal and inside this terminal what I'm going to do is that I'm going to use npm create be at latest and hit enter I'll give it the name of password generator I'm going to choose reactjs with timecrimes there

now that's done I'll also install a zoo and hit enter so it's Going to install a zo stand inside my project next I'm going to go into my TN CSS go to the framework guides go to the weed copy there place it here and paste it anyways and yep hit enter one more time to initialize T when CS is inside our project that's cool and everything so I'm going to open that in my vs code so I'll use like code dot it's going to open that in my vs code time to go to our tailin

config file I'll use my tailin config and replace the with this New one copy the index. CSS uh stuff and replace it with this one and also copy this H1 from there go to my ab do not CSS ab. TSX and remove every single thing from there and I'm going to use my R fce sem my file and replace that with this new one finally let's just run there by using npm run Dev go to my local host hit enter so it's going to open there right here and that's looking cool so what I'm going

to do is that I'm going to just make a bit of cleanup so We don't need the SS folder the app. CSS folder we need the app do I mean like index. CSS folder file and I'm going to also remove the public folder and that's done and now let's just start working on our store let's just create our store. TS file and here first we need the create function from zust and underneath that we have to create our custom Hook by defining use password uh store and here we have use our create method and let's

just Pro our Callback function with the name of set and that's going to be it so what I'm going to do is that I'm not going to waste your time by defining the interface but I'm going to just place that interface right here let me go back so you guys can see everything a bit better first of all we have our password St or store whatever you want to call it it's going to take the property of length which will be a number it's going to take the property of include numbers Which will be a

Boolean then include sample then include uppercase include lower case generated password set password which will be a function and the rest of these will be a functions too and toggle number then toggle sampol then toggle uppercase toggle lowercase and generate password so there our state or interface to be precise so now let's just annotate or create function by providing our password State like so I'm going to save my file and go into my Store first we have to provide our length and length will be set to 12 that's going to be just my initial value

okay we also have to provide the initial value for the include numbers which will be set to true we also have to provide for the include sampol or samps rather this going to be set to false we also have to provide therefore the include uppercase that's going to be set to true we also have to provide therefore the include lower case and this can be set To True once again you also have to provide therefore the generated generated password and generated password will be set to empty string so then done now we have to Define

like how we are going to be changing ing these St so to do that I'm going to be creating first of all the set length function which will allows us to change your length Okay so I'll just write like length as a perimeter to this function and we're going to be using This set method and here we just have to provide the value of our length which we now taking as a perimeter for this function so that's done now we also have to specify the toggle number and that's going to be a function two so

here it's not going to take any perameters but now we're going to be providing a set method and inside there let's just your State method it's going to also take the call back function all provide the perimeter of state and here we only have to get First of all our include numbers and that's going to be set to not state. include come on include numbers there we go so if this value gives us true this will make it false if this value gives us false it's going to make it true so this is how we

going to be toggling that number okay now I'm going to also put a comma there and we also have to create our toggle symol function and here we have to once again Define our Arrow function and let's just provide our set Method it's going to take a St and what we want to do is that we want to just find this function like so and let's just get our include sambols that's going to be equals to the not state. include sambols in this case once again if this is true it's going to make it false

if this is false it's going to make it true once again okay now we also have to create a toggle uppercase and here we have to specify our callback function let's just proide our state Inside there what the hell am I doing and here we have to get our include uppercase upper case and that's going to be still St do include uppercase finally we also have to get our toggle lower case and that's going to be equals to this thir function or you know what the hell am I do that's going to be equals to

this Arrow function and it's going to take a set as a perimeter and also we have to provide our St inside there and once again include uppercase in this Case and then then that's going to be not equals to A st. include and this shouldn't be uppercase this should be include lower case because now we are working with the lower case values that's done and now for the final function which is a generated or generate password that's going to be a bit complicated so just create this function right away like so and what you want

to do is you just want to find this set function it's going to take a state As a perimeter and we have to provide our callback function today and inside this callback function first we have to Define our numbers I'll use like numbers and we're going to be starting our number from 0o through 9 let me just place there then we also have to create our symol so I'll just write like cons sbol Sy ym B LS and symbols will be equals to so if you just hold shift and hit one so it's going to

give us this one if you hold shift and then hit two 3 4 5 and so on and so forth okay so yeah this is going to be our symbols and create uppercase lat so I'll just write like cost uppercase it's going to be equals to all of the uppercase letters starting from a through z okay then we also have to create a lower case so I'll just use like lower case it's going to be equals to all of the lowercase characters starting from a through z next we have to Define our character so I'll

just use like uh characters and It's going to be equals to this empty string now we have to provide a lot of checks okay so if or st. include numbers so in this situation we're going to be getting that characters this variable which we are now defining right here and then we're going to be using the plus equals to the numbers from our state like these numbers okay so that's going to be for the first one and now you know let me just duplicate there a few times now we're going to be changing this Value

like we have include sambols and then we're going to be using the sbol right here like sampol there we go we also have to change that to the include uppercase and change this number to the uppercase and finally we have to change this includ numbers to the include lower case and we have to change that to the lower case there we go now underneath there what do you want to do we just want to create our password so that password will be equals to this empty String and now we have to iterate over through our

St I'll use like for let I equals to zero and then I is less than state. length Okay and then i++ so where in the word is our St if I hold control and how over this and if I click on there here is our state which is a perimeter for this function okay so yeah now we are going to be iterating over through all of that state then we're going to be getting our password variable and which is that password Variable which we just defined a few seconds ago and that's going to be plus

equals to that all of that characters and here we have to only get the random password like the random character out of there we can get a random character by using math. floor everybody knows there and then excuse me m. random and then we have to multiply the by the length of our characters so we're going to be using like characters. length so basically it's going to gives us a Random character each time now we're iterating over through there and finally we just have to return our uh generated password and that's going to be set

to our password so that was a lot of explanation now finally we also have to export our function like export default let's just write export default and use password store like so and that's all done but I don't know why we are this error from and it took me a lot of time but finally I figured out like why we Are getting this error here you can see we are now setting this generated password to string and now we are returning the generate password right here this shouldn't be generated it should be generated so now

let me just replace there with got this generated pass oh my goodness what the hell am I doing today let me just copy this generated copy that from there and put there right here like so and now here you can see that it is now successfully Gone but we also made a typo right here this should be l n GT I'm going to copy there and now here you can see we're also getting this name so then was there about four our state next we're going to be implementing all of that state inside our component

time to create our components I'll create a folder with the name of components and then generate or password generator. TSX let's just use our RFC inside there go to my app. TSX and Remove this return statement and replace that with our password generator and you know what I'm going to cut that first of all we need a d with the class of minimum height of screen height of screen like so background will be gray of 50 F will be also set two items and then Center justify will be set to center now inside the let's

just put our password generator and here you can see we are now getting our password generator which is looking cool the First thing that I want to do is that I want to import my used password generator and we have to use that right here so now we are going to be importing a lot of data like we're going to be destructuring a lot of data so what are we doing here you can see we have our constant then we are now destructuring all of the data from where use password generate or use pass use

password store to be precise so we are now destructuring the length set length Include number toggle number include symbol and then toggle symbol include uppercase toggle upper case include lower case and then toggle lower case generated password and then generate password okay so now we're going to be importing all of that next we have to take care of this UI I'm going to remove this password and provide a bit of classes to this one so now let me just Place The Styling and inside this T what we want to do we just want to create

our H1 with the class of text 2 Excel and the font will be set to totally B margin for the bottom will be set to four and here I'll just write like password generator sa my file and yeah we are getting our password generator which is looking cool now underneath this H1 we are going to be creating a d with the class of flex and flex will be set to column and GAP will be set to four inside there we're going to be defining our empty div and inside this D let's Just create our label

for the HTML 4 I'll just write like length and here I'll just write like password length like so l e n GT there we go I'm going to also provide a bit of classes to this I'll use like block text to is small and font will be set to medium and text Gray of 700 so that's going to be our label now underneath this label we also have to Define our input field so I'll create input field with a type of text or you know what instead of a text we we have To change that

to a number and then the ID will be set to a length and also put the value and value will be coming from this length here you can see we're now grabbing the there from our use store now we have to put that inside or value now when somebody types something inside they we're going to be firing this function which will be a set length once again which is coming from our store and we have to convert that to a number by using this Constructors all use like Event. target. value or we can use just

a plus so I'll remove that and just write a plus it's going also convert that to the number there we go now I'm going to also provide the minimum value which will be set to four and the maximum value will be 6 to 64 four okay so now let me just save my file and this is how it looks like but finally we also have to provide these classes for The Styling and here you can see we are now getting our input field with the type of Or the value of 12 and where in the

word is this 12 coming from this 12 is coming from this length right here okay now underneath this div what do you want to do we just want to create yet another div with the class of flex and items will be set to Center and inside there let's just create our input feeld with a type of check box and also provide our check and check will be equals to the include numbers include numbers which is coming from our store and then when Somebody change them we're going to be firing this toggle numbers underneath then we

also have to create a label with the class of margin for the left will be two text will be set to small and I'll just right not provide HTML for God damn it and for the label we will just say like include numbers and that's going to be it there we go and here you can see we are now getting our checkbox and we are now getting our include number which is looking cool now we also have to Duplicate there like a few times so I'm going to just select this first one we're going to

be duplicating there for the sbls you also need to duplicate the for the upper case also for the lower case and generate password so yeah here I'm going to go to the top one that's already done okay so instead of providing this include number I'm going to change that to include symol come on include symol s y m b o LS and then toggle uh sbls and here also change this Label to symbols like so change this one to include uppercase this one and also change this toggle one to toggle uppercase and also change this

include to include uppercase and then letters like so now let me change this value instead of writing include numbers I'll write like include lower case and then toggle lower case change this one to include lower case letters like so and we don't need this one so I'm going to just remove that and I'm going to also remove this label and you know what we also don't need this so I'll just also remove that create a button and yeah it's going to say like generate password when somebody clicks on this button we're going to be fting

this handle generate come on handle generate password function which is going to be just a oneliner function which we're going to be creating right now and provide a classes to this one right here I'm going to copy the name of This and go to the top and create this function right here which is going to be just a one lineer function okay so let's just create our cons handle generate password that's going to be equals to this Arrow function now we are going to be only firing this generate password function from our store and that's

done okay and finally we have to render our password somewhere so that we can see what we got okay so we going to be rendering there underneath this button And I'll just say like if we have the generated password then we want to show this UI so I'll use the end operator and then we want to show this D with the class of margin for the top of four and piring for yeah ping all around will be set to four background will be set to gray 100 and totally rounded large inside this Dev create our

paragraph with the class of text totally large and break will be set to all and here we have to set like generate or generate Pass C generated password there we go now let me save my file this should also be a generated password and here you can see we are now getting our password generator which is looking cool so if I just remove the include numbers include samps and everything and if I just set that to the include numbers and click on the generate password so it's going to gives us only the numbers if I

also want to get like the sambols so I'm going to just provide a symbols and remove this Number so I'm going to click on the generate so it's going to only give the state symbols if I only want to get the uppercase letter so I can just put uppercase letter and for that we also have to provide some sort of yeah I'll just provideed uppercase letter so it's going to only giv us uppercase letters and now if you want to get like the lowercase letters so now if I click on this it's going to gives

us a lower case one and if I want to get like all of Them so I can just check all of them and generate the password now it's going to give us only 12 characters but now you want to change that to like I don't know maybe 100 maybe and then I can click on this generate password so now it's going to give us all of that generate password and if I want to only get just a numbers and here if click on that so it's going to only giv us us a number and that's

going to be a very strong password to remember so yeah that was our password Generator by using reactj Zeus typescript and tailin CSS Oracle I want you to give me update about the Scarecrow I mean the penguin I mean the kitten I mean the penguin yeah okay so let's just make a setup so I'm going to go into my terminal and I'll use npm create weed at latest now we are going to be building a meal Ms and I'm going to choose reactjs with typescript go into the mees and use npmi to install every single

thing inside There also install zeust so use npmi zeust it's going to install in my project I'm going to open that in my vs code now I'll also go to my TN CSS go to framework guides we and copy there place here hit enter to initialize there and I'm going to also copy this cont content go into my yeah twiin there we go and then I'm going to replace this content with this new one I'm going to also copy these components and go into my index. CSS and replace that with this new Components now let

me just make a bit of cleanup so we don't need the public folder SS folder ab. CSS folder now let me go into the app. TSX file and replace it with this AB dot yeah just would be fine and finally let me test this out so I'm going to copy this H1 and place it here and use my npm rund de to run my server and open that server right here but God Local Host 3000 3,000 we are not using Create react app and yep that's working totally fine now let me go ahead And Define

my store. ts and first of all we would need the create function from the zeust library I'm going to save this file now we have to export our use tour you can give it any name that you like and let's just create our store it's going to take the call back function of stad and inside there we are going to be also providing our St with the name of meals and here we just have to store the inside this array we would also need our search query and search query will be Set to empty string

I'm going to also put the set meals function and here we have to specify the meals and now let's just use our set method and provide my meals inside my meals what the hell am I saying and then write a set search query and provide my query there and it's going to take a set as a preter and here we also have to provide our search query search query and that's going to be equals to this query so now let me just add a bit Of typescript to there so first of all let's just create

an interface for the Mals so I'll write like interface and then Mees and inside there the ID of the meal and this can be set to string then we have a stir meal the name so this can to be also set to string and then we have a stir M thumb like for the image and this can be also set to a string underneath that we also have to Define an interface for our store all right like store dot not dot but just a store State Prov our meals inside there that's going to take a

meal of array and we also have to specify our search query which will be set to a string not a comma but closing tag and now let's just use our set meals and here we are going to be defining our meals and it's going to take a meal is our array and finally we have to return the white from the so I'll use a white and then SE search query it's going to be taking a query as a perimeter like query that's going to Be a string and here we also have to return white from

there okay this should be meal so I'm going to copy there and place that there and also there now let me inate the with or store start and close them now that's done but I'm going to also provide my me me right here all use like meals and annotate that with this one and this one should be a string to that's to done and we are now to done with our store and also or state now let me use the inside our component so I'll Just create a file or folder with the name of components

and inside there we're going to be defining our m. TSX this is use our RFC inside there go to my app and remove this H1 just create a section and inside this section Define or render or Mees inside them sa my file and check this out yep we are getting our meals remove them now the first thing that I want to do is that I want to get my store so use like use store from where not from zeust but from our Store there we go we also need the use effect so I'll just import

the right here because we're going to be fetching our data and which means like we're going to be doing some sort of a side effect so for that we going to be using the use effect so I'll just use like use store and from this use store we're going to be destructuring a few things so now let's just destructure first of all the meals then the god meals in low case then search query and then set Mees And set search query like so and this should be a constant now let me fetch my data so

to fetch the data we're going to be using the use effect so now let me go back and inside this use effect we're going to be providing our call back function and just provide our empty dependency or you know what that's it's not going to be empty dependency array here we have to specify the set meals and now here we're going to be rendering our data so I'll just use like fetch M Since can be equals to the asynchronous function and inside this ASN function we're going to be using our try and catch block so

for the catch I'll just log to the console but you know let me just use like console. error if you got some sort of error so we're going to be logging there we use like error fetching data or something and here we are going to be rendering our error inside there now for the tri block what you wanted do we just want to use our a and then fetch Our data from this URL okay and I'm going to also store them in the response variable like so and now underneath there what do you want to

do you want to convert the data to the Json and I'm going to also store there inside the data variable and now we have to set that to our meals so now here we have to specify our data do meals and that's going to be it for fetching or data but now let me call that function right here like so and then I'm going to hide this Use effect from here now we are fetching our data totally successfully so now we have to render that data inside our down I'm going to provide these class names

to this first div and now inside this div what you want to do we just want to create our H1 which will say like C food and recipes I'm going to provide these classes to this one let me just sve my file and here you can see we're now getting our c food recipes which is looking cool now underneath there we Going to be creating an input field for our search so just input field with the type of text the placeholder will just say like search for a meal and you know what do do dot

would be fine for the value I'll provide the search query and also whenever someone try to type something inside there so we're going to be firing this function which will say like uh search query and it's going to take the event. target. value and now let me just save there and we also have To specify these classes to so let's just test this out so here you can see we are now getting what input field I know this is looking not that cool but yeah we are getting there so then stly done so now I'm

going to go to the top and filter my meal okay so what I'm going to do is that I'm going to just create a function with the name of like filtered meals and it's going to be equals to this meals. filter method and here we have to specify our meal inside There and what I'm going to do is that I'm going to just write like if meal. St Meal which will be the name of that we also have to make that as a lower case and then we're going to be checking if that includ ludes

the search query and I'm going to also make this search query to lower case I'll just write like uh to lower case like so and I'm going to also execute them now we're going to be trading over through this filter products and if you have some sort of a Filter product we're going to be rendering there but if you don't have any filter products then we're going to be rendering all of the products so what I'm going to do is then now underneath this input field we're going to be creating a div and inside there

let's just check if we have the filtered meal and then let's just use our length. Z like if we have some sort of a filter meal in this situation we are going to be rendering one UI but if that's not The case then we're going to be rendering another UI let me just take care of this else class then we're going to be taking care of the first one so I'll just create a paragraph and I'm going to also close them manually and here what do you want to do we just want to write like

no Mals found or something like that now we have to over through that mail so we going to be using like filtered meal and let's just use map method on there and here we have to Specify our meal and now inside there we're going to be creating a DA and inside this D let's just close this D right here just like there we're going to be providing a key which will be a mail. ID mail and also we have to specify a classes today so let's just proide these classes we're going to be first of

all rendering the image so I'll use like IMG tag for there and close there for the source I'll provide like me. St me thumb which will be the Thumbnail of their specific meal I'm going to also provide the alternative text and alternative text will be a meal meal and I'm going to also provide a bit of classes today which will be these classes now let me just save my file and we are not getting anything so you know what let's just go to my inspect element go to the console and cannot read the property of

undefined using filter so we did me something wrong and I found out that bug here I'm using data. meal but It should be meals with s so now if I just save my file and refresh there and here you can see we now getting all of that images right here you can provide more styling to there if you wanted to but I'm not going to so what I'm going to do is I'm going to go to the bottom and let me take care of the rest of the UI so I'll just create a H2 with

the class of AUD this is word H2 which will take like meal. meal and I'm going to also provide these classes to it you Should also provide these classes and underneath there let's is s a paragraph with the classes of text great 600 and also text will be set to totally small it's going to say like delicious Seafood meal dot there we go and that's everything that we have to do and now I can filter something so let's suppose if I want to like filter this specific meal I can totally proide there and now it's

going to only giv us their specific meal I can also search for something else Like fish pie yeah copy that and place it here and now we getting fish pie like twice and yeah there was how we going to be fetching our data and how we can store that data by using zeen and how we can do a filtering by also using zustand forgiveness can be powerful even for the Unworthy my wife F taught me the cratos God damn it that was a huge voice for a Creator so you know what let's just make a

setup I'm going to open my terminal right here let me zoom in a bit And use npm create create with at latest I'm going to choose reactj but first of all I will give it the name of like form Builder and I'm going to choose reactj with tcri let's just go into the form Builder and install every single thing inside there that's done I'm going to also install zeen so let's just write npmi and zust so it's going to install that in project so that's also done now let me open that in my vs code

next we will also install T CSS I'm going to Click on this getting started go to the framework and guides go to the weed copy this command and play right here inside our terminal like so I'm going to hit enter so it's going to initialize my T CSS and while this doing that I'm going to copy this content go into my tailing config file and replace it with this new content I'm going to also go into my index. CSS so let's just go into index. CSS and replace it with this new one finally I'm going

to copy this line of Code go to my app. TSX remove every single thing from there and I'm going to be using rfn and replace there with this with this H1 so now let me open my terminal and use PM run Dev and then I'm going to write my Local Host right here and yep everything is working the way exp to work I'm going to also do a bit of cleanup so I'll just remove this public folder from there also the SS folder app. CSS and then I'm going to go into yeah I guess that's

going to be Fine okay so now let's just Define our store. TS I'll import my zust my create function from the zoo and then we are going to be creating our custom hook so I'll just create a constant with the name of like use form store it's going to be equals to the create function and here we just have to specify our set method and also our aror function like so and inside this aror function what do you want to do first of all we have to Define our initial STS I'll use like uh Form

fields and that's going to be equals to this empty array so now let me Define my interface right here with the name of uh what do we call it form and then Fields like so and what I'm going to do is that I'm going to provide my label and label will be string and the type will be a few types so we can accept the type of text we can also accept the type of number we can also accept the type of password and also the text area and the date come on date and Also

finally we can also accept the files okay like so and now underneath there we're going to be also providing the value and the value will be set to string now that's done now the next thing that we have to do is that we have to Define our interface once again and the interface name will be form store stad and inside there first of all we have to Define our form fields and which will be coming from the form field which we just defined up above and that's Going to be array now I'm going to also

provide a function which will be add field which we are going to be defining in a few seconds so it's going to take a field as a perimeter and this can be equals to this form fields and now we are going to be returning the white from there we will also create the remove field function and can also take the index and index will be a number and we have to just return white from there I'll just use like a update field and It's going to also take the index and index will be a number

it's going to also take the updated field and the updated field will be a form field which we just defined up above and we're going to be returning a white from the finally we just have to write a reset form and that's going to be my arrow function which will only return the white from there so now our interfaces are totally done so I'm going to copy the name of there and put there and annotate there Right here just like that we already specify our state the next that we have to do is that we

have to create our add field and it's going to take a field as a perimeter and now let me just create my function with the with the state property and here and here we have to specify our state like so and we are going to be returning the form fields from there and first of all we have to make a clone of our St form fields which we have to find up above and then we are Going to be adding that new field which we now taking as a perimeter for this function so that's also

done next we have to take care of the remove field so write like remove field and here we have to specify our index and inside that we going to be using our set method so it's going to take a St as a perimeter and we are going to be using let's just right there and we are going to be using the form fields and form field will be coming from st. form fields. filter Method we have to provide our underscore let's just write our underscore and also we need the index which means like we don't

need the value like the filtered value but we only need this index right here okay so that's why I'm providing that there and here we only have to check if our index does not equals to the perimeter of that index which you are now taking there as a perimeter so then we just want to remove that specific field I'll also provide the Update field so it's going to allows us to update our field by providing the index and also the updated field as well okay so it's going to take the set and here inside this

set we're going to be providing our call back function by providing our state as a perimeter and inside then we are going to be providing first of all our form field so if you want to get them we going to be using state. form fields and then we are going to be trading over through all of that By using our map method here we have to specify our field and also our index okay then we have to check if our index is triple equals to which means like equals to or index in this situation we're

going to be returning our updated field but if that's not the case we going to be only returning or simple field like that now underneath this one I'm going to also put a comea there finally we have to write our reset form and then we have to specify our set Function and from this set function we're going to be only returning our form field and this can be equals to this array and what am I doing wrong uh yep here we have to specify this comma and that's toally done finally we have to export them

so we can use in other file so I'll use like export default and then use forms store like that so yeah the store is not tot done next we have to jump into our component and use them okay so now let's define our form Builder I'm going to go ahead and create my components folder and inside there we're going to be defining our form builder. TSX and let's just use our RFC inside there go to our app. TSX and registered there right here I'm going to remove there and provide my form Builder and import it

right here let me check this out and yep we are getting our form Builder which is looking cool first thing first let me go into this component first of all we have to import A lot of thing from our use form store and we have to execute there so what I'm going to do is that I'm going to be restructuring a lot of things like for instance we're going to be destructuring the form Fields also the end field and remove field update field and reset field okay reset form to be precise not a field and

now underneath there what we have to do we have to Define our initial State con New Field and then set new field it's going to be equals to the Used it and now inside there we going to be providing a label and which will be set to empty string we're going to be also providing a type and the initial value will be set to text I'm going to also provide the value and the value will be set to this empty string so what I'm going to do is that I'm going to also Define an interface

for the or type whatever you want to call there and I'll just give it the name of like new field and inside there we're going to be Defining what label l a l yeah and then that's going to be equals to A String we're going to be also providing the type so you know what let me go ahead and copy all of their type from here I'm going to copy this entire line and place it right here and next we also have to provide our value and value will be set to string okay so that's

totally done and I'm going to annotate my state by using that new field right here and I'm going to close that next I'm going to go Into the UI and start working on my UI I'll Place The Styling so you can totally pause the video and provide the styling by yourself I'm going to also write H1 and inside they I'll just use like form Builder and also provide a classes to this one and now underneath there we have to create our form or you know what not a form let's just remove there we have to

create a d with a class of flex and also Flex will be set to column margin for the bottom will be set To uh six like so and inside this D we're going to be defining our input field so right like input with a type of text and we're going to be providing a name of label today I'm going to also provide the placeholder which will say like field label and also provide the value which will be coming from the new field. level and when somebody try to type something ins there we're going to be

firing this function which is a handle field change and I'm going to Save my file right now so this is how it looks like I'll also provide a classes to this one and I'm going to comment this line out for a few seconds check this out and Yep this is how it looks like right here I know it is looking awful but we are now getting there now underneath this input field let me just go back we're going to be defining our select area I'll use like select and we are not going to be providing

any names and IDs to them so let's just remove That from here and what I want to do is that I want to just put a name of type and also the value will be coming from the new field let me just write a new field. type and here we have to write on change when when somebody tried to write something inside there still we're going to be firing this handle change function once again and we have to provide that same styling right here to this component as well so now let me just hit enter

and inside there we're going to be Providing a few options so I'll just write like option and for the first one I'm going to set there to text and let me just write a text and I'm going to duplicate there a few times so that's going to be the first one so now let me just change there to a number and also change these one to the text in lower case text area and this one to the DAT and finally these last one to the file okay so I'm going to just make as uppercase so

this one will be uppercase N uppercase t and uppercase D and finally uppercase F now need this select statement what do you want to do we just want to create a DAT with the class of flex and justify will be set to be wi and inside there let's just create our button and the type will be a button as well and let's just put our own click event handler when somebody clicks on there we're going to be firing this function which is a handle add field and it's going to say like add field right Here

I'm going to also provide a classes to this one save my file now you need this button what you want to do we just want to create yet another button with uh classes a lot of classes but it's going to say like reset form or it should be a reset like so the type will be set to button in this case and when somebody clicks on there we are going to be firing like reset form function and provide a classes to this one let's just proide these classes I'm going to save My file so obviously

it's going to gives us an error I'm going to comment this line out I'm going to also comment this line out and comment that line out okay so now if I save my file I know they're not looking that great but yeah we can totally work with that if you wanted to so we can totally change the styling of there and by the way if you are grabbing this code from my GitHub repository the UI will be completely changed I'm now recording this course and I am in a Super hurry so that's why I don't

have a lot of time to provide a cool looking UI but when you grab this score from my giab repository you will see a lot of cool uis so I'll just uh iterate over through all of the form field and provide my field and also the index inside there and here what do you want to do we just want to render our form field component which we going to be creating in a few seconds and we have have to specify the key as a prop and It's going to take the index and we also have

to provide the field and it's going to take the as a prop we're going to be also providing the own update and when somebody update that we're going to be firing this handle field update function and when somebody tried to remove them we're going to be firing this handle field remove function so now I'm going to sve my file and first of all we have to comment these line out now that's looking cool but first of all we have to Take care of like how we're going to be adding the form how we going to

be changing the form and so on and so forth so now let me just uncomment all of these uh functions so I'll will just uncomment that one uncomment this handle change function and also handle add field that's going to be my first function and then hand reset form and we're going to be taking care of the rest of them in a few seconds so you know what let's just Define our Functions right here so first thing first how we are going to be defining our handle add field function like how we are going to be

adding our new field so to do that we're going to be finding this handle add field function it's going to take a arrow function and inside that we have to use our add field and here we have to specify our new field and that new field is coming from this St next we also have to provide our set new field and inside that we're Going to be providing a label come on let's just write a label and label will be empty string we're going to be also providing a type and type will be set to

empty string or you know what not empty string but we have to specify text inside there and also so the value will be set to empty string like so so this how we going to be adding our field and now let's talk about how we going to be changing our field like when somebody try to type something inside that input Field we're going to be firing that function which is a handle field change and it's going to be equals to this function so it's going to take event as a perimeter and also what do you

want to do we're going to be doing a lot of things but now let me just annotate the first of all we're going to be first of all annotating there by change event and then we have to explicitly tell it like we can either use the inside our HTML input element or we can use the inside Our HTML select element or we can use the HTML text element text area element to be precise so that's the first thing that we have to do now we are totally able to use this so what I'm going to

do is that from this event Target I'm going to be destructuring a few things so you know let's just destructure the name and also the value out of this uh event so let's just write our con right here just write a con God damn it and I'm going to just use like set new field and here Inside then we have to specify our previous field and then we have to make the clone of our previous field and then we have to just use our name and provide the value which we are now grabbing from this

event. target. value okay so that's done identify expected oh here we have to use triple dots like so now let me just save my file and this how we are going to be defining our handle field function next we also have to take care of the handle field update so I'll just Create a function with the name of handle field update and inside this it's going to take a index as a perimeter and I'm going to just annotate that with a number like so as a number and I'm going to provide a comma there let's

just also write like updated field and it's going to take a new new field which we've already defined up above okay so I'll use like update field and here we have to specify the index and also the update field right here now let me just save my File and we're going to be ping the this function as a prop to this function like handle field update oh that was handle field update and I'm giving it the name of yeah the name is totally correct now let me also take care of the handle field remove so

I'll just use like handle field uh not change but remove like so and it's going to take an index as a perimeter and we have to annotate there with a number okay and I'm going to use like remove field and Provide my index inside there which we taking as a perimeter so now let me just save my file and that's tot done now we have to provide there as a value for our component so I'll just uncomment there now let me go ahead and create this form field component inside my component folder so I'll use

like form field. TSX and let's just use our rafc inside them and import my form field component right here okay so I'm just going to take a key the field and also these two Functions so now let's just destructure them I'm going to zoom in a bit and the first thing that we have to do is that we have to restructure a lot of things like the field the index and also the own update function and the own remove function from there now let me just save my file so obviously my typescript compiler will freak

out and what I'm going to do is that I'm going to just place this interface right here and this interface is huge like form field Interface so now inside there we're now defining our field which will have a label and that's going to be a string it's going to also have a type and type can either be a text number password text area dat or file we are also providing a value which is now set to string we are also providing a index which is now set to number and when somebody try to update the

or use that update function so it's going to take a index as a perimeter and we are now Providing a number as a type to there and then on the updated field it's going to take that same property which you are now defining right here and finally it's going to just return the white and when somebody try to remove something so it's going to take a index as a perimeter and that's going to be a number and we're going to be returning the wi from there okay so now let me just side there I'm going

to copy the name of there and annotate my component like so so I'll Use like react. FC for the functional component and here we have to provide our home field props right here so now if I save my file so this is how my component looks like and now let me go into the UI and implement this UI so I'll just hit enter right here and provide a styling to the first div now inside this div we are going to be using our label and for this label let's just remove our HTML form and here

we are going to be rendering our field. label So let's just use our field. label like so I'm going to also provide a classes to this one to style and now if I save my file and obviously we're going to be getting some sort of error because we have to use all of that stuff and provide this on update and also that functions why in the world are we getting these errors are we not providing a handle change function that's why we getting that error I'm not quite sure about that oh here you can See

this is my mistake instead of providing a handle update not update but this function you know what uh this handle field change I'm only providing this handle change so now let me just replace that and now if I save my file and test this out so I can now provide anything I want I can choose the number and I can add there so it's going to add there right here but now let me just take care of the rest of their stuff so now let's just go into our field Component and render all of that

stuff so not need this label I'm going to first of all use my field. type not file but field card if i e there we go field. type if there is triple equals to the text area so in this situation we're going to be rendering the text area like so but if that's not equal to the text area then we're going to be using like field. type f i l d field oh my goodness what the hell is going on with my ID today so I'm going to copy them and Place it right here if

that is equals to the file then we're going to be rendering another UI then once again we have to provide another expression and inside this expression we're going to be providing another UI so you know what let me just take care of this first one if the field. type is equal to text area so in this situation what do we want to do we only want to return our text area like so and I'm going to close there and inside this text area we're going to be Providing our value and value will be coming from

the field. value do value like so and we are going to be also providing the own change Handler and when somebody tried to type something inside there we're going to be firing this handle change function which we are going to be creating in a few seconds next we're going to be also providing a UI to the for The Styling and now for this second one if the field. type is equal to the file so in This situation we're going to be creating our input field and inside this input field we have to provide the type

and the type will be set to file and when somebody tried to type something inside they were going to be firing this handle file change function which we are going to be creating in a few seconds and for the UI I'll just put a border and also the Border will be set to to pray of 300 and also totally rounded large and now for the final one we going To be Crea an input field with the type of uh the Ty type should be dynamic so I'll just use like field. type if I El D

like so field. type and here we also have to specify the value I don't know why I'm getting an error so I'm going to copy and place it right here and for the value we're going to be checking field. type triple equals to the file so if that's the case then we have to just provide empty string but if that's not the case so we're going to be just Getting the field value radio like so and this should be a field so now let me just place that there now outside from there if somebody type

something inside this input field so we are going to be firing this handle change function once again and for this UI we are going to be providing these styling so now if I save my file so this is what we are doing first of all we are checking the type if the type is set to text area we're going to be rendering The text area and also the content will be coming from the field. value and we're going to be also attaching this on change event handler then if the type is set to file so

we're going to be providing a file as a type if the type is not the file and also not the text area then we're going to be grabbing all of that uh stuff you know let me just show you there then we're going to be working with the text number password and that okay now everything is cool but Finally let me just create a button which will allows us to remove all of that stuff so I'll just use a remove button it's going to take the type of button and now outside from there when somebody

clicks on there we're going to be firing this function which is the remove or just uh God damn it on remove there we go it's going to also take index as a perimeter and provide a classes to it okay so that's totally done so now let me just take care of This function like we have a handle file change and we also have a handle change so let's just go ahead and go to the top and here we're going to be defining our function so first of all we're going to be defining our handle change

function and somebody triy to type something inside that input field so we just going to take a event as a object and and here we only have to use our uh own update function it's going to take a index and it's going to also first of all make a Clown of all of the field f i e l d there we go and then we're going to be providing a new value and the new value will be coming from the event. target. value and we are only allowed to do them on the react. change event

like so and we can use that on the HTML input element or we can use the on the HTML text area element and now let me just close there so that's the first function that we have to write now for the second function which is a handle file change I'm going to create T right here so cons handle file uh yeah file change and it's going to be equals to this function once again and it's going to also take event as object and now here we're going to be updating this so now let's just use

like one update and provide my index to them and here first of all we have to make a clone of all of the fields and then we have to provide a new value today and the new value will be coming from the event. target. files in this case Because we now working with the files and once again we have to provide a types for this one so I'll use like react. uh change event and then we are going to be only allowed to use the on the HTML input elements now this is going to be

the expression so if we have the event. type. files so in this situation we're going to be using the array. from and here we have to specify like event. target. files but if that's not the case so we only want to provide The empty string okay so now let's just iterate over through there so let's just go back and I'm going to provide a file as a name and let's just use our file. name and now from this one we're going to be getting a join method and you want to join there by only providing

a comma in space okay so that's only done and this shouldn't be a recording start this should be a react there we go reacted now that is looking cool and everything should be working the way we expect him To work and I just realized that I made a few mistak so let's just go ahead and go to the form component and here we have to specify our index so I'll just write like index come on index and that index will be coming from this index which we now providing as a function or perimeter to that

and also here you can see I'm using a flex twice so it shouldn't be a flex I'll just provide a separator or Dash to it now let me just save this file and let's just try this Out I'm going to just refresh there and I'll give it some sort of a name like um text input or or my text input would be fine and I'm going to only choose the text one so now let me just click on this add field and it's going to add there right here now I can totally write whatever I

want to write I can also totally remove there if I wanted to now I can also select the number and I'll write like um bank account numbers only or something like that and now if I hit Enter so it's going to gives us this input and now we are not allowed to type anything else except numbers okay so we can totally add them I can also click on the reset form so it's going to reset my entire form right here okay so I'll just write a gibberish right here and provide a text area or change

that to some sort of a description area or something I'm going to click on this add field and it's going to gives us this text area right here I can also add like some sort Of dead and my birth or enter your birth day or something like that now if I click on this one so it's going to gives us this field right here where I can choose my birthday or something now I can also select this field I proide a custom field so I can just click on ADD there and here you can see

it's going to add there right here so I can click on this reset form so it's going to reset all of the form so yeah that was it about four or custom form Builder you Can't fight who you are K you lose Agent 47 tickets on sale now let's just open our terminal and make a setup I'm going to zoom in a bit and the first thing that I want to do is that I want to use like npm create we at latest and then the name will be to do let's I know a lot

of people will think huz like to-do list is just a simple application but yeah let me show you how simple it is so I'm going to go into the reactjs and choose typescript go into the to-do list And use npmi to install every single thing that's done I'm going to use npmi and then zeust turn to install zean inside this project that's also done and now let me open that in my vs code and search for the TN CSS go to the getting started and go into the framework and guides choose we copy this command

place it right here inside our terminal it's going to take a bit of time to install T CSS inside this project hit enter on the npx create or npx t CSS n-p and now I'm Going to copy this content from there go into my tment CSS and replace it with this new content copy this index file so I'll go into the index. CSS and replace it with this new one okay and let's just test this out by going into our app do TSX file remove every single thing from there and replace there with this new

H1 I'm going to also remove this public folder SS folder ab. CSS folder and the rest of them will be totally fine so let's just test this out I'm going to Use npm run Dev or what you call it Local Host yep it is working the way we expect him to work okay keyboard lower so let's just create our store. TS file and import create function create function from the zoo so this now we have to Define our use store and that's going to be equals to the create function which will take a call back

function they're going be also providing this Arrow function and create our todos as our initial value and Define our Interfaces so I'll just go ahead and Define my interface for the too and inside they provide the ID and ID will be set to number text will be set to string and also completed will be a Boolean flag okay that's also done I'm going to also Define the interface of to-do store and inside there let's just Define our to-dos which will be equals to their to-do which we just created up above and also Define our add

too and then too will be coming from this to-do And now this going to be equals to this eror function and also provide our remove to-do which allows us to remove or to-do by using this ID I'll also return the white from there and provide our toggle to do and okay and here we also have to specify the ID and ID will be set to a number and return white from there now what I'm going to do is that I'm going to provide my air to-do right here so I'll use like air too and here

we have to specify our to-do inside There and let's just use our set function and for this set function we're going to be providing our state and then inside the St first of all we have to grab our to-dos and make the clone of what existing to do by using state. todos and then I'm going to provide a comma here add this new to-do which we are now taking as a perimeter okay that's also done now underneath this add to-do we going to be also defining a remove Todo function which will take ID As a

perimeter and also let's just use our set method and provide our St them and use our Todo first of all let's just provide this syntax and then we have to use our to-dos grab our todos by using state. todos do filter and once again we are going to be using the filter method to provide our ID to this all just us like to do and here we just have to use to-do do ID if that to-do do ID does not equal to that ID which we are now taking as a perimeter for this function that

Function will only remove that specific to-do next we also have to just toggle or to-do so I'll use like toggle to-do and provide my ID to them and now we have to use our function okay so inside this function we have to use our set method and provide my state to them and now what do you want to do we just want to get our todos like our entire todos and you want to get there by using using state. todos and itate over through all of them so I'll provide my to-do as a Perimeter and

let's just use if for too. ID is triple equals to this specific ID then you just want to make first of all the clown offer to do and we have to provide our completed flag to it okay so completed flag will be equals to not to do which means like not to do. complete which means like let me just what the hell am I saying today okay so I'm going to explain this code in a few seconds but now we have to just provide the class and for the El class let me just Put it

to do okay that's a lot of JB so now let me just cut that from here we don't need to provide all of that nonsense so let's just remove that and also remove these ones and then we have to provide this expression once again now I sa there so this is how it looks like right here and we also have to annotate there so that we can remove all of that errors I'll use like to do store and annotate there with this new one so this is how it looks like let me just Say that

here you can see we're now providing a set method which will take a arrow function and here we are also taking our Str first of all we are just mapping over through all of our to-dos and then we are checking if our to-do do ID is equal to that ID which we are now taking as a perimeter for this function so in that situation we're going to be first of all making a list or a clown of for existing to-do and we have to provide this completed flag to it like We are not interested in

any of the to-do we are only interested in this specific completed flag so if that statement is true we're going to be converting that to false but but if their statement is set to false we're going to be converting there to true if there is not the case then we're going to be only returning or to-do that's it okay so finally we have to export this so we can use the inside our file and I'm going to export that by using Default so let's just use our export default and then use store like so so

our store content is now completely done time to use the store inside our component so I'll create a file with the name of components and then to do list. TSX use my RFC inside there go to my app and remove this H1 and render my to-do list component right here so the first thing that I want to do is that I want to grab every single thing from my store so Let's just zoom in a bit and let's just use or use store right here and what I'm going to do is that I'm going to

just grab a few things from my store I'll change that to const and use my to-dos and then add too and also remove to-do toggle to-do we only want to grab all of them now underneath we're going to be also defining our set for our input so I'll use like input uh or input value rather and then set input value in value and going be equals to this uh use State Function not store but use State function and inside this Us St function the initial value will be set to empty string now for the UI

I'm going to remove this uh to-do and provide this classes to it and now here we're going to be creating yet another de with the class of these amazing classes so now let me just go back and inside this div we going to be defining our H1 and I just say like to do or you know what to do like so and list I'll also provide a Classes to it now let me just save my file T this out let's just refresh there and we are getting some sort of error and that eror is coming

from the subscri oh that is coming from the Subscribe we're getting there from The Zo and there is not what we want so we have to use our use store we have to grab that from our store now let me just save my file and and refresh there and here you can see we are now getting or to-do list which is looking cool now underneath This H1 what do you want to do we want to Define another D with the class of legs and then items will be set to totally Center and margin for the

bottom will be set to four and inside this table let's just Define our input field with the type of text and the value will be coming from the input value which we just Define right here there we go and when somebody try to type something inside there we're going to be firing this function which is a set input value And here we have to specify event. target. value inside there okay and I'm going to also provide a placeholder which will say like add um a new too or to do there we go and provide these

classes to it so that it looks a bit cool and this is how it looks like right here which is not that impressive to be honest but yeah it is looking cool now underneath this input field we're going to be defining a button which allows us to do this I'll just use like add and Here I'm going to provide the on click event handler when somebody clicks on this button we going to be firing this handle add Todo function and we also have to provide these classes to it now let me copy the name of

the and Define this function right here so let's just use our cons handle a to do and this function first of all we have to check if we input value. Rim like if we don't have any spaces inside our input field we want to check that if that is equal To empty string if the user did not specify nothing then we only want to return like we don't want to do anything else in there and now we have to add what to do and if you want to add what to do we are going to

be first of all providing the ID and the ID will be coming from dat. now we're going to be also providing a text and the text will be coming from this input value so I'm going to copy that and place it right here and provide my comma and also for The completed flag we're going to be setting there to false and now need this a to do we're going to be also setting or input value to empty string like we just want to clear this out now let me save my file and that's done so

we are not only able to add or to-do like whenever I click on this it's going to empty out our input field but we cannot see their to-dos so to see there we have to go ahead and render there right here I'll use a UL with the class of space on The y- axis will be set to three and now it read over to all of the todos by using the map method and provide a too as a perimeter inside the let's just use our lii and here we have to specify the key and the

key will be coming from the too. ID and also provide these classes to it so now inside this lii what do you want to do we just want to create a div with the class of flex and items will be set to Center and inside this div we're going to be creating our input field With a type of checkbox and then we also want to provide the check St it's going to be check if you have to do do completed so it's going to either gives us true so if it gives us true that will

be checked but if it gives us false so that's not going to be checked so now let's just also provide the own change Handler and here whenever somebody try to type something inside there we're going to be firing this toggle to do fun and it's going to take a TOD do. ID and Now outside from there I'm going to also provide these classes St so now if I save my file and here you can see this is how our checkbox looks like if I add another item so it's going to also give us that checkbox

once again and now underne this checkbox we want to show our label okay so I'll use like span and this span will only render the Tod do. text so now if I save my file and here you can see it's going to gives us their text but now let me just format the B Okay so I'm going to go ahead and put a classes to it and that classes will be done Dynamic so for that we have to use our template literal and here we have to render or too. completed flag totally dynamically so if

you have a completed flx so in that situation we're going to be using this uh styling like line three and also text will be set to gray of 400 like if our state is completed so then we're going to be using that styling but if that's not the case so we're going to Be setting that to text to gray of 700 like so so now if I save my file and here you can see both of them are now set to this line through but if I uncheck one of them it's going to remove that

line and also that styling okay so that's what this line of code means now underneath that we also want to create our button which allows us to remove that specific to-do so I'll just use a button with the level of delete and whenever somebody clicks on there we Going to be firing this function which will take like remove to-do and here we have to specify the to-do do ID to it okay so now outside from there we're going to be also providing these classes to it so now let me just save there and this is

how it looks like right here let's suppose if I want to delete this one I can click on there so it's going to delete there if I want to remove this one as well so it's going to also remove there I can also add like walk the dog Click on the add so it's going to add there I can mark the S check I can also totally delete if I wanted to I can also say like walk the fish in this case and click on the ADD and it's going to add there and and I

can say like record the uh react native course and now if I click on this one so it's going to also gives us there I can also totally remove there check and remove there so yeah that was our basic to-do list application by using reactjs typescript Ze and also T CSS what happened Rick I thought we ain't the good guys anymore huh I'm a better father than you Rick I'm better for Lori than you man cuz I'm a better man than you Rick and that was The Walking Dead dialogue and I hope you guys appreciate

that because I put a lot of efforts into it so now let me open my terminal and make a set of four or amazing amazing amazing projects now let me zoom in a bit and use npm create we at latest the name will be notes I'm Going to choose reactjs with typescript go into the notes folder and use not NES but just a nodes folder and install uh every single thing which needs to be installed for the rejs now that's done you're going to be also installing a zoo stand inside your project that's also done

so now let me open there in my vs code let me zoom in a bit and the first thing that I want to do is I want to go into the tailin CSS and go into the framework guides choose we and copy There from there and put it right here inside the terminal so it's can install the inside my machine so that's done and copy the content from here go into the T CSS and replace it with this new content like so save my file let me also copy the go into the index. CSS and

replace it with this new one I guess the rest of them will be fine but I'm going to also remove this public folder s this folder f. CSS folder and I'm going to also remove every single thing from this f. TSX and replace them with this new H1 so I'm going to copy them and place it here then s my file and open my terminal use npm run Dev to run there okay so let's just use our local host or whatever and now here you can see everything is working the way we exp to work

but we would also need something called the react Quil or or Quil whatever you want to call this so this is going to be the main website so if I click on there here let me just click on there here is the Main website basically we're going to be using this qu to Tender or editor so here you can see we can totally change that to Bard we can also change that to italic or underline and we can also make it as a link if you wanted to we can make the as what do we

call it as a order list unorder list lots of stuff with there so we are going to be using the re Quil which will gives us this editor totally for free so how are we going to be installing there let me go Back and go to this react Quil once again here I'm going to go to the bottom this is how we going to be installing this I'm going to copy this line of code and stop my server once again and place this react quill right here there we go and I'm going to hit enter

so it's going to install inside my so that's done now I'm going to go ahead and create my component right here or you know what we're not going to be creating any component but I'm going to just remove This H1 and replace it with this div sem my file and I'm going to copy these two line of code this just copy them and put them right here on the top so this how we're going to be importing and using the re Quil inside our project okay so now let me go ahead and create my store.

and first of all we would need the create function from the Ze turn now underneath that we have to create our use noes tool and it's going to be equals to this create function create Function and inside this create function we have to specify our callback function and now inside this callback function uh we're going to be doing a lot of stuff but first of all image Square interface so what I'm going to do is that I'm going to Define my nodes and notes will be equals to this empty array we're going to be also

providing a search field because we're going to be also searching for nodes and we would also need the editor content which will be Set to empty string we're going to be also keeping track of the note color and that's going to be equals to totally white color we also need the current note index and the current node index will be set to know okay so I'm going to go ahead and create a type for there so let's just use like interface with the name of node and inside there let's just use our text with the

type of string and color with the type of string as well now underneath that I'm going to be Placing a huge interface and now let me explain that here you can see we have one not State interface and inside there we have one notes which will be coming from this note right here like we have a text and also the color which are both set to string and we also have a search field which is set to string editor string note color string current note index which will either be a number or a no and

the initial value that to now and we have a set noes function which will Take update notes as a perimeter and return white and then we have a set search function which will take search value as a perimeter and return white and then we have a set editor content set note color Set current node index and add over update node and we also have the select node Okay so so this is how my interface looks like now I'm going to copy the name of there and annotate my create function with this uh what do we

call it no ST now underneath That we have to Define our set nodes and this can be equals to the updated up d a t updated noes and here we have to use our set method and for this set method we are going to be first of all providing our notes so I'll use like notes and notes will be coming from this updated notes from up above and now underneath them we're going to be also providing set search field and it's going to take a search value as a parameter and now inside this one we're

Going to be using the set method and here we have to just use search and the search will be coming from the search value which we also Define up above and now let's just use our set editor content it's going to take a Content as a perimeter and we're going to be using the set method one more time and here inside then we have to use what do we call it editor content and that's going to be equals to this content and now underneath there we're going to Be using the set note color and this

going to be equals to the color and here we have Ed the set and inside this set first of all we have to get the node color so we're going to be getting there by using this node color and we have to Define this color with the that's also done now underneath this one we have to also provide the Set current node index it's going to take an index as a perimeter and we have to use our set function inside there and here we also Have to Define our c current node index and that current

node index will be set to newly added index now let me just save my file and that's going to be every single thing for the functions and now we are only left with two other functions so now let's just go back and create the nend or note update and or of De no to be precise and we are going to be creating a b of there but now let me also Define the select note function as well so it's going to take a index and Also I'm going to create a body of them in a

few seconds okay so let's just sa our file okay here we are making two mistakes let me remove this in and here we also have to provide the separator and that's going to be fine now let me take care of this end or update function so inside the or you know we're going to removing this curly braces from there and let's just use our set method and provide our state today first of all we have to restructure a lot of things from This state so to destructure then we're going to be using the con resert

keyword and we're going to be destructuring the editor content the node come on the Node color and also the current node index and also all of the nodes from the St now we also have to check let me just go back and we also have to check uh and we're going to be checking if the editor content. trim which means like if we have some sort of a spaces inside there then we're going to be also checking Once again the editor uh note index if there is not come on if there is not equals to

no so what we want to do in that case we want to update the existing node so how are we going to be doing there first of all we need the clown all for existing nodes and I will just clown there and I'm going to sore that clown value inside the updated nodes variable like so and next we can modify this so to modify them we going to be using our updated noes once again and we have to Specify our current node index and that's going to be equals to this newly created object and inside

then we have to specify our text and the text will be set to editor content and we also have to provide the color and the color will be set to note color like so and now underneath this if statement we only have to return this object which will have the notes this is right in notes and notes will be equals to this updated notes and also underneath there we have To specify our editor content and our editor content will be set to empty string and we also have a note color and I'm going to just

proide there like totally empty not empty string but totally white color now I will also use the current node index and set there to now I'm going to send my file so that's going to be the first if statement now outside from there you know what let me just highlight this one so here you can see we have our highlight R all just Proide else class but if that's not the case what do we want to do in that situation we only want to add a new to-do so to add a new to-do we're going

to be just returning an object and we're going to be using our notes and first of all we have to make a copy of our existing notes and then we're going to be providing a text and that text will be set to edit her content and also we have to change the color and the color will be set to new color okay from up Above and also we have to use our editor content and set that to empty string and provide a note color which once again will be set to totally white color and the

current node index will be set to null like so this function is totally done I'm going to go into this select nodes function and remove this curly braces from there and now I'll use the set function it's going to take a St as a perimeter and inside there what do you want to do we want to use our current Node index and the current node index will be equals to that index which we are now taking as a perimeter for this function and we're going to be also providing the what do we call it the

editor and the editor content will be equals to the state. nodes not color but nodes there we go and here we have to specify the index and then we want to get the text out of there now I'll also take care of the note color and the note color will be equals to state. nodes and Here we want to get the index of that specific color and that's going to be it finally we have to export this so we can use the other files we going to be using like export default and then use node

store and that was our entire store so you know what let's just use the inside our component so now inside the app component I'm going to use the use node store to import there and we're going to be restructuring a few things from there or you know what every single thing that We've defined inside our store I'll use like editor content also the the note color the current note index like so and the set editor content set Noe color and the add or update function from there so now that's stly done the next thing that

we have to do is that we have to go to the UI and I'm going to style there a bit so I'll just Pro a classes of height will be set to tot the screen and flex so now inside this D we're going to be rendering our what do we call it our Side bar component in a few second which we going to be creating there but now let me just take care of the main are area so now let's just save this file and take care of the main area so I'll just create a

div with a class of with will be set to 2 out of three and then pairing will be set to add and inside this div we have to specify our text editor which means like we have to use our react Quil so now underneath that we have to just call or react Quil which we Are also importing right here we have to call that and we're going to be providing a few props St okay so what I'm going to do is that I'm going to provide the placeholder which will say like write your note here

dot dot dot I'm going to also provide like some sort of a theme to this so the theme will be set to snow and also I'm going to style this I'll just write like height will be set to 96 background will be set to totally white margin for the bottom will Be set to Two Rim and close them and here you can see we are now getting our text editor I can also write something I can totally format there if I want to like I can make the italic I can make that ball or just

a normal or something like that I can also make it as a link if I wanted to so let's just select them and I can also yeah the this one yes we can also specify our link and so on and so forth so now our reu is working the way we expand him to work so now Underneath there what we have to do we have to provide our color selector so let me also create a color selector right here so I'm going to create a with the class of flex and also margin for the left

will be set to arbitrary value like one rim and I'm going to also Pro like items will be set to Center margin for the top will be set to four and space on the xaxis will be set to four as well okay so now inside this D we're going to be creating our input field With a type of uh color in this case because we're going to be providing a color not text or numbers or something like that and I'm going to also provide the value and the value will be that node color from up

above okay and when somebody try to type something inside that then we're going to be firing this function which is a set Noe color and then we have to use our event. Target uh target. value right here and also I'm going to provide a class name and the Class name will take like with will be set to Two Rim or not Two Rim but 10 would be fine height will be also set to 10 and padding for all around will be set to one for a border and round it set to four I'm going to

save this file now underneath this input we are going to be also creating a paragraph which will say like choose a note color or something like that so now let me test this out so here you can see we have our input field and now we can choose different kind of Colors from there so which is also looking cool now finally we have to create a button which will allows us to save our changes so use like save button and now underneath there we're going to be creating a button which will first of all check

if the curent node index is not equal to no so in this situation we going to be saying like update the node but if that's not the case we will just say like save the node like so and when somebody click on this button we are Going to be firing this add or update function right here I'll also provide these classes to it and yeah you can also provide then so now let me just save my file and I will also render this AI outline plus come on AI I guess I didn't install the react

icons so you know let me just install the npmi and then react uh react icons like so that's toally done let's just use our npm run there one more time and now we have to render there right here so I'll use like AI outline and then plus come on Yep this one so I'm going to hit enter and I'm going to also provide a classes to it so I'll just write like margin for the right will be set to two so now if I save my file and here you can see I know the UI

is not looking that cool the UI is looking a bit weird because we're using a flex right here and we are not providing any sidebar to this so if I just remove this Flex sa my file and now this is how it looks like right here I'm Going to provide my Flex box or Flex once again now for this react Quil I'll also provide the value and the value will be coming from the editor content and also on the on change event handler we're going to be fting this set editor content I can write whatever

I want to write I can also totally edit if I wanted to and I can also choose a different color and I can save there okay so once I save there like everything is working the way we expect Him to work but finally we have to just create the sidebar component and that's going to be it so I'll just create a file or even a component folder and inside that I'll have like sidebar. TSX I'll use my uh RFC inside this save my file and render my sidebar component uh right in here yeah save my

file test this out so here you can see we are now getting our sidebar which is looking cool and now let's just zoom in a bit the first thing that I want to use that I want to use like use node store and I'm going to execute there okay next we will also destructure a few things like the nodes also not a note color let's just go back the nodes and also the search and also the select node and set search now underneath them we're going to be defining our filtered node so I'll use like

filtered nodes and that's going to be equals to the nodes and now we're going to be filtering there and to filter there we will provide a call Function of node to there and now inside this one what do we have to do you know we don't even have to put that parenthesis we can just use like do text. to lower case we have to first of all change that to lower case like so and then we have to check if that includes the search. to lower case we also have to change that to lower case

methods now I'm going to save my file so it's going to giv us that filter data and you know what let me just render That right here so what I'm going to do is that I'm going to just remove this sidebar from there and I'll will provide a classes of with will be set to one out of three background will be set to totally white pairing for all around will be set to four and Shadow not SM small but large now inside this div you want to create our div once again with the class of

flex and items uh items will be set to Center and margin for the bottom will be set to four okay so I'll Also use the fa or you know fi search right here for a search uh icon I'll also proide the classes of text will be set to totally extra large margin for the right will be set to two and now underneath there we're going to be defining what input field with the type of text and I'll also provide the placeholder which will say like search nodes dot dot dot and also I'll provide the value

and value will be a search value which is coming from our store we Can also provide the own change event hander and it's going to take a callback function and let's just use our set search right here and for this set search we're going to be providing our event. target. value and now let's just s there and a bit of styling to it so I guess that's going to be fine now let me check this out so here you can see we're now getting more search field but I don't know why this is looking super

weird let me just take care of that and I just realized that I made a mistake I'm going to cut this div from here and I'm going to put there right here at the bottom like so so now if I save my file and test this out so now that's looking better now let me also take care of the notes so I'll go to the sidebar once again and finally we have to render all of our list so for them I'm going to be using like noes list and render all of my list right here

okay so I'll use a div inside this div I'll first of all Check if you have the filter nodes. length if that is equal to or greater than zero so in this situation we going to be rendering one one UI if that's not the case then we're going to be rendering another UI and I'll just create a paragraph which will say like no new nodes and I'll just close this paragraph right here just like that and now for this one we have to render our first UI so first of all we have to iterate over

through all of four filters So I'll use a map method for that so it's going to take a note and also the index and here we have to specify our div so I'll just write a div and I'm going to close them and close this D like so okay so inside this D what we have to do well you know what first of all we have to provide a few things today so I'll provide a key and and key it will take as a index and we're going to be also providing the own click event

handler when somebody try to click on Them then we are going to be firing this select note function and here we have to specify our index so now if I save my file next we have to also provide a classes to it and now inside this D we have to provide our content the first thing that we have to do is we have to create the color circle and to create them first of all we going to be creating a d and that we're not going to be closing there like this we're going to be

Closing there as a oneliner I'm going to put a class name and a class name will take like width of four and height will also be set to four because we're just creating a small circle and that's going to be totally rounded and also margin for the right will be set to and let's just also put a classes to it so I'll just write like classes and here inside the we will first of all change the background color background color like so and that's going to be coming from The node do color and I'm going

to also provide the border and border will be set to one pixel not two but one pixel solid and totally black color and now what I want to do is I want to just write some sort of a note I'll also choose the color of there and I'm going to just choose some sort of a pinkish not a pink color but purple color now I'm going to save there and once I save that here you can see that color right here or that Circle to be precise now Underneath we're going to be creating yet another

div and which will have the class of trunk head and also it will have a property which is a dangerously inner HTML property and here we have to just specify Das Dash HTML and for this HTML we're going to be providing our not. text Casi here we also have to specify these curly braces once again and now that's totally looking better so now let me explain what in the world is this dangerously set inner HTML so in Reactjs this dangerously set inner HTML is a property that allow you to set HTML content directly within a

component it is also named this way to highlight the potential risk associated with injecting the HTML cont such as like cross side scripting XS attex if the HTML content is not properly sanitized you're not going to be using the in the production but we are just creating this simple application so that's why I use that so I want you to keep that in mind and what I'm going to do is that I'm going to just test this out so I'll just write like I don't know uh walk the dog or something like that I'm going

to choose a red color for them and save that as a node I'll also write like something cool and now I'm going to just highlight this cool and bold there and change the color of there to something I don't know kind of a greenish color would be fine and now I'm going to also save this note and here you can see we Are also getting that styling we can also write like um amazing stuff as a note and I'll just select this first one and underline there I'll also choose a color for there like kind

of a orangish or yellowish color and now if I click on the save not so it's can also save there now I can also search for a specific uh not so let's suppose if I want to search for like something it's going to give us that something cool if I want to search for the amazing so it's going to give us That amazing stuff if I want to search for like walk the dog so it's can also give us there and that was our n project in reactjs do you know what insanity is insanity is

doing exact same thing over and over again and expecting to change says who says my grandma God Rest her soul she is the most wonderful woman in this entire the universe okay so the first thing that we have to do is that we have to make a set of four or amazing and advanced level Project so what I'm going to do is that I'm going to make a setup so let me just zoom in a bit so you guys can see everything a bit better and I'm going to be using npm Create we at latest

and then I'm going to give it the name of like Advance task list I'll choose reactjs and typescript let's just go ahead and go to the advanced level uh task this and I'm going to be using npm Mi to install all of the packages now that successfully done I'm going to also Install Ze so I'll use like npmi and then Z it's it's going to install them in my machine I'll also install the react icons and then I'm going to open the inside my vs code so I'll use like open Dot and this is how

things looks like so I'll just go ahead and remove the public folder SS folder app. CSS and remove every single thing from the app. TSS or TSX I'm going to go into the app and remove every single thing from there I'll also go ahead and use the npm Run Dev to start my server so I'll use like npm run Dev and then I'm going to use the Local Host it's going to run there I'm going to also go ahead and go to the tailin CSS and install tailin CSS inside my project so let's just go

ahead and copy this command open the terminal and place it right here I'll just place there I'll also hit enter so this can initialize the tment CSS inside my project so I'll just copy this content now let me go ahead and go to our tailin Config file and replace them with this new content I'm going to copy this tailin I mean like index. CSS components and I'm going to place that there finally let's just test this out so I'll go ahead and go to my app and replace the with this Dev like so now let

me use mpm run Dev so it's going to start my server I'm going to go there and here you can see everything is working the way we expect him to work so that was our basic setup of our project okay so Now first thing first we have to Define our store so I'll use like store. TS and now inside there we are going to be doing craziness we are going to be writing a lot of code so we use first of all import the create function uh create function from where from the Zain library and

now we have to Define our store so I'll use like export and then cons use store it's going to be equals to the create function which we now importing it's going to take a set Object and inside this set object we're going to be performing a lot of craziness but I want you to bear with me for a few seconds because first of all we going to be defining a lot of interfaces and then we're going to be writing a data based on those interfaces so now let's just start from the first thing first of

all we're going to be creating an interface for the list and inside there we going to be providing a name and the name will be totally a String we're going to be also setting there for the Emoji and Emoji will be set to a string and that's done we also have to create an interface for the workspace we use like interface and let's just create a workpace and here inside there we have to define the name and the name will be set to string and the Emoji will also be set to a string okay now

underneath there we have to take care of the to-do so I'll just go ahead and uh create an interface for for The I'm going toate with a text and text will be a string I'm going to also provide a list and this will be a string the workspace come on workspace will be a string as well and sa my file now we have to Define one of the biggest interface in this entire course so we are going to defining the interface for word for or App State and this app state will have a lot of

state and a lot of data inside there so let's just start from the first one first of all we're Going to be writing our list and then list will be coming from this list which we just defined right here okay so that's going to be our list I'm going to also provide the workspace so let's just use our workspace and we are going to be annotating that with our workspace which we just a few seconds ago I'm going to also write the to-dos and here we have to anate the with or to-do interface and then

we have to write the edit index it's going to be either a number or a Null value now we have to also write the drop down index it's going to be either a number or a null value and then we have to take care of is list model open that's going to be a Boolean value so we have to annotate the is workpace model open and here we also have to inate with a Boolean and then selected list and we have to inate with a string then selected workpace and also annotate with the string one

more time then we have to create our to-do text and that's going To be a string also have to create our model name a string and then the model Emoji come on model Emoji that's going to be a string as well it should be 1D then the model type and model type will either be a list or it's going to be uh come on a workspace so let's just write or workspace or it's going to be a null value I'm going to also write the add list and for this ad list we're going to be

using a name and that name will be a string we also have to provide the Emoji I'm going to provide a comma there and the Emoji it will take as a string and here we have to return wide from there I'm going to also write the ADD workpace and for this add work space we're going to be providing a name name will be a string and also the Emoji will be come on emoji will be a string as well and we're going to be returning a white from there I'm going to also attach the a

to do and here a to-do will be taking a to-do and now we have to annotate the With or to-do interface which we just defined up above and return white from the update to do and then uh it's going to take the index and index will be a number and then updated uh to do and B at to do which we just Define up above and we are going to be returning a white from there now let me take care of the delete come on delete uh or delete to do it's going to take the

index and index will be a number and we are going to be returning a wi from the this just take Care of the handle edit and handle edit will take the index and that index will be a number and we're going to be returning a white from the handle update and same exact thing like it's going to take a index and index will be a number and we are going to be returning a wi from there then handle drop down click when somebody clicks on there it's going to take an index and index will be

a number and we are going to be returning a white from there now we also have to Create for the set edit text and here it's going to take a text as a perimeter and text will be a string and return wi from there and then set edit index and then it's going to take index as a perimeter we're going to be annotating there as a number or it should be come on what the hell did I just do it should be a null value so either a number or a null value and we're going

to be returning a wide from there and now let me Define a few more and then I promise That's going to be it okay so I'm going to define the open list model and this open list model will take nothing it's going to only return the white then Clos list model also not going to take anything and we're going to be returning white from there and then we have the close workspace model and it's not going to take anything once again it's going to return the wi from there also set selected list and here we

have to provide a list and list will be set to a String and we have to return the white from there and then the set selected workspace going to take the workspace as a perimeter we have inverted as a string and return the white from there close there we're going to be also using a set to do text and now we have Prov a text inside there and return we like annotate the with a string and it's going to return a white now let's just create handle a to do and then we are going to

be just returning this white function And now we also have to get the set model name and here we have to provide a name and annotate with the string and going to return wide then set model Emoji it's going to take the Emoji and that emoji we're going to be annotating as a string and return white from there let's just use a white and now we're going to be using set model type and for this set model type uh we going to be providing a type so type will either be a list on let's just

write a list or it Can be a workpace okay and finally we going to be uh returning the white from there and then we going to be using the handle save model and we have to return nothing from there just a wide okay wide there we go now let me S my file and that was our basic basic interfaces so first of all we create interface for the list then for the workspace then for the to do and finally we created there for the ab state so now let me just copy the name Of there

and annotate my create function with this AB Strate so I'll just use like f Strate and close there and now we have to specify a values for then so what I'm going to do is that first of all I'm going to be defining my list so it's going to be set to just an empty list or array I'm going to also specify the workspace and workspace will be once again list and then to do we have to provide that array once again then for the edit index we're going to be setting The initial value to

no and then the error text and we're going to be setting the initial value to empty string then for the drop- down index uh we are going to be setting that to initial value of now then is list model open open initial value will be set to false and then is workspace model open the initial value will be set to false and then for the selected list come on let's just WR a selected list and we're going to be sing there to empty string and then set I Mean like selected workspace and we're going to

Beering there to empty string now underneath there we have to write a to- do text and annotate with empty string and also the model name will be set to empty string the model Emoji will be set to this string and the model hi will also be set to no now we have to Define our functions like how we're going to be changing our states so let's start from the first one which is a add list like How we are going to be adding our new list uh it's going to take a name and it's going

to also take the Emoji we already annotated there and now we just have to use the set method in this set method we'll take the state and here we have to use that state so we're going to be using like list now we have to otate with dot dot dot State first of all and I mean like state do list and then we have to use the name come on name and also the Emoji I'm going to save this File but we are getting some sort of an error I know these errors are coming from

the typescript but where in the word is this error coming from oh that's because we have to write a curly Braes there I'm going to cut that and place it right here and that's done this is how we going to be adding our new list now let's talk about the workspace like how we are going to be adding a workspace all use like add work come on it is doing that for me now I'll write like The name and also the Emoji and here we have to use the set method I'm going to be using

a state and inside there we have to Define our workspace and here inside this workspace we're going to be getting there from the St workspaces uh or spaces was there a space or a spaces let me just check this out okay it was a workspace so yeah we also have to write a workspace right here I'll remove them and for a comma it's going to take a name and it's going To also take the Emoji I'm going to save this file now I'm going to go ahead and Define how we're going to be adding a

to-do so I'll use like add to-do and now it's going to take a to-do inside there now we use the set method once again it's going to take the state and for this state we're going to be getting our to-dos from where from dot dot dot the state do too or to-dos rather and now we have to just specify or new to-do to there which we are now taking as a Perimeter and we are now passing that right here okay so that's or a to-do now let me just take care of updating the to-do so

I'll use like update too and here we have to take the index and also the updated to do and now uh we have to use the set method it's going to take a state and for this St I'm going to go ahead and first of all Define my new to-do so I'll use like cons new to-do or to-dos rather and first of all we have to make a clone off or existing one if We have something so we're going to be using state. toos so it's going to allows us to make a clone off or

existing to and this should be const we're getting a lot of these curly Braes but you know what let me just remove this annotation from here so that we can remove all of that errors and I'm going to add it back in a few seconds so this how we going to be adding a new to-do then we have to get that new to-do and I'm going to place that right here and Provide that index which we now taking as a perimeter and we have to provide there and then we have to set that to this

updated to-do so I'll use like this updated to-do copy the name of that and place it right here that's done and finally we have to return some sort of a data from there so I'm going to be using uh what the hell is wrong oh we have to remove this parenthesis and also that parenthesis from there now we have to return a data so I'll just use like for The to-dos we're going to be adding a new to-do for there and also for the ER index uh we are going to be attaching a n value

initially and also for the edit text we're going to be setting that to empty string so now let me just save my file and that's going to be it for updating the Tod so just collapse them underneath this updating to do we have to Define yet another function which will allows us to delete the to-do okay so let's just use like the index and Here inside there we're going to be using our set method it's going to take a state as a perimeter and here inside there we have to first of all get all of

the todos from where from the state. todos and then we have to use the filter so let's just go ahead and use a produce. filter filter we are not interested in anything but we are interested in the index so I'll just go ahead and use like if our index does not equal to that index which we are now Taking as a perimeter so in that situation we only want to remove that specific Todo and we also want to make a drop down index come on uh what the hell did I just do God damn it

okay so I'll just use like drop down index it's going to be set to the initial value op n I'm going to provide a comma there now that's looking better so this is how we are going to be removing our to-do or deleting or to-do now underneath this delete to do we have to also create a Function for handling the edit so I'll use like the handle edit and it's going to take an index as a perimeter and inside that we have to use a set method it's going to take a state and for this

St what we have to do we have to first of all Define our edit index and we have to provide the index value which we are now taking as a perimeter from there now we have to use the edor text and now I'm going to inate with the state DOT and now let me just put index inside there Do text now we have to use the drop- down index and now we have to set that to totally null value like this I'm going to also collapse there and now we have to create for the handle

update so it's going to take a index and now inside there we have to use a set method once again and provide our state and now for this one we're going to be first of all defining our updated to do and how are we going to be doing them this is how we are going to be doing this so First of all we have to make a clown of our existing state. toos and provide our index inside there which we now taking as a perimeter from there okay I'm going to also provide a text and

the text will be set to state. edit text come on and edit text and that's going to be done so now underneath this update to do what the hell am I doing this should be updated too now underneath this updated Todo we have to Define our new too so I'll use like cons new too and it's Going to be equals to this object like this array and we have to make a clone of our existing set. toos like so and then we have to use our new todos inside there and pass our index which we

now taking as a perimeter and set that to this updated to- do underneath that we are going to be turning the todos and also we are going to be setting the value of there to new todos and then a index will be set to this now yes I'll use like edit index and set there to no I'm going to also provide the edit text and set there to empty string okay so yeah that's going to be it so I'm going to comment or collapse that next we have to Define our handle drop- down click so

let's just use a handle drop down click and then it's going to take index as a perimeter now we can use a set method and for this set method we have to specify a state index now inside they we're going to be using a drop down index if the index is equal to the State. dropdown index so in this situation we are going to be setting the value to null but if that's not the case we going to be setting the to this index which you're now taking as a perimeter that's going to be it

for the handle drop down click now let me take care of the set Ed text so I'll use like set edit text and annotate there with a I mean like not annotate but it's going to take a text as a PR and now I'm going to be using a set method once again and Here inside there we have to use the Ed text and provide the text value which we are now taking as a perimeter right here I'm going to provide a comma Now let me also take care of the set edit index and here

it's going to take the index as a perimeter and now we are going to be using the set method and provide our edit index and change that to index which we are now taking as a perimeter a comma there now we are going to be also taking care of the open list model it's Not going to take anything as a perimeter and now we are going to be using a set method and for this set method we're going to be checking is is list model open we're going to be setting that to true and also

the model type will be set to a list in lower case or you know in upper case l in the rest of them will be in lower case that's done we also have to create one more for uh what we call it close list model and now it's not going to take any perimet But now we are going to be using a set method inside there and here we have to provide like is list model open so we use like is list model open and change that to false and the model name will be set

to this empty string and also the model Emoji will be set to this empty string that's done now let's create our open workspace model like so it's not going to take any perimeter but once again uh you know we're going to be copying this entire line and now let me Just place there so instead of providing this is list open I'm going to change there to uh is workspace model open okay and now we are going to be setting that to true and for the model type I'm going to remove that and change there to

the model type and it's going to be set to the workspace so upper case W and then space in lower case like that now we're going to be using a closed workspace model and here we have to provide our Arrow function now let's just use a set Method and inside there we're going to be checking is our workspace model open and we're going to be setting that to false then the model name will be set to empty string I'm going to also provide the model emoji and change that to empty string once again underneath that

we have to Define our Set uh selected list and now it's going to take a list as a perimeter now we going to be defining our set and here we have to write like selected on selected list and change That to the list which we have created well it is taking as a perimeter and now underneath that we have to also Define the uh set selected workspace and for this set selected workspace let me just remove that dot from there it's going to take a workspace as a perimeter and now we're going to be using

a set method and now we have to write a selected workspace and set that to the workspace which we are now providing as a perimeter okay that's done now Underneath there we're going to be defining the set to do text and provide our text inside there now we're going to be using our set method once again and proide our to-do text and there to-do text will be set to this text now need there we also have to provide our handle a too and now inside this handle a too we're going to be using our set

method not like this but this is remove there we are going to be using our set method like this it's going to take a state as A perimeter and inside there what we have to do we have to destructure a few things from or stad so what are the things which we are going to be destructuring from or stad these are all the things that we have to D structure from the St so I'll just write like to do text and then select yeah selected list rather then selected workpace okay so we have to destructure

that and now we can check if text. trim method so if that's the case like if That is equal to empty string so in this situation but if that's not the case we are going to be creating a new to-do so I'll use like cons new to-do and here it's going to be an object so we have to specify the list and the list will be set to selected list then provide my comma and then workspace and workspace will be set to selected workspace which we are now destructuring from our state right here that's done

finally we have to return those values so we're going to Be using like return and now let's just use the to-dos and change the to dot dot dot and then state DOT to-dos like we want to make a clone of there and then we want to add one new to-do inside there if that's the case we're going to be also setting the to-do text to totally empty string and also the selected text to be also come on selected selected text it's going to be also set to empty string in the selected uh yeah selected list

will be also set To empty string and finally the selected uh workspace will also be set to empty string so that's or uh handle air too or hide there now underneath there we have to Define another function or method whatever you want to call there so we're going to be using like set model name it's going to take a name as a perimeter and now we have to use the set method and now we have to provide the model name inside there and that's going to be set to this name I'm going to provide a

Comma now let's take care of the set model emoji and here we have to provide our emoji and now we have to use the set function and let's just use the model emoji and change that to the Emoji like so I'm going to also use the set model type and it's going to be taking a type now we have to use a set method and provide my model type and that's going to be set to this type like so now underneath that we have to use the handle s and then we are Going to be

using this function now let me just provide my State method inside there and provide my state just like this and here inside there let's just destructure a few things from our stad so what are the things that we are going to be destructuring we are going to be destructuring the model name from where from the state and also the model emoji and also the model type okay so now need let's just save our file okay what the hell is going on where the hell oh we Have to proide a comma there so now let me

just save my file and now it will work okay next we have to check if our model name. TR method equals to to empty strings in this situation we're going to be only returning the St okay let's just put T above and now we have to check if our model type is equal to the list so in this situation we're going to be using state. add list and now we have to add our model name model name and also our model Emoji like that and if that's Not the case we're going to be using the

model type and if the model type is equal to the workspace so in this situation we're going to be using that once again and we're going to be attaching the add workspace and then uh we have to provide the model name and also the model uh Emoji like so finally we have to return all of that values and that's done so I'll just use like the model name we have to inate with empty string and also the model Emoji we have To use the initial value of empty string and then the model type and use

the null value to there and then is list model open we have to set there to p and also is workspace model open and set there two FS oh my God that was a lot and I mean a lot of typing okay so still I'm going to go ahead and go to the top and I'm going to copy this Abate from there and here I'm going to annotate my Creator function with this ab and now let me just save my file and yeah that Was our store and now let's just start working on our UI

so that was it about for the store now let's start working working on our UI so I'm going to go ahead and Define my components folder and inside that I'm going to be defining my sidebar. TSX and also my main area. TSX let's just go to the sidebar and use the RFC and also inside the main area use the RFC now let me go ahead and go to my UI and provide my Flex classes to this so I'll use like the class names And it's going to be set to flex and height will be set

to toly screen inside this D we have to render our sidebar which we are now getting and we have have to close there underneath there we have to create a d with the class of flex of only one ping all around will be set to six and now I'm going to select main area and render there right here if I check this out so we are now getting a sidebar and we are also getting this main area so we're going to be taking Care of the sidebar in a few seconds but first of all we

have to take care of the main area so you know what I'm going to comment this line out sem my file and now we are getting this main area and now let's just start working on our main area so what I'm going to do is that I'm going to grab something the use store from where from let's just go ahead and go to our store and now inside there we have to destructure a few things so I'll just destructure uh what do we call it We're going to be restructuring all of that from the use

store so we would need the lists and also the workspaces and also uh the selected list selected workspaces and to- do text selected to-do list or set selected list and then set selected workspace set to do text and finally we have to do restructure the handle air to do I'm going to save this file right now now let me go ahead and go to my UI and provide a class name so I'll use like The flex will be set to one and pairing all around will be set to six inside this T you have to

Define margin for the bottom of and not five but just a four inside there we have to create our input field and this input field will have the type of text I'm going to also specify the value and that value will be coming from this add to-do I me like to-do text to be precise and now let me just place it right here and when somebody Tred to type something in inside this so we're Going to be firing this function which will be a set to do text and provide my event. target. value inside there

let me just s my file and that's going to be done we also have to specify the place holder which will say like add a new too or something like that and also specify my class name so so I'll say like border and Border will be set to gray of 300 pairing all around will be set to two hold rounded rounded large and the WID will be set to totally full now let me Save my file and check this out so we are now getting this amazing huge input field we will change that in a

few seconds but yeah let's just proceed to the next one so the next thing that we have to do is that we have to create a d with a class of margin for a top of two flex and also items will be set to to Center and inside there we have to Define our select field we not going to be attaching any name to this so I'll just remove the name and also the ID From there and I'm going to specify the value and for this value we're going to be providing our selected list and

that's going to be it and when somebody try to change something inside there we're going to be firing this function and we're going to be changing the selected list value and we are going to be providing the event. target. value inside there I'm going to also specify a bit of classes to this so I'll use like border and Border will be set to gray of 300 and also pairing all around will be set to two rounded large and margin for the right will be set to two inside this select statement we're going to be defining

our option and for this option we're not going to be providing any value today and let's just make their disable and here I just say like select list and underneath this option uh we're going to be trading over through all of our list now use the map method and proide my list inside there and the Index okay so what I'm going to do is that I'm going to specify my option and close there and for this option we're going to be providing a key and the key will be set to this index and I'm going

to also specify the value and value will be coming from the list. name and here inside there we have to render our Emoji so I'll use like list. emoji and then list. name I'm going to save this file right now and yeah we are getting this select statement but we did not specify Nothing inside our sidebar so that's why we cannot select something from there so yeah that's cool and everything now underneath the select statement we have to Define yet another select statement so we are not going to be providing any name and ID to

there so let's just remove that from here and we're going to be providing a value so let's just use the value and the value will be set to selected workspace like so and when somebody try to change something inside This so let's just use the own change EV Handler we are going to be firing this function which which is a set selected workspace not list but change that to workspace and provide my event. target. value inside there underneath then we also have to specify the classes all used like the border and Border will be set

to gray of 300 ping all around will be set to two rounded toally large and inside this select statement we're going to be defining our option and for each Of this option we're not going to be providing any value today and I'm going to make it totally disable and I'll just select select workspaces right here our workspace rather underneath this option we're going to be rendering our workspaces if we have some so if you have the workspaces then we want to right over through them so I'll use like the workspace and just a workspace rather

and I'm going to also paste the index inside there okay so what I'm Going to do is that I'm going to provide my option once again and here for this option we're going to be providing the key and the key will be set to this index and the value will also be set to workspace do name so for this option we're going to be rendering our workspace do emoji and then workspace do name now let me just save my file here we have a selected workspaces but we cannot select any workspace from there and also

any list because we did not Create them so once we create them then we would be able to see all of them so what I'm going to do is that underneath this select statement we're going to be defining our button and for this button I'm going to also attach a few classes to this so I'll use like background holy black text will be set to totally wide pairing for the x-axis will be set to four pairing for the y axis will be set to two totally rounded large and also margin for the left will be

set to four Flex and this is make it items totly Center like so and it's going to say like add to do and here we also have to render our icons so I'm going to be using like fa plus icon so it's going to allows us to add work to do I'm going to save my file and also when somebody clicks on there we going to be adding work to do so I'll use like the on click event handler and when somebody clicks on them we're going to be firing this handle add too function and

yep we are Now getting there so if I type something inside there and click on this air to do it's going to add there but we cannot see there and why is there because we did not render any content on our screens so that's why we would not be able to see anything so yeah that was just the main area and now let's just take care of the sidebar and also the other stuff that's done so let's just go ahead and go to our app and render all of our content right here so all of

our To-dos and stuff so what I'm going to do is that underneath this main area I'm going to Define another D with the class of margin for top of six and inside there let's just use R2 with the classes of text totally extra large font will be set to semi bolt andb like margin for the bottom will be set to four and margin for the left will be arbitrary value so I'm going to be using like uh to RM I'll specify my to-do list inside there let's say say our file check this Out so we

are now getting our to-do list and now finally we have to it over through all our todos so we can see them so I'm going to be using like ul and for this UL we're going to be passing the class of list DC and also padding for the left will be set to five oh I forgot to destructure them so I'm going to go to the top and first of all we would need let's just import the use store from where from let's just go ahead and go to the top and import that store from

The store I mean like that use store from the store so for now I'm going to be destructuring a few things so I'll just uh use this destructuring syntax and we're going to be destructuring there from this use store so what do we need from there we need the to-dos obviously and also we need the edit index and edit we would also need the edit text and the drop- down index handle edit handle update not add word handle come on handle update drop down Click delete too set edit text yeah index would be fine and

also we need the set edit text I'm going to save this file and now let's just go ahead and itate over through all of the to which we just imported from our store okay so I'm going to go ahead and use there I'll pass my and now let's just itate over through there by using the map method and then I'm going to be placing a to-do and also the index inside there okay so let's just close there and I'm going to Be using a lii close this one we have to also specify the key and

the key will be set to our index and for the class name margin for a bottom will be set to two margin for the left will be set to to rim and close there like so I'm going to be also checking like if the edit index is equal to this index which we're now getting by it rading over through our items so if that's the case we're going to be rendering one UI if that's not the case we're going to be rendering another UI I'm going to take care of the else CLA in a few

seconds so I'll just close it like this and now we have to take care of this first one so I'll just Define first of all my div with the class of flex and also the items will be set to all the center I'm going to save my file inside this div we have to Define our input field with the type of text I'm going to also past the value and the value will be set to edit and when somebody try to change something Inside there or type something inside there we're going to be setting the

edit text to this event. target. value like whatever the user type inside there you want to get there now this just also provide a bit of classes to this we use like border and Border will be set to gray of 300 and pairing all around will be set to one poly around it large margin for the right will be set to two here we are now getting this UL but also we have to render that content which we Type inside there I'm going to be first of all using my button so I'll use like button

and the classes will be set to background totally green 500 TT off totally white pairing for the xaxis of two ping for the Y AIS of one totally rounded large and margin for the right will be set to two inside this button what do we have to do uh we have to past the update label inside there and when somebody clicks on this button we're going to be firing this function so I'll Just say like uh handle update which we are now getting from our store and we're going to be placing our index inside there

so it's going to update our item based on this index now underneath this update button we're going to be passing our delete button so I'll use like button and the classes will be set to background gray of 500 and also takes off totally white pairing for the xaxis of two pairing for the y axis of one totally rounded large and inside them I'm going to past like cancel save this file and here we also have to attach the event handler so when somebody try to click on there then we're going to be firing this function

like set edit index and P null value to there that's done so I'm going to go ahead and go to the else class and remove that from here and Define my D with a class of relative and also we have to make the as a flex justify with be set to between and the items will be set to totally Center Inside there let's just Define our D inside this D we have to Define our spend margin for the right field be set to four now finally we have to render our level or whatever we type

inside this input field so I'll just use like the strong tag for there and now we have to use like too. text and here outside from there we're going to be also rendering like the list just just a level of list and now we have to use or Tod do. list inside there underneath There we are going to be also specifying the workspaces or just a workspace and now we can use that to do. workspace s file and here you can see we're now getting the text which we specify inside our input field we are

not getting the list because we did not select any list we are also not getting any workspace because we did not select any workspace so that's why we are not getting there but other than that we are now getting our content so you know what let me just Add uh something else and if I click on this add button it's going to add that right here so that's cool underneath this div we have to Define another D with the close so flex and items will be sub all this Center I'm going to render the icons

all use like MD more just CP that from the react icons now we can specify your class name so let's just P like the cursor uh cursor come on q s o r and cursor will be set to pointer and the size will be set to 24 and when Somebody clicks on there we're going to be firing this function so I'll use like the handle drop down come on handle drop down click and when somebody clicks on there we're going to be passing this index inside there now let me add something if I click on

the add to do we are now getting these three dots if I click on there nothing will happen and why because we did not specify any content inside there so now let's just do this so I'll use like if the drop Down index is triple equals to that specific index so in this situation we're going to be rendering this UI so I'll use like the div and this div will have the classes of absolute and also the right P will be set to zero margin for the top will be set to two background holy white

and also border and make that Holy rounded Shadow will be set to totally large inside there we have to Define our button so this button will have a few classes like block and Pairing for the xaxis will be set to four pairing for the y axis will be set to two t of to gray of 700 and I'm going to also provide the Howard St so we are going to be doing that in a few seconds so let's just do that I'm going to use the how set and we are going to be only changing

the background color to 100 when somebody H over this button and we also want to provide the width of tot full text will be set to totally left and for this Button I'm going to say like update and now let me just save there I'm going to go back because I feel like there's a lot of text underneath this button we're going to be defining yet another button or you know what we have yeah we have to Define another button separately so I'll just Define a button and it's going to say delete I'm going to

also style that bit so I'll use like the block pairing for the xais of four pairing for the Y AIS of two text Gray of 700 and when somebody how over there we going to be changing the background to toally one 100 and with will be set to full and text will be set to left that's done I'm going to also attach the event handlers on them so when somebody try to click on there then you want to F this function so I'll use like the handle edit and paste my index inside there sa this

file I'm going to also put the event handler on this delete button so when somebody clicks on there we're Going to be firing this function and use the delete to do and P our index inside there I'm going to go ahead and add some to-do so I'll use like something and click on the add to-do so here you can see we are now getting the text and we are not getting any list because we did not add any of them we also not getting any workspaces because we also did not add them I'm going to

click on these three dots and here you can see we can now update there if I click on the Update so I can change the or learn primer motion or something like this I'll use like learn frame and motion click on the update and here you can see it's going to update there if I want to delete this so I can click on these three dots and I can click on this delete so it's going to remove them from the UI I can also add something else like learn Zeus stand with projects or something like

that and now I can click on this add to do and it's going to add There right here I can once again click on there and change that to frame motion or something like that and click on here so this can also update there and we can also delete that so they to done then St done now let's start working on the final touches so we are going to be working with the sidebar right now and the first thing that we would need is the use store from where from our store file so I'm going

to go ahead and go to the top and get the store from there Next we're going to be restructuring a few things from where from our use store which we just imported so what are the things that we would need we would need the list you would also need the workspaces the open list model and the open workspace model like so I'm going to go to the UI and remove there and add a few class names so I'll just use like with will be set to 60 background will be set to this F9 F9 and

close there I'm going to also specify the flex and flex Will be set to to column inside there we have to Define our Flex of one and overflow come on overflow will be set on the y- axis will be set to totally Arrow Auto like so pairing all around will be set to four not five but pairing all around will be set to totally four inside there we have to Define our H3 with the classes of text to large point of semi bold semi Comm on semi bold and flex items will be items will be

to Center I'm going to just render my list Inside there now let me just say my file and here you can see we're now getting this amazing sidebar and also this list right here that's toally done and now here we are going to be rendering over list of items but we are going to be doing there once we are totally done with the model which we are going to be creating in a few seconds so I'll just Define a button right here and it's going to take like the class of flex and justy will be

set to toly center items Will also be set to toly Center and margin for top will be this arbitrary value which will be set to one Rim it's going to say like um this fa a class and we have to import that and close the right here I'm going to also specify the classes margin for the right will be set to two and it's going to say list or just a list singular here you can see we're now getting there which is looking cool and now the next thing that we have to do is that

we have to go ahead and go To the bottom and create our workspaces all just use like pairing for all around will be set to toally four inside there we have to render or you know what I'm going to copy this exact same thing from there place it right here and change that to workspaces and now underneath this H3 what we have to do we have to render our workspaces which we are going to be doing in a few seconds but not right now this is cre for B with the class of flex and justify

justify will Be set to to Cent and items will be to set to Center margin for top will be set to this arbitrary value which we're going to be providing right here like uh one rim and now it's going to say that render the workspaces and you would also need to render our fa plus icon once once again and close them and I'm going to also specify margin for the right of two I'm going to save this files so now we are getting the list and also the workspaces so now the next thing that we

Have to do is that we have to introduce another component which is a model. TSX and now I'm going to just say like RFC inside there save my file and go to my app go to the bottom and here we have to render our model component okay I'm going to call that s my file now let me go ahead and go to my model and the first thing that we would need is that we would need the use store from where from our store so let's just go ahead and go to our store pile that's

done now Inside this model we're going to be destructuring a few things from where from our use store and now what are the things that we would need we will need the is list model open and also the is workspace model open and the model name model Emoji model type set model name not Emoji but just set a model name set model Emoji right now and I'll save model Clos this model close workspace model and now let me just save there now I'm going to go to the UI and remove That from here and attach

my classes all used like it's going to be set to totally fixed and insert will be set to zero legs and items will be totally set to Center justify will be also set to center background of gray 900 background opacity will be set to 50 and the Z index will be set to 50 inside then we have to Define yet another D with the class of background holy white padding all around will be set to six fly rounded large and the width will will be Set to 80 and we also have to provide the flex

and justify will be in this case set to between and items to Center mb4 inside then we have to render our H2 it's going to have the text of extra large P of totally Bol P of totally Bol and we have to render our content right here so I'm going to be using like create new and then model type like what you want to build and here you can see we now getting this model and we are also getting this create new list right Here which is this create new list so yeah then also done

now underneath we have to Define our button so I'll use like the button and the classes will be set to like text of Po 600 and when somebody have over this we are going to be taking care of there right now so when somebody have over there we are going to be changing the text to gray 900 and the label will be set to this icon so I'll use like fa times and now let's just grab there from our react Icons and now let me just save there as soon as I sa there we are

now getting this x icon which is looking cool underneath both of them we have to Define our input field so I'll use like the input field and the type will be set to text and here we also have to provide the value and the value will be set to model name I'm going to also provide the own change event handler so when somebody types something inside there we're going to be fighting this function It's going to have like set model name and now we have to provide the event. target. value inside there let me just

save my file and the placeholder will be set to this random placeholders so we're going to be saying like enter and then the model name like what you want to build so I'll write like the model type and then the the name okay so now let me just save my file and here you can see we're now getting like enter the list name and now underneath we are going to Be also styling this all use like the class name make the border and border to gray of 300 ping all around of two to rounded large

with will be set to totally full m b will be set to four or margin for the bottom will be set to four we're getting this cool looking model and now underneath we're going to be also defining yet another input so I'll use the input with the type of text I'm going to also provide the value the value is going to take the model emoji And somebody try to type something inside this we are going to be firing this function which is a set model emoji and let's just proide our event. target. value inside there

I'm going to save this file and for my placeholder and here I'm going to say like enter emoji and this is going to be totally optional if you want to provide that you totally can but you don't have to I'm going to also provide the class names and let's just set the two that exact class names I'm going to go ahead and copy that and place it right here save my file and we are also getting this Emoji picker or not Emoji picker but we are also getting this Emoji input field finally we have to

Define our button so I'll select button and when somebody clicks on this button we are going to beiring this function which is a handle save not model but just a handle save function and now I'm going to also put a bit of classes to this I'll use like background Totally black T of totally white pairing for the xaxis of four pairing for the y axis of two totally rounded large I'm going to save this file right now and provide the label as a save first of all I'm going to go to the top and provide

my event handler on this one and somebody click on that X icon there is St disappear because we have to create that function so what we have to do we have to uh F this function which is a handle close function and now let me Just copy the name of that and Define this function right here so I'll use like cons handle CLA and this function will not take any perimeter if for model type is equals to this list in this situation we're going to be using Clos list model and execute there if that's not

the case we're going to be also checking like if the model type is equal to the workspace so in this situation what do we have to do oh my goodness let's just remove that in that situation We have to just close the workspace close the workspace model and execute there now let me just save my file we would still not be able to see anything next we have to go ahead and Define this function so I'll just go to the top and Define there right in here so I'll use like const handle or handle save

I already copied there to my clipboard and we are not going to be doing anything crazy but we only have to apply this handle save model function and execute There and here you can see we're now getting this model and which is looking cool and now underneath there we have to provide a bit of check like return null if the model is not open so I'll just use like if not is is list model open and not is workspace model open so we're going to be only returning null from there okay so here you can

see we're not getting anything but now we have to just take care of these lists so that we can see them so what I'm going to do is that That's already done so now let me just go ahead and go to my list and attach my event handlers on them so when somebody click on this icon we want to show that model and when somebody click on this icon we also want to show that model so what I'm going to do is that I'm going to just write like when somebody clicks on there it's going

to be firing this open list model and now let me just save my file and if I click on there here you can see it's going to gives us that Model I can also click on this it's going to make it disappear but now if I click on this one nothing will happen so which means like we also have to attach the on click event handler on this button as well so what I'm going to do is that I'm going to just write like on click event handler and render my open workpace model right here

we're still going to be getting this model if I click on there once again it will make it disappear so the final thing that we Have to do is that we have to take care of I'm super excited about this one we have to take care of the rendering the list and also rendering the workspaces so now in this case I'm going to be using a ul and inside this UL now we have to trate over through all of that list that we are getting from this use store okay so let's just use the dot

map method on there and here we have to past the list and also the index inside there and what I'm going to do is that come on I'm going to place my AI inside there and close there and first of all we're going to be passing the index as a key and also pass a few class so I'll just proide like pairing all around of two and somebody how over there so you want to change the background color to this totally CCC make it totally rounded large cursor will be set to totally pointer and the

F and items will be totally set to Center inside there we have to render or Spin and Mar for the Right will be set to two and render or list. Emoji inside there I'm going to be also rendering my list. name and knif I have there and if I click on this workspace and I'm going to just write like I don't know um coding or something like that and I'm going to also past the coding or uh computer or why am I getting a for a computer you know what I'm going to just write like

coding C or D and choose this icon or emoji and now if I click on there here you can see We're now getting this Emoji right here and now if I click on here it's going to also gives us that coding right here so that's done I'm going to go to the bottom and now let's just take care of rendering the workspaces the process will be exactly the same as the previous one so we use like the UL and inside there let's just itate over through all workspaces and we're going to be iterating over through

there by using the map method so let's just take care Of the workspace and we're going to be also getting the index so what I'm going to do is I'm going to P my Ali and for this Ali we're going to be passing the index as a key and the class names will be exactly the same so when somebody have over there we want to change the background color to this CCC and close there it's going to be totally rounded large and the cursor will be set to pointer legs and items will be set to

totally Center and inside there we have To use our spin once again margin for the right will be set to two and now we are going to be using the workspace do emoji and finally let's just use our works space. name and woof that was a lot of typing and a lot of explanation so I can click on there now I can just write like uh I don't know it or yeah it Department of or something like that I'll just write like it or I guess that that icon would be fine so if I click

on this sell and here you can see we now Getting this it department now I can also choose this it from there I'll just write like uh learn or record the the frame motion course or something like that and now if I click on this air to do it's going to add that to-do right here it's going to also show us the list and it's going to also gives us that workspace right here I can totally change that to like something cool and if I click on the update so it's going to update there and

yeah we can totally Delete there okay let me just try there once again if I click on this list you would be able to add a new list so I'll just write like my personal info and I'm going to write like me and this is me and click on the save click on the sa so it's going to save that right here and now I can also add a new workspace if I wanted to so I'll just write like um Pro programming or something like the or day in the life of programmer or or you

can say day in the life of Huzan so I'll Just write like this icon or this emoji and now if I click on there it's going to also add there right here I can also add more like let me just write something and add some random Emoji like this click on the save so it's going to add there right here I can also add a new stuff or workspace other and I'll just add some random Emoji like this click on the save and here you can see it's going to also add there right here and

now I can definitely choose them let Me just choose this something I'm going to also choose this new workspace and random craft and if I click on this add to do and here you can see it's going to add there right here you can definitely go ahead and update there and I can also totally delete there and that was our super long project of this course next we're going to be building a bit more complex project than this one so let's get into it be careful who you trust Sergeant people you know can Hur you

the Most ghost so let's start working on our project so I'm going to go ahead and open my terminal I'll zoom in a bit so you guys can see everything a bit better and now I'm going to be using npm Create we at latest and I'll give it the name of advance uh quiz app or something like that I'll choose reactj and also typescript and now let's just go into the advance quiz app and install every single thing inside there then successfully install So I'll also install the Zan by using npm install or I zust

so that's also install I'm going to open that in my vs code and this is how it looks like so I'm going to go ahead and remove the public folder go to the SRC remove the SS folder the f. CSS remove every single thing from the f. TSX save this file and now I'm going to also go ahead and go to the index. CSS file remove every single thing from there and I'm going to be using npm run Dev I'm not going to uh First of all we have to make a set of fourward tailin

CSS as well so let's just go to the tailan CSS choose framework and guides go to the weed and copy this command open my terminal once again and now we are going to be installing a Tailwind CSS inside our project I'm going to also hit enter so it's going to initialize tailin CSS inside my project now I'm going to go ahead and go to my tailin config and remove this content from there and Replace it with this new one like so s file and I'm going to also go ahead and copy all of these CSS

so I'll just go in there place this sem my file and now I'm going to also copy this H1 go to my app and place there right here save my file and let's just use the npm Run Dev I'm going to go back and run there now let me go ahead and go to my local host and Yep this is working a okay so which means like now we successfully created a set of four work coding Journey now Let's start working on our store so I'm going to go ahead and create a folder with the

name of uh store inside there we're going to be creating a file with the name of use squiz uh store. TS file and inside this one the first thing that we would do is that we going to be graving the create function from the zustan library now underneath that we have to Define our use quiz store it's going to be equal to this cre function which we now grabbing from The Zo and Now we are going to be passing our callback function today and our callback function will take that set method okay so we're going

to be doing a lot of stuff but first of all we have to create our interfaces so that we can annotate our create function on there so what I'm going to do is that I'm going to Define my type with the name of question and here for this question it's going to take a question and that's going to be a string it's going to also take the Options and that's going to be a string of array and also we're going to be passing the correct come on the correct answers and here it's going to be

set to a number now that's the first thing that we have to do next we have to Define our interface so I'll just use like interface I'm going to give it the name of like quiz St and here inside there we're going to be passing the current question first of all and this going to be set to a number we're going to be Also passing answers it's going to be either a number or null value of array okay like that and now we should have to provide this comma now we have to provide the score

so I'll use like the score and score will be set to a number then show score is going to be a Boolean value and then what I'm going to do is that I'm going to provide my question and then that question will be that interface which we just created right here okay that's done now underneath That we have to put the select and it's going to take the option index as a perimeter and we have to inate as a number now we are going to be returning the white from there now let's just right to

our next question and here we're going to be only returning the white from there like so we also have to provide the previous question and for the previous question we're going to be returning the wi and also for the reset question quiz or other so I'll just Write like reset quiz is and here it's going to be just a function which will just return the wi now let me just save my file and that's going to be it for requested so I'm going to copy the name of there and now I'll annotate my create function

by using that quiz St so I'll just close there and now inside there first of all we're going to be defining our current question and it's going to be set to zero we're going to be also providing our answers and the answers Will be array of three answers and we are going to be filling them with null value like so now we also have to provide the ini value for the score and it's going to be set to a zero you also have to write like show score and the initial value will be set to

false I'm going to be placing a lot of questions right here and if you want to use my question you can definitely go ahead and go to my GitHub repository but if you want to use your own one so yeah you can Definitely provide your own ones so here you can see I have this questions array and inside there I have a few object so inside each object I have a question like what does a CSS stand for and also we have a few options so you got to just figure out like what's going to

be the correct option and in here you can see we're also providing the correct answer as well and the correct answer is two 0 1 and two so cascading style sheet is the correct answer so yeah here you can See I have a lot of questions which I already set up so I'm going to just collapse that right here just like there now I'm going to work on my function so I'll use like select answer come on select answer and that's going to be just set to this function and I'm going to just close there

like so I'm going to duplicate there like a few times and change the name of their like the next question and also this one to be the previous question and this one will be Set to a reset question come on reset reset quiz rather I'll use like the reset quiz I'm going to save my file but we are still getting this error I don't know why you know what we're going to be taking care of this error in a few second but now let's just start working on our select answer function so for this select

answer it's going to take a option index and now we have to provide them or you know what we're not going to be providing this curly Braes so just Use my set method it's going to take a St and inside them we are going to be using a curly braces right here so first of all we have to make a clown of all of our answers so I'll use like dot dot dot and then state do answers and now we have to store them in some sort of a variable so I'll use like answers it's

going to be equal to this clown next we have to save the selected answer for the current questions so I'll use like the answers and here we have to specify the State. current questions is going to be equals to this option index now underneath that we have to just return our answers and this is going to be it for the select answer that's done now let me take care of this next question so inside there we not going to be providing any curly braces today so I'll use the set method and here we have to

specify the St and for this St uh we are going to be using the curly braces so first of all we have to get like uh cons Is last question we have to check like whether it is a last question or not so we're going to be using like state. current question if that is equals to the state. questions. length and length minus one which means like this going of gives us the last question and now we need there we have to provide our checks so I don't know why I'm getting these errors so I'll

just cut that from here and you know it's going to just remove a few errors and now we have to provide Our check so I'll just use like if we have the last question so in this situation we're going to be setting the score to zero and now we have to Loop through the question and compare the answers so how are we going to be doing them we're going to be using a state. questions now for these questions we are going to be using the four each so that we can itate over through there so

now I'm going to be passing a question as a perimeter and we are going to be also Passing an index as a perimeter inside there I'm going to be checking if the st. answers and here we have to specify that index if that is equal to the questions do correct answer so in that situation we're going to be only incrementing the score but if that's not the case so now underneath that we have to show the score and stop the quiz so I'll just return the show score come on the show score oh my God

show score and here we have to set there to true and Also we have to return the score we have to move to the next question so we going to be returning the current question current come on current question and then that's going to be equals to the st. current question + one so now let me just save my file so this is how we going to be moving into the next question and now let me just hide there from here just like that now let's start working on this this previous question so I'm going

to go ahead and remove them And use the set method and for this set method it's going to take a state as a perimeter and inside there we're going to be getting the current question God damn it what the hell was that we're going to be getting the current question and now for this current question we are going to be getting the maximum withd so I'll use like math. Max and here we have to use the state do current question minus one so this going of gives us the last question then we have to provide

a Zero for the accumulated variable so that's done and finally we have to create our reset quiz function it's going to just basically reset our entire quiz so I'm going to be using a set and here what do we have to do I'm going to just use this curly braces and the current question let's just write a current question and the current question will be set to zero the answers will be set to array dot I like array three and fill them with null values and Also we're going to be providing a score and the

score will be set to zero in the show score come on show score will be also set to false now this is how we are going to be creating our state I'm going to also go ahead and annotate with this quiz state so I'll just annotate that with this quate and finally we have to export this so we can use that in other file so I'm going to be using like export default then use quiz store this is s file but why in the Word we are getting this error and I just realized that I

only made this single mistake I have to provide this s and as soon as I do that here you can see all of that errors are now successfully gone so yeah you have to provide this s with this questions and this is how we're going to be defining or quiz store that's done I'm going to go ahead and go to my SRC and Define a components folder so I'll use like the components and inside there we have to Define a few components so I'm going to be first of all creating a quiz layout. TSX I'm

going to be also creating a sidebar. TSX and also the question come on question. or yeah question. TSX would be fine now let me go ahead and go to my quiz layout and I'm going to be using rafc inside rafc inside the sidebar and also RFC inside the question so you know what let's just start working on our quiz layout and I'm going to also go ahead and go to my app and registered That right here so I'll just remove that and render my quiz layout so let's just use our quiz layout and render there

right here now let me go ahead and go to my quiz layout and the first thing that I would do is that I'm going to specify the classes so class will be set to flex and height will be set to to screen remove there and render my sidebar inside there and close there now underneath them we have to define a d with the class of flex of one and also Flex and flex will be set to to the column items will be set to Center and justify come on justify will be set to Center and

inside there we have to render our question and close there and now as soon as I do there here you can see we're now getting this layout where we have our question and also our sidebar let's just go ahead and go to our sidebar and start working on our sidebar so what we have to do first of all we have to import the use quiz or You know what we are going to be importing the use quiz tour this is how we're going to be doing them next we have to destructure a few things from

there so we are going to be restructuring there from the use quiz store so what are the things that we would need we would need the questions and also the current question inside this component now let me go ahead and go to my UI and first of all we're going to be attaching the class and the class Will be set to with 1 over four and also background gray of 100 adding all around will be set to four inside there we have to use our H2 and then the text will be set to extra large

margin for the bottom will be set to four and we're going to be saying like quiz progress underneath that we have to create our ul and for this UL we're going to beting over through all of our questions which we are now getting from this store so you know let me just show you there we're Going to be iterating over through all of their questions so what I'm going to do I'm going to be using the map method and on this map method we don't need the data but we only need the index so now

inside there we have to use our Ali and for each Ali we're going to be specifying the key and the key will be set to this index and I'm going to be attaching the class name and margin for the bottom will be set to two F and items will be set to Center Center there We go inside there we have to render our react icon so I'm going to go ahead and uh install the npmi react icons so it's going to install the inside my project now that's successfully done so I'm going to be using

npm run Dev once again now we can use the fa check circle come on so it's going to gives us that F check circle now we can specify our classes toly dynamically so margin for the right will be set to two and here we have to render our classes toally Dynamically so if our index by which we are now iterating over through is less than or equal to the current question so in this situation we're going to be changing the text to totally green of 500 but if that's not the case we are going to

be setting that to text Gray of 400 so now let me just save my file and now underneath there we have to Define our span so I'll use like question and here we have to just render our index + one and that's going to be it so now let Me just save my file and here you can see we now getting all the four questions and we don't have any buttons so we can increment through there we will see that in a few second but there was there about four or quiz sidebar now let me

go ahead and go to my questions and inside there we're going to be doing craziness so first of all we're going to be importing our use quiz store inside there we're going to be destructuring a lot of things so I'll just destructure There right away so I'll use like not the used St but the use Quest store and execute the and from this use quiz store we're going to be getting all of the questions the current question the select answer the answers and also the next question previous question and the show score and just a

score and also the reset quiz that's done I'm going to semi file and now we have to use the inside our UI now let me go ahead and go to my UI and here I'm going to provide the Class names and this is proide our with first of all and we're going to be also attaching the padding and ping will be set to six all around proide our H3 and it's going to say like text will be set to 2 XEL the font will be set to semi board and inside there we have to render

our question question like so so this is use our question that's going to be it I'm going to also go ahead and go there and first of all we going to be making a question so how are we going to be doing There we're going to be getting all of our questions and from this question we want to get the current question out of there and I'm going to store that inside the question variable and that's going to be it I'm going to also get the current answer so I'm going to just use that same

technique and provide my current question inside there and now we going to be storing the inside the current answer or yeah answer would be fine let me just save my file and go to My UI once again and here I'm going to be using H3 with the classes of text to Excel and the font will be set to semi bold and here we have to use our question. question which means like now we are getting this question and we are now getting a specific current question out of there and here you can see we're now

getting there like what does CSS stand for now underneath there we have to provide our options so I'll just use like a d with the class of margin for Top will be set to four and now here we have to use our question do options and now let's just iterate over through all of our options so I'm going to be using like import my index inside there and here inside there we have to use our D once again and provide my key and the key will be set to that index I'm going to also specify

the class name and margin for the y axis will be set to two inside there we have to provide our label and for this label uh we're not Going to be providing any HTML for to them so I'll just use like the class name and the class names will be set to flex and items will also be set to Center and inside this label we have to Define our input field with the type of radio and also uh we are going to be attaching the name so the name will be set to this random name

okay so we're going to be attaching that to dynamically so I'll use like question and here we have to attach our current Question not answer but current question inside there we also have to provide the check state so for the check State we're going to be checking like if the current answer is equal to this index which we are now getting from this iteration right here and then when somebody try to type something inside there or change something inside there we're going to be firing this function which is a handle select and here here we

have to specify come on the handle select and here we Have to specify our index inside there which we going to be creating in a few seconds and I'm going to also specify margin for the right of two now let me just sve my file and now underneath there we also have to render for each option so I'm going to be using like option and now let me just comment this line out and here you can see we're now getting like what does CSS stand for and you can now choose your answers from here so

you know what let me just create This function right away so I'm going to copy the name of there and go to the top and and here we're going to be defining our function I'll use like const and then handle select and here it's going to take the option index and we have to annotate that with any because we don't know and now inside there we going to be using the select answer and put my option index inside there that's done I can choose like a scating style sheet but now allows us to select there

Underneath there we have to create our buttons so what am I going to do underneath this one uh I'm going to be refining yet another D so I'll just give it the class of margin for top of six inside there we have to get our current question not answer but current question and if that is greater than zero then we want to show this UI but if that's not greater than zero then we don't want to show this button or this UI so I'll just use a button and here it's going to say Like previous

and now we're going to be attaching these classes to it all use like margin for the right of ping for the xais of four pairing for the y axis of two background gray of 500 and we also have to provide a text of toly white to that rounded and when somebody have over there we want to change the background to gray of 600 and also when somebody clicks on there we're going to be firing this function so when somebody clicks on there this is create our Previous question function right here so previous question there we

go I'm going to save this file and we cannot see that button because we have to select some sort of answer then it will show us that UI so that's also done now underneath this de we're going to be also creating our next button so to do that we're going to be first of all checking like if we have the current question if our current question is less than the questions. length minus one come on L GTH minus one which means like it's going to gives us the last question so it should be questions rather

than just a question singular okay so if that's the case so we're going to be using this UI but if that's not the case then we are going to be providing this UI so I'll just use like uh these react fragments and close them and now let's just take care of this first y so I'm going to go ahead and create my button and inside this button I'm going to Select next and now let me just attach my classes to there so I'll just use like class names pairing for the xaxis will be set to

four pairing for the Y AIS will be set to two background blue 500 text white round it when somebody have over there so change the background to totally blue of 600 and when somebody clicks on there then fire this function so I'll just use like when somebody click on there we're going to be finding the next question function and here you Can see we are now getting our next question I can choose like a scaring style sheet and click on there and here you can see it's going to brings us to the next question but

this UI is looking awful yeah I got to give you that one UI is looking super awful but anyways now let's just take care of this uh fragment I'm going to just remove there and change there to this button be providing the submit and now let's just attach our on click event handler and let's just Put our handle submit function to this so handle come on handle submit function which we are going to be creating in a few second and now let me just also providing our class names ping for the Y AIS will be

set to two background green of 500 Tex totally white and round it when somebody H over this we want to change the background to totally green of 600 this is our file copy the name of there and Define our function at the top right here so I'll just create a simple Function which will be a handle submit and inside there we going to be only using the next question like so and yeah we can now definitely go ahead and go to the next question I can choose the cascading style sheet and click on there it's

going to brings us to this next question it's going to also gives us that question two right here so what does http stand for http stand for hyper text transfer protocol and now let me just choose the which language is Primarily used for the web scrapping or scripting rather not scraping so I'm going to choose JavaScript and click on the next and what does SQL for so structure query language like so and finally what is the main function of the web server to serve the web pages to the client next and which company developed the

Java programming language Sun micro system so now let me just click on the next one and what is the purpose of title tag in HTML you create a new Section to define the title of the web page yep click on the next one what does API stand for so application programming interface there we go I'm going to choose the and what is the purpose of of database index create a backup and click on the next one finally uh which protocol is commonly used to secure communication or the internet https submit the oh we cannot see

the result because okay we cannot see the result I don't know why but there might be Something wrong and you know what the problem was the problem was super awful here we also have to create a separate page for there we're not going to be using a react router but we're going to be checking like if we have the show score so in this situation we are going to be returning this UI okay so first of all we're going to be returning our div and this div will have the same width so let's just s

that three and four and pairing all around will be set to six Inside them this's is use our H2 and here we're going to be providing like text of 2 XEL and the font will be set to semi bold it's going to say like your score now let me just save my file and here you can see we're now getting our Ur score and also now underneath that we have to create a paragraph which will have margin for top of four and TT of totally large and it's going to say like you scor this amount

so let's just render our score out of these questions So I'll use like questions. length Okay so I'm going to S my file and here you can see it's going to give us like my score finally we can also restart our question all use like the button and here we can use our you know what let's just write or restart restart quiz there we go and we can also Al specify our classes so margin for top will be set to six pairing for the xaxis of four pairing for the y axis of two background toly

blue of 500 and text will be set to Totally white rounded and when somebody have over there so let's just change the background color to totally 600 and now let me just save my file and here you can see we're now getting this button and when somebody clicks on this button so I'll use like on click so we just want to reset the quiz like so so if I click on there here you can see it's going to gives us all of their questions back so I can choose different kind of questions like totally randomly

it's Going to gives us all of their questions right here okay and finally it's going to show us our score so I'm just choosing random ones right here so it's going to give us like I only score one out of 10 we can also restart our quiz yep that's cool and you know what I'm going to also make the as a flex so I'll use like you know if I hide there I'm going to cut there from here like this entire thing let me just cut that from here go to my margin top and now

we have To provide there right in here say my file I click on that yeah that's looking better now we are getting our previous button and also our next button right here so finally let me just click on the submit and yeah this is how we're going to be creating our quiz app I will shred this universe down to its last arum and then with the stones that you've collected for me create a new one it is not what has been lost but but only what has been given a Greatful Universe yeah that was a

small little Thanos wice I am going to do that like I am going to destroy this entire universe like shred them all and then I'm going to create a new universe there will be only react developers nobody else is allowed in my universe so now let's just make a setup forward final boss and here I'm going to be making it let me just make that a bit bigger so you guys can see everything a bit better and then I'm going to just Use npm create and then we at latest watch store will be the name

of my project I'm going to choose reactjs and typescript let's just go into the watch store and now let me just use npmi to install all of the packages that's done I'm going to also install zustan by using npm install Zeus and now let's just install them then successfully done now let me go ahead and search for the TN CSS and I'm going to click on there go to the Framework and guides and I'm going to go to the weed and copy this command I'm going to open my vs code by using Code dot let

me just zoom in a bit and the first thing that I want to do is that I want to install the tailin CSS inside my project so now let me just place this command I'm going to also hit enter so it's going to initialize my tailin CSS and now I'm going to remove the public folder let's just go ahead and go to the SRC and remove the SS folder the app. CSS folder and remove every single thing from the ab. TSX file I'm going to go into the index.css remove every single thing from there and

I'm going to copy this content just a content and now let me go ahead and go to my tman config file and replace it with this new one I'm going to also copy there and place that right here and also let me just test this out so I'm going to copy that and replace it with this D I'm going to use npm run de so that's Going to run there let's just test this out by going into our local host and yeah it is working the way we expect him to work there are also a

few things that I want to add in this SRC folder okay so first of all we're going to be adding the DB file and then we're going to be also adding this assets file inside this assets folder we have a lot of images okay so which we are going to be using inside this project and if you want to use these same images you can definitely Go ahead and go to my gab repository and copy all of the styles from there now let me show you this data.js file okay so here we are just importing

all of our images right here and then we have our actual data so this data will be our array and inside this array we will have a few objects so inside each object is going to have the ID the image like the black image Brown image red image and also the white image and we would also provide some sort of a title to them and Also the pricing company and the country okay so we have a lot of data and you are more than welcome to add more data to there if you wanted to so

yeah now let me just close there and that was our entire setup now let's start working on our store so the first thing that I'm going to do is that I'm going to create a folder with the name of store and inside there we're going to be creating a file with the name of store. inside there we are going to be importing the Create function from where from our zustan library that's going to be the first thing now I'm going to place a few interfaces right here and if you care about these interfaces you can

definitely go ahead and go to my guub repository and copy these interfaces from there so basically we're just creating our product State and also setting the product image and when somebody H over the product and initializing the product then we are Creating a filter State and for this filter set we're going to be providing the selected country the selected color selected price range and now we're just creating a functions for there that's done now let's just start working on our use product store uh hook so I'm going to go ahead and just export there right

away and now let's just create our use product and then stor going to be equals to this create function and now we are going to be annotating there with our Product State and close there now here we're going to be defining the set method and inside the set method let's just start working on there so I'm going to just provide like the product States and here for this product State we're going to be sing there to empty object now we are going to be also defining what function for setting the product image so I'm going

to use like set product it's going to be taking the perimeter of product ID not this one but Product ID and also the image itself now inside there we're going to be using the set method and this set method will take the state as object or not object but as a perimeter what the hell am I saying today so inside there first of all we are going to be using our product State and our product state will be coming from our state come on state. product State like so and now we are going to be

adding our new product to this so I'll just use like product ID and that's Going to be equals to this dot dot dot let's just clone our existing state do product States and here we're going to be providing our product ID to there we would also need to specify our current image yes so for this current image we're going to be providing our image to there which we are now taking as a perimeter and now we are passing that to our current image so that's going to be it for setting the product image so I'm

going to collapse there now underneath There we're going to be creating a function for set product how so when how over our product so what do we want to do in this situation we just want to write like product ID and also the how so now inside there we going to be using our state once again set method and provide your state to them and here inside them we're going to be getting like the product State and that product state will have the object and now we are going to be getting there by using The

state. product State and now once again we have to specify our product ID which we are now taking as a perimeter and now we have to set there to first of all we have to clone our existing product. state and here we have to specify that product ID and then we're going to be providing our how state to there which we are also taking as a perimeter and that's also done I'm going to also collapse that next we have to provide our initialized product okay so I'm going to use like initialize product and for that

it's going to also take the product ID and also the initial image not Infinity work God damn it product ID and also the initial image and here we are going to be using that set method once again and provide our state to them and we're going to be using that same exact syntax and now let me just provide like first of all make a clone of our state and then product State God damn it product State and now here we are going To be also providing our product ID today which we are now taking as

a preter and that's going to be set to our current image and our current image will be set to this initial image so I'm going to copy that and place it right here right a comma and for the how set we're going to be setting that to false that's toly done and now we have to lamps there the next thing that we have to do is that we have to create yet another hook so let's just use like Export cons and then use filter store because we're going to be also filtering our products just provide

the create function and we have to annotate there with our filter State and close there inside this one we going to be providing our state and here we're going to be first of all providing the selected country and the initial value will be set to empty string like uh just array and also we're going to be providing the selected color and it's going to be also Set to not countries what theck now so here inside there we're going to be providing the selected country not color but countries like so and the initial value will be

set to empty array we are going to be also providing the selected uh selected color it's going to be also set to this empty array and now for the selected price range the initial value will be set to now and now let's just provide our function to there so now underneath we are going to be using like Set selected uh country so this going to allows us to select our country and filter there so here we we're going to be passing our countries like that and now we have to use the set method and for

this set method we're going to be providing the selected countries we have to set there to this countries which we are now taking as a perimeter and now we have to specify them right here I'm going to also provide a comma there now we have to use the set selected colors In this case and now it's going to take a colors as a perimeter and inside there we are going to be once again using our set method and here we have to specify our selected colors and now we are going to be set there to

this colors which we are now taking as a perimeter that's also done I'm going to also specify a comma there now let's just create a function for the select ice range and for this selected price price range is going to take a range as a perimet and Now we are going to be using the set method once again and here we have to use the selected price range and provide the range which we are now taking as a perimeter right here I'm going to also provide a comma now we have to finally create a clear

filters function and inside this clear filters function we're going to be using this set method once again and now we are going to be just clearing out every single thing so I'll use like uh clear countries countries And we have to set there to empty object we like empty array and also for the selected colors we have to set there to empty array and finally for the selected price range we have to set there to n that's also done so this is what we have to do right now and if you want to copy these

interfaces you can definitely go ahead and go to my guub repository and yeah this is how we are going to be creating our hooks for our project and that's it okay so now let's get into our UI and that's going to be a lot of fun so what I'm going to do is that I'm going to create a folder for the components components like them and inside there we're going to be creating three component first of all we're going to be creating a component for the navigation n AIG g a o n. TSX and also

the product card. TSX and also the sidebar. TSX I'm going to go ahead and just write the rafc inside this component rafc inside that component and Also RFC inside the sidebar now let me just go ahead and go to my app and register my sidebar right here first of all we are going to be using the sidebar and close there and now inside this sidebar we're going to be calling our navigation component so I'll just use like navigation and close there and now let's get into the navigation component and start working on there so for

this navigation component we're not going to be doing anything crazy I'm going to Provide the class names and Marg pH top will be set to Two Rim and also it's going to be set to container withd will be set to 90% and I'm going to also provide margin for the left of five frames close there and it's going to be set to to flex and justify will be set to to between e WWE and and items will be also set to toly Center inside this D we have to Define our h14 or logo so I'll

just provide a class of logo and inside this H1 we're Going to be rendering our iio or you know what we first of all have to install our icons so I'll just stop there and I'm going to be using npmi and react icons so it's going to install there inside this project so that's done I'm going to use npm run there one more time so it's going to run there inside there we have to use our IO filter outline okay let's just grab that and close there and here we have to specify the size and

the size will be set to 27 And also we going to be providing the class names and the class name will be set to margin for the left off and cursor will be set will be set to pointer now let me just save my file that's also done now underneath this H1 we are going to be defining our navigation so inside this navigation we have to our UL it's going to have the class of F and also the items will be set to our L Center and margin for the right will be an arbitrary value

so I'll Just write like two R and close the spaces on the xaxis will be set to four and inside this Ur we have for our Li and we have to write like search help and also my accounts like so or just account would be fine and now underneath this navigation we're going to be also rendering our iio back outline and here we have to close there and provide the size of 24 to there now let me just save my file and test this out so here you can see this is how our navigation looks

Like we're going to be also taking care of this icon in a few seconds but yeah that's looking cool now let's start working on our product card so first of all we have to go ahead and go to our app and grab all of the data so I'm going to go ahead and just import the data from where from let's just go into our DB file and inside there we have our data.js file okay so now if I log that to the console so I'll just use the data save my file and now I'm going

to go Ahead and go to my console and we are now getting this array and inside this array we have all of our data which is looking cool now what I'm going to do is that I'm going to cut this sidebar from here and I'll just use the react fragments and inside these react fragments uh I'm going to pass my sidebar and now underneath this sidebar we're going to be creating a de with the class of pairing all around will be set to four flex and the flex will be set to Wrap and justify will

be set to toly Center and items will also be set to totally Center inside there we have to render our product card okay so I'm going to just render that right here I'm going to put the product as a prop and their product will be all of their data so now let me go ahead and go to my product card and I'm going to destructure there right here so I'm going to use like product and the first thing that I want to do is that I want To log there to the console so I'll use

like console.log and data coming from the product come on product card uh JS file or TSX file and I'm going to render all of that product right here save my file now let me just open my terminal and close the tment CSS going to the console now let me just refresh there and yeah we are now getting all of their data which is looking cool the next thing that I want to do is that I want to Remove them and here you can see we're also getting our product card so what I'm going to do

is that I'm going to Define an interface for there so I'll just go to the top and Define the interface so I'll just use like the interface and product and inside there we have to provide the ID and the ID will be set to string the title will also be set to string so let's just provide our string and also the price will be set to a number and also I'm Going to provide the image and for this image it going to be providing a black and black will be a string and we have to

just provide the as a property and here for the key the key will be set to a string and also outside from there it's going to be set to a string now I'm going to Define yet another interface so I'll just use like interface and I'm going to give it the name of like product card props or something like that and inside this interace we're Going to be setting the product and that product which we just Define up above like this one so I'm going to copy the name of them and now let me just

inate my products with this product right here not like this but this so now let me just save my file and this is what we have to do right now the next thing that we have to do that we have to go to the top and grab our store so I'm going to go ahead and go to the top and use the used product store grab there I'm going To copy a name up there now we are going to be destructuring a lot of things from there so I'll just use like cons and then the

destructuring syntax now it's going to be equals to this use product store okay so inside there we are going to be first of all destructuring the product State and also the set product image uh not how but set product image like this one and I'm going to also destructure the set product how when somebody how over there And also the initialized product I'm going to save this file now we have to Define our Global variables which we are going to be using inside this component so I'll use like product State it's going to be equals

to this uh product State once again which we now destructuring from from our store and here we have to specify this product. ID which we are going to be getting from this product from our entire database so it's going to be either set to this data Or it's going to be set to empty object in some situation okay so I'll also grab the current image and it's going to be equals to the product State on product State and we going to be getting the current property from there the current image property if that's not the

case we're going to be getting the product. image. black okay so now let me just save my file and now we going to be also creating a variable for the h so when somebody how over this we're going to be Getting that from the product state. how if that's not the case we are going to be initially setting the to FS I'm going to also create a state for the images and it's going to be equals to the object do values and here we have to specify the product. image I'm going to save my file

right now now underneath that we have to initialize the state when the component first renders so which means like we are going to be performing the side effect so I'm going To be using the use effect for there okay so what I'm going to do is that I'm going to provide a comma there and here we have to specify the product. ID and also the product. image black and also the initial product right here okay so what we have to do inside them we are going to be providing our initial product and now here we

have to specify the product. ID and also the product. image. black I'm going to save my file right now like this now let's start Working on Ori so first of all I'm going to go ahead and provide a classes today so I'll use like this going to be set to relative relative and width will be set to 20 rim and also margin all around will be set to one rim and Border will be set to this color which is a EC EC EC EC like this and I'm going to also close there margin for the

left will be set to three rim and also close there weiring all around will be set to four and now Inside this div uh what we have to do or you know what first of all we're going to be also attaching the event handler on there what you know we are going to be doing there in a few second but now let's just take care of the UI I'm going to Define another D with a class of relative and also background will be set to to gr of 200 pairing all around will be set to

four and inside this div it going be working with our image so for the image which will be coming from the Current come on the current image and here for the alternative text we going to be also providing the product. title like so and now let me just save there here we also have to specify the class names so I'm going to use like object cover and width will be set to 12 FR 12 frame like this and height will also be set to 12 r and close there rounded hold medium and margin for the

left will be set to one rim and close there and now if I just Refresh there we are getting some sort of error so not this one we have to go ahead and go to our inspect element and guess what we are getting some sort of error like cannot read the property of undefined reading the black and I figured out the solution so here you can see I'm now logging to the console this product and now if I show you there if I go ahead and go to my console and here you can see we're

now getting these errors and we are now getting our data But look at our data we are now working with the array and inside this array we have our objects and now what am I doing I'm just accessing that image directly from all of our images and that's not allowed which means like we have to iterate over through all of our data and then we would be able to access the image and also that black property from there so what do we have to do I'm going to go ahead and go to my app and

here I'm going to itate over through all of Our data and then we're going to be ping our data like so so I'll just use like first of all uh my data and did I give it the name of data yes I did and I'm going to be using a map method right here and for this map method it's going to take a and now inside there we have to render our product card now I'm going to copy the name of this product and place it right here and we're going to be also providing a

key and that key will be set to product. ID I'm going to Save my file right now and here you can see we are now getting all all of our products and now we are getting all of our amazing images which means like everything is working the way we expect him to work so when somebody have over our image so what do you want to do in this situation so right like how and inside there we're going to be creating a div it's going to be an absolute and also the insert will be set to

zero flex and items will be set to tot C justify Will be between and pairing for the xais will be set to four so inside this t let me just go back uh we are going to be creating a button and this button will have a few classes so first of all I'm going to render my icon which will be fa a this I don't even I can't even pronounce the name of this so shivon left or something like that f a s h e v n left and now let me just grab there and

close there we are going to be also providing a class name background will Be set to gray of 300 and totally round it full now let me just save my file and here we also have to provide a bit of classes today so I'll say like Carousel button and also T will be set to to Wi save this file and now if I have over there let me just refresh there if I have over there nothing will happen because we also have to provide the on click man Handler today and I'm going to also duplicate

this button and change the name of that to the right so I'm Going to change that to right and here ENT can also import there and everything else would be the same and now if I have over them nothing will happen now let me go ahead and go to my div and here on this div we have to provide our own Mouse uh Mouse enter and here we have to call this function which will be set product how and here we have to provide our product. ID and also true to there and when somebody leave

the mouse so let's just proide like on Mouse leave They're going to be still calling this function like set product how and here we have to specify the product. ID and set there two false I'm going to save this file and now I how over there here you can see we are now getting these icons so now let me just zoom in a bit and here if God damn it and here if I have over there we now getting these icons which is looking cool so I'm going to go back and now let's just start

working on the rest of the UI I'm going To also provide all of their titles and stuff so now underneath this D we're going to be creating another da with the class of mar for top and here for the top margin we're going to be providing one RIM today like so I'm going to be using H2 and here we have to render or product. title underneath there we also have to create a paragraph and this paragraph it allows us to render or price I'll use like par product. price and now let me just save my

file and Here you can see we're now getting the product image the product title and also its price so yeah that was our product card and now let's get into our sidebar not so fast not so first first of all we also have to attach the event handlers on this button and also on this one so what I'm going to do is that when somebody clicks on this button we want to fire this handle come on handle previous function and when somebody clicks on this button then we want to Fire this handle next uh function

so now let me just save this file and now let me go to the top like this and here we have to Define our function so first of all we're going to be starting from the handle previous function and inside this fun function what we have to do we have to get the images we have to get the current index so I'm going to go ahead and just grab the images and then let's just use the index index off and provide our current uh image inside and now we Have to store the inside the current

index uh variable as done we also have to get the previous one so I'm going to be using like the previous index and it's going to be equals to uh this current index I mean like not the current image but the current Uh current index which we are now getting now let me just copy that and place it right here and we are now going to be getting the last item then we are going to be attaching the images do length Okay so Now we have to divide there so it's going to gives us the

remainder as well and now we have to divide there by using images. length Okay so it's going to gives us the previous image and now underneath there what we have to do we have to get the set product image and now inside there we have to Define our product. ID and also the images and now for each images we going to be providing our previous index so now let me just save my file and this should be index Off there we go now I'm going to also go to the bottom and now let's just start

working on the handle next button so I'll just write like cons handle next and inside this function what do we have to do we have to get the current index and so on and so forth so I'm going to copy that and place it right here so it's going to use us basically the current index and now inside there we have to get the next index and here is going to be equals to this current index Plus one then we have to divide there with the images dot come on uh images. length and also we

have to use the set product image set product image uh not how God damn it set product image there we go and here we have to specify the product. ID and also on the images we're going to be providing the next index now let me just save my file and if I H over there and if I click on this button so it's going to gives us the next item and now If I click on this one so it's going to gives us the previous item right here okay so which means like it's going to

work for all of these images and they are looking super amazing so yeah you can also change there and there's something which I want to show you now let me go ahead and go to the sidebar and start working on this sidebar so I'm going to go to the top and here I'm going to be placing these interfaces and inside this interface we're going to be Providing the country image and also the price now inside this sidebar I'm going to go ahead and first of all create my States so I'll use like cons is open

and then set is open and it's going to be equals to the use State and the initial value will be set to false and here we also have to enter as a Boolean value now underneath that we also we have to create one for the country drop down and it's going to be set to the set country and now I'm going to set that to the use State and the initial value will be set to false and here we have to provide like Boolean value as well underneath that we also have to create one for

the color uh color drop down and set color drop down and it's going to be equals to the use State and the initial value will be set to false and I'm going to also inate as a Boolean like so I'm going to also create one for the price drop down and then set come on set price drop down it's going to be equals to the US St and Here for the initial value we're going to be setting there to false and inate as a Boolean value I'm going to save my files so that's going to

be at forward State and now underneath there we have to go ahead and first of all grab the uh what do we call it the use filter store I'm going to copy the name of there and now here from the store we're going to be destructuring a lot of things so I'm going to just use the destructuring syntax and we have to destructure the Selected country not color but the selected countries and also this come on selected the selected price range set selected country and also set selected color set selected price range and finally we

have to grab the clear filters from the I'm going to save this file and now we have to use that inside our UI but before I do that I'm going to also provide a prop for my navigation which will be set to toggle sidebar and here we are going to be passing this Toggle side bar function I'm going to copy a name of there and register this function right here so I'm going to use like con toogle sidebar and here we're going to be only using oh my God we are going to be only using

the set is open and change that to not is open which means like if this is true it's going to make it false if it is false it's going to make it true I'm going to go into my navigation and inside this navigation I'm going to destructure this I'm going To be using like toggle sidebar and here I'm going to create interface for this I'll use like interface and then navigation uh props would be fine and inside there we have to provide our Toggler sidebar or toggle sidebar and we're going to be only returning the

white from there okay so let's just close there and we're going to be returning the white now I'm going to copy a name of there and annotate my component like so now we have to use This tole sidebar so I'm going to just use there right here so when somebody clicks on there we're going to be firing this toggle sidebar function now here if I click on there nothing will happen not right now because we also have to take care of our navigation God damn it side bar so let's just go ahead and go to

our sidebar and start working on our sidebar first thing first we have to start from our sidebar okay so I'll just create a div with a class of a lot of classes so I'll just create a div and I'm going to put a few classes to it so the classes will be dynamic I'm going to provide a fix come on I'm going to provide a fix and also Top Value will be set to zero the left value will be set to zero and height will be set to totally full and width will be set to

80% so let's just use 80 and background will be set with holy White Shadow will be also totally large okay and for the transform we going to be rendering our Content dynamically so I'll just use like if this is open so in that situation we want to use the translate value on the x-axis and set that to zero but if that's not the case we have to use the minus translate value and set that to totally full I'm going to save my file right now this is how it looks like right here so now outside

from there we're going to be providing a bit of transitions to there so I'll just use like uh transition on the transform okay So I'm going to also put a bit of duration today and the duration will be set to 300 is in and out and for the Z index it's going to be set to 50 I'm going to save my file right now and inside there first of all we have to define the header uh with close button okay so I'll just use a d with the class of flex and justify will be set

to toly between items will be set to toly Center pairing all around will be set to four border on the bottom inside there let's Just use our H2 and this H2 will have the classes of text only large and font of semi Bard and I'm going to pass a filters inside there and now let me just save my file and here you can see we are now getting this sidebar right here and now we are also getting that filters so now let me just take care of that so now underneath this filters we're going to

be creating a button and this button will have um the fix so I'll just use like a fix and basically this is the Icon from the react icons I'm going to also provide a bit of class name so I'll just use like Tex of toally extra large and when somebody clicks on there we're going to be firing that same top sidebar function okay so here you can see we're now getting there if I click on there it's going to show us our sidebar and now if I click on this one so it's going to hide

there which means like everything is working the way we expect them to work and now to need this T we Have to Define our filters and that's going to be a lot of fun so now underneath this comment we're going to be defining our day with the class of pairing all around of four and spaces on the y axis will be set to six inside that we have to first of all start from the country come on oh my God country filter and then we are going to be taking care of the rest of the

stuff this I'll use a div inside this div we have to Define our button and for each Button we're going to be attaching flex and justify will be set to between items will be set to Center and the width will be set to to full text to left inside this button uh I'm going to be creating a span which will have the font of medium and it's going to say country like that I'm going to save my file and now to need them we also have to render our fi and that same icon so this

h v r n shiron down or something like that I can't even pronounce the name of this Icon and now let me provide a bit of class names today and here we are going to be rendering our classes dynamically so let's just use our transform and if our country drop down so in that situation we're going to be using rotate on the 180° but if that's not the case so we are going to be setting there to empty string so now let me just save my file and now if I click on there here you

can see we're now getting this country but We don't have any content inside there and by the when somebody clicks on this button we're going to be firing this function so now let me just use like uh toggle country dropdown I'm going to save the file now let me go ahead and go to the top and Define this function right here I'll just give it the name of like cons country dropdown it's going to be equals to the set country drop down and not country drop down which we already defin right here so we have

this Country drop down and the initial value is specify false today so if that's true we're going to be making it false but if that's f FSE we're going to be making it true and now here you can see if I click on there and if I click on this icon here you can see it's going to rotate or yeah rotate on the 180° so that's cool and now underneath this button we have to render our countries so I'll just use like country drop down if that is the case we want to Show this UI

I'll just create with a class of margin for a top of two and and spaces on the y axis will be set to two inside this D we have to render our unique countries so how in the world we are going to be even getting a unique countries now just go to the top and here we have to define a unique countries and that's not going to be a huge case so we just have to get the unique unu n IQ unique countries it's going to be set to AR rayar from and Inside there we

have to use the new set so it's going to only gives us the unique stuff and it's going to remove the duplication and now inside there we have to specify all our data which we are now getting from this data.js file so I'm going to go ahead and go to the top and import this I'm going to use like uh data from when from let's just go ahead and go to the top and from our DB and data I'm going to save my file and copy the name of there now let me go To the

bottom and here we have to specify our data now we're going to be iterating over through our data so I'll use like the item and now we going to be annotating this item with this product and now here we have use like item. country God damn it item dot oh my God item. country there we go oh I'm doing it wrong so I'm going to cut that from here and we have to wrap that in another parenthesis and now we can use there so that's all you're done so now we are Getting this unique countries

so I'm going to copy a name of there and here we're going to be passing it so I'll use that unique countries like so and now we have to over through all of that unique countries so I'm going to get the country and also the index of the country so inside there what do we have to do uh I'm going to go ahead and just Define my div and close there like so and this D will take a key and here we have to specify index inside there and For the class names I'm going to

specify flex and items will be set to toly Center and when somebody clicks on there we're going to be firing this function which is the handle country come on handle country handle country selection and now we have to specify our country inside there I'm going to save this file and we're going to be seeing the result of that in a few second and we're going to be even also creating this function in a few seconds so now let me just go Inside this de and here we have to specify our input field and for this

input field we're going to be setting there to check box here we have to provide our checked state so it's going to be check if we have the selected country not color but the selected country do include that specific country which we are now taking as a perimeter so I'm going to go ahead and copy a name of there and place it right here and that's going to be it now underneath This check we also have to provide the own change event handler like when somebody change there so in that situation we are going to

be firing this handle country selection God damn it I'm going to copy the name of that and place them right here and provide our country inside there and I'm going to also specify the class names and the class name will be set to margin for the right of two now to need this input field we have to Define our span and here we have To render our country inside there now let me go ahead and copy a name of there and create this function at the top of our file so now underneath this unique countries

we're going to be defining like const andle country selection and here we have to provide the country and the country will be a string inside this uh what we have to do we have to use our set selected countries and here we have to provide first of all the selected country selected countries now we have To provide the includes method if that includes the country so in that situation we're going to be using the selected country come on selected countries and we have to filter through there selected countries and now we have to filter through

them and here we only have to specify each country if that each country does not equal to that country tree which we're now taking as a perimeter we only want to remove the like we we totally want to ignore that But if that's not the case we're going to be first of all making a clone of all of our selected countries and then we have to specify each country inside then now let me just save my file and that's done so now let me just refresh there and if I click on this icon so it's

going to open this sidebar if I click on this country and it's going to gives us all of that unique country so it's going to gives us Japan USA China India and so on and so forth and yeah I can click on There and nothing will happen because we have to paste this filtering into our app component so we are going to be doing that in a few seconds but now let me also take care of the the rest of the filtering now that's done I'm going to collapse them and now underneath this div we

are going to be defining yet another div and that div will be a color filter like so or colors filter rather so now underneath there we going to be defining a div and inside this div we Have to Define our button and this button will take the classes of flex and justify between item toly Center and with toally full text to left inside there we're going to be defining a spin with a class of font medium and it's going to say color I'm going to also attach the event handler today so when somebody clicks on

it we going to be firing this function which is a toggle color drop down color drop down there we go and now let me just save my file and Underneath this pin we're going to be defining our icon so I'll use like not this f i sh drop down there we go and I'm going to also spef by the classes and here we have to render our classes totally dynamically so I'll use like the transform not a translate but just a transform and we going to be rotating there if our color drop down is set

to true so if that's the case we're going to be rotating there 1008 degree but if that's not the case so we're going to be Setting that to empty string now need this button what you want to do we just want to render all of our content so I'll use like if we have our color drop down if there is true then we want to show this UI so inside this UI we are going to beating over through all of our colors I'll use like black brown and also the red color and the white color

and the golden color like there or you know what we're going to be doing there but first of all we have to create a With the class of margin for top of two spaces on the y- AIS of two and inside there let's just start working on there I'm going to use the map method to over through them and I'm going to pass a color inside there and now here we have to create a div and now for this div we're going to be passing a key and the key will be coming from this each

color so I'm going to copy a name of there and place it right here I'm going to also proide the class names and the class Name will be set to flex items will be set to totally Center I don't know why I'm getting this error but yeah we are getting this error I'm going to have to cut that From Here and Now inside there we have to paste it like so or you know what let me just paste the manually so I'm going to use like the map and here we have to paste the color

and now inside that we have to define the div and this div will have the key and the key will be that specific color we're Going to be also passing a classes like Flex and and IRS will be set to totally Center when somebody clicks on there we're going to be firing this function which is a handle color selection and we are going to be creating this function in a few seconds now inside this div let's just Define our input field with the type of checkbox and now here we're going to be checking that if

that's checked or not so first of all we have to provide the selected color and if That includes the color there specific colors which means like that's checked okay so now let me just save my file and here we're going to be also passing this on change you hander like when somebody try to change them then we're going to be firing this function which is a handle color selection and here we're going to be passing that color inside there I'm going to also provide the class name of margin for the right of two now to

need this input field we're Going to be rendering our span so I'll use like the span and here we have to render our color inside there now first of all I'm going to go ahead and create this function and then we are going to be creating that another one so now here let's just just create them what I'm going to do is that I'm going to create a function with the name of toggle color drop down and it's not going to do anything crazy but here we're going to be only using the set color dropdown

and We have to provide like not color dropdown now let me just save my file and now it's time to create this function which is um and I'm going to also paste that color right here and we have to make it as a arrow function like so now let me go ahead and go to the top and Define this function right here so what we have to do we have to create a function with the name of handle color selection and inside it's going to take a color as a perimeter and that's going To be

a string and now inside this function what do we want to do we just want to get the set selected colors like so and here we have to pass our selected color and if that includes that specific color which we are now passing as a perimeter then what do we want to do we want to get the selected colors selected colors and we want to provide the filter method on there and we want to filter out that specific item so I'm going to p the C for the color and if C does not Equal to

that color which we are now taking as a perimeter then you want to get their specific color but if that's not the case you want to make a clone of our existing selected color so we'll use like the selected colors and then we have to specify our new color to there like so and now let me just save my file and that's already done now if I click on the sidebar and click on the color so I can now choose different kind of colors right here you can also specify Your own one if you wanted

to but in my case that's going to be add and and I'm making a mistake so I'm going to also cut the line of code now if I click on there here you can see we're now getting this result which is looking cool now that's done I'm going to hide them and now let's start working on our pricing filters we use like price and then filter and now here we're going to be defining that same thing like the D and then the button which will have the Classes of flex and justify will be set to

between the items will be set to to the center with uh totally full and text totally left inside then we have to Define what with the class of f medium and it's going to say the price and when somebody clicks on this button you want to F this function which is the toggle price drop down okay drop down like so now let me just save my file and now underneath this pen we have to Define that same icon so I'll use like fi and Then shivon or something like that and we have to close that

and now I'm going to provide the class names and that class name will be totally Dynamic so I'm going to P like transform and we're going to be rotating the if or price price drop down is set to true so in that situation we're going to be rotating there on the 180° but if that's not the case uh what do you want to do you just want to set the two empty string now let me save There now underneath this button what do you want to do we just want to render if our price drop

down state is true then we want to show this UI but if that's not the case then we're not going to be showing nothing at all I'm going to create a with the class of margin for top of two and spaces on the Y AIS of two inside there let's just create our data so I'm going to create a few levels so now inside this array we're going to be defining a few objects so I'm going To hit enter right here and also right here I'm going to first of all provide My Level and for

this level I'll just write like below $300 and here we also have to provide the minimum and minimum will be set to zero and the maximum will be set to 300 I'm going to save this file and we are getting some sort of error is not assignable to the type react node know what we will take care of that in a few seconds but first of all I'm going to make a few of them so I'm going to duplicate there a few time and here we have to change the two instead of a three starting

from a 300 to 600 and also here we have to change that to uh 600 so I'll just change that to six and now I'm going to change the minimum value to like 300 and also the maximum value to 600 and for the maximum we have to change that to 600 and then here we have to provide the infinity now I'm going to itate over through all of these items so I'm going to use the map Method and here we have to provide the range and now inside there now inside there what do we want

to do we just want to create our div and this div will have the key and the key will be range. label I'm going to also provide the class names and the class name will be set to flex and items will be set to totly Center and when somebody clicks on there we want to fire this function so now let's just F the on click event handler we want to fire this specific function Which is a handle price range selection and here we have to past the range inside there now inside this D what we

want to do we just want to create our input field with a type of radio and then this can to be checked if we selected price range. label do Lael if I can type that today label is equals to the range. label so in this situation uh that's going to be checked but if that's not the case so it's not going to be checked and when somebody try to change Them we're going to be firing this function which is a handle selection and here we have to provide the range inside there I'm going to also

provide the class name and the class name will be set to margin for the right of two and now underneath this input field we have to create our span so I'll just write a span and here we have to render our range. label like so I'm going to sve my file right now and now if I just refresh there we are getting some sort of error Obviously we would get some sort of error because we have to create these functions so now what I'm going to do is that I'm going to copy the name of

there and create this function or you know first of all let's just create this function so I'll just go to the top in here I'm going to be creating that function so what I'm going to do is I'm going to just write like toggle price drop down and here I'm going to be using set price drop down and change that to Not price drop down okay so that's done now I'm going to go to the bottom and create this function which is a handle price range I'm going to go to the top once again and

here we're going to be creating that function which is a const handle price range selection and it's going to take the range and that range will be a lot of range okay so we are going to be placing the minimum value and the minimum value will be set to number the maximum value will be also Set to number and the label will be set to a string you can also Define a different interface for them but in my case I'm not going to if that's not the case we're going to be placing a null value

today and now what I'm going to do is that I'm going to only use the set selected price range not color but selected price range and here we have to specify that range inside there now let me just save my file and now if I click on there and here you can see we're now Getting the prices so now I can choose the above 300 and starting from 300 to 600 and also above the 600 so yeah you can also now filter these items by using the prices that's done so I'm going to hide there

and now underneath this price filter we're going to be defining our footer right here okay so this going to only allows us to clear out the filter so I'm going to create a d with the class of pairing all around four and border on the top flex and justify will Be set to between and inside there we have to create a button and it's going to say like clear all when somebody clicks on this button so we're going to be firing this clear filters function and also I'm going to be passing a class names or

background totally black text toally white and pairing for the xaxis of four pairing for the Y AIS of two only rounded so now if I sa my file now let me just click on that and here you can see we're now getting this clear Button and you know what I'm going to remove this ping on the x-axis not the pairing on the x-axis but I'm going to prob like margin for the right of two or margin for the left of two yeah I guess that's going to be fine that's also done so I'm going to

hide there and now underne this putter we're going to be defining our back uh overlay right here so now underneath there we're going to be checking like if our sidebar is open so in that situation This overlay to there so I'm going to create a div and I'm going to put a bit of class name to there like it's going to be S totally fix and the insert will be zero background totally black and the opacity will be set to 50 and the Z index will be also set to 40 and when somebody clicks on

there we're going to be using the toggle sidebar function it's going to just hide our sidebar and it should be outside from these divs so I'm going to place it right here save my File and here you can see this is how it looks like right here so I can now choose them and also so I can totally close there and here you can see it's going to hide there so if I click on the and if I click on the overlay it's going to also hide my sidebar so this is looking cool now finally

let's just Implement those filters inside our app so first of all we are now getting these errors so I'm going to just annotate with the any because we already Completed the product so now the next thing that we have to do is that we have to change this store to not a store but this data to instead of using a JS we have to convert the to the TS case no let me just close there and then St done so now first thing first what do you have to do first of all we're going to

be importing what do we call it the use filter store I'm going to copy the name of there and we have to execute there right here and the next thing that we Have to do that we have to restructure a few things from there so I'm going to be using like the selected country we would also have to destructure the selected color and we would also have to destructure the selected price and now let me just save my file the next thing that we have to do is that we have to define a filter based

on the selected data so I'm going to use like data and then do filter and it's going to take the item and now we're going to be Annotating there with this product and we're going to be defining this product in a few seconds so now I'm going to go ahead and just start working on there and you know what let's just Define this product okay so I'm going to define the right here so I'll create the interface and this interface will be set to this product it's going to take the ID and the ID will

be a string the country will also be a string and I'm going to also specify the image and the image will be There and we have to import that and now we have to pass the string comma string inside there next we're going to be also providing the price and the price will be set to a number now we successfully annoted there now inside this filter what do we have to do I'm going to first of all check if the item matches so for that we are going to be using like the select colors and

then do length if the selected colors. length is equals to zero or the object do keys and here we Have to specify item. image then we can use the Su method on there and we also have to P the colors inside there and now we are going to be using the selected colors that includes that specific color so now I'm going to save there I'm going to also store there in some sort of a variable so I'll use like match color and it's going to be equals to this matches color right here that's the first

thing that we have to do next we also have to check like if the item Match is the selected price range so I'm going to just go ahead and just write like match price or matches price it's going to be equals to the selected price range come on SE selected price range so if this the case we are going to be checking once again so if item do come on I not items but just item. price is greater than or equal to the selected selected price range do minimum and the item dot not items but

just item. price is less than or equal to the selected Price range. Ma Max Max so that's going to be the case so that's not the case so we're going to be setting that to true and now finally we have to return all of that so I'll just use like return the matches color and matches price now I also forgot to include one more so what do we have to do we have to define the cons matches country it's going to be equals to the selected countries. length come on L GTH if that's equal to

zero or the selected country do includes Includes the item. country okay so that's going to be it for the matching matches country I'm going to copy the name of there and I'm going to also place it right here like so now I'm going to go ahead and store there in the filtered data variable so I'm going to copy a name of there right now let me just copy there go to the bottom and instead of using the data I'm going to paste the filter data right here okay so now it's going to filter our items

based On this data and now if I click on the side bar now I can choose different kind of filters so if I click on the Japan it's going to only gives us all of that watches which are from the Japan I can also choose like United State China India and so on and so forth now I can also choose different colors so if I choose like the black it's going to gives us all of that colors like here you can see this one is black and this one will also have the black variant so

Now let me just show you that here you can see this one is black and also this one is black so which means like it's going to also gives us that specific color item if I choose like the white also gives us white because all of these watches have the white variant like if I show you there here you can see we have the white variant right here and so on and so forth so if I just show you this one here you can see this one also have the white variant so that's also the

Colors one now if I go ahead and click on the prices I can also choose like below the 300 and also I can choose the above 300 and also I can choose like above $600 now I can select different kind of watches and yeah that was our final project of this course he again Su and wer YouTube channel so in this video I'm going to be making you the redex toolkit and rtk query monsters so there are a lot of great resources out there which teaches the rtk query and also the Redex toolkit so why

you should spend your time watching this course so to convince you in the first part of the course we're going to be learning about the redex toolkit and then the rtk query but in the second part we are going to be building two amazing and I'm talking about a huge industry level projects so I already built and the first project is already on my YouTube channel but the second project will take I don't know maybe two or 3 days so by the time You're watching this video the second project will be already on my YouTube

channel so now let me show you where you can find these projects and how to become a merch monster so you don't have to go any further you just have to search husan webd on YouTube and it's going to bring you to my YouTube channel right here and I have a lot of amazing courses if you wanted to check it out so here you can see we have this merag project course and this is the entire Project and by the way if you want to become a merag developer here I already have a course on

that now let me just show you that course so you can just watch this course and it's going to just make you a JavaScript monster okay so this course offers every single thing that you have to know about JavaScript but anyways back to our topic now we are talking about the mer stack project so if you click on this playlist it's going to bring you to this playlist right here Which teaches every single thing about the Redux toolkit and artic queries so the first thing which you have to do is that you have to watch

this video which you are currently watching and then you have to jump straight into this project right here so duration of this project is about 15 hours and it's going to make you a superstar in mer Tech and I'm already working on the mer stch movies application which will be launched I don't know maybe in two or 3 days so Stay tuned and now let's learn what in the word is a Redux and then we are going to be jumping into the Redux toolkit so we are not going to be using using the redex score

in this course but I just want to give you a quick overview of what a redex is so redex is an open source JavaScript library for managing the state and here the keyword is the St so if I ask you a question like what is a state in reactjs so your answer will probably be like a use reducer the use Context the use State and all of that kind of stuff so redex is an open source JavaScript library which allows us or which help us to work with State Management in a predictable way and it

is commonly used with libraries like reactj for building the uis but can also be used with other JavaScript Frameworks and libraries so a lot of people think that reactjs and redex Tool are totally the same thing but they are not and I can totally understand like why they Think that way because there are countless courses which teaches reactjs and redex JS in the same video or in the same course so that's why these people think that reactjs and Redux toolkit or Redux is totally the same thing but they are not okay so that was just

a quick overview of what a Redux is but now let's talk about something called the Redux toolkit so Redux toolkit is the official opinionated batteries included tool set for efficient Redux development Wait what Redux development what are you talking about H okay so now let me tell you what's the difference between redex toolkit and just a redex score redex score makes the State Management easy and yeah it it makes it easy but you're going to have to learn a lot of things and you're are going to have to also write a lot of boiler plate

code which is not going to be necessary now we are using the Redux toolkit okay so redex toolkit makes the redex development easy To work with Okay so yeah that was just a quick intro to what redex core is and also what a Redux toolkit is and that was just the differences between Redux core and also the Redux toolkit so now let's talk about how we are going to be using Redux and how Redux works so I want you to imagine this component hierarchy for a second and here you can see we have a app

component right here and we would have some sort of important data inside this app component and we Want this data inside this data component as well so how in the world we are going to be doing that I'm just asking a question like how in the world we are going to be pushing this data which is inside the app component to this data component right here so your answer will probably be like first of all we can also use uh the props and we can pass this data to the card component then we have to

pass it to the user component then we have to pass it to This data component and that will totally work but here you can see we are repairing ourselves right here okay so now let me just delete that we are now repeating ourself and that's not a better practice well some of you will also give me this answer that we can pass this data by using the context API or by using the context yeah we can totally do that by just using a Contex and we can pass this data to any component that we like

but I want you to Imagine for a second that you are working with I don't know Google or maybe the Facebook or some other headquarters and they would have countless component so for that you're going to have to use Contex API like countless times but in Redux toolkit we are not doing that in Redux toolkit we are going to be defining something called the store you don't have to worry about what a store is let me just uh label that as a store we're going to be Creating a separate store outside from this component and

inside that store we are going to be placing all of logic and then we are going to be pushing our data or storing our data or you can say the logic or you can say the state um initial State values you can give it any name you like okay so we're going to be first of all creating a store then we're going to be storing some sort of a data inside the store and then we will be able to pass this data to any of the Component that we like like for instance if I want

to use the same data inside this data component so I can totally pass it right here or if I want to use it inside the header component I can totally pass it right here or if I want to use it in the card or in the time component or in the I don't know so you can reuse this data again and again so this is how the redex work and this is what we are going to be learning throughout the course plus we're going To be also learning about a lot of different things but not

right now so I want you to imagine this hierarchy and we're going to be solving this problem by using our store so before we get into the store first of all I want to make a setup and I also want to show you the Redux toolkit dogs and then we're going to be jumping into the store so I want you to come to to this link which is called the rx. j.org and it's going to bring you to the redex score Documentation right here we are not going to be using that but I want to

show you something so they are now calling themselves as a predictable set container for JavaScript apps okay so if I just go a bit further so we are going to be using these two packages right here throughout the course the first one we have is a react Redux and it's going to allows us to work with the reactjs and also the Redux toolkit so this is just a binder for working with the Reactjs and also the Redux toolkit and the next package which we are going to be using is you guessed it we are going

to be using the Redux toolkit package so now I want to show you something so now if I click on this getting starting B right here so they are now officially recommending the Redux toolkit so it is now officially recommended approach to use the Redux toolkit okay so yeah and by the way here you can also see inside this U main documentation in the Installation page they are also suggesting to install the Redux toolkit uh yeah Redux toolkit just a Redux core okay so we are going to be using this command and we are going

to be also uh binding there with reactjs but first of all I want you to just click on this Redux toolkit and it's going to brings us to the Redux toolkit documentation right here so say byby to the Redux and we are going to be working with the Redux toolkit now I want to click on This getting started button right here and here you can see they are now suggesting to use this uh Redux tool kit and now I'm going to just click on the quick start or you know what Qui uh tutorial overview right

here uh no not this one quick uh quick start would be fine we're going to be installing these two packages right here but first of all I want to make a setup for this course so we're going to be first of all installing the reactjs by using the weed So I'm going to just open my terminal inside my desktop right here let me just zoom in a bit so you guys can see everything a bit better and here I'm going to be just placing this command if I can expand that today I'm going to be

just uh passing this command word here which is you know first of all let me just name that to something else I'm going to just rename that to like my uh RDX would be fine and now I'm going to just hit enter right here but first of All we are just creating a weed project and we are just naming that as my RDX you can give it any name you like and we are using the react template not a view template and also not an angular template we are using the react template and this what

we are going to be doing so now let me just hit enter right here and now we have to go inside to that folder so I'm going to just write a CD and my RDX and I'm using a vs code so if you're using something else you know First of all let me just show you all of the files and folders which we currently have right here so here you can see it's going to gives us that public and all of that files and it will not gives us that not modules folder because we have

to install all of the packages for that so I'm going to just write like npmi to install all of the packages inside that folder and it's going to just install the react by using a Ved inside that folder so everything is now successfully Installed and I'm using a vs code code so I'm going to just write a codee DOT and it's going to open my vs code on the other screen so now let me just grab that right here and here you can see we have this folder structure right here and I already assume that

you guys already know this stuff so I'm not going to explain all of that so I'm going to just delete this public folder and I'm going to go ahead and go to the SRC folder I'm going to also delete this Sence folder we are going to be also deleting this uh app.css and now let me just remove every single thing from this index. CSS I'm going to also remove every single thing from this app and I'm going to just use the RFC and going to just create this component for us and now let me just

go ahead and go to my main and I'm going to just remove this uh react strict mode and also this react strict mode right here let me just remove that s my file let's just go back And this is how everything currently looks like but now let me just run my project so I'm going to be using npm run Dev so it's going to just run my project by using this port now let me just click on there and here you can see it's going to just gives us that app right here why is that

because currently we just only have this app right here so that's why we are now seeing this app okay so yeah that was the installation and cleaning up of redex tool oh by the way I forgot To install the Redux toolkit and uh the react binder let me just do that so first of all we're going to have to install the Redux toolkit for the state management and also we are going to have to install the react Redux to work with reactjs by using Redux okay so now let me just click on this command and

now let me just open my terminal one more time and I'm going to be just placing this Command right here so it's going to just install all of the packages and Everything is now successfully installed so I'm going to be using npm run day one more time and now let me just show you my package.json okay so here you can see it's going to install this redex toolkit and also this react redex right here okay so this is what we are going to be using throughout this course and everything is looking okay so enough about

a setup and configuration now let's talk about a store but before we get into the store first of all I want You to keep in mind one thing throughout the course if I said Redux I mean the Redux toolkit okay so I want you to just keep that in mind so now let's talk about what a store is and why I should care about that so A store is a central place where the state of your application is stored and it can be created something called the configured store function which I'm going to be showing

you in a few seconds and it holds the entire state three of our Application so yeah that was just a quick intro to what a store is but now let's talk about how we are going to be creating a store well to create a store first of all we're going to have to get the configure store function from the redex toolkit and then we have to execute that function and inside this function we are going to be just passing our object and inside this object as a property we're going to have to pass the reducer

and here we are going to be Passing a lot of reducers right now we are going to be just focusing on creating a store and later we're going to be ping the slices and reducer and all of that kind of good stuff so now let me just write some code and then you will get to know what I'm talking about so here back to my project right here okay so I'm going to just sve there say byebye to this one now let me just zoom in a bit right here the first thing I want to

do is that I want to create a Separate folder right here you can give it any name you like a lot of people give it the name of Redux you can totally give it the name of Redux if you wanted to but in my case I'm going to just give a name of like app because it was mentioning the documentation so I'm going to just also use the official documentation okay so now inside this folder we're going to be creating a separate file I'm going to just give a name of like store and then JS

because Currently we are working with Javascript file so we have to name it as a JavaScript or extension as a JavaScript so now inside that if you wanted to create a store first of all we going to have to import the configure store function from where from the Redux toolkit and now we have to execute this function and inside this function we're going to have to pass our object right here let me just pass the object and inside this object we're going to be Passing the property of reducer RCR and the value will be just

set to the object okay now we have to just export this so that we totally use in other file so I'm going to just write like export and I'm going to just give it the name of store right here so yeah this is how we're going to be creating a store and that's totally a okay and totally easy to work with the first thing which you have to do is that we have to import the configur stol and Then we have to execute them and then we have to just pass the reducer as a property

and value will be set to totally empty uh object right here okay so we just have to export this so we can toally use in other files so yeah this how we going to be creating our store but now let's talk about how we are going to be using this store in our reactjs so we already learned about how we are going to be creating a store but now let's talk about how we are going to Be providing that store to the reactjs so the first thing which you have to do is that we have

to just import the store and then we also have to import the provider component from the react Redux okay so once we import that then we're going to be just wrapping our entire application from this component which is the provider component and here we are going to be passing our store and then our entire application will have access to our stores now let me just do that Okay so I'm going to just close this one and now let me just go ahead and go to my main component right or main file right here the first

thing we would do is that I'm going to just grab the store from where let's just oh not the Bible or Bible let's just go ahead and go to our app and then we have to go ahead and go to the store so we're going to be just grabbing the store first of all and then then we would also have to grab the provider from where from the react Redux Okay so now we successfully grab both of them but now we have to use that so the first thing which I want to do is that

I want to wrap my entire application by using that provider component okay so I'm going to just write a provider opening tag and closing tag now let me just hit enter right here and let me just provide my app inside this provider component and now we have to finally pass the store as a property and value will be stored okay so now our entire Application will have access to or store which we just created a few seconds ago so yeah that was just intro to how to create a store and how we are going to

be using that store inside our main component so now let's talk about another essential component of redex tool kit which is called the slices so what is a slice and why you should care about that so A Slice is a piece of store set and the corresponding reducer logic to update that specific St so Slices are a way to organize our redex store by breaking it down into more smaller and more manageable parts and yeah I know that sounds a bit scary and confusing that's because it has a lot of BU words right here but

now let me just break all of them down for you okay so here is the analogy so I want you to imagine that you have a big cake and you want to cut that specific cake into more smaller and more manageable pieces so each smaller piece is like a slice of The cake in the context of redex toolet a slice is like a smaller part of your application overall State and the instruction on how to change or update that specific part okay so yeah that's as simple as I can go okay so yeah that was

a slices but now the question is how we are going to be creating a slice the syntax is looking a bit scary no it's not here you can see the first thing which we are doing is that we are grabbing the create slice Function or method whatever you want to call there and then we are executing there and inside that we are passing the name property and we are providing some sort of a value for that name in this case I'm working with the counter so I just name it as a counter if you are

working like I don't know maybe if you are working with a theme changer or I don't I don't know if you working some other slce so you would name it totally differently and I want you to keep in Mind that this is totally important okay so you're going to have to P the name some sort of a specific name to that now let's talk about the initial value and the reducer and also the actions so first of all let's talk about what is initial State initial State as the name suggest is going to be the

initial data of your St okaye what do I mean by that in this case I want you to imagine the initial state to be as your used St so in the U St you can Pass anything you can pass the object you can pass the I don't know you can pass the string you can p some sort of a number or arrays or nested object or nested arrays or anything like that in my case I'm currently working with the counter so that's why I just specify the value I mean like the property of value and

the value of zero right here so you can totally give it the name of like counter banana you can give it any name you like and then you can also specify Any value that you like right here okay so yeah that was the initial steps so now let's talk about what in the world are reducers and why should care about that so reducers are like the instruction on what to do with each slice of the cake and they Define how the information in a particular slice can be changed or update so that's what reducers are

and here you can see we are now telling how to change this data right here like how to change this value So first of all we have a method of increment and then we have a method of decrement these are something called the actions now you might be saying like hose what in the world are actions now let me just discuss what our actions are so actions are like a request or the commands you give to change a specific slice of a cake for example you can give it the command of like it a bite

and that instruct how to take a bite from that slice right here okay so here you Can see we are now telling how to change this initial State value so you can think about this initial state is like the U State and you can think about um what do we call it these actions as like the set and the state name that was an awful analy so here you can see we're just providing some sort of initial value and then we are going to be telling our rer like how to change this value so if

somebody click on the increment Buton so we're going to be Just adding one to it if somebody click on the decrement button so we are going to be just removing one from it so finally we just exporting our actions right here so currently we just have these two actions but if you have like a lot of them so we are going to be exporting a lot of them okay so here I want you to imagine you know I'm going to just tell you there in a few seconds and then finally we are just exporting the

reducer from our counter slice so Now let me just write some code and then you'll get to know what I'm talking about so here you can see back to our project and now let me just go ahead and go to my app folder right here let me just zoom in a bit and inside this app folder we are going to be creating a separate folder you can give it any name you like but if you want to follow the same Convention as the doc shows so for that we're going to have to pass the features

and inside this feature we're Going to be introducing some feature so inside that I'm going to be just creating a separate folder and by the way you don't even have to create a separate folder you don't even have to create a features folder but that was recommended in the dog so that's why I'm following that so now here you can see we're going to be attaching the feature of counter so that's why I'm going to just name this folder as a counter and inside this folder we're going to be Creating a separate file and I'm

going to name that to like uh counter slice right here and by the way this is also a community convention you can give it banana you can give it any name you like but in my case first of all we're going to have to pass the feature or the slice name and then finally at the end we're going to have to pass the slice okay so I'm going to just hit enter right here and yeah that was a lot of community conventions right here so now let me Just go back and the first thing which

you have to do is that we have to import or create come on create slice from where from the Redux toolkit so we going to be grabbing there by using the named export and then we're going to have to just pull this function right here and inside this function we're going to be passing our object and inside this object we're going to have to pass some sort of a name for our slice so in my case I'm currently working with the Counter so I'm going to just give it the name of counter right here okay

so now the next thing which you have to do is that we have to P some sort of initial State or the initial value whatever you want to call that so I'm going to just write initial State and here we're going to be passing the object and inside this object we're going to be passing the value you can give it the name of like count if you wanted to but in my case I'm going to just name it as the value Okay and the initial value will be set to zero you can totally write your

code like this and in some cases you'll see a lot of Engineers use this conventions right here so they will grab the functionality from the initial State then they will create another initial State variable outside from there and then they would paste this initial value inside there they can copy and place it as a property and value but they can also use the es6 way to use just name Right here okay because the name in the values are totally the same so they can write their code like this but in my case we just have

only small st so I'm going to just cut that from here and now let me just place it right here once again and now this is how we're going to be passing the initial value to there and now let's talk about the reducers so here we are going to be passing the reducers and inside this reducer we are going to be passing the action so how we Are going to be changing this data so the first thing which I want to do is that I want to create the increment function right here and you can

create it by using using the function Reser keyword if you wanted to but in my case I'm going to just write uh increment right here and then we're going to be grabbing our st. value and it's going to be equals to one and now a lot of people will say like hose what the hell are you doing you are accessing the state and You are directly mutating your state like what is going on and there's something called the Emeral Library which I'm going to show you in a few seconds and now let me just write

a comma and then we're going to be also creating a decrement function as well now let me just pass my uh State part here and we're going to be just writing a state. value minus one in this case so what is going on in this area we are now accessing our state directly like here You can see we have uh the value inside the state and we are now accessing or state directly and we are now mutating or changing whichever name you prefer we are now mutating or changing our state directly and that's not allowed

in reactjs because it's going to work behind the scene but it will not reender your application that's a big no no in reactjs but in Redux toolkit it uses something called the EM Library behind the scen so we can totally access or State and then we can totally mute or state directly right here okay so yeah this is how we going to be creating uh you know first of all let me just say that once again this is how we going to be grabbing the slice this is how we are going to be using the

slice first of all we have to pass the name then we have to pass some sort of initial value to that then we have to provide the reducers and inside this reducers we're going to have to pass our actions right here and now Finally let me just export that so I'm going to just write like export cons counter slice we now equals to this counter slice right here so that's totally a okay but we would also have to uh export this increment action and also this decrement actions right here and to do that first of

all we're going to have to go a bit back and now let me just write export cons and we're going to be just exporting the increment and also decrement from more counter slice do Actions and please please notice these are something called the actions with the S not just action let me just remove this s right here not just action these are plural I can't pronounce this name that's why I'm not doing that these are plural not a singular yeah English isn't my first language so that's why it is a bit difficult for me and

now let me just write export default and let's just export our counter slice reducer okay so that's everything we need for now this Is how we are going to be creating our slice but now how we are going to be binding this slice or this logic to our store now let's just learn about that so we successfully create our slice but now the next thing which you have to do is that we have to add that slice reducer to our store so the first thing which you want to do is that we are going to

be grabbing our store I mean like we are going to be grabbing our reducer and inside this reducers we or reducer Property we're going to be passing the property of n thing you can give it the name of anything you want but in my case I'm just giving it the name of counter and we're now passing a reducer to that so that's why it will totally work so now let me just write your code and then you will get to know what I'm talking about so I'm going to just go ahead and go to my

store once again and here what I want to do is that I'm going to be grabbing my counter reducer right here You can give it any name you like and we are going to be first of all grabbing that from the feature then go to the counter and then go to the counter slice now let me just copy that and here we can give it any name you like as a property but might I gue I'm going to just name it as a counter and here we're going to be passing our counter slice so everything

is now successfully done but the last part is missing which is how we are going to be attaching this logic to Our react components and welcome to the final part of the redex toolkit so now let's talk about how we're going to be using the redex St in action in the react component so we're going to be using there by using the used selector Hook and the used dispatch hook it sounds a bit confusing and but trust me it's not and then we're going to be also grabbing our actions right here which is the increment

and also a decrement and then finally we are going to be using The use selector and the use dispatch so now let's talk about what in the word is a use selector and also the used dispatch I don't want to confuse you so the use selector hooks allows us to read the data from our redex store as simple as that and the use dispatch function allows us to change that data which we are already reading by using this use selector the dispatch fun is used to send action to the store triggering updates to application state

in simple Terms it lets you change the state of your redex store from within your react component so how that we're going to be doing that and here you can see first of all we're going to be using the use selector to read some sort of a data from our store and then we're going to be just executing the used dispatch we're going to be just storing the in the dispatch function and here we are going to be just passing our increment and also the decrement function right Here or action whatever you want to call

that so now let me just write some code and then you'll get to know what I'm talking about so now let me just go ahead and first of all uh create a component outside from this app component let me just zoom in a bit we're going to be creating a component outside from this app component and we're going to be creating the inside this SRC so I'm going to just give it the name of like components and inside These components we're going to be creating another component uh of counter. jsx this is going to be

our react component so now if you want to use the Redux logic inside our component the first thing which you have to do is that we have to grab the use selector let's just grab that like that from where from the Redux not Redux but the react and also the redex library so we're going to also need the use dispatch hook as well and let's just Import our actions right here so we're going to be importing our action from there let's just go ahead and go to our app component folder then we have to go

ahead and go to the features then we have to go to the counter and inside this counter we are going to be getting our logic from this counter slice right here okay so we're going to be just getting the increment and also decrement actions okay so now let me just go back and now let's just create some sort of a Component right here I'm going to just give it the name of counter right here and inside this component let's just remove there and the first thing which you have to do is that we have to

read the data from the uh redu store or just a store whatever you want to call that so we are going to be reading our data by using the use selector and inside that we're going to be passing our Arrow function so you can p the regular function if you want it in my case I'm Going to be passing the arrow function so now let me just write a St and here we're going to be passing our reducer property so what do I mean by that here if I just write a counter and then do

value from there this looks a bit scary like where in the what is this counter coming from this counter is coming from let's just go ahead and go to a store and here you can see we have a counter property and we are going to be reading our data from the state and also the Counter that was the counter but where is this value coming from so now just go ahead and go to the slice and here you can see we have the value right here of the initial State okay so yeah here we're going

to be first of all getting this data and now let me just store in some sort of a variable so I'm going to just write like con toown you can give it any name you like and then we are going to be changing let me just write changing the data come on c h n g i n g Changing the data by sending uh actions to the store you don't have to worry about this commment which I just WR but now let me just use the use dispatch function and we are going to be storing

there in the dispatch uh variable right here okay so now first of all let's just see are we want getting the data from our store let me just sell my file and now let me just refresh that and we are not getting the data I guess because we are not even Using yeah we are not using this component anywhere so now let me just go ahead and go to my app and now let me just render my component right here so I'm going to be using the counter right here let's just copy that and let

me just remove all of that and let's just use that right here and here you can see we're now getting the value of zero right here which is totally a okay but now we can totally change the data by using this dispatch function so I'm Going to just uh cut this count from here and I'm going to be creating H1 right here now let me just place this count inside that H1 and now the next thing which you have to do is that we have to create two buttons so I'm going to just creating a

button I'm going to just write a plus and then the minus right here and I'm going to also attaching the on click event hander on both of them and we're going to be also passing the arrow function inside there And here we're going to be passing the dispatch what is a dispatch dispatch is a hook use dispatch is a hook and it's going allows us to send our action what is the action here you can see we have these actions right here and based on that specific action we're going to be changing the data inside

our store so now let me just write uh my increment action right here i n c r e m e n t and then I'm going to be also writing a dis come on uh yeah dispatch one more time And here we're going to be also passing our decrement but that's not cool why is that because these are functions now let me just show you there let's just go ahead and go to our slices and here you can see this is a function and also this is also a function so now let me just execute

both of them so now let me just provide a parenthesis to that and there you have it that was the entire flow of the Redux tool gits now let me just save that and here you can see it's going to Gives us these buttons right here but if I click click on this button it's going allows us to increment our counter and if I click on this button so it's going to allows us to decrement or counter right here okay so yeah that sounds a bit confusing but trust me it's not if you just uh

create a few actions and yeah if you just play around with that so you will totally get it and I did my best to show every single thing about the Redux toolkit now let's talk about The rtk query welcome to the next section of this course so in this section we're going to be learning about the rtk query so what is the rtk query and why you should care about that so rtk query aka the rtk is specially designed to simplify the data fetching caching and State Management for the API calls in react and Redux

applications and that was it about the rdk query that's the only definition I Can give you so in this section we're going to be learning about how we're going to be getting all the products how we're going to be getting a specific how we're going to be adding a product how we're going to be updating a product and deleting a product okay so yeah that was just a quick intro to what rtk query is and now let's get into the setup so the first thing which you have to do is that we have to install

a new setup so I'm going to just cut all of them out oh you Know let me just leave that right here now let me just open my terminal once again and we're going to be creating yet another react project by using the Weir so I'm going to just rename this one to um my rtk query or something like that and now let me just hit enter right here now then we have to go ahead and go into there my rtk query not this one my rtk query and now let me just open or you

know before I open there I'm going to be using the npmi to install all of The dependencies for that and then we would also need to grab this Command right here as well I'm going to copy that right here and now let me just wait for this one to complete so everything is now successfully installed the next thing which you have to do is that we have to install uh the Redux toolkit and also the react Redux just hit enter right here so it's going to also install that in your machine so now let me

just wait for that to do its thing and Everything is now successfully installed I'm going to open my vs code right here and now let's just grab that right here and now let me just put that right here close this one let's just zoom in a bit okay so the first thing which I want to do is that I want to do a bit of clean ah I just accidentally deleted the SRC folder God damn it and here you can see that SRC folder is back and now let me just delete this assets and let's

just delete this app and also let's just Clean up this one right my rafc then go to the uh index. CSS remove that and then we also have to remove this trick mode right here we don't have to do that but I just want to make everything clean and yeah that's just a setup of um what do we call it that's just a setup of rdk query and I'm going to be using an npm run day one more time to run my application on this port so now let me just click on that and here

you can see we have our app right here so yeah that Was the setup up so that was the setup and now let's talk about how we are going to be creating a service or you can say um the slice in rtk query so we are going to be creating a separate folder I'm going to just name it as app and inside this app folder we are going to be creating yet another folder you can give it any name you like but in the documentation they are suggesting to use the service Vic and inside the

service we're going to be creating yet another File and I'm going to just give it the name of like Demi data or yeah Demi data or API data you can give it any name you like but in my case I'm going to just give it the name of like demid data.js and now inside there we're going to be performing almost all of our logic but the first thing which you have to do is that we also have to create our store okay so now let me just create a file inside this app directory not inside

the S I mean like not inside the service but Inside the app directory so we're going to be creating a file now let me just give it the name of like uh store.js right here and inside the store the first thing which you want to do is that you want to grab or configure store store from where from Redux red Redux toolkit and then we have to just execute this configure store right here and we're going to be passing our object and inside this object we're going to be passing the reducer in a few seconds

and We're going to have to do a lot more than that but we just have to WR export and then just export our state right here and now let's just attach that to not this one but to or main component so we're going to be just grabbing our uh store from where let's just grab there from where from let's just go ahead and go to our AB directory and let's just grab it from there and and we will also need to grab the provider from let's just write a provider from the react Redux and let's

just copy and wrap it with this app component what the hell am I doing let's just hit enter right here and here we're going to be just placing that let's just close that and let's just place our entire application inside this SP now let me just write a and bind that so now let me just save my file and yeah that was the setup but now let's talk about the service so how in order we're going to be creating our service and then we're going to be using Their service inside our store now inside the

service file we're going to be doing almost all of our API logic like how we are going to be getting the data how we going to be posting the data deleting something and all of that kind of stuff by using our dummy API but in the project we are going to be using a real API if you care about this so you can definitely watch my entire project on that but if you don't care about that so you don't even have to worry about That so for now we are going to be just working with

the dummy API so now we are going to be importing two things so the first thing which we are going to be importing is the create API and then the fetch base query okay so from where we are going to be grabbing all of that from the redex toolkit and then the query and react okay so we're going to be grabbing all of that stuff not all of them but these two stuff from this uh redex toolkit and then query and from The reactjs and now let's just uh create instance of the create API and

inside that we're going to be passing our object right here and inside this object as we learn in the slices so we have to write a name but not right here here we're going to have to provide the path so I'm going to just write a reducer path and inside this reducer path we're going to be just providing some name right here in my case I'm going to just give the name of like products you can Give it any name you like so you can think about that is like a name for our create API

method and now we're going to be just passing our M query like where in the world we are going to be fetching our data like what will be the URL from where we're going to be fetching all of our data so now let me just write my fetch Bas come on fetch Bas query and inside that we're going to be just passing over curly braces and here we just have to write a Bas URL and here We're going to be just passing our URL right here so if you're working with the real API and uh

you just create that by using Express and mongodb and all of that kind of stuff which I already show you in my mer St so you can totally provide there but in my case we are going to be just working with a dummy API so now let me just place a link off there so we are going to be fetching our data by using this dummy API okay so now let me just provide a comma and then Here we just have to provide our endpoint so now let me just WR endpoints like from which specific

URL we're going to be grabbing our data so now let me just show you the documentation of the dummy API okay so I'm going to just click on this one and and here I want you to just come to this link which is dummy jason.com and it is supremely white so now let me just make that dark I just click on that docs and it just brings us to this page right here so Here you can see we're going to be posting or we are going to be getting our data from this uh dummy Json

API and we have a lot of end points right here for different kind of things so we can also get the resources we can just limit that and we can do all L sort of stuff with them but we are not going to be doing all of them so now let me just show you like for instance if if you want to get all of the products so for there we going to be working with uh let Me just show you the end point so for there we're going to be using this products endpoint right

here let me just highlight that for you we are going to be fetching our data by using this endpoint so it's going to gives us all of our products so now let me just copy this link and now let me just place that right here in the new T so it's going to gives us all of that data with title description and images and every single thing right here so it's going to just Give us all of the products then the next one we have is a specific product like for instance if you want to

get a specific product like one page so now let me just copy this line of code and now let me just place it right here so it's going to just only gives us one product right here and if you want to just uh get the second product or something like that so I'm going to just provide a two and it's going to just gives us the second product with the ID Of two right here okay so you can learn more about this API by yourself but yeah here we are going to be passing that specific

endpoint we already provide our base API URL right here then we we're going to be working with some sort of a Endo so now let me just provide some sort of endpoint right here in this case we're going to have to pass over Arrow function and for the perimeter we are going to be passing the Builder and inside that let me just uh pour my C Braces right here and inside there we're going to be doing a bit of magic or rtk will do a bit of magic so let's suppose if you want to get

all of the products from this specific API so we're going to have to work with this end point right here which is the products okay so for that here we're going to we just creating our endpoint right here and here we just have to pass our API endpoint you can give it any name you like but in my case I'm going to just Give it the name of like get um all products would be fine okay once again you can give it any name you like but in my case I'm going to just give it

the name of like get all products and it's going to be set to the builder. query and why are we writing a query right here we are first of all using this Builder perimeter which this Endo will take and we are using this method on there well in this case we want to get all of the products so that's why we are Now writing a query if you have to change some sort of a data in this endpoint like for instance if you want to change like change something or update something or delete something so

for that we're going to have to write a mutation in this case we are not changing the data we are only getting a data from a specific endpoint of this URL so for that we are going to have to just pass the query we are reading the data or you can just write a reading the Data we are reading the data so that's why we are now using this query method right here and inside this query method we are going to be passing our object and inside this object we just have to write a query

okay so if we just write a query and here we just have to pass our error function and then finally we just have to pass our endpoint so you can use a single code you can use a double Cote or you can also use this back Tex right here something which I'm going to be Showing you in a few seconds but here I'm going to be just sending request to this products right here so what are we doing I'm going to cut that from here and I'm am going to just place it right here so

this is what we are doing so our best URL is this URL and we are now currently working with uh this products endpoint so that's why we going to have to pass this endpoint right in here so now let me just save that so now we successfully create or inpo right here But the real magic happens right here so what do I mean by the Magic by magic I mean that rtk query will automatically create a hook based on this Endo so how the what we are going to be using that hook or how in

the world we are going to be even seeing that hook okay so the syntax is looking a bit confusing but I want you to bear with me for a few seconds so we're going to be exporting con and we're going to be exporting something from where we're going to be Exporting there from the product API which we already store right here okay so we are going to be exporting something from this product API so what are we exporting well we just name or endpoint the get all products what rtk query will do for us behind

the scene is going to just create some sort of a string and inside that string we already have the use and we already have either the query or we have the mutation okay so in this case we are working with the Query because we want to just query some sort of a products right here so here you can see we're working with the query method so that's why the rtk query will behind the scene add the use first of all and then it's going to also add this query right here at the end and at

the middle of this it's going to add this get all products so now let me just place it right here and I already told you that the syntax will look a bit confusing but trust me it's not and what It will do is that it's going to just make it as uppercase G and then the rest of them will be in lower case just like in a camel case whatever you want to call that so then it's going to just remove these empty spaces and this is what's going on behind the scenes so first of

all we can create our endpoint like this or we can work with our endpoints and you can give it any name you like you you can give it the name of banana you can give it the name of Apple You can give it any name you like and then what rtk query will do behind the scene is that it's going to add this use as inside the string and then it's going to add the query so here is a bit of logic if you working with a mutation which I'm going to also show you in

a few seconds so it's going to add that mutation right here so mutation right here but in this case we're working with a query so it's going to add this query right here and then we Have this get all all products method right here okay or hook so it's going to just create the same hook for us now let me just remove that and we did not create this hook right here by ourselves so if I just write the use and here you can see it's going to gives us that get all products query so

if I click on that and here you can see it's going to give us their use first of all and then it's going to make this first letter uppercase and the rest of them lower Case or in camel Cas whatever you want to call that and finally it's going to attach this query at the end okay so now let me just sve my file and that was the entire logic okay so the first thing which you have to do is that we have to grab these two method and then we have to just execute this

method we have to give it some sort of a name or the reducer path whatever you want to call that inside this Bas query we are going to be just specifying our API URL and Then we are going to be sending request to specific URL okay so in this case we're just sending request to this product so it's going to just gives us all of that products and based on this spefic spefic endpoint it's going to just create a specific hook for us and first of all it's going to just attach the use first of

all and then at the end it's going to also attach the query and inside there it's going to just add our endpoint name yeah that was a lot of Talking now we successfully create our API right here but now the next thing which you have to do is that we have to register that inside our store so to register that inside our store the first thing which you have to do is that we have to grab one thing which is called the setup listener you you don't have to worry about this thing right here which

I'm about to show you right here you don't even have to worry about this setup listener you have to write that But you don't have to worry about that the next thing which you have to do is that we have to grab our product API from this specific Services folder and then we have a Dem data so now we successfully grab this product API from there and now let me just go ahead and go to the reducer and we just have to registered there so now let me just registered there right here but here is

a bit of catch we are not going to be writing a property and then value Specific to that property first of all we're going to be just writing a opening bracket and then the closing bracket because currently we are working with the rtk query not just a Redux toolkit we are working with the rtk query so then we just have to copy the name and now let me just place that right here then we have to use the dot and here we're going to have to just provide this reducer path so I'm going to just

copy then now let me just place it right here And it's going to be equals to this product API and then reducer okay so you just have to do the and now you might be asking like what in the world is this setup listener it is only helpful for caching and then you have to also attach two more things which you also don't worry about don't worry about this code which I'm writing right here but you have to specify this code so this is a middleware and it's going to just only help you with the

caching nothing else In there okay so then finally we just have to use the set of listener and provide our dispatch to it so now let me just call this set of listener and we're going to be just providing a store and then dispatch and now let me just God damn what the hell did I just do so now let me just save that so and that was the entire setup or the entire flow of rtk query let me just rewind that once again very quickly the first thing which you have to do is that

we have to grab Every single thing then we have to provide a name for our API and then here we're going to be just passing our base query and we're going to be providing some sort of a URL and based on that endpoints it's going to just create a hook for us and then we're going to have to register there by using the by first of all grabbing this of listener and also we have to grab our API and inside that we're going to be just using these brackets and inside these brackets we're Going to

have to use our API name and then specific path which we are already providing right here and then we have to just set that to our API reducer that's all the thing that you have to do and that was just an entire setup of rtk query next we are going to be learning about how we are going to be using uh that specific uh endpoint which we already created right here inside our app component or react component so to use this endpoint the first thing which You have to do is that we have to create

a separate folder inside the SRC folder so we're going to be creating a folder I'm going to just give name of like uh components and inside this component we're going to be just first of all creating all products. jsx now let me just use my RFC s my file and now let's just register that inside my app components now let's just remove that and now let me just add my all products and now let's just close there same my File let's just go back and let me just show you that and here you can see

we're now getting all of the products right here which is okay let's just close every single thing and now we have to go ahead and go to this component and the first thing which we have to do is that we have to grab our specific hook which we already created right here okay so I'm going to just go ahead and show you that let me just go ahead and go to my Demi data and we're going to be just Getting this hook okay so I'm going to just copy the name of this hook and we

are going to be first of all importing that hook from let's just go ahead and go to the app then we have to go to the service then we have to go to the Dem do or Demi data okay so now let me just save there let's just go back and now we have to use that so I'm going to just copy that and now we have to call this hook right here so I'm going to just write like con res it's going to be Equals to this use get all products query and here what

I want to use that I want to write a cons log of R and now let's just save there and now let me just refresh there let me just make there a dark right click on there and go to the inspect area and now let me just zoom in a bit so it's going to just gives us a lot of objects and I'm going to tell you why let's just refresh that so here in this case we are now fetching our data so first of all it's going to Just gives us the empty status right

here then it's going to gives us the status of pending and then finally it's going to gives us the status of fulfilled because we are sending request to the actual endpoint so that's why we are now getting all of the data and here you can see we have the current data and we have a products and inside this products we have all of the products we have a brand we we have the category description discount we have the ID the Images we also have the prices every single thing that we currently have right here and

we also have something which I also want to show you but let's just collapse this one and we have the data right here but we have okay this one so here you can see we have a is error property and it is now set to false because we don't have any errors and we are getting our data but if we have some sort of Errors so we would uh render that specific error right here Then we have a is lowering we can also provide a lower based on that and we have a is Success so

we can totally use that so now let me just use the right here instead of talking I just want to write some code so the first thing which you want to do is that let's just uh let me just remove that from here and I'm going to be just destructuring first of all the data and then we are going to be also destructuring this is error which I already show you and we're going to be Also destructuring this is loading as well okay so now let me just pour some sort of like if statement you

don't have to do that but I am going to do that because if you have some sort of error so if is errored so what do you want to do in there we just want to return the H1 and I'm going to just say like oh no uh we got an error or something like that and if we have a loader I mean like if we have a loading is loading so what Do you want to do in that case we just want to return the H1 come on H1 one and we are going to

be just writing a loading dot dot dot let's just remove the empty space from there s file and refresh there so it's going to just giv us that loader for a second and then it's going to just gives us that all products right here okay so we are getting the data so everything is working a okay like we are getting the data but now we have to iterate over Through all of that data and render that right here inside this div so now let me just remove that from here and what I'm going to do

is that I'm going to just write my data right here if you have the data so what we want to do we are going to be just getting the products from the data and we are going to be iterating over through all of that product so we are going to be just passing this Arrow function and then we are going to be just rendering all of the products by Using this H1 so now let me just write H1 right here and here we just have to pass the product. title and then we have to also

provide a key and we just have to provide a specific ID key so now let me just save that and here you can see it's going of just gives us all of their data and all of the titles from the data right here so we we have a Samsung we have a lot of data right here okay so you can render all of the data you can provide a styling to that or you can Even provide more logic than that but now let me just uh log the data to the console so we have a

console log of data s file and here you can see it's going to just use us there let's just click on this so here you can see we're now fetching our data from this product so we have a specific product so you can grab the brand you can grab the category you can grab the description so now let me just grab a description right here so I'm going to just writing a Paragraph and let's just render our paragraph dot description what was that description yeah let's just copy that and now let me just place it

right here sell file but we have to WRA that inside the fragment so that's why it is freaking out right here now let's just close that and save that and here you can see it's going to also giv us that descriptions right here you can render all of that data right here but I guess that was enough for this specific Example and yeah this is how we are going to be getting the this is how we are going to be handling the errors if you got one and this is how we going to be providing

a specific loader you can even provide a PNG right here or you can even style this loader to something else by using TN CSS or a built-in loaders or something like that but in my case that's it baby okay so yeah this is how we going to be getting all of the data and now let's talk about how we going to Be getting a specific product by ID so here you can see back to our Demi data and I'm going to just remove that and here we're going to be creating yet another endpoint so I'm

going to just give it name of like Get product buy ID okay and here we're going to be just writing a builder. come on uh builder. query once again because we are fetching the data you're not mutating the data and here we're going to be just passing the ID right here in this case uh and Now we are going to be sending our request to the products and then a specific ID right here okay so now let me just show you a documentation of let me just go ahead and go to there and here you

can see we're going to be just specifying some sort of a dynamic ID to there so that's why we are now getting the ID and we are now rendering that ID dynamically so now let's just create a hook based on there it is already built so we don't have to create that by Yourself so we going to be just writing a use and here you can see we have a use uh products by ID there we go so now let me just saell there and here you can see it's going to give us that use

products by ID let me just copy there and now we have to use that inside or another component and I'm going to be creating a component given name of like s come on S P fic specific product. jsx right here and I'm going to be using the RFC save my file and copy there come on copy There let's just go ahead and go to the app we have to comment this line out and what the hell did I just do let's just place right here save my file and we have to also even grab that

so let's just grab that and now let me just show you that right here so here you can see we're now getting specific product and now let's just work with that I'm going to even comment this line out sa my file and now let's work with this specific product the first thing which you have To do is that we have to grab our Hook from this Dem data which is already created right here so now let me just copy that and we are going to be grabbing that hook right here from where from let's just

go ahead and go to the app then we have to go to the service then we have to go to the Demi data so I'm going to copy that and now let me just write con uh data and then is error if you have one and then is loading uh it is loading there we go go from where From this hook and here we are going to be just passing some sort of a dynamic ID so in my case I'm going to just specify two in this case so now let me just log that data

to the console so now let me just save that and refresh let me open my def tools and here you can see it's going to just first of all giv us the undefined undefined and then it's going to giv us the brand of apple and then it's going to giv us the category of Smartwatch now let me just copy that And show you that whether it's working or not so I'm going to just specify two right here and it's going to indeed gives us the ID of two and the title of iPhone x what the

hell where is the category let me just show you the category uh come on let's just search for the CATE there we go so the category smartphones yeah it is working totally a okay so we are getting something right here so we can totally do a lot of Things with that but you know what let me just copy this logic from this component so I'm going to be just copying this logic and now let me just place that logic right here so if you have some sort of error then just show this error and if

you have some sort of a loading so we are going to be just pting this loader right here we just told okay but now we have to work with this actual data which we are already getting right here so now let's just Remove that from here and inside this D we're going to be just creating H1 and first of all we have to just specify if we have the data so what do you want to do we just want to get the brand from there so now let me just save that and here you can

see it's going to give us the brand of Apple and now let's just duplicate that if we have some sort of a data so we also want to get the category if you wanted to s file and here you can see it's going to give us that category Now let me just duplicate that we can also get the description if you want to s file and it's going to also giv us their description right in here okay so this how we going to be fetching a specific product using this query right here so we can

specify different kind of ID so let's just provide a five ID so files so it's going to give us different datab based on there and now I can just specify like I guess 10 s files is going to give us totally different data okay So yeah so now I want to add a new product so I'm going to go ahead and go to my Dem data and here let's just go ahead and go to this endpoint and I'm going to be creating a different endpoint which will be add new product and here we are going

to be using the builder. mutation because we are adding a product we are doing something we are not just querying the data we are not just fetching the data we are doing something with that data so in this case We are going to be just adding a new data or new item to our specific endpoint not actually because we cannot provide our new data to someone else API but I'm going to just show you a success message or something like that so in this case we have to use the mutation right here so what I

want to do is that I want to provide my object right here and the syntax will be totally the same in this case we're going to be querying the data and we are going to be also Providing the new product it and now let's just provide or for object once again and here we're going to be just spacing the URL and the URL in this case will be now set to this product and now let me just show you there we're going to be sending a request to let me just show you there so here

you can see we have add a new product so here you can see get a single product not this one but eror product how we are going to be doing that now let me just click on that And yeah here you can see this how we're going to be adding a product so we're going to be using this API the end the end point will be products and then add okay so we are going to be also providing the method of post and the headers will be content and application Json and the Bor will be

set to this in there okay I don't want to waste your time but now let me just show you there so in this case we're going to be just passing the add right here now let me Just provide a comma here so this is going to be our end point now the next thing which you have to do is that we have to also past the method in this case we are posting the data so that's why we have to write a post method now the next thing which you have to do is that we

have to also specify the heads as as well and the headers in this case they are now taking the content content and then type and here it's going to be equals to the application SL Json okay Now let me just put a comma and then we also have to specify the body and for the body we are going to be attaching this new product to it which we are already providing inside the perimeter so we're going to be using that right here so now let me just save that and it's going to already already create

this hook for us so I'm going to just write like use and here you can see add new product mutation now let me just save that and it's going to just uh make It a bit cool I'm going to copy there and here let's just create a new separate component for that so add new product. jsx I'm going to be using the RFC one more time and now let me just save that once again copy that and import that right here let's just come this line out and import that right here let me just hit

enter right here and I'm going to be just commenting this line out and yeah let's just save there and here you can see we now Getting add a new product now I'm going to just go to my component and then I'm going to copy there and now let me just use that right here okay so I'm going to just grab that first of all and then we are going to be just going into our app and then we have to go to the services and then we have to go to the Demi data now let

me just create an instance of that but here is a bit of catch I'm going to just WR resence going to be equals to the same method or hook Whatever you want to call that but if I just lock to the so this res semi file and refresh there right click on there and go to the inspect element and here you can see it's going to gives us array not an object like in these cases uh if you were to grab our data so we were D structuring our data by using this syntax which is

the object destructuring but now in this case it is giving us the array okay so inside this array we have a status and we have is error loading Success in every single thing right here so you know what let me just show you now I don't want to go to the pro protype but here you can see we have that function which we already created so it is taking the name and every single thing we don't have to care about that but we're going to be destructuring all of these data by using the array syntax

or array destructuring syntax so I'm going to just uh remove this rest from here and in this case we have to Specify the array D structuring syntax and in this case we have to just write add new product so new product in this case so why are we doing that this is going to be the function which we're going to using to add a new product so we are now using this add new product right here so I'm going to copy that and we can totally use that right here but we are going to be

also destructuring a nested destructure so this is array destructure and inside There we have the object destructured so inside this object we are going to be first of all destructuring our data we're going to be also destructuring the error and also the is loading we're not going to be taking care of the rest of them but you know let me just take care of that let me just show you every single thing God damnn it so let me just if you have some sort of error so what do you want to do with that error

we going to be just writing like error or Something like that and if you have some sort of a loader so is loading so we're going to be just returning the H1 come on let me just return my H1 off loading dot dot dot so now let me just save that so everything is completed but now we are left with the add new product and also this data right here so now let me just take care of that while I was writing the rest of the code I just realize that I made a mistake right

here inside a product it shouldn't be a Product it should be a products with s so now let me just save there and here first of all we're going to be using this add new product and then we're going to be using this data so then we will be able to see like which kind of data we added so I'm going to just go ahead and create some sort of a function right here well you know first of all let me just create a button right here so now let's just create a button I'm going

to create a button and I'm going To just say like add new product right here here and we're going to be adding a new product but first of all we're going to be just attaching some sort of event handler so we have on click event handler and we're going to be just passing some sort of a function which we're going to be creating in a few seconds which will be handle and product right here okay and we're going to be also providing a disabled State on there and if it's loading then it should be Disabled

so now let me just save there but now let's just create this function right here up above so let's just create or add new add new function or add handle product and it should be an asynchronous function because this is not our code we are currently working with the API so this should be an asynchronous code and inside that we're going to be using the TR and catch blocks for the catch block uh we are not going to be writing a total error we are Going to be just writing a ER R and now let

me just place that right here and for the tri block what do you want to do first of all we are going to be creating a new product so I'm going to just write like a new product uh or you know product data would be fine and we are going to be just writing like some sort of ID to it like ID will be one the title will be like amazing t-shirt or something like that and description will be I don't know I'm going to just copy a Description from somewhere so now let me just

place this description right here so now let me just save that now we successfully create our product but now we have to use this function which is the add new product now let me just copy that and I'm going to just place it right here but I'm going to call there but first of all we have to use the a because currently we're working with the asynchronous function and inside this function it is requiring the perimeter Of uh what do we call the new product so we have to pass some sort of a product to

it so we already create our product so now let me just copy this product name and then now let me just place it right here sell file we already binded this method right here but now the next thing which you have to do is that you want to see something once we add some data right here okay so what I want to do is that I'm going to just place this coding right here semi file so what are We doing first of all we are getting the ID then we are getting the title and also

description so now let just saell that and refresh that and here you can see it's going to just giv us that add new product button which you already created right here but now if I click on that it's going to just give us the loading and then it's going to gives us that dare right here so it's going to give us that ID it's going to give us that amazing t-shirt and also this Description which we already provided right in here okay so yeah this how we are going to be adding a new product to

our dummy API by using the Builder mutation so now let's update our product not really but yeah I am going to show you that because docs allows us to do that so we are going to be doing something about that so let's just use our build our mutation because currently we're going to be mutating or changing the data so it's going to take a Specific ID and then the updated product right here okay so now inside that what you want to we're going to just specifying the URL and we're going to be sending a request

to a specific URL which will be a products and the specific ID but we have to provide the parentheses for here okay let's just provide our parentheses right here and I'm going to also provide a comma here and now the next thing which you have to do is that we have to add the method and The method will be put you can learn more about that in the documentation if you wanted to but haors and haors will be the content type and it's going to be now equals to the application and then Json okay so

now let me just provide the final thing which will be the body and we're going to be just writing the updated product right here okay so now let me just save that and based on that we're going to be just creating a new hook which will be The use update product mutation so now let me just copy there cut this file cut this file out and now we are going to be creating yet another component so update product. jsx and here we're going to be using the RFC sa my file copy there and now let

me just comment this line out and here we're going to be just passing this update product right here okay so let's just provide our update product and now let's just come in this line out semi file and let's just check it out so Here you can see we have our update product Right Here and Now inside there the first thing which you want to do is that you want to go ahead and go to our uh Dem data and we have to copy that and we have to copy the hook and we have to just

import that right here so we are going to be importing that from where from or let's just go to the app then we have to go to the service then we have to select the Dem data right here okay now let me just copy that and you Already know that we are currently working with the mutations so there we we have to use the ARR structuring so we are going to be grabbing the updated product and also the data and the error and there is loading right here okay let's just go back s file and

now let me just take care of the errors and stuff so I'm going to be just writing an error if you have one so let's just WR our H1 and then let's just render that specific error and now uh I guess I'm going to Also take care of the loader as well if we have some sort of isas loading so so then we just want to write H1 and loading dot dot dot Cas s file and now let's just take care of the rest of the data I'm going to be creating a separate button right

here let me just name that as or label that as update product and we're going to be attaching the event listener on there which will be the on click and let's just add the handle update product and it is going to be Disabled if it is loading okay so yeah now let me just create the right here I'm going to copy that and now let's just create that right in here it will be the asynchronous function because we are working with the API so now inside there we're going to be using the try and catch

block let's just support the console log of error right here and for the tri block what do you want to do we just want to tr like updated Pro come on updated product data is going to be Equals to some sort of updated title and title updator or something like that I'm going to also use the Emoji of this one right here save my file and then we're going to be just writing a and then we have to use our update product and we have to specify first of all some sort of ID to it

so the ID will be just a product ID then we have to use our a n or function which will be update product and inside that you know what I want to do something I want to provide a prop Here which will be the ID so I'm going to just write the product ID so I'm going to just write a product ID and it's going to be equals to two would be you know four would be fine so now I'm going to just save there and we also have to D structure there right here so

I'm going to just write like product ID and now let me just copy there and now here inside there uh why are we getting there yeah let me just past it right here so inside that we're going to be Passing the object and here we just have to specify the ID and ID will be this product ID and then we have to pass or updated product and it's going to be equals to the updated product data right here okay let's just select the same file but I don't know why we getting this error right here

okay a word has no effect on the type of this expression but we are going to be still providing it anyways so yeah that's that I'm going to also have to just uh render my title Right here I'm going to just place a right here so if you have some sort of a data then you want to get a specific title because currently we are only changing this title right here so here you can see it's going to give us that button but if I click on that uh it's going to give us an error

uh okay so updating a product invalid hook call hooks can only be called inside of the body of the component what are we doing it shouldn't be updated it Should be just update product I'm going to copy there and now let me just place there right here update product here and also yeah update product there we go so now let me just save there let's just refresh there and here you can see the air is gone but now if I click on this update product so it's going to gives us that title updated right here

which is our own data okay so we can change that to like something else like something else or something like that now let me Just save that refresh there and click on this update product so it's going to give us there something else right here so yeah this is how we going to be updating a data by using the rtk query so now let's talk about the final part of this project so which will be deleting a product so we're going to be creating yet another component which will be delete product BR uc. jsx I'm

going to be using us the RFC copy the deleted product and now let me just Render there right here and I'm going to be also passing a specific ID for this so I'm going to just WR a product ID and in this case we're going to be just deleting the ID of two and then we have to just F this uh deleted product right here so it's going to just Auto Import it right here now let me just comment this line out put that up above sell my file let's just go to our dummy API

dummy API dummy data there we go okay so now Neath there what do you want to do We just want to delete a product so how what we are going to be doing there delete product will be now equals to the builder. mutation because we are changing something we are mutating something so that's why we have to specify the method of mutation and then we have to specify some sort of ID for that and inside that we're going to be passing our URL and it should be in the parentheses I always forget to include the

parenthesis right here so now let me Just for a products and then we are going to be just rendering a specific product and based on that specific ID we are going to be just deleting our product so now let me just put delete in uppercase okay so now let me just save them and now let's just create a hook for this so use delete product hook or mutation sell my file and remove them let me just go ahead and grab that right here I'm going to be just grabbing this Hook by Using uh the name

export so now let me just go ahead and go to my app and then we have to go to the service then we have to go to the Demi Demi data let me just copy that from here and inside that you already know what we have to do because we learned a lot about rdk query and now let me just place it right here we also even have to D structure or uh come on product ID right here and then inside that we're going to be also providing our delete product and list is Provide our

data and also the error and also is loading Okay so I'm going to just steal that other code from this uh add new product right here I'm going to just copy that and also this one and now let me just place it right here finally let's just create a button right here I'm going to just create a button which will say delete product right here okay and finally now let me just attach the on click event handler which will say the handle uh Delete product and it's Going to be also disabled when it is loading

okay so now let's just create the right here I'm going to just create the right here it's going to be asynchronous function and inside that we're going to be using the try and catch block for the catch block we're going to be providing that error and also we're going to have to write a and then just we have to execute or delete product and we have to specify that product ID okay which we are getting Right here okay so yeah that's that but we also have to render some sort of a data right here so

we can see something that something has been deleted so now let me just write my H1 and let's just see if we have the data. tile so what do you want to do in that case we just have to render or data. tile uh successfully deleted would be fine and if that's not the case we just want to provide empty string so now let me just Save that and here you can see we have our delete product button but now if I click on that it's going to give us the loader and then it's going

to just give us that iPhone x has been successfully deleted from the database so yeah that was a lot about RX toolkit and rtk query and next we're going to be building a project now let's talk about the design patterns so design patterns are common solution and best practices used to structure code efficiently making it More maintainable reusable and scalable but now that was just a quick definition of what are design patterns and we usually use design patterns in different programming languages but now the question is how the we're going to be using there in

react JS as you all know that react itself is a UI library that focuses on building reusable components and design patterns provide a strategies for organizing component and logic within those component to promote Consistency and optimize the development now I know a lot of you will ask me H why should I even care about learning Des design patterns in reactjs and I can give you a lot of answers to that questions but what I want you to do is that I want you to trust me that if you learn design patterns in reactjs you will

have a lot more power than just a regular reactjs developer trust me it's going to give you a super power so yeah let's get into the setup of this course So now let me make a setup for recording Journey so I'm going to open my terminal I'm going to make that a bit bigger so you guys can see everything a bit better and I'm going to be using npm create we at latest I'll give it the name of DP demos like design pattern demos I'm going to choose reactjs with timecrimes and I'm going to install

every single thing inside there now I'm going to go ahead and go to the tailin css.com click on the getting started Button go to the framework and guides choose we and I'm going to copy all of these commands and place it right here I'm going to also hit enter so it's going to initialize my T CSS inside their project I'm going to copy this content from here just a content and I'm going to open my vs code right here now let me clean this up so I'm going to remove this public folder I'm going to

also remove the SS folder the app. CSS folder and inside there I'm going to Remove every single thing from the app. TSX file and I'm going to replace that with this RFC now let me go ahead and go to this T config file which is this config file and I'm going to replace them with this new content now I'm going to also copy all of these directives now let's just go ahead and go to index. CSS file remove every single thing from there and replace it with this new one I'm going to copy this line

of code for the testing and replace that with this New one let me just save my file and I'm going to be using npm run Dev so it's going to start my server right here so I'll use like Local Host and now we are getting our hello word right here let's talk about the layout component so layout component are strategies for organizing and composing component that manages the layout structure of a project this component typically control the positioning and arrangement of a child element within a p agage and Acting as a container for other UI

element or sections so here you can see I have a component and inside this component I have a section and inside that section we have a div so that specific div in which we have our content is totally dependent on the styling of a section and here you can see I've provided a class of some layout styling so that specific div is totally dependent on that section classes or section styles to be precise now the Question is how can I split that use the layout design pattern so if you want to split that here you

can see I'm going to be ping a children and then I'm going to be creating a separate component in which I will put my content and then I will past that component as a children to that app component I know it may sounds a bit scary but trust me it's not so now let's get into the coding then you will get to know what I'm talking about now the first thing that I want to Do is that I want to create a folder with the name of components and inside there we're going to be defining

a few components like left. PSX let me just zoom in a bit and we're going to be also defining right. TSX and also the split screen. TSX file now let me go ahead and just write my RFC inside this component s my file rafc inside the right component s my file and rafc inside the left component and save my file now let me just go back and remove this return Statement and replace there with this react fragments so I'll just write a high for now save my file and now we are getting that high so

the next thing that I want to do is that I want to go ahead and go to my my left and right component and provide a bit of styling to them so I'll just write like the class name and background will be set to T 400 and also the height will be set to 46 Rim now let me just save this file I'm going to also go ahead and go to the right component And provide the styling here so I'll just write like class name background will be set to totally red 400 now let me

just save this file and close there and now what I want to do is that I want to go ahead and just remove that from here and write my split screen and close them so for this split screen we going to be providing our left component and close there I'm going to also specify the right component and close there so now let me just save my file and this Component will also take the left weight and I'm going to set that to like 50 and it's going to also take the right we and I'm going

to also set that to not 50 but I guess 80 would be fine now let me just save my file and go into the split screen component and the first thing that I want to do is that I want to destructure a few things so we are going to be destructuring the children because we are going to to be using them we're going to be destructuring the left Weight and also the right we right here so I'm going to save my file and create interface this all use like interface and I'm going to give it

the name of like split screen props or something like that and it's going to take a children and children will be set to this react node and also the react node once again we going to be importing that from the react JS and also for the left WID it's going to be set to a number and also for the right wi it's going to be Also set to a number now let me just copy a name of there and annotate my component with these props now let me just save my file the next thing that

we have to do is that we have to use them but first of all before you even do that I'm going to go ahead and just destructure this left and right component now let me just show you there so I want to destructure this left component and also this right component so how can I go about doing that well we Are going to be destructuring there from the children so I'll just write like left and also right and it's going to be equals to this children and now let me just log that to the console

so you guys can see here so I'll just write like left and here I'm going to place that left and I'm going to also change that to right and place that right here so now if I save my file go to my component go to inspect element go to the console yep we are getting some sort of error so I don't know why but we are getting that error so let's just go ahead and go to our component oh that's because we have to import this so we also have to import this F component right

here now if I sa my file and now we are getting a left component which you can see right here it has the the key prop reference and so on and so forth and we also have this right component as same as there so now let me just close there and the next thing that I want to do is that I want To just remove that from here now let me just remove the split screen from here and instead of providing a div I'm going to change that to section inside there I'll just render the

div and it's going to say like left I'm going to also duplicate that and change that to a right so now if I sve my file so what are we getting we are now getting these styling right here but don't worry we're going to be fixing the so now you want to split this out so you want to just Make the as a side by side like left and also the right so to do that we're going to be passing a class name and I'm using a tan CSS so if you're using just a pure

CSS you're going to have to do a lot of stuff but in my case I'm only using a tailan CSS so I'm going to just right like Flex and the width will be set to totally screen now if I save my file so what are we getting we now getting this left component and we are also getting this right component right here which is Something that we want and next we have to create a left f and also the right width so how in what we're going to be doing there this is how we are

going to be doing this so I'll just use like con left width it's going to be equals to this left width so now let me just render this left width right here which we are now taking as a perimeter for this component and I'm going to also specify the rim value to this now let's just provide a rim I'm going to also Provide the right width and the right width will be equals to this right width right here as a prop and we're going to be placing a rim value to there now let me just

save my file but still we have to use this left and also the right width so this is how we are going to be using this so I'll just write like a style and here for these styling we're going to be passing first of all the width and for each width first of all we're going to be copying this left Width now let me just place there then I'm going to copy the right width and I'm going to also place it right here save my file and Yep this is something which we are getting right

now which is not looking that much cool so now let me just remove this component and I'm going to change there to like 20 maybe and here you can see when now getting this sidebar I can also change that to like 10 I guess 15 would be fine yeah 15 is totally fine and also we can totally Change the right value and so on and so forth now we have a lot of flexibility and we can do a lot of things so you know what let me just show you there if I go ahead and

go to my left component and I'm going to remove this left from here I'll just write like UL Li and anchor tag and now I want them to be I don't know maybe uh four will be fine so first of all I'm going to be providing like home and then some sort of about section God then I'm going to provide The context section and also the portfolio or something like this so now if I sa my file here you can see we are now getting all of that content right here and if I want to

change something inside the right component I can totally do that so I'll just go ahead and go to my right component remove this right from here and I'll just write like I don't know maybe H1 something cool and also a paragraph with a lot of LM Epsom inside there and yeah we are now getting These result right here so this is how we are going to be splitting our UI by using the layout component so here you can see inside this split screen we're only using this Flex prop or you can say styling and we're

just providing a be of width today so yeah this is how we are going to be splitting our UI by using the layout component all righty so now let's make another setup for our coding Journey now I know a lot of you will ask me hose what's the point of this another Setup well now we are going to be working with the challenge es and we are going to be writing all of the challenges inside this newly created setup so what I'm going to do is that I'm going to open my terminal and let me

just zoom in a bit so you guys can see everything a bit better like so and I'm going to just write like npm come on in lowercase npm create we at latest and I'll just give it the name of like maybe um DP like design patterns challenges And now inside there uh you know first of all let me just go ahead and go to the react and choose reactjs and now we are going to be choosing typescript and now I'm going to go into the DP folder and let's just install every single thing inside there

so now then successfully done I'm going to open there in my vs code by using Code Dot and this is how it looks like right now so I'm going to go ahead and remove this public folder I'm going to also go ahead And just remove the SS folder remove the app. CSS and now let me go ahead and go to my app. TSX remove every single thing from there and I'm going to just use my uh RFC inside there I'm going to also remove every single thing from this index. CSS remove there and now we

are going to be running our server by using npm run Dev so it's going to run there on the Local Host that Port so yeah we are now getting our app which is looking cool I'm going to also go ahead and go To my come on tell when. CSS or tailn css.com I'm not sure whether I'm going to be using them or not but I'm still making this setup for the tailn CSS just in case so now let me go ahead and click on this we and now I'm going to install it by using this

command let's just open there remove there and place my new commands right here and it's going to install there and it's going to also configure T in CSS inside our project so that's already done now let me just hit Enter so it's going to also initialize our T when CSS let me also copy this content and I'm going to go ahead and go to my T config file and replace that with this new content let's just say our file and I'm going to also create or we already have our index. CSS file but now let

me go ahead and go to the index. CSS file and and place the is right here and finally to test this out I'm going to copy this line of code and now let me just replace that with this new one Ser File and now let me use my npm run Dev so it's going to start running my server so let's just refresh there and yeah everything is working the way we expect them to work before we start all of their challenges I want to mention one thing all of that challenges are designed by me like

no chat GPT involved but as you guys can guess my English is not that much much good so I use CH gbt to write this English for me and plus I also don't have a lot of time so I just Copied my code like all the solution of the code and I asked chgb to write um what do we call a documentation for me so yeah this is what we are doing right now so what do we have to do first of all we have to create a header component so the header component will contain

the dashboard title and profile log out button use CSS for The Styling and also this is the test like first of all we have to create our header. TSX inside the SRC component folder then we have to Implement the following structure like a header with the background color and a title on the left side which will say like my dashboard and a profile button a logout button aligned to the right so then we have to create the footer component and the footer component will be a simple footer with a copyright message it should be style

to stick at the top of the page and these are the steps that you have to follow like first of all we have to create our f. TSX file Inside the SRC components folder and we also have to provide this as a paragraph inside or for that's it then we have to create the sidebar so so the sidebar component will be vertically sidebar on the left side including a list of uh all of that items like home settings and profile and so on and so forth and next we also have to create the content component

so the content component will display the main dashboard content with some stat like some statistic like if You want to do that sure you can but if you don't want to do that you don't even have to do that like the total users and also the revenue okay so these These are the test that you can follow then we also have to create the split screen okay so the split screen component will manage the layout between the sidebar the sidebar and the content area so the component should accept two children like the left side a

sidebar and the right side which will be our actual Content which we are going to be creating right here for the content component so the width of each side should be controlled through the prop also you can learn more about that right here and finally we have to just assemble that or combine all of them together so inside the app. TSX file import all of the component you've just created like header footer sidebar and content and also the split screen and this is how you're going to be using There so give it your best shot

if you can do it that's completely okay and by the way you don't even have to worry about the responsiveness I don't know I guess CH gbt I did there so let me just remove this step from here and yeah you don't even have to worry about that step step and I'm going to also remove this line from there so yeah now this is looking better so give it your best shot if you can do it that's completely okay then come back and watch the solution And now let me give you my solution so I'm

going to just close all of them and now let's just start by defining our component folder so I'll just give it the name of like components let me just zoom in a bit and inside there we're going to be creating our file which will be our header. TSX and now inside there let's just use our RFC inside this our file let me go back so that we can see everything a bit better and I'm going to also remove that change that to the Header because now we are working with the header and inside there we

going to be using H1 which will say like my dashboard and now underneath that we going to be creating our div and inside this div we have two buttons so I'll just write like button and which will say like profile I'm going to also duplicate that and change there to the log out and now that's going to be it for the header now I'm going to provide the styling to this component and you Should also do that by either pausing this video and typing that manually or you can go ahead and go to my gab

repository and copy all of the styling from there so let me just I'm going to come back in a second now to save my file and these are all the styling that you have to provide for the Herer component if you want to change there you can definitely go ahead and change that but in my case that's looking cool so the next thing that we have to do is That we have to create our footer so I'm going to go ahead and just create my footer come on f.x and now inside there let's just use

our RFC and now let me just save my file and inside this fotter we're not going to be doing anything crazy but I'll just change that to the footer and inside this footer we are going to be creating our paragraph and I'm going to just provide that same uh HTML entity which was and and then copy and close there in 2025 my dashboard app or something like that now let me save my file and I'm going to also provide this styling to this so yeah this is all the styling that you have to provide for

the footer and that's going to be it so I'm going to also close there now let's take care of the sidebar so I'm going to just create a new file with the name of sidebar. TSX and I'm going to use my RFC inside this and my file file and let me just close there and inside there I'll Just use my H1 and I'll select dashboard so my file underneath there we have to use our UL inside this UL we have to provide our Ali and inside this each ali uh yeah we are going to be

providing our anchor tag and let's just spride like for this first one I'm going to say like go to the home like you don't even have to do that if you don't want to do that but I want to do that so I'll just Pride the home and I'm going to duplicate there like three times or maybe two Times so the first one we have is a home then we would have our settings and finally our profile so I'm going to just change that to like settings and I'm going to also change this level to

the settings and here let's just change there to the profile so I'll just provide my profile and change this one to the profile like so now let me save my file I'm going to go back and here now I'm going to provide a lot of styling today And these are all the styling that you also have to provide so here you can see this is how we're going to be providing our styling for the div then for the H1 ul and then for the anchor tag and for the anchor tag again and again so that's

also totally done now let me also close this sidebar next we have to create our content component so I'll just create my content. TSX and now inside there let's just use our RFC so my file and close there and inside this div I'm going to Be providing my H2 and which will say like welcome to the dashboard and provide my explanation mark there Prov a paragraph which will say like here are your stats for today and now we are going to be providing a bit of stats let's just create our div and inside the and

provide another div and inside this div we're going to be providing our H3 which will select total users and now underneath they provide my paragraph which will Select 1 comma 2 4 five some Some sort of arbitrary number and now underneath we are going to be also providing our div and inside this div let's just provide our H3 which will s like revenue and I'm going to also provide a paragraph and let's just provide random Revenue like I don't know May I guess that's going to be fine so let's just save our file and now

I'm going to go back to provide my styling inside this component so here are my styling like here you can see we're now Providing a styling for the div then for the H2 paragraph Dev div H3 paragraph and so on and so forth so this is how we are going to be creating our components now let me just show you there here you can see this is how we going to be creating our component and now let's just assemble or combine all of them inside the split screen design pattern component so I'll just use my

RFC inside there let's just go back and the first thing that we have to do is that we have To restructure a few things because we would need that inside this UI so I'll just destructure the children we would also destructure the left W which we just saw a few seconds ago and we would also destructure the right we which we also saw a few seconds ago so now let me just sve my file and I'm going to also create an interface for this so that we don't get the typescript error so let's just put

our split uh screen props and in side there I'm going to provide the Children and provide the as a react node which will be coming from the react J and also the react no once again put a comma there let's just put our left weight w GT which will be set to a number and also the right we which will be also set to a number okay save my file I'm going to copy the name of the provide there right here or or annotate my component with these props so now let me just save my

file now the next thing that we have to do is that we also have To nested the structure so we are going to be destructuring all of our stuff from the children so we would need uh what do we call it the left and also the right which we also just a few seconds ago and now me we will just provide our left WID and also our right width okay so I'll just write like con left R come on left W and this going to be equals to this back Tex and put my left R

right here and put that as a rim value I'm going to also duplicate that and change This value to the right F we e i g HT and here also change that to the right R like so save my file and now our typescript is freaking out that's because we have to use these variables so now let me just remove there and inside that you know let me just change that to a section maybe and inside this section I'm going to also provide a class names like Flex and also the flex will be set to

one and I'm going to provide my div and in this we're going To be providing our lift value and now let me just duplicate there and we're going to be providing our right value and I'm going to also provide a bit of styling to this so for this styling for the width we are going to be using our own width which will be set to like width or left weight there we go and also let me just prob a bit of pairing all around like maybe pairing all around a four I'm going to also copy

there right here change that and I guess That's going to be fine now we're going to be also providing a style and for this style the W will be set to the right now still our typescript is freaking out oh it shouldn't be W it should be with WTH there we go and now let's just copy there place it right here I'm going to also copy there place it right here semi file and that's done so now let me go ahead and go to my app component and use that inside this component so you know

I'm going to just Use my RFC once again save my file and the first thing that we have to do is that we have to import all of their components so we have to import the header and I forgot the names of there but we also have to import the F and we also have to import the split screen because we're going to be obviously using them and we also have to import the sidebar and finally we have to import the content component let's just go back save my file and this is how it Looks

like so now let me go ahead and go to my div or my jsx and I'm going to proide a bit of uh what the hell was that now we provide a b of classes today like Flex and flex will be set to a column and height will be set to toall the screen so that it will take up the entire screen so first of all we have to render our header and now let me just save my file and this is how my header looks like right here now we are going to be also

rendering our footer so now Let me just render my footer close there and I'm going to also just close it like this so my file and now we also getting our folder so if I type something at the middle so I'll just write my H1 and something maybe and here you can see we are now getting there right here so now let me just close there and which means like now we are going to be providing our sidebar and also our content so I'll just use first of all my sidebar and as soon as I

do there let me just provide My sidebar and close there save my file here you can see we are now getting our sidebar and now I'm going to also provide my content component so let's just do this semi file and we are also getting our content but we also have to wrap both of these component inside our split screen component which we just created right here okay so to do that now we are going to be using our split screen component and I'm going to just close there like so I'm going to cut That from

there place it right here and now it requires a few prom so we have to provide the left weight which will be I guess set to like three maybe and I'm going to also provide the right weight which will be set to maybe 60 so let's just goad there sa my file and this is how my component looks like right here I know it is not looking the most beautiful UI but here it is using something called the layout component behind the scenes so this is how we Going to be splitting our component by using

the layout component design pattern in reactjs now we are going to be learning about the list of data by using the the layout component so how in the world we're going to be doing there first of all we have our data folder inside there we have our data. TS file so inside there I have this games array and I also have this movies array so now let me just expand the games array so inside there we have a few objects so Inside each object we have the game name the game rating game genre and also

the language and then we have a few games right here so you can specify your own data if you wanted to but if you want to use mine you can definitely go ahead and go to my GitHub repository and grab all of that data from there and the next thing that we have is that we have a few movies so we have the movie title price description and rating right here so yeah if you want to get all of that data You can definitely go ahead and go to my gab repository but if you want

to use your own one you are more than welcome to do that so the first thing that I want to do is that I want to create my components folder and inside this components folder we're going to be defining three component the first one will be a game info or games info rather. TX and I'll just use my RFC inside this save my file I'm going to also create yet another component for The movies uh info. TSX and I'll just use the RFC inside this component and finally I'm going to be creating a component for

render list. TSX file and I'll use my RFC inside there save my file and now let's get into it so the first thing that I want to do is that I want to start working on this render list so I'll just remove this app from there and I'll use my you know let me just change that to the react fragments and now I'll just use like render list Component and I'm going to close this now if I save my file this component will take a few props which we are going to be defining in a

few seconds so the first prop it will take is going to be the data like which kind of data you want to provide for this component by which we are going to be iterating over through and we will do something with that data so in this case first of all we are going to be importing our games so I'll just import games uh from the Data component or from the data file to be present size so now we are going to be importing all of that games which you can see right here so we have

a lot of games now we are importing the inside this app. TSX file and now we are going to be providing there as a prop forward component so I'll just write like the data will be set to a games we're going to be also providing a resource name so I'll just use like resource name now it's going to be set to games in this Case because now in this situation we're iterating over through the games so yeah games would be fine next we also have to pass another prompt for our component so so I'll use

like data to render how to render the data whatever you want to call it so this is how we are going to be rendering our data by using this games info. TSX file so use like games info and I'm going to just place it right here so this is everything that you have to do first of all you have to Create the render list component then you have to specify the data the resource name and also data to render component okay so that's done now let me just go ahead and go to this component and

zoom in a bit so the first thing that I want to do is that I want to destructure a few things so now we already know that we are providing this data resource name and data to render so now we are going to be restructuring this so data can be yeah I'll just put a Data right here and also the resource name and data to render so now let me just save my file and I'm going to also Define an interface for there so for the interface this going to be a render list props and

here inside there we're going to be providing a data and data can be basically anything as array and also the resource come on resource name and the resource name will be set to string and data to render will be any so I'll just copy a name of them and Inate my component like so now let me just save my file but we also have to use the inside our component so I'll just remove that from here and inside there first of all we are going to be iterating over through all of our data so I'm

going to copy a name of there and place it right here and I'm going to use the map method and here we have to specify the item and also the index inside there and next I'm going to also rename this to the item component if you Don't want to do that you don't have to do that but I want to do that so I'm going to copy a name of that and place this item component right here so I'll just close it like this and I'm going to also specify the key and the key will

be that Index right here so I'm going to copy a name of them and place there right here and next we're going to be using a bit of weird syntax so first of all we're going to be making a clone of all of the props and then for the key we Are going to be providing the resource name and for the value which will be set to that item right here so now let me just explain that once again first of all we are providing this item component then we are providing a key for the

uniqueness then we are making a clone of our existing props and now for the key we are providing a resource name as array and also for the value we are specifying that specific item which is coming from or data so yeah that's Totally done now let me just close it right here and the next thing that I want to do is that I want to go ahead and go to this games info component here you can see we're now getting our game info component again and again so now let's go into this game's info component

and start working on there so now let me just zoom in a bit so you guys can see everything a bit better and the first thing that I want to do is that I want to restructure all of my games okay so This is going to be the first thing but first of all I also want to go ahead and go to my data file and here we have our game name game rating game genre and also the game language so now let me just create interface for there so I'll use my interface and for

that I'm going to give it the name of like games info and here inside there we are going to be passing our games and each game will have the game name and this can be set to a string we're going to be also Providing a game rating which will be set to a number I'm going to also provide the game genre and which will be set to a string I'm going to also provide the game language and which will be set to a string of array now let me copy a name of there and annotate

my component with this games info the next thing that we have to do is that we have to destructure a few things from more games so if you you don't want to destructure that like you don't have to Do that but I want to do that so I'm going to be destructuring a few things so I'll just first of all destructure what do we call it the game name and we're going to be also restructuring the game rating game genre and finally the game languages so that we can work with this so I'm going to

sve my file right now and now I'm going to just remove the label from here I'm going to just specify like H1 game name and here we have to render our game name and now if I save my file and here you can see we're now getting our games names right here which is looking cool and I'm going to also write a paragraph um this paragraph will just render the game rating and here we have to just render our game rating and also I'm going to write a paragraph for the game genre and let's just

render our game genre right here and here I'm going to just use my ul and provide my languages inside there now let's just itate over through all of Our game languages so where in the word is I'm going to copy a name of then game language or game languages whatever you want to call that I guess it's game languages I'm not quite sure about that but let me just go ahead and go to the data and Yep this is a game languages so I'll just destructure there put there right here and I'm going to use

the map method on there is going to take a language as a l and we're going to be annotating there as a string and inside They I'll just use my li and here we just have to render or L right here so I'll just uh render the the L and now let me just save my file and and here you can see we are now getting the game name rating genre and all of these languages right here forward specific game I can also provide a br if I wanted to solve just write a br and

here you can see we're now getting all of that games so that's to done and you know what I made a mistake it should be game Languages like so now let me just save my file now underneath them I'll just write HR and also the BR a few times like so okay just like that and I'm going to also render my my list once again and here now we are going to be providing a data and you guessed it we are going to be providing the movies data so now let me just destructure the movies

I'm going to copy a name of there and place it right here as a data we're going to be also providing a resource Name in this case that's going to be set to our movies I'm going to also provide data to render and now we are going to be providing this movie info right here so I'll use like movie info s my file and now let me go into this component and start working on there here you can see we now getting our movie info again and again so now let's start working on there I

guess this is going to be exactly the same as the games one but first of all you know we have to Destructure the movies so I'll just use like movies like so I'm going to also create interface for this so I'll use like interface movies info and here inside there we have to Define our movies and for each movie we are going to be providing the movie title which will be set to a string we also have a movie price which will be set to a number and also the movie description which will will be

set to a string as well and the movie rating which will be A number so I'm going to sa my file copy a name of there and annotate my component with this movie info so now let me just go back next we have to destructure a few things so I'll just destructure first of all the movie title then the movie price the movie description and the movie rating from where from the movies so use like movies right here and I'm going to also go ahead and go to there and make as a react ments now

we have to render our Content so we just use like movie title paragraph the price and the price will be movie come on movie price and also we have a description movie description and finally a paragraph of ratings and here we have to specify the movie ratings inside there now let me just save my file and here you can see we're now getting all of that movies but I'm going to have to specify a bit of BR at the end and yeah now we are getting the Inception the Matrix The Dark Knight and Forest gum

one of my favorite movies of all time so yeah this is how we're going to be iterating over through the list of data by using the layout component so here you can see we have our render list it's going to take a data is a prop resource name and data to render component and now inside there we are doing nothing but we are just iterating over through our data and providing a specific promps for our specific elements welcome to another challenge so In this one we are going to be creating a render list component which

allows us to render our items to the Dom your first challenge is to create a container component that can dynamically render a list of items based on the props it receives so in this case you'll be rendering a list of products something which I'm about to show you in a few seconds so these are the step like first of all create a render list component and inside there it will take a few Props so it's going to take like the data prop which will be array of items something which I'm about to show you in

a few seconds it's going to also take the resource name and it will be the name of the resource for example like the products like you can render the electronics the clothing the HomeGoods or something like that something which I'm about to also show you in a few seconds then you have to create the main thing which will be a data to render Component so the component there should be used to render each item like for example the uh product info component so in this component use the meth to iterate over through our data and

then here is the catch like for each item in the list pass the individual item to the data to render component as a prop using the resource name to determine the key then we have another challenge which will be to create our presentational component which will be about like just Rendering all of that item to the Dom so just create a product info. TSX file and inside this can also take like the name description price and rating and also the image and this data is already available to you inside my data. ts file which I'm

also about to show you and inside the component so so display the product image display the product name description and price and also render the rating and yeah so you can learn more about if you wanted to and also I Already provided you with the data. TS file so you can use that or if you want to create your own one you are more than welcome to do there then finally we have to create our uh what do we call it main component to render our list so this is how we are going to be

rendering them inside where f.x file so here you can see we have this new folder which will be our data so now let me just expand there inside there we have our data. TS file so we have a few objects so now let Me just expand them the first one we have is electronics so if I expand there we have the name description price rating image and so much more data about the electronics so now let me just close there we also have a clothing if I expand this so we have a name description price

rating and image and so much more item about the clothing and finally we also have the H Goods same thing will be inside the hom Goods so we have the name description price rating And image and we have a few items inside there so basically all of their data is given to you but what you have to do is that you have to render them and you also have to style they correctly but you have to use the layout components so how in the world you're going to be doing there that's all up to you

so give it your best shot if you can do it that's completely okay then come back and watch the solution and here is my solution so what I'm going to do is that I'm going to just Define my my components folder so let's just provide our components folder and inside there I'm going to be just creating my uh render list. TSX and I'll just use my RFC inside this sa my file now I'm going to go ahead and go to my app component and run this component right here inside this Dev so I'll use like

render list and close the semi file but we're not going to be using that like this we're going to be also providing our data to This so first of all we have to import the data then we're going to be providing there as a prop so what I'm Inu that I'm going to only import the what do we call it Electronics from where from our data folder and inside there we have our data. TS file so now let me just copy a name of there and the first prop it will take is a data and

now we're going to be providing our Electronics to there we also have to provide the resource come on resource Name and that's going to be equals to the product and now I'm going to also provide not a comma but we also have to provide the data to render on render and here let's just pass our product info component which we are going to be creating in a few seconds so now let me just go back and save my file I'm going to also go ahead and go to my components once again I'm going to render

my product or was that a yeah product info. TSX and now let me use my RFC inside There and now we have to render that component right here so this is how we are going to be importing there this is how we are going to be passing them now let me go ahead and go to my render list component and now let's just destructure all of that props so I'm going to just destructure the data I'm going to also destructure the resource name and finally we have to destructure the data to render but I'm going

to also rename that to item come on item component like So now let me just sve my file and I'm going to go to the top and Define an interface for they so I'll just give it the name of like render uh yeah I guess render list props would be fine I'll just write like data and this it's going to accept any kind of list I'm going to also provide uh the resource resource name and that's going to be set to a string I'm going to also provide data to render and it should be any

okay so now let me just copy a name of there And annotate my component like so sa my file and what are we getting oh we have to use there now we are destructuring there so which means like we have to use there I'm going to also provide the class names and for these class names I'll just put like product uh list I'm going to also provide these classes even so now we we have to use our data. M map over through our items so I'll just pass my item and also the index inside there

and now let's just pass our item Component like so and close it I'm going to pass the key and key will be just taking that index and now we have to spread out every single thing and now we have to provide the resource as a name come on resource name that will be our key and the value will be that actual item which we are now taking as a perimeter right here okay so now that's all you done now let me go back the next thing that we have to do is that we have to

go ahead and go to our product info To render that component since we are already passing this so now inside there it's going to also render uh our product so let's just Pro our product so we already know how our product looks like so we can totally create our interface for this so I'll just use like product info and I guess promps would be fine yeah I'm going to just give it the name of props and inside there let's just provide our product and inside this product we have to provide the name name Will be

set to string the description will be uh set to string and we're going to be also providing the price and the price will be set to a string and provide the rating and rating will be set to a number image URL will be also set to a string now let me go ahead and go to the Top Copy a name of there and annotate my component like so let's just save our file and now we are going to be restructuring a lot of things from these products like uh you know let me just go Ahead

and go to my data. ts so we would need to destructure the name the description price rating and also the image URL so now let's just do that I'm going to go here and now let's just D structure a lot of things from the products and now here what do we have to do we have to first of all destructure the name then the description and also the price the rating and the image URL this is s file and now here let's just remove there and I'm going to provide a bit of styling to them

so these are all the styling that you also have to provide right here if you want to copy that from my GitHub you can totally go ahead and just copy that from my GitHub but if you don't want to do that you can manually type that if you wanted to so for the source we're going to be passing our image URL and for the alternative text I'm going to just only pass the name and I'm going to also provide a bit of classes today for The image so the width will be set to 52 and

the height will be also set to 56 we're going to be changing that to object toally cover so that it should take up the entire space and I'm going to also make it totally rounded for the top of totally large and let's say sa our file that's done now we're going to be also creating another div with the class of flex and flex will be set to column inside there we have to just render our product name description and Price so I'll just write my H2 and here I'll just say like the name I'm going

to also provide my paragraph which will say the description so let me just provide my description right here I'm going to also duplicate and change that to the price WR my price right here and I also added the styling like here you can see I added a style to the H2 to the paragraph and also to this paragraph as well now I'm going to go to the top and here I'm Going to pass a function which will be responsible for the rating of the star or rendering a star component to be precise so here you

can see we have our render star component and now we have our array and now we are iterating over through that array and for each iteration we are now pushing this UI or this star two the star array so that's exactly what we are doing right now and finally we are just returning there so we can get the value from there okay so Now let me just hide there from here I'm going to copy a name of there go to the bottom and here we have to just render there so I'll just use my div

and inside this we have to just render that render stars and provide my ratings inside was there ratings or just rating I'm going to copy the name of there which is a red thing and now let me place it right here I'm going to also provide like uh what do we call it reflex and margin for top will be set to two pairing all the xaxis Will be set to four let's just save our file and check this out so here you can see we are now getting all of the data from the electronics so

let me just show you there if I go ahead and go to my data here you can see we now getting that smartphone XYZ and we are also getting that 4K Ultra HDTV okay so which means like this data is coming from the electronics like suppose if you also want to render the clothing and also the home data or Home Goods so what we going To be doing there and that's quite simple and easy so now let me go ahead and go to my app and just duplicate there a few times so I'm going to

duplicate there one and two time now we also have to destructure what do we call it uh let me just hold control space so we have to restructure the clothing and we also have to restructure the Home Goods I'm going to copy the name of this clothing place it right here I'm going to also copy the name of this home goods And place it right here here and the rest of them will be exactly the same and yeah this is how our UI looks like but you know what it is looking awful I'm going to

just make the at the center so I'm going to just use like my div and provide my classes all used like Flex and flex will be set to ramp justifying will be set to toally Center and items will be set to totally Center s file and yeah this UI looks cool and that was our challenge about layout component now We're going to be building a model by using the layout component so what I'm going to do is that first of all let me just mention that we still have our data. TS file and inside there

we have all of our games and all of our movies we're not going to be touching the movies but we are going to be working with the games I don't know so next we have our component so inside there we have our game info component I'm going to also Define the model. TSX file and Use my RFC inside there go to my app and register there right here so I'll just remove that and change that as a react fragments and then inside there I'm going to be using my model so here for this model inside

there we're going to be placing our games info and now for this games info we are going to be passing a data and that data will be our games so now let me just go to the top and import the games from where from our data file then we're going to be placing The as a prop for our games info so now let me just go ahead and go to my model and start working on there so the first thing that I want to do is that I want to destructure the children and I'm going

to annotate the has a children react node and import that from the reactjs next we have to Define our state so I'll just go back and Define the state I'm going to give it the name of like show and then set show it's going to be equals to the use State and the Initial value will be set to false okay so let's just change there to false now let me go ahead and go to my UI and change that from the DS to the react fragments and first of all we're going to be defining a

button which will say like show the model and I'm going to also specify a bit of styling to the so when somebody clicks on there then we're going to be firing this function which will just say like set and we're going to be setting there to true and I'm Going to also provide a bit of styling today so basically we're just providing a border and piring all around will be set to five and background totally 300 this is how it looks like right here so now we are getting our component which is look I mean

like we are getting our model button which is looking cool so now underneath that we have to start working on our UI so if we have the show so in this situation we're going to be showing the UI but if they set to false Then we're not going to be showing nothing at all so what I'm going to do is that I'm going to just provide a paragraph and I'm going to say like um something cool okay so if I sa my file here you can see we're now getting wor something cool if I click

on that nothing will happen because we have to provide the on click we are already doing there you know let me just refresh there currently we are not seeing anything but now if I click on there now We are getting what something cool right here so you know let's just remove that from here and inside there we going to defining a section on let's just Define our section so for this section we're going to be passing these classes so I'll just provide like fix and the left will be set to zero top of zero Z

index 10 width will be set to screen height will be set to full overflow Auto background to blank and opacity will be set to 50 and also when somebody clicks On there then we want to fire this function so I'll just use like set show and change that to false and inside this section what do you want to do we just want to Define our div and for this div uh we're going to be creating a button which will just say like hide hide the model so I'll just write like hide model and which is

looking cool and when somebody clicks on this model what do you want to do in this situation you want to just fire this function you want To provide the event object and that's going to be coming from the react. mouse event and here we have to annotate as HTML div okay so let's just put our HTML div element and then we're going to be just setting the event do uh what do we call a stop stop propagation and that's going to be it so now if I save my file next I'm going to also specify

a b of classes to this one so we have a background totally white margin for the xaxis of 10% margin on the y- Axis will be set to Auto ping all around will be set to 20 pixel with will be set to 50% I'm going to also provide a bit of styling to this hide model and when somebody clicks on there come on when somebody clicks on there then you want to fire this function which is the set show and we're going to be setting there to false so let's just change that to file save

my file remove that from here and now underneath this button we're going to be showing this children right Here so if I save my file and now if I click on this show model so we are now getting our model and we are getting all of the data from this component so you know let's just go ahead and go to this component and I'm going to just hide there from here let's just comment this out so yeah we are now getting our model and which is looking cool now let's talk about the container component so

container component are responsible for loading in managing data or their child Component and this design pattern is often used in conjunction with presentational component also called a dump component to keep the UI more modular and maintainable so how that's going to look like here you can see I have a container component some sort of a parent component and inside there I have a few child component so inside each child component let's suppose if I want to fetch a data so I'm going to be using a use effect for fetching the data Or for the side

effect and then I'm going to be rendering that data accordingly then same thing will apply for the child 2 component then for the child 3 component and this is bad because we have to write all of that code again and again for each and every component and how the what we're going to be applying that container and layout design pattern to make our component reusable and we don't have to write a lot of code so first of all we're going To be creating our container component and inside that container component we can provide any kind

of logic let's suppose if you want to fetch our data or maybe you wanted to handle some sort of a state or anything in this situation I'm going to be fetching my data so I'm going to just provide my use effect and fit some sort of a data inside that use effect and then I will past that data as a children to my component and then inside the child component I can totally Access their data by just either destructuring that or I can just use a props and then I will just render that data Inside

My Child component like inside the child one component the child two component and also so in the child three component depending upon our components so yeah that was just a quick theory about the container component and if you don't get it you don't have to worry about that because now we are going to be writing our code and then You'll get to know what I'm talking about all right so now let's talk about the container component so what I'm going to do is that I'm going to go ahead and create a components folder and inside

there I'm going to create my to-do list. TSX file and I'll use my RFC inside there and next I'm going to do something a bit weird but here don't have to do that so what I'm going to do is that I'm going to Define yet another folder with the name of shared you don't Have to do that like once again I can't stress this enough you don't have to do that but I want to do that because in this component we are going to be providing a logic which we are going to be using again

and again so that's why I want to put that inside the shared component so what I'm going to do is that I'm going to define a component with the name of single too list or single to-do lower. TSX file and I'll use my rafc inside there now let me go Ahead and go to my app and here we have to register there so I'll just use like single to-do lower and then I'm going to close there and inside there we're going to be providing our to-do list and close there like so so basically this single

to-do loader is our container component because in this component we're going to be fetching a lot of data and then we're going to be passing that data to this to-do list and this is going to be our child component so now let me just say That once again so this is going to be our container component and this is going to be our child component so now let's just start working on our single to-do list loader first thing first I want to show you where in the world we're going to be fetching our data so

we're going to be fetching our data from this JSM placeholder typi code.com and here inside there we're going to be specifically fetching our data from this Todo so I'm going to click on there and I'm going to copy the URL from there and now let me just put there right here I'm going to also open my terminal and here I'm going to be using npmi and then xus if you don't know what xus is you don't have to worry about that you can definitely go ahead and use a fetch if you wanted to but in

my case xus would be fine so I'll just use like npm run day one one more time and now let's just start working on them the first thing I want to show you is that here you can See we have our user ID we also have our ID and we also have the title and completed flag so I'll just Define interface for this so I'll use like interface with the name of to-do and inside there we have to Define first of all the ID and the ID will be set to a number then we have

to provide the title and the title will be set to a string and the completed will also be set to a string next we have to Define interface for the children so I'll just use like Uh what do we call it children right here so I'll just write like children so I'll just use like interface and then single to do lower props and here inside there I'll just write like children and I'm going to annotate as a react node and I'm going to copy a name of them copy a name of and place it right

here next I'm going to also create an interface for the child component so I'll just use like interface and then child component props and here inside There we're going to be providing a to-do so our to-dos will be either to-do or null value so now let's start working on our single to-do ler component so the first thing that I want to do is that I want to create a state where we are going to be putting all of our data so I'll just use like con and then toos and then set todos it's going to

be equals to this used and we're going to be either providing to do or the null value to there so now let's just initially We're going to be providing a null value to there and now underneath there we have to fetch our data so which means like we're going to be doing some sort of a side effect so I'll just use like side effect Right Here and Now inside there we're going to be using a asnc but first of all we have to provide a dependency array and just provide empty dependency array for there so

now we're going to be creating something called the ify function which is immediately Invoke function expression if you don't want to do that you know I'm not going to do that what the hell so I'll just give it the name of like f data it's going to be equals to this as synchronous function and inside this as synchronous function we're going to be first of all getting the response from where from where come on a and then xuse dog and here we have to annotate as a to-do and I'm going to also close that and

first of all we have to import this Xus from the xus right here I'm going to also cut this link from there and remove this comment from there and now here we're going to be fing your data by using this get method so I'll just write like this URL and now I'm going to sve my file and now to need this response we're going to be using a set too and here we have to specify the response not the report error but the response. data now let me just save my file right now I'm going

to copy a name of there and Place there right here and execute my function if you don't like this approach you can definitely go ahead and just remove there and convert there to something called immediately um ify or immediately invoke immediately invoke function expression what the hell I just kind of forgot the name of that and I'm going to also cut there from here so this is how we are going to be defining our function and this is how immediately we are going to be executing Our function like so so yeah this is also another

way to do that if you want to do that you you can totally do that but if you don't want to do that you don't have to do that so this is how we are going to be fetching our data and yeah this is how we're going to be storing the inside our todos now let's get into into the UI so I'll just remove that from here and now we going to be getting the react J and then a children from this react J now let's just iterate Over through all of our children and here

is a first perimeter we're going to be providing a children to them and then we have to just use a function for iteration so I'll just provide a children and then what do I want to do I want to first of all check if we have that reactor is valid element so if that specific element is valid so we're going to be just making a clone up there so I'll just write like child component prop and now let me just close there and Here we have to specify a CH not children but just a child

so if that is the case so then you want to just return the react. clown you want to just make a clown of there so I'll just use like react. clown element and then we have to specify a child inside there and for the second perimeter we are going to be passing their todos which we're now fetching right here okay so that's done but if that's not the case so in that situation we are going to be only Returning the child okay so now let me just import this react from that react JS and that

errors are now successfully gone so yeah this is just our single to-do lader component and now let's just use the inside our file so yeah we are already using that but I'm going to go ahead and go to my to-do list component and here you can see we're now getting our to-do list component which is looking cool so the first thing that I want to do is I want To just Define an interface so I'll just Define the interface for to-do and here we have to specify the ID and ID will be a number and

the title will be a string the completed flag will be the string as well completed flag is Boolean not a string so I'll just change that to Boolean like so next we're going to be restructuring the todos so I'll just annotate there but first of all let's just Define our interface for the to-do list props and here inside let's just Provide your to-do so it's going to be either a to-do or null value okay so I'm going to copy a name up there and annotate my component with this to-do list props I'm going to sve

this file and finally let's just destructure the to-do and also the ID so I'll just destructure the ID and also the title from where from the to-dos so either gives us all of their to-dos or gives us an empty object so now let's just use the inside our UI I'll just remove that From here if we have the todos so in that situation we're going to be showing one UI but if that's not the case so then we're going to be showing another UI so I'll just put a paragraph and I'll just say like loading

dot dot dot and I'm going to also close this paragraph like so okay so now if we have the todos then you want to just get a div and inside this div I'll just put a paragraph and it's going to say like a strong tag to do ID or something like That and here I'll just render that ID right here and also I'm going to put the H1 and it's going to say like strong once again to Doom title and then here we have to just render that title right here oh my God that was

a lot of explanation so now let me just refresh there so we are getting a to-do ID and also the title but we are not getting the actual value out of there you know what let's just log this todos to the console so I'll just use a to-dos open My console okay we are getting an array and inside this array then we have our objects God damn it yep so I'm just itating over through all of the todos and I'm getting each of the to-do and then rendering the to-do do ID and now we are

getting all of their to-do IDs I can also get stuff so I'll just write this div not device but a div inside the let's just render or H1 and for the paragraph I'll select to do body was That b or something else title there we go so I'll just write a title and here we have to use or to do. title if I close this my file so we are also getting their title and I'm going to destructure the ID and also the tire out of there and select both of them remove them and yep

we are now getting there here I'm going to also inate the erer to do and yeah that's looking better so this is how we going to be creating a container component and this is how we Going to be ping a data today but this is not the better way to do stuff like sure we are getting this data from this URL but let's suppose if you want to get a specific item like maybe item one like to do one or maybe if I want to get like the comments or maybe the post or something like

that now let me just show you these and points right here so if I go back let's suppose if I want to fetch that data from either the post or comments or albums poos to do or users How the what am I going to be doing there well for that we have to refactor our code time for the quick refactor so what I'm going to do is that I'm going to make it so that we can patch the data by specific ID so I'll just write like to do ID and here I'm going to specify

like either one two or some ID right here so in this case I'm going to only specify two I'm going to save this file right now now let me go ahead and go to this single to-do lower and we are going To be getting that ID right here so I'll just write like to-do ID I'm going to copy a name of that and I'm going to make it as a template literal because we are going to be placing our ID totally dynamically so I'll just place my to-do ID right here if I check this out

so now let me just open there here you can see it's going to giv us uh okay it's going to giv us an error so let's just refresh there you know let me just go ahead and go to this to-do list and now I'm going To comment this line out and I'm going to go ahead and just loog to the console there to do so if I just do this save my file and here you can see we're now getting a specific item based on that ID so we are now getting like the ID of

two the title of some random title and also the user ID will be set to one uh I'm going to just go ahead and cut that from here I'm going to also remove that I'm going to uncomment that and now let me just log to the console that ID and Title so I'll just write like ID and also the title and now let me just save my file let's just refresh there and here you can see we're now getting the ID and also the the title so what I'm going to do is that I'm going

to render this I'll just remove it from here and I'm going to write return statement if we have the to-dos in that situation show one UI but if you don't have the to-dos then you want to just show a paragraph which will say like loading Dot dot dot okay I'll I'll just write like uh div and inside this div we are going to be writing a paragraph and then a strong tag and it's going to say like too ID and I'm going to render that to-do ID right here just ID and now underneath that we

going to be creating H1 and inside there let's just write our strong tag once again and I'll write like to do title and then I'm going to render the title right here so I'll just write like title now let me just save my File and it should be todos now let me just save my file and here you can see we now getting what to do based on that specific ID so now you can go ahead and just uh change there to like three maybe so and now let's just refresh there and it's going to

gives us the ID of three it's going to also gives us that random title so so I can just duplicate the like how many time I want so I'll just duplicate the like three time and I'm going to just provide uh you know this Is going to be one this is going to be two and this one will be three now let me just save my file now if I just refresh there so we are getting a to- do ID of one then two and three so yeah this is how we are going to be

fetching our data by using a specific ID time for the refactor number three so here you can see in this situation we are only getting our data from the to-do resource but let's suppose if you want to get our data from either the post or comments or Albums so how the what we are going to be doing there and to do them we're going to be defining yet another file and by the way uh I'm going to also just write like to do ID right here and I'm going to set that to number so it's

going to just remove their typescript error from here so then you're done I'm going to also close this file and now let me just go ahead and go to my shared folder once again now we are going to be creating a resource lower. TSX and I'll Write my FC inside this save my file and now let me go ahead and go to my app and remove all of that stuff from here and I'm going to specify the resource loader from our component spoiler and inside them we're not going to be closing it like this we're

going to be closing it like this because we want to provide our children's inside there so for the childrens we are going to be providing our to-dos list and here it's going to take a few props so I'll just provide Like first of all the URL you can either give it the name of like URL but in my case I'm going to specify like resource URL and for the resource URL first of all we are going to be fishing our data from the todos and then for the first to-do and I'm going to also specify

the name so I'll write like resource name and here we have to specify the resource name as a to-do I'm going to also duplicate or you know we're going to be doing that in a few seconds but now let Me go ahead and go to my resource lower and now let's just take care of there so the first thing that I want to do is that I want to destructure a few things so first of all we are going to be destructuring uh the resource URL so I'll just write like resource URL and also the

resource name and finally the children so I'll just write a children right here now let me just go to the top and Define the interface for what for the resource loader props and inside There first of all we have to provide our uh resource URL and here we have to set that string we also have to provide the resource name and set that to string and for the children it's going to be set to react node okay so now let me just hit enter I'm going to copy the name of there and now let me

place there right here as a resource loader prop now let me go back and save my file and then St done the next thing that we have to do is that we have to create a state for Storing our data so I'll just write like State you can give it any name that you prefer and then set State and it's going to be equals to the US state it's going to take any kind of data and we have to specify the initial value of null today that's also done next we have to fetch our data

so to fetch our data we are going to be doing this side effect so for there we have to use the use effect inside there we are going to be doing our data fetching but first of all we Have to provide our dependency array and for the dependency array I'm going to specify the resource URL right here okay so I'm going to use my IF function once again and here I'm going to specify the as synchronous uh come on the asyn function and for this async function uh first of all we are going to be

getting the response it's going to be equals to aware. xuse let's just get our xuse from our xos library and we're going to be getting the data from this URL so I'll Just write like uh https and then Chase and placeholder do type I code.com and then for Slash and now we have to render or resource URL so I'm going to copy the name of there and now let me just place it right here okay and it's going to giv us some sort of a data so now we have to set that data to overate

so I'll write like response. data and now let me just save my file this is how we are going to be fetching our data and this is this is How we are going to be storing the inside your state the next thing that we have to do is that we have to use our react children so what I'm going to do is that I'm going to make the as a react fragment and now inside there first of all we are going to be using react. children not clown but children there we go and first of

all we have to grab the react react J from the react library and now we have to over through there and I'm going to specify children and here We have to provide a child inside there and now we have to check if we have the reactor is valid element come on is valid element so in that situation we are going to be first of all writing the children and then we have to clown there so use like react. clown element clown element and here we have to specify the child and now here we are going

to be passing our resource name as a key and then for the value we going to be setting there to state so this how we Are going to be clowning that element if it is a react valid element but if it's not so in that situation we are going to be only returning the child sold just for like return child and sve my file now let me just go ahead and go to my app and see what's wrong okay so we are not getting any errors let me just refresh it we are getting our data

which is cool yeah we are getting our data but we are not able to render there so I'm going to Go to the to-do list app let's just log that to-dos to the console say my file right now okay so everything is undefined oh it shouldn't be to do it should be a to-do just a singular to-do okay and yeah I'm going to remove that s from there and I'm going to also remove it from there and from here so now let me just save my file right now and here you can see we're now

getting our title and also our ID right here which is looking Cool now I can also go ahead and just uh go to my app and I can just change that to like maybe two or something like this so it's going to change there to two which is working totally fine but now I'm going to also fetch my data first of all let me just write HR and then BR now we have to fetch our data by using some different resource so I'll just use like resource lower once again and I'm going to close there

and inside there we going to be rendering another component which We're going to be creating in a few seconds which will be a comments list and now it's going to take the resource URL and for the resource URL we're going to be fishing more data from this comment so I'm going to just click on there and I'm going to copy this entire thing or you know let me just copy this comments from here and now now let me just place it right here so comments and you want to get the first comment and I'm going

to provide the resource name And the resource name will be set to comments now let me go ahead and just create this component so I'm going to copy a name of there and just create this component right here I'll use my rafc inside there sa my file check this out let's just refresh there and yeah we have to take care of there first of all now let me create the interface so I'm going to go ahead and first of all we have to take care of the post ID then the ID name email and body

so I'm going To go to the top oh my God what the hell did I just do and I'm going to define the interface for the comment and inside there we have to provide the ID and ID will be a number the name will be a string the email will be also a string and the body will be a string as well next I'm going to Define interface for the comments list props and inside there it's going to take the comments it's going to be either the comments which we just Define so let's just provide

our Comments so it's going to be either the comments or no so I'm going to save this file I'm going to copy a name of there and now let's just annotate our component and first of all we have to destructure the comments then we have to annotate our component like this so now if I log to the console that comment so let's just log that to the com console and check this out so let's just refresh there and let me go ahead and go to my console like this and here you can see Oh we

are getting some sort of error so comment list is not defined oh this because we have to first of all import import there so I'll just go ahead and just import there like this and yeah now it is defined so now let's just refresh there and here you can see we are now getting first of all the user ID and also the completed flag the title and the user ID once again what the hell is that coming from so we are getting undefined undefined then we are getting The data this is not something that I

want let's just go to the to-dos and remove that from there let's just close there and refresh there once again so we are getting undefined I don't know why but we are getting getting undefined oh I just made a mistake here you can see I'm providing a resource name it should be a resource uh you resource URL you know let's just copy there and place it right here and this one will be a resource name instead now let me just Save my file and now let's just refresh there and here you can see it's going

to gives us all of their data so we are now getting the body email ID name and post ID which is looking cool so now let me just go ahead and go to this component and remove that from here and and now we are going to be restructuring that ID the name and also the email and the body from where from the comments like so otherwise if that's not the case we are going to be setting that to empty object And now finally we just have to render this so what I'm going to do is

that I'm going to provide a paragraph and inside the let's just provide our commment ID and render our ID right here I'm going to also specify the H1 maybe in this case and let's a strong tag and then the comment comment name and here we have to render the name uh another paragraph which will says strong and then comment email and here we have to render the comment email and then finally a Paragraph for a with a strong tag then the comment body and here let's just render the body I'll just write a body right

here sa my file and here you can see we are also able to fetch our data from the to-dos and also from the comment Resource as well so yeah this is how we are going to be making our resource lader it's going to take the URL it's going to also take the name and also the children and this is how we going to be fetching our data based on That specific resource URL time for the final refactor so what I'm going to do is that I'm going to go ahead and go to the shared folder

and Define the data source. TSX file and use the RFC inside then go to my app and remove all of that stuff from here and I'm going to also remove all of them from here just like that now let me go ahead and render my data source component right here and I'm going to close there and here it's going to take the to-do list which we already Defin I'm going to close there now in this situation it's going to take a few props so it's going to take the get data function which will be an

actual function which we are going to be creating in a few seconds and it's going to also take the resource name okay so in this case I'm going to only specify a to-do because in this case we're going to be working with the to-do now let me go ahead and Define some sort of a function which allows us to fet your Data for this prop okay so I'm going to go ahead and go to the top and I'm going to specify like server come on get server data and it's going to take the URL as

a prop I mean like as a perimeter and I'm going to inate as a string and now here I'm going to use the asynchronous function and now inside there we're going to be getting our data so I'll just store the inside the response and I'm going to use like aw in xos get the xos from the xos library and We're going to be get them by using this URL right here and finally we just have to return or response. data and that's it's going to be a I'm going to copy the name of there and

now let me just place that function right here and now this function will allows us to fish the data so I'll just write like https and here we have to put like this and placeholder do type come on type I code Type I code like so not a type but just a type or TP code.com and then for/ toos and then one I'm going to save this file right now now let me go ahead and go to this component and start working on this so now let's just go there and the first thing that I

want to use that I want to restructure the get data function it's going to be equals to this initial value of function so I'll just set that to this empty function and also we are going to be providing a resource name and also the children as well so now let me just save my file go to the top and Define an interface for this I'll just use like uh interface data source props and here inside this then I'm going to specify the get data function and this is going to be optional function and we have

to just return the white from there I'm going to also specify the resource name and for the resource name is going to be set to string and also for the children there's going to be a react node okay so now let me just copy a name of there and annotate my component with These props like so and the next thing that we have to do is that we have to create for state so I'll just use like cons and then State and set State and it's going to be equals to this use state function and

I'm going to specify the N value today as initial value it's going to take any data now finally we have to use the use effect patching our data so I'm going to go there and first of all fold the dependency array I'm going to specify the get data function And inside then we have to use our ify or immediately in function expression so I'll just specify my ify right here and cons data and it's going to be set to a and get data function I'm going to also set the state and here we have to

spef spey our data inside there now let me just remove that from here and change there to react fragments and inside there we have to specify all of that stuff first of all we have to get our react from react JS and now we are just Traing over through there and now we are checking if we have the valid react element then we want to just make a clone of there but if that's not the case we want to just get the children now let me just save my file and yep we are getting our

data based on that specific URL and we can totally and definitely change that to like 12 or something like that it's going to also gives us our data based on that specific URL so yeah I can also duplicate there So let's just duplicate there and I'm going to Pro a bon and also the H on for the horizontal line and I also want to fish the data from these comments so here you can see we're now getting our data from the comments and the first comment and I'm going to also change that to the comment

like so or comments rather and render my component which will be a comments list now let me just save my file and here you can see we're now fing our data from the todos and Also from the comments so yeah this is how we are going to be fetching our data by using this get server data function okay so time for another challenge so in this one we are going to be creating our container component for fetching our data something which we just saw a few seconds ago but now this is a challenge so what

do we have to do your goal is to implement a reusable data fetching component in reactjs that can fetch the data from the external API and provide It to its child component and this should be done with proper error handling conditional r ring and flexibility in how data is passed down to its St component so how the steps going to look like this is how the steps going to look like so first of all we have to create a data source component and obviously you can read through all of there if you wanted to then

we have to create our product list component in which we are going to be rendering or Data so I'm going to be fetching my data by using exos from this fake store API and you are more than welcome to fetch your data from anywhere that you prefer so yeah if you want to give it your best shot you totally can but if you you can do it then that's completely okay come back and watch the solution and now let me give you my solution so what I'm going to do is that I'm going to create

two folders so the first one will be for the components and the second one will Be for the shared you don't have to create that but I want to create there so now inside the Shar component I'm going to be I mean like inside the Shar folder we're going to be creating our Shar or data source components so I'll give the name of like data source. DSX and now inside there let me just use my RFC so my file and now let me go ahead and go to my app and use that right here so

the first thing that I want to do is that I want to go to the top and I want To import this so I'm going to just import uh the data source from that components folder and now inside there let me just remove this app from here and I'm going to just provide like H one is going to say like welcome to the F store or something like that because now we are going to be creating our F store I'm going to also provide the margin to the top of 20 uh pixel now let me

close there now underneath there we have to call our components which will be our Data source I'm going to call it like this and it's going to take a few props so what I'm going to do is that I'm going to be passing this function which allows us to fetch our data which will be a get data Funk okay so now let me just paste it and now we going to be pasting the name of like Get server data and let me just go back and now here we're going to be passing our API which

will be our https and then uh F store ai.com for/ products okay so if you care About that you can just hold control and click on there and now it's going to give you all of that data right here so we have the title we have uh ID and we have the price and in a lot of this data so now let me just close there and what I'm going to do is that I'm going to also provide the resource name right here so I'll say like resource come on resource name that's going to be

equals to the product so let's just say our file and now here inside there we are Going to be creating yet another component inside this components folder not inside the shared folder but inside the components fer I'm going to give it the name of like um product or yeah I guess product list. TSX would be fine let me just zoom in a bit so this is how we are going to be creating or naming our file so now inside there I'm going to just use my RFC save this file let's just go to the app

I'm going to go back so that you guys can see everything a Bit better and now inside this data source I'm going to be passing my product list and now let me just close there so as soon as I do that now let me save my file and that's it now we have to Define this function to fetch or data but the first thing that we have to do is that we have to go to this data source component and destructure all of that props so let's just go there and here inside there what we

have to do uh first of all we have to restructure the Here data function and I'm going to also uh provide the initial value of this empty function today and then I'm going to also destructure something called the resource name which we are also providing and now we also have to destructure the children so now that we successfully destructured there but we also have to define a typescript interface for there so I'll give it the name of like interface and then data source uh props and now inside there we Are going to be passing our

get data function and I'm going to make the like totally optional and here let's just pass our Arrow function which will only return the white I'm going to also pass the resource name and that's going to be set to a string and then finally we have to pass our children and that's going to be the react node which will be coming from the react JS so now as soon as I do that it's going to import there from the reactjs now let me just copy this name And I'm going to annotate my component with these

react props so let's just say our file and this is how we going to be annotating our component by using this data source props so now inside there we have to Define our state and also our errors so I'm going to just go ahead and Define my state and also my set State and going to be equals to the US St and the initial value I'm going to paste like null today and basically it's going to take like anything that you can Provide right there and I'm going to also past the error and then set

error it's going to be equals to the use come on oh my God use that there we go and here we have to P the initial value of null today so it can either take a string or it can take a null value as well so now let's sa our file and now underneath them we have to use this function to fetch our data and by the way we're going to be also creating this function inside this app But we're going to be doing that in a few seconds so now inside there now we are

going to be doing a side effects so in this situation we're going to be using the use effect okay so now let's just provide the and for the dependency here array I'm going to only provide that prop which we now getting like which will be the get data function like whenever this function changes then we want to rerender this component or this use effect uh what whatever you want to Call it and now inside I'm going to past the if like immediately in work function expression but if you guys don't know there so you can

definitely just create your function and call so I'll just write like async and here I'm going to P my function inside there and now let's just space our try and catch blocks so for this try let's just go back for this try I'm going to just get my data by using this get data function and I'm going to execute there now it's going to Give us some sort of a data so now we have to store the inside the variable so I'll just give it the name of like uh cons data it's going to be

equals to this function I'm going to also set there to my state which will be set to this data but if you got some sort of error so in this situation we are going to be just setting that error and I'm going to S like down to fish the data and now let me just save my file that's all done I'm going to also hide that and The next thing that we have to do is that we have to go to the UI and start working on there and I'm going to also make the as

a react fragment instead of the div now here the first thing that we have to do is that we have to check for the error so if you got the errors in this situation we're going to be rendering the error but if you don't got any error then we're going to be showing some sort of a UI so if you got some sort of error so I'll just write a Paragraph and I'm going to say just render that godamn error okay so let me just change that to error and here we have to provide the

class name and I'm going to just provide like I know maybe text uh text red would be fine red and I'm going to just choose this 600 right here okay because that's going to be it for the uh error and now if that's not the case so then we want to it over through all of the childrens and I'm going to use the map and here we have to Pass the children like all of them and then we have to pass the child as a initial value perimeter and now inside then we have to check

if we have the react that is valid element like if the element is the react element so in that situation uh what do we have to do in this situation we have to just return our react. clown element we have to just make the clown of this existing element and we also have to pass our child inside there and now here now we are Getting this error because we also have to import the reactjs from the react so I'll just import the react and these error are now successfully gone okay so now here I'm going

to paste the keys and values so for the key I'm going to paste the resource name and the value will be set to this state okay and now here let's just return our data so I'm going to just return only the chart and now let me just save my file and that's only done so this is how we're going to be Defining our data source component and now let's just use that inside our app component we are already using there right here but now we have to create this function so I'm going to go to

the top and I'm going to make this function right here so I'll just give it that same name and it's going to take the URL so let's just space our URL and that's going to be a string and now let's just make the as a asynchronous function and here inside them we have to just use our Xuse but first of all we have to install the so I'm going to use npmi and then XU it's going to install the inside my dependency or inside my project to be precise and now let's just use our npm

run Dev so it's going to just run there now I'm going to be using the A and I want to use the xuse and by the way you are not just limited to use the xus you can use the fetch if you want it to but in my case I'm going to be using xus doget to get my data by just passing This you L and now let me just use my um come on let me just store the inside the response variable and now it will freak out because we have to import the exuse

from the exos and finally we have to just return the response. data and that's it okay so that's totally it so the next thing that we have to do is that we have to go ahead and go to this product list component and render our data properly so this is how my component looks like and now I'm going To just create an interface for my data so I'll just give it the name of like product and now inside there we are going to be expecting the ID and the ID will be set to a number

we will be also expecting the title and the title will be set to a string and we can also expect the description and that's going to be set to a string as well we can expect the price that's going to be a number and also the image and that's going to be set to a string now based on This interface now we are going to be creating yet another nested interface so either use that or use a null value so I'll just give it the name of like product list props and inser side there let's

just use our products so either use our product list which we just Define right here or use the null value okay like nothing at all so now let me just paste this null value I'm going to copy the name of there now let me go ahead and go to my component and let's Just destructure our products so I'll just uh destructure my products and I'm going to annotate my component with these products okay so now here I'm going to remove this entire jsx and I'm going to just say like if we have those products so

in that situation show this UI but if you don't have those products then show this another UI okay so now for this else class I'm going to just create a paragraph and I'll just say like I don't know maybe loading products Dot dot dot would be fine and I'm going to also provide the class names and class name I'm going to just copy and place a few styling so I have to provide this loading message right here and now here for this first class now we have to render our content so I'll just create a

div and inside this D I'm going to give it the class of like product list container come on container c n t i n e r there we go and I'm going to also PR the UL and now inside this UL Let's us Go back we're going to be iterating over through all of that products which we now getting right now so now let me just P it right here and use. map and here let's just pass our product and here inside them I'm going to just pass all of my products let's space our lii

and for this lii I'm going to be placing a key and the key will be coming from product. ID I'm going to also provide the class name and which will be set to product card and inside this Li uh I'm Going to provide my H2 which will just render the product. title let's just check this out so now let me just save my file and here you can see we are now getting all of the products title which is looking cool and now the next thing that we have to do is that we have to

create our paragraph and now uh we are going to be providing our come on product. description I'm going to also provide the product price so let's just provide our product our price and I'm Going to also pass my dollar symol right there and here let's just also pass our price here and finally the image so that we can see the image as well so I'll use like product. image and here we also have to paste alternative text so which will be set to product. title let's just say our file and this is how everything looks

like and I know it will look huge and there we go we are now successfully getting all of the data but the next thing that we have to do is that we have To style there I already prepared The Styling for there if you care about those styling you can definitely go ahead and copy that from my guub repository but if you don't so you don't even have to worry about that so now let me just place it right here semi file and this is how everything looks like so as you can see first of

all we are now getting the title then the description then the price and then finally the image for each of these products right Here which is looking cool and yeah that was the entire challenge which we just solv now let's talk about about the control and uncontrol design patterns in reactjs so a control component is a form element whose value is controlled by Rea State and react handle the state of the component and updates it based on the user input through event handler like on change event handler for example so yeah that was just a

controll component and now let's talk about the uncontrolled Component uncontrolled component is a form element that maintain its own internal State and react does not directly manage or track the values instead we interact with the form element using RS to access its value when we need it so yeah that was just a quick definition of uncontrol and control component and now let's get into the code then you'll get to know what I'm talking about time to create the uncontrol form component so I'm going to Go ahead and create my components folder and inside there we're

going to be creating uncontrol so come on uncontrolled form. TSX file I'll use my RFC inside there go to the app and registered this component right here so on control form component save this file and now let's just start working on there so the first thing that I want to do use that I want to define a form I'm going to remove that from here and change that to a form this form will Have a few input Fields so I'll just write like input field with a type of text and also the class name will

be set to border name will be set to name and the placeholder will also be set to name I'm going to duplicate this line of code and and change the class names I mean like change the name to be Edge and also the placeholder to Edge so I'm going to duplicate this line of code once again change the type to text and also the name to hair color and the placeholder To hair color once again and finally I'm going to be creating a button uh by using the input feeld so I'm going to provide the

type of submit today and for the name we're going to be also providing a submit and for the placeholder is going to say submit now let me just sve my file and that's everything that we have to do but first of all we have to just scate a few RS we not going to be creating a state because then that will be a control component we Going to be creating a RS which means like this is a unol component so I'll just create first of all the name input and it's going to be equals to

the Riff I mean like the use riff uh like like so and I'm going to annotate there with the HTML come on HTML input element I'm going to also close there and the initial value will be set to now and just like there I'm going to also create another variable for the edge input it's going to be equals to the use rep once Again and here for the initial value we're going to be providing a null value and this one will be HTML input element like so I'm going to also duplicate there and change that

to the hair color input and going to be equals to this R now first of all let me just bind those refs so I'll just use like for the ref name input ref and then for the edge we're going to be providing a reference once again and here we have to specify the edge input and finally for the hair We're going to be providing a ref of hair color input so now let me just save my file and finally we have to just create a function which will be when somebody submit this form so we

want to fire this function which is a handle submit and now let's just create this function right here I'm going to be using cons handle submit and here we have to specify the event object and let's just support our HTML form element like so and I'm going to close there We're going to be only returning a white from there we don't have to do that but I want to do that okay so let's just use our event. prevent default and just uh prevent the default Behavior which is a refresh and also we have to provide

the name input field. current and Edge input field. current and the hair color current so if that's the case in this situation we just want to lock to the console like name input field. current value and I'm going to also just Duplicate there like three times we don't want to do anything else with that so I'll just choose like Ed Edge input field and then the current value from there and then from the head color input field and we want to get the value from there and here you can we now getting our input field

so now let me just go to the console and let's just refresh there I'm going to specify first of all my name and also my age is 22 and then the hair color is black and now let me just Click on this submit and it's going to giv us all of that data so here you can see we are not using any St so which means like this is a uncontrolled form or you can see this is a uncontrolled component so how in the we're going to be making a control component let's just create our

control component so I'm going to go ahead and and just create control Com or control form. TSX will be fine I'll use my RFC inside there go to the app comment this line out and Provide my controled component or form sem my file yep we are getting our form so let's just close there so the first thing that I want to use that to start from the state so I'll use like name and then set name it's going to be equals to the use State and the initial value will be empty string I'm going to

also provide the edge and then the set Edge it's going to be equals to the use St and the value will be empty string and then for the hair color and then set Hair color it's going to be equals to the US St and the come on the use State and the initial value will be empty string and then for the final one which will be errors so I'll use like set input error and then set input or you know it should be name input error name input error and then set name input error it's

going to be equals to this used and the initial value will be empty string now let me go ahead and go to the Form so I'll just change that to the form and here inside this form we are going to be defining our input field so the type will be set to text name will be set to name and the placeholder will also be set to name and the value will be coming from the name okay so I'm going to also TR the on change event handler when somebody try to type something inside there so

you want to just get this so I'll use like event. target. value I'm going to save this File file right now and for the classes we are going to be providing a border and margin all around will be set to two now underneath them let's just Define our input field for the type of number and here we're going to be also providing a name of Edge and the placeholder will also be set to Edge and the value come on the value will be set to Edge as well so when somebody try to type something inside

there we're going to be firing this function which is a Set Edge and here we have to specify the event. target. name I mean like value but we also have to convert that to a number like this or you know what we are going to be using a number Constructor and now let's just convert that to the number okay what the hell so we are going to be also providing a border and margin all around will be set to two now underneath there we have to Define our input field once again and the type will

be set to text the name will be set to Hair color and I'm going to also specify the placeholder of hair color and now here we have provide the value and the value will be hair color and also when somebody try to type something inside there we just want to fire this function which is a set hair color and the event. target. value inside there okay so for the classes is going to be set to border margin under will be set to two and finally let's just create our button which will says submit there we

go I'm Going to also render this error if we have that so what I'm going to do is that if we have the input error in that situation we only want to show this paragraph which will say like um come on name input error and here we have to provide our class names and the text will be set to totally rate of 500 now let me just save this file right now and I'm going to also use the user effect for this error so I'll use like the user P because you want to do our

side effect Inside there and for the dependency array we are going to be only providing a name and let's just check if we have the name length is less than two characters so in that situation we're going to be getting like set name input error and here we have to specify like name must be at least two characters or long and if that's not the case so we just want to write like set name input error and let's just set there to empty empty string or we can also use a trary For the so use

like length is less than two if that's the case so we just want to copy this line of code and place it right here but if that's not the case so I'm going to just only copy this line of code and it here and now let me just comment this line out like so I'm going to save this file right now and here you can see we are now getting our error so if I just write like my name the error will be now gone I'm going to also specify the age of 22 and the

hairs will Be set to Brown in this case if I click on this it's going to just refresh there so now this component is a control component and why is there because we are now controlling them by using the US T and on the other hand this component is not a control component because we are just only referencing to the value but we are not controlling that value okay so time for another challenge so in this one basically you're going to be creating only one form component but you Have to create them by using the

control and also the uncontrolled component design pattern which we just saw a few seconds ago so basically you just have to create a simple form which will have the following field like the first name last name email subscribe to a newsletter which will be a checkbox and finally a message area are which will be a text area so this is what you have to do so give it your best shot if you can do it that's completely okay then come Back and watch the solution and now let me give you my solution so what do

we have to do I'm going to go ahead and go to my SRC folder and create another folder with the name of container not container but the components there we go and inside there we have to create the come on control form. TSX and we are going to be creating the uncontrolled one in a few seconds so now let me just use my rafc go to my app component and register there right here so I'll just Register there with the name of control form and close there now let me just run my npm run Del

so I'll use like npm rund Del so this is exactly something that we want and now let's just create our form so what I'm going to do is that first of all I'm going to be defining a state for my form so I'll just use like uh form data and then set form data is going to be equals to the Ed State and the initial value I'm going to be providing this object which will have the Following properties like the first name which will be set to empty string and the last name which will be

set to empty string we're going to be also passing an email and finally the Subscribe which will be set to false and finally the message and let is provide empty string inside there now let me just close there and now we have to go ahead and go to my UI and change that to the form okay so whenever we submit this form so we are going to be passing this function which We going to be creating in a few seconds so let's just type like on submit and let's just pass our handle submit function which

we're going to be creating in a few seconds now inside there we have to first of all provide the input field which will have the type of text but we are going to be also providing the name and the name will be set to first name and we're going to be also providing the value so the initial value will be coming from the form data First name and whenever we type something inside this form so then we are going to be firing this function which is a handle change function and also the placeholder will be

set to First name this is s our file now we have to create another form field which will be for the last name I'm going to create my input field and now here let's SP our name and which will be set to a last name and here we also have to provide the value and the value will be Coming from the form data. last name and I'm going to also provide the own change event handler and let's space or handle change inside there and the placeholder will say like last name say our file and now

underneath them we have to create another input field with the type of email so I'm going to just go ahead and type the input Fe with the type of email and I'm going to also paste the name and the name will be set to email you also have to provide the value and the value Will be set to form data. email and we also have to provide the on change event handler and past the on change right there I'm going to also past the placeholder which will be set to email save my file then we

have to create a label so let's just pass our label inside there which will not take any HTML input field but we are going to be also providing our input and here the type will be set to a checkbox because now we are going to be creating our Check box for our subscribe and pass the name and the name will be set to subscribe and we also have to provide the check plag and for this check plag we have to P our form data. subscribe and we're going to be also providing the own change event

handler which will be set to the handle change like so so let's just say our file and here for this input field we're going to be also passing like this sub come on subscribe to news come on newslet and now Underneath there we have to create our text area so I'll use like text area and pass the name and the name will be set to a message and the ID will be I mean like I'm not going to be providing any IDs to this so I'll just past the value and the value will be coming

from the form data. message and we also have to provide the own change like whenever somebody types something inside this input period so we are going to be firing this function and the placeholder Will say like message like so and now inside this text area or not inside but now underneath here we're going to be creating our button and which will just say submit come on submit and also provide my type and the type will be set to submit now let me just save my file and now let me go ahead and go to the

top and let's just create our handle submit function and then we're going to be creating that other function so I'll just create my handle submit which will Take the event and we're going to be also just annotating the as anything and let's just use the event. prevent default and execute then now we can also use the console.log of form data and now let me just save my file now now finally we have to just create our handle change function now let's just create there right here so I'll just give it the name of like handle

change and uh let's just use the event and I'm going to also annotate there s any inside there let's Just restructure a few things like event. Target and here uh we are going to be restructuring the name the value and also the type and the chck and it's going to be equals to this event. Target and now finally we have to use the set form data and provide our previous data and here inside there let's our eror function first of all we have to make the clown off our existing previous data if you have there

but if you don't so then we're going to be just creating This key and value but I don't know why we getting this error oh that's because we have to provide the error right here there we go so now let me just place a key as a name and for the value we are going to be checking if the type is equal to checkbox so in this situation we going to be changing that to check but if that's not the case so we are going to be changing that value so let's just Pro our comma

and save my file and that's everything that we have To do right now so this is how our form looks like I know it is looking super awful but yeah this is how we are going to be providing our first name last name email and then the newslet and message so now let me go ahead and go to my console and now let's just refresh there first of all I'm going to provide my name which will be husan and then web dev come on web dev and I'm going to also provide like test at gmail.com

and for the newsletter I want to subscribe To that because hosan is an amazing person and cool course I guess that's going to be fine so finally let me just click on this submit button now it's going to gives us this entire data right here so this is how we going to be building our form by using the control component but now let's create that same exact same form by using the uncontrolled component so I'll just give of like uncontrolled uh form. TSX would be fine And now I'll just use my RFC inside there I'm

going to copy the name of there go to my app and comment this line out and render my component like so but we have to render that so that we also have to import it like so and yeah now we are getting our uncontrolled component let's just go there and the first thing that we have to do is that we have to Define our stats by using the US ref because this is a uncontrolled component so we would need the first Name last name in email so I'll just go ahead and write like first name

ref and it's going to be equals to the use ref not the reducer but the ref and I'm going to also just provide the initial value of null today but I'm going to also annotate there as HTML input element because we know that we are going to be using that for the HTML input so I'm going to also write like last name and then ref I'll just give it that name last name ref it's going to be Equals to that same use ref not the effect but that ref God damn it I can't even type

today and the initial value will be set to no and here here I'm going to also paste the HTML input element and that's it now we also have to create one for the email ref for the email reference and use my email ref and provide my null value inside there and now we are going to be using our HTML input element yeah I guess that's going to be fine and close them let's just Create two more so now we are going to be creating yet another one for the Subscribe ref and it's going to be

equals to that same user ref and now let's just use that HTML element or HTML input element rather and the initial value will be set to n and finally we have to create one more for the message refi it's going to be equals to the use refi and the initial value I'm going to type like html text area in this case okay so now let me just provide there And the initial value will be set to know now let me go ahead and go to my UI so let's just remove that and I'm going to

change that to the form come on what the hell did I just do as I said today I can even type so let's just use our submit and here let me just pass my handle submit right here and inside this form we going to be creating our input feed with the type of text would be fine and we're going to be also providing the reference which will be set to the first Name ref and now we also have to provide the placeholder which will select the first name I'm going to save this file right now

but I'm going to also have to duplicate there a few times so I guess that's going to be fine but we also have to provide the another value which will be set to a last name reference and we also have to change the label to the last name there we go now we also have to change the text field to the email because we're going to be providing our Email and also change that to the email refi and change that to and now let's just change the final one and not even the final one but

you know let's just remove there and change that to the label and I'm going to also remove this HTML 4 from there and create my input field right here and I guess that the type will be set to checkbox and here we also have to provide the ref for the reference and provide my subscribe ref there we go and now underneath it we are Going to be saying like subscribe to news come on news letter and that's going to be it now we have to create our text area and for this text area I'm going

to just pass the me or you know we're not going to be doing it like this way but let's just remove both of them I'm going to P my reference right here ref like so and provide my message ref and I'm going to also paste the placeholder which will be set to a message and now finally let's Just create our button which will say submit and provide my type which will be set to submit that's it for the UI but now we have to create this handle submit function here I'm going to just Define like

const uh handle submit it's going to take the event so I'm going to also annotate as a react. form event because we're going to be using there for the form and we specifically want to use that for the HTML form element and close there and now inside there what we have To do we have to prevent the default Behavior like so and now we have to Define our form data so I'll use like conform data it's going to be equals to this object and first of all let's just get the first name not the reference

but just a first name which will be coming from the first name reference current value that's going to be totally optional and get the value out of there but if you don't get there then you want to just provide the initial value of Empty string today now let me just do the same thing for the last name so let's just provide our last name reference. current value and then we have to get the value from there but if you don't have the value so then we want to set that to empty string then we have

to create the same thing for the email and then the email reference. current value and then uh we have to get the value out of there and if we don't have the value so in that situation we're Going to be only providing the empty string and if that's not the case then we are going to be also creating one for the Subscribe subscribe and you should definitely subscribe to my YouTube channel if you're watching this video right now so subscribe reference. Uh current value if you have there then you want to get the checked from

there so checked but if you don't have that then you want to set that to the false let's just change that to the false and that's Going to be it finally let's just create one more for the message which will be coming from the message reference and then the current value then the dot value but if you don't have there then you want to set there to empty string now let me just log there to the console so that we can see there so I'll just use like form data and now it will freak out

so you know let me just also create a uh what do we call it I'm going to go to the top and here let's just also Define that interface so I'll just give it the name of like form data you don't have to do that if you don't want to do that but I want to do this so I'll give it the name of like first name and that's going to be set to a string I'm going to also create a last name will be now set to string then we have the email which will

be set to a string and then we also have the Subscribe which will be set to a Boolean and then finally we have the message which will be set to a String okay so now let me go ahead and copy this form data from there and I'm going to inate my form with this newly created interface so let's just say our and this is how my form looks like so if I just type something but I'm going to have to go ahead and go to my console and I'll just P like uh you know what

someone cool and then someone cool gmail.com and I also want to subscribe to his or her newsletter and who course Huzan or something like that and now let Me just click on this submit button and now it's going to gives us all of that data right here so this is how we are going to be defining work component by using the form the control component and also the uncontrolled component okay let's talk about everyone's favorite topic which is called the H or the higher order component so what are these and why should youone to care

about there so the higher order component or H design pattern is used to reuse Component logic and it is a function that takes a component as argument and return a new component that enhances the original one these patterns allows us to share functionalities across multip component without repeating our code so that was just a quick definition of what H is and now let me give you a quick note about the H so an hocc or higher order component does not modify the original component directly but instead wraps it in a new component thereby Adding additional

Behavior or modifying its props so yeah that was just a quick note and now let me give you a quick example of how our regular component looks like and how our higher order comp component looks like so this is how a regular component looks like first of all we are going to be creating some sort of a function and the first letter will be upper case because this is a component not just a function and inside this component we are going to be Returning some sort of a jsx and this is what we call our

regular component yes of course we can write our state and all of our logic but basically this is how we are going to be creating our regular component and now let me show you how our H component will look like so I'm going to give you the most basic example of H or higher order component so here you can see this is how the code will look like first of all we are going to be creating a function and now I know a Lot of you will notice like the first letter is lower case and

why is there that's because this is not a component this is a function which take a component as a argument or as a prop whatever you want to call it and then we can do whatever we want to do with that component okay so here you can see I'm just passing a props to that n component and I'm just logging there something which I'm going to be showing you in a lot of details so without wasting any Time now let's get into the coding and then you will get to know what I'm talking about now

let's talk about the higher order component so what I'm going to do is that I'm going to create a new folder with the name of utils and I'm going to be creating my higher order component inside this utils folder you are more than welcome to create the inside the components folder but in my case I'm going to be creating the inside the Utils folder and now let's just give it the name of like print promps TSX and notice my file name does not start from the upper case it start from the lower case and why

is there I'm going to tell you why is there in a few seconds so now let me just hit enter right here and I'm going to just use like const and first of all we are going to be creating a function which will be a print props a higher order component is just basically a function which take a component as a Perimeter and then we can do whatever we want to do with that perimeter or that specific component so I'll just make it as a function like so and this function we'll take the component as

a perimeter so I'll give it the name of component and you are more than welcome to give it any name that you prefer you can give it the name of like apples banana or anything that you prefer but in my case I'm going to give it the name of component and here I'm going to otate The as any because in this case we're now providing a component inside there this is how we are going to be creating our function like first of all we have to create our function and this function will only take a

component as a perimeter and I'm going to just return my component so I'll use like props and here I'm going to just uh annotate the as any and inside this component we can do whatever you want to do inside this so I'm going to just log to the console My props because the name of my component is print props which means like we are going to be only printing or logging these props to the console and now let me just return my component which we are now taking as a perimeter and now here I'll just

use like dot dot dot come on uh dot dot dot props and now let's just close there and now this is how we are going to be creating our first higher order component now let me just export that so that we can use that In other file I'm going to go to my app component and now let's just use that right here the first thing that I want to do is that I want to import my print props and now we have to create an instance of there so I'll just use like print props and

here inside there as we all know that it's going to take a component as a perimeter so which means like we have to specify some sort of a component to there so I can just create my component like uh like so but in my Case we already have this to-do list component component if you don't have that you don't even have to worry about that you can just write your RFC inside there but you have to have some sort of a component which you will need to pass which you'll need to pass inside the Sprint

props so I'll just go ahead and just write like Todo list and import them and now the next thing that I want to do is that I want to store them some sort of a variable so I'll use like To-do list r or rapper would be fine and now I'm going to call there to-do list rapper as a component so I'll use like to-do list rapper and I'm going to just quite a few props to this so I'll just use like uh one and it's going to be set to one I'm going to just say

like two it's going to be set to I don't know hello and I'm going to also write a three and it's going to be set to some sort of object like name will be set to hose and now we are ping these props to This component and now let's just see whether it will gives us or not here you can see we now getting our to-do list I'm going to open there inside my console and now let's just refresh there and here you can see we now getting our one two prop and also our three

prop right here here and why is that that's because we're now printing those prompts by using our higher order component and that was our first higher order component let's create another higher Order component so I'll just create a new file with the name of with loading. TSX and it's going to allows us to Prov a loader okay so first of all let's just create over with loading and it's going to be taking a WRA component come on WRA component and I'm going to annotate as a react. component type and here we have to specify our

generic I'm going to also specify generic right here for the beginning so I'll just write like B generic and we're going to be extending There extends from the object so I'll just use like object and close there now let me just create the body of this function like so so now let's just say our file and from this function we are going to be returning our component so I'll just use like function and here we have to specify the name of with loading and for the perimeter uh I'm going to specify like you know let's

just remove that I'm going to provide like is loading and then dot dot dot all of the Props I'm going to also Define interface for this so let's just go to the top and Define interface for the so I'll give it the name of like with lowering props it's going to take the flag of is lowering which will be set to Boolean and it's going to also take the key and which will be set to a string and we're going to be returning any from there okay so I'm going to copy a name of there

and place it right here for this component and now inside this function We have to first of all check so if it is lowering so that situation we're going to be only returning H1 which will say lowering dot dot dot and now underneath that uh if that's not the case we are going to be just rendering our rep component it's going to take all of their prompts so let's just go our prompts come on uh prompts is a p generic and now let me just close that let me go back and this is how it

looks like right here and I'm going to also Export this so we can use it in other files so I'll use like export and now we will be able to use that in other file but before we use that I'm going to remove this to-do list component from there and I'm going to Define my component. TSX and I'll use my RFC inside there and that's going to be here let's just go ahead and go to our component and remove that I'm going to also remove both of them and this one as well and the first

thing that I want to Do is that I want to get my width loading and also my component so I'll use like my component like so and now we have to use or with loading and specify my component inside there and I'm going to store that in the variable with the name of my component with lowering and going to be equals to this function I'm going to also specify a state so I'll use the cons is loading and then set is loading it's going to be equals to the use St and the initial value will

be set To true and also for the data we're going to be using like set data it's going to equals to this use State and the initial value will be set to empty string I'm going to also use the use effect so I'll use like the use effect and we are going to be doing a side effect so I'll just provide like empty dependency array and here I'm going to be using like set time out and that's not that much important but we are going to be getting some sort of a loader so That's why

I'm providing the set time out so or set data will be set to data or f e t c h e d there we go and also our set lowering will be set to totally false and for the duration we're going to be setting there to 2 seconds and I'm going to go to the top and copy the name of my component and call that component right here so I'll just use like my component with loading and it's going to take the is loading prop and we have to set that two is loading and also

fold The data we're going to be setting there to data and close there now I'm going to also go ahead and go to my component and here we're going to be only destructuring the data and now let me just render the destructure data so I'll use like data and close the semi file and I'm going to also wrap the as any so that it will not gives us any errors and now if I just refresh that and here you can see first of all it's going to gives us a lowering for 2 seconds and then

It's going to gives us the data F so let me just WR once again so for 2 seconds we're going to be getting that louder and then it's going to gives us that data fetch so yeah that was another uh higher order component now let's Fitch some data by using our higher order component so I'll give it the name of like with do. TSX and here we are going to be fetching some sort of a data first of all we're going to be creating our function with the name of with to do and Let's just

zoom in a bit and it's going to take a component as a perimeter so I'll use that component and that's going to be any I'm going to also put to do ID to there and that's going to be set to string and inside there we're going to be defining our component so I'll just return like the props and PRS can be anything so I'll just write like any and inside there first of all we have to create our state so I'll use like cons to do and then set to do it's going to Be equals

to the Ed St and the initial value will be set to null I'm going to go back now underneath that we have to do our side effect which means like we have to fetch our data by using the use effect and here inside there I'm going to specify first of all my empty dependency array and inside this use effect we're going to be using our um if or immediately in function expression so here we have to just provide our ify and now we are going to be getting our Response from our a uh or xos

doget method now we are going to be providing our URL so I'll just use like https and Json Place holder. type I cod.com SL and we're going to be getting our data from the to-dos and here we have to render for to-do ID which we are now getting let me just save this file which we are now getting from as a perimeter so now let's just place the to-do ID right here and now finally we have to just provide our set too and the response. too or Data to be precise so now let's say save

our file and this is how we going to be fetching our data and finally underneath this use effect we're going to be returning our component and for this component let's just close them we are going to be providing first of all all of the props and then then we're going to be providing our to-do and that's going to be coming from the to-do state which we are now putting right here finally let's just export this so we can Use that in other files now let me go ahead and go to my app component and remove

every single thing from there and replace it with this app component and the first thing that I want to do is that I want to get my with low not lowering but with to do rather and the next thing that we have to do is that we have to create instance of there so with to do it's going to take a component so we are going to be passing our to-do list component oh I forgot I already did It this I'll just write like to-do list. TSX file I'm going to use my RFC inside there

and now let's just grab our to-do list component and we are going to be also providing the to-do ID so in this case I only want to fetch my data from the second ID and now we have to store them in some sort of variable so I'll use like Todo list rapper and it's going to be equals to this to-do list rapper so I'm going to copy a name of there and I'm going to remove this app from there And call my component like so and I'm going to also close this so now if I

save my file and now I'm going to also go ahead and go to my to-do list and place these coding right here once again so we have that same to-do list first of all we have our to-do interface then we have yet another interface now we are getting our to-do then we are only restructuring the ID and the title we are checking if we have the to-do so in that situation we are going to be Showing that to-do ID and also the title but if that's not the case so we are going to be providing

a loader so that's totally done and here you can see we are now getting our data so I can also change that to like I don't know maybe 24 and now if I just refresh then it's going to give us 24 and also different data so this is how we going to be using the higher order components to fetch our data so this challenge which you are now about to perform will be a bit difficult But I want you to still give it your best shot if you can do it that's completely okay then come

back and watch the solution but I want you to at least give it your best shot so what do you have to do so you have to create the higher order component to access control contr and dynamic prop injection so you'll need to implement the higher order component that does the following things so first of all the access control and then the dynamic prop Injection so what is the access control so the higher order component should accept a rolles prop which is an array of allowed roles and the higher order component should check if the

user has the required roles and if not it should display the fallback component like not authorized message or redirect that to the other page we're not going to be taking care of the redirect to other pages because now in this case we are not using any third party libraries like The Rea router Dom and something like that so you can just display a component which will select not authorized message next it should also take the dynamic prop injections so the higher order component should also be able to inject the dynamic props into the rep component

based on a certain condition so like for example based on the user Ro the higher order component should inject additional prop into a rep component like the special content or feature based on Their specific rols so what are the requirements so you need to Define the types for the components then the higher order component should be flexible to handle any type of the component with the ability to inject custom props handle default props and dynamic props injection based on the rules and implement the rules prop properly ensuring that the injected component only render for the

user with the correct role so give it your best shot And once again I have to emphasize that this is going to be a bit Advanced challenge so if you can do it that's completely okay okay I totally understand and now let's get into it so what we have to do first of all first of all we have to create a few folders then we are going to be filling those folders so I'm going to just Define first of all the types folder in which we're going to be defining our types then we have to

Define our components folder so I'll Just give it the name of like components and finally we have to Define our U tails in which we are going to be defining or creating or higher order components so that's done the first thing that we have to do is that we have to take care of the types I'm going to create a file with the name of x's a c e s and then types. TS so you don't have to give it this name but I want to give it this name and basically it should be access

control. types. TS okay so now Inside there I'm going to be defining a few types so I'll just Define first of all the interface for the X's control props and inside there it's going to take the rules and we're going to be annotating there by a string of array and then it's going to also take the F back component so I'll just P like file back component and here let's space for react. component types component types there we go and we should get the react from the react J so that it will not Gives us

any error so let's just get the react from the react J and that's all done now underneath we also have to provide or injected props so injected i n j e c t e d injected props that's going to be totally optional here let's just pass or uh key to the and key will be set to totally string and it should should accept anything so that's to done we also have to export this so that we can use that in other file so now that's to done the next thing that We have to do is

that we have to create an interface for the injected props so I'll just Define my interface and by the way we also have to export this so we can use the in other file and I'm going to give it the name of like injected injected props and inside there let's just put our username totally optional and make the as a string user permissions yeah user permission and we also have to inate the has a string of array and finally we have to create the Final interface for one for the WRA component props okay and we

should extend the functionality from the injected props and now inside there we have to provide the additional one which will be set to a message and provide my string inside there so this is what we have to do right now now we are also exporting there so that we can use that in other files so that's all done now let me just close that now we have to Define our higher order component so to Do that we are going to be creating a new file with the name of withd because we now creating our higher

order function or components and I'm going to give it the name of like XCS control. TSX yeah I guess that's going to be fine let's just go back and the first thing that we have to do is that we have to define the role by that specific role we're going to be providing our functionality like either authorized or not authorized so I'll Just give with the name of like uh current user role and it's going to be set to the admin initially you want to check the function it of the admin and now we are

going to be creating our higher order components so use like export because we're going to be using the in other files now we have to create like with x's uh control yeah I guess that's going to be fine and we also have to provide our generic which we're going to be extending which will extend from The object okay so let's space our object inside there and close there and inside there what do we have to do we have to pass our perameters but we're going to be doing that in a few second but now let

me just create my arrow function right here so so first of all we going to be providing a WRA component so let's just write like w component and I'm going to be passing that from the component type and provide my generic right here and the injected prompt which We going to be getting uh from our types file so injected prompts there we go so let's just import that and use that right here and we also have to import the component type from the react JS and this is what we have to do right now now

let me go ahead and go to my higher order component and start working on there so we are going to be returning come on let's just return the props first of all prop will take the generic ofy and also the exis control which we Just Define inside that other file now let me just pass my arrow function right here so now inside there we're going to be providing our uh props right here so we're going to be destructuring a lot of things from our props so let's just destructure that things I'm going to go ahead

and destructure the row rows come on that's going to be the first thing and we also have to get the fallback component and let's just annotate to the fallback which we're going to be Creating in a few seconds so this should be in lower case b and I'm going to also provide my injected props and the initial value I'm going to specify this object to there and finally we have to just get the rest of the props so I'll just use like rest props and go back s my file and this is how everything looks

like right here now we have to check whether the user is available or not or has the AIS or not so in that situation we're going to be getting that roles and We have to use the JavaScript includes method on there and then we have to pass our current R which is now initially set to this admin right here so once we do that I'm going to also store the inside the variable so I'll just give it the name of like has X and that's going to be here so let's just say our file and

now if the user does not have access so has access is not the case in this situation we're going to be returning or F back component which we're going to be Creating in a few seconds so let's just do that also so now we have to merge our props so in this situation we're going to be using like merge props and let's just pass our object first of all we have to get the rest of the props and we also have to get the injected props so then it's going to allows us to merge all

of them now underneath that we have to just return our WRA component and also let's just close it like this I'm going to be passing uh first of all let Me just even make the clone of there so I'm going to pass my merge prompts and as a generic p and and our on injected props so let's just space the same my file so this is how we going to be defining our uh what do we call it our higher order component and now we have to use that inside our app so now let me

just go ahead and go to my app and the first thing that we have to do is that we have to you want to import them so that we can use that so I'll just go Ahead and import the with access control and now I'm going to go ahead and also Define two other components inside this components folder one will be for the authorized user and another one will be for for not authorized user so I'll just create a file with the name of first of all not authorized authorized do TSX and we're not going

to be doing anything special inside there but I'll just use my rafc and here we just have to write like you are come on you are not Authorize a h o r a z e d to view this content and now let me just sell my file go back and that's only done now we also have to go ahead and just create another component so that we can see something on the screen so I'll just uh create like my component TSX I guess that's going to be fine and I'll use my RFC inside there and

here it's going to take a few props so I'm going to have to destructure them I'm going to just destructure the message the user uh name And also the user permission user permission and that's going to be it but we also have to annotate that with our rap component which we already defined in inside our types so so we are now talking about this R component props and which we are already providing right here here so now inside there let me just remove that from here and provide my H1 and render my message first of

all so I'll use like message m e s a g e I'm going to also provide my paragraph which Will say like welcome and then that specific username and also the paragraph and it will say like your permission and then here let's just pass for your permission what the hell was that your permission it should be optional like if you get there then we're going to be joining there with this comma and now let me just save my file and your permission your user permission there we go and it is not defined because we are

not even providing the inside your app Component so now let's just use that I'm going to go ahead and go to the top and here let's just use like with xess control and here I'm going to be passing my own component which we just defined okay and now here let me just store the inside the variable with the name of like I don't know maybe my component with Access Control I know the name is super long but yeah it is what it is so now here inside my app close them I'm going to be calling

that component so I'll just call like my component with the access user control or access control I know the spelling is super long so I'm going to also close there or execute that like so and here we have to first of all past the roles and the rules can be the admin and also oh there that's because we have to provide the curly braces and now we have to specify our R so I'll just give the name of like admin and also the manager okay and now outside from there we're going to be Also creating

our fallback component or providing our fallback component which will be set to like not authorized and now let's just say our file and also I'm going to provide some sort of a message so let's just say like hello and then admin or something like that and also the injected props as well so here inside they we injecting these prompts like username it's going to take like my own name husan webd and I'm going to also has the user permission uh per what Was that user permission so let's just copy that let's it right here and

I'll just say like uh I don't know view view passwords and also view come on view the settings or something like that now let me just save my file and while in the world we are providing a comma there let's just save our file now let me just uh refresh there so here you can see it's going to give us like hello admin and also welcome my name and now finally we have the permission to see the Passwords and also the settings we can also change that to like I don't know maybe uh dashboard or

something like this I'll just write like dashboard save this file so we can also see the dashboard and also the settings so that's to done but you know what instead of just providing this admin and user I mean like admin and manager I'm going to duplicate and comment this line out and change that to the user and also change this one to the guest or something like That if I sa my file and now it's going to gives us like you are not authorized to view this content which is our fallback component which you can

see right here which we are also providing uh as a FB component to or higher order component so yeah that was it about the higher order component Challenge and let's just get into the next one now let's talk about the custom hooks so custom hooks are a powerful feature that allows us to encapsulate and reuse logic Across component they help to extract component logic into reusable functions making our code cleaner more modular and and easier to maintain so here is a code without using a custom hook so here inside there first of all we are

just creating some sort of a step for storing our data then we are using a use effect to fetch our data and finally we are now rendering our data but now imagine for a second that you have a lot of component and you have to fish your data in all of That component so first of all you're going to be creating your state then you're going to be using that use effect and all of that kind of logic and then finally you're going to be rendering your data so to encapsulate all of that logic into

a separate function we are going to be using a custom hook for there and here you can see this is how we are going to be using there by just passing our URL and then finally we have to render our content and that's not Only it we are going to be learning a lot of stuff anytime you are working with the hooks first of all you have to provide the use and then you can give it any name that you prefer you can give it the name of like use hook name use your name or

anything that you prefer but first of all you have to specify the use keyword in the beginning of the custom hook name welcome to one of my favorite Topic in this entire course which is called the custom hook I already Discussed this topic in the first part of this course but if you didn't watch that section well you don't have to worry about it I got you baby I got you we already discuss what in the world is a custom Hook is but now we are going to be building a lot of stuff by using

this custom hook so first of all let me just go ahead and Define my components folder and inside there we are going to be starting from without custom hook. TSX case I'll just use my rafc inside there Go to my app and register there right in here so without the custom hook and yep we are now getting there which means like everything is working the way we exp him to work first of all we are going to be fetching our data without using the custom hog and then we going to be refactoring that code to

use the custom hog so what I'm going to do is that still I'm going to be using that Json Place holder. type I code and I'm going to just face forward I'm not going To be explaining all of the data fetching logic and something like that so I'll just write like data and then set data it's going to be equals to the US St and the initial value will be no and also I'm going to Define interface for this I'll use like interface of to do and inside they let's just s our ID of number

and the title will be set to a string so my us will either take the to-do as array or null value like this now let me just save my file and go back And here let's just provide where use effect and inside there I'm going to provide my empty array and now here here let's just put our fetch method and here we're going to be using our https Json placeholder come on Json placeholder typei code.com and now let's just use our then method and let's just provide our response if for response if you have the

response we want to convert that to Json and I'm going to also use the then method once Again and provide my data inside there and I'm going to also annotate there but first of all let's just use our set data and provide our data inside there I'll just be using my too and just annotate there with this to-do now let me just remove that and here I'm going to be checking if we have the data so in this situation then we want to iterate over through that data so I'll just use like the item here

and inside them I'm going to be returning a paragraph so let's Just return a paragraph and I'm going to just return like item. tile and I'm going to also spfy the key which will be set to item. ID now let me just sa my file check this out so I guess I made some sort of a mistake and yes I guess I did fa to fish the data and I made a typo inside there so I just fix that and yeah we are now getting all of our data so now let's talk about how we

are going to be extracting all of the data fetching logic into our custom hook and Then we are going to be only rendering the UI okay so to do that I'm going to go ahead and first of all Define another folder with the name of hooks you don't have to do that but I want to do that and I'm going to Define my use fetch. TSX now inside there let's just Define find our custom hook and you guys already know that if you are creating our custom hook so we have to specify the use for

the first name then we can give it any name that we prefer so in my Case I'm going to only specify like use fet and now we have to set that to the type generic and let's just close the like not text but just a type there we go and it's going also take the URL and the URL will be set to string and we're going to be returning the type or the null value out of there okay so now in this situation we're going to be just def with data and then set data as

a state and it's going to be equals to the U State and the initial value will be no And I'm going to also provide my generic type or null value to there and I'm going to close there like so I'm going to go back so you guys can see everything a bit better and now let me use my use effect because we're going to be fetching our data by using the use effect and I'm going to also provide my URL as a perimeter I mean like dependency array to be precise now inside there I'll just

use like PCH data and it's going to be equals to that Asynchronous function once again again and now let's just use our try and catch block so if we have some sort of error so in that situation we are going to be logging that error to the console so I'll use like console. error and here I'll just write like fetch error or fetching error or something like that and now I'm going to specify my error inside there I'm going to be also using my set data and the initial value will be set to now and

for the tri block we Are going to be first of all getting the response all use like response it's going to be set to a and then petch and here we have to spe specify that URL which we're now taking as a perimeter for this use petch and I'm going to specify that right here and based on that specific URL we are going to be fetching our data so let's just close that and I'm going to also check if we don't have any response. okay so right like response. okay so if you don't have That

so in that situation uh we are going to be only throwing this new error which will say like network was not okay and now underneath there let's just get a result can be set to a and then response. Json and we are going to be getting there as a type generic okay and also we have to use our set data and provide my result inside there so this is how we are going to be getting our data I'm going to copy a name of there and now let's just execute this function Right here so fetch

our data and this is how we are going to be fetching our data from this hook we are going to be only returning our data out of there so I'll just use like return and data now let me just save my file and finally we have to export there so we can use it in other file so I'll use like export default and then I use PCH I'm going to save my file right now and I'm going to Define another component with the name of with custom hook. TSX okay so now in this Case I'm

going to go to the without one I'm going to copy every single thing from there and place it right here inside the with custom hook. TSX file and I'm going to just remove basically all of them and here we have to just use our use petch function petch hook to be precise which we just created and now here for the U URL we are going to be providing that same URL so I'll just past it right here which is that Json placeholder typei code.com For/ and now from there we are going to be only restructuring

our data so I'll use like data and now let's just close there like so so this is how we are going to be fetching our data by using this custom hook but I'm going to also provide this to do of array and close that so that errors are now successfully gone I'm going to also remove that line of code and still once again we are getting all of that data right here and we can do whatever we want to do with That data so instead of providing like all of that logic for every single component

we don't have to do that no more we can use our use patch function and we just have to specify our URL and it's going to fetch our data so here you can see this is how we are going to be doing there first of all we just creating some sort of a state to store our data then we are using a use effect for side effect and now here you can see we're just creating as synchronous Function try and catch block and for the triy block we're using the fetch but you can also use

exus Library you can totally do that if you wanted to but I am only using the Fetch and now we are specifying that URL which we're now providing and which we are using right here so we are now providing that URL and based on that URL is going to give us that Json response and then finally we are just pushing the two our states so that our state will hold all of our Data and finally we are just returning our data and this is how we are using the inside our component like s and finally

we have to render that to our UI and that's done I already stopped recording this video but then I realized that I forgot to include something called the flags so now let me just add the first of all we are going to be adding the lowering so I'll just WR God damn it lowering and then set lowering and it's Going to be equals to the use State and initial value will be set to true in this case and I'm going to also annotate there as a Boolean value just like that I'm going to also provide

the error and then set error it's going to be equals to the use St value and the initial value will be set to no and I'm going to also annotate there as any like so I'm going to write like set loading and I'm going to set there to true and also for the catch block we're going to be Setting the error to error and also I'm going to add the finally so when it is finally in this situation we are going to be setting the lowering to totally false and now we are going to be

also restructuring the loading so I'll just write like loading and also the error as well now let me go ahead and go to my component which is a with custom hook and now let me just restructure there I'll use like Ling and also the error and here what I want to do is that I Want to write like first of all if lowering in this situation we are going to be returning a paragraph of lowering so I'll just write like lowering dot dot dot and also underneath there we're going to be writing like if we

got some sort of error so in this situation we're going to be returning the error fetching uh to do and here let me just render that error. message right here so now if I just refresh there you will not able to see that lowering because we already Rendered that data but here you get the idea so now let's create a custom hook for our form and form validation but first of all we're going to be creating our form without using the custom hook then we are going to be refactoring that code to use the custom

hook so what I'm going to do is that I'm going to go ahead and Define my components folder so I'll just Define them inside that we're going to be creating like my form. TSX or something like that and now let's Just start working on it so I'll just SA this file go to my app and and register there right here so I'll use like my form and close there the first thing that I want to do is that I want to create a controlled form so what I'm going to do is that I'm going to

create a name come on let's just write name and set name it's going to be equals to the use State and the initial value will be set to empty string I'm going to also provide the email so I'll just write Like um if I can type it today so set email and also use stand and the initial value will be empty string and finally for the submitted so I'll use like submitted and then set submitted like so it's going to be equals to the use St and the initial value will be set to false in

this case now let me go ahead and go to my form and start working on there but first of all we are going to be checking if we have the submitted form in this situation we are going to Be showing one UI but if that's not the case then we are going to be showing another UI so you know what let's just write a paragraph or H2 to be precise and it's going to say like thank you for uh sub meting your information like so but if that's not the case we are going to be

creating our form like this I'm not going to be providing any action today but now inside this form we're going to be creating our div and inside this div let me just provide a label We're not going to be providing any HTML 4 today and this label will say like name and I'm going to also provide my input field and here for this input field the type will be set to text and the value will be coming from that name State and when somebody try to type something inside this we are going to use like

set name and provide my event. target. value inside there and it should be required so now let me just save my file and this going to be it for this Div so now let me just collapse them and now let's just create another div for the email so I'll just create a div and inside this div let's just provide with level not HTML 4 inside this level I'll just say like email and also my input field with the type of email and here we are going to be passing a value and the value will be

set to email and when somebody try to type something inside there then we're going to be using the set email function provide my event. Target. value and also required like so now underneath this D let me just hide there underneath this D we are going to be creating our button and I'll just select submit and here the type will be also set to totally submit that's totally done but now let me also take care of the submitting so here on this form I'm going to attach my own submit event handler and when somebody clicks on

there or submit there you're going to be firing this handle submit function so I'm going to copy a name of there and now let's just create that right here so I'll use the ions handle submit it's going to take the event and I'm going to otate that with the react come on our react. form event like so and here we just have to pass over event. prevent default and close them I'm going to also use the set submitted value and here we have to set to true and I'm going to also log to the console

like submitted and I'll just say like name And also the email now let me just save my file and that's totally done now let me check this out but first of all we also have to provide what do we call it our border so I'll just attach my border there and also here so let's just add my class name is going to be set to a border and yep we are now getting this one let me just zoom in a bit we are now getting a border for this one and also for that one I'm

not going to be worrying about the what do we call it The styling because we don't have to worry about the styling right now if you care about the styling you can definitely go ahead and go to my the first video of this course which is I guess about 13 hours of long content so I'll just write like something for the name I'm going to specify my own name and for the email I'll just say like test gmail.com and now if I click on this submit and here you can see what are we getting we

are now getting our Submitted form and also we are getting the email and also the name which means like everything is working the way we expain to work and also we are now getting this thank you message so that's cool and everything but I want you to imagine that you have a lot of form inside your app appliation so how in the audio are going to be handling there well to do that we can just create all of that logic inside that component or we can be a bit better developers and we Can create our

custom hooks inside this folder so I'll just go ahead and just create my use form. TSS and not from form use come on use f o RM there we go and now let's just start working on there so the first thing that I want to do is that I want to create my use form it's going to take the initial value so I'll just write like in initial value or values rather and here we have to specify the key and the key will be set to string and also we are going to be Returning a

string out of there so now inside there what do we have to do and it should be inside so now let me just cut there and place it right here so now inside there what we have to do first of all we have to get the values and also the submitted data so I'll just use like values and set values and it's going to be equals to the use State and the initial value which we are going to be grabbing from this form so now let me just place it right here so that's going To

be my initial value let me just go back I'm going to also provide the submitted Flex I'll use like submitted and also set submitted like so and it's going to be equals to the use State and the initial value will be set to false now let's just take care of the handle change like when somebody try to type or change something inside the input field so for there we are going to be firing this function which is a handle change and here we can do a lot sort of stuff But first of all let me

just provide my event and it's going to be coming from the react first of all let's just get from the react and then change event and we are going to be also providing the HTML input element and now let me just an there and now inside there we're going to be getting a few things from the event. Target and we are going to be getting first of all the name and also the value from this event. Target and now let me just set the to my values so I'll just use like set values and provide

my previous St and here I'm going to just P like dot dot dot first of all we have to make a clone for previous St and then for the key we are going to be passing the name and for the value we are going to be passing this actual value now then stly done but now we also have to take care of the submitting of the form when somebody try to submit our form so in that situation we are going to be firing this function Which is a handle submit and it's going to be equals

to the call back and here for this call back we have to just specify our wi we're going to be returning our event and that's going to be coming from the react. form event like so okay now inside there we're going to be first of all preventing the default behavior and then we're going to be using set submitted value and set there to false okay which we already created right here so we have a Submitted and set submitted so now we are setting that to false and then we are going to be passing this call

back function and we have to execute there now finally we have to just render all of that values and also the handle change and also the handle submit and finally the submitted value as well so then stly done finally we have to just export this so we can use the in other files so I'll use like export default come on default and then use form and Close there so then stly done now let me just close this file and now we have to use the inside our component so now let me just go ahead and

go to my component and I'm going to remove every single thing from there so what I'm going to do is that I'm going to grab my use form and inside this use form we going to be providing the initial value of name which will be set to empty string and also for the email which will be also set to empty string so now from there We're going to destructuring a few things so what do we have to destructure let me just destructure a few things like the values the handle change and also the handle submit

and the submit it out of there so now let me just save my file and when somebody try to submit there so in that situation we going to be using like onsubmit and here I'll just call this function which will just say like I don't know cons. log of submited and here we also have to Specify all of that values inside there now let me just go ahead and go to my handle submit I mean like on submit and here we have to specify our handle submit and on submit which we just created right here

that's done and for this value I'm going to first of all provide my values. name come on not valuse but just a values. name and for the set name or you know what we're not going to be providing any of that so I'll just remove the and change there to A handle change handle change like so that's totally done I'm going to go to the bottom once again and change that to the values. email I'm going to also remove there and provide my handle change inside there and I guess that's going to be done so

now let me just save my file and I'm going to also remove that from there and let me just try there once again by using our custom hook so I'll just remove there and provide my name Which is hosan oh my God I can't even type something inside there okay so it took me a lot of time but finally I realized that I forgot to include the names God damn it so let's just provide the name and the name will be set to name for the first one and for the second one the name will

be set to email now let me just save my file and now I can type whatever I want to type right here so I'll just write my name husan and test Gmail.com and now if I click on there and here you can see it's going to gives us their thank you message and also we are now getting our data right here and this all thanks to uh this use form hook to be precise now we are going to be creating a custom hook for reading and writing data to the local storage but first of all

we going to be creating our component without using the custom hook and we are going to be refactoring that code to use the custom hook so what I'm Going to do is that I'm going to create my components folder components and inside there let's just create our theme toggle. DSX and I'm going to be using my rafc inside there let's just go ahead and go to our app and register that component right here just like that so toggle theme was there a toggle theme oh theme toggle there we go and now let me just close

there check this out so yeah we are now getting there so let's just refresh there and now let's start Working on there so the first thing that I want to do is that I want to create my state so I'll use like theme and then set theme it's going to be equals to the use St and here we have to specify the initial value of light to there and I'm going to also annotate as a string and that's going to be done so now the next thing that I want to do is that I want

to use my use effect for the side effect and here for the dependency array we are not going to be providing nothing today So now let's just get the data from the local storage so what I'm going to do is that I'm going to be using my windows. Lo local storage. get item so let's just write a get item itm there we go and I'm going to just provide a theme to there I'm going to also store in some sort of variable like store theme and it's going to be equals to that data now the

next thing that we have to do is that we have to check if we have the store theme in that situation we're going to be using The set theme and we have to password json. parts inside there and here we're going to be passing our store theme inside there just like so the next thing that we have to do is we have to go to our UI and now let's just um first of all write or H1 let me just write H1 and here I'm going to say like current theme and render my theme inside

there and I'm going to also create a button which will allows us to toggle our theme okay so I'm going to also provide the on click When Handler when somebody triy to type something ins I mean like when somebody tried to click on this button so we are going to be finding this toggle theme function now let's just create that right here I'm going to go ahead and Define my toggle theme and inside there first of all this is get word theme so I'll use like new theme and it's going to be equals to this

theme and let's just write if that is equal to light so in that situation We're going to be changing there to dark but if that's not the case we are going to be setting that to light so that's done now let me just push that to my theme St so I'll use like new theme and also let me just push that to the local storage so I'm going to be using like windows. local storage and then the set item this just use our set item inside there we're going to be passing a theme to there

and then Json come on json. par I mean like not part but stringify and Here we have to pass a new theme two there so that's also done I'm going to also go ahead and just provide a bit of styling today so I'll just use like style and for this style I'm going to provide a bit of uh background color first of all so I'll use like background I mean like just background would be fine and that's going to be set to if we have the theme equals to the light okay so if that's the

case so in this situation we are going to be setting There to totally white but if that's not the case we are going to be setting there to three 3 3 that's done I'm going to also provide the color so for the text color if the theme is equal to light so in that situation what we have to do we have to set that to totally black but if that's not the case we have to set that to totally white I'm going to also provide a bit of padding to this so padding will be set

to 20 pixel all around I'm going to provide a comma There and also there and now let me just save my file and that's tot done now let me go ahead and click on there so here you can see it's going to giv us the current theme and now that is set to totally dark and if I click on there once again so it's going to make it as a light so you know let me just also go ahead and go to my inspect element and I'm going to also go to the application and now

let me just show you there here you can see inside this local storage What do we have oh my God if I can get that today so what do we have we have our theme and which is now currently set to light I'm going to delete all of them and now as soon as I click on this toggle theme here you can see our theme is now set to dark and now if I just refresh my page here you can see still we are getting this dark theme right here but if I click on there

once again so it's going to change there to light so this is how we are going to be Setting and also getting the data from our local storage without using our custom hook so now let me just refactor all of that code to use our custom hook so that we can use that again and again and now let me just go ahead and create my hooks folder and inside there going to be defining our use local storage. DSX file or you can also just set there to TS if you wanted to so I'm going to

set there to TS and now let's just start working on there so the first thing that I want to do is I want to create my use local storage is t o r a g e it's going to take that type generic and I'm going to also provide a key and the key will be set to string and I'm going to also provide the initial value and initial value will be set to their generic so I'm going to have to provide a comma there and now we're going to be just creating our function right here

so inside there the first thing that we have to do is that we have to create our Stored value so I'll just go ahead and just create my store now let's use a set store value inside the going to be equals to or Us St and the initial value will be set to type generic so now inside there we're going to be passing our call function and inside there let's just use our try and catch block for the catch block we're going to be using console. error and here we have to render our error so

error reading local storage key and we also have to render Our key inside there come on just a key and now let me just close there and now outside from there we have have to render or error we can also do that inside but yeah you get the idea I'm going to also return the initial value and now for the tri block what we have to do we have to first of all get the item from our local storage so I'm going to be using like window. local storage and then get item and what are

we getting we are now getting that key Which we are going to be passing for or use local storage so now let me just store them in some sort of a variable Sol use like IR can be equals to this window. local storage and so on and so forth and now let me just return item if that is the case if we have the item so then we have to use json. parts and we have to specify our item inside there but if that's not the case so we have to set that to the initial

value that's also done I'm going to collapse that and Now the next thing that we have to do is that we have to set the value so this is how we going to be getting the value but now we also have to set the value so I'll just use like cons uh set value this going to be equals to that value and here we have to specify our generic or our value in inside this all use like value it's going to be also set to their generic and here we're going to be returning a generic

function from there so now inside there let's just use our Try and catch block and for the catch block uh we are going to be using console. error and here we have to specify like error setting local come on local storage key so let's just space our key inside there and that key will be set to this specific key and I'm going to also render my error inside there just like so we're going to be using like value to store and here is going to be equals to Value the instance of so I'll use like

instance of function If that is the case so in this situation we are going to be using like value and place our stored value inside there but if that's not the case so we are going to be setting there to our initial value just like this also we have to get this store value and we have to set that to our local I mean like to our state I'll use like set store value and let's just space our value to store inside there I'm going to also provide the window. local storage set item and here

inside There let space our key and json. pass json. string IFI rather and we're going to be passing like value to store inside there that's also done I'm going to collapse there and now the next thing that we have to do is that we have to use our use effect once again so we use like use effect now it's going to allows us to change our data from our local storage so I'm going to just go ahead and use my handle storage change and it's going to be equals to this function And inside there let's

just get our item and it's going to be equals to the windows local storage. get item and here we have to specify our key inside there and if we have that item like if we get that item so we are going to be using like set stored value and here we have to use our json. par and pass our item inside there but if that's not the case we're going to be using like set store value come on set store value and we are going to be placing our initial value to There that's done now

underneath this function what we have to do we have to create our we have to attach our event listener on our storage so we just use like window. add listener from our JavaScript and now we are able to do that because we are now inside the use effect so that's why we would be able to provide your effect or our side effect to be precise so I'll just get the storage s r a g and I'm going to past that function which is a handle store Change which we just Define right here so that's totally

done now finally I'm going to also do a bit of cleanup so I'll just return like this clean of function and here we have to pass our window. remove event listener and we have to provide our storage once again then we're going to be using like handle storage change then only done and now from this function for the dependency array we are going to be passing the key and also the initial value so that's Totally done I'm going to hide there now we have to export all of the data which we just import which we

just created so I'll just use like return and here we have to specify our stored value and set value is a constant hey that's totally done finally we have to export this so we can use it in other file file so I'm going to be using like export default and then use local storage and now let me just save my file and then stor done let me expand that also expand this one And also expand that one so that's all done so now let's just use the inside Word file now let me go ahead and

go to my file and I'm going to basically remove every single thing from there so let's just remove all of them say byebye to all of them and I'm going to be using my used local storage and here we have to specify first of all the theme for the key and we also have to provide the initial value for this so for the initial value I'm going to specify light As initial value now we are going to be destructuring the theme and also the set theme out of there so I'll use like set theme and

it's going to be equals to this use local storage now let's just create our function which will allows us toggle or theme so I'll use like toggle theme and why the hell did I just remove the my bad so now I'm going to be using my set theme and here we have to specify first of all my previous video and for this previous video If there is set to The light in this situation we going to be setting there to dark if that's not the case we are going to be setting there to light once

again I'm going to remove there so now let me just try there once again so let's just refresh there click on the toggle and I'm going to also go ahead and go to my use local storage and remove that from there and now let me just click on there once again so we are now getting a dark value if I click on there once again so we are Now getting a light value right here yeah that's amazing okay so yeah we also traded a toggle theme or use local storage whatever you want to call it

time to create a custom hook for the model but first of all we're going to be creating our component without using the custom hook then we will refactor that code to use our custom hook so let me just go ahead and create my components folder and I'll just Define my model. TSX inside there I'm going to be using My rafc and go to my app and registered there right in here so I'll use my not F but my model component so let's just use our model and close there now let me go ahead and go

to this model and first of all it's going to take a few props so is open and then on close so it's going to take these props I'm going to go to the top and let's just create an interface for there I'm going to P my Model come on model props like so and I'm going to say like is open it's going to be set to A Boolean and on close it's going to be set to this function and I'm going to say like white I'm going to also annotate my component so model props and

now the next thing that we have to do is that we have to check if not is open so in that situation we are going to be returning only null that's done now let me go ahead and go to my model and provide a bit of styling today so I'll just use like class name of to fix the top will be set to zero the left will Also be set to zero the right will be set to zero bottom totally zero flex and justify will be set to tot the center and items will also be

set to toly Center and now let me just save my file I'm going to also provide a styling and for this styling I'll just say select background will be set to this rgba come on rgba and the red value will be zero green value will be zero black value will be zero and the alpha transparency will be set to 0.5 and now let me just Save my file so now inside this D what do we have to do we have to create a d with the class of background holy white and I'm going to also

specify padding all around of 20 pixel and now let me just close that and inside this D let's just our H2 model title and now underneath there let's just create our or par gra which will say like this is a model content and now I'm going to also put a button and it's going to say like close and when somebody try to click on There we're going to be firing this function which is on close and now let me just save there that's to done now I'm going to also go to my app and create

a few things right here so first of all we are going to be creating like is model open and then set is model open is going to be equals to the US St and the initial value will set to totally false I'm going to also create two functions so I'll just say like uh open model it's going to be set to this Function it's going to say like set is model open and it's going to set that true I'm going to duplicate that and change that to false and change the function name to close model

so it's going to allows us to close our model and now here I'll just say like H1 my amazing model and now underneath there button which will just open our model and here I'm going to also attach the on click V Handler and when somebody clicks on this we are going to be firing this On model and here for this model we are going to be passing like is open from and here we have to just set that to is model open and also on the close here we have to pass our close model function

now let me just save my file and let's just refresh there and here you can see we're now getting our open model button and now if I click on there it's going to gives us that model right here and now if I click on this close so it's going to also close there so you get the Idea but now the question is how in the world we are going to be extracting all of that logic to create a separate C hook for there so you know let's just start working on there I'm going to go

ahead and Define my hooks folder and inside there I'm going to be creating my use one use model. TS file now let's just start working on there so I'll just use first of all my use model and here it's going to be set to this function and first of all we going to be creating A state for is open and then set is open it's going to be equals to the use St and the initial value will be set to false and now underneath them we have to create their two functions so now let me

just go ahead and uh I'm going to copy both of them and place it right here instead of providing this model open I'm going to copy them and place them right here both of these areas I'm going to save my file right now and finally we have to just return those values so I'll Just return like his open and also the open model and close model like so now let me just save my file and finally we have to export this so we can use that right here so we have a use model and now

let me just save my file so now let's just use this so I'm going to go ahead and go go to my app and remove all of that stuff from here and I'm going to be using my used model and I'm going to restructure a few things like uh is open and also the open model and the close Model like so it's going to be coming from this use model and now I'm going to just past it right here so instead of providing the is model open I'm going to provide like is open right here

and I guess the rest of them will be totally fine so I'm going to just remove there save my file and now if I just refresh there and click on the open mode it's going to still open my model right here I can also click on there so it's going to make it disappear so yeah that was a Simple hook which I want to show you okay so time for the custom hook challenge so in this one you're going to be building five custom hooks by yourself and I am not helping you in this one

you are totally on your own and do whatever the hell you want to do I'm just kidding so you know what let me just explain the instruction and then we're going to be creating all of their hooks one by one so the first thing that we have to do is that we have to create A custom hook for the local storage which allows us to store our data inside the local storage then we have to create the use fetch which allows us to fetch our data and then we can render that data inside our UI

and then we can create our use form which for the form validation and handling and then we have the used debounce and this is useful for the input fields which call the API whenever we change something inside those input field inside the forms and Then we have the use previous one and basically it's allows us to use the previous value so give to your best shot if you can do it that's completely okay then come back and watch the solution and here is my solution so I'm going to just Define my hooks folder and inside

there we're going to be creating our custom hooks so let's start from the first one which is called the use form so I'll just use like use form. TS and now inside there let's just Define our Custom hook I'm going to go ahead and Define my use form and here it's going to take the generic of T and we also have to provide the initial value which we are going to be doing there but first of all let's just create the body of there so I'll just P like the initial value and I'm going to

also come on initial value and I'm going to v l there we go and I'm going to also inate the as a t and now inside there let's just Define our use St so I'll just use like The U St and the initial value will be that initial value which we are now taking as a perimeter and I'm going to also type as a generic so we're going to be getting the values so let's just write like values and then set values out of the I'm going to save this file right now and here you

have to create a function which allows us to handle the input change so I'll just create a function with the name of handle uh change and it's going to take the event And I'm going to also annotate as a react first of all let's just even get there then we have a change event and I'm going to be using there on the HTML input element and now let's just annotate our component like so and inside there we are going to be using our set values and P our object which will take all the values like

the copy of the initial values and then we can use the event. target. name and then for the value we can use the event. target. Value from there okay so let's just save this file go back and now the next thing that we have to do is that we have to create a function which allows us to submit our form okay so let's just use like const and then handle submit and it's going to be equals to uh this event object and we have to past the react form come on F RM form event from

the reactjs and now we can just say like event. prevent default and execute there and we can also just log to the console This data and I guess that's going to be it and now underneath there we have to return all of that data so that we can use that in other file so I'll use like values and then handle change and handle submit I'm going to save this file right now handle submit it it should be with one t there we go and now finally we have to export this I'll use like export default

and then use form I'm going to save this file right now close this file to my app and here inside there let's Just use there so the first thing that I want to use that I want to use my use form okay so let's just import there and now we are going to be placing the initial value of username which will be set to empty string I'm going to also past the email and which will be also set to empty string and now let's just store the inside or you know let's just destructure a few

values from there so let's just destructure the values and also the handle change and also the Handle submit I'm going to save this file right now go back and now here I'm going to just remove the and provide my class names and I'm going to just say like pairing for all around will be set to four and inside this div I'm going to just write H1 which will say like custom hooks in action or something like that and now underneath that we going to be creating a div which will have the class of margin for

the bottom of four and inside this da we are going to be Defining where H2 which will have the classes of text um extra large and form handling example there we go say our file underneath that we have to create our form and now we are not going to be providing any action today but we are going to be providing the on submit and whenever we want to submit this so in this situation we're going to be firing this function which is a handle submit which we already defined and now inside this form we have

to Define our a few Input Fields so I'll just provide the type of text I'm going to also provide the class names and let's just proide our border pairing all around of two Mar for a bottom of two and the name will be set to username and also the value will be coming from the values do username I'm going to save this file right now and whenever we want to change this we want to F this handle change function and here we also want to provide the placeholder which will say like username I'm going to

save this file right now and can we even CL no we can't so I guess I'm going to have to duplicate there one more time so let's just duplicate there change not going to be change yeah we are going to be changing that to email and also the name to the email and change the values to the email and I guess that's going to be fine but we also have to change the placeholder to email and then we would have our button which allows us to submit our Form so I'll just use like button and

submit come on submit and here inside there I'm going to P the type of submit to there and for the class name I'm going to past the border and ping all around of two let me just refresh there and this is how our form looks like and I can just type my username like husan webd and then husan or not h test gmail.com and if I click on there it's going to gives us the value inside this console log which is an object and now We are getting the email and also the username so that's

all you're done let's just close there next we have to define or use debounce so I'm going to just collapse there and go to my custom Hooks and Define another hook which will be the US D bounce. TS for un C yep the spelling is totally correct so use like use D bounce it's going to be taking this t as a as a generic we're going to be also passing a value which will be taking the T and the delay will be set To a number like how much we want to delay there so now

inside there we have to Define our stat so use like uh D bounce d o u n c e d I guess d e b o u n CED D bounce value and then set d b o u n and CED value set D bounce value and the initial value will be now set to totally that value which you're now getting from that parameter but we're going to be also providing this type generics so let's say our file and now underneath that we have to use our use Effect so that we can fetch some data

or provide some sort of a side effect inside there so let me just go ahead and provide my set time out and here inside there we're going to be passing our Arrow function which will be using that set debounce value and now we're going to be passing that value in side there and for the delay we're going to be also passing that delay which is now coming from this perimeter and I'm going to also store the inside the Handler Variable so Handler and it's going to be equals to this value now underneath we have to

just return our Arrow function for the cleanup and let's just space for Clear timeout and pass my Handler inside there okay so now for the dependency aray we are going to be passing the value and also the delay inside there and then St down but why the we carrying these errors it shouldn't be text it should be just a t there we go and finally we have to just return this Debounce value so we can use that in other files okay so let's just use like uh return debounce value and finally export default and then

use debounce so our file but I'm going to go to the top right now and I guess that's going to be fine so now let me just close there and use the inside our jsx now underneath we're going to be defining yet another de and I'm going to provide like margin for the bottom of four my H2 which will have like text of extra Large and it's going to say like d bounc input element or example would be fine okay so now let's just Define our input field which will have the type of text and

we're going to be also providing a classes of Border pairing all around of two and now we have to take care of the input value so I'm going to go to the top right here and Define my input value initially so I'll use like use State and the initial value will be set to empty string and now let me just restructure The in put come on the input value and then set input value and which will be coming from the US St now we are going to be providing that specific value for or use debounce

so I'll use like use debounce let's just grab there now we have to paste that input value which we are now taking right here now we have to past that and we can also specify the delay of 5 Seconds or 5 milliseconds rather and I'm going to be using const and then D bounced input and it's going To be equals to this used D bounce I'm going to now go in there and Define yet another hook which will be called the use previous hook so I'll just give it the name of like use previous ands

and and this should be quite simple and easy so I'll just give it the name of like use previous i o s there we go and then name should be come on use p r e v i o u s there we go so the name is now totally fine we also have to annotate as a generic it's going to take the value of T and now inside there we have to first of all get the reference so I'll just use the ref it's going to be equals to the use ref right here and the

initial value will be set to nothing and I'm going to also annotate the as our type generic and inside there we are going to be performing the S effects so now let's just pass for uh use effect inside there and for the dependency array we are going to be only passing that specific value inside there and I'll will use Like reference. current value which will be now equals to this value I'm going to save this file right now and I'm going to also use return reference. current value save this file and finally we have to

export that so that we can use that in other file okay so I'm going to save this file right now and that's only done now we have to use that inside or or not even inside the jsx but now we have to use that right here so I'll use like use previous value and I'm going to be Placing my input value inside there and now let me just s it inside the previous uh value or something like that I'm going to save this file but the spelling p r e v i o u s yep

that's all correct now let me go ahead and go to my jsx and provide my value inside there so I'll just go ahead and my value and which will be set to input value and whenever we change this we want to fight this handle change function or handle input change rather handle input change which We are going to be creating in a few seconds and the placeholder will be set to type to D bounce D bounce there we go s our file and now underneath that let's just create our paragraph which will select D bounced

value and here let's just render or D bounce D bounced value not even input field D bounce input and also the previous input so previous value and here let's just render our previous value right here now let me just copy the name of there and go to The top and Define my handle input value so I'll just use like cons handle input change and it's going to take the event and I'm going to also annotate as the react change event and here I'm going to just specifically mention that want to use the HTML input element

inside there and now inside there we're going to be using the set input value on set input value and provide my event. target. value inside there that's all done but now let me just check this out if I type Something inside there like Huzan here you can see it's going to take a bit of time like the 5 second or the 5 millisecond to complete there so now let me just type something else like uh I don't know and here you can see it's going to take that millisecond to complete that uh whatever I'm typing

right here okay so yeah that was our debounce and now let's create our use local storage but I'm going to have to hide this one then we're going to be Able to provide our new jsx I'm going to go to my Hooks and Define my used local storage so use local storage. TS and inside there we have to just use our used local storage and provide my generic first of all and provide the key which will be set to a string I'm going to also provide the initial value V and that's going to be also

set to this generic type and the first thing that we have to do is that we have to Define our state so I'll just give it the name of Like value and then set store value it's going to be equals to the US St and the initial value will be set to this aror function because we're going to be providing our items and also our try and catch blocks I'm going to also annotate that as a generic of T and inside there we're going to be using our TR and catch so if we have some

sort of error so in this situation we're going to be using console. error and I'm going to just pass my error inside there and return my Initial value right here but if that's not the case so in this situation we're going to be using our window. local storage this is how we are going to be accessing our local storage and now if you want to access a certain so in this situation we are going to be using our get irm function or method and now we can specify our key inside there so if you want

to get there I'll just store the inside the item variable and now we have to check let's just save Our file and I'm going to check like if we have the item then we can use the json. pars and now let's just space our item inside there but if that's not the case we're going to be using that specific initial value inside there that's all done so now let me just hide there right here and now underneath this St we're going to be using our set value so set value and it's going to be taking

the value and the T generic inside there what do we have to do we have to call Our try and catch block once again if you have have some sort of errors in this situation we are going to be using console. error and P my error inside there but if we don't have the errors so I can use like set stored value and pass my value inside there and now I can use like come on window. local storage. set item and pass the key and also the json. stringify and paste the value inside there I'm

going to save this file right now and I'm going to also hide there and Underneath we have to just return those Valu so that we can use there in other places all use like uh come on sword value and then set value there we go and also you want to get there as the constant so this is basically the typescript stuff now we have to export there so that we can use that in other pile so I'll use like export default of use local storage and I'm going to save this file right now now let

me just close this file and go to my jsx and now Underneath this one we're going to be defining yet another uh jsx which will be set to de with a class of margin for bottom of four and inside the let's just user two which will have the classes of text extra large of local storage example sove this file and now underneath it let's just create our input field with the type of Border not B with the type of text and also the classes of border and it should be border and piring all around will

be set To two and the value which we now going to be providing is going to also have the placeholder of set local storage I guess that's going to be fine save my file now let me go to the top and Define uh my local store variable right here so I'll just use like use local storage and past like the username as initial value and for the next perimeter uh we're not going to be passing nothing today but now we have to restructure the stored value come on S Stored value and also set stored value

out of there like so now let me go to the bottom and here let's just provide those input values so I'll use like value and it's going to be set to store uh stored value and now underneath whenever we want to change this in this situation we're going to be fing this function and set stored value and place my event. target. value inside there and I guess that's going to be fine so let's just say our file now let me just Refresh this so we only have this input feed which allows us to set our

item inside our local storage so I'm going to go to my application first of call go to the application so we already have this data I'm going to clear this out so we are now inside this local storage and now inside there we have our local storage totally open let type like my own name maybe like hus or hus like so and now if I just refresh this browser still we are now getting this husan like No matter how many time I refresh my browser still we are going to be getting this uh data so

if you want to change this so I can totally change that to something else and now it's going to also change there right here if you want to delete there we can just click on this icon so it's going to remove there and now if I just refresh and that data is now successfully gone and I can type whatever I want to type so it's going to also store the inside our local storage Right here so that's only done I'm going to also hide there right here and the final thing that we have to do

is that we have to create uh another hook for fetching our data so I'll just give it the name of like us fetch. PS and inside there we're going to be fetching data we're going to be also taking care of the loading and also the error set so I'll just use like use PCH and it's going to take the T as a generic and P My URL of string inside there and here Let's just take care of the data which we're going to be getting from the external API and set data now here we have

to use the use St and the initial value will be set to totally null but we also have to annotate the SD or the null value and now underneath there we can just take care of the loading so let's just use the loading and set loading is going to be equals to this use St once not transition God damn it so use St once again and the initial value will be Set to true and I'm going to also otate there to Boolean Boolean like so and I'm going to also take care of the error state

so I'll use like error and set error and it's going to be equals to this U St once again and the initial value will be set to null and we can annotate this so either U string or null value inside there okay so that's to done now we are going to be performing the side effect so in this situation we going to be using the use effect and Inside there we are going to be performing our S effect so if you want to fish our data so we going to be using our as synchronous function

and here inside there we're going to be performing or try and catch blocks so what I'm going to do is that I'm going to store the inside the fetch data function it's going to be equals to this function this I'll use my try and catch block so for the tri block or you know for the catch block if you have some Sort of error I'm going to also annotate the as any and I'm going to use like set error which we already defined up above and now we can use that same error. message and we

can push that to our messages I'm going to also provide the finally start so finally uh the set loading it's going to be set to false okay so now for the tri block what do we have to do we have to first of all use the aw and then pitch and pass my URL inside there okay So now we can store the inside the response variable like so uh it should be response there we go if we did not found the response or if we don't have response. okay in this situation we have to throw

a new error which will select network uh response was not okay this is s file and underneath it we have to use our result going to be equals to this type generic like so and now we are going to be getting that value we have To convert that to the Json response and now need we can use the set data and pass my result inside there that's totally done now let me just copy the name of this function and we have to execute that right here so that we can see all of that results so

I'm going to just you know what let me just even collapse I can't even see that let me just collapse that and execute this function right here and for the dependency array we are going to be Passing uh yeah for the dependency array we are going to be passing that URL Right Here and Now underneath that we can just return our data and loading and also the errors so that we can see them finally we have to export them so we can use the in other file so use PCH semi file now let me go

ahead and go to my app. TSX and here we can use my margin for the bottom of four inside there we can use the H2 which will have the class of text extra large and provide my fetch Data example I'm going to go to the top and get my items or my entire data from my uh local or Custom Custom hook so I'll just use the use Fetch and here we have to just P that same https and then Json placeholder do type I code and then.com for/ poost and now we are going to be

just restructuring a few things like data loading and also the error from the from this used T okay so now let me just save my file getting this error because we have to use that So now underneath there we going to be providing our loading state so if you have the loading state in this situation we're going to be showing this paragraph and which will s like loading dot dot dot and now underneath that we're going to be also using the error so if you have the error in this situation we have to use like

error and then just render that specific error so we can see that and if we have the data so finally just render their data inside not the pre What the hell am I doing inside the pre there we go and I'll just P my json. stringify oh my God there we go so we have our Json do stringify and past the data and now and two and now let me just save my file and refresh this so here you can see we are now getting all of that post and we have the user ID then

the title and then the B so this is how we are going to be fishing our data and this is looking cool now let's talk about the factory design pattern so the Factory design pattern is a way to create objects without specifying exactly what kind of objects we are creating it's like having a factory that makes objects for US based on some condition or inputs instead of just directly deciding which react component render inside your app you will have a factory function that decides which component to create based on some condition like props or data

so this is how the basic syntax will look like First of all we are just going to be creating a simple component and inside there we're going to be using either if andl statement or switch in cases and we're going to be providing different cases like if the case is primary so render one button if the case is secondary then render another button or if the case is danger then render the danger button okay so this is how we are going to be creating our Factory function and then this is how we are Going to

be using the inside our app so we will just specify first of all the type then the label and then the function of what to do with that button so that's going to be a lot of fun so now let's get into the coding then you will get to know what I'm talking about now let's talk about the factory functions so what I'm going to do is that I'm going to create a folder with the name of components I'm going to create yet another folder for the shared You don't have to create this folder if

you don't want to do that but I want to do that so inside the components folder we are going to be defining our primary button. TSX file and I'll use my RFC inside there I'm going to also Define yet another component for the secondary button. TSX and I will use my RFC inside there I'm going to also provide the danger so I'll use like danger button. TSX and I will use my rafc inside there now let me go ahead and go to this Primary button and I'm going to remove this D from here and I'm

going to Define my button with a class of background toilet teal of 300 and also padding all around will be set to four and I'm going to also give it the class of button primary you don't have to provide there but I want to provide there it's going to also take a label and I'm going to also annotate the label as a string okay so let's just annotate there I'm going to save my file and now let's just use The inside this button so I'll just put this label right here now let me just sve

my file and close there I'm going to also go ahead and go to the secondary button I'll just remove this line of code and I'm going to provide my button with a class of background holy purple and 300 I'm going to also provide ping all around of four and button totally primary and inside there I'm going to specify my label I'll say like label and here we have to specify the label and String okay so inside there I'm going to render that label right here and that's done I'm going to also go ahead and go

to the danger and once again we are going to be removing them so let's just remove there and I'm going to provide my button with a class of background totally green or you know what R would be fine red of 300 and also padding all around will be set to four Buton totally danger so now inside there I'm going to restructure the level once again and I'm Going to proide the label and it's going to be a string okay and here let's just render over label okay so I'm going to be using like label and

now let me just save my file and now these buttons are now totally done the next thing that I want to do is that I want to Define my button factory so I'll use like button factory. TSX and now inside there we're going to be creating our component or we're going to be rendering our component based on a certain condition So what I'm going to do is that I'm going to specify my button factory and it's going to take a type and type will be set to string it's going to also take a label and

label will be also set to a string so inside there we're going to be using our switch and cases and for the switch we're going to be providing a type and for the first case if the type is primary so in this situation we're going to be returning our primary button okay so I'm going to just close there And for the prop we going to be specifying that label right here there we go I'm going to also remove this Brak and now let me provide yet another case so if the case is set to secondary

in then situation we are going to be rendering our secondary component like so and I'm going to also specify a level inside there and for this level I'm going to also provide that label which you are now taking as a perimeter if that's not the case and if the case set To Danger so in this situation we're going to be returning our danger button and now let me just close there and here I'm going to also provide the label and for the label we're going to be specifying that label as a perimeter and for the

default value let's just remove our break and I'm going to be returning just a simple button with a label okay so let's just put our label inside then now let me just save my file and this is how we are going to be defining our Factory function or our Factory component for our button factory so I'm going to copy a name of that and I'm going to just export this so we can use the in other file okay so let's just go ahead and go to our app and now let's just use the inside our

component so I'm going to just remove that let me just zoom in a bit and here we are going to be rendering or button factory component let's just grab there and here it's going to take the type and it's going to Also take the label so for the type you know let's just Define this type right here okay so I'll use like button type and it's going to be equals to primary so this can come from the prop or this can also come from the St sometime but in my case I'm just only providing there

as a variable so now underneath there I'm going to also create a button label and you can specify basically any label that you prefer but in my case I'm going to say like click me okay so let's just Spride our type first of all so now let me just provide the type I'm going to also provide the button label and now let's just close there I'm going to go back and this is how it looks like right here so if I right click on there and go to the inspect element and what are we getting

we are now getting this button primary right here and also so this background of totally te 300 and why is there because now we are setting this Buton type to primary that's why we are Now getting this button primary right here and if I change that to like secondary here you can see the button color is changed and we are also getting this button primary and we shouldn't be getting this primary we should be getting a secondary let's just go ahead and go to for a secondary and it should be secondary like so I'm GNA

also go to the danger and yeah that's fine okay so yeah we are now getting our button secondary right here and now if I change Them to dangers now let me just change the to danger and now if i s my file and here you can see we're now getting our danger button right here and also we are now getting this class name of button danger so that was example one of the factory function and now let me give you yet another example so I'm going to go ahead and Define a components folder so I'll

use like components and inside there we're going to be defining a few components so I'll use like image card. TSX now I'll use my RFC inside there I'm going to also create another component for the profile card. TSX and I'm going to use my RFC inside there and I'm going to also create a text card. TSX right here and I'm going to say RFC inside there now these components are totally done I'm going to also create yet another folder for the shared you can give it any name that you prefer but in my case I'm

just giving it the name of Shar and inside There we are going to be defining our card factory. TSX o r y there we go now let me hit enter and I'm going to just Define my RFS oh you know we're not going to be doing that right now first of all let me go ahead and go to the component folder and I'm going to go into the image card and now let's just make that a bit cool so I'll just remove them and here I'm going to specify a few classes to it so I'll

use like border pairing all around will be set to 10 Pixel and margin all around will be set to 10 pixel and inside this T we are going to be providing our image and for the source we are going to be taking there is a prop so I'll just restructure there right here like image source and also the alternative text and I'm going to annotate the as a name okay so let's just provide our image source right here image source and for the alternative text I'm going to also specify like alt text and we will

also provide a bit of Classes to it so like width will be set to five frame and also height will be set to five frame now let me just save this file and that's totally done I'm going to close there now let me go ahead and go to my profile card component and inside there I'll just remove this text I'm going to also provide a bit of classes to it like border pairing all around will be set to 10 pixel and margin all around will be set to 10 pixel like so and inside this D

we're Going to be providing our image and for the image we are going to be providing the from our prop so I'll just destructure the name bio and Avatar I'm going to also inate the as any and now here I'll just write my avatar right here and also for the alternative text we're going to be providing the name and also I'm going to provide a bit of classes to it like with will be set to 10 R and close there so now underneath this image we're going to be providing Our H3 and inside there let's

just render our name and I'm going to also provide a paragraph and the paragraph will be set to bio now let me just save my file and that's going to be It Forward profile card and I'm going to close there let's just go into our text card and I'm going to just remove that from here or you know what I'm not going to remove this so I'll just remove that text and I'm going to put a bit of classes to it like border pairing will Be set to uh 10 pixel and also much will be

set to 10 pixel and close there so inside this D we going to be rendering our paragraph of text which we are going to be getting from our prompt so I'll just destructure there and I'm going to annotate there as any now let's just close there and start working on our Card Factory and based on there we are going to be rendering our component like which component to render so I'll just use like cons Card Factory f y there we Go and here we are going to be restructuring the type and also the data and

now let's just uh annotate the as any and now let's just create our component so first of all we are going to be using our switch in cases so for the switch we're going to be providing the type and if the type is set to image in that situation we're going to be returning our image card okay so let's just render them and I'm going to also provide the image source SRC and here it's going to be coming from the data. SRC and I'm going to also provide the alternative text and for the alternative text

we are going to be is going to be coming from the data. alt and now let's just save I'm going to go back and remove this break from there I'm going to also put another case and if the case is set to text in this situation we're going to be returning our text card and now let's just render there it's going to take the prop of Text and here we have to provide there like as a data. text and now underneath that uh if the case is set to profile in this situation we're going to

be returning our component like profile card and I'm going to close there like so and here it's going to take a few props like name and name will be coming from the data. name and this can also take the bio and the bio will be coming from data. bio bio like so and Avatar will be coming from data. Avatar and if That's not the case so for the default one we're going to be only returning word d and it's going to say like unknown part type or something like that now let me just save my

file I'm going to copy a name of there go to the bottom and I'm going to export there so that we can use it in other files and so now let me just just sem my file and this is how we are going to be creating or defining our Factory function and now and based on these conditions we're going to be Rendering our components so now let's just close there and go to our app and start working on there the first thing that I want to do is that I want to place a bit of

data right here and you can find this data in my gab repository so first of all we have our image card data and inside there we have our image and also our alternative text then we have our text card data and only has this text and this is just a simple card text right here and then finally we have Our profile card data so inside there we have our name bio and Avatar so yeah we are going to be rendering there so I'm going to collapse there like so and I'm going to go back so

you guys can see everything a bit better now here we are going to be rendering our components so first of all inside this H1 I'm going to make it as a react fragments and now inside there we're going to be rendering where H1 is going to say like Factory design pattern in react So now underneath there I'll just use a d with a class of flex and flex will be set to to a ramp and inside this one we are going to be using a factory function to render different cards so I'll just use like

Card Factory and now here we're going to be providing first of all the type and if the type is set to image which means like we're going to be rendering the data of the image card so I'll just use like data and then the image card data and if the type is you Know let's just remove there I'm going to render my uh card Card Factory and close there and if the type is set to text so in this situation we're going to be rendering our data and it's going to be set to text card

data now underneath there let's just use our Card Factory once again and close there here we're going to be specifying the type and if the type is set to profile then we are going to be rendering or passing our profile card data now let me just save My file and that's going to be it and here you can see we are now getting all of these cards right here so um for the type of image we are now getting this card and for the type of text we are only getting this text card and for

the type of profile we are getting the image also the name and also the description right here so now let's just go ahead and go to our profile card and yeah we are now getting all of these stuff so yeah that was our Factory function or Our Factory design pattern in reactjs okay so time for the dynamic component Factory with Advanced configuration challenge so if it sounds a bit mouthful of course it is okay so what do you have to do you have to create component Factory that dynamically generates a different UI components based on

a specific configuration and ensure type safety for each component configuration so what are the requirements you have to Define several component first of all Like uh you going to be creating a button card and model at least I'm going to be just creating there and you are more than welcome to create as many component as you prefer and then you have to define a component config interface something which we are going to be doing and you should also do that by yourself and then implement the factory you already know how you're going to be creating

a factory component and finally just render your content Dynamically so I want you to read through there and then give it your best shot if you can do it that's completely okay then come back and watch the solution and now I'm going to give you my solution so now let me just close there and the first thing that I want to do is that let me just even zoom in a bit I'm going to just create a folder with the name of UIL so I'll just give it the name of like UT tails and inside

there I'm going to be creating a file With the name of uh component types TS and inside we are going to be providing all of our types for our compound and props so you know let's just start from the first one which will be let's just create our interface I'm going to start by defining the model props which will take these props it's going to take the header and I'm going to place a string inside there and also the content and the content will be set to a string and also the folder which will be

also set To a string now let me just export this so we can use that in other files so that was our first one now let me just create another one so I'll just create interface with the name of card props and inside there it's going to take a title which will be set to a string it's going to also take a Content which will be set to a string it's going to also take a fotter which will be also set to a string that's also done the final one we have to create is uh

button props and Now inside this going to take a label and we are going to be annotating the as a string and going to also take the on click event function so we are going to be only returning the white from there and also for the disabl St d i s a b l e d we're going to be setting there to Boolean now let me just save this file and that's it for our component type so now let's just close there the next thing that we have to do is that we have to create

another folder with the name Of components so I'll just give it the name of like components and inside there we're going to be creating three components so first of all we are going to be creating our button. TSX file and inside there let's just use our RFC inside there and here what do we have to do we have to go there and we have to just destructure first of all the label which it is going to take and the on click when function and the disable prop d s abl l there we go and here

let's Just close there and in you know let me just change that to button because we're going to be only creating this component for the button so whenever somebody clicks on there so we are going to be firing this function which which it is now providing as a prop and on the disabl state we're going to be also providing the from or props dynamically like so and for the content let's just uh render that level which you are also passing as a prop and I'm going to Annotate this component with that button props which we

just defined inside our component types so here you can see we're going to be defining or providing this button props component or interface right here for our component so now let me just close there the next thing that we have to do is that we have to create our card component so I'll just give it the name of like card. TSX and inside there let's just use our RFC inside there and once again it's going to take A few props like title and it's going to also take the content come on content it's going to

also take the footer okay so now let me just render that content inside there I'm going to also provide the class or you know we're not going to be doing that so now inside there let's just provide our H3 and inside this H3 I'm going to render their title we're going to be providing a paragraph and render our content inside there and finally the folder and here we have to Just render our folder right here I'm going to save this file right now and I'm going to also annotate my component with that card props uh

let me just import there from where from from our component. types file okay so we now just annotating our component with these props so now let me just close there close this file now let me create another component with the name of model so I'll just write like model. TSX use my RFC inside there and here it's going To take a few prompts so it's going to take the header it's going to also take the content and it's going to also take the footer and I'm going to also annotate this component with the name of

or with the type of models there we go and now let me just remove that from here and I'm going to go inside there and provide my H2 inside there and I'm going to just render my header as H2 and for the paragraph We are going to be rendering our content and also we have To render our footer and here let's space our footer inside there now let me just save my file close there and here I'm going to also close there and I'm going to go into the UTS folder and inside there we're going

to be defining uh our component Factory so I'll use like component Factory d r y. TSX okay so now inside the let's just uh we not going to be providing our RFC right here so the first thing that we have to do is that we have to import our button Component we also have to import come on our card component and we also have to import our model component and now underneath that we are going to be also importing our types I'll just import like the button props and come on this one and we're going

to be also importing our card props and finally we have to import one model props right here I'm going to save this file right now next we have to Define our component or Factory component so now let me just go Back and here I'm going to just Define my function and this function will have the name of like component Factory you can basically give it any name that you prefer and I'm going to just put my config because it's going to take a configuration and now we are going to be passing a type of uh

component config which we're going to be creating in a few seconds so now let me just close there and here we have to create our component config so we can use that so I'll just Define the type and I'm going to give it the name of like component come on uh component config is going to be equals to this type and you know we're not going to be providing it like this because we're going to be providing a lot of types so first of all we are going to be providing a type and the type

will be set to a button and then uh we are going to be also providing a props and props will be set to these props right here which we already Defined inside another file so we can either use that or we can use another type for another component so I'm going to just write that all right here and we have to Define another type for that another component so I'll just uh create a type for the card component and we're going to be passing these uh props to it so I'll just pass like card props

and now let me just save my file and this is how it looks like and now let's just import the even why aren't we even Getting there so we have these card props now let me just paste the carard props it is already fine but I know why we getting that error uh implicitly has any type God damn it my bad we have to provide our props and then we have to provide our type inside there now we are going to be also creting a configuration for another component which will be for our model component

so I'll just past like the props and the props will be coming from that model props okay so now Let me just provide there and that's only done so now that we are successfully creating this component configuration and now we are successfully passing that right here so the next thing that we have to do is that we have to use that inside our component so now let me just go there and here we're going to be using a switch in cases but you are more than welcome to use uh ifnl statement but now we are

going to be providing that config Which we now taking as a perimeter and we are going to be getting a type from there like each of them have a type like that if the type is button so do something if the type is card then do another thing and so on and so forth so now we are providing a configuration. type and here inside they we are just providing a different cases so if the type is set to a button in this situation what do we have to do we have to just return this component

which is a Button component okay so now let me just close the and which we are also importing right here here okay so it's going to also take a few props because we are now providing these props right here to our component so I'm going to just spread out all of the config and here come on config and here we have to just access the props and that's everything that we have to do for our button component so now let me just close there and provide another case for The card and here I'm going to

just provide like return the card component and I'm going to close that and here let's just provide or dot dot dot config once again and now we have to specify those now we have to provide the final case for the final component which will be for the model component so now let me just paste them and we are going to be only returning the model component in this situation now let me just also close there and spread out all of that Config file so let's just provide that config or props there we go and for

the default I'm going to just remove this break from here we're going to be throwing an error so throw new error uh which will just say like unknown component type or something like that now let me just say this file so this is how we are going to be defining our component Factory I'm going to also export that so we can use that in other file so use like export default of Component not config but component Factory now let me just save this file and that's it for our component Factory I'm going to close that

and now let me go ahead and go to my app. TSX and call that right here so I'm going to go there and remove there and inside there we're going to be uh you know first of all you want we have to get there so I'll just import the component Factory so I'll use like component Factory we have to import that and pass it right here we have to Execute that component and it's going to require some sort of a configuration as we just provided right here so now that we have to define those configuration

so you know let's just Define the cons button config and it's going to be equals to this object but we also have to go ahead and I forgot to do that but now let me just export that so that we can also use that inside this configuration so I'll just annotate the with that component config so let's just Proide our component config right here we also have to import that now we are going to be specifying the type and the type will be set to a button and we are going to be also providing a

different props to there so I'll just specify the label and the label will say like click me I'm going to also provide the on click EV Handler like whenever somebody clicks on that so what you have to do in that situation we just want to alert and we want to say like you clicked me I Guess like you clicked me would be fine okay and I'm going to also proide the disabl state and for the disabled State initially you want to set that to false okay so now let me just copy there and place that

right here so our file and here you can see we're now getting this button and whenever we click on there so we are now getting like you clicked me so this is how we are going to be defining or rendering our first component by using the compound Factory Component design pattern and now let me just close them and now we have to render that other component so I'll just Define like card config fig and we also have to provide that component config right here and inside that we're going to be providing a type and the

type will be set to a card and the prompts will be set to oh my God what the hell was that okay so it's going to take a few prompts like title and title will say like C title and now we also have to provide Some sort of a content and I will say like uh some come on some random content or something like that and I'm going to also provide a fer and I'm going to set there to fter s file we have to provide our comma there I'm going to copy the name of

there and now I'm going to just hit enter right here and I'm going to also hit enter right here duplicate this line of code and instead of providing my button configuration I'm going to specify the card configuration and now Here you can see we're now getting all of that value from those props like card title some random content and finally over fter so yeah that was there about four or complex challenge about the component Factory now let's talk about the compound component design pattern so the compound component design pattern allows for creating more flexible reusable

and easy to combine components it involves splitting a complex component into smaller individual Subcomponent that can be used together but maintain some degree of internal control over their behavior so that was just a quick definition of what a compound component is but now here is a bit note about the compound component this pattern is useful when you want to create a component that has multiple sub components but you want to maintain the ability to customize or control the behavior of each subc component from the parent or the container let's suppose if You want to build

this card without using the compound component or without using the compound design pattern so first of all we have a title then we have a content and then we have a footer first of all we are just going to be creating some sort of a card which will take the title content and footer we will provide some sort of a styling to them and then we can past the title content and fot as a prop to that component this is good but not that much Suppose later if you want to change something inside that UI

so how what we're going to be doing there well we can definitely do that but that's going to be a lot of hard work and we will very soon end up creating another component without just using that card component now let's refactor all of that code to use a compound component so as we all know that functions in JavaScript are just an object so which means like we can attach the properties we can also Attach another function and we can do a lot sort of stuff with there so now we are going to be treating

our component as object and we are going to be attaching a different component to that as a properties and values so what do I mean by all of that jabish so here you can see we are going to be extracting all of that UI logic from the card component and we are going to be splitting that into multiple component like Tyle we are going to be putting That inside the card component same will goes for the card content and also same will goes for the card footer okay so we going to be extracting all of

that logic from the card component and we are going to be putting that inside individual multiple components and then we are going to be using that card component as a object and we will attach some sort of a properties on there and that specific property will be equal to their specific component so that we can use that again And again once again if you don't get it you don't have to worry about there because now we are going to be writing our code then you'll get to know what I'm talking about so now let's get

into let's talk about the compound component so first of all we are going to be creating our card without using the compound component and then we will refactor our code to use a compound component I can't even say that word compound what the Hell so you know let's just start working on this so I'm going to go ahead and Define my components folder and inside there let's just Define our card. TSX and I'm going to be using my RFC inside there go to my app and render there right in here so I'll just use like

card component and close there and this card component will take a few props so we are going to be first of all providing the title it's going to just say like card title or something like That we're going to be also providing the content and I'm going to just say like this is uh the content of the card or some random stuff like that we're going to be also providing a footer so it's going to say like this is the footer or something like that now let me just s my file and go into the

card component and start working on this so let's just zoom in a bit and first of all we are going to be restructuring all of their prompts so let's say Destructure the title content and also the footer so I'm going to define the interface for the car props and here inside let's just put the title and the title will be set to string the content will also be set to string and the footer will also be set to string so let's just put there I'm going to copy the name of there and annotate my component

with this card props and now inside there what do we have to do let's just remove them I'm going to go back And provide a bit of classes to it so let's just provide these classes you can pause the video and write The Styling by yourself or you can go ahead and go to my gab repository and grab all of that styling from there so I'm going to just provide H2 and this H2 will say like title now underneath them we're going to be creating another div and inside this div I'm going to provide a

paragraph which will say like content so I'm going to just provide like content right here And now underneath this div we going to be defining yet another div with the class of footer and I mean like the paragraph and inside that we are going to be rendering our footer so now I'm going to fast forward the video and I'm going to provide a bit of classes to them and you can also pause the video and provide these classes to your component okay so you know what let me just save my file and here you can

see this is how my card looks like I know it Is looking super amazing because we are not using any compound component so yeah you get the idea like this is how we going to be usually defining work or card but now the question is how in the world we are going to be making this card to use the compound design pattern and that's very simple and easy so what we have to do is that we have to take all of these stuff or all of these sections inside this card and we have to create

a separate Components for them and then we are going to be combining all of that components or you can say that we have to split this entire UI into multiple compounds you can say there if you wanted to so what I'm going to do is that first of all I'm going to define a few components I'm going to define a component for the card and then card content. X I'm going to also Define yet another component for the card footer. TSX and also for the card title. TSX and This should be a card tile. TSX

there we go now inside the card title what I'm going to do is that I'm going to cut this D from there and I'm going to save this file and go ahead and go to my card title and I'm going to use my RFC inside there and replace there with this content right here I'm going to also grab the children so let's just use our children and here I'm going to inate the children as the react node and now I'm going to copy this children from there And let's just paste it right here I'm going

to save this file right now and that's going to be it for the card title now let me go ahead and go to my card content but before I do that I'm going to have to go ahead and go to my card and grab all of these content from there save my file go into my card content and I'm going to use my rafc inside there and let's just place there with this new content and I'm going to use my children once again and annotate there and as a Children and react node okay so I'll

just copy the name of this children and place it right here sa my file that's done now finally let me go ahead and go to my card once again and I'm going to have to cut this folder and now let's just save this file and I'm going to go ahead and go to my folder and use my RFC inside there and place it right here I'm going to once again destructure the children and here we have to annotate the children as a react node and now I'm Going to copy these children and place it right

here so my file and now as you can see we created a separate compound component for this entire UI or for this entire card now the question is how in the we are going to be combining all of them and to combine them first of all let me just remove this interface from there and also this one and this component will only take the children and I'm going to also annotate there is a children in the react node and I'm Going to take this children from there copy the name of there and inside this D

we have to just render their like so and now the question is how in the world we're going to be combining this card content fot title and all of that with this card component you guys already know that in JavaScript functions are just an object which means like we can assign property to there we can assign like different kind of stuff today this is how we are going to be trating this Function or this component to attach properties and values to there what do I mean by that first of all we are going to be

accessing our function or component whatever you want to call them there then I'm going to use the dot notation and here we can specify any kind of property and any kind of value for that specific property so in my case I'm going to just give it the name of like title and you can give it any name that you prefer and now this card title Will be set to this card title component which we've already defined and now we import it there right here so now if I go ahead and go to there so here

you can see we have our C tital component so what are we doing we are now accessing our card component and then we are specifying specific title today and now that specific title will be equal to this card title component okay so this is how we are going to be attaching or combining those different compound with This main component okay so I'll use like car. content in this case and you can give it like any name that you prefer and it's going to be set to card content and now let's just grab this component right

here and also we're going to be using card. fer it's going to be equals to card fer okay like so and now we are accessing there now let me just save my file now if I save this file and go ahead and go to my card we are getting some sort of error so I'm Going to just remove there and I'm going to also remove there and here we're going to be passing our card component which will be our main component and watch what happens but first of all we have to grab this card and

now I want you to watch what happens so now if I just use card and do what are we getting we are now getting all of that properties right here we are now getting the content full title and so on and so forth so now I can choose this title and Now let me just close there and here I'm going to specify like some something cool or something like there and now if I just use card dot we are now getting their content so I'm going to choose this content and close there and I'm going

to say like amazing stuff or something like that I'm going to also access the card once again and finally we we're going to be choosing this foter and I'm going to say like and the end or something like that now if I save my File here you can see we are now getting this amazing card we can reuse this card we can do a lot sort of stuff with there let's suppose in some situation maybe if I want to push this amazing stuff to maybe either here or maybe at the top so how can I

go about doing them well we just have to duplicate this card and now we can just move this around like let's suppose if I want this one to be at the top so now let me just save my file and here you can see this is now at the top And we can do a lots of stuff with that so that was our compound component or compound design pattern to be precise okay so time for the compound component challenge it sounds a bit mouthful like compound component challenge anyways so what do you have to do

you'll have to implement the following features so a model container that can house multiple child component a way to control the visibility of the model and also it should accept the tial body and for area Within the model that can be customized with the content pass as a children so give it your best shot if you can do it that's completely okay then come back and watch this solution and now here is my solution so I'm going to go ahead and just Define a folder with the name of components components and inside there we have

to define a few components so I'm going to go ahead and Define the first one which will be for the model title. USX and I'll just use my RFC Inside there and that's going to be it for the boiler plate and I'm going to just remove this it's going to take the child because we already know it's going to require a lot of data so we are going to be also annotating the as the react or yeah I guess the react node and I'm going to just hit enter and here we have to past that

child inside the H2 so I'll just past them and here we have to past the children there we go and I'm going to also provide a bit of styling so the Text will be set to extra large and the P will be set to semi Bol TT toally gray of 800 would be fine so let's space for 800 say pile close there the next thing that we have to do is that we have to Define another component with the name of model board b. TSX and here let's just use our RFC inside there I'm going

to go ahead and remove there and I'm going to also proide a bit of margin for the top of two and inside there we have to provide our paragraph and render our Children inside there like so it should also accept the children here so then we would be able to past okay children and react node grab that so our file and finally we have to provide our classes so that we can style this so text will be set to gray of 600 and text will be set to small so our file Clos there and now

we have to Define another component for the model. TSX and inside there let's just use our RFC and here I'm going to remove That from there and I'm going to also provide my children like so and annotate my component as children react node like so now let me just save my file and here inside there we're going to be defining yet another d and I'm going to put their children inside there I'm going to also style a bit so margin for top will be set to four justify will be set to tot not Center but

end and spacing on the x-axis will be set to two I'm going to save this file right now close there and We also have to define the final final component which will be just a model component so I'll just give it the name like model. TSX and here we're going to be combining all of that compounds into one simple component so I'll just first import the model uh title we would also need to import the model body we would also need to import the model uh forward there we go and now underneath there we have

to Define our component right here now let me just s my file it's going to Take the children and we also have to annotate is the react come on react node and now let me just seter so it's going to also import that right here I'm going to also close there and inside there let's just Define another div go back and it's going to take those children like so I'm going to also inate that component like background totally white and pairing all around will be set to six round it totally large and withd will be

set to 20 Rim I'm going to close That right here I'm going to also provide a bit of classes like uh fixed inser will be set to zero background toly black and background opacity will be uh set to 50 and flex justify will be set to totally center items will also be set to totally Center and the Z index will be set to 50 now let me just save my file and this is how it looks like but finally we have to combine all of that compounds into one simple component so we are going to

be using like model Uh. tile and it's going to be equals to that model title and we also have to use the model. body come on body and it's going to be equals to model body like so and finally we have to use the model. putter it's going to be equals to model footer like so I'm going to save this file right now close there now let me go ahead and go to my app comp component and use there so the first thing that I want to do is that I want to import my uh

come on my model component from from There and now we have to Define our St first of all so like is model open and then uh set is model open it's going to be equals to the used St and the initial value will be set to false I'm going to save this file right now now let me go ahead and go to this Dev and I'm going to Define my button component which will say like open I guess open would be or you know open model would be fine and here we have to provide the

on click when Handler like whenever we click on There so we want to F this function which we are going to be creating in a few seconds and also provide a bit of styling today like pairing for the xaxis will be set to four pairing for the y axis will be set to two background totally green of 400 and also text of totally white and totally rounded medium like so now let me just save my file and here now underneath this button we are going to be rendering all of our content and you know I'm

going to just comment This line out because we're going to be creating there in a few seconds okay so here we have to first of all check so is our model open or not so if our model is open then we have to show this content but if our model is not open then we don't want to show nothing at all so I'll just render that model component and now inside there we have to render one model. tile and as you can see if I just hit control space we are now getting like body uh

footer title and so On and so forth so I'm going to just only choose this title right here because now we are going to be providing some sort of a title for or model so I'll just use like model title and now underneath there we are going to be rendering our model. body right here and I'll just P like this is the body of come on of the model or something like that you can past basically anything that you prefer but in my case that's going to be fine and then we have to Render our

model. come on model. footer and now let me just close that and finally we have to just specify something inside the model footer and I'm going to just provide like button right here inside this button uh we are going to be first of all providing the cancel button and now let me just duplicate the confirm button or something like that I'm going to also specify a few classes today like pairing for the x-axis will be set to four and Pairing for the Y axxis will be set to two text will be set totly white background

gray 500 and round it totally medium and also text will be set to totally small I'm going to save this file right now here we also have to specify a few more classes like pairing for the X will be set to four pairing for the y axis will be set to two text toally white background to te 500 and margin for the left will be set to 0.3 RM and I'm going to also Specify around it totally medium and text toally small like so I'm going to save this file right now and whenever we click

on this cancel button so let's just use like on click so we want to fire this function like close model we are going to be closing our model because this is a cancel button and then we have our confirm button so yeah it's going also close our model so whenever we click on there so close the model and confirm it so now let me go ahead and go There and I'm going to uncomment this line out I'm going to copy the name of there and Define my function right here so I'll give it the name

of like open model and inside there we have to use the set is model open come on now let me just copy it and place it right here set that to true and now let me just save my file and now we are going to be creating this function which is a close model okay so now let's just use like cons close model and here let's just create That is model open and set there to false I'm going to save this file right now and refresh there so here you can see we are now getting

this open model button if I click on this so it's going to open our model if I click on this cancel so it's going to cancel or cancel or remove there and now if I click on the confirm here you can see it's going to also disappear or disable our model and we are also getting this model title and also the body of the model so yeah That was it about the compound component Challenge and I hope you enjoyed it now let's talk about the slot design pattern so slot design pattern allow a component to

accept Dynamic content from its parent and place that content into a specific area or section of a component it sounds a bit like a props isn't it yeah of course it is because in reactjs there is no built-in slots so we are going to be using a props to achieve slots so the slot design pattern is not Formal or native concept like some other design pattern in reactjs but it draws inspiration from the way slot works in the web component especially in Frameworks like wujs or Shadow Dom or from patn ideas from other UI Frameworks

so yeah you got to know that slots are not buil-in or native to reactjs so what are we going to be learning about the slots so first of all we are going to be learning about the default slot then we are going to be learning about the name Slot or multiple slot and then compound slot and finally we are going to be learning about the slot with context so you know what there's enough theory about the slots and now let's just start from the first one which is called the default so default slot is known

as a children property so whatever you pass between the opening and closing tag of the component is pass as a children property to the component and acts as a default slot so you know what that's Going to be it for the theory about the default slot now let's get into the coding then you'll get to know what I'm talking about let's talk about the def F slot so what I'm going to do is that I'm going to create a folder with the name of components and inside there I'm going to define a card. TSX and

I'll just use my rafc inside there now let me go ahead and go to my app and registered there right here so I'll use like card and I'm going to close there like this and why Is there let me just first of all import there because now we are going to be using something called the default slots or you can say the children inside this component so you know let me just write a comment like d for slots okay I guess that's going to be fine or you can also call them as a Anonymous slots

so I'll use like Anonymous slots I hope the spelling is correct but I'm not quite sure about that so what I'm going to do is that I'll just write like H1 and Going to say like this is my card title and now let's just save there I'm going to also provide a paragraph which will say like this is my card content and I'm going to also provide a button which will say like learn more let's just write a learn and more now let me just save my file and it is giving us an error because

we have to use these children inside this component so what I'm going to do is that I'm going to destructure my children and I'm going to Also annotate that as a react uh node so now let me just grab that from the react J and I'm going to only use that inside this uh jsx right here so now let's just sa our file check this out so here you can see we have our uh card title we also have our card content and then finally we also have our button so I can also style it

if I want to I'll just write like I don't know maybe border would be fine and here you can see we are now getting a background of totally Blank and text of totally white okay so I'll use like of toally white and yeah we are now getting that button right here so this is how we are going to be passing a default slots or Anonymous slots or children to our component now let's talk about the name slots so the name slots or props are simply properties that we pass to a component each with specific descriptive

name and these name prompts allow the child component to access and use these values Based on the names they are given so that's also it about the theory about the name so now let's talk about the name slot so what I'm going to do is that I'm going to open or not open but create my folder with the name of components and inside there let's just Define my card once again and I'll use my RFC inside there I'm going to go ahead and go to my app component and inside the app component I'll just call

my card component like so and I'm going To close that and now here I'm going to past some sort of a jsx as a prompt for my component and I'm going to also give it some sort of a name too there so what I'm going to do is that I'm going to just write a comment for myself like named slots so now here I'll just past like card title you can also write a title if you want it to but in my case I'm going to write like card title and here I'm going to past

some sort of a title as a jsx so I'll use like H1 it's Going to say like this is my card title and now let's just say there I'm going to also provide the card content it's going to say like a paragraph and it's going to say like this is my card content and I'm going to also provide the card button and here it's going to only say a button and now let me just provide a level of learn more and I'm going to provide a class names of I don't know maybe background totally black

and also text of totally white to There so now let's just go back save our file now it's going to gives us an error because we have to use that inside our component so now let me go ahead and go to my component and now let's just zoom in a bit so you guys can see everything a bit better what I'm going to do is that I'm going to destructure first of all my card title and I'm going to also destructure the card content and also the card button like so so let's just go back

now let me just save my file and we Also have to Define an interface for this I'll use like interface card props and here inside there let's just use our card title and provide my react now to the so I'll use like react node it enter so it's going to import there and I'm going to duplicate there like three time next will be for for the card content and finally we have a card button come on and now let me just copy a name of there and I'm going to annotate my component with this card

props now let Me just go ahead and go to my card and what I'm going to do is that first of all I'm going to be rendering my card title then we are going to be rendering the card content and finally we have to render the card button like so so now let's just sa our file check this out and still we are now getting this UI first of all we are now getting the title then we are getting the content and now we are getting the button and which is looking cool so yeah this

is How we are going to be passing a name slot forward component and this is how we are going to be destructuring or getting there and this is how we are going to be rendering the inside our card component now let's talk about the compound slots or you can say the compound component slots so the slot design pattern can be applied to the compound component by defining the name slot using the props something which we just saw a few seconds ago customize a Specific areas of compound component this way each subc component acts like a

slot that can be filled with a different content so that was about just a theory about the compound slot and now let's get into the coding then you will get to know what I'm talking about now let's talk about the compound component slot so what I'm going to do is that I'm going to create my components folder and inside there let's just Define our card. TSX and you know what first of all let Me just write my RFC inside this component and I'm going to also create a card title. TSX and I'll use my RFC

inside there I'm going to also create one for the card content. TSX and I'll use my RFC inside there and finally let me just create another component for the card uh not for but card button. TSX would be fine and I'll use my rafc inside there and now I'm going to go ahead and go to my card title component and inside there let's just use our Children's all used like children and here I going to inot it there is a children you know let is close there children react node now I'm going to copy a

name of that and place that right here just like there now let's just close this file I'm going to go ahead and go to the card content and I'm going to destructure the children and I'm going to annotate there is a children react node and now we have to annotate them like this okay so I'm going to Annotate them close this file close that file finally let me just go ahead and go to my button and here we also have to destructure first of all the children and we also have to inate there with that

V node and I'm going to also go ahead and just render there right here now the final thing that I want to do is that I want to go ahead and go to my card component and inside this card component first of all we have to import all of that component so I'll just Import first of all the card then we're going to be importing the card content and we also have to import the card um yeah card button yeah I guess the card button so first of all we have to write a card and

then the button and this is how we are going to be importing there so next we have to create or destructure or children and then we have to annotate that children with the react node like so okay so I'm going to copy name of there and place it right here and now we Have to use it inside our component so I'm going to just remove there I'm going to also make the as a react fragments and here we have to pass our children next we have to provide our compounds to our specific card so I'll

use like card. title and here we are going to be setting that to the card title we also have WR the card. content content and here is going to be set to the card content and finally we have to write the card do button it's going to be set to The card button like so now that's done so now let me just go ahead and go to my app and use that inside my app so I'm going to just remove that and inside this app component first of all we are going to be importing our

card and now if I hit dot so here you can see we have our button content and also the title so I'm going to just choose the title and close there I'm going to only provide my H1 it's going to say like C title or something like that now underneath there We are going to be rendering our card. content and now let's just provide some sort of a content to this so I'll just use like card content and now underneath this one we are going to be using our card. button and here we have to

provide some sort of a button which will say like click me or something like that so this is how we are going to be using there inside our app and this is the UI we are now getting so we are now getting the title then the content and and then Finally we are now getting that button right here so we can also style there if I want to Sol just use like background totally black and text of totally white now let me just save my file and now we are getting this button right here so

yeah this is our compound uh slots or whatever you want to call them now let's talk about how we going to be using a slots with context API or just a context so what I'm going to do is that I'm going to Define first of all a few Folders so I'll just Define like the components folder then we're going to be defining our context folder or shared folder after them we are going to be also defining the hooks folder and inside there we are going to be only storing a simple hook let's just start from

the first thing which is to create our context so I'll just give it the name of like my context. TSX and inside there the first thing that we have to do is that we have to grab something called The create context from the react JS and now underneath that we're going to be creating our context so I'll just give it the name of like my context and going to be equals to this create context function and now the initial value I'm going to specify undefined today I'm going to also provide a bit of types today

so let's create our interface and now we have to use that interface for our context so what I'm going to do is that I'm going to inate there like Either use my context type or use undefined so now let's just go back and this is how we going to be defining our context but I'm going to also export this so we can use that in other file so now underneath we are going to be defining our provider so I'll just uh first of all use like cons my provider and here is going to take like

a children first of all and now we are going to be using this so we have to also inate this all use like children From the react node okay so let's just get there from the react node it is not helping me in this situation I don't know why but you know we're going to be importing them manually so I'll just import something called the react note from the reactjs now the next thing that we have to do is that inside this provider we have to Define some sort of a data which we are going

to be sharing inside our components so I'll just first of all Define a state which will be set To a value and then set value it's going to be equals to the use St and the initial value will be set to like hello from Context or something like that next we have to just return our provider so what I'm going to do is that I'm going to just use like my provider and here I'm going to specify my provider to that just a provider like so or it shouldn't be provider God damn it my context

to be precise and now I'm going to provide the provider right here and now let's just Close there and here we are going to be using our children and we also have to provide the value which we are going be sharing across our component so I'll just use like value and also set value like so V A there we go and now let me just save there finally we have to export this so that we can use that in other files so I'll use like export and that's only done so this is how we going

to be defining our context and now let me go ahead and go to my Hooks and here We're going to be defining the use my context hook right here so I'll just give it the name of like. yes and first of all the first thing that we have to do is that we have to grab our context and also we have to grab or my context which we just created a few seconds ago now the next thing that we have to do is that we have to actually Define our custom hook so I'll just export

this so we can use the in other file and now I'll just give the name of like use my Context and here inside there first of all we are going to be getting the data from our context so I'll just use like use context and inside there we are going to be getting our data from our context and now I'll just store there in the variable with the name of context and it's going to be set to this value now we have to provide a check if we don't have the context so in this situation

we are going to be throwing an error so I'll just use like throw new Error and I'll just space like use my context must be used within a a my provider now let me just save my file but if that's not the case we are going to be only returning our context so I'll just use like context which we are storing right here in this variable so that's all you done now I'm going to close this file and now the next thing that we have to do is that we have to go to our app

and wrap our entire application so I'll just remove that and I'm going to also remove that and I'm going to wrap my entire application by using my provider I'm going to copy the name of that and place it right here currently we don't have any components to render so now let's just create our components right here inside this folder I'm going to go ahead and Define my slots or you know it should be slot component come on slot component. TSX file and now here I'm going to just use my rafc inside there with the name

of Slot component and I'm going to also export this so we can use the I'll also destructure the children and I'm going to annotate the as a react node now let me just hit enter now let me just save my file and inside this component the first thing that we would do is that we would need some sort of a value so I'll just use like use my context and I'm going to execute that and from this context we're going to be destructuring that specific R and now we can totally Use the inside our component

so I'll just remove there and now inside this D we are going to be just writing like H3 and also s like context value and here we just have to render our context value and I'm going to also provide a div and here we have to just use our children inside there now for this children we also have to create yet another component so I'm going to close that one and Define another component with the name of slot content do or not context But cont and there we go content. TSX I'll use my RFC inside

there and I'm going to also export that so we can use that anywhere else and now here we are going to be using like use my context and I'm going to execute there and from there we are going to be restructuring the set value and now let me just store the inside uh I mean like we are going to be destructuring the and now let's just use the inside our component so I'll just uh remove the and replace it With the button and change this label to update context value and now when somebody clicks on

this button so we just want to F this function which is a set value and here we have to just provide a new value to this so I'll use like new value from slot content component or something like that and that's only done so now let me just refresh the oh we are now getting an error because we have to register there inside our app component so now Inside my provider I'm going to first of all render my slot component and I'm going to close that and inside the slot component we're going to be providing

our slot content or yeah not slot component but slot content there we go and I'm going to also close there like this like a self closing tag now let me just save my file and here you can see we are now getting our value like context value which is now initially saying like hello from the context but As soon as I click on this button here you can see it's going to change that value to the new value from the slot content right here so yeah this is how we're going to be using a slot

with the context now let's talk about about yet another design pattern and I guess the last design pattern of this course which is called the render prop so the render prop design pattern is used to share code between components by passing a function as a PRP to a component so this Function which is typically referred to as a render prop return a react element that gets rendered so this pattern allow a component to be more flexible and reusable as the parent component can control the rendering of the content in its child component so you know

what let me just give you example of there here you can see I'm now calling my component and I'm passing a render as a prop and inside there we are now passing a function which is taking a count as a Perimeter and now we are returning some sort of a jsx which is saying like the current count is that specific count now we have our component and inside that component we are now destructuring that specific function or prop whatever you want to call that and now we are using that inside our jsx and here you

can see we're now passing a count to there so you know what let me just write some code then you will get to know what I'm talking about so now let's see the Render prop in action so first of all we are going to be creating our components folder and inside there we have to create our component. TSX and I'll use my rafc inside there and now let me go ahead and go to my app and render this component right here so I'll use like count and now let's just render there and I'm going to

close there and now we going to be passing our render prop as a prop to this component so how in what we are going to be doing there well first Of all we have to create some sort of a prop and by way you can give it any name that you prefer but in my case I'm going to give it the name of like render and here we are going to be passing our function and now let's just use our paragraph and it's going to say like the current count is and now let's just render

or count which this function will take as a perimeter and now let me just paste there and we are going to be also returning a number from there because It's going to be a number now let me just save my file go back the next thing that we have to do is that we have to use this render prop inside our component so let me go ahead and go to my comp component and first of all we have to destructure there so that we can use that now let me just save my file and now

inside this component we have to create our state so I'll use like count and then set count it's going to be equals to the use State and the initial Value will be set to zero now let me just save this file and the next thing that we have to do is that we have to render our component or our function to be precise so I'll use like render and here we have to P that count inside there so as soon as I do that and we are now getting a typescript error so I'll just annotate

there with any here you can see we are now getting the current value of zero inside there and I can also change that to like 10 it's going To give us that 10 value and so on and so forth now let me just create a button which will allows us to increment or decrement or counter so I'll use like button and I'll just say like increment and when somebody clicks on there then we want to F this increment function which we are going to be creating in a few seconds so now let me just copy

a name of there go back and cons increment and then we're going to be only incrementing our counter by one so I'll Use like count plus one say our file and now if I click on this so it's going to increase my counter by one so let me just set that to zero once again save this file and as soon as I click on there it's going to just increment my counter right here so this was just a simple example of a counter component now let me give you yet another example so what I'm going

to do is that I'm going to go to my app but first of all we have to create something called the Mouse tracker so I'll use like Mouse tracker. TSX component I'll use my RFC inside there go to my app and now I'm going to just remove this component from here I'm going to also remove that from there and now let me render my mouse tracker component and close there here we are going to be passing our render and inside this render we have to provide our function so I'll use like position and Position will

be set to any and inside there let's just create our Paragraph so I'll use like paragraph it's going to say like Mouse is at this position so I'll use like come on first of all let's just provide one position and then I'm going to provide another position so I'll just proide first of all the uh position position and Position will be set to and also I'm going to provide my position and Position will be set to Y now let me just save my file and it shouldn't be I'm treating it as an object it should

Be just position dot like so position dox and position doy and now let me go ahead and go to my component and use this render from inside that component first of all we have to destructure this so we can use the inside our component next we we have to Define our position so I'll use like position and set position and this going be equals to the UST St come on UST stad and the initial value will be set to X and x-axis will be set to zero and y axis will be also Set to zero

okay and next we have to go ahead and go to our UI and then we have to render our position or our render props so I'll just use like render and here inside there let's just provide our position inside there and I'm going to also annotate the as any for the time script to go away and now we are getting a mouse at zero position and also on the y- axis of zero position we can only change there to like 10 and 20 maybe like so manually now we are getting like Mouses at this accordion

I'm going to go there and this should be xaxis and this should be a y axis and now that's looking better so the next thing that I want to do is that I want to set that to zero once again I'm going to also set the y- axis to uh zero once again and now we are going to be attaching the mouse move so I'll use like on Mouse move and when our Mouse is moving so in that situation we are going to be firing this function which is a handle uh Mouse Move and we

are going to be also providing a bit of styling to this so I'll just provide like height and the height will be set to 100 VH now let me just save my file and create this function right here so it's going to track our mouse cursor so I'll use like con uh handle Mouse it's going to take the event and I'll just annotate the as any and I'll just provide my set position and inside this we are going to be getting the x value and x value will Be set to that event object and we

only want to get the client xais and then for the y axis we want to get like event and we only want to get the client Y axis in that situation so now it's going to gives us the perfect accordant anytime I move my mouse it's going to gives us a different accordance so it's going to giv us the x value and it's going to also gives us the Y value so yeah this is how we are going to be creating our render prop and then this is how we are Going to be using there

inside our component so this is going to be basically the most simple challenge in this entire course so what do you have to do basically you have to just create the data fer component by using the render PR design pattern which you just saw a few seconds ago so you need to create a reusable data fer component that fitches the data from the API and passes that data to his child component using the render prom design pattern so The child component will receive their data and can render it however it chooses so basically you'll need

to perform these three steps like first of all the data feure component then the render prompts and you'll also have to keep in mind the error handling so let's start from the first one which is a data fure component so the data fure component should take the URL as a prop and FES the data from that specific URL so while the data is being fetched the Component should show a loading spinner or some sort of a message in this situation and once the data is fetched the component should pass the data to its child through

a render prop so then the render prop will receive the data we the render prop and render and renders it however it wishes like basically you can just provide any kind of UI for them and you will also provide a typescript for them so finally you will also need to take care of the error handling like If there is some sort of error so you have to show that specific error to the browser or to the user so these are the expected outputs so like while the data is being fish show a loading spinner or

some sort of a loading message or something like that and once the data is being fet render the list of users and if there is an error for example like wrong URL or network issues then show that specific error so give it your best shot if you can do it that's completely Okay then come back and watch the solution and now here is my solution so I'm going to go ahead and just create a component folder so I'll just create like components folder and inside there we're going to be creating two components or files rather

so I'll just start from the data peter. TSX so now let me go ahead and just Define my component with the name of dat picture and I'm going to also annotate that as a type generic it's going to Just render a few things so first of all we need to restructure the URL and also the render prop okay so then we have to create an interface for then so that it will not gives us that typescript error so now let me just Define my interface with the name of data fer props and here we have

to specify the type of generic and it's going to take the URL and we have to annotate the as a string we also have to specify the render prop and it's going to take the data and we have to Specify that like it's going to also take the the type generic or the null value and I'm going to also provide the is loading so whenever it is loading so there going to be a Boolean and we also have to specify the error so it can be either a string or null and now we have to

past the as a GSX do element come on do element like so now let me just sell my file but why in the world I'm providing a semicolon there we have to specify a comma there and comma there I'm going to copy the name of that let's just copy there and I'm going to annotate my component with these props and now inside there and here we also have to specify the type generic and now inside this component we have to define a few States so first of all we are going to be defining a state

for the data so I'll just give it the name of like uh C data because inside there we're going to be storing our data and then set data is going to be equals to The used St and initial value will be set to n and here we have to specify either the type generic or null value next we have to define the loader so I'll use like is loading and then set is loading is going to be equals to the use stand and the initial value will be set to true and now we have to

define the error and then set error it's going to be equals to the US and the initial value will be set to null and we also have to annotate our component to either Take a string or null value so that's going to be at for our states next we have to fetch our data by using the use effect so now we are going to be performing the side effect so in this situ ation we have to use our use effect okay so now inside there going to be passing a lot of things but first of

all we have to provide the dependency array and for the dependency areay we are going to be only passing that URL which we are now taking as a perimeter okay so Whenever that URL changes so we want this function or this component to reender okay so what do we have to do we have to use like set is loading and initially we have to set that to true and then the set error we have to set that to null and now we have to fetch our data so now we we are going to be using

that fch you can also use xuse if you wanted to and now we are going to be passing that URL as you can see right here and based on that specific URL We're going to be fetching our data so now let's just use like the dot then and the dot catches and all of that stuff so uh let's just get the response and response. Json convert that data to the Json and then finally we have to use our data so it's going to give us that data so we have to provide that data to our

state so store that data inside the state and let's just use our set is lowering and set that to false now let me just save my file and that's to done And what about the catch I'm going to just write like Dot and catch statement and here we only have to specify that error and inside there we can use like set error if we got one then we're going to be rendering that to or error stat all use like m e s a g e and then set is loading and set that to false initially

now let me just s my file and this is how we going to be fetching our data by using this use effect now let me just close there the next thing that we have To do is that we have to return that render prop or P all of that data to that render so we are going to be passing that data and also the is loading and also that error and we have to just return that from this data feature component now let me just copy the name of that and now we have to export

that so we can use that in other file now let's just say our file close there and now let's just use that inside our component so I'm going to go ahead And just Define my users component like users. TSX and I'll just use my RFC inside there now let me go ahead and just remove that and we have to render our data uh what do we call it data fer component which we just Define and close them not like this but like this there we go so the first thing that we have to do is

that we have to specify our URL so I'll just past like URL and we're going to be fetching our data from this specific URL which is this Json Placeholder typei code and then that specific users I'm going to also Define interface for this so let's just Define there I'm going to give it the name of like um interface user and inside that is a space ID and ID will be set to a number and also the name will be set to a string now let me just copy that from there and annotate my component with

that user so let's just past there close there and paste that array inside there so this is how we going to be fetching Data but now we also have to tell like how we are going to be rendering that data so I'll just use like render and here inside there we have to render our data so I'll just past like data that is loading which we also fetching come on is l o a d i n g and also the error okay so now let's just go back from there and inside there uh we have

to first of all check you know let's just save our file inside there we have to first of all check if we have some sort of error so In this situation we are going to be returning the div and I'll just say like loading dot dot dot and I'm going to also render the div right here so this file and what about the error if we have some sort of error so in this situation let's just render like and then we have to render that specific error right here a r there we go now underneath

that we have to return our content so that we can see them on our UI so I'll just return like UL I'm going to use that UL Right here and inside the use the data if we got the data then we're going to be iterating over through that data so I'll just go ahead and provide my li and for this lii we are going to be providing a user. name okay and here we also have to specify the key and the key will be set to user. ID now let me just save my file and

this is how we are going to be fetching our data and this is how we are going to be rendering our data and so on and so forth so finally The moment of truth and we are still getting that app that's because we have to go ahead and go to our app component and render our users component inside the close our file and what the hell is going on let's just close there now let me just refresh this so here you can see we are now getting all of that users right here from that API

so this is how we are going to be fetching our data and that was it about the render prompts design pattern in reactjs let's talk About the 10 stack query so 10 stack query previously known as a Rea query is a popular Library used in Rea application for managing server State and hand link and synchronized data fetching it provides a set of hooks that simplify the process of fetching caching synchronizing and updating data in Rea application so that was just a quick definition of what a t St query is but 10 St query is also

a framework agnostic which simply means that you are not only Limited to use the inside the reactjs you can use the with different Frameworks and libraries like VJs angularjs and so on and so forth but it is commonly used in the re community so yeah the was just a definition of what a 10 St query is and now let's get into the setup then you'll get to know what I'm talking about so now let's make a setup 4 or coding Journey so what I'm going to do is that I'm going to open my terminal and

I am going to make a setup For the reactjs I'll use npm create we at latest and now I'm going to give it the name of like uh 10 demo or something like or 10 stack demos would be fine so I'll choose reactjs with typescript now I'll go into the T demo and now install every single thing inside there now that's successfully done so I'll just clear this out the next thing that we have to do is that we have to go to the 10 St query and now we are using the version five of

L St query so they are Now calling them themselves like powerful asynchron St management for typescript and reactjs in yeah I mean typescript with JavaScript reactjs solid JS VJs SW and also angular okay so yeah if you want to install that the first thing that we have to do is that we have to go ahead and go to this uh dogs now here you can learn a lot of stuff about there but I'm going to click on this installation and now let me just copy this link and now let's just place it Right here and

I'm going to just hit enter so it's can install that in my machine so yeah that's to done now I'm going to go ahead and go to my tailman css.com and click on the getting started go to the framework and guides choose weight and now I'll just copy uh yeah this line of code or command to be precise and now let me just place it right here so it's going to install the tailin CSS inside my project so now I'm going to just hit enter so it's going to Initialize my tailin CSS right now and

now I'm going to just copy there and now first of all we have to open that folder inside the vs code and this is how it looks like so I'm going to go ahead and go to the tailin config file and I'll just replace that content with this new one next I'm going to copy this index. CSS directives and now let's just go ahead and go to this um index. CSS file remove every single thing from there and replace it with this new one I'm going To remove the public folder and I'm going to also

remove the SS folder remove the f. CSS go to the f. TSX file remove every single thing from there and I'm going to use my RFC inside there to create my initial component now let me just copy this line of code and now I'm going to place it right here so that we can see everything is working or not so I'm going to use like npm run Dev and now let's just test this out okay so yeah everything is working the way we Exp him to work and that was our entire installation and now let's

get into the 10 St query in a more great detail detail now let me show you how we are going to be fetching and managing that data without using the 10 St query and then we are going to be refactoring that code to use the 10 St query so what I'm going to do is that I'll just close all of that files and here I'm going to just Define a component folder and inside there I'll just create a component with The name of like without uh 10 query. TSX I'll just use my rafc inside there

and now let's just go into the ftsx file and now I'm going to register that component right here so without the 10 St query now I'm going to save this file and here you can see we're now getting this message which means like everything is working the way we expect him to work so the first thing that I want to do is that I want to Define my stats so what I'm going to do is that I'm going to Just Define a St for the ID and then set ID is going to be equals to

the use St and the initial value will be set to one now I'm going to create a St for the data and then set data that's going to be equals to the use State and the initial value will be set to null yeah definitely you can provide your typescript and all of their stuff but I'm not going to so now we are going to be creating a St for that is lowering and also set is loading and it's going To be equal to the use St once again and the initial value will be set to

true now we have to define a state for the error and then set error and it's going to be equals to the use State and the initial value will be set to totally null now underneath that we have to now fetch the data so which means like we have to do some sort of a side effect so I'll just use my use effect and the initial value I mean like not the initial value but for the dependency Array we're going to be only providing that ID because we're going to be creating some sort of a

button and anytime we click on that button so it's going to fetch a new data so now I'll just import that use effect from the VJs and now let's just do a bit of side effects so first of all we have to Define our race condition so I'll just use like RC for the race Condition it's going to be set to false and if you guys don't know what a race condition is you Don't even have to worry about that because 10 step query will handle that behind the scene for us so now we have

to create a function so I'll just use that handle uh PCH and it's going to be equals to the synchronous function and now inside there first of all we have to get the set is loading and we have to set that to true now we have to use the set error and we have to initialize that to the null value and now underneath that we have to use the try and catch Blocks so for the catch block we have to specify some sort of error and it can be anything and now I'll just use like

set error and here we have to specify like error message and we're going to be also providing the finally so I'll just choose like finally and here let's just use our set is lowering and provide the false value to there okay now for the triy block what we have to do we have to fish the data so I'll use the con Str going to be equals to A and then Fetch And here inside there now we are going to be fetching the data from this URL which we've already used in like almost all of my

courses so we are now fetching our data from the Json placeholder typi code.com for/ and now we are going to be fetching the data from a specific to-do now underneath that we have to take care of the rise condition so if we have the race condition in that situation we're going to be returning our data but if That's not the case we have to do a check so if you don't have the response okay so in this situation we're going to be throwing a new error okay so I'll use like error pitching data now we

have to render our response. statistics uh like so and now let me just save my file and now finally we have to convert our data to the Json response I'll I'll just use like a word then response. Json and now we have to store in some sort of variable so I'll use like cons response Or you know what result would be fine and now we have to set that set data and we have to specify the result that result or all of their data to there so now that's to done now we have to execute

this function so what I'm going to do is I'm going to copy a name of there and we have to execute this function right here now I'm going to also provide a cleanup function for the rest condition so just return this data and now from this data I'll use like RC For the rest condition now it's going to fetch all of that data and now the next thing that we have to do is that we have to render that data to our UI so what I'm going to do is that first of all I'm going

to be checking like if we have the loading state in this situation we are going to be using the H1 and we have to provide like loading dot dot dot and now if that's not the case and we got some sort of a error so in this situation we're going to be using the H1 and we Have to render that specific error but if we have the data so in this situation we're going to be only rendering that data by using that Json stringify so I'll use like json. stringify and here we have to specify

our data inside there now if I save my file here you can see we are now getting all of the data so if I just refresh that we are now getting that loading lower and also now we are getting our data which means like everything is working the way we exp him To work but now I'm going to be creating a button and here for this button we're going to be just saying like next or next page and when somebody try to click on there then we're going to be finding this function which is a

set ID and now here we have to specify our previous ID today and now we have to use our previous id+ one and also I'm going to be providing a bit of classes to this so I'll use like pairing all around will be set to 20 Rim now let me just save my File and here you can see we are now getting this huge button but you know let's just change that to like maybe three rims and now I'll also change the color of that to like background totally black and text totally White let me

just sve my file it is still looking supremely big and yeah I guess that's going to be fine so if I click on that here you can see it's going to gives another data and another ID so if I click on there once again it's going to Fetch our data and now it's going to show our data but I want you to notice like here you can see we have to do all of that stuff for just fetching our data like here you can see we have to define the state for the ID then for

the data then for the lowering then for the errors and also we have to take care of the race conditions and by the way if you guys don't know what a race condition is you don't have to worry about that because now T day quy will Handle that for you so you don't have to worry about that now let me just expand that first of all you have to take care of your lowering logic and then you have to write a lot of try and catch blocks and then you have to even check for the

responses and then finally you have to send your data you have to also take care for the catching and then you have to take care for the error logic and finally logic and there's a lot of hurdles and here you can see you also Have to take care of the loading logic and also the data and then finally you're going to be showing some sort of a data to your UI so yeah this is like cool you totally can write your code like this but just imagine for a second like if you want to fch

a lot of data in a lot of components it can get totally messy and totally tedious so for this kind of situation we are going to be using something called the 10 St query and trust me you are going to love that A lot so you know what let me just refactor this code you know we're not going to be refactoring this code so we are going to be starting from scratch and then we are going to be refactoring this code to use the 10 St query let's talk about that query client thing which we

just saw a few seconds ago so if you say that query client is the heart of 10 St query you won't be wrong you will be totally correct but you know let's just explore the bit more so the query client Is the core object int query that manages the State and configuration of queries and mutation in our applications it serve as the primary API for interacting with the library and by Library I mean the t St query Library enabling us to perform actions like fetching the data managing the cash and setting up the global configurations

so as I said that query client is the heart of the entire 10 St query so yeah you know let me just explore that bit more The first thing that we did is that we imported the query client which is just a heart of the 10 St query from where from the 10 St query from the react query next we create the instance of the outside from all of our component here you can see there and now we have to use that inside our entire applications so for then we use the query client provider which

is just a context and now it is taking the client and now for the client we are now providing this query Client basically all of that code simply means that we want to use that 10 step query inside our entire application you can think about this code is like this like basically this entire thing which we just imported and we created the instance of there and now we are providing there or even wrapping our entire application by using our query client provider context this all code simply means that we want to use our 10 St

query inside our entire application and that's it now let's talk about the main Hook from the 10 St query which you're going to be using like 99% of your time time maybe not 99% of your time but I guess 70 or 80% so I'm talking about something called the use Query Hook from the 10 St query so this is how we are going to be using there first of all we are going to be writing the use Query it's going to take a object and inside that object we're Going to be providing a query key

as a key and for the value we going to be providing some sort of a unique key to there and don't you worry because we're going to be explaining all of them one by one and after that we are going to be using another property which is called the query function or query FN and then we're going to be specifying some sort of a function which will allows us to fetch our data so you know what let me just break this down one by one first of All we have the use Query which is a

function that help us fish and manage server data in our applications then we have a query key and then now we are specifying a to-dos today and you can specify anything today like you can specify I don't know it's going to totally depend on your situation where you're using there but in my guess I'm going to be fetching some sort of a to-dos so that's why I specify to-dos inside there so this is a unique Identifier for the query it's like a label saying like we are working on that specific items or that to-dos in

my case and finally we have our query function and now we specifying a fetch data function to there and this specify the function which is a fetch data that will actually get the data and it will be called to retrieve their to-do items so yeah that was just a basic theory about uh the use Query hook and now let's just use the inside our apps okay so I'll Just close there and now I'm going to go ahead and go to my components folder and now we are going to be creating another component which will be

a with uh 10 query. TSX I'll use my RFC inside there let's just go ahead and go to our appom and this line out now we have to return the withd 10 St query so now let me just write this my file close there and here you can see we're now getting over with 10 St query which is looking cool the first thing that we have to do Is that we have to import something called the use Query function or Hook from where from the 10 St query so I'll use like use Query and next

we have to use there so I'll just use like use Query and inside there we have to specify our object and for this object we are now going to be providing the query key and that's going to be set to array and inside this array we are going to be specifying some sort of a unique key to there I'm going to provide a Comma the next thing that we have to do is that we have to provide a function which will allows us to fetch our data so we have to use our query function and

now we have to specify some sort of a function for there so I'll use like fetch data as my function which we are going to be creating in a few seconds so I'll use like con data and it's going to be equals to this use Query function and now outside from there I'm going to just create that function right here so I'll Use that cons fet data and it's going to be a function it's going to be basically an asynchronous function because now we are going to be using or U what do we call it

asynchronous operation so that's why it's going to be an asynchronous fun function and the first thing that I want to do is that I want to fetch my data so I'll use like Fetch and we want to fetch our data from the https and then Json come on Json placeholder do type I code.com for/ too now let's just store The inside the response variable and now let me just save my file next we have to check for the response so if the response is not okay so I'll use like response is not okay in this

situation we're going to be throwing a new error it's going to select Network response was not okay and finally we just have to return the response. Json so use like response. Json and I'm going to execute there and this is how we are going to be fetching our data and by the way I know A lot of you thought that 10 St query is only used for fetching the data but that's not the case we are now fetching our data by using this fetch method we can also use x use for fetching the data but

t query will not only allows us to fish our data it's going to also allows us to manage that data which means like we don't have to create a state for the lowering for the errors and so on and so forth we don't have to specify the try and catch blocks we don't have to take Care of the RIS conditions and a lot of more stuff so you know what let me just uh log that data to the console so I'll just use the console.log of data and now let me just save my file now

I'm going to right click on there go to my inspect element go to my console and yep we are now getting the data right here so there is something wrong inside the Json placeholder I'm not quite sure about that so you know let's just close that here you can see I'm now providing Triple T's right here so let's just change that to this URL so so now let me just save my file and now let me just refresh that and here you can see we're now getting our data so first of all we have our

data which is now array of 200 arrays and we also have like error we also have the failure and is error and we have a lot of these things which we are going to be destructuring in a few seconds so we also have like is it loading or Not So currently it is not Loading so it's going to gives us a false paused or not so yeah this is not paused is it pending or not yep it is not so is it stale or not so yeah it is uh true and stale is something which

we are going to be exploring in a lot more great detail but not right now so we're going to be destructuring a lot of things but now you get the idea that H Aquarium not only allows us to fish the data this going also allows us to manage that fetch data so you know let me just Close there so to prove my point I'm going to also install the exos library and I'm going to also show you that we can also fet your data by using the exos so what I'm going to do is that

I'm going to open my terminal and if you guys don't know what xus is you don't even have to worry about that so I'll just use like npmi and then xuse so it's going install the inside my project and now that's all done so I'll use like npm run Dev and I I'm going to comment this Line out and now let me just create another function which will be a PCH data and here we're going to be using the ASN operation once again now let's just use like response and then aw an X use let's

just get the from the xus first of all now we can use the get method and so on and so forth so I'll only use the get method and inside this get method I'm going to copy this link and now let me just place that link right here and now we are going to be Only returning that response right here okay so yeah or you know it's going to be a response. data to be precise and now we can totally log that to the console now let me go ahead and go to my inspect element

once again and go to the console and let's just refresh there now we are getting that data we're also getting that error and so on and so forth so now you get the idea that here you can see we can also use exuse we can use Fetch and we can use a lot of things So this is how the syntax will look like first of all you have to import the use Query and then inside the use Query you going to be providing an object inside this object the first key will be a query key

and it's going to take a unique key you can specify like different kind of keys if you wanted to you can proide like even a gibberish if you wanted to and then you have to specify the query function which will allows us to fish your data you can Definitely copy this entire thing and you can place it right here but in my case I'm not going to because I know it's going to look a lot ugly and now I'm teaching you all of that stuff so you know what I'm going to have to just uh

stick with this convention so then stly done and now that you get the idea that how in the we're going to be fetching our data but now let me show you that we no longer have to create a state for the is lowering like we're Going to be writing like uh is loading and we no longer have to create a state for like is error and so on and so forth we can totally destructure that from our 10 St query so how in the all we're going to be doing there we can just use this

D structure method or syntax whatever you want to call that we can totally destructure the data which will be the actual data which we are now fetching we can also destructure the error and we can also destructure The is lowering and we can do a lot of stuff so now that we successfully destructured them and now we can totally use that right here so if you have some sort of error so I'll use like if it is loading so in that situation we going to be only writing this H1 which will say like Loring dot

dot dot and if you have some sort of error so in that situation we be only creating a paragraph it's going to say like an error occurred at this uh location or at this position so Right like error. message and now let me just save my file and finally we have our data which we can now render to our UI so I'll just close there and inside this D I'll just write my H1 which which will be a data now underneath there let's just write or pre and here inside there I'm going to be using

like json. stringify and here we have to pass our data and null value and also or two okay so now let me just save my file and here you can see we're now getting our data And we have a lot of data right here so we can now scroll through there and now that you get the idea like how the we're going to be using our 10 St query to fetch our data so yeah it is as simple as that let's talk about another Concept in t query which is called the D duplication so the

D duplication means that if we try to fish the same data multiple times at once so it will only send one request instead of many D duplication helps avoid asking for the Same data over and over again so that was just a quick theory about the D duplication and now let me show you the inaction so here you can see we have our cache which is just an object and now we are going to be using this code to fetch our data so now here you can see we have our use Query inside our use

Query we are now passing our query key and for the query key we are now passing a random number then we have query function which will allows us to get a Random number so in the first render we are going to be getting this random number which is like 0.6 uh 55 and so on and so forth but on the second render what do you expect to get you might be thinking like we are going to be getting some random number once again but no we going to be getting that same number once again and

why is there that's because we are now passing that random number as a query key to our use Query so which means like if we Already have some sort of a data already available inside our cache it's going to only gives us that already available data but if we specify some other key for our query key then it's going to gives us another kind of random data so if you try there once again like for the third time still we are going to be getting that same response and why is there because it's going to

go to the cash it's going to ask from where cash do you have something to share with me And it's going to say yeah I already have this random data it's going to gives us that random data but if we specify some unique key forward query key then it's going to gives us a new random data so that was just the theory of the D duplication and now let me show you the inaction okay guys so now let's see the D duplication in action so I'm going to just create a new folder with the name

of components and inside there we're going to be creating a component With the name of D duplication. DSX and I'll use my RFC inside there now let me go ahead and go to my app and just remove that app from there and provide my D duplication come on d d l i c a o and S my file and this is how it looks like right now so the next thing that we have to do that we have to import the use Query from the re query so we import the use Query um we have

to import them manually so now let me go ahead and go to the 10 St query and then react query and now we have to use that right here so I'll use like the use Query I'm going to execute and now in side there we are going to be providing our object and for this object we're going to be passing a query key and now let me just P like that same code like the random number and now underneath there we are going to be just providing a query function which allows us to generate a

random number so I'll give it the name of like Get random Number and now let me just Pride my comma there and from here we are going to be restructuring a few things like data and now it's going to be equals to this use Query so now underneath that we have to render or let's just go back for data right here so I'll just use like data and I'm going to say like random number is and now let me just P sa right here sa my file and the final thing that we have to do

is that we have to just create this function so that we can see The results all used like this function and inside this function we are going to be only returning the promise so I'll just use like promise. resolve and here let's just pass our math. random now let me just execute this s my file and here you can see we're now getting this random number but now if I go ahead and go to my app component once again and if I just duplicate this of my file here you can see still we are now

getting that same number as compared to the First one and why is there that's because of the D duplication and now let me show you the 10 stack query D Tools in action so I'll use like 10 stack query and I'm going to go ahead and go to there and here you can see we have our Dev tools so I'll just choose there and the first thing that we have to do is that we have to install there so I'm going to copy this command and now let me open my terminal and I'm going to

to make that a bit bigger and now let's Just stop there and here we have to just use this command and hit enter so it's going to install the tquery diff tools inside our project now then you're done I'm going to use npm run once again now let me go ahead and go to my main and here we have to import this so I'll just uh import it right here I'll use like import the react query dep tools and now let me just hit enter so it's going to import it right here next we have

to use so that we can see the inaction so I'll Use like react query diff tools and now let me just close that and here for the initial is open uh we are going to be setting there to false so now let's just say our file I'm going to open my Local Host right here and here you can see we're now getting our icon so if I click on that it's going to gives us their diff tools right here so we can now filter stuff we can see the sort status we can do a lot

of stuff with there like whether something is sted or Not St or Something like that so yeah there was a 10 St query D tools let's talk about the stale time so the stale time refer to the duration during which the cash data is considered fresh and during this period the data is served from the cach without triggering the background refes which can improve the performance and reduce unnecessary Network request I know that was a lot of gibberish which I just said but you don't have to worry about that so if you get it cool

if you Don't get it you don't have to worry about it because now I'm going to give you an example which will help you a lot so I want you to imagine for second that you're using some kind of a social network application suppose you're using either Facebook or Instagram or Twitter or X or whatever you want to call that you are using that for 5 minutes so in that 5 minute you are now getting something called the stale data you're now getting that data which is already Available inside your cash so stale simply means

that you are now getting outdated data but suppose if you want to get a new data so for there you will need to refresh your page so if you refresh your page it's going to give you something called the fresh data which simply means the new data so St data refer to the outd data and fresh data refer to the new data as simple as that so now let me just write some code and then you'll get to know what I'm talking About so now let me show you the stale time in action so I'm

going to go ahead and Define another component with the name of St time. TSX and I'll use my rafc inside this go to my app and register this component right here so I'll comment that line out and I'll use my St time and close it save this file so now we are getting a stale time I'm going to also open my Dev tool so that we can see everything a bit better okay so that's tot done and I'm going to go a Bit fast because I don't want to waste a lot of your time because

we already cover all of that stuff so I'll use like data and then error also there is loading from where from the use Query and now let's just import the from mode H query it's going to take the query key and for the query key we have to specify what to do and I'm going to also provide the query function and here it's going to be set to the fetch data function now let's just sa our file and go back and Here we have to create our fetch function Sol use like f data it's going

to be equals to this asynchronous function and inside there we have to get our response so we are going to be using the fetch right like so and we're going to be fetching our data from this URL now let's just store that inside the response variable and I'm going to check if you don't have the response. okay so just throw this new error and it's going to say like Network Response response was not okay and I'm going to also return the response okay not okay but Jason and this is how we are going to be

fishing our data and now let me just also render that data right here but first of all we have to check for the loading there so if you have some sort of a loading instead in this situation we're going to be using H1 it's going to say like uh lowering dot dot dot and also we have to check for the error so if we got some sort of Error then we're going to be returning this H1 once again and error at this error. message now let's just sa our file and finally we have to render

our data so I'll just use my H1 and I'll just write my data and I'm going to also write a pre and here we have to just use our uh what do we call it Json do and now I'm going to close that here we have to specify our data null value and two now let me just sell my file and here you can see we're now getting our data So now let's just refresh there I'm going to also close there for a few seconds so you guys can see everything a bit better so now

let me just refresh there and what are we getting we are now getting wor stale data so how do I know this is a stale data here you can see we are now getting our to-dos which means like this is already available inside your cache so if I H my mouse over today it's going to gives us that this is a stale data which means like this is Already available inside your cache so if I want to provide my own stale time I can totally do that let's suppose I know that I have some sort

of application and which will not fetch our data that quickly so I can totally specify my stale time right here so I'll use like St time and here we can specify our milliseconds and minutes and something like there so I'll only specify like 5,000 only wait for 5 seconds and then gives us over St data so now let me just Save my file and now let's just refresh there and here you can see it's going to gives us first of all the fresh data for five seconds and after 5 seconds it's going to gives us

a stale data or our data will become a stale this is how you can say that so you know what that's a lot of talking so now let me just refresh there once again so currently my data will be fresh and after 5 Seconds my data will become stale so yeah there was a stale time and you can specify Like uh 5 million or billion or something like that but in my case I'm going to only specify like 5,000 for 5 seconds let's talk about the refetch interval so the refetch interval is an option used

to automatically fish data at specified interval so it allows us to keep our data fresh without requiring a minimal intervation so which simply means in some situation we would want to fetch our data after some delay or after some time so for that kind ofu equations You're going to be using the refet interval so you know what let me just show you the inaction then you'll get to know what I'm talking about okay so now let's get into it so the first thing that I want to do is that I want to create my component

with the name of refetch interal uh I guess that's going to be fine. TSX so I'll use my rafc inside that go to my app and register that component right here so we have a Refresh interval so let's just import that close this save my file and now we are getting our refret interval which means like everything is working the way we exp him to work so first thing first I'm going to go ahead and just Define a St for the current ID then Set current ID and it's going to be equals to the US

St and the initial value will be set to one now we are going to be using our use Query to fish our data not queries just a use Query so let's just go back I'll Use my use Query and grab that from the 10 St query and put the query key and here is going to be to the to-dos or to-do rather and here we are going to be also passing the current ID for The Unique ID okay so let's just provide our comma and provide a query function which allows us to fish our data

so I'll use like fish to do and here we have to pass our current ID inside there okay so I'm going to also destructure a few things so I'll just destructure first of all The data then the error and finally the loading so is loading God damn it is loading like so it's going to be coming from the use quy now let me just Define this function right here so I'll just place this coding we are not doing anything crazy but it is now taking ID and now we are passing that ID to that specific

to-do and based on that we now getting that specific to-do okay so that's all done so I'm going to also hide there and now let's just use the Inside our UI but first of all we going to be using the use effect for the side effect so I'll use like use effect and here uh what I'm going to do is that let's just provide or function and here it's going to take the dependency array of empty dependency array now we have to get the set interval and pass or Arrow function inside there and it's going

to say like Set current ID and we have to provide our previous ID that's going to be set To um previous ID is less than 200 now we are assuming that the data which we are now fetching is equal to 200 items but if that's not the case so in in that situation we are going to be using our previous ID plus one but if that's also not the case so we are going to be only returning one okay and here we also have to specify 5 seconds for the interval so I'm going to store

the inside a variable so I'll use like interval it's going to be equals to the set interval and Finally we have to just uh clean this up so I'll use like return and now inside there we have to use our clear interval and pass our interval inside there so it's going to just clean up our interval or you can say that it's going to unmount our interval so let's just hide there now we have to check for the lowering and also for the errors right so if we have the lading so in that situation we

are going to be rning our H1 so let's just use our H1 and it's Going to say like uh loading one loading dot dot dot and also we have to check for the error if we got one so in that situation we are going to be returning H1 and error we have to render our error right here okay so that's also done now we have to go to our UI and inside this UI so I'll just write H1 of too and here we have to use our not pre P there we go and render our

toos inside this I'll use like uh json. string IFI and password data null value and also second and and Then we have to create a button and this Buton will say gives us a next to do and also when somebody clicks on there we are going to be fing this function which will just change the Set current ID inside then we're going to be passing our previous ID come on previous ID and what do we have to do we have to just use our previous ID is less than 200 in this situation we're going to

be using our previous ID plus one but if that's not the case we are going to be only Using one okay so that's totally done now here you can see we are now getting their data if I click on this button so it's going to giv us another data but in some situation we would want to fetch our data in some specified interval so for this situation we're going to be using another op or another property which is called the refetch interval so I'll use like refetch interval and here we can specify the duration so

I'll just use like 5 seconds so now if I save my File and now I'm going to just refresh there and wait for 5 seconds so two 3 4 5 and bang it's going to gives us a new data now I can wait for five more seconds and it's going to gives us more data and so on and so forth I'm not clicking on that button it is now refresing that data again and again by itself and that's because of this refetch interal property in some situation we would want to fetch our data from multiple

endpoints at once Like for example from the to-dos from the comments from the post and so much more so how can you go about doing that by using the 10 St query and 10 St query already have a hook for there which is called the use queries so the use queries is a hook that allows us to execute multiple queries in parallel and manage the result in a unified way this is useful when you need to fish data from multiple sources or end points in a single component but want to handle each Query set separately

for example loading error data while keeping the queries independent so this is just a use queries and now let me show you how the syntax will look like so first of all we would need to call our use queries H and it's going to also take a object as a perimeter and inside that object going to be passing something called the queries array okay so inside that array we have to specify the query key for each endpoint we are going to be passing An object and inside each endpoint we're going to be passing the query

key and some unique key for that query and also a unique function which will allows us to fetch that specific item from that specific Source okay so we can now fetch our data from the todos from the post from the comments and so much more so that was just a theory about the use queries and now let's get into the coding then you will get to know what I'm talking about let's suppose if I Want to fetch my data from both of these end points like for example from the post and also from the todos

so how in the what we're going to be doing there by using the 10 St query and that's totally simple and easy so the first thing that I want to do is that I want to create another component with the name of uh PCH from multiple and points. TSX and I'll use my RFC inside then now let me go ahead and register there right here so I'll just return my fetch from Multiple endpoints and now let me just close this file sa my now let me just close this sa my file close this out and

here you can see we now getting one label which means like everything is working the way we expect him to work so what I want to do is that I want to Define two states so I'll use like first of all the current to do ID and then Set current uh to do ID and this going be equals to the US St and the initial value will be set to one okay we're Going to be also creating a State for the current post ID so I'll use like post ID and then Set current post ID

and can be equals to the use State and the initial value will be also set to one now we are going to be fetching our data from multiple end points by using the use queries H so I'll use like use queries and now if I hit enter so it's going to import the from the 10 St query react JS or react query to be precise okay so now I'm going to execute there And inside there it's going to take object and inside that object we're going to be specifying the queries or maybe this is totally

optional but we can totally provide the options for there so in this situation we're not going to be providing any options today but I just provide my object and inside this object now we are going to be passing our queries so I'll use like queries and now here there's going to be an array and inside this array we can Specify our end points from where we want to fetch our data so first of all I want to fetch my data from the post then I want to fetch my data from the to-dos so I'll just

provide my query key and the query key will be in this situation A toce and also I'm going to specify my function which we did not create not yet but we will create that in a few seconds so I'll use like fetch todos and that's done and now we are going to be also fetching our data from the query keyless Just Prov there we are going to be also fetching our data from the post and we are going to be also providing our query function to there so I'll just uh give it the name of

like fetch post and now let me just save my file now that we specify your quick iies the next thing that we have to do is that we have to create this function so our Fetch to-dos and also our fetch post I'm going to also store that in some sort of a variable so I'll just give it the name Of like um I don't know maybe results would be fine it's going to be equals to this use queries okay now let me go ahead and just create this function right here which one allows us to

fish our data so I'll use like fish todos and here there's going to be an asynchronous function so I'll just Mark the as an async function and here this is Fitch over there I'm going to store the inside the response so use like a we and then f F my data by using just a fetch so I'll Use like fetch you can also use the X use if you wanted to and now we are going to be fetching our data from this endpoint okay and now let's just check if we don't have response. okay response.

okay so in that situation we are going to be throwing a new error and I'll just say like Network response was not okay but if that's not the case we are going to be only returning the response. Json and now let me just execute this sa my file and it's going To allows us to fetch our data from the from this Endo right here let me just highlight that it's going to allow us to fetch our data from only the to-dos now if you want to fetch or data from the fetch post as well so

well we have to just create this same function now let me just duplicate that I'm going to change the name of this function to fetch fetch post and now we are going to be also changing there from the Todo to post and that's going to be it that's All the thing that we have to do right now now you can log that on to the conso so I'll just write like console. log of results and I'm going to also provide a bit of separator so if you can see there and I'll just save my file

right so we prevented your connection to Json placeholder type code because it was dangerous type malicious this mous software that could harm your data computer on network God damn it you know what uh let me just test This out because I'm not building the in the production but you saw the okay like it this API is not secure so it will install some malicious data in your computer and it will try to hack your computer or maybe I don't know but from my antivirus software but uh you know what now let me just refresh there

and here you can see we are now getting two datas so the one will be from the to-dos and if I expand there so here you can see we are now getting different toos And also one will be from that post so now let me just expand there and we can check this data out and these are all the post okay so now I can totally render my data inside my UI so this is how we are going to be fetching data from multiple endpoint and now we have to render the inside our UI so

what I'm going to do is that I'm going to just destructure the Todo query and also the post query from where from the results so I'll just uh destructure there from The todos query and also from the post query it's going to be coming from this result so now that we successfully fetched there the next thing that we have to do is that we have to just check for the lowering stad you don't have to do that if you don't want to do that but I want to do that so I'll write my todu query

do is Ling and then lowering or post query do is Ling if one of these states are lading so in this situation we are going to be just returning some Sort of a lower so I'll just write like lowering dot dot dot and we also don't have to provide these curly braces because we can also do that in one liner so that's tot done we can also check for the errors if you got some so I'll just use like to do query. error or post query. error okay so in this situation we're going to be

only returning a div and this div will say like an error occurred or something like that and then we are going to be just rendering our Error so to do query. error if we have the error then we want to show only the message of that error but if that's not the case we are going to be also checking for the Post query error if you got the error from there there so in this situation we are going to be getting our message that's also done now finally we have to just extract the data from

our post query and also from our to-do query so first of all let me just get the data so I'll just use like uh To-do's query and then we're going to be storing the inside the too come on todu data it's going to be equals to that data now let me just duplicate that and change that to uh post query so I'll use like post query and here we also have to change that to post data now let me just save this file and finally we have to render the inside our UI yes I'll just

write my H1 or to do or something like that I'll also write my pre okay because here we're now rendering our data as a Json format so I'll just use like json. stringify and here I can just s like to do data come on it should be one t not twice so I'm going to have to remove one two from there so to do data. find here we have to specify the to-do and then to-do can be basically anything so I'll just write like to-do and any you can specify the type there but I don't

have a lot of time so I'll use like to do. ID if that triple equals to that current ID which we are creating right here which Is now initially set to one so if that is the case so in that situation what do we have to do we have to return that data I'm going to also specify the null and also the second perimeter for my stringify that's also done and finally we also have to create a button which allows us to get new data so I'll use like button and I'll say like next uh

to do and here we going to be also attaching a function but you know we're going to be doing that in a few seconds And here you can see we are now getting our to-dos and this is our first to-do and I'll also provide a bit of styling to this so I don't know maybe background will be set to totally te 300 and the text will be set to totally white maybe and yeah we are getting our button but it should be maybe I don't know maybe 700 would be fine okayy 700 and now there

looking yeah not better but it is looking looking so yeah I guess that two would be fine and this is looking better Now we have to attach a function for this button so when somebody clicks on there then we want to fire this function which is a handle next to do click and now let me copy the name of that go to the top and create that function right here okay so I'll just Define my function we not going to be doing anything crazy but we are going to be just getting new data so I'll

just uh write like Set current to do come on set why am I not getting oh this because I'm Creating the outside my bad so we have to Define this function right here and I'll use like Set current and I'll use like Set current to do is not post but to do ID and here we have to specify our previous ID and then we are going to be using like med. minimum and provide our previous ID + one and also the produce data. length Okay so what the hell is going on so I'll use like

length and now let me just save my file and here you Can see the user ID is one and the ID is also one and this is the title but now if I click on there and it's going to gives us a new data but I don't know why it is not giving us there let me just go ahead and go to my console and we are now getting some sort of error I click on there it should be getting us a new data why it's not working so let's just go back a bit I'm

going to clear this out and now I want to click on there and it's not working and I know Why it's not working because I spend a lot of time figuring out what the hell did I did wrong and here you can see we're now passing a current post ID and it and it shouldn't be a post ID it should be a current too ID now let me just space my current Tod do ID save my file and now let me just refresh there and I want you to watch what happen so if I click

on there it's going to giv us the second ID and also it's going to change the title let me just click on There once again it's going to gives us new data anytime I click on there that's totally done but I also want to render my data from the post so it's going to be quite simple and easy so we just have to create H1 once again and I'll also provide a bit of BRS and also HRS right here and I'll just say like this is a post so I'll use like posts and now underneath

there we are going to be using our pre once again and now let's just use our json. stringify and here we Have to specify our post come on here we have to specify or post. ID post data. find and now here it's going to take a post and that's going to be any and now we are going to be checking if post. ID is triple equals to the current post ID so in this situation we are going to be getting our data I'm going to also specify a n and also second for the Json stringify

and it should be inside there there we go so that's all you done and now underneath there we going to be also Creating our button so I'll just create that button which will say like next post and now let me just save there and we are not getting anything we are only getting what post to I don't know why but there from here and we have to past that right in here there we go and now let me just close this s my file right now and we are now getting all of our data so

now we are getting our to-dos and also we are getting our post but now if I click on that nothing will happen Because we have to attach our event handler and also I'm going to just copy all of these styling from there let me just past the styling right here and also when somebody clicks on there we want to fire this function which is a handle next post come on post click okay so now let me just copy a name of there and go to the top and create their function right here so we are

not going to be doing anything crazy but I'll just create this function right here and Inside this function we are going to be using Set current uh post post ID in this situation now we have to put our previous ID and if m. minimum previous id+ one and also we have to render our post data. length Okay so now let me just save my file and if I click on there so it's going to giv us a new post right here and also if I click on this data so it's going to gives us a

new to-do so this is how we are going to be fetching our data from multiple sources Or multiple end points at once by using the use queries hook now let's talk about the use mutation hook so the use mutation Hook is used to handle mutative operations so what are mutative operations mutative operations are creating updating or deleting data on either the back end or the remote server so unlike the use Query which we just saw a few seconds ago which is used for fetching or caching the data now we are going to be learning about

the use Mutation so which is specially designed for actions that changes the data like either create update or delete that specific data so how the syntax will look like first of all we are going to be using the use mutation hook and we are going to be placing a function which allows us to mutate or change that specific data then we are going to be passing an options object and inside there we can pass like on mutate and this function will be called before the Mutation function is fired and also we are going to be

passing the on error which allows us to handle the error cases then we have the on success which allows us to handle the success cases and also we have the on settled which will be called once the mutation either succeed or fails so that's just a basic theory of what a used mutation is but now let's get into the coding then you will get to know what I'm talking about now let's see the use mutation in action So what I'm going to do is that I'm going to Define another component with the name of mutating

data. TSX would be fine I'll use my RFC inside there and register there right in here so I'll use like um mutating data now let me just R it there to the Dom and here you can see we now getting our data which means like everything is working the way we expect him to work so inside there we're going to be first of all getting our query Client so I'll use like use Query client let's just get there and I'm going to store that inside the query client function or not a function but inside the

query client variable and I'm going to also Define my St so I'll give with the name of like title and then set title and it's going to be equals to the use State and the initial value will be set to empty string this like that now let me go ahead and go to my UI and what I'm going to do is that I'm going to Just create my H1 which will be a create new too would be fine and now underneath we are going to be creating our form so this form will not take any

action but it will take the on submit so when somebody submit this form we're going to be firing this function which is a handle submit and you know what we're going to be doing that a bit later because now it's going to gives us a lot of Errors so now inside there we are going to be creating our input field With the type of text I'm going to also specify the value and we are going to be getting the title and now let's just past that value inside there okay so we're going to be also

passing the own chain so then we're going to be using that set title and here we have to password event. target. value inside there and also for the placeholder we are going to be passing like add or enter and that's St done underneath we are going to be Creating our button which will allows us which allows us to add I'm going to also P the type and the type will be set to totally submit come on what the hell submit like that and now if I save my file that's to done and here you can

see we are now getting our input field and also our buttons so you know what let me just provide a bit of styling today so for the classes I'll just provide like border it's going to be it yeah I guess that's looking cool and for these Styling we're going to be only attaching like background toally black off yeah I guess that that would be fine and text will be set toally white and yeah that's allt cool we don't have to care about the styling for now and now when somebody try to submit this form so

I'll use like own submit then we are going to beiring this function which will be which we are going to be creating in a few seconds now let me go ahead and go to the the top and here we're going to Be creating that function like handle submit it's going to take that event and it's going to be coming from the re. form event come on like that and that's all done we also have to provide the HTML form element as our generic and now inside there we have to use our event prevent default and

that's going to be done we're going to be also checking if the title. trim value like if we don't have any spaces or if you do have any spaces then we are going to be only Returning the that's all done and now here we have to somehow mutate our data or send or data send our data like so so how in the world we are going to be doing there let's just see how we can do there the first thing that I want to do is that I want to Define my own interface for the

to-do so I'll use like interface to-do and here inside there let's just proide our ID and that's going to be optional and we have to provide a number then we have to provide The title and the title will be string we also have to provide completed and that's going to be a Boolean now let me just save there and now we are going to be using that to do again and again for the typescript so now here we have to use or use mutation which will be coming from the 10 St query so it did

not import the okay it did so now we are going to be using that right here so it expect two argument so if I H my mouse over today so it takes the mutation Function and also it takes the option so let me just past it right here so now let me put my object and inside this object we going to be placing the mutation function which will allows us to change your data so we are going to be creating this function in a few seconds but I'm going to just space it right here like

post the to-do because we want to post that to-do and next we have to provide our options so when we successfully add word to do so in that Situation what do we have to do I'll just use something called the query client. invalidate queries so what in the word is that invalidate queries and why should you want to care about that so when a new to do is edit calling the invalidate query and we also have to past the to-dos inside there ensures that the next time you access that to-do they will be fetched from

the server including the newly added to-do as well it is just used for the better Experience and you don't even have to worry about that so what I'm going to do is that I'm going to just pass my to-do right here which we just created a few seconds ago so we now passing there right here and now we have to store there in some sort of a variable so I'll just give it the name of like result and that's going to be done now we have to create this post to do which allows us to

post our data so I'm going to go to the top and now let's just create our Post too so I'll use like post too and it's going to take an asynchronous function and now we have to provide a new to-do today and that's going to be that to-do okay so what I'm going to do is that I'm going to just write my aw pit and now we are going to be changing our data from this URL from for/ to Dos okay and also we have to provide our options so we are going to be adding

that options in a few seconds but first of all we have to store the inside the Response where like so response it's going to be equals to that a and that fetching data and now we have to provide our response and by the way you are not only limited to use the fetch you can use xus you can use whichever kind of solution that you prefer but I'm using the fetch because I know a lot of you know JavaScript but a lot of you don't know what xus and all of that uh new stuff is

so that's the only reason I'm using fetch but if you know something Else like some other Library you can definitely use that inside your fetching data or mutating data so I'll just give it the option of method and here we have to pass our post as a method and also we have to provide our headers and for these hers we're going to be setting that to content type come on content this going to be set to application SL Json and now for the body we are going to be adding that newly created body so I'll

just use like json. stringify and Then that new too okay so it should be to do like so there we go and now what do we have to do we we have to check for the response so if we don't have the response. okay so in this situation what we have to do we have to throw a new error so use like throw new error and it's going to say like Network response was not okay but if that's not the case we are going to be only returning response okay and I mean like not okay

but uh Jason there we go God damn it Jason Json there we go and now we have to execute there and this is how we are going to be fetching our data first of all we have to tell like where we want to fetch our data then we have to provide which HTTP method we want to use then we also have to provide our hers and finally we have to add a new data which allows us to add a new data so now let me just close there and even I'm going to also close there

so it's going to gives us that result and now we are Getting a lot of stuff now it is giving us an error so what I'm going to do is that I'm going to add my error or to do there we go so now it's going to just remove that error and now we make console log that result to the console so I'll use like result now let me just close this save my file go into the inspect element go to the console and now let me just refresh there now it's going to give this

thir object so inside this object we have the context you know Let me just make the a bit bigger so you guys can see everything a bit better so inside there we have our context data error and we have a lot of things but the only thing we are now interested in is only the data also the error and also that muted function by using this muted function is going to allows us to change our data so we would need that error we would also need this muted function and we would need the status so

if we can find the Okay there we go so we would also need that status as well so now let's just use that I'm going to close that now let me just remove that and here we now going to be destructuring the muted function which will allows us to muted or change our data we also have to access all restructure the error and also the status from the case analysis used there inside where UI but first of all we have to mute it our data so I'll just remove that from here and now we Are

going to be using that muted function and now we are going to be passing a title the completed flag on the completed will be now set to totally false and now underneath that we have to use our set title and make that as a totally empty string now I'm going to go to the bottom and here we have to do a lot of things so let's just remove there here first of all we have to provide your status so if your status is equal to pending so in this situation we're Going to be providing the

label of aing do dot dot if that's not the case so I'll just proide like a to do now let me just save my file and now underneath that you also have to take care of the error so if you have some sort of error in this situation we are going to be just writing our H1 and I will say like an error occurred or something like that and now let's just render or error do message right here and now underneath that we also have to check for the Stratus once again so if our Stratus

is set to success in then situation we are going to be uh just providing a label I'll say like come on successfully there we go and now let me just save my file and now we are going to be adding a new to-do so I'm going to go to the inspect element then I'm going to go to the network Tab and now we are going to be adding a new to-do so I'll just write like new too and now if I click on the add to-do and it's going to gives us the 2011 and also

the 204 so which means like our new to-do is successfully it right here I'm now providing a new to-do and here you can see it is now set to post we now posting that data to that to-dos and it is now successfully created we can also see the preview and everything is working the way we expand him to work we can also click on these dep tools and here we are going to be going into this mutation and now I'll just add something else like uh Something else okay so if I click on there and

here you can see it's going to add there right here so if I click on there can see more details right here so variables are title something else and completed is now set to false the context is set to null and we have all of the data which you can see by yourself so that was amazing and this is how we are going to be adding a new to-do by using the use muted hook okay so welcome to the last topic of this Course which is called the pagination so let's just create the p a

g i n a t i o n penguin. TSX and I'll use my rafc inside then save this file go to the app and register there right here so I'll use like pagination and I'm going to close that save this file and here you can see we're now getting our pagination which means like everything is working the way we expect him to work so the first thing that I want to do is that I want to create my current page so I'll Use like uh current page and then Set current page and it's going to

be equals to the use State and the initial value will be set to now I mean like one and then we are going to be also creating a page size so I'll use like page size and it's going to be set to 10 pages 10 data page would be fine that's all done now we have to fetch our data by using the use Query so I'll use like use Query not queries but just a God damn it let's just remove the and get our data by Using the use Query singular not plural I can't even

speak that word and we have to specify the query key and the query key will be set to todos and also the current page and we're going to be also providing our query function and this query function allows us to fetch our data so use like page to do and here we have to pass our current page and also the page size like so and now we have to store them some sort of a variable or you know what we are going to be Restructuring our data right away we don't want to store that in

the variables because we already know what we are going to be getting so we going to be getting the data also the error and also the is loading from the use Query now let me just create that function so I'll use like con Fage to do and here it's going to it's going to be an asynchronous function so it's going to take a page and the default value will be set to one and it's going to Also take the limit and the default value will be set to only 10 okay so now let me just

sa my file and now let's just fetch our data so I'll use like a and fetch and here inside there we're going to be doing a pait of magic now that we already know that where we are going to be fetching our data which means like we are going to be fetching our data from this URL so we are going to be fetching our data from the Json placeholder do type I code.com for/ toos And question mark we are going to be getting what data from the page and Page will be now set to this

Dynamic page which we are now taking as a perimeter and now we are passing a value for there which is now set to only one okay so we are going to be passing the data to dynamically so I'll use like page and it's going to also take the limit and the limit will also be totally Dynamic so I'll use like limit and this is how we are going to be fishing our data this Is going to be the URL by which we are going to be fishing our data and it takes a page like from

which page you want to fetch your data so we want to fetch your data from this first page it is now taking this page as a perimeter and we are now providing the default value of one today but we are going to be also changing this page whenever we click on the next button so for there we already Define our state and we've provided the initial value of one today And now we are passing that current page as a first perimeter to this fetch toos and it is now taking there right here and we are

also providing the one as a default value today next we have the limit like how much data you want to get from this uh use Fed so we initially specify the initial value of 10 today but we are going to be also change I mean like we are not going to be changing there but the initial value we now specify 10 to there okay and now we Are just rendering the 10 item right here so now let me just remove these empty spaces from here because they are annoying and we have to store they in

some sort of variable so like response would be fine and now let me just save them and now we have to check so if we don't have the response. okay so in this situation we are going to be throwing a new error so throw throw the th Pro new error is going to select Network response was not okay there we go and return response. Json and execute there now let me just save my file and that's St done now we have to take care of the loading and also the error St so if we have

the is loading so in this situation we are going to be returning our H1 and it will select Ling dot dot dot and if we have the error so in that situation we are going to be returning where H1 and I will say like in or you know what just Error would be fine and I'll just render my error. message right here save this file now let me go ahead and go to my UI and provide my UI right here so for this H1 I'll select to do and for the pre uh I'll just render

my data right here so I'll use like json. stringify and put my data null value and two now underneath that we going to be also creating our previous button and also our next button so I'll just create my div and inside this div we're going to be creating our Button which will select previous or previous page and we're going to be also creating yet another button which will s like next uh next page so that's all you done so when somebody clicks on this button so we have to get the previous data so we going

to be using like handle previous page and also we have to disable if our current page is equal to one so we are going to be dis disabling that button and also when somebody clicks on this next page button so in This situation we're going to be firing this function which is a handle next page and now let's just create both of these functions right here I'll start by defining this function which is a handle previous page and I'll use like const handle previous page and inside there we have to use our Set current page

and here we have to pass our previous page like so now we are going to be using m. maximum or Max here we have to provide our previous page just remove one from There and for the second perimeter we are going to be passing one to there that's only done now we have to create our handle next page and we have to Define there right here so I'll use like cons handle next page and inside there we going to be using our Set current page and it's going to take the previous page and we have

to just add one to that previous page so it's going to gives us like basically the next item and it's going to gives us the previous item now We are getting all of their to-dos and we have 10 items right here and you know let's just style these buttons so that we can see them a bit better and I'll provide like I don't know background to T of 300 I guess that's going to be fine and I'm going to also provide margin for the bottom of 10 maybe yeah that's totally looking cool and piring all

around will be set to three yep that's looking cool I'm to basically copy all of that styling and put that right here Remove that margin for the bottom and change the color to Crimson uh 300 oh not a crimson but I don't know maybe Canan Canan God we have a lot of colors in t CSS and I can't even choose one from them oh my God you know let's just search for a color I guess purple would be fine and yeah we are now getting our purple button which is looking cool if I click on

this so load over data now it's going to gives us 11 12 till 20 and now If I click on this previous page so it's going to giv us that 10 and it's going to start from the one and then it's going to go through 10 if I click on there once again it's going to give us 20 more item if I click on there once again so it's going to gives us a loader it's going to start from 21 it will go to 30 item and so on and so forth you get the idea

so this is how we going to be performing a pagination intense query let's talk about testing So what is testing and why should everyone care about that so testing is the process of checking a program or application to make sure it works correctly it's like double- cheing your work to ensure everything functions as expected so there are a lot of types of testing but in this course we're going to be covering something called the automated testing so there are three flavors or types of automated testing so we have a unit test we have integration Test

and we have a end and test so let's just break them down one by one the first one we have is a unit testing and this course is totally focused on unit testing so what is a unit testing and why should everyone care about that so unit testing is where developer test individual component of an application like functions or classes to ensure their work is expected and these test focus on small isolated part of your code okay so that was about the unit Testing and in this course we're going to be covering a unit testing

so next one we have is a integration testing so integration testing or integration testing is about checking how different part of your application works together while unit test focus on individual component which we just saw a few seconds ago integration testing ensure that module database apis and other services interact correctly so that's just the integration testing and we're Not going to be covering that in this course and finally we have end to end testing so end to end testing simulates real user scenarios to make sure the entire application work as expected from start to finish

and it t the whole system including the front end and also the back end if you are aware of those topics and any external Services which we're not going to be covering like any services and that kind of stuff to ensure everything integrates and Functions properly in a real world environment so that was the e2e or end to testing so here you can see I have this application right here which is not looking that cool I know there but this is just an example so if you want to break this down by using an end

to end testing so this is how we are going to be breaking this down here you can see we are now testing individual component or just a specific part of this application so this is how we are going To be testing there by using the unit test and what if you want to test that as integration test so if you want to do that so this is how we are going to be testing the the combination of these component and we can see how this component combined together works and and finally we have a end

to end testing the back end and the front end and also the services and all of that kind of stuff and we're going to be testing the entire application so that was just a Quick theory about what is a testing and now let's talk about the Frameworks and their pros and cons let's talk about the testing framework so there are a lot of testing Frameworks that you can choose from so we have just we have vest Cypress play right mocha chai there are a lot of them but in this course we're going to be only

using and we're going to be only focusing on the vest and why is that that's because vest is the fastest it Support ecma script it supports typescript and it also supports jsx on the other hand those other Frameworks are also fast but not as compared to the vest and also they support esm but as experimental okay and I'm not sure whether they support typescript and jsx or not but vest does and this is the future so that's why we're going to be focusing on the we test so now let's make a set of four our

testing coding Journey so what I'm going to do is that I'm going to open my terminal if I can open that today oh there we go I'm going to use npm create we at latest and let's just hit enter I'm going to give it the name of like uh react or not react not react but unit testing demos okay demos there we go I'm going to choose Vana and then I'm going to choose JavaScript not typescript but JavaScript and now I know a lot of you will ask me hose what the hell why aren't you

using a typescript well that's because I'm using a JavaScript because we are now learning about the unit testing and it involves a lot of edge cases so I want to show you that as well and once we jump into the reactjs part then we are going to be using the TSX which means like reactjs with typescript so don't worry about that and if you want to choose typescript you can totally do that but I'm not going to and trust me you're going to love it so let's just choose JavaScript and I'm going to use npmi

Okay first of all we have to go into that unit testing demos and now let's just use our npmi to install there and now I'm going to open there by using my vs code command which is a code dot so it's going to open there right here so this is how it looks like so I'm going to go ahead and go to my public and remove there then I'm going to go to the SRC and totally delete there and now let me recreate my SRC folder so I'm going to just uh click on that icon

and give It the name of SRC and now we have to install the vs what I'm going to do is that I'm going to open my terminal and I'm going to just type like npmi and then DD for the D dependencies and I'm going to give it the name of like vest and let's just set enter so can install there inside our package.json or inside our current repository so I'll just use like package.json right here and here you can see we have our weat and we have our we test with the version of 2.1.8 and

I'm pretty sure if you are watching this video in in the future so this version will be definitely Chang okay so let's just close there and also I'm going to go into my peg. Json once again I don't know why I just closed there and now let's just create our script so I'll use like test and then we have to just write a v test so now if I save my file and that's it that's it for the setup and now let's just close there okay so now let's write a basic code Which we are

going to be using inside our testing so I'll just first of all create a file with the name of like Matthew tals U LS JS and now inside there we are going to be doing craziness so first of all I want to create my ADD function and it's going to take the A and B as a perimeter and we just want to plus both of them so that's going to be my ADD function now let's just create our subtract function subtract it's going to also Take the A and B as a Perimeter and let's just

subtract a from B and we also have to create a multiply and it's going to also take a and b and let's just use a * B I'm going to use a * B and it's going to multiply there and finally we have to create yet another function for the Divide it's going to also take a and b as a perimeters and now let's just use like if our B value is equal to zero so we want to throw some error so I'll use like throw new error and I'm going to select division By zero

is not allowed allowed there we go let's just go back save my file and also fin we have to just return or a divide by B now we have to export all of that functions so we can use that in another file so I'll use like export and also export here and also export here and finally for the division function as well so now let me just use there so that we can use this function inside other file so then stly done now let me just close there I'm going to go ahead And go to

my root directory and inside there we're going to be defining yet another folder which will be forward test so you can either give it the name of like test and here you can see it's going to change the folder icon and I've personally seen a lot of other developers who uses this convention which is a double underscore which means like Dunder and this is a python thing so you don't have to worry about there and then they just write like test and Then double underscore once again so still we are now getting that same icon

right here if you prefer this syntax definitely go for there but in my case I'm not going to so I'll just give it the name of like test and hit enter and now inside there we are going to be creating our file so whenever we are creating our test file first of all we have to ask ourselves is that what in the world are we want testing so we are now testing our math utilities folder I Mean like math utilities file so in that situation we're going to be creating our file with that same name

you don't have to but I wanted to so I'll use like matth tals do test.js okay so whenever you use the DOT test so you are now telling your compiler that this file will be a test file and here you can see we're now getting the test icon so now if I hit enter right here and this is how how our test file will look like before I get Into more detail first of all I want you to keep in mind that don't worry about this code which I am uh I am about to write

you don't have to worry about the code which I'm about to write because I'm going to explain every single thing about that code in a lot of great detail but you don't have to worry about that so I'm going to just write this code if you want to follow along you can definitely do that but my recommendation will be to do not sweat About this code because we are going to be covering all of them in a lot of great detail so I'll just import first of all something called the describe we're going to be

also exporting I mean like importing the it and also the expect function so let's just use our expect and that's it and we also have to import our function so I'll just import something from let's just go ahead and go to our SRC folder and then our math utilities folder and we're going to be Importing the add function the subtract function the multiply function and or divide functions okaye so now need I'm going to just write a bit of code so which will be for describe and I'll give it the name of like math utilities

and it's going to also take a callback function and I'm going to use my it sytax and it should sum two numbers and now we want to provide our expectation and here we have to call our function which is like two and three as a Perimeter and we want this to be five okay so whenever we do this s file and now I'm going to open my terminal and I'm going to only write npm either D or test you can either give it the name of like T or you can also just write a test

but in my case I'm going to only write T and if I hit enter right here so so it's going to gives us all of their description so we are now testing this file and our describe function name is a math utilities and we are just providing This one test which is like it should sum two numbers and both of the test are now successfully passing okay so I'm going to just close there and now let's learn about all of that stuff in a lot of great detail we just import a few things from the

v test which is the describe it and also the expect so we're going to be learning about all of them in a few seconds but first of all let's start from the first one which is called the describe so what is that describe And why should even care about that so the describe function is used to group related test cases together and it helps organize test into a logical block making the test output more readable and structure and this is totally optional like if you want to provide that you totally can but you don't have

to okay so when we want a group related multiple test when we are working with multiple test which we should be so in this situation we are going to be using the Describe okay so describe only take the description and also the call back function whenever we are grouping related test cases so in that situation we are going to be using the describe so now let's talk about that it or test so you can either use the it or you can use the test so it describe a specific test case so both the test and

it are used to define individual test cases and they work the same way and can be used either one to write a test case so whenever you Are defining your test so in this situation we can either use the it or we can use the test something which I'm going to show you in a few seconds but first of all let's just talk about the syntax so we're going to be either using the it or we can use the test both of them will work exactly the same and it also take a description and a

callback function so keep in mind whenever you are providing that description you have to provide some sort of a meaningful Description for your test cases because later it's going to help you a lot it's not going to only help you but it's going to also help other Engineers when they are working with either your component library or in your project or something like that so that was it about the describing it and now let's talk about the final piece which is called the expect expect is also a function used to make assertion in our test

cases and an assertion is a statement that Checks if the value meets a certain condition like the equality truthiness fals Etc vs expect to check the result of one test is what we expect it to be so this is how the syntax will look like first of all we are going to be using the expect then we are going to be providing some sort of a value today and then we have different assertions so like we have to be and so on and so forth which we are going to be covering in a lot of

great detail in this course So to sum it up this is how exactly our code looks like first of all we are now importing the describe it and expect then we are also importing our function which we want to test now that we know we are going to be testing a lot lot of things so if you want to group this so for that we are going to be using the describe function and then we can provide some sort of a description in my case I provided like math utilities or you can give it any

name that you prefer And now inside the describe we are now providing our it function you can either use the it or you can use the test and then you have to specify some sort of a meaningful description for your test and then inside there we are going to be providing our expectation and now inside our expect we are now calling our function and we already know that function tag two perimeter so which means like we are going to be providing either two and three any value that you Prefer and then we can specify the

output result like what will be the output of that function execution okay so we are now providing like two and three and now we are expecting that to be five and we are also providing minus one and one and we are expecting it to be zero so yeah that was just the basics of describe it and expect and now let's get into the coding and then you will get to know what I'm talking about now I am totally confident because I know that You guys already know this code so I can definitely remove this comment

from here save my file and let's get into our testing so I'm going to also just use expect one more time and I'm going to pass my minus one and one and it should be let's just write to be zero okay so let's just say our file and run our test one more time so I'm going to use like npm test and hit enter so it's going to run my test and both of the test are now successfully passing so if I let's Suppose change that to maybe I don't know maybe 100 like so and

now if I save my file what are we getting we are now getting an error it is expecting five and it got 102 okay so this is not allowed combine like both of them like uh 102 so it's going to giv us like 102 and we are now expecting that to be five so this is not fair it's going to give us an error so now uh let's just get it back now let's just test our subtract function multiply Function and divide function so now underneath this uh it and by the way I also mentioned

there but I want to show you there we can either use the it or we can also use the test so if I copy the name of the test and now we have to place it right here so if I save my file and check this out still all of our test are now successfully passing and every single thing is working the way we expect it to work so you can either use test or you can use the Ed so I'll just Remove that test and I'm going to just replace that with it because I

love it so if you want to use the test you are more than welcome to do that now let's test our subtract function so I'm going to use that it one more time and it should subtract uh one number from another or from the other would be fine or another you can give it like basically any description that you prefer so I'll just provide my expectation and here we have To call our function and I'm going to provide like five and three and we are expecting the value to be only two so now let me

just save my file and here you can see this test is is also passing I also want to show you one more thing now let me go ahead and go to my package.json file and here I'm going to provide a comma this is part our comma and I'm going to just create yet another script which will be a test and then UI and here I'm going to set the to vest And then d-i so now if I save my file and now let me just close this package.json file I'm going to open my terminal once

again and hit control C to stop there and now you know let me just delete there so this is uh click on that trash icon and now we are going to be using npm run test and then colon UI so if I hit enter so it's going to ask me like do you want to install there yes of course I want to install there so I'm going to hit why so it's going to set That to yes and now it's going to take a bit of time to install there that's all done and now let

me just rerun that command one more time okay so here you can see can it gives us our test UI which means like we can see the result of our test inside our application right here and why is that that's because now we install their dependen see inside your project and if you using a v test so it will be available for you but if you're using like G or mocha or Something like that so it will not be available for you so here you can filter your test like you can click on the fail

test if you want to check the skip test if you want to check the pass one or the only test so you can totally do that by the way if I click on this math utilities if I click on there here you can see it's going to gives us the code we can see the code we can see the console values and I'm not quite sure what the hell is is this mod module crap But yeah this is also something and we can also click on the report and every test is now successfully passing you

know what let me just break some test so I'm going to provide like I don't know maybe five and KN I say there and here you can see one of our test is now breaking and which test is breaking this test is breaking so this test is passing I can't even speak English no more so this test is pcing and this I mean like this test is pcing and this test is now Failing so here you can see uh it should sum two numbers and we have our object. is equality so it is expecting zero

and we are now receiving or getting four so we can go ahead and go to the code and now we can see our code right here inside this UI or we can go ahead and go to our code and now let me just fix the sem file and here you can see all of our tests are now successfully passing so that's done and that was our UI if you prefer the UI you can totally see your Test result inside this UI but if you prefer this terminal you can also see the result of your test

inside your terminal so that's done now let's just uh test our multiply function so I'm going to just create yet another test suite and it should multiply uh two numbers come on numbers and here inside there let's just provide our expectation and multiply and let's just multiply 3 by 4 and to be I mean like the expected result to be 12 you Can also provide another expect statement like multip mply there and here we can provide like Min - 2 and three and the expected result to be Min - 6 okay so let's just provide

this our file and here you can see all of our test are now successfully passing nothing is broken right now if I click on there we can also see the code cool so that was our multiply function this is also create a test for or divide function so it should divide one number By another provide your expectation so let's just use our expect and provide our divide function and let's just divide 6 by 3 and the expected result to be two and I'm going to also provide like expect statement one more time and provide my

divide function provide five and two and the expected value to be 2.5 okay so let's just save there and once again all of our test are now successfully passing and everything is working the way we exp work let's just Take care of that throw I'm going to go into that math utilities and also wanted to check for this error if we got the so you know let me just show you another syntax so I'll use like it should throw new error when dividing d i v ding dividing by zero and here inside the is provide

we expect but in this case exped but in this case we're not going to be just calling our function first of all we are going to be using our Arrow function and then we have to call our Function and provide our values like 5 uh divide by 0 and then we can use another assertion and by the way we are going to be learning a lot of them but you don't have to worry about that so let's just use our two throw and division by zero is not allowed there we go so now this is

s our file and here you can see this s is now passing that's only working and I guess that's going to be here so this is how we are going to be creating our function or we can Create our classes and then we have to just import the and also we have to import the describe it and expect and if you wanted to combine all of our test cases so for there we are going to be using the the function and then if you wanted to create our T suit so there we are going to

be using this it and if you want to provide our expectations so we are going to be using this expect then we have to provide some value and then the resulted value and there are a lot Of these to be and to be truthy and falsy and there are a lot of things but yeah we are going to be exploring that in a few seconds all right guys so now let's make a setup for testing challenges or challenging testing whatever you want to call there so now let me just right click on there and open

my terminal and I'm going to make it a bit bigger so you guys can see everything a bit better like so and now I'm going to use like npm create one Create we at latest and I'm going to choose or you know first of all we have to give it the name of like um testing challenges or something like that I'm going to choose vanilla JavaScript and I'm going to choose JavaScript now let me go ahead and go to the testing challenges and I'm going to use npmi to install all of the dependencies inside there

so that's toally done now let me open there in my vs code and this is how it looks like so I'm going to just Remove the public folder and I'm going to just remove this entire SRC folder I'm going to recreate there once again now let me go ahead and go to that package.json file and here inside the scripts I'm going to just create another script for testing so I'll just give it the name of like test and here it's going to be equals to only the vest but first of all we also have to

install the vest so now let me just close there and open my integrated terminal and I'm Going to just write like npmi and then DD and then V so it's going to install that as a y inside my project so that's totally done okay so now that's totally done okay so now I can successfully use like npm to run my test or uh test would be fine so I'll just use like mpmt so we don't have any test so that's why it's going to gives us an error so now let me just stop there okay

so here are all the instruction that you have to read and then give it your best sh if you can do It that's completely okay then come back and watch the solution and then I'm going to give you my solution but at least give it your best sh and I'm not going to read through all of that because it's going to waste a lot of your time and this course is super huge I don't want to make that no longer so once again read through all of that give it your best shot if you can't

do it that's completely normal and then come back and watch the solution so now here Is my solution so what I'm going to do is that I'm going to create a file with the name of like Matthew tales. TS not TS but JS and here we're going to be starting from the factorial and by the way if you guys don't know what a factorial is and recurs is and all of that kind of stuff so you should definitely watch my JavaScript course and also my data structure and algorithm course and you don't even have to

know all of that stuff to follow along with This course but I'm just creating these functions so that we can test there so I'll just uh first of all create my factorial it's going to be taking a n as a perimeter and now inside there let's just check if the number is less than zero so in that situation we are going to be throwing new error in which will say like number must be non negative and now underneath that we have just return like if the number is equal to zero so in this situation we

are going to be Setting there to one but if that's not the case so we are going to be just multiplying there by using this recursion pattern so if you guys don't know what this is you don't even have to worry about that but if you care about it so you can definitely watch my data structure and algorithm course and you know we also have to export this so we can use that in other file case know is create our gcd function it's going to also Take the A and B and now inside There we

are going to be first of all check if B is equal to zero so in this situation we're going to be returning the a so now let's just use that recursion once again and we have to password b as a prator like is the first value and then a mod b okay so now here we also have to export that so we can use that in another file and I can totally bet that this function which I'm about to write you already at least Heard the name of that which is called the Fibonacci series so

I'll just give it the name of like f i b o n a cou c i Fibonacci and here it's going to take a number as a perimeter and inside there first of all we have to check if the number is less than zero so in this situation we are going to be throwing that same error like come on throw new error which will say like number must be non negative EG I and now need that if that's not the case we're going to be Creating a sequences so sequin and now for the first index

we're going to be providing zero and for the second one we're going to be providing a one okay so now we have to over through this so like let I is equal to 2 I is less than that number which we are now taking as a perimeter and then we have to just increment there so let's just use like i++ and now we have to get the sequence and then we have to push that new number to there so we are going to be using Like that same sequence and here we have to provide like

i- minus1 plus the sequence and then I minus two in this case now underneath we just have to return the sequence s our file and these are all the functions that we are about to test okay so now let me just hide there hide this function and also this function so now let me go ahead and create my test folder so test and now inside there we're going to be creating our math UT tails. test.js file and Let's start from the first one let's just grab first of all the describe function then the it function

then the expect function from the v test and now we have to grab our factorial function f t o r i f a t o r i from from where from uh let's just go into the SRC folder and now inside the SRC folder we have our math modules we have to grab the factorial then gcd and also the Fibonacci series now we have to grab that now that we successfully grabbed That the next thing that we have to do is that we have to describe our test Suite so I'll just give it the name

of like Matthew tails and now here let's just remove them and I'm going to be providing my first test case which will be like it should come on it should calculate and here we are going to be our expectation so let's just pass our factorial today and if we specify five we want the result to be 120 and now let me provide another Expectation like if you got some sort of error so I'll just use like factorial once again and provide my minus one and we want to throw a new error so let's just use

like to throw and here we are going to be passing like number must be come on let's just go ahead and go to my Matthew tails and I'm going to copy there from there so let me just copy this entire thing from there now let me just paste it right here s our file and I'm going to be using npm to run my test Suite and here you can see all of our test are now successfully passing so that's done now let me test this gcd function okay so now underneath there we going to be

creating another test Suite which will be like it should calculate c c uh greatest devis right here and we have to provide our expectation call our gcd function Prov 56 and 98 is a WI vales and we want it to be 14 I'm going to duplicate this line of code once again and I'm going to change it to like 101 and also 10 so we want there to gives us like one let me just save there test there once again so here you can see this function is also passing or this test Suite is also

passing so now let me just hide there and the final thing that we have to do is that we have to test this Fibonacci series okay so let's just create our another test suite and it should Bonacci sequence sequence s EQ U nce and inside they provide our expectation and then call our Fibonacci Function and pass Five to there and we want it to be equal if you guys don't know what equal to and then the throw means we're going to be learning all of that in a lot of great details so now let me

just pass like if this is five so we are going to be getting like 0 comma 1 comma 1 and then two and then three okay and now let me just create another expectation for the error so we are going to be passing like little Nai series and if you pass like minus one so We want to throw a new error like throw an error and we want to say like uh let me just copy there from there like number must be non negative I'm going to copy that and now let me just place it

right here I'm going to save this file right now and here you can see all of our tests are now successfully passing and that was it about our math module test cases let's talk about the AAA pattern in testings so what do I mean by AAA a a mean arrange a mean act a mean Assert so how that's going to look like this is how it's going to look like so the first step that we have is a arrange and in this step we set up everything needed for the test like variables mock data and

Etc you don't know where a mock data is but we are going to be covering that in a lot of great detail in this course then the next thing that we have is a act so act perform the action that you want to test like for example calling a function or doing something And the final step that we have is assert so it verifies that the result of the action is what you expect so you know let me just put the in more simple word so imagine you are baking a cake so in the arrange

part you're going to be gathering all the ingredients and tools you need like for example the floor sugar eggs mixing bow Etc and in the egg phase you're going to be mixing those ingredients together and putting the cake in the on and then finally we have The assert so in this phase we are going to be checking if the cake is baked properly by cutting it and then testing it so if the test good and is fully bed you know your steps work so that was just a quick analogy about the a AA so now

let me just explain that in the coring so range is when you gather everything you need for the test and act is when you do the action you are testing like calling a function or doing something and then assert is when you Check if the result is what you expected like testing the cake to see if it's perfect or not so the first step that we have is arrange range and in this step we going to be collecting or set uping the data so we have two variables Like A and B and both of them

have the value of one and then we have the ACT phase and in the ACT phase we're going to perform the action like calling a function here you can see we're now just combining both A and B and storing the inside the Result variable and then finally for the assert we have to verify the result so we are going to be just providing what expect and then we can specify our result variable and then finally we we want to expect some sort of a value from there so you want to expect the value of two

and this is how it's going to look like so you know what let me just write some code then you'll get to know what I'm talking about I will just remove all of their code and by the way you can Find all of their code in my kab repository so I'll also remove them and here I'll just provide like my test or it I'm going to use my it right here or you know let's just provide our test what the hell so it adds numbers correctly come on num numbers correctly in the first part that

we have is AR range and in this part we are going to set up the data like so so first of all let's just create our variable like a and a will be equals to one and then Let's just create another variable with the name of B and B will be set to one as well okay so now outside from there the next thing that we have to do is that we have to act so like perform the action for example like call the function or combine the value so I'll just use that con result

and here is going to be equals to A and B okay and now finally we have to provide our assert so I'll use like assert and here we have to verify the result so I'll Just use like my expectation let's just use our expect and we want to provide the result variable and we want the value to be two and now let's just say our file test this out we are now getting an error that's because we have to import the test right here so I'll just use test comma and now here you can see

all of our tests are now successfully passing so that was our a AA pattern in testing so you know what let's just undo every single step so let Me just undo the God damn it that was a lot of code and let's just undo that there we go so now let's just save our file and there was it about for our math utilities let's just close there and now we are going to be creating yet another file with the name of string utilities or string utils so I'll just give it the name of like string

U tales. JS and I'm going to also create a test file for this so give it the name of like string U Tails uh dot. test.js there we go and Now here inside this string UT Tails we're going to be creating a few function once again and which will focus on the string so I'll just go ahead first of all and Define my con to upper case and it's going to be equals to the string and here inside there let's just use our string. two upper case let's just say our file and I'll just duplicate

that and change that to like to lower case and and I'm going to also change the to lower case and here we are Going to be creating yet another function for the reverse so I'll use like cons reverse r e v RS e and it's going to take the string and then outside from there we have to use like st. split we have to split this out then reverse it out and finally we have to join there so we can see all of our result and now we have to create another function for the capital

or for the capitalization so I'll use like con capitalize and and I hope the spelling Is correct I'm not quite sure about that but here we have to use our or you know what I'm not going to provide that Curly braces so I'm going to use like start do charart add or character at zero and now we have to use the dot two uppercase and execute then I'm going to just add my st. slice off one and then the dot to lower case right here let me just sell my file and that's only done finally

let's just export this so we can use the another file okay so this is how we are Going to exporting there let's just sve our file and let's just go into our string utilities the first thing that we have to do is that we have to import the describe then we have to import the expect function and then we have to import the it that's done we have to also import our two upper case and also two lower case and all of that stuff so two lower case and then capitalize come on not caption capitalize

and also a reverse function From theis Ser file now underneath we have to create our described so let's just provide our described right here and string utilities would be fine and inside there let's just put our test Suite so I'll use like it should return string in uppercase there we go and let's just put our expectation and first of all we are going to be using our two uppercase and pride in lower case hello and we want the value to be upper case Hello so now let me just save my file And everything is running

let me test this out so here you can can see we have another test Suite which means like we are now working with this file and which is totally running now if I go ahead and go to my string utilities to upper case if I change that to like um to lower case maybe lower case so my file here you can see where test is now failing and you already know why it is failing it is failing because now we change this code and function does not behave as it Used to be so now let

me just bring it back and now it is working to only f I'm going to also duplicate that and change that to like word and here let's just change that to word s file yep it is working once again and now underneath there uh we have to create yet another test Fed so it should return string in lower case and now let's just expect uh to lower case or function and here we are going to be passing a hello in uppercase and we want to expect there to Be uh lower case hello and I'm going

to also duplicate that and change there to like lower case word like so and we want to P the word in upper case there we go so let's just sa our file and here you can see our test is now successfully passing and nothing is going wrong if I go there and change that to like uh to upper case come on upper case there we go s our files you already know this going to give us that error right here because we change this one line of code Inside there so yeah that was it about

for our expectation now let me just test that capitalized function so it should capitalize first first letter of string there we go Prov our expectation one more time and here let's space our capitalize function and provide our hello inside there and to B and we want the first letter to be uppercase and the rest of them will be lower case so that's exactly what a capitalize mean I'm going to duplicate there and change the to W in upper case and word in lower case I mean like o r l d in lower case and here

I'm going to just only past the word and let's just save there character a is not a function what do you mean let me go ahead and go to my T Suite oh J add it should be car add character at and now we test is spacing did you just saw that I just made a typo and told me that you are doing something wrong H you got to fix that so this is exactly what Uh unit testing does for us so it should return string reversed there we go and provide our expectation one more

time and here we have to call our reverse function M or hello and we want the value to be o like the reverse of the so here you can see it is also ping but if I just provide like a hello it will not pass because the expected value is hello and we are providing ol okay so now let me just change that to o one more time and I'm going to also provide the final Expectation so let's just provide a reverse and provide a word inside there and we want that to be DL r

o w draw and yeah our test is now successfully passing and this is how we are going to be testing a string utilities and we already saw that this is how we are going to be testing a math utilities like addition subtraction multiplication and you name it next we are going to be testing arrays and that's going to be a lot of fun okay so that's done now let Me go ahead and create another f for the string so string UT tails and once again if you are curious like how in the world all of

their functions work you should definitely watch my data structure and algorithm course in that we already covered like how we can reverse our string how we can capitalize the word what is a palum and reverse pandrum and so on and so forth so you know let's start from the first one which is called the reverse strings so I'll just export There and then we are going to be creating a reverse string function it's going to take a St as a perimeter and inside there we only have to return the string. split method first of all

we have to convert that to the array then we have to reverse that array like all of the content inside that array we have to reverse that and then finally we have to join it back so it's going to gives us the reverse string now let me just save my file and now underneath we have To create here another function which will capitalize our word like Capital Li words and it's going to be equals to this start like it's going to take a string and we have to return or string. replace and come on replace

and here we're going to be pasing a Rex which should look something like this now it's going to take a call back function so we are going to be passing our character and then character come on char. two upper okay so we have to just execute Our function on there now underneath there we have to use our export cons and then is pum and it's going to be taking a string and inside there we have to first of all create our clean string so I'll just uh create my clean St and here we have to

use our start. replace and then we have to use our Rex right here and by the way if you guys don't know what a Rex is you don't even have to worry about that you can just definitely ask CH gbt and it's going to give you All of their rejects okay so now we have to just call over two lower case on there then finally we have to just return like if our clean string is equals to the clean string dos split come on clean string dosit method and now we have to convert there to

the array and then we have to reverse It Out by using this reverse function and then finally we have to join that array back so now let's say s our file and these are all the functions that we are going To be testing right now okay so I'll just go ahead and create a new file with the name of string UT tails. test.js okay so now inside there we're going to be importing our describe function we will also import the it and also the expect function and now here we have to import our functions from

where from or let's just go ahead and go to the SRC folder and then the string utils folder so just first of all grab the reverse string and also the capitalize Word and Isel andrum from there Isel andrum there we go now let me just s there and underneath there we have to create our test Fe by using this describe I'm going to give it the name of like string U Tails U LS there we go and now we have to Define our first test case for reversing our string so I'll just give it the

name like it should reverse a string there we go and now we have to provide our expectation and reverse the string which is that Function which we just created so we are going to be ping like hello and we want there to gives us the result of uh what do you call it all o there we go now if I save my file and here you can see our test is now successfully passing right here and everything is working the way exp him to work so that's totally done I'm going to hide there and now

underneath there we have to create another test Suite so I'll just uh P like it should Capitalize uh the words like the first letter will be uppercase and the rest of them will be in lower case I'm going to just P my expectation and then the capitalized word function and we're going to be faing like hello and then word so we want it to giv us like this first letter will be uppercase and the rest of them will be lower case and same will apply for this one like the first letter will be upper case

and the rest of them will be lower case so now we are Going to be using like to be and here we have to just P like hello and then word let's just say our file check this out here you can see all of our test are now successfully working but now if I change that to like in lower case h here you can see our test will Now fail so that's totally done finally let's just test our palum so it should check come on it should check for pandrum and here we're going to be

passing our expectation like is pum and now we are going to be Providing this pum like r car and we want it to be true okay just a true and now let's just say our file and here you can see it's going toes St true right here and if I just pass like maybe Apple Apple so so it should fail or test now let me just convert there to the RAR once again and now we're going to be passing like another one is SP and R and I'm going to past like hello in this situation

and we want it to be false now if I save my file and all of our test Are now successfully passing so that was I don't know what the hell am I doing right now there was or string utils test cases Okay so so let's talk about how we are going to be testing array so I'll write like array UT tales. JS and here we are going to be writing a lot of your Tails so I'll just use first of all export consum it's going to be equals to this array and here let's just use

our array. reduce uh yeah reduce function and it's going to take the accumulated Value and also the current value so for the rer it's going to giv us the accumulated Value Plus the current value and the result I mean like the starting point will be from the zero so it's going to gives us the sum of that array and also let's just export one more so find maximum value inside your array it's going to take that array and let's just use our math. Max function and spread out our array so it's going to give us

the maximum value from that Array we going to be also using the find uh Min value as well like find the minimum value inside your array so we are going to be using like meth. Min and spread out our array inside there finally let's just use our con filter E1 okay so it's going to also take the array and we are going to be filtering our array by using the filter method and here let's space our call back function and the perimeter we're going to be passing a num and if num mod 2 triple Equals

to zero so which means like it's going to gives us the E1 value okay so now that's to done and these are going to be all of the function that we are going to be testing right now close there close this file close that file as well and create our test file which will be array yours. js. test.js there we go now inside there let's just do our magic the first thing we would need is a describe function we would also need the it and Also the exper now underneath that let's just import our some

function come on some from where from the let's just go into the SRC and inside there we have our array array U Tails we're going to be importing the sum the find maximum the find minimum and also the filter E1 let's just say our file and let's just Define or describe function okay so here what the hell did I just do provide the name of or not the name but the label of Array utilities there we go and let's just provide our first test case we are going to be testing the sum function so it

should return uh correct sum of array there we go and provide our expectation and let's just WR our sum value and here we're going to be passing array so let's just use like 1 comma 2 2A 3 and if we combine all of them or sum all of them the result will be 3 + uh 3 so it's going to give us six so we are going to be using like to b six like so and I'm Going to also provide another array so I'm going to use like Su and here let's just space like

-1 comma - 2 comma -3 so it's going to gives us the6 so let's just use to be 6 minus uh 6 so now if I save my file and test this out so here you can see this is going to to be our string utilities let's just go into our array utilities everything is now successfully passing and you already know why it is passing it is spacing because the resulted value is correct But if I change that to like maybe seven freak out and it's going to gives us an error like wasen what the

hell are you doing fix this error God damn it so okay fixing it boss so you know let's just test or another function which is a find maximum value function so we going to be using like should return the maximum value from the array okay so let's just SP our expectation and find the maximum value and our array so 1 comma 2 comma 3 and the maximum value we Want to expect it to be third value because that's the maximum value inside our array okay so we're going to be also providing our expectation find the

maximum value once again and use 10 comma 5 comma 100 comma 50 so once again the maximum value you want to expect that to be 100 so let's just s our file and still everything is passing and we already know why it is passing it is passing because the resulted value is uh 100 but if I change that to like five Save my file and now it's going to freak us out okay so now let's just test those final one I mean like not the final one but the find minimum one so it should return

the minimum m i n i m u m minimum min Min and then my mom so it should return the minimum value from array so how that's going to look like well we have to provide our expectation and find the minimum not the maximum find the minimum value and provide our 1 comma 2 comma 3 And we already know that the minimum value is one so let's just use comma I mean like do 2b 2B if I can type that today so the minimum value is one and provide our expectation once again find the minimum

value once again by using this array so 10 comma 5 uh comma 2 comma 100 so I'll just proide like 2 B and -2 so let's just say our file and it is giving us an error oh it is coming from this one so we have to change that to uh 100 I don't Know why I forgot that but yeah everything is now passing the way we expect him to pass and that's done so next we're going to be working with objects okay so that was our string util T now let me go ahead and

create another file with the name of array UT Tails do uh not TS but JS and here inside there we're going to be creating three function which will be the flaten array intersect array remove duplicates array and then it's going to be add so I'll Just start from the first one which is a flat array and basically we're going to be using this function in the upcoming video and uh in which we going to be covering something called the design pattern and we are going to be even building our own design system inside there so

we are going to be using this function to flatten our array so we are going to be returning like array. reduce function come on let's just use the reduce and here we have to just pass the Accumulator and also the value inside there and now we can use like array do is array which is a built-in function and here we have to just space the value if there is the case in this situation we're going to be getting like accumulated value and then we be concatenating so concat this flat in Array so let's just use

the recursion which is called the FL come on F L A TN flat array and here we are going to be placing the value but if that's not the Case in this situation we are going to be getting that array and we're going to be concatenating this value inside there and now outside from there we're going to be just passing this array and that's going to be it so that was our first function now let me just collapse there and now we have to create another function which will just intersect our array so we are

going to be using like con uh intersect arrays it's going to take the array of one and the array of Two inside there we have to return the array of one and use the filter on there and password item as a perimeter now we have to get the array two and then we are going to be checking if it includes that item which we are now taking as a perimeter okay so it's going to intersect our array so now let me just hide there and the final function which we going to be creating will be

just to remove the duplicates so I'll use like cons and then remove duplicates and here It's going to take the array and here we have to pass or return and then let's just make a clone off or new and here we have to just use the set data structure which will only gives us the unique values from our list or array okay so it should rmve remove duplicates and now let's just sa our file and now we have to create our test suit for there so now we are going to be using like array UT

tails. test.js and inside there we have To first of all import the described function then the it function then the expect function right here underneath that we are going to be importing a lot of stuff from where from let's just go ahead and go to the SRC I'm going to go ahead and go to the SRC then go to the array UTS and now we are going to importing the flatten array we're going to be also importing The Intercept array and finally the remove duplicates array now let me just save my file and now Underneath

them we have to provide our describe and here I'm going to give it the name of like array U and inside they create our first test case which will be it should flaten l a t and plattin nested nested array and inside there we have to P our expectation like plat in the array inside there we have to just P like nested array so we want provide like one and then two and three now outside from there we going to be providing a four And then like maybe five and then six and we want it

to give us the result of this like let's just split in there so we're going to be getting like 1 2 3 4 5 and six and now let me test this out so here you can see our test are now successfully passing and now it's going to gives us the same result right here like it will flat in our array now let me just hide there and the next thing that we have to do is that we have to create another test suite for the Intersect array so I'll just go ahead and write like

it should find intersection of arrays and here inside they provide our expectation and provide our intersect AR array execute there and now we are going to be passing like 1 comma 2 comma 3 and then outside from there we are going to be passing yet another array and we are going to be placing like 3 comma 4 comma 5 and we want it to be equal to only three so it's going to give us the intersection Of the intersection CCT TI o n there we go now let me just sve my file and here you

can see all of our test are now successfully passing I'm going to also hide there and finally we are going to just removing the duplicates from the array so we are going to be using like it should remove duplicates from the array and here let's just SP our expectation and remove duplicates and now we are going to be ping some sort of duplicates like one Comma 2 comma 2 once again and then 3 comma 4 comma 4 and we want it to gives us the result which will look something like this like 1 2 3

and four now let's just save our file and test this out so here you can see all of our test are now successfully passing and that was our array test cases so now let's talk about how we are going to be testing the object uh tails. JS file so let's just write object U Tails we're going to be also creating uh object ua. Test.js okay so I'm going to go ahead and go to my object UTS and create a few UTS functions so I'll use like cons merge objects and it's going to allows us to

just merge two objects so I'll use like object one and object two and here inside there let's just use our spread operator and just provide our object one and every single thing inside the object two we want to just combine both of them and it should be uh just obj not with the E so that's done now Let's just create yet another one for the Deep clown and if you guys don't know what Json pars and json. string if I means well you don't have to worry about that so I'll use like Json pars and

provide my json. string if I inside there and provide my object value inside there which we are now taking as a perimeter I'm going to also create one for the Deep equal and it's going to be equals to this object one and object two and inside there let's just use what Jason. string ify and provide our object one inside there if that is equal to the json. stringify and object two let's just proide our object two so it's going to gives us the Deep equal now I'm going to just provide my export so that we

can use that in other file that's done now let me go ahead and go to my test file and start testing but first of all we would need to import the describe function and also the it function and also the expect function okay so first Of all we have to also import the merge object uh come on m i you can get there today okay there we go so we have our merge object we have our deep clone and we also have our deep equal okay so now we are going to be also importing there

now let's just create for test Suite so I'll just proide like object utilities u t i l i t i s there we go and remove this second from there and provide my it statement right here Inside there and it should correctly or it should merge two objects would be fine and inside there let's just create our object so I'll use like object one and it's going to just take like a and this going to be set to one and it's going to also take like B and this going to be set to two let

me just duplicate there and I'm going to just change the value to like I don't know this one will be three and this one will be set to four and this should be object two now You want to merge there so if you want to merge there for there we are going to be using our merge object function and we are going to be placing our object one and object two inside there and now let's just store the inside some sort of a variable with the name of like merged it's going to be equals to

this value now let's just provide our expectation so we want to expect the merged come on m e r g e d there we go merged to be equal To this object like uh it's going to have come on let me just save there so it's going to have like a and a will be set to one and B will be set to three and c will be set to four okay so it will just merge both of these values now you might be thinking like where a second it will not combine them well of

course not because we use the spread operator and it's going to overwrite those values so a will be set to one b in this case is now set to two so now we Are just merging them so in this case we now changing the B value to four so that's why we are going to be getting oh I just realized that I made a mistake so it's going to be set to B and this one is going to set to C okay so that's totally done so we have a which is now set to one

then we have B which is now set to three now we have C which is now set to four now you might be thinking like husan what the hell are you talking about B is not equal to Three B is equal To 2 so we are now merging these both objects so in this case b is to two but now we are merging there so now we are overwriting that value from the B so you know what this is going to be our expectation now let me just save my file and here you can see

all of the tests are now successfully passing so now we are working with the object test if I expand there so these are my code and this is my report so also that's toly done so now let's just create another Test Suite so what I'm going to do is that I'm going to Define like it should be clown an object and inside there let's just create our object object so I'll give it the name of like original r i o r i g i n a l there we go original IND this can be equals

to the A and A will be set to one and B will be set to a nested object which will have the C property and which will be set to two now underneath there let's just make a CL of there by using our deep clown Function which we Define so we have to specify our original inside there and I'm going to store that inside the clown variable like so and now here we are going to be providing our expectation so we want to expect the original b. C value which means like that two value to

B2 so I'll use like to B and here we have to specify to sem my file and here you can see our test are now successfully passing as you can see there right here okay so that's all You're done but now if I want to like modify that original value okay so if I use like um clown dob do c value if that is equal to three and here we want to use our expect St so let's just remove the and expect that import or expect and here we have to specify our clone. B.C value

to B3 as we already know that we are now changing that value right here and we are now changing that from 2 to three so that's Why we want to expect that to be three so as you can see right here all of our test are now successfully passing and that is something that we expected so now underneath it I'm going to use like it should uh correctly check deep equality between two objects and now let's just provide a few objects right here so I'll use like cons obj1 and that's going to be set to

the a property and a will be set to one and B will be set to the C property and that's going To be the value will be set to two I'm going to duplicate that like three times and change that to like object two and this one to object three and the values will be exactly the same but expect from this one I'm going to change that to three that's done now what I want to do that I want to use like expect expct and provide my deep equal function right here and then we are

going to be passing the object one and then the object two inside there and there to be True so it's going to gives us the True Value okay and now let me just duplicate that and change that to false and here we are going to be passing the three value because here we're now changing the three the C value to three so we are now expecting that to gives us the false value so as you can see right here all of our test are now successfully passing change that to true and now let me just

save there so it's going to just fail our test and that is something that we Don't want so yeah that was just the basics of test so we learn about the describe it expect and we learn about the objects we also learn about arrays math uh in strings and so on and so forth next we are going to be learning about the tdd now we are going to be working with the object UT tails. JS okay so let's start from the first one we have to export cost the Deep merge and it's going to take

the object one and it's going to also take the object Obj2 and here inside there first of all we are going to be spreading out all of that object so object one and we're going to be storing the inside the result variable and and it should look something like this now we going to be iterating over through our keys so I'll just use like const key inside the object two and let's just check if the object come on object two and now we have to pass our key inside there and the instance of instance of

object and The key in object one so in this situation we have to get the result and pass our key inside there and that's going to be equals to our deep merge function now we are calling our function inside our function so this is a recursion and pass our object one and pass our key inside there now we're going to be using our object two and pass our key inside that okay so now for the else class that's not the case in this situation we're going to be getting Like the result key that's going to

be equals to the object two and pass our key inside there now let me just save my file and I'm going to close there and now underne this full loop we are going to be just returning our result so we can get the result of there now let me just hide there and now we are going to be creating another function which will be our deep Cloud it's going to take the object as a perimeter and now we are going to be only returning our json. Parts and here we have to pass our json. string

I and only pass our object inside there so that's our deep clone and finally we have to create our flatten object so which will be F A TN that an object and it's going to take the object as a perimeter it's going to also take the prefix like how you want to let in there so now the initial value will be set to empty string and now let me just save there so now inside there we have to first of all create an empty object And store the inside the result variable and next we have

to itate over through the key so I'll just use like con key inside the object and inside there let's just first of all get the new key so how in the we're going to be getting there we're going to be checking if we have the prefix in this situation we are going to be just rendering this prefix right here and then Dot and then that key but if that's not the case we are going to be only returning the key and I'm going to store the result of there inside the new key variable which will

look something like this and now we have to check if our object and now let's just space our key inside there if our object. key and the type of object come on object key is equal to is equal to the objects in this situation we're going to be making first of all the clone of our result and then we're going to be attaching this Splat in object and this is a recursion now we are using and Now let's just pass our object and passw our key inside there and now let's just use our new key

like so and I'm going to store the result of there inside the result variable and now let's just save our file we already defined this result right here and now we're assigning this new value to this result variable but if that's not the case in this situation we are going to be getting the result and then the new key and that's going to be equal to the object then key okay now Let me just save my file and finally from this for Loop underneath there uh we are going to be returning the result like so

and now let's just say our file I'm going to collapse that and now the next thing that we have to do is that we have to test this code I'm going to go ahead and go to my test file and create my object uh UT tails. test. TS or JS rather now let me just save this file and the first thing that we have to do is that we have to get the describe the It and also the expect and now need that we have to get a few function which we just created from the

SRC folder and we have to grab that from the object utils so we are going to be getting the Deep merge the Deep clone and also the plattin object so now let's just save there and underneath we have to provide our describe or describe our test weite so I'll just give the name of like object utilities or TS would be fine and Define my first one with like it should Deep merge objects and now inside there let's just uh create a few objects I'll just create like a and a will be set to one and

then create a b b will be set to a nested object and I'm going to P like the x value of two and I'm going to store that inside the object one variable like so next we have to create another object two it's going to be equals to like B and B will have this nested object with the property of Y and the value of three and I'm going to also Pass a c value and this going to be set to four now we going to be providing our expectation like deep merge and here let's

just space for object one and also the object two inside there and we want it to be equal to this result like a will be set to one and then B will be set to this nested object like x value will be set to two and the Y value will be set to three outside from there we are going to be passing the C value and that's going to be set to four and now Let me just save my file test this out and here you can see our test is now successfully passing and it

is working the way we expect him to work so now let me just collapse there and now underneath there we have to test this deep clown function so I'll just go ahead and Define my it like it should deep clown and object and here inside there we are going to be creating first of all our object like the a property will be set to one the B property will Be set to nested object and now we're going to be ping a c as a three and yeah I guess that's going to be fine and here

let's just store the inside the object variable and we should look something like this now we are going to be clowning there so to clown there we going to be using our deep clone function and pass our object which we just Define right here inside there okay so I'm going to store the inside the clown variable and we should look Something like this now we're going to be passing our expectation and P my clone and we want it to be equal I'm going to have to copy this clone and place it right here or you

know what it should be just clone so now let me just change that to clone and to be equal to this object underneath that we have to pass our expect word our clone and not to be object so now let's just sa our file and here you can see our test is now successfully passing and this is how Our code should work now let me just hide there and the next thing that we have to do is that we have to test our final function which will be a flat in object function so I'm going

to go there and here let's just pass or uh test like it should flatten an object and here inside the we going to be first of all creating our object like a will be set to one B will be set to uh yeah the C property of two and I'm going to also P like D and D will be set to this nested E nested object like e will be set to three okay so I'll just P like object and it's going to be not object one but object would be fine and now we have

to pass our expectation call our PL object and pass our object inside there and we want that to be equal to this object like a will be set to one and then we're going to be getting like do c property which will be set to two and now we are going to be getting b. d. e property and which will be set to three okay so now Let me just proide like three right here and now let me just save my file and test this out so here you can see all of our test are

now successfully passing and that was it about our first challenges and that was the basics of testing in v test so we already learned about the AAA now let's talk about the tdd so what is a tdd and why should everyone care about there so TTD or test development is a way of writing your code where you first write a test for Your code then write the code to make the test pass and finally refactor your code while keeping your test passing I know there was a lot of gibberish but now let me just break

this down for you so how that's going to look like first of all you're going to be writing your test so think about what you want your code to do and then write a test for your code after then run your test but in this case your test will fail because you don't even have your actual code so Your test will fail after that you would need to write some code so just write enough code so it will make your test passed after that you have to run your test again and in this case your

test should pass because your code works as expected then you have to refactor your code so clean up your code if needed and make sure your test still passed after that repeat that process again and again and this is what we call a tdd if you still don't get it so here is the final Definition you would first of all write your test then you would write your code then you would make your test pass refactor your code and repeat there so there was the entire flow of tdd or test driven development so now let

me just write some code then you will get to know what I'm talking about okay so now let's just implement the tdd in action so I want you to imagine a scenario where you will create a function which will add two numbers so we already know That how we are going to be doing there we can write a code for there we can write our test cases for there but I want you to just imagine for a second like this is something that we can do uh if you want to do there by using the

tdd approach so first of all we going to be creating a test case for there then we are going to be writing a code for there so I'm going to go ahead and go to my test and create my math ut. test.js file so what do we want to do we want to Create a function that uh adds two numbers okay so this is what we are going to be doing right now so first of all let's just write a test cases for there so we are going to be importing the describe also the it

and also the expect cases so now you need we are going to be using our describe we are now describing the add function and now for the second value let's just remove there and inside there provide our test case right here like it should should Add two numbers yeah that would be fine now let's just save there and inside there we are going to be providing our expect case and here let's just say like we are going to be passing our add function which will take like one and two and the result we want to

expect there to be three okay so these are just our expectation and of course our test will fail and why is there because we don't even have our add function we did not write any code for that so that's Why our test will successfully fa okay so yeah this is just our testing scenario and now let's just write a code for there I'm going to go ahead and go to my SRC file and Define my math .js file right here now we are going to be writing our code and let's just hope it works so

we are going to be using like cons and then add will be the name of my function which will take a and b as a perimeter and now we are going to be using Like A and A plus b so it's Going to give us the result of the I'm going to export there let's just say our file and import there right here so I'll use that import add from where from let's just go ahead and go to my SRC directory and inside there we have our Matthew Tails check this out yep or test is

now successfully passing and it is also passing right here but all of that Cod should be gone let's just refresh there and yeah our test is now successfully passing which means like Everything is working the way we expect him to work our test is passing our code is working now it's time to refactor our code that's going to be the third step okay so sometime we would need to refactor our code but in a majority of time we would not so I'll just remove that from here and I'm going to just return like that A

plus b but here we are going to be also checking the edge cases that was the only reason I choose JavaScript over the typescript because I Want to show you these cases okay so if you weren't using JavaScript I mean like if you weren't using typescript so this is what you would have to do okay so first of all you would have to check like if the type of a is not equals to the number so let's just write the or the type of B does not equals to the number so in this situation we

have to throw an error Sol use like throw new error and I'm going to say like both arguments must be numbers and now let's Just say our file okay now that we successfully refactor our code so I'm going to go ahead and go to my test cases and provide a bit of test to this so this is going to be our expectation but now let's just provide another test case so it should throw an come on an error if arguments are not numbers and now let's just provide our expect cases so here we already know

that we are going to be throwing an error so which means like we have to use our call back Function and use our add function and let's suppose we have like one and then two as a string value and we want the result to throw uh th both arguments must be numbers and now let's just say there I'm going to duplicate there a few times so let's just change the first one to be a string so I'll just write like one as a string and I guess that's going to be fine and I'm going to

also change that to like uh you know that's going to be fine but I'm going to change this Value to now check out my test cases so which means like everything is working the way we exper him to work and yeah everything is now successfully passing so this is how we are going to be performing the tdd and if you want to perform that challenge by yourself you can definitely go ahead and do that challenge by yourself but first of all we are going to be writing a test case then we will write a bit

of code to pass that test after there we are going to be Writing uh I mean like after that we are going to be checking our test if our test are now successfully passing then if you wanted to refactor our code we can definitely do that but if you don't so we don't have to now let's talk about the matches so far we've been using only the 2B but now we are going to be learning about a lot of matches like we're going to be learning about the equality match truthiness Mech number string object matches

and so much more So let's start I'm going to go ahead and Define a file I mean like create a file with the name of matches. test.js and here we are going to be learning about a lot of measures first of all we have to import the expect we also have to import the it okay so we're not going to be writing any describe because we're going to be only learning about the measures and now let's just learn about them so I'll just write like uh it and 2B Mech so let's just start from the

First one which is called the 2B so you know let me just write a definition of there first of all so we have a 2B and the definition will look something like this it will check for the strict equality like you can think about there is like triple equal to operator as we use in JavaScript so meaning both values must be the same type and value we already discussed that inside the JavaScript so whenever we use like triple equality operator which means Like um the value and the type should be the same otherwise it's going

to gives us an error so that's exactly what this 2B will do for us so I'll just use like con result it's going to be set to f and here we have to just write like expect and then here we have to pass our result right here to be five so now in this case our test will successfully pass as we see there and here you can see let's just refresh there our test will now successfully pass and why is there That's because the value and also the types are totally equal so that's why we

are now getting the passing test but now if I change that to like I don't know maybe a string save this file so here you can see where test will Now fail so that was or 2B now let's talk about another one which is called the two equal so let's just write two equal and I'm going to also change the definition of there so I'm going to just remove there and the definition will look Something like this it will check for the Deep equality and which means like it compares the values by checking the content

of object objects or arrays not just their reference so how that's going to look like let me just change that to like uh 2 equal and I'm going to just remove that from here and I'm going to Define two objects so I'll use like object one it's going to be equals to the name and the name will be set to un my own name and also the ede will be set To 22 I'm going to duplicate there and change the name of there to like two and here we have to pass our object one to

be not to be like but to equal to equal as object two so now if I save there let's just refresh there okay now now it's working as you can see our test are now successfully passing because we are now checking both the reference and also the values of these objects right here so we are now checking like expect the object one value or content to be as the Object two or to be equal to the object two so let's suppose if I change that to like I don't know maybe 12 and here you can

see our test will Now fail and why is that because the content is now different from this object two so that's why we are now getting an error so that was the two equal and now let's talk about the two strict equal Okay so we have another one which is called a too strict and I'm going to also remove the definition of the so it will check for Deep equality just like to equal which we just saw a few seconds ago but also consider properties like undefined function and others and other types there are not

strict equal in certain cases and now let me just change there to like two strict equal and it will work exactly the same but now let's suppose if I want to change like I don't know maybe the type of the I'm going to change the type of there to like string now let me just save my file and refresh There and here you can see our test will fail and let's suppose if I just add something else like I don't know maybe a something save this file still our test will fail okay so that was

it about four the equality measures and you don't even have to worry about that because all of them are now available inside the the vest so you have to just search for there click on the vest and they are available right here so if I go to the guide and we have to go to API and here Inside this API uh we have a lot of matches but if I click on there and now we can see those matches right here you have to be to be close and to be defined truthy falsy none and

there are a lot of Mees that you can explore by yourself but I'm going to show you those which you will use like a lot of times okay so you know what I'm going to just why did I just delete there I'm going to have to only delete there and also there now let's talk about another one which is Called the to be truth so to be t r u t h y this me will check if the value is truthy or falsy if you guys don't know the concept of truthiness and fals in JavaScript

so well let me just explain that right here but if you do so you already get the idea so in JavaScript only these way values which I'm about to write are falsey values and other than that every single thing is truthy so these are now the falsey values so false is a falsy value zero is a falsy value Uh null is a falsy value empty string is also a faly value and it doesn't matter if you use like uh single quotes or double quotes or B ticks but if they are empty so which means like

they are a falcy values uh we have undefined undefined is also falsey and n a n is also a falsey so basically this measure will check whether the value is truthy or falsey if our value gives us the result of any of these so which means like our value is falsy but if our value Is not inside this L which means like our value is truth here so now let's just use there so what I'm going to do is that I'm going to use like const value and that's going to be set to like one

maybe and now we are going to be expecting the value uh to be truthy and here let's just not pass anything so we already know what a truth in this and false in this means and let me just go ahead and check this out so here you can see our test are now successfully Passing and why is then and it should be to be match or to be truthly mat and why is there because one is a truthy value that's why it's going to giv us the passing test but if I change that to like

either empty string now our test will fail or if I change that to like zero still our test will fail if I change that like n n and now let's just refresh this still our test will fail okay so that was our to be truthy value or meure whatever you want to call it so That was the to be truthy we also have the to be faly come on to be false C there we go I'm going to select there now it's going to password test and why is there because n n or not number

is also a falsy value so that's why our test is now passing and if I just set there to like null maybe let me just change that to null and here you can see still what this is now passing and why is there okay what the hell I just look at those fa icons and I thought like I Open the in two times so that's why I Clos them so if I change that like maybe once now our test will fail because one is not a falsey value one is a truthy value that's why we're

now getting this error right here now let's talk about the greater and less than and all of that measures so they are a math related matures so what I'm going to do is that I'm going to just write like 10 and here we are now passing that 10 but I'm going to change that to like uh result maybe And here let's just use the to be greater okay so to be greater than five so what are we doing we are now taking this 10 value and we are now passing that right here and we are

now checking like is 10 greater than or less than five okay so if it is greater than five so it's going to gives us check but if that's not the case so it's going to gives us F our test is now successfully passing because 10 is greater than five that's why our test is now successfully Passing but if I change that to like to be less than five less than yeah so our test will Now fail so we have like uh to be less than or equal to and we also have to be greater than

or equal to so let me just use like to be less than come on less than or equal oh I'm using H en should be a n to be be less than or equal to 5 so now we are checking like is 10 greater than I mean like 10 less than or equal to 5 or not and here you can see it's going to fail because 10 is Not less than 5 or equal to 5 10 is 10 10 is not neither less nor equal to five so that's why our test is now failing so

if I use like to B greater or equal now if I save my file and now if you check this out so our test are now successfully passing and why is there because 10 is greater than or equal to five okay so that's them and there are a lot of measures that you can explore by yourself and now let me show you one more which is called the two content and Which is related to the string so I'm going to go ahead and remove that and I'm going to just Define that result uh variable once

again and I'm going to only provide like hello comma word right here and now we are going to be using the mech which is called the two contain and here let's just provide our hello right here so what is this two contain contain does these two contains will check the result and it's going to check for a specific value inside that string So is this value available inside the string or not yes of course hello is already available inside the result so it's going to pass our test as you can see right here so now

our test is now successfully passing but now if I just WR like my own name maybe husan and here you can see the test is now failing why is there because hosan is not available inside the string and that's why it will not gives us the value of there there is also yet another one which is called the To match so I'm going to use like to match it's going to take a regular expression or Rex for short if you guys don't know what a Rex means you don't even have to worry about it so

I'm going to just write like uh search for this entire string and search for only this word and I'm going to also provide I if that is either lower case or upper case then pass or you know we don't have to provide this I right here so I'm going to just uh provide this word so we want You to search for this entire string and inside that string we want to search for the word and our test will fail why is that because here you can see the W is lower case but if you just

put there as a upper case and refresh there and here you can see we're now ping uppercase W and it should be World there we go God damn it now here you can see our test is now successfully passing so that's done now let's talk about the two equal one we have another one which is called the To have the property and we usually use that for the objects like is the object have a certain property or not so what I'm going to do is that I'm going to just remove that from here and I'm

going to use like const object and here inside this object I'm going to put like name and name will be my own name so I'm going to use like hosan age of 22 let's just save this file and now Neath there here we have to provide our expectations so I'll use like expect C expect there We go go and provide our objects inside there and now let's just use to have property and then here we have to provide the property name like name is this name property available inside this object or not if it is

available so it's going to gives us I like it's going to pass our test but if it is not available so it's going to fail our test here you can see our test is now passing but if I let's suppose search for the location and save this file and now it's going to Gives us an error because location property is not available inside this object and we also have a few more methods like to be defined and to be undefined so let's suppose you want to search for this value is this value defined or undefined

so I'm going to use like do name and here I'm going to use like to be undef or to be defined rather and I'm going to execute there and it will pass our test because this name value is defined inside this object and Now here you can see our test is now successfully passing but if I change that to like to be UND find and save my file and now it's going to gives us an error so yeah that was a lot of meches and once again you can check all of these out by yourself

and they are a lot and I mean they are a lot okay now let's talk about the positive and negative testing so let's start from the first one which is called the positive testing so it will check if the system behaves As expected when provided with the valid inputs so in positive testing you are testing the system with correct or valid inputs ensuring that the system function as expected when used correctly so on the other hand we have a negative testing so it will check if the system handles invalid or unexpected inputs correctly in negative

testing you are providing an incorrect or invalid inputs to ensure that the system can handle error scenarios gracefully and it Doesn't crash or behaves unexpectedly so that was just the definition of a positive and negative testing so how that's going to look like first of all we have our add function which takes like a and b as a perimeter and now we are checking like if a is not number or if the type of B is not number so in this situation we want to throw an error which will say like both input must be

numbers and then finally we are just returning a plus b and that's our Function now if you want to provide a positive testing for there so we are going to be providing a valid inputs like passing three and five and we are now expecting that to gives us the result of ADD and 3 + 5 will gives us add and then we are providing a 10 and 20 n is going to gives us 30 now we providing 0 and zero so it's going to gives us zero and that was our positive testing but now let's

talk about the negative testing so here you can see we Are now providing a negative values like three and also five but five is now a string value but if that is the case so we want to just throw an error which will say like both inputs must be numbers and here you can also see like we're now providing a as a string and we are providing a five as a second value so still we are going to be saying like both inputs must be number numbers and now here you can see for the third

one we are now providing an undefined know So in that situation we going to be throwing an error once again so that was just a quick theory about the positive and negative testing so now let me just write some code then you'll get to know what I'm talking about let me go ahead and go to my math and here you can see I have exactly that same function which is now checking like the a perimeter and also the B perimeter and also just finally returning a plus b now let me provide a few test cases

for the like The valid and invalid or positive and negative testing so I'll just use like math. test.js file and now let's just import our describe function or it function and also our expect function expect there we go and we would also need to import our add from where and from our math module let's just go to our SRC and math now here we are going to be describing our function so I'll just give it the name of like math and here let's just provide where it should Add valed number numbers come on valid numbers

now here in this case we are providing uh you know what let's just remove there and now here in this case we are working with the Positive testing so you want to expect so let's just provide our add and provide our three and five to be add okay so let's just come on if I can type that today so it's going to gives us the result of add now let me just duplicate that two more times and we want to P the value of like 10 and also 20 to this one and we want the

expect expected value to be 30 now here let's just provide another expectation like 0o for the first perimeter and 0 for the second one and the result will be zero okay so now if I save there and my test is running and I can see all of the test successfully passing so that was our positive testing but now let's talk about how we can specify a negative testing for that so I'll just use another it and it should Add invalid input fields or inputs uh rather and here we are going to be expecting if add

and here we have to specify uh three value and five as a string value if that is the case we are going to be throwing a new error so throw error and here we will just say like both inputs must be numbers okay let's just go back one go back oh my God go back there we go and I'm going to duplicate there and for the second input I'm going to just convert there to a and Inside the string a and also here let me just convert there to five and also this one to undefined

and null okay so I'm going to just convert that to null same my file and test this out so here you can see both of my tests are now successfully passing so this is how we are going to be providing a positive test and this is how we are going to be providing a negative test now let's talk about the boundary testing so boundary testing focuses on testing the edges or Boundaries of an input values so the primary idea behind the boundary testing is that errors are more likely to occur in the boundaries in the

extreme end of the input ranges by testing the boundaries of an input values you can find effects that occur when the system handles these hge cases I know that was a crazy definition of boundary testing but trust me it's not that hard so now let's talk about the types of boundary testing so the first type we have is a Minimum boundary which will test the smallest possible valid value then we have a maximum boundary which will test the largest possible valid value then we have a just in inside the boundary and it will test above

the minimum or just below the maximum then we have a just outside the boundary so it will test just below the minimum or just above the maximum to ensure the invalid values are correctly rejected so that was just a types of um boundary testing but now let Me just give you example of there so just consider a simple function that accepts a username and a password where the username must be at least three characters and the password must be at least six characters so this is how we can solve there by using the boundary testing

so for the username boundary we can provide the minimum valid username like three characters and the minimum invalid username will be two characters and just inside the valid will be three Characters and just outside the invalid will be set to one character so that was just it about for the username boundary but we can also provide for the pen World boundary so the minimum valid pord will be six characters the minimum invalid password will be set to Five Characters just inside the valid will be set to six characters and just outside the invalet will be

set to four characters okay so if you guys don't get it you don't have to worry about the Boundary testing but now let me just write some code then you will get to know what I'm talking about okay so now let's see that boundary testing in action so what I'm going to do is that I'm going to create a file inside the SRC so I'll use like valid or validate on valid password. JS and here we are going to be creating our function inside this I'll use like password or you know validate password and it's

going to take a password as a perimeter and now inside This function first of all we are going to be checking if the password which we are now taking as a perimeter. length L GTH is less than 8 characters or password. length is greater than 16 character so in this situation you want to throw in error so I'll use like new error and it's going to say like password must be between ADD and 16 characters 16 16 characters there we go so now let me just save my file but if that's not the case what

do you want to Do in that situation then we just want to return like password is valid there we go and now let's just sa our file I'm going to close there now let me go ahead and go to my test folder and here we're going to be creating our validate password. test.js file and inside there let's just import our describe function or it function and also our expect function and also we want to import our validate validate password from where from our SRC folder And then we have our validate password now underneath that let's

is pro where describe and I'm going to give it the name of like valed password and inside there let's just use our it should allow a password with exactly add characters and now let's just use this so I'm going to use like validate password and here I'm going to use like a b CDE E F G H so it is I guess add characters we have 1 2 3 4 5 6 7 eight characters yeah so I'm going to also store the inside the Variable so I'm going to use like result is going to be

equals to this validate password and now we have to provide our expectations so provide our expect and here we have to passw our result inside there to be um password is valid okay so now let me just say my file let me go ahead and go to my file and password is valid I'm going to copy this in exact string and now let me just paste it right here s my file and we are getting an Error I don't know why but we are now getting this error oh that's because we are not exporting there

so now let me go to the top and Export there save my file and now everything should be fine here you can see we're now providing add characters so that's why um our test is now passing but if I just provide like maybe three characters our test is now failing and now we are getting like password must be between eight and 16 characters so now let's just go back and That's done let me create another test Suite so I'm going to use like it should throw an error if password has less than add characters there

we go so in that situation it's going to just throw an error go back and here let's just provide our expectation because it's going to throw an error so in that situation let's just use our Arrow function and put our validate password and here we have to put like ABC right here and to throw uh and it's going to Throw this error like password must be between it and 16 characters let me just save my file and now we are providing a ABC right here and let's just test this out and here you can see

it's also passing right here which means like everything is working the way we expect him to work and these are just the boundaries which we are now providing right here the boundary test so let's just create another one it should allow a password with exactly 16 come on 16 characters okay so I'm going to use like valed password and I'm going to put a lot of stuff to here so maybe a b c d e f g h i j k l l m n o p and how many characters is this 1 2 3

4 5 6 7 8 9 10 11 12 13 14 15 16 yep that's fine so I'm going to store the inside the result variable and now let's just use our expectations so provide our result to be password is valid and save my file and Yep this test is also passing because we Are now providing 16 characters I can't even speak today so if I just remove it and here you can see our test will fail so let me just provide that 16 characters right here and we are going to be also providing one more

for it so I'll use like uh it should throw an error if password has more than 16 come on 16 characters there we go our expectation and here inside the provide our validate password and let's suppose If you have more than these stuff so I'm going to copy that place there and I'm going to just provide like PQ and it's going to throw an error and error will say like password must be between eight and 16 characters now let me just save my file and here you can see all of our test are now successfully

passing so that was just example number one but now let me also give you yet another example so Which will be validate index so I'm going to go ahead and create another file with the name of is valid or valid index.js file and here inside there uh we will just create a function I'm going to also export it because I always forget there and is valid index we're going to be just checking for the array and index inside the array okay so here let's just check if our index is less than zero or our index

is greater than or equal to array. Length Okay r a y length so in that situation what we have to do we have to throw new error which will say like index out of bounds like for the boundaries and now underneath there if there isn't the case we are going to be returning like invalid is or index is valid there we go and now let's just say our file and also don't forget this explanation mark you have to provide the I'm going to remove the remove all of them and provide my test case right here

So it should be is valid index. test.js file I'm going to go ahead and first of all import my describe it and also the expect and then we are going to be importing the is um where index from where from or SRC go to the SRC and then ised index right here now this just Define or describe our function site so is valid index and here let's just remove that second from there and use cons array and Define our array right here like 10 20 30 40 and semi file and Then we are going to

be checking our site so it should allow index zero first element okay so yeah you provide zero so it's going to giv us the first element from our array so I'm going to use like not index DB what the hell am I doing I'm going to have to copy this name place it right here and wi my array inside there which we are now creating right here and zero like so and I'm going to use cons result it's going to be equals to this function call and Provide my expectation and here let's just provide our

result to be index is valid if that is the case so we want to provide like index is valid check this out yep it is working the way we expand to work and also create a few more boundary test for it so I'm going to use like it should allow index so that's going to be the last one last element there we go and here we can use like con result and here let's just use is Ved index and put my array inside then in Four okay so toide my expectation for the result to be

index is valid if that is the case you check this out yep it is also passing and I'm going to just maybe duplicate that two times and here change the values inside the or even the messages okay so this one should be uh come on it should throw an error for index minus one okay out of bounds and here I'm going to just specify a few things because here we are going to be using our expect and pro our callback Function today because we are going to be throwing an error so let's just use our

ised index provide our array and minus one so out of bound to throw and here we have to provide like index out of bounds like for the boundaries underneath them uh I'm going to just remove all of them from here and it should draw an eror for index five Comm on five and it should be out of bounds as well and what I'm going to do is that I'm going to just remove both of them my Expectation here we have to provide our function is ver index and Prov our array and five inside the to

th so in this situation we're going to be using index out of pounds and semi file check this out okay so we are getting some sort of error uh index out of pound But Here we are now providing this dot so that's why we have to remove this dot s file and now here you can see all of the tests are now successfully passing so yeah that was our boundary testing let's talk About the parameterized testing and this one is super hard to pronounce but I'm going to do my best so parameterized test allow you

to run the same test with multiple set of of inputs without duplicating the test logic instead of writing multiple similar test cases for different inputs you define the inputs as a set of perimeter and the test will automatically run for each combination of those values so that was just a quick definition but here you can see I have a Function which will allows us to multiply two numbers so if you want to write a lot of test cases for there so we can like Nothing is Stopping Us but if you want to use the parameterized

testing so this is how we are going to be using there first of all we have already described and now in inside the describe we are not calling over it function we are now calling over each method on our it function so here we can pass our array and inside that array we Can pass our value of for our perimeters here you can also see we have a placeholder of percent D it will take those values from those test and it will put it right there if you don't get it you don't have to worry

about that because now I'm going to show you the inaction okay so now let's see that parameterized testing in action so first of all I'm going to create a file with the name of m. JS and I'm going to also create a test file for that so I'll use Like m. test.js and I'm going to close this get ignore file and now let's just create our multiply function inside this so I'll use like uh con multiply it's going to take A and B as a perimeters and now we are going to be using a *

B okay so let's just use the I'm going to save this file and now we have to import that right here first of all we are going to be importing the uh describe function so let's just use the describe then the it and also the expect function And now we are going to be using the multiply from our math module so I'm going to just describe my set and I'm going to give it the name of like multip multiply and now inside there we are going to be using our it but we are not going

to be calling there I'm going to just use Dot and here you can see we have a lot of function like we have apply bind and so on and so forth I'm going to only call this each function okay so now let me just execute there And here you can see it takes a test cases and which will be a read only okay so I'm going to p my array inside there and now here we're going to be passing our test cases like uh value for our test cases so use like for the first preter

I'm going to pass two and for the second one I'm going to pass three and for the result I'm going to pass six so it's going to gives us like 2 * three is equal to six okay so it's going to gives us that result so now let me just remove That from here I want to p a few more ones so I'm going to provide my comma and I'm going to just duplicate that a few times okay so you know what let's just change there to like four maybe and this one to five and

this one to 20 so it's going to giv us the result of 20 and also I'm going to P 7 here eight and here the result will be set to 56 okay so now let's just proide over one and zero come on zero so we already know this going to gives us zero Value let me just duplicate for the final time and here I'm going to P like minus 2 here three and here Min - 6 so let's just past there I'm going to save this file right now but also so we have to call

our function like immediately invoke function expression like ify if you guys don't know what if is in JavaScript you don't even have to know that but yeah if you want to call that function so this is how we are going to be calling there so for the first Parameter we are going to be providing our description so I'll just say like should return uh correct result when multiplying now we going to be using this placeholders percent symbol and also D and I'm going to use and and once again percent D and then the expected and

here we have to use that percent d one more time let's just go back let me just save my file so this is how it looks like so basically it's going to take that two is going to put that right Here then it's going to take that three it's going to put that right here inside this placeholder and then finally it's going to take this six it's going to put there right here same will goes for the 4 520 and so on and so forth so this is what's going on right now so I'm going

to provide a comma here and now we have to provide our functions for our function now that we know that it takes three perimeters so we are going to be passing two and then three and then six Okay so for there let's just pass like a comma B and then here we have to specify or expected you can basically give it any name that you prefer but in my case I just give it the name of like a b and expected result now here we have to pass or expect and I'm going to be passing

my multiply inside there and pass my a comma B which is now coming from these parameters and now we have to use the to be and let's space What expected result right here now let me just save my file And now let's just run our test so I'm going to use like npm run test and then UI so let's just run and here you can see our test are now successfully passing right here okay as you can see there um multiplying two okay here you can see so we are now getting that result and as

I said like those placeholder will be replaced by those actual values so here you can see for this pound symbol not pound symbol but percent symbol with d it is now replaced With these two and then same will goes for this one as you can see there right here and same will goes for this one as well okay so yeah this is how we are going to be providing a parameterized test for our code but that was our first example now let me give you one more example I'm going to go ahead and go to

my SRC file once again and I'm going to create another file with the name of string validator DJs okay I hope the spelling Is correct so let's just write like string validator do test.js file here I'm going to go into my string validator file and let's just create what is valid valid string length and here is going to take a string as a perimeter now inside there first of all let's just export there because I always forget there let's just check if our string. length come on L GTH if our string. length is less than

five or our string. length is greater than 10 so in this situation we Are going to be throwing this new eror which will say like string length must be between 5 and 10 characters if that is not the case then we're going to be returning like um string is valid and provide this pound symbol right there so this is our function now we have to provide a test cases for this I'm going to go into my test file and the first thing that I want to do is that I want to uh import the describe

and also the it and Also e e e e e now let's talk about how we are going to be testing an asynchronous code like those code which will take some time so let me just give you example of there first of all we are going to be creating our with the name of fetch data we're not going to be actually fetching our Data but this is just example so I'm going to also go to the test file and create my fetch data. test.js file okay so first of all let's just go to our fish

data file and here we're going to be creating our function so I want you imagine like we have some sort of asynchronous function PCH data function that will simulate the API request and return the promise so how that's going to look like this is how it's going to look like so I'll just export this Function because I always forget that and now let me just use like fish data I'm going to give it the name of like fish data and there going to be an innous function which means like it's going to take some time

and now we're going to be returning a new promise from there and it's going to take the result and it's going to also take the reject even though we are not going to be using the reject but yeah we are going to be providing there right there and I'm Going to also use like set timeout and it's going to take a while to run so here inside therefore the duration I'm going to give it like maybe 1 second would be fine here we're going to be calling our resolve function and it's going to say like

this data ped successfully Fu l y there we go s OU s s u c eou s there we go oh God damn it s u c s uou c eou s f u l y now this is looking better so this is just our basic asynchronous function and it returns a Promise so how in the world we are going to be testing this code let me go ahead and go to my P file and here we are going to be importing first of all to describe the it and so they expect and now underneath

that we are going to be also importing our fet data function and now let's just use our describe okay so I'm going to use the and I'm going to give it the name of like fetch data and let's just remove there and inside there let me just save this file and inside There let's just create our test here so it should return the correct message after the promise is resolved or the promise resolves there we go and let's just sa our file and now inside there first of all we are going to be calling our

function but the main thing is that we are now testing this asynchronous function so which means like we also have to mark this function as asynchronous so I'll use like asyn right here as YNC and now let me just save my File and now that we made our function as asynchronous function so which means like we can now use our a inside there so I'm going to just use like a and here let's just use our fetch data and execute this function and I'm going to store the inside the result variable and now here we

are going to be using the expect and pass my result inside there and we want that to be data fetched successfully so you know let me just copy this entire thing from here and now Let me just place it right here say my file and now let's just check this out I'm going to refresh there and yep everything is working the way we expect him to work but imagine if I just remove this sing function from there and also this a and now if I save my file now our test will fail and why is

that because our code takes some time to run and our test file does not so that's why we have to provide this a in this async right here whenever we are testing a as Synness function so that was example number one let me give you one more example so I'm going to create a file with the name of pitch user um data.js and I'm going to also create a test file for this so I'll use like fetch data. test. or fetch user data. test.js file and I'm going to go into my fetch data fetch user

data what am I saying today and here we are going to be just exporting this function and create that right here with the name of which User data and it's going to be an asnr function it's going to take the user ID and based on that ID we are going to be fishing our data so if our user ID is equal to invalid so in this situation we are going to be returning promise. reject reject there we go and I'll just say like user not found or something like that because if the user ID is

not vared which means like we would not be able to find the user so let's just return to our promise. resolve resolve And here we have to pass our object and we are going to be passing the ID come on the ID is going to be set to user ID and also we are going to be passing a name and name will be set to our my own name like H webd and now let me just save my file okay so as soon as I save my file now and now let's go into our pitch

user data. test file and here we have to import our describe function we also have to import our it and also our expect and now underneath that we have To import our fet users data from our user data function or file whatever you want to call it and here let's just create our fetch user data and inside there let's just use our it function it should resolve with the user data when come on the user data when the user ID is valid okay so if I save my file here you can see I just forgot

that we have to provide that ASN right here because we're now testing an as synness function so we have to provide that ining there And now we can use our a and then fetch user data and now we have to execute this I'll just pass like valid user ID and I'm going to also store the inside the variable like C result it's going to be equals to this response and here let's just pass for expectation so I'll just provide my result come on there we go and to equal equal there we go and here we

have to past the ID and the ID will be set to valid user ID which we are now passing there and also hen web Dev and now let me just save my file yep our test is now successfully passing if I check this out so this is the test that I'm looking for let me just expand there yep our test is now successfully passing and now let's create another test suit for there so it should reject with user not found message or user not found when the user ID is inid okay so we are going

to be using a but first of all we have to use our SN for here and then we are going to be using a and here We have to provide our expect and fetch user data and now let's just provide like invalid ID or something like that and then we are going to be just rejecting This Promise so I'll use like Rejects and then to be and here let's space like us not found and now if I save there and here you can see our test is now successfully passing run there and you know what

let me just expand there so we have these two test which is it should resolve with the user data When the user ID is valid and on the other hand it should gives us user not found when the user ID is not valid or invalid so yeah this is how we are going to be testing our as synness code by using ASN and aware The Witcher 4 trailer just came out like an hour ago and I have to say it was one of the most goodlook game I have ever seen so I'm dying to play

that game as soon as possible but let's just hope that they release it very soon anyway so now that We completed the unit testing part of this course so now let's get into the react testing so I'm going to open my terminal and now let's make a set of four there so let me just make that a bit bigger so you guys can see everything a bit clear just like that so what I'm going to do is that I'm going to be using npm Create on Create and then we at latest and I'm going to

give it the name of like my react testing or something like That I'm going to choose reactjs with typescript because we are going to be using a TSX now let me go into that folder and I'm going to install all of the dependencies inside there so then successfully done so I'm going to open that in my vs code and this is how it looks like so I'm going to go ahead and remove the public folder I'm going to go to the SS folder and remove the app. CSS and then I'm going to go into the

app. TSX and I'll just write my RFC inside There let's just close there and now we have to install a lot of dependencies for our testing so the first thing that we have to do is that we have to install or test runner in assertion library in which is the v test so I'm going to be using npmi in then DD and v test so it's going to install that in my project and this is our test Runner and our assertion Library so now they successfully install the next thing that we have to do is

that we have to install The react testing library for testing our component so I'm going to just use like npmi and then DD at testing D Library for/ react so it's going to install reactjs in my machine and also we would need the JS Dom so now let's just use npmi and then ddjs Dom JS Dom so I know a lot of you will ask me hus what is a JS Dom we've been testing our code and we are seeing the result of our code inside our terminal but now we are going to be testing

our components so we Would need some sort of a Dom okay so this JS Dom will allows us to work with a virtual Dom so that's why we are now installing there so now let me just install there and you will see there in a few second by the way you don't have to worry about that so that's toally done now we have to install something called the custom matchers which is called the just Dom okay so I'm going to use like npmi and then- D for/ not for add testing and then- library for slj

Come on just and then Dom so it will allows us to test our code just like a custom Mech like to be in the document and so on and so forth something which you don't know already but you will see that in a few second so this Library will just gives us a custom matchers you just have to keep that in mind and finally we also have to provide a types for there so I'm going to use like npmi and then DD types and install a types for that just so let's just install There and

this is the library which I'm about to install you don't need that but sometime you will get an error inside your vs code so I also want you to install this so I'm going to use like npmi and then at uh testing come on uh testing library and then just Dom okay just Dom so install there so now we're installation is now successfully done the next thing that we have to do is that we have to go ahead and go to our package.json and Pro IDE or UI case or Script so I'm going to provide

a comma here and I'm going to say like test and then UI and give it any name that you prefer and I'm going to just write like vest and then d-i so now let's just save there and I'm going to also close there next we have to provide a configuration forward v test so inside our root not inside the SRC folder but inside this root I'm going to right click on there and create a new file with the name of vest. config come on config dots because Inside this file we going to be providing our

custom configuration for our we test so I'll first of all import something called the Define config come on uh let's just import the Define config from where from or vest and then let's just go to the config file so I'm going to sve my file right now you will also export that so we can use it in other file so I'll use like export default and I'm going to say like Define config and here we have to provide our Object and inside this object we have to provide our test object inside that object first of

all we have to specify the inv envirment currently we are now testing our code inside this terminal or nodejs environment so we don't want that we want to test our component inside the JS Dom so we will have to specify our environment and we have to set there to that JS Dom Library which we just install a few seconds ago next we have to also set the globals and don't worry About the globals so I'll just write like globals and set the to true and I'm going to also for the set of files and that's

going to be set to test and then setup. TS file now that we know what this environment is now let's talk about this Global so whenever we are testing our component I mean like whenever we are testing our function so we usually import the describe function we also import the it function and we also import the expect function but now that We set this Global so we no longer have to import all of that stuff like in all of our component so we are going to be testing a lot of component and inside those component

we are going to be using the describe it and expect but we don't have to import there so that's why we are now providing this Global and we are now setting that to true and finally we just providing this setup file because this is going to be for our custom match so now let's just say our file I'm going To go into my route and here inside there we're going to be creating a folder with the name of test and by the way you can either uh give it the name of like double underscore and

then test and and then double underscore like Dunder but in my case I'm not going to do that I'm going to just write like test and hit enter right here so first of all we have to create our component then we are going to be testing our component so I'm going to right click on There and create a folder with the name of components and inside there we are going to be creating our hello word. TSX file okay so let's just use our RFC inside this save my file and this is how our component looks

like but now let's just go ahead and create a file for there so here inside this test file first of all we are going to be creating our setup file then we are going to be testing our component so I'll just use like setup. TS and here I want you to Notice this is this should be test by the way I made a mistake so this should be test with s and inside this test folder we have our setup. TS file okay so here I want you to notice that we are now providing the tests

which is a folder which we just created right here and then inside this folder we have our setup. test file as you can see right here and now here inside the setup. TS file we are going to be pasing something called the custom match so I'll just Import first of all um the testing Library come on let's just use our testing library and we're going to be importing there from the J and then Dom okay so it's going to allows us to use our custom measures so that's everything that you have to do for now

and now I'm going to just provide a bit of uh basic test right here so you know what first of all we have to create our components folder if you want to create this components folder you can but if you Don't want to use the components folder you can write your test inside the setup file but in my case I prefer the components folder so I'll just give it the name of like components and inside there let's just create what hello word. test. TSX file right here okay so now inside this file let's just test

this component which we just created right here okay so I'm going to go ahead and go to my hello Word file and here we are not going to be importing the describe Function and also the it function and also that expect function because we already declared that inside our weest config file so what we have to do inside this file the first thing that we have to do is that we have to import something called the render function so let's just import the the render and also the screen and you don't have to worry about

them because I'm going to explain that in a few seconds right now here so I'll just import that from the Testing Library not from the Dom but from the react J so now let me just save there so what in the word is this render and what in the word is this screen this render will allows us to render our component to the virtual Dom and this screen will allows us to select a certain element to test that specific component if you don't get it you don't have to worry about that but the next thing

that we have to do is that we have to import our component so that we can Test there so I'll just import like hello word as you can see it will not help us to Auto Import our components so how can we solve that I'm going to cut that from here and you just have to grab this folder and you have to put that inside this SRC folder just for a second and then you have to grab it back and now it will start working I promise it will start working just check it out so

uh here you can see I guess they provided some configuration I'm not Quite sure about there but now let me just save there and now if I just use import hello and as you can see right here it will allows us to a to import our component so now if I click on there so it's going to import our component from this file so I want you to hold control and click on there so it's going to bring you to this file and this is our component I'm going to save this file right now and

the next thing that we have to do is that we have to use our Describe and inside there I'll say like hello word component or something like that and now inside this describe we are going to be implementing over it and it should render a hello word maybe component be fine and now let me just save them okay so now the first thing that we have to do is that we have to render our component then we would be able to interact with our component we are not just testing our functions now we are testing

our jsx and we have to Render that to our virtual Dom so if you want to render that to our virtual Dum so for that we are going to be using this render method or function from this testing library and reactjs okay so we will just use that friender and inside the as you can see right here it requires the UI and the react node so now in this case I'm going to just P my hello word component and now I'm going to close there so now it's going to render my component to the virtual

Dom So the next thing that we have to do is that we have to provide our expect and also our screen so I'll just use like expect right here and now I'm going to be using their screen and as I said that this screen will allows us to interact with a certain element inside our component then we would be able to test that specific functionality or behavior okay so I'll just use like screen and then this screen has a lot of matches so it has uh find all by Alt and there are A lot of

things and I promise you're going to learn a lot of them by the end of this course so what I'm going to do is that I'm going to just use like get by text and now let me just hit not ID but just a get by text and now let me just execute there and we are going to be testing or fetching or getting or element by using that specific text what am I talking about so you know let me just copy this entire text and now let me just place that right here so Essentially

we are telling that first of all we want you to render our component then we only want to get that specific element which has this content like hello word and we want there to be so let me just choose like to be in the document come on in the document there we go and now let me just save my file and this is something called the measures which we already set up inside the setup. TS file right here okay so let's suppose if I just comment this Line out s my file as you can see

right here it's going to gives us an error so now let me just uncomment there save my file and now that error is now gone if you don't get this scoring you don't have to worry about that I mean like it's not that much difficult code to be honest but the only thing which is difficult is this line of code and I guess 90% of this testing course is based on this screen because we going to be learning about how we can PCH our Element by using area by using get roll and so on and

so forth and this screen is one of the difficult part of this entire testing and you guys already know all of their stuff like first of all you have to import all of your uh render and screen from your testing library then you have to import your component then you have to use the describe and describe your test suite and inside there you just have to use your it to Define your test and then we are going To be rendering our component to the virtual Dom and here is the hardest part which we are going

to be covering in this course today is a weird day The Witcher Four trailer just came out and also guess what the Deon just came out I just watched the Fire Ship video about the Deon like the first look of the de it requires like I don't know maybe $500 per month or something like that and it was hilarious everybody was telling me like huz is going to take our jobs and This and that anyways I am getting sidetracked so now we are going to be learning about how we can test a component with props

so a component which takes a prop how can we test this so what I'm going to do is that I'm going to Define another component uh with the name of user status. uh TSX and inside they I'll just use my RFC and I'm going to just remove it from here and it's going to take a few props so it's going to take the email and it's going To only take one prop which will be an email so I'll just write like email I'm going to also inate that right here like email will be a string

now let me just save my file and here we are going to be just rendering our email so what I'm going to do is that I'm going to just write like if we have the email so in that situation we are going to be just rendering like welcome um come on welcome and there specific person email but if that's not the case like if the User did not qu their email so then we are going to be just using like sign up now let me just save my file and this is how our component looks

like now let's get into the test and test this component so I'll just create a file with the name of user status. TS I mean like test. TSX and inside this file we we are going to be doing all of that stuff once again so like first of all we are going to be importing all the uh necessary and then uh it should be Packages and then we have to describe our test suite and after that uh you know what my spelling is horrible but let me just copy and paste there so first of all

we have to import all the necessary packages then we have to describe all the test Suite then we have to write the test then we have to render our component to the virtual Dom for testing then select the element from the Dom for the testing and finally we have to specify our assert so now let me just Remove there and the first thing that we have to do is that we have to import the render and also the screen from our react testing Library so I'll just use like a testing library from the react now

underneath that we have to import our user status from our components folder now I'm going to be using a describe and here I'll just write like user status component or something like that okay so I'll just change there to component there we go and now inside There uh we are going to be using our it and it should display a welcome message when an email is provided okay so how in we're going to be doing there well first of all we have to render our component to our virtual Dom so I'll just provide my uh

user status and here we are going to be passing our email because it was required and I'll just provide like I don't know maybe John gmail.com or something like that now underneath there first of all we have to select this area Where we are going to be rendering our content so how in the word we are going to be doing them well we are going to be using some kind of me so I'm going to use that screen once again and by the way we are going to be learning a lot about this screen but

not right now and if I just use a DOT here you can see we have a lot of methods but I only want to select their specific element by their text so I'll just use like get by text okay so if I just use that come on it Should be a text there we go and here we can specify our regular expression or we can also write our text right here but I'm going to just provide my Rex like we are only searching for the welcome and we only want to select there and if I

just write the I which means like select this specific element which have the content of welcome and it doesn't matter if that is lower case or upper case okay and I'm going to store them in some sort of variable so I'll give the name of Like uh welcome message or something like that this going to be equals to this method and now we have to provide our expectation so let's just use our welcome message and I'm going to be using the dot to be in the document now let me just execute there okay and finally

we have to run our code so we can see there so I'll use like npm run test UI and hit enter and yeah we also have to install this so I'll just use y to install it then done so I'm going to Use npm run test UI once again and it's going to open that right here so here you can see all of our tests are now successfully passing like uh as you can see this component test is passing which is like hello word and inside they we are just providing these two test and we

also have our user component and this test is also passing so you know what let me just go ahead and remove that there so if I just remove there as you can see our test will Now fail so this Is how we are going to be testing our component with the prop and now let me just provide there once again we can also provide another test suite for there so I'm going to hide there and now underneath there we're going to be using our it once again so it should display the sign up button when

no emails is provided okay so now let me just render my component once again and I'm going to past my user status and close there now let me just save my file And why are we oh we are now getting this error that's because we are not providing anything so I'll just write like email and I'm not going to past anything to there so what I'm going to do is that I'm going to select my sign up button which you can see right here now you want to select this button so how can you go

about doing there like how can we select this button well we can still use that same method from our testing Library which is this get by Text so I'm going to use that for now but later we are going to be learning about a lot of them so I'll use like screen once again and I'm going to just use like. get by text and here we can just pass it should be text and here we can just pass our regular expression like uh sign up and I'm going to also provide the I for the lower

and upper cases so I'll just use like sign up button and I'm going to store my content inside there now let me provide my Expectations so I'll just use like sign up button and we want it to be in the document so now we have to execute this this our file and now let me just refresh that and as you can see both of our test are now successfully passing so like display come on display a welcome message when an email is provided and display a sign up and display a sign up button uh when

the email is provided when the email is not provided so it should be button okay so it is correct So like when no email is provided as you can see right here both of the test are now successfully passing but now if I specify something inside there and sa my file and here you can see one of our test is now failing and why is there because it is not looking forward email and now we are providing that email so our test will fail so this is how we are going to be testing our component

with the props so we just have to create our component then we have to call our Component right here or P our component and we can specify our props right here and then based on those props we can test our component so now let's talk about how we are going to be testing those component which will iterate over through some content and then it will render there which means like a list content component so what I'm going to do is then I'm going to close all of them and I'm going to go into my component

folder and inside there I'm Going to Define my programming languages list. TSX component and I'll use my RFC inside there and it's going to take a languages as a prop so I'll provide like languages l n g g s there we go and I'm going to also annotate this component like languages l n g g s and I'm going to specify string of array now let's just sa sell that I'm going to go back so you guys can see everything a bit better and now let's just remove this level and first of all we are

going to Be checking if the languages which we are now taking as a perimeter length is equal to Z in this situation we are going to be returning this UI so I'll just say like da and inside this D I'm going to just render a paragraph which will say like no programming languages come on l n g a g s languages found and now let me just save there but if that's not the case like if we have some languages so in that situation we have to render our ul And then in inside this UL

we have toate over through all of our languages so I'll use like languages. map and provide my language right here and also the index and it should be just a singular language not a languages okay so now inside there come on let me just close what the hell am I doing today I can't want type today so let's just write our Ali and inside this Ali we are going to be rendering our language and I'm going to also paste my key and the key will be Set to index so now let's just save there and

this is how it looks like right here so if we don't have any languages then we are going to be showing this message to our user but if we have some languages then we're going to be showing this uh message or showing those languages to be precise so now let's just close there I'm going to go ahead and go to my test components and inside there we are going to be creating our file with the name of programming List. test. TSX okay so now inside there the first thing that we have to do is that

we have to render I mean like we have to import the render and also the screen from where from we testing Library reactj and now underneath that we also have to import our programming languages list okay it is super long and also we have to use our describe and now I'll just give it the name of like Pro come on programming languages list component there we go I'm Going to use like it should render a list of pro come on programming programming languages there we go so now inside there let's just create or array so

that we can iterate over through there so I'll just create a few programming languages like JavaScript the king and python ah yeah so yeah cool then we have a ruby ah yeah Ruby and then we have jav jav and then we have a the Guard the guard which is a goinging and then I'm Going to just use like const languages and I'm going to store them inside this variable so now let me just save them and now we are going to be p there to our virtual Dom so first of all we have to render

our component to our virtual Dom so I'll use like programming languages and render my component like so and here is going to take a languages as a perimeter and we are going to be passing that languages as a prop right here there we go the next thing that we Have to do is that we have to iterate over through this list and then we're going to be providing our expectations so I'll just use like languages. for each and here let's just put one language right here and inside then um let's just close there come on

what the hell am I doing today and inside there we have to provide our expectations so I'll just provide like screen and then dot but here is the question how in the world we are going to be selecting like Each language Let me just go ahead and go to my uh component right here like how in the world we are going to be selecting this Li well it is simple when you know the solution so yeah it is simple but if you don't know the solution so it is not so I'll use like get by

text and here we just have to copy this this language and we have to place it right here so it's going to select the specific language and then we're going to be providing like to be In the document now let me just execute there save my file go there and now let me just refresh there and here you can see our test is now successfully passing which is this uh programming languages so now let me just expand there and also expand this one so yeah our test is now successfully passing if I just remove that

from here and sa my file and here you can see we are now getting this error right here because our test is now failing so this is how we are going to Be testing a component with the props so I'm going to also collapse there and now let me just provide a languages empty array so I'll just use like it should come on should render a message when list is empty so in this situation what we have to do uh we have to first of all render our programming languages component and here I'm going to

execute that and I'm going to provide my languages but tot empty languages nothing inside there so I'm going to Just provide my expectation right here so I'm going to say like expect and it should get the screen. getet by text not R but text and then we have to provide like no programming and why am I providing that that's because when we don't have any languages so in that situation which means like we're going to be getting this error message so that's why we are now getting this paragraph with this message like no programming language

is found so I'm Going to only select this portion like no programming but if you want to select that by this entire message you can totally do that so I'll just provide like no programming that's it and I want it to be in the document and now let me just execute that and save my file and check this out and here you can see all of our test are now successfully passing and this is our final test if you want a broke test I'll just provide like a sa my file and here you can see

where test Is now failing so yeah this is how we are going to be testing a component which takes a list of items Or List component now let's talk about the king the heart of react testing component which is called get by roll so what it is and why should anyone care about that so get by role is a query method used to find Dom Elements by their area rol so what is that area or area role that simply means accessible Rich internet application so area roles Explain what an element does or its purpose especially

for accessibility this method is a part of a set of tools used to test how accessible and interactive your application is it helps to understand how users with the screen readers or other assitive Technologies would use your app so that was just a quick definition of get by ro but now let's talk about how in the what we are going to be using there well this is a method so first of all we are going to Be using a screen and then we are going to be using the dot get by rule and then we

can specify the rule and also the option but now let's talk about what is a role it is a string representation of a re Ro for which we are looking for like for example if you want to select the button we going to be providing a button if you want to select the link or text box or heading and so on and so forth which I'm about to show you in a few seconds but we are going to be first Of all providing our role as a string and then we have optional option object which

can include some additional configuration if it only can but we don't have to so yeah that was get by rule so how that's going to work suppose we have this component and inside this component we have our Dev and inside that D we have our button which will say like click me so how we are going to be selecting there first of all we are going to be writing our test and then we Will render our component to the virtual Dom if you want to select this we are going to be using a screen and

then do get by Ru and here we can specify our area or area label and then we can provide like additional options if you wanted to and finally we can just provide our expectation and this is how we are going to be testing there so like why get by rooll like there are a lot of other methods which you can choose from so why is this get by ro so special First of all it provide accessibility it encourages developer to think about the accessibility of their component that's the first thing secondly this allows us to

provide a reliability like queries based on AA role are less likely to break when the internal structure of their component changes finally it allows us to use best practices it helps align test with how user interact with your application like screen readers keyboard navigation and clicking and so On and so forth so so that was just a quick definition of get by roll so now let's get into the coding and then you will get to know what I'm talking about so now let's talk about get by roll and we are going to be learning about

area labels in a lot of great detail so what I'm going to do is that I'm going to go ahead and go to my components folder and now I'm going to create another file with the name of finding Elements by Ru or something like that roles I guess Ru Would be find. ESX and now inside there I'll just use my RFC inside there and let's just remove them from here and first of all I'm going to be creating first of all the element and I'm going to also mention the accessibility role or the area role

or area role whatever you want to call that so first of all we want to select the anchor tag so to select the the area role for there so I'll just use like uh you know let me just provide a link because the area Rule for that is a link and I'm going to provide an anchor tag and we're not going to be going to anywhere so the accessibility role it has is a link and now let me just save my file okay so what I'm going to do is that I'm going to go ahead

ahead and uh go to my components folder and Define my finding Elements by row. test. TSX file right here and first of all we have to import our render and also our screen from the react testing Library like so from the React there we go and we will also import our finding Elements by R and now let's just sa there here let's just Prov where describe and we will just describe there like finding or find elements or finding elements and I'm going to provide my first case which will be it should quy the link element

so how are we going to be doing that well we just have to render our component which will be finding Elements by R and now let me just execute there now we're going to be Providing our expectation and let's just use our screen and now if I just use dot here you can see we have a lot of methods so one of the best method which we are going to be using is is get by R okay so now let me just execute them and as you can see right here it takes a rle and

it also take the optional options object right here okay so if you want to select that we already know that we are going to be selecting this anchor tag and this anchor tag has the area label Of link so now let's just provide a link right here and that's it and finally we want that to be in the document and now let me just execute my file and let's just fresh that you know what I'm going to have to delete those other components or maybe I'm going to leave them so we we are only interested

in this one component like finding Elements by R let me just expand there yep our test is now successfully passing let me just zoom in a bit and yeah that's working the way we Expect him to work so this is how we're going to be finding a specific Dom element by their area label okay so that's done now let's talk about how are we going to be selecting a button so I'll just write a button with the label of button and we already know that if you want to select there so the area label for

there will be button so now let me just save my file and I'm going to just duplicate my test once again and here let's just change them it should Query the button element and if I just write a button right here so it will not complain so now let me just save my file and here you can see the button is now successfully retrieved so which means like everything is working the way we expect them to work suppose if you want to get the fer so let's just use a fer and I'm going to provide

a label which will be a Content info unfortunately this is the area label for there so we are going to be using a content in Ino So now let me just save my file and I'm going to duplicate there once again let's just duplicate there and provide my enter and select the footer it's all Ed like footer and here we have to specify our content info and it should be a lowercase content info like so so now if I save my file it's going to also select and everything is working the way we expect them

to work so that's totally done suppose if you want to select like H1 so I'll just write like this H1 and The area or area label there will be a heading okay so I'll just provide like uh heading right here so now let's just say our file and I'm going to duplicate there once again and I'm going to change that to H1 and here we're going to be selecting there by the area level of heading so now let's just provide this say our file and here you can see where component is rendering and selecting our

H1 so which means like everything is working let's suppose if you want to Select the header so I'll just use like header and I'm going to provide my banner and let's just provide a banner right here so Banner s file and I'm going to go a bit fast because I know the rest of them is just a theory it should quer the head header element and it is a banner so now let me just provide this on my file and here you can see it is now selecting there let me go ahead and create an

image so I'll use like image And I'm going to also provide some sort of alternative text to this so let's just remove there and it should be a description d s c come on d s c r i p t i o n for the area level for there will be image and now let's just select them I'm going to duplicate there once again I know I'm repeating myself and my code again and again that's because I want to show you those area labels I know you are a lazy person you don't want to do

that by yourself so now you're watching This video so you will learn this so now let me just save my file and here you can see it's going to also select our image right here suppose if you want to select an input field with the type of number so the accessibility or area level for there will be spin button okay so now let me just save my file now let me duplicate this line of code and here let's just provide our number element or number input and it should be a spin button so now let's

just save there and Here you can see it is now selecting there successfully and let's suppose if you want to select like the UR which will be a list item and here let's just C our list item say my file and I'm going to just duplicate this line of code and change that to the UL so it should query the UL and I'm going to provide my list item right here list item let's say our file and my test is failing that's because it is not a list item it is just a list let Me

just save there and here you can see our test is now successfully passing and now let me show you the final one and I promise that's going to be the final one okay so let's just use our lii suppose if you want to select the LI so then it is a list item this is going to be just a list so I'm going to make it as a list and these are a list item so I'll use like list item and now let me just save my file and I'm going to paste like a list

come on I'm going to duplicate There first of all and now let me provide my li and Li will be just a list itm and now let me just save my file test this out so yeah it will also select that lii so this is how we are going to be selecting The Elements by using the get by roll and also the area level in the beginning of this course I mentioned that we are going to be spending a lot of work over time on the screen object and its properties so now let's talk about

it so what are we Talking about we are now talking about the buy placeholder text by display value by label text by all text by T ID by rule by tiies by Title by text so we are going to be learning about all of them but now let's just break them down one by one now I know a lot of you will say like hus there a lot of methods but don't worry I have a formula which will help you master all of them so what is the that formula well first of all we are

going to be categorizing all of that Methods in three category so the first category we have is a get bu then we have a find by and then we have a query by so whenever you see those method with get that simply means that the purpose of them will be when the element must be found in the Dom and the behavior will be it will throw an error if the element is not found in the use case will be when you are sure that the element will be present during that test so this is how

we are going to be using all of them With get now let's talk about how we can use them with query so whenever we see that method with queries so that simply mean that the purpose of them will be when the element may or may not be found and the behavior will be it will return no if the element is not found and it will not gives us error like no error whatsoever so it's going to gives us no in the use case will be when you need to check for the non-existing of an element

or it is okay if the element is in there Okay so this is how we going to be using those method with query and now let's talk about the final one which is called the find so the purpose will be we use them for asynchronous element those element that will appear after some delay like after some time so we usually use find with some asynchronous code and then we have the behavior so it will just return a promise that results when the element is found or reject after the default timeout which can be also Configured

by the way and the use case will be when you are testing something it will appear asynchronously like for example API call or user interaction or database call or something like that so then we can use all of them with all so like we have get all by then we have a find all by and then we have a query all by so we can use all of them for handling multiple element of the same time and the behavior will be this query return array or list of elements and the Use case will be when

you expect multiple element and want to interact with all of them so that was about the get by find by query by and get all by find all by and query all by so let me just show you all of them in diagram so the first one we have is a get by and the use case for there is like when you expect the element to be in the dome and it return single element and it throws an error if the element is not found then we have a query by and the use case For

there will be when the element may or may not be exist in the Dom and it will return a single element or no and it will not throw a an error okay so if the element is not found so it's going to gives us null but not errored then we have a find by so when the element is asynchronous like it will appear later it will take some time so it will return promise like single element and yeah it will throw us an error if the element is not found then we have a get all

by when You expect multiple element like for example array of elements and it will throw an error if the element is not found and then we have a query Al by and it is exactly the same like as the previous one so when multiple element may or may not exist and it will return array of element or empty array and it will not gives us an error like it will not throw us an error then we have a find all by so when multiple element appear asynchronously so it will return Promise array of element and

if the element is not there yet so it's going to gives us an error so that was all of them so now let's get into the coding and you will master all of them okay so now let's start from the first one which is a get by so I'm going to go ahead and create my component with the name of get by queries. ESX and first of all we are going to be writing our code and then we will get into that testing part so let me just remove that label and I'm going To just

write my H1 and I'll say like my component there we go now underneath there we going to be creating a button which will say like submit and I'm going to also specify the area label label like so and that's going to be set to submit now underneath there we have to create our button and it's going to say like cancel Maybe c n c there we go and we're going to be passing the ID and ID will be set to cancel button and now underneath we have to create our input Field and this input field

will have the type of text and we're going to be also placing a placeholder which will say like enter the text and now let's just also provide our anchor tag and here we can just P like some I don't know maybe https and then uh maybe example.com would be fine just write like example or test.com or something like that I'm going to also provide the target and the target will be set to blank and I'm going to put the rail and rail will be Set to this thing which I can't pronounce so that's why I

didn't even bother okay so let me just provide a label like visit uh viit example now need let just cre word div and I'm going to past like custom element and here I'm going to also paste the data past ID and it's going to be set to now let me just s my file and go back so this is all the stuff that you have to write right and I want you to also provide these attribute as well because now we are going to be Selecting all of them inside our test file so what I'm

going to do is that I'm going to go ahead and go to my components and let's just create word get by queries. test. TSX right here and the first thing that we have to do is that we have to render I mean like import our render and also our screen from where from our testing library reactjs and we also have to import or come on import or get by queries from that component Folder and we also have to provide our describe and describe our code which will be get by queries and inside there I'm going

to provide my it and it should should render the component with the correct so let's just start from the heading which is this H1 right here so how the what we are going to be using there well first of all we have to render our component then we will think about this so I'll use like get by queries now underneath we're going to be Using that screen and here if I hit done as you can see right here we have millions of them not Millions but we have a lot of them so I'm going to

be using like get by text and now let's just provide like my uh my component there we go and I'm going to also store that inside the heading variable and now let me provide my expectation so expect and let's just provide my heading to be in the document to be in the document there we go and now I'm going to save my File and now if I sve my file and here you can see we are now getting this check result right here like everything is successfully passing so yeah that's looking cool and this is

how we are going to be selecting our H1 by using uh get by text so that's done the next thing that we have to do is that uh we have to create another test Suite so I'll use like it uh should find an input with placeholder text so I'll just select Like this placeholder text which is this input field right here so how are we going to be selecting that I'll use my render method and let's just provide our get by queries and clouds there and now underneath we are going to be using our screen

and let's just use get by placeholder and here you can see we're now going to be ping this placeholder text right here like enter the text so I'm going to copy that and now let me just come on what the hell am I doing Let me just provide that right here and I'm going to store the inside the variable and I'm going to give it the name of like input field it's going to be equals to this function execution and now let me provide my expectation we want there to be uh in the document and

now let's just execute this have my file and here you can see everything is passing as we expect them to pass now let's just hide there and I'm going to also provide another test Suite so what I'm going to do is that I'm going to just write like it should find an an anchor tag with specific hre now we are selecting this anchor tag right here with this specific H is that I'm going to be using that screen once again but first of all we have to render or component so which is by queries and

I'm going to just render that right here then we have to use our screen and then get by R and provide my link inside there and here we also have to provide Our options and option will be name and we want to select for this specific name like uh visit example come on what was there visit example so I'm going to copy the name of there and place it right here and close there and we already discuss about this get by R and mostly you're going to be using this one but in the majority of

time maybe you will use that other one so you know what I'm going to store the inside the link variable so I'll use like link is going To be equals to this function execution and provide my expectation and here we have to pass our link and to have attributes and let's just provide our HTF and proide my https and you know let me just copy this attribute from here so I'm going to copy there and let's just paste it right here and now let me just save there and now my test is successfully passing because

it has that specific attribute done I'm going to to also close there now underneath there What we have to do we have to create two more test SS so I'll just create my it and it should find a div using data test ID which we already defined right here now we are going to be selecting there so if you want to select them first of all we have to render our component which is a get by queries and now let's just close there God damn it and now underneath there let's just use our screen. getet

by test ID and now here we're going to be passing our custom Element right here okay so let's just use our custom element it's going to be equals to this function execution or that method so I'll just put like expect in custom element will be in the document and now let me just execute that and here you can see my test is now passing but now if I go ahead and uh let's just say like if I just remove the sa my file and my test will fail and now let me just Pride there once

again and it is passing so now let me just hide There once again in and finally we have to provide yet another test case so I'll just use like it should come on should find an element by its row and here let's come on it should be a row and render or get by queries and here we are going to be using our screen get by rle and provide my rle which will be a button now we are going to be passing a name and name will be set to submit so we only want to

get that specific button so I'll use like button and semi file as You can see right right here so we have two buttons and we only want to select like this button not their second one okay so for them uh we are going to be using that expect and pride my button inside there and to be in the document now let me just save my file and here you can see everything is passing the way we expect him to pass and that was our get by queries next we are going to be learning about get

by all queries so now let's talk about get all by queries So what I'm going to do is that I'm going to create a file with the name of get all by queries. TSX and now inside there we're going to be creating our component first of all so now let's just do there I'm going to go there and inside there first of all we going to be creating our label and I'm going to give it the lbel of input one I'll just say like label for input one and now underneath there we're going to be

creating our input field with the type Of basically nothing and also I'm going to provide a placeholder to there in placeholder will say like enter text here here and I'm going to also create the ID and ID will be set to input one and I'm going to also provide the value and the value will be set to default value I'm going to also make it disabled so it will look something like this now let me just copy and place that right here just like that and now we are going to be changing this label so

I'll just Change that to like input two and also label for the input two another a n o t h e r another placeholder like so and another value and let's just also make there as input two now underneath that we going to be finding two input Fields so I'll just write like input with the type of basically nothing and we're going to be providing a placeholder and placeholder will say like enter something come on something oh my God something dot dot dot I'm going to also Duplicate and it should be like something else or

yeah that's going to be fine I'm going to also create a paragraph which will say like this is a paragraph with some text content dot so now let's just duplicate there and I guess that's going to be fine I'm going to also create an input field once again so that we can select them forward tting so I'll use the uh input field and now let's just remove the I'm going to also proide the value and the value will Select some display value and I'm going to duplicate and change it to another display come on display

value now underneath let's just create our images and we're not going to be passing any images but I'll just provide like image 1.png we don't even have those images but we now providing so that we can provide our test based on this so I'll use like a simple image or something like that and I'm going to also duplicate and change there to like Another simple image and this should be the image to right here so now underneath there we're going to be creating a div which will say like uh div come on div content with

title attributes and I'm going to also provide a title so like whenever you hover over this is going to show you this message like this is a div with title attribute and I'm going to also duplicate that and change that to another div another div with title attribute and the content Will be another D with a Content or another the content there we go so now that's totally done I'm going to also provide one for the button so I'll just provide a button which will say like disable button one and I'm going to provide the

rule and the rule will be set to button and here let's just proide our area label come on area label and that's going to be set to this is a button now let me just duplicate that and I'm going to also change that to the Button too and this should be button like so and I'm going to also change those labels so that it will look a bit better now underneath there let's just create word which will have the level of uh this div has test ID of one dot and this test will have the

ID of two I'm going to also provide the Tera test ID right here so that we can select the forward test so it's going to be set to like custom test ID one or something like that and you know what let me just Copy that from here and now let me just place that right here I'm typing a bit fast so now let's just change that to like uh custom test id2 and now let me just sa my file and that's going to be at forward G X now let me go ahead and go to

my test components and here we are going to be creating our get all by queries. test. G not jsx but TSX now let's just create our test so the first thing that I want to do is I want to import my render and I'm going to also Import the screen from where from our testing Library VJs that's going to be fine and we would also need to get our get all by queries from our component and now is pro our describe so not declare but describe there we go and here I'll just say like um

get all by queries and it should first of all let's just provide there for the first one so it should render multiple that can be queried by various v i o us various methods so it should be v a r i O o us there we go v a r i o u s now inside there we are going to be providing all of our test Logics I don't want to create those EDS and also that render again and again I don't want to waste your time so we are going to be doing that right

here but you don't have to do that in real world projects as I show you in the beginning of this course so like you don't have to do there I want to save some time so that's why I'm doing it this way so I'll use like get All by query and I'm going to just close that right here sa our file and now underneath there let's just first of all select our input labels as you can see right here so we are going to be selecting this input and also this label so that we can

test there so the first thing that I want to do is that I want to use the screen and then get all by label text so me just provide there right here and here we're going to be placing our regular Expressions all Select label for input come on input and here let's just provide our I which means like if this is either upper case or lower case we don't care about the we want you to just search for this element and gives us all of them so where in the word is that one available so

now let me just copy that and now let me just place it right here so as you can see it's going to gives us this input and it's going to also gives us this second input right here so I'm going to store the Inside the variable so I'll just give it the name of like inputs by label X going to be equal to this function execution and now here we can provide our expectation like inputs that variable and then here we can get the length to B two and now underneath there let's just iterate over

through all of our input Fields like here we can see we have more than one so which means like we're going to be iterating over through there so we'll use like inputs uh you know what Inputs by label text and let's just use our for each right here and we're going to be passing our input Right Here and Now inside there is pro to our expectations so I'm going to pass my input here to be in the document and now I'm going to execute that I'm going to also duplicate the once again and here we

want it to be disabled so now let's just save our file so now let me just save my file and now I'm going to run my code so I'm going to use like npm run Test UI so it's going to run my as you can see all of our test are now successfully passing and we are now getting every single thing totally passed now we are going to be selecting these input Fields with these placeholder so how can you go about doing that once again I I am not using this it again and again because

I want to save some time and you should be doing that so you know what let's just first of all use our screen and we have A get all by Place holder text so it's going to gives us the collection of them so we would use like enter something and I'm going to also paste this I for Rejects and now here let's just store the inside the variable with name of inputs come on inputs by place there we go and now it's going to be equals to this function and I'm going to also provide my

expectation right here so that inputs uh you know let's just copy them I'm going to copy there right here And now let me just place there and here we also need the length and we want it to be two now let me paste it right here once again now let's just iterate over through there because we know it's going to gives us a collection so here let's just put our expectation so we want the input to be in the document so this is used to be in the document and now I'm going to also duplicate

and change that to be disabled and now let me save my file and our test is failing okay Received element is not disabled let's just check check this out so yeah it isn't disabled so now let me just make that disable I'm going to copy that and place it right here and now let's just check this out and here you can see our test is now successfully passing that's cool now let's go ahead and just select this paragraph and now let's just go there and select these paragraphs so I'm going to be using like screen

and then get all by text and now let me just hit Enter right here and you want to access there by this text so like this is a and let me just copy that from here I'm going to only copy this portion so let's just copy that if you want to copy the entire portion you totally can but in my case I'm not going to so I'll just store the inside the variable with the name of paragraphs by text and it's going to be equals to this text right I mean like this method and now

here we have to provide our expectation so paragraph by Text and we want to get the length of there and we want there to be only two and now underneath let's just itate over through there so I'll use like for each and for each paragraph what do we have to do uh we have to provide our expectation and let's just provide our paragraph inside and we want there to be in the document so now let's just sa our file and once again all of our test are now successfully passing now that we successfully selected these

paragraph The next thing that we have to do is that we have to select these input Fields so I'm going to go ahead and just select them so what I'm going to do is that I'm going to past like screen then dot come on screen. getet all by display value okay so let's just put like some what was that it was some display value I guess so it shouldn't be some display value or you know let me just select this one we don't care about this one so I'm going to just select there I'll use

Like uh some display value and provide my I there now let's just store the inside the variable with the name of inputs by display value and going to be equals to this function now underneath we going to be providing our expectation and let's just provide our input and yeah that's same thing okay provide our length and we want there to be only one because we only want to select this first one we don't want to select this second one okay so we only want to get There one and now let's just provide our expectations so

let's just provide like inputs in their display variable and we only want to get the first one and we want it to be in the document and we also want it to be disabled so let's just Pro our disabled right here and I'm going to also make the disable so let's just use like disable sa our file save this file and all of our test are now successfully passing the next thing that we have to do is that we have to select These images right here so what I'm going to do is that I'm going

to go there and now underneath that I'm going to use the screen and then get all by all text so I'll use like all text because we want to get there by this alternative text so that's why I'm using like get get all by all text right here and I'm going to just P like another sample image or something like that and it should be sample sample there we go and I'm going to also store the inser The variable with the name of images buy another R text and it's going to equals to that now

here we have to provide our expectation and I'm going to be using that same expectation we want to get the length to be only one and now let us also put another expectation here we have to use our uh variable once again and we are only interested in the first one and we want that to be in the document test this out let's just refresh all of our test are now Successfully passing so that's toally done so the next thing that we have to do is that we have to select these buttons right here by

either with their role or by this area label so what I'm going to do is that I'm going to select there by these rols right here like both of these button have these roll right here roll with the yeah just a roll with a button I'll just write like screen. getet all by rows we already saw there and here we have to provide our button And we're going to be also providing an optional option array which will be set to name and we want to get there by this is a button and we don't care

if the text is uppercase or lower case so now let me just store the inside the variable so I'll just use like buttons by row or row would be fine and now based on that we are going to be passing our expectations so button by row and we want to get the length of there and we want there to be two and now let's just Itate over through this so I'll use like buttons by row and for each row you want to pass our button so for each button let's just Pro our expectation of button

and we want it to be in the document and we also want it to be disable Okay so are we making it disable or not so let me just make the disable so just provide a disable right here come on disable there we go I'm going to copy that and now let me just place it right here save my file save this file and here you can See we are now getting some error like unable to find accessible element with the r of button I have to check this out so I'll just cut that from

here we have to put the inside there we go so let's just put there right here sa our file and now our test is successfully passing finally we have to select this div by using these data test ID ID so how I can do that I'll just use like screen by get all by test ID and we want to get them also I'm going to be Using like custom test ID and here we are now providing this data I mean like this one like custom test ID one and custom test ID too so I'm going

to select both of them and now let me just store there like dives by test ID and it's going to be equals to this function I'm going to also provide my expectation and let's just provide our dives by test ID and we want to get the length and we want there to be two and here let's just iterate over through this I'll use like This um come on let me just copy there what the hell I am bad at spelling so let's just use our for each and provide my div inside there and provide my

expectation for the div and we want there to be in the document and I'm going to also execute this my file and here you can see all of our test are now successfully passing so now that we learn that how we are going to be getting something by get all by label text get all by placeholder text get all By text and get all by display value get all by all text and get all by test ID so yeah that was it about the get all next we're going to be covering the query by so

now let's talk about the query by so I'm going to just create a file with the name of query by queries. TSX and here we're going to be creating our component first of all and now inside there uh we have to create a d and inside this I'll just set alert message or something like that And we are going to be also providing a roll of alert and I'm going to also provide the area live and that's going to be set to Asser like this and now underneath there we going to be creating a button

which will say like click me and now let's just say our file and now we are going to be creating our label so I'll use like label and it will say like uh input one and here we have to past our label one and I'm going to also past my input field and we're not going to be Providing any time today but we are going to be providing our ID it's going to say like input one provide our placeholder which will say like search and now here let's just provide our label once again it's going

to say like input two in this case and label and I'm going to provide my input here remove this type of text and provide our ID input two so I'll just use like input two and place Holder will be set to email email there we go and now Underneath there let's just create our H1 which will have the content of header text and I'm going to also put a paragraph which will say like this is some paragraph text or something like that finally we have to create our div which will say like custom Element e

m n and we are going to be providing our data test ID which will be our custom ID so I'll use like custom Element e m n t and now we are going to be creating our input feeld with the type of now you Want to type let's just remove there I'm going to provide the value it's going to say like prefilled X or something like that now let me just save my file and these are all for Content so now let me just close there and now let's just create our test file for there

so I'll use like query by queries. test. DSX and the first thing that we have to do is that we have to import our render and also our screen from where from our testing library reactjs and also we have To get our query by queries and now underneath that provide our describe method and I'll select test query by and you know let's just remove there but it shouldn't be just query by but I'm going to also provide the methods like plural and here in inside this we we have to first of all select this alert

message you know let me just get my component so let's just get there we're going to be selecting this div and then we're going to be also selecting that button so Let's just render our component first of all so I'm going to be using like query by and then our component like so now let me get that screen so I'll use like screen and then query by row and here we can just provide our alert and now we are going to be storing there in the alert variable like so I'm going to also select the

B so we are going to be using screen. query by roll and provide my button inside there which will have the roll off button so now we have to just Provide our expectation and I'm going to provide the alert to be in the document we don't want to do anything crazy and we also want the button to be in the document so I'll use like button and save my file and once I do that here you can see we are now getting this res right here but should oh we just providing a should so should

query by rle would be fine now this is looking better so let me just refresh there that's looking better now we are going To be selecting these labels right here so I'll just use like it once again and I'm going to say like it should query by label text and inside there we have to render our component which will be our uh query by queries and now let's just first of all select our first label which is this one and then we are going to be also selecting this level as well so now let's just

our file and I'm going to be using screen by query by label text and I'm going to be passing my Label one and store that inside the label one like so and you know let me just duplicate there and change there to like label two and change this one to label label two as well and provide my expectation of label one and we want it to be in the document execute it and we also want the label two to be in the document two I'm going to S my file right now and let's just refresh

there and this is how it looks like right here okay so everything is passing the way we Expect them to pass so I'm going to hide them for a few seconds now you want to select this header and also this paragraph So This is how we are going to be doing the let me just make the in lower case I'm going to create another test site and it's going to say like it should quy by text and render my component right here query by queries and let's just use our screen by query by text not

test ID but query by test and here I'm going to just P like heror Text which we we are providing right here I'll store that inside the variable with the name of header and I'm going to also get that paragraph as well so now let me just also get this all use like screen query by text not testt ID but just a text there we go and this is some paragraph text and I'm going to also provide my paragraph come on paragraph is going to be equals to this function execution I'm going to provide my

expectation and you want to past that Header right here and we want that to be in the document and we also want that paragraph to be in the document as well so now let's just sa our file and now we are getting an error let's just check this out okay let me just get there um you provide a value appr to the field of own change this is not something that I'm looking for you know let me just change there to my Rex so it will start working so now let me just change there to

Rex still it is not working let me Just check this out I click on there okay so we are now getting query by query hardex I mean Herer Tex oh my God Herer Tex and now it should be passing it should be passing now let me just copy that and place it right here and yeah everything is not working the way we expect them to work I even change this one like I shouldn't have to but I thought it may be a problem right here so let me just change That back and yeah okay so

we are getting in air what the hell so we have to change that to this reject so now let me just save my file and refresh there and now everything is passing successfully now that we selected that the next thing that we have to do is that we have to select this D by using this data test ID so I'm going to go there I'm going to also hide there and here this's just word or test ID so I'll use like it should query by test ID and I'm going to past like fer and here

let's space for query by queries close them I'm going to first of all use screen by query by test ID and provide my custom element and now let me store the inside the variable with the name of custom element it's going to be equals to there and now we have to use our expectation custom element to be in the document come on to be in the document and now let me just execute the sem my file it is passing next we have to Select this input field with the type of value with value so I'll

just use like it should query by display value and render our component first of all like this and let's just get our um element by using query by display value d i s d l a y display value rather what the hell query by display value this one put this display value inside this so I'll just copy there from here I'm going to copy there and place it right here and store the inside the input and provide my Expectation of input and we want that to be in the document and now let's just sa our

file and here you can see all of our test are now successfully passing and we are not getting any errors so yeah this is how we are going to be selecting our Elements by using the query by using query by okay so now that we learn about the query by row we also learned about query by label text we also learn about uh what do we call it query by text and also query by test ID and query by Display value now let's talk about the query all by query so I'm going to create file

with the name of uh query all by queries. TSX and now inside there I'm going to be pasting a lot of GSX and you can find all of that jsx in my gab repository so now let me just go back first of all we have two buttons then we have a two divs with the role of alert and we also have two section with a ro of region then we have what label then we have a input field label once again And we have a input field for the third time then we have input Fields

with the placeholder of search and also the email we have our headers we have the paragraph We have a DAT with the custom data test ID and finally we have three more input Fields so you know let me just test this out I'm going to close them and I'm going to create my component with the name of query come on query all by queries. test. TSX and the first thing That I want to do is I want to import the render and also the screen from where from our testing library reactjs and I'm going to

also import the query all by queries from our component and I'm going to also put my describe and test query all by methods would be fine then I'm going to provide my it it should query all by RW first of all we are going to be querying our element by R so I'll use like query all by queries and underneath there we have to first of All get this button so now let me go ahead and go to my component so we are going to be getting these buttons so I'm not going to be going

through like each and every single one of them I'll just write a quote so I'll use like screen get all by row and here we have to pass our button and I'm going to store the inside the variable with the name of button now let me select that alert so I'm going to be using screen and then query all by row by row and here r o e And okay so we have a query all by row why it's not working let me just pass alert okay now it's working so here we also have to

store the inside the alerts variable and this is how it looks like so now we have to get the region it's going to be equals to the screen do query all by row and here we have to pass our region r e g i o n inside there I'm going to provide my expectation right here so we want it to be first of all let's just space for buttons and we Want it to have the length of two and I'm going to also duplicate the like three times and we want the alert to have the

length of two and we also want the region to have the come on r e g i o n we also want the regions to have the to have the length of two and and you know what first of all let me just get that alerts and place it right here sa my file and here you can see our test is now successfully placing and why is there because we have two buttons two Alerts and two regions inside our jsx so here you can see we have two buttons two alerts and we also have two

regions so that's why our test is now successfully passing so now let me just hide there now let me create another test Suite so I'll just go ahead and use my it come on it should query all by placeholder text in this space and I'm going to first of all render my query all by queries and close them now that we have to select these input feeds with the type of I Mean like the placeholder of search okay so it's going to gives us these three like the first one and this last one it's going

to just skip this one so what I'm going to do is that I'm going to use like screen then query all by placeholder text and past my search inside there and I'm going to store the inside the variable with the name of search input and going to be equals to there and I'm going to also use the screen. query come on query all by Placeholder text and past my email inside there and now let me just store there inside the email inputs and it's going to be equals to there okay so I'm going to also

past expectation and provide my search element or search inputs rather and we want that to have the length of length of three because as you can see right here so we have this input field like this is one two and this one is three so this T going to pass and I'm going to also proide the Expect and email inputs and here we want that to have the length of come on to have length of only one okay so we are now selecting this one email one so now this test is going to pass and

as you can see right here this test is now successfully passing and I'm going to also hide them now that we have to select this H ones and also these paragraphs so now let me just go ahead and select them but first of all we have to create our test it should create all By textt so I'll use like first of all the render query by queries and then we have to uh use the screen and query query all by text E EXT and provide my you know let's just use our reject so header text

and select there I'm going to also store that inside the her variable and now to need there we have to use the screen query alt or query all by text once again not test ID but just a text once again and we have to use our Rex like paragraph X and here let's just Use them right here and now we are going to be selecting them by using our paragraph and now let's just sell and I'm going to also provide our expect for that so we want the headers to have the length to have the

length of two now let me just duplicate that and we have to change that to paragraph and we want that to have the length of two now let me just save my file and yep our test is now successfully passing I'm going to close that now we have to select these D Which have these custom data ID right here or test IDs to be precise so what I'm going to do is that I'm going to just render my or use my it so it should query all by test ID and provide my render inside this

so query by query and I'm going to also close there andne there we are going to be using our screen query all by text text ID and provide my custom element inside there so I'll use like uh cost custom elements it's going to be equals to that okay so We are now getting an error qu all by text ID test ID there we go now let me just call my expectations I'll use like custom um element and we want that to have the length of uh to have the length of two and now let me

just sa my file and this test should pass because now that we have only two divs which will have the custom test IDs and now finally let's just select these input field so what I'm going to do is that I'm going to just hide there for a few seconds and We have to write where it is so I'll just use like it should query all by display value and for my render inside this so query all by queries and close them now that we have to use our screen query all by display value and provide

my text inside there so you know let me just copy that from here I'm going to copy the place it right here and you know we also have to yeah I guess that's going to be fine and I'm going to store the inside the variable with the name of Input or input values v l u s if I can spell that today God damn it input values there we go and now let me just duplicate there and we have input vales to and also change there to two Okay so I'll just put my expectation input

values and we want that to have the length of to have the length of two and duplicate and we want the second one to have the length of only one because we only have the text two one time and we have the text one two time right here so That's why our test should pass so as you can see right here now that we learn about um get all by row I mean like we learn about the query all by row we learn about the query all by placeholder we learn about the query all by

text query all by test ID and query all by display value okay doie so now let's talk about the find by queries so I'm going to create a file with the name of find by queries. TSX and inside there let me just place all of that content And now let say our file first of all we have our H1 then we have our paragraph in the button with the area label or area label then we have our input Field image input field data div with the data test ID and then we have our label with

HTML 4 and finally we have our input field right here so which is looking cool I'm going to go ahead and provide a test cases for them and by the way you can find all of their coding in my GitHub repository so I'll use like find By queries. test. DSX and now let's just hit enter the first thing that we will need is our render method and also our screen from where from or testing Library Dom and underneath that we have to get our uh find by queries and now let me just copy them and

the next thing that we have to do is that we have to provide our describe and I'm going to just provide like find by queries component and inside there let's just use our it and it should or you know What in this case I'm going to just use a test rather what the hell I've been using that it again and again now let me just try out the test so it I mean like not it but test finds an element by its text content okay so now inside there I'm going to render my component like

find by queries and close it like so let me just save my file and the first thing that we have to do is that we have to select this H1 so how in the world we are going to be selecting there well to Select the we already learned about a lot of ways but now we are going to be covering the find by text so which also means there is going to be an asynchronous operation so which also means that we have to mark our function as as function because now it's going to take some

time so now we are going to be using aw and screen and then find by text and inside there let's just use or find by uh what was that find by query St so you know let me just copy this Entire thing and place it right here and provide my rexs inside there and I'm going to store that inside the heading element and it's going to be equals to that function execution now let me use my expect and pro my heading element and we want that to be in the document let's just say or F

and here you can see our test is now successfully passing which means like everything is working the way we expect them to work next we have to select this area label so how what we Are going to be doing that well that's quite simple and easy okay so we are going to be using their test once again so we're not going to using that from the gist God damn it so let's just use that it and I'm going to just rename that to test because I know a lot of people will ask me H why

aren't you using test instead of that it so now I'm using the so find an element by its area area and I'm going to also Mark the as Asing because this is a Asing component So here we have to provide or find by queries function or component and now underneath that we have to first of all use the a then we can use the screen and then find by label text and here we are going to be passing this label text right here so click me I'm going to copy there and let's just put there

and we want there to be either lower case or upper case let's just get what button element it's going to be equals to this function execution provide my Expectation and we want to just pass our button element like so and we want it to be in the document I'm going to save this file right now and here you can see our test is now successfully passing now let me just hide there next we are going to be selecting this input field so how we are going to be doing there I'll just use that it and

now let me just rename that to like test and I'm going to say like finds an element by its placeholder text and I'm going to also Mark there as Async so that we can see the so is use our render and find by queries and I'm going to close there like this now underneath there we're going to be using the aw screen find by Place holder come on find by Place holder text there we go now we are going to be placing that same text uh so I'll just copy there now let me just place

it right here and provide my I now we are going to be using like input element it's going to be equals to this value now let's just try our Expectation and we have to P our input element and we want that to be in the document and now let a Ser file and our test is now successfully passing because it should be I'm going to also hide there the next thing that we have to do is that we have to select this image by using this alt or alternative text so let's just use our test

case once again Yep this is working so I'll just change that to an element on element by its r and hit tab remove them and first of all You're going to be rendering or find by queries close this semi file hit Tab and now underneath them uh we have to use the aw and Screen find come on find by all text like so and here we have to just past that alternative text so I'm going to just copy there which is just a test image and we have to place it right here and I'm going

to be using like image element it's going to be equals to that value and we also have to mark the as sing because this is an s synchronous Component so now we are going to be using our expect image element and now we have to use to be in the document server file everything is passing and this is what we expect that's done next we have to select there by using this display value so I'm going to go ahead you know let's just undo that so I'm going to go ahead and provide my other test

case so I'll use like uh test and here just just P my test case so test finds an element by its default value And I'm going to change them and first of all you also have to mark the as SN so that we can provide our asynchronous operation inside there I'm going to use the render and provide my find by queries and execute this component right here save this file and now we are going to be using a and then screen find by display come on display oh my God find by uh display value there

we go now inside there we are going to be placing that same display value so you know let Me just copy this entire thing and place it right here and provide my I there now let's just use our input elements and store the inside this variable and now we are going to be placing our expectation like input element and we want it to be in the document and now let's just say our file and our test is now successfully passing this is something that we expected now we are going to be selecting this div by

using this test ID so how in the world we are Going to be doing there this is exactly how we are going to be doing there so I'll just use the test once again and choose the second one and now let me just remove the and find uh an element come on element by its data test ID and now inside there what we have to do we have to render our component first of all so like find by queries and save this file now underneath that we have to use our a but first of all

God damn it we have to use this s Inc syntax right Here and then we are going to be using like screen come on screen find by test ID and now let's just P that same test ID inside there I'm going to copy that from here place there and provide my I there for our rejects now let's just use our test element it's going to be equals to that same element and now let me provide that expect test element and use that to be in the document yep our test is now successfully passing and this

is what we expected and now the final thing That we have to do is that we have to select this label so now we are going to be selecting this label right here by using this HTML 4 so now let me just hide there from there now we are going to be passing our test and choose there I'm going to use like finds an element by it's HTML 4 in this case because we are going to be selecting our element as our HTML 4 remove there and P our as sync inside there and now inside

this component first of all we have to render Our find by by queries and execute there right here and now we are going to be using a and then screen find by label text and here let's space for label text which is uh this this label text so I'm going to copy that right here place there and proide my I there now I'm going to be using like uh label element it's going to be equals to there and now let's just provide our expectation and inside this expect for our label element and we want it

to be in the document and Our file and yeah that was our entire test case find by label text find by placeholder text find by all text and find by display value find by test ID and finally we just learned about the find by label text right here so yeah that was it about the find by and this is an asynchronous operation you know what I just Chang my mind like whether you like it or not but I'm going to still cover there so what I'm going to do is that I'm going to just create

a Component with the name of find all by queries q e r i s. TSX I'm going to copy and place all of that content right here so first of all we have R H1 then we have three paragraphs then we have three buttons with area labels then we have three placeholders then we have three images three input field with dis I mean like default value then we have a three D with the data test ID so now let's just provide our test cases for there now I'm going to do something special Okay so we

are going to be creating a component with the name of find all by queries. test uh come on test. ID what the hell am I doing today TSX there we go the first thing that we have to do is that we have to import our render and also our screen from our component which is a testing Library for/ react and now we have to import the find all by queries and yeah that's then we have to provide our describe right here so I'm going to be using their describe I'm Going to select find all by

queries component component there we go and here I'm going to be using something called the setup and tier down so this is a concept which we are going to be covering later but now we have to use this hook which is a before each okay so we want to run this function before each test case so this is just exactly what they mean so we are going to be just spacing this function and here we are going to be just spacing our render and Find by all queries which we just created this component and we

want this function to run every single time or test case run okay so this is why we are now passing like run before each test case so now let's just save our file and by the way we are going to be learning about the setup and here down a bit later or maybe not I guess we are going to be learning about that I'm not quite sure about that but you know this is space or test cases so I'm going to use like finds all the elements by text so now we are going to be

using like a w and Screen let's just use our find come on find find oh my God find all by text and here we have to pass our item right here which we are providing so let me just go ahead and select them so I'm going to just use like item one I'm going to copy there but we cannot p a one right here just like the instead we have to first of all write this back slash and then D and Then for Slash and now we have to also Mark there as our asness component

or async function now let's just store the inside the paragraph it's going to be equals to the and and I'm going to use like expect case place my paragraph inside there to have the length to have the length of only three so now let's just sa our file and our test is now successfully ping now let me just expand there and yeah it is totally working and why is there that's because it's going To select for each of the paragraph it's going to just select them so now it's going to give us like more than

one element which means like three elements now we have to it over through there so I'll use like for each password paragraph like so and for each paragraph what do we have to do uh or you know let me just change there with s so I'll just select all of these three and provide my S inside there and I'm going to select Expect provide my paragraph and we want that to be in the document and now let's is s our file still all of our test are now successfully passing and now let me just hide

there the next thing that we have to do is that we have to find out all of that buttons and then we can test this so let's just use that I'm going to use that it finds all The Elements by row so now we are going to be selecting those buttons by roll and I'm going to also Mark my component or function or Test Suite whatever you want to call there by using the Asing syntax so I'll use like a w and Screen find come on find find all by row and here we just have

to pass our button inside there and let's just store that inside the buttons variable let me just put my expectation and that buttons we want to have the length of of three and also it's going to gives us that lens so we just have to use like buttons. for each element uh we want to just pass our button and for Each button in this case what we have to do we have to provide our expect and for this expect we are going to be passing our button and we want that to be in the document

and now let's just our file and here you can see all of our test are now successfully passing and this is something that we want now that we selected the buttons the next thing that we have to do is that we have to select these inputs with these placeholders so let me just hide there and provide Another test case so I'll use like it finds all the elements by placeholder text and mark the as as synness component so async and here inside there I'm going to be using a w screen find all by placeholder text

and I'm going to just paste their text inside this so I'm going to copy there place them and you want to store the inside the inputs right here and underneath it we're going to be using the expect provide my input inside there and we want that to have The length of uh only three and and underneath we are going to beting over through there once again so I'll use like for each and pass my input inside there and pro my expect input to be in the document and execute there let me just sa my file

and refresh there and still all of our test are now successfully passing and which is something that we want and now we are going to be selecting these images by using these all text so how the what We're going to be doing there let me just show you how we can do that so we done that like 1,000 time in this course so it should find all the elements by all text in this case and I'm going to also Mark the as asnc inside there let's just use our aw screen find all by all text

right here and provide my test IDs which is this test image so now let me just place there and we are going to be using the images and now underneath to provide what expectation of images to Have the length and we want it to be three of them and we're going to be also itting over through all of that images by using these four each let me just P the images so I'll just use like expect the image to be in the document and execute my function but okay here we have to pass our arrrow

right there let's just sa our file and our test are now successfully passing next we have to find out all of that Elements by using this default Value so I'll just go ahead and hide there for a second and now now we have to create where it so it should finds all the elements by display value and Mark as or sing function I'm going to be using aw in screen find all by display value and P my test value inside the which is a input test one and so on and so forth so you know

let's just God damn it I can't even copy it so let's just copy there and place it right here and we want to be like this so instead of Providing this one we want to select like all of them so I'll just use like inputs and this is provide there right here and now let me provide my expectation provide my inputs inside the inputs PS it should be inputs like so and it should have the length of only three WI our inputs dot for each input we have to provide our input inside the provide our

expectation of input and we want that to be in the document SA or file and our Test is now successfully passing and the final thing that we have to do is that we have to select this div which will have this uh data test ID so you know let's just do that and that's going to be the final thing about these query methods so let me just go ahead and qu it it should finds all the elements by test ID and I'm going to just first of all use the aware but first of all we

have to mark the as asnc and now we are going to be using a screen find all by Test ID and here we have to pass the test IDs inside there so let's just copy there and now let me just place it right here and I'm going to be using con test element it's going to be equals to there now underneath there we going to be using what expect my test element and we want that to have the length of only three and now let's just use our test element dot for each element uh what

do we have to do we just want to provide this expectation like for each element We want that to be in the document save our file and finally or all of our test are now successfully passing and there was a lot of query methods that we cover in this section so what do we learn uh okay we learn about the find all by text we learn about find all by ro and then we learn about the find all by placeholder text find all by by all text find all by display value and find all by

test ID okay that was a lot of stuff now let's talk about how we are going to Be testing the user interaction like whenever the user types something or the user clicks on something and so on and so forth so let's just test this so the first thing that I want to do is that I want to create a component with the name of not here but here I want to create a component with the name of toggle message. ESX and now inside there we're going to be just is creating a simple Toggler so I'll

just import first of all the use St and now underneath there we Have to create our component with the name of toggle message and now let me just initialize my state so I'll just use like use State and I'm going to provide the false initial value inside there and I'm going to also destructure is visible insert is visible it's going to be equals to this Us St now here let me just remove that from there and I'm going to be just creating a button which will allows us to toggle our message so I'll use like

toggle message and here Let's just render that message so if this is visible let me just write like if this is visible so in this situation we want to show this paragraph which will say like this is a or this message is visible or something like that and now I'm going to also attach the event handler on there like when somebody clicks on this button so we want to F this function which is a toggle message and now let me just copy the name of there and create this function right Here so I'll use like

cons tole message and here we are going to be just using the set is toggle or set is visible and we want to Pro our previous St and not previous St okay so now let me just save my file and this is how our component looks like so now let's just go ahead and test that I'm going to create a file with the name of toggle message. test. DSX but first of all whenever we are testing the user interaction we have to install another Library so now let me Just stop there and here you know

let me just delete that from here and here now we are going to be installing the user event so I'll use like npmi and then DD as a Dev dependency and I'm going to use like testing D Library user event and now let me just hit enter so it's going to install that right here and now let me use my npm run test UI so it's going to run my test Runner inside the test UI so yeah now let's just import all of our stuff so I'm going to be importing the Render and also the

screen from our testing library reactjs and we would also need to import the user event from where from the testing library and now in this case we are going to be importing there from the user event May because we want to listen to the user events and now let's just import also our toggle message component so that we can work with the I'm going to use the describe right here and I'll say like toggle message component and here inside There I'm going to use like it should toggle the message visibility when button is clicked c

i c Ked and we would also make the SS in right here and now first of all we have to render our component which is a toggle message component and I'm going to save that right here the first thing that we have to do is that we have to get that button then we would be able to click on that button so I'll just use like screen. getet by roll and I'm going to provide The button and which button we want to select we want to select this button right here so I'm going to just

copy this message and I'm going to also provide the options and here let's space our message and I'm going to provide the as a Rex and it shouldn't be I and now let me just thr the inside the B variable and this is how it looks like the next thing that we have to prod that we have to make sure that initially our message will not be shown inside the UI So I'll just use like expect and then let's just use our screen do query by text and here let's just space the message visible what

was that I'm going to copy there or this message is visible I'm going to just place it right here as a Rex and I want it to be no so like initially we want this to be hidden and now here we are going to be testing the user interaction so I'm going to just grab my user event from this Library which we already imported right here and Now here inside there we have a lot of method so if I just hit dot here you can see we have a clear click copy cut and so on

and so forth like all of the user interactions so I'm going to just choose like click so like whenever the user clicks on this button first of all we are now selecting this button this button from the Dome then we are telling it that initially we want this message to be hidden and now we are providing like whenever we click on this button so In this situation what do we have to do let me just write like a r right here because there going to be an asynchronous operation then we want this message to be

shown so I'll just use like expect and here let's just space over screen and then get my text and I'm going to just P this text inside there so I'm going to copy that from here this entire thing and now let me just place that right here and I'm going to provide my I there and we want there to be in The document and I'm going to execute there and after that whenever we click on there once again so use like user event and whenever we click on there once again so in that situation we

want to hide there okay so I'm going to just copy this entire thing and now let me just place it right here and that was it so now let me just save my file and now let me explain there first of all we are going to be selecting this button from the Dom and then initially we want this Message as you can see right here we want there to be hidden and when somebody clicks on that button this button so we want this message to be visible and whenever they click on there once again so

we want this message to be hidden okay so you know let me just run my test cases and as you can see right here all of our tests are now successfully passing right here which means like everything is working the way we expect him to work so that was Example number one now let me give you yet another example so I'm going to create a file with the name of too list. DSX and inside there basically we are going to be just creating a simple to-do list so I'll use my rafc inside there and the

first thing I want to do is that I want to just my todos and set todos and it's going to be equals to the used St and the initial value I'm going to just put empty string inside there and I'm going to also create an interface For my type so I'll use like interface to do and inside there let's just Pro our text and that's going to be set to string and the completed flag will be also set to Boolean okay so now let's just copy there and I'm going to also inate my component with

these to do okay just like that and let's just provide our empty array inside there and I'm going to also get the new new too and set new too is going to be equals to the U state so let's just use the UST State And the initial VAR will be set to empty string now let me go ahead and go to my UI and I'll just use like uh to do app or something like that and I'll also proide my input field with the type of text and also I'm going to past my value so

let's just paste that value inside there and I'm going to select new to do and when somebody clicks on this so then we want to F this function which we are going to be creating in a few seconds so let's just provide there and I'm going To also provide the placeholder which will say like enter new too new too like that and now let's just s file now underneath we are going to be able to create a too by just clicking on this button so I'll just use like a too and here let's just space

or on click event handler and when somebody clicks on there so we just want to F this function so which is a handle add to do now underneath there we are going to be rendering over todos so I'll use like ul And inside this UL we are going to be using too. map and here let's space our to-do and also our index inside there and now let me just space my Ali and for each lii I'll provide my key and the key will be set to index and you know what I'm going to also provide

a bit of I'm not going to do that I'm not so let's just provide our input field inside there and the type will be set to checkbox in this case and we are going to be also providing a checked and here Is going to be set to to do do completed on change and here let's space or Arrow function which will say handle uh toggle to do handle toggle to do and here let's just space our index inside there and by the way we are going to be creating all of their functions in a few

seconds okay so now underneath this input we have to render our too. text so that we can see there and finally our button which allows us to delete the to-do okay so I'm going to past like on click when Handler and let's just pass our function which will be handled delete too and P or index inside there now let me just go ahead and just create these functions the first thing that I want to do is that I want to just create or add too so how in the world I can do that I can

just use like cons handle add to-do and inside there I'll just use like if new too. trim we just want to trim it out and then set to-dos and here first of all we want to make a clone off for Existing to-dos if we have there so I'll use like to-dos and then I'm going to use like text and that's going to be set to my new to-do and also the completed flag will be set to false okay and now underneath I'm going to be using like set new too and I'm going to make the

a store empty now let me go ahead and just create this handle input change so I'm going to create the right here I'm going to create like handle input change and it's going to take that event and I'm Going to also annotate as change event from the reactj and here we have to tell that that we want to use the inside the HTML input element and I'm going to also close it like so and inside I'm going to use like set new too and event. target. value value like this now let's just create this function

uh which is a hand handle toggle too I'm going to go to the top and I'm going to create there right here so I'll use like con uh handle toggle too and I'm going to pass my Index which will be set to a number and inside there let's just first of all make a clone or for existing to and I'm going to store that inside like con updated too and it's going to be equals to this variable and now I'm going to use that updated todos and P my index inside there and now we are

going to be getting that completed flag and if that is not equals to that updated to do and let's just space or index inside there the completed one and now we have to use Our Set uh come on set todos and provide our updated come on updated todos now let me just save my file and finally we just have to take care of this handle DD to-do so I'm going to create the maybe right here I'll use like cons handle DD to do I'm going to paste the index and that's going to be set to

a number and I'm going to S like to do. filter and provide uh basically nothing but we are only interested in the index so I'll just use like if index is not equal to That specific index and I'm going to also store the inside the variable with the name of updated to-dos that's going to be set to their to-dos I'm going to use the set to-dos and provide my updated to-dos right here so it's going to push there to this set to do there we go and I guess we are totally done with the component

so you know let me just go ahead and go to the not this one to the app and I'm going to render this component so that we can see there so I'll use like to-do list semi file and I'm going to use npm run uh Dev let's just copy this link and I'm going to place it right here so yeah we are now getting what to do I write something come on uh something and click on this addir too so it's going to add there I can also Mark the as a complete and I can

also delete there so yeah these are my to-dos and let's just test them so I'm going to stop there right here and I'm going to be using npm run test UI in This case so it's going to run my test Runner and as you can see we are now getting there so let's just hit refresh I already have those components so maybe I'm going to delete them like toggle message and I'm going to also remove the strle message component now I'm going to go here and I'm going to create my to-do list. test. TSX component

right here the first thing that you want to do is that you want to get the render also the screen and also from where from our Testing library reactjs now underneath we are going to be also getting the user event okay so I guess yeah we already installed it but it it is not helping us to import this so we are going to have to import them manually and I'm going to import it from the user event there we go we would also need to get our to-do list s our file and underneath we have

to describe our uh test site so I'll just give it an out like to-do list component or something like that and Here let's just provide our first test like it should renders to do list with an input and a button okay so I'll just first of all render my component which is a too list and I'm going to close there underneath there we're going to be using our expectation and here let's just Prov our screen. get by placeholder text and now inside there I'm going to just paste this placeholder text inside there so I'm going

to copy there now let me just place a right here and that is Our expectation and we want it to be in the document and we also want let me just put another expectation screen. get by text and we want and we want to get that button okay which is this add to do so I'm going to copy there now let me just place it right here and we want that to be in the document s file so yep our test is now successfully passing so that's St done now we are going to be creating

another test for adding word to do so I'll just use like it can add a Too item maybe and I'm going to also Mark the S sing because now we are going to be interacting with our component so I'll just use like render and to-do list uh component now underneath that the first thing that we have to do is that we have to get or input field and then we can interact with the so I'll use like screen. get by placeholder text and here I'm going to just P like that place holder I'm going to

copy it and place it right here and I'm going to store that Inside the input right here but it shouldn't be inputs but it should be just input now you want to get that button like whenever somebody clicks on this button then you want to capture those interactions I'll use like screen. get by text and now we going to be getting the not test ID but just text now we going to be getting there by this text so I'm going to copy there and place it right here and I'm going to use cons button and

it's going to be equals To this button right here so now the Moment of Truth like whenever the user type inside this input field what do you want to test and also whenever the user click on this button so what do you want to test in that situation so I'll use like a and user event okay so inside this user event we have our type okay like whenever the user types something inside this so we're going to be passing our input which is going going to be our place where we are going to be typing

Something and I'll just type like uh new too or something like that and we would also need to click on this button right here okay so I'll use like await and user event and we have our click method right here and now we're going to be passing this button so like whenever we click on this button so when we click on this button what do you want to see you want to see that new to-do which we now providing inside this input field to be rendered to the Dom that's it so I'll Just use like

expect and here I'm going to be using like screen get by text and let's just provide our new to-do which we are now providing right here and we want it to be in the document so I'll use like to be in the document save my file now let's just refresh now we are failing I don't know why but we are failing let's just go ahead enable to find the element with the all text it shouldn't be goddamn all text it it should be just a get by text there we go Now let me just save

my file and now our test is now successfully passing now let me go ahead and hide there for for a second now we are going to be able to make it so that we can Mark where to-do as completed so I'll just create a new suite for there and it can Mark a to-do as completed would be fine and I'll just first of all render my to-do list component right here and underneath them uh first of all we have to get our input field and all of that kind of stuff so You know what I'm

going to just copy a few things from here so we would need there I'm going to copy this entire thing from there now let just place it right here and I'm going to also Mark the As snc and now you want to get our checkbox as you can see right here we have this checkbox right here so now we want to get there so what I'm going to do is that I'm going to just get that checkbox by using screen. get by row get by row and I'm going to just place a Checkbox inside there

because we only have one checkbox inside your screen and I'm going to store the inside the checkbox variable like so so what will be your expectations so I'll just P like expect you want to past that checkbox but initially we want this checkbox to not be checked okay so I'll just use like not and then to be checked and now let me just execute that if I save there right now here you can see our test is now successfully passing like whenever We type something inside our uh input feied and we click on that button

so it's going to gives us that checkbox but that will not be checked initially so that's to done but now whenever we click on that check box we want it to be complete or checked so I'll use like screen do come on what the hell screen. get by text and here not test but text and here let's just SP what new to do inside there and const too item is going to be item is going to be equals to this New to-do right here and our expectation will be to- do item do to have the

style okay so I'm going to also pass a few style to all use like text declaration EC in and it's going to be set to line three I'm going to save this file right now and obviously our test will fail and that's because we are not providing any style to our LI or our checkbox so now let me go ahead and just provide this text or this style to my checkbox so I'll just select there and here let me just past this uh styling so now we are providing a text decoration of if the to-do

is completed in this situation we want there to take a line through text but if that's not the case we want to just provide nothing okay so now let me just refresh there here still we are now getting an error let me check this out oh we are now getting this error Den because we are not even checking the user interaction God damn it so we're Going to have to use the AIT and now we can use the user event and now let's just proide the click like whenever we click on there so you want

to P for checkbox and now this is pro our expectations so I'll use like expect the checkbox to be checked in this case so now let me just execute there and it should be just expect expect there there we go save our file and now here you can see all of our test are now successfully passing so then stly done we also want To make it so that we can delete something so I'll just provide my it and it can delete a to-do item I'm going to mark it as snc and now let me go

ahead and just copy a few things from there so I guess that's going to be fine or you know what I'm not going to do that I'll just copy this line of code now let me just place it right here and first of all you want to get our placeholder so like screen by get by Place holder text and now let me just uh Pro like enter New too and store that inside the input right here so cons input is going to be equals to there and now let me get my button so like whenever

we click on there so I'll use like screen. get by text and here let a space we add to do inside there so whenever we click on that button so I'll use like user event. type and here let's just pass for input field and new to do and and then we are going to be clicking on that button so use like user event do click event and Now let's just space our button inside there and now we are going to be getting the delete button which we have right here so we have this delete button

and now let's just get there so I'll use like uh screen by get by text and provide my delete inside there and I'm going to be carrying this so I'll use like delete button it's going to be equals to that and now whenever we click on that so in that situation we just want want to delete our button so let's Just space our delete button sa our file and we also want to provide our expectations so it's going to take a bit of time so for there we are going to be using something called the

wait for so we are going to be waiting there for so first of all we have to import there from the react testing Library so I'll use like weit for one W AIT T4 there we go so it's going to allows us to wait for a specific thing okay so here now we are going to be passing there and now This is go our expectation screen do uh quick by text and let's just use a new to do inside there and not to be in the document okay so then we want to just remove this

so now I'm going to save my file and that was a so now let me just refresh my uh file and yeah all for test are now successfully passing and this is how we are going to be testing the user interaction by using the user event library from the testing Library so what Is a design system there is no actual definition to where a design system is and why is that that's because if you ask a designer they will say it's a UI kit or it's a color palette or typography Grid or iconography but if

you ask a developer they will say it's a component Library style guides or some sort of a documentation but the truth is a design system is all of there a little design and a little engineering so what do I mean by that well according to Google a design system is a comprehensive set of standard guidelines and components that ensure consistency and cohesion in the design and development of a digital product it serve as a shared language and resource for design teams developers and other stakeholders to create a cohesive user experience across various platforms and products

so that was a bit weird definition of what a design system is but now to put that as simple as Possible you can think about the design system is like a toolkit for building a digital products it includes everything you need to make sure the design is consistent and looks the same across different screens or Pages now let's talk about the basic comp components of a design system the first one we have is a design principle and it's a high level guidelines or philosophies that inform design decisions like Simplicity accessibility or usability the second One

is a UI component and they are a reusable element such as buttons forms model navigation bar and other common interface element often designed with responsiveness and accessibility in mind third one we have is a patterns and they are repeated design solution to common problems such as card layout grade or r down menus and so on next we have is a style guide and there are a collection of visual design rules such as typography uh color pallet and there are A lot of them which we are going to be covering in this course next we have

a branding they ensure the design system aligns with the company brand identity tone and value then we have a documentation and they are a clean instruction and best practices on how to use a component and pattern correctly as well as how to maintain the system overall time and then we have a code which is every everyone's favorite topic so for technical consistencies this Includes frontend code like component or UI framework such as react components or css Frameworks that developer can integrate into their application something which we are going to be building by ourselves the final

piece of the puzzle we have is accessibility and their recommendation for creating a product they are usable by people with disabilities ensuring that the design system support complains with accessibility standards as well so now Let me give you a practical example of a design system so let's say you are building bu a shopping app for a brand and you want everything like buttons colors fonts iconography layout and so much more to look consistent across the app a design system would help you achieve this so how that's going to look like well in your design system

you would already have your colors like gray gray alpha blue red Amber green teal purple pink and so much more something Which we are going to be covering in this course so you would already have your colors you would also have different typography like different fonts which you are going to be using inside your app also you would have different icons for your brand finally you would also have different components which you can use inside your design system so now that you have every single thing set up inside your design system now you just have

to grab it and use the Inside your app that's it so now your app will look consistent and it will match the design system so those are about the theory of design system and now we are going to be building a design system in figma and that's going to be a lot of fun but before we jump into this section I want to preface this by saying if you are not a designer you can definitely skip this section but hear me out if you are working for a company or a super new company they will

ask you to Build a design I mean like they will ask you to design a design system for them that's the first thing secondly if you're building your own company just like I have then you would need to design your design system inside figma or some other tools so that's the only reason I'm including this figma design system in this course because I know this is not a designing course this is a advanced reactjs course so you shouldn't be watching that if you want to skip This section you can definitely go ahead and just skip

this section you don't even have to watch there but for those who are interested in building a design system in figma this is what you have to do the first thing that you have to do is that you have to just download a figma dcom or you can just use the inside your browser by just clicking on this icon and then provide your email and there you go and if you want to download there you just have to search Like pigma download and here the first link will bring you to the download page so you

can install or download there for Mac OS you can also download there for Windows and so much more so if you're a Windows user you can just click on this download app for Windows and that's going to be it okay so I already downloaded it and I already sign in because I've been using figma for about three or four years now so yeah I already set up every single thing and This is how the interface should look like I'm now hiding these stuff because you don't supposed to see them so what you have to do

is that you have to just go ahead and click on this create new and they change this layout again and again if you're watching this course in the future you should definitely check out like some tutorial about the figma or something like that okay so I'm going to just click on this design file and here you can see it's going to gives us This new design file I'm going to rename that to uh my small design system or something like that okay so now let's begin our design system but before I do that I want

to mention one thing that we are not going to be building the biggest design system in the planet Earth or something like that we going to be just creating a simple portion of there so what we have to do the first thing that we have to do is that we have to decide the colors come on the colors which we Are going to be using inside our design system secondly we have to generate a style for those colors and thirdly we have to convert those Style colors to variables there we go so these are the

three things that you have to keep in mind the first thing that we have to do is that we have to decide a color Forward Design system then we have to generate a style for there and finally we have to convert there to the variable so now let's start from the first one Like decide the colors which you are going to be using inside your design system and there are a few resources that I want to share with you but I want to say like I am not sponsored by any of these companies there are

just a few websites that I personally like if you want to use that you can if you don't want to use there you don't have to so now what I'm going to do is that I'm going to just uh first of all you have to go to the co o l o r s and I am not Going to provide the links of them in the description why well I just don't like to if you want to go to there you can if you don't want to go there you don't have to so c o

l o r s.co that's the first website just click on this button and once you do that here you can see it's going to generate a lot of colors for you and yeah here you can they're already sponsoring some other companies and dum like that yeah just hit space every time and it's going To give you a lot of colors and yeah that's the first website that I want to show you and the second website is this um cana.com and I can totally guarantee like you guys probably know this one and you can here you

can choose different kind of color combinations and stuff like that so that's the second place for colors yeah you can definitely just upload some sort of image and going of just extract a few colors from there and you can also go to this color. ad.com Probably you've heard about this one before you can just go to the explore and you can explore different colors if you like some pette you can just download that or you can just copy that or store the inside your library or something like that that's the third place and the fourth

place is this uh Cana once again can okay so that's going to be just for one time you can explore colors or different combination inside this Cana Yeah there are are a lot of colors the final place that I really like is this color hunt because it has a lot of flavors uh to choose from so let's suppose if you want to create some sort of a golden design system so you can just click on there it's going to give you a golden color right here if you want to choose some dark just like worel

you can just click on that it's going to give you worel uh kind of colors and if you want to choose cold so it's going to Give you cold color if you want to choose summer or fall happy or kids Sky there are a lot lot of them let me just choose this kids one and it's taking a lot of time but yeah these are the color for the kids so now that you know where to find the colors now you have to generate the style for your colors so I'm going to just remove that

from I'm going to hit o so it's going to gives us ellipse tool there we go and now I'm going to just create a few portion of This so and then I'm going to hold alt and shift and duplicate there one time and now I'm going to just do the hit control D so it's going to duplicate the three um four five and six so I'm going to just duplicate that like six times and now you can just click on there then go to this fil and choose your favorite color inside there so let's suppose

if you like like this color or maybe you like some sort of a red color you can definitely provide there but for this Code I already selected a color palette you may not like it but I like it okay so I'm going to also name them you know let me just name them I'm going to give it the name of like primary come on primary I'm going to just choose this one that one and put that right right here so that's going to be my primary color now I'm going to just move them around come

on what the hell I'm going to just move them around and this one will be neutral color now let me create One more so I'm going to just duplicate that put that right here and we're going to be also creating a color or generating a color for we warning uh next next let's just create for the danger so I'm going to just change that to like danger and this is going to be my danger color and now finally uh not finally but we still have two more left so I'm going to just change that to

success and now finally we have to create one more for the gray scale c a l E there we go and now I'm going to just provide my hexi decimal values if you have your own color already selected you can just specify there but in my case I'm going to just only provide my color so now let me go ahead and just choose this one and the first color that I have is hh1 4 F0 D6 so that's going to be my primary color then for the neutral I'm going to just use this color which

is hh14 2 ef0 hit enter so that's going to be my neutral color for the warning I'm Going to choose this color which is 1 d d B70 e that's going to be my warning color kind of a yellowish color for the danger we're going to be using this reddish kind of color which is a hash f014 for the success we're going to be using this color which is a hash same one e f014 hit enter so that's going to be my success color and finally for the gray scale we are going to be just

using this one which is a h 7 d8 C8 B so that's going to be my gray scale color Okay cool now we have to create a pallet for our color so I'm going to just choose the second icon yeah you just have to uh hit F so it's going to give you this Frame one and just like grab it how much you like and now inside there we're going to be defining work color pette now I'm going to hit R so it's going to gives us this rectangular icon right here or this rectangular tool

I'm going to just Define that right here and I'm going to duplicate the 11 times so I'm going to hold alt and shift and then we're going to be duplicating there one time 2 time 3 4 5 6 7 8 9 10 and let me just create the for the final time which will be the 11 time and now let me make the a bit bigger so you guys can see everything a bit better I'm going to also make it a bit smaller because yeah and I'm going to name the as primary so let's just

name the primary now we are going to be also providing the opacities today so I'm going to just hit T so it's Going to activate my text tool and I'm going to just rename that to like 50 I'm going to make it a bit smaller like so I guess that's going to be fine now let me just duplicate this so the next one we would have is like 100 then 20 300 let me just activate that change it to 300 then we have a 400 VAR iation let's just change there to 400 500 change this

one to 600 700 800 900 come on 900 and then 950 let's just change there to 950 there we go now that we successfully selected our color and we also Define our pets so now we are going to be duplicating there for the neutral color for the warning danger success and gr scale so I'm going to just choose there hold shift and ALT and then click on there and duplicate there once once again change there to like neutral and I'm going to also duplicate there one more time change there to warning so let's just change

that to warning and I'm going to also duplicate there one more time and what was that danger is success and gray scale so danger next we would have is a success change that to success and finally we are going to be creating for the gray scale as well so let's just create a gray scale and that's done so now that we successfully created our pet the next thing that we have to do is that we have to go to this website which is a t NTS T.D now I'm going to hit enter right here and

now I'm going to just copy this hexi decimal from the primary I'm going to copy there and now let me just place there right here and as soon as I do that it's going to gives us all of that variations right here you can take a screenshot of there you know let me just show you there so if you're using a windows so you can just take a screenshot of there now let me take a screenshot save there inside my desktop top and I'm going to just rename that to like colors or something Like that

and now I'm going to grab that right here inside my design tool and now I can just select my element and I can hit I and then choose my color from there there the first way I can choose these colors but this is not efficient way because the hexadecimal code will be changed so I'm not going to do that I'm going to just delete it from here I'm going to undo there let's just undo there and I'm going to just delete there the second way is to waste a bit of of Your time and just

copy this hexi decimal so I'm going to just face forward the video right now I'm going to copy you know let me just show you this first one and then for these next I'm going to just fast forward this video so I'm going to go ahead and copy this first one copy there now let me just choose the first one and then I'm going to place it right here copy the second one place it right here third one place it here fourth one select that and place It right here for the fifth one which is

this 400 variation I'm going to choose the and place it right here then for the sixth one copy that pleas I know I'm taking a bit of your time because this is important and I'm going to face forward the video for the next one so maybe it will confuse some of the people so I'm going to have to uh just do the like copy and place there and you have to bear with me please bear with me I'm going to just choose there I wish I had A lot of time to tell you a story

about my ex like how she ch she Dr me and how she left me but I don't have a lot of time and we are now at two colors so there's not a lot of time to explain or the story of my ex like how she cheated on me you know what that's done now I'm going to copy this second color and I'm going to Face Forward there right now I'm going to place it here and bang okay so now then St done and it took me A lot of time while I was listening to

some John Wick theme music uh so now the next thing that we have to do is that we have to create a variation I mean like not variation but now next we're going to be renaming each layer so here you can see that's going to be the first one I'm going to just do that for the first one and now for the next one I'm going to fast forward the video once again so that's the first layer you just have to click on there and then double click on This layer and change there to like

50 okay so I'm going to just click on there the next one come on let me just hit iscape click on the next one and then we have a 100 I'm going to choose this next one then we have H 200 then we have a 300 so let's just uh do that for this one we have a 400 I'm going to choose this next one which is a 500 then we have a 600 come on 7 100 I wish there was some other way that I can do that very quickly but this is not a

vs code Baby this is figma so we have to write 800 then 990 9900 950 there we go 950 I'm going to hit enter right now so all of these layer are now successfully rename and I'm going to do that for these next one and you should do the same but I'm going to face forward this video right now okay so that's to done now we are going to be grouping there so I'm going to just select these first variations and Then I'm going to hold control or command R and once I do that here

you can see it's going to ask us to provide some sort of a name today so I'm going to just give it the name of like primary and now I'm going to hit space and click on this current name so it's going to choose like uh primary 950 900 and 800 700 and so on and so so forth depending on our layer names that's the only reason I rename my entire layers to like from starting from 50 through 950 now I'm going to just click on this rename it's going to just rename there now we're

going to be selecting this portion hit control R once again and I'm going to give it the name of like neutral and then I'm going to just click on there and hit enter so it's going to rename that right here now let's just choose this one and hit controlr and that's going to be my one and now let's just hit space and current name and that's my current name let's Just choose this one hit control R give it the name of like danger and then the current name choose there and now for the success click

on the current name rename the and finally for the gray scale hit control R and I'm going to give it the name of like gray scale and then click on the current name and rename there so now that we successfully rename every single thing and every single thing is now successfully organized and finally we have to make a Selection and create uh Styles based on there so what I'm going to do is that I'm going to select this one hit control or shift this one shift with this one I'm holding shift and selecting that right

here just like then hold control and then for slash okay and once you do that here you can see we have a plugins and assets and so on and so forth I'm going to click on this plugin right here and I'm going to search for a Styler just search for a styler and then click On there and once you click on there it's going to ask you to like extract the style or generate a style I'm going to choose this generate style so let's just click on there it's going to take a while and now

it's going to giv us all of that colors right here so we have a danger primary warning and all of that colors so now that we successfully have all of that colors and now based on these colors we're going to be creating a variable so just click on somewhere And else not on the colors then hit that same command one more time which is a control come on CTR and then plus this for symbol or or what do you guys call that okay so now I'm going to just do that I'm going to hold control

and hit that for slash once again and I'm going to search for styles to variable so Styles come on styles to Vari there come on v a r i a b l e okay so here you can see we have this uh bluish kind of icon so I'm going to click on there and here You can see it's going to giv us this box right here and now we're going to be converting there but I'm going to give it the name of like colors maybe I'll just give it the name of colors and I'm going

to click on convert Styles into variables let's just click on there it's going to convert 65 colors to the variables so now let's just close there click on somewhere else and now I'm going to click on this icon right here which is a local variable so if I click On there and bang we have all of our color Vari right here so we have a neutral we have a gray scale we have success and so on and so forth so these are all the variables that we can use inside our figma and that was it

about how we're going to be generating a color variables or creating a colors inside our design system so this is how we are going to be generating our colors but now let's talk about the number scale and the radius Tokens so I'm going to close there I'm going to also remove this text and now I'm not going to click on anywhere else I'm going to just click on there select all of them and delete there from here because we don't need there anymore now let me just click on somewhere else like maybe this area why

aren't we getting oh there we go and now if you click on there here you can see we are now going to be still getting all of our colors right here so don't worry about that Sidebar so now let me just close there and now we are going to be creating our number scale so I'm going to just click on these three dots and let me just show you how did I just access there you just have to click on this local variables and click on this icons and then click on these three dots and

then create a new collections so I'm going to just uh give it the name of like number scale I guess number scale would be fine and now here I'm going to just choose like create variable and now here we are going to be choosing a number right here so now let me just click on there and here we are going to be defining a few numbers like tiny extra extra large and so on and so forth so I'm going to start from the first one which is a tiny t i n y and I'm going

to just set there to two maybe I guess that two would be fine okay so now I'm going to click on this create variable once again click on this number Once again change that to like extra small and unfortunately you have to watch me I can't fast forward this section because the names are super different so now let me just click on the uh create variable once again and I'm going to give it the name of like small and change that to six let's just create another uh number change that to medium medium small m

e d i m and change that to add click on this create variable go to The number scale I'm going to change that to medium and change the value of that to 12 let's just create another one for the large l a r g change there to 16 then create another one for the extra large change there to 20 and create another one for super large change there to 24 let me just create another one for the huge and change there to like 32 and now let me create another one for the gigantic and change

there to 40 and the final one will be for the full okay so Let's just create a full and provide like 99 or you know what 99 would be fine so this is how we are going to be creating our number scale and now let's create another collection for the radius so I'm going to once again click on these three dots then I'm going to choose create collection and now we are going to be creating uh another collection for the numbers and I'm going to start from the excess for the extra small and which I'm

going to click on This icon and I'm going to set there to extra small okay now let me create another one for the small just s and now I'm going to connect there to small and now let me create another one for come on let's just create the for the medium and now I'm going to connect it with the medium not a not a medium small but with the medium okay let's just create the another one for for the large for the L and I'm going to connect it with the large so this is a

large now we're going To be creating another one for the extra large and I'm going to connect it with the extra large where is there oh there we go so we have a extra large and now finally we are going to be creating uh for the full and now let's just connect with the full full full there we go let's just connect there so this is how we are going to be connecting the and creating our collection so now that we have a number number scale which look something like this we also have a Colors

which looks something like this and we also have our other collection right here so now let me just close that now our collections are successfully done and let's suppose if you want to use the inside our design system so I'm going to just you know what I'm going to create a frame even and now let me just Define a few rectangles right here let me just make that a bit smaller so you guys can see there and I'm going to duplicate there like a few times I'm Going to choose this one and let's suppose if

I want to change the radius of there so I can just go ahead and click on this icon and here you can see we have a tiny radius extra small small medium and so on and so forth suppose if I want to change that to like uh I don't know maybe a large radius or maybe medium would be fine so I'm going to just choose medium so it's going to change there right here and now let's suppose if I want to change that to the Large one so it's going to change that I guess I

choose large like twice but now let me click on there and change that to huge then I'm going to change that to like gigantic which looks something like this and I'm going to also change that to the full it's going to make as a full circle and yeah we can now play around with that if you want it to and now let's suppose if I want to change the color of there so if I just click on there now I can just click on this spell And here you can see we have our libraries if

I click on there and inside this Library we have our gray scale and all of our colors and now we can choose color and different variations of them by using this Library which we just created for our design system now let me click on there I'm going to also change the color of them to like something else go to the library once again and we can change that to like warning and so on and so forth now we can create our Component like let's suppose if you want to create some sort of a button and

we can style there by using our existing design system and that's going to be it so I'm going to just Define a smaller button like this which will just say like uh this is quite like uh learn more or something like that I'm going to make that a bit bigger I'm going to also make it uh borderer and I'm going to change the Border radius of there so let's just go ahead and change that to like maybe small would be fine yeah I guess mod would be fine I'm going to also make the as a

success button or not a success but this is a learn more button so this should be some kind of outline button so I'm going to choose maybe this variation and I can also change the color of that to like something else uh you know let me just change that to white or yeah I guess That's going to be fine so yeah this is how we are going to be defining our design system in figma and now we can extract all of that values from this figma file and we can use the inside our app oh

I was about to close this entire section but now I realize that I forgot to include One More Design token which is called the obesities so I'm going to delete that and now I'm not going to click on anything let's just click on this local Variables once again and now I'm going to go ahead and create a new collection for the opacities so I'll just give it the name of like opacities if I can just rename that to op p a c i t s there we go and now let me just click on this

create variable click on the number I'm going to start from the first one which will be OPC op a qu and that's going to be set to $ 100 the complete entire opacity and now let's just create another one for the semi OPAC which will Be set to 80 and now we are going to be creating another one for the transparent e r a n s p a r NT and which will be set to 50 and I'm going to also create one more for the light transparent and the value of that will be set

to 30 now for the final one which will be set to a very transparent and the value of there will be set to 25 and that's it and I also forgot to rename this one which is the radius I guess so I'm going to just choose that and change That to radius let's just hit enter and now our design system is complete I mean like not entirely complete but you can call it complete so let's suppose if I want to provide some sort of opacity so which we just created right here I'm going to Define

that and change the color of there to like black complete Black and now I'm going to duplicate there like a few times like so I'm going to just click on this one now let me go ahead and go to the Opacities and click on this local variable and now I can choose like OPAC if I just choose like OPAC or semi OPC it's going to show us this value right here so if I click on the OPC which will be set to full 100 I can also change there to like semi op so semi op

it's going to change the uh what do we call it the op of there I can also change this one to transparent and click on there it's going to make it transparent choose this One change that to like very transparent it's going to make it like a bit more subtle create there for the final one come on duplicate right here and just change this value uh I'm going to have to un link there and now let me just create right like very transparent right here so just going to make it like very transparent so yeah

this is how we can use all of that design system values inside our figma but now we have to Extract all of that values and use inside our design system which we are going to be creating right now all right guys now we are preparing ourself for the design system of this course but before we get into the design system first of all we have to learn about something called the story book and trust me you're going to love this one and also before I give you a definition of what a story book is I

want to mention a few things you can not use a Story book for a smaller application like maybe you are building your own I don't know portfolio or just a small application or something like that story book can be useful for a huge Enterprise application like suppose you're working with a bigger company or you want to build your own SS application or something like that then you would be able to use story book you cannot use that I mean like you totally can use there like nobody can stop you from Using there but it will

not be that much useful for your small application so now let me just give you a definition of what a story book is so story book is an open source tool used for developing and testing the UI components in isolation it allows developer to create a UI components outside of their main application making it easier to build test and showcase individual part of the UI before they are integrated into your overall application so as I said this is Not a tool that you are going to be using like day to-day and also this is another

a tool that uh you are going to be using there for a smaller application so it provides a lot of benefits the first thing it provides is a component isolation so story book Let's developer work on the UI component in isolation meaning you can build and test component without the need to run the entire application and this helps in focusing purely in the individual component Functionality rather than just focusing on the entire application it also provides something called the visual testing so it provides a visual interface to view different state of the UI component such

as various configuration themes or data inputs and so on and so forth something which we are going to be covering in this course so this helps identify issues with the component visual appearance or behavior early in the development process it also Provides the documentation and I've seen a lot of developers they use story book just for their documentation not for anything else but just for the documentation so story books serve as a living documentation tool for the UI component you can write stories like individual use cases for each component and we are going to be

also covering the stories in later in this course and they are automatically display in the story book interface something which you're Going to be seeing in a few seconds it's easy to maintain and update documentation is the component evolves it also provide the support of add-ons or you can say the extensions so story book has a wide array of add-ons that can help with task like accessibility checks responsive design testing or adding a control to multiple components St dynamically something which we're going to be also covering in this course and now let's talk about the

design System I mean like not the actual definition of a design system but it also help us with the design system so story book is commonly used in the development of design system as it helps ensure the component are reusable and adhere to design guidelines design teams can also use story book as a tool to communicate design specification to developers so this is also something which we are going to be seeing in this course so now let's get into the Installation of the story book so if you already created your react application by either using

the create react app or if you use like weat so you just have to type that in your terminal like npx SB in it it's going to just take a bit of time and it's going to install story book inside your application so now let's just do that so here is the official page of the story book and now we are at the version add so you know let me just show you something this is How we can develop our component in isolation this is how we can test our component and we can also provide

a visual testing and we can also document our component like this and that's going to be a lot of fun so yeah their landing page is super amazing super duper amazing okay so I'm going to go back let me just go back and install story book inside our application so I'm going to copy that from here now let me open my terminal so let's just open there and I'm going to zoom in a bit so you guys can see everything a bit better and by the way you are not just limited to use reactj you

can use story book with swell and different projects so I'll just use like npm create we at latest and install there right here so I'll just give it the name of like story demos or sto yeah I guess that's going to be fine I'll choose reactjs with typescript let's just go into the story book demos and install every single thing inside there And our react setup is now successfully done I'm going to open that by using my vs code and this is how it looks like so I'm going to go ahead and remove this public

from here I'm going to go to the SRC remove the Assets app.css Now let me go ahead and go to my f. TSX file remove every single thing from there and I'm going to just use my rfcu to create my component and also remove every single thing from the index.css file as well so now that we successfully install our React JS the next thing that we have to do is that we have to initialize our story book inside there I'm going to go there and here you can see this is how we are going to

be initializing or installing story book inside our existing project so I'm going to just copy there and now let me just place it right here so you just have to write like npx story book at latest and in it or you can just use like this command which is npx SB in it or something like That you can also use there but in my case I'm going to just I already copied it from the documentation so now let me just place there and hit enter so now it's going to gives us a few folders right

here so I want you to focus on this area now let me just provide why to proceed there and yeah it's going to gives us a few folders right here I guess it's going to ask us a few question first of all I'm not quite sure about that but yeah let's just see and As you can see it added this do story book folder and also add these stories right here something which we are going to be discussing in in a few seconds so yeah my application is now successfully running but if you want to

run there I just close my application I don't know why but I just did so now let me just uh restart my story book once again so let's just delete there and I'm going to just restart my story book by using npm run story book so if I just use the it's It's going to run my story book right here in a few second and this is how my story book will look like so there are a lot of stuff going on so now let me just explain there so first of all it's going to

giv us these instruction like what we can do with the story book and so on and so forth and they are talking about the chromatics and so on and so forth so this is going to be just our instructions then we have a few components so this pattern is called the Compound component which we're going to be seeing in a few second but not right now so here you can see we have our buttons folder now let me just zoom in a bit oh you know what I'm not so if I click on there we

have our documentation for our component like what we can do with this component like we can uh whenever we click on there was going to happen and we have our primary label background color sizes like we can change there let me just go back we can Change there so if I change that to like small so it's going to make this button small if I click on the medium so it's going to make it medium if I click on the large so it's going to make it large and we can also change the color of

our button like this if you wanted to and this is also something which we are going to be covering in a few seconds we can also change the text to be something else we can also make their disable or enable and so on and so forth so yeah we Have our primary button we have we have a secondary large and small buttons so these are the docks or the documentation for our component and then we have a few component or a few variation of our component so if I click on this primary so it's going

to show us this primary and it also has these controls so when we click on there what's going to happen so this action will happen and we also have these primary and secondary and this area is called the control area Where we are going to be controlling the behavior of our component okay so we can also change there to like uh blah blah blah and also we can change the color of there and as we already saw that we can set there to medium or small then we have a secondary component which will look something

like this then we have a large button small button and so on and so forth then we have a Herer like you are not just limited to create a simple uh what do we call a simple button Component you can create the entire hers and also the entire Pages if you wanted to so this is how header component will look like and we can also provide these documentation for our header component and we can also see the inaction so if I click on there and here you can see this is how we can interact with

our component and there are a lot of stuff so yeah you I'm just saying like you are not just limited to um style your button component or you can also provide the Header you can also even provide your entire Pages like as you can see right here this is the entire page that you can test and you can also visualize the inside the story book and now if I click on there once again you can also see there so where in the world is all of that stuff coming from like what are we even doing

here so now let me just hide there and all of that stuff are now coming from these stories right here so first of all we have like all of their Assets like as you saw these screenshots a few seconds ago so now let me just remove there and we also have that button so here you can see we have our button. TSX file so if I click on there this is how they created their component and they provide a bit of styling to the and so on and so forth but this is how they are

now testing their component by using story book and also typescript so yeah and this is how they are creating their header component This Is How They Are providing a stories for their heror component This Is How They are creating their entire Pages This Is How They are creating their entire pages and this is how they are providing stories for their pages and also their own CSS if you want to use tman CSS you totally can if you want to use like the module CSS you totally can you can use anything that you prefer and story

book will work for you so now let me just close there and what in the world are we going to be Even doing I'm going to just select every single thing or even this entire stories I'm going to right click on there and I'm going to delete there say bye-bye to the stories because now we are going to be creating our own stories so now let me just click on yes delete this permanently and now we are going to be creating or recreating their stories folder from scratch so I'll use like stories and now let

me just hit enter right here and inside the stories folder We can just create our components and yeah you know let me just create another components folder right here so you know let me just create that stories right here so I'll just use like button. TSX and I'll use my rafc inside there so my file close there and now we are going to be creating a story file for this button right here so now if I just create a file I'm going to give it the same name like button and then now in this case

we are going to be using a stories and Then. TSX so as soon as I do that here you can see my I is now successfully changed so this is how we are going to be creating a stories file forward button component so now if I hit ENT right here we're going to be doing a lot of magic but now here I'm going to just write a simplest quote so first of all we are going to be importing our button component so that we can see there in action then we're going to be using export

default and now let's just Provide the and by the way for now we are not going to be focusing on the typescript we are going to be using typescript with story book in a few seconds but not right now because first of all I want you to focus on the story book syntax then we are going to be implementing the typescript with the story book but not right now so we going to be using a title and I'm going to just give it the name of like title and I'm going to also provide a comma

and Provide a component right here and by the way we are going to be like learning about all of that coding in a few seconds and the component we want to see or test will be that one component which we are now importing right here and finally we just have to export cons primary and this going to be equals to this Arrow function now let let me just use the button right here and close there so as soon as I do that save my file and now let me just rerun my story Book once again

so I'm going to be using npm run story book and now it is running so now let's just refresh there it's going to gives us this error and why is there that's because our URL is changed as you can see we are now inside this page component which is no longer available so now let me just remove and hit enter right here so now it's going to gives us that button component by which we are not even providing any styling and nothing today so here you Can see we have our button fold which is now

coming from this title right here so if I just write like my own name husan uh components or something like this my file here you can see it's going to change the name of that to hosan components and now if I expand there now we are getting this variation or flavor of this component so where in the word is that coming from it is coming from this line of code now that we learn about how we are going to Be creating a button component and how we can create a story file for there but there

is also another folder which is called the do story book and inside there we have our main.ts and also preview. TS file so now let's just explore that what in the word is this main.ts file and what in the word is this preview. TS file so the first one we have is a main.ts file so the main.ts file is a configuration file used to customize the setup and behavior of the Storybook instance and here we can configure file locations a on something which we're going to be covering web P configuration and so much more the

next one that we have is a preview .ts file so the preview. TS file is another configuration file used to customize the preview aspect of a story book for example like how the stories are rendered and displayed in the story book UI so that was it about the main and preview files now let's talk about the Nesting renaming and also variation inside the story book so what I'm going to do is that I'm going to make this component so that it can take a lot of props so I'm going to just first off all uh

get my props and I'm going to also otate the as any because we don't know like which kind of props we are going to be taking so now let me just spread all of that prompts right here so now let me just save my file and now here inside there let's just talk about the nesting As you can see first of all we have our husan components folder and now inside there we have our primary component variation I'm going to just change that to uh products maybe so I'll just write like and then if I

just write like buttons and now let me just save my file here you can see first of all we have our products folder and now if I expand there then we have another folder which will be four buttons and now if I expand this one now finally we have our primary Button right here the variation of our button so yeah this is how we can uh provide the nesting forward folders and yeah that was there so if you want to change there to like maybe something else like I don't know maybe spatial or I guess

special will be fine so now if I save there now this is our parent folder but now if I expand there so this is how our children folder will look like and now if I even expand there this is how our component will look like so yeah That was about the nesting so now let me just remove the from here and now let's talk about how we are going to be creating a different variation forward button so like we don't have to copy and paste our component again and again and we can provide different variation

for our component so what I'm going to do is that I'm going to just uh remove that from here and I'm going to be using like button and now let me just close there like so and inside there I'll just write Like primary and now let me create a few more variation like a flare whenever I say variation I mean a flavor of this button so I'll use like uh export and then con secondary it's going to be equals to this button and now we are going to be using that button once again let's just

close there and we have a secondary button so now let's just save there finally we are going to be also creating one more so I'll use like cons danger and it's going to be equals to This aror function and now let's just provide our button right here and I'm going to put my danger inside there and now we can also provide different props to there we're going to see that in a few second but now if I just refresh there here you can see we have our product spoiler and now inside there we have our

buttons spoiler now inside our buttons we have a few uh flavors right here so first of all we have our primary then we have our secondary and then we Have our danger so now let's suppose if I want to change like I don't know maybe the names of them so how in the world we are going to be doing there well now this button is now accepting all of our props so now we can successfully provide those props I'll just use like I don't know maybe variant and it's going to be equals to like primary

and now I'm going to also provide the variant here and that's going to be it for the secondary now let me just provide here another Variant and that's going to be set to like danger so now let's just sa our file and here you can see this is our primary button if I click on this one this is our secondary button and now if I click on this one so this is our danger button right here so this is how we can provide or create different variation of our component without just copying and pasting our

component so we just have to take all of that props and this is how we're going to be providing A different prps or values for our component and this is how we can test it in isolation now finally let's just talk about the renaming like how we can change the names of our components so you know let me just write a comment like renaming stories I'll just first of all access my primary primary and by the way there are a lot of ways we can do there but this is just the older way I'm showing

you right now later in this course we are going to be learning about The arcs and also the arc types but we are not there yet so we're not going to be talking about them right now so now if I just head down here you can see we have a lot of properties but the one I'm interested in is just a stone in name and now I'm going to set there to like some basic random name so I'll just write like blue button and now let me just duplicate there like three times and now here

we're going to be accessing the secondary uh story so I'll use like Secondary story now let me just change the color or the name of this I'll just change that to like green and I'm going to also select my danger button and I'm going to set that to I don't know maybe a red button and now let's just save our file and here you can see now the labels are successfully changed so this one is a the blue button then we have a green button then we have a red button right here so if I

click on there yeah everything is still working the way we Expect them to work so if I just change the name of that to like Alex meron and if I change this name to uh I don't know my own name like husan webd and I'm going to also change this name to uh Jordan Peterson now let me just save my file and here you can see this is how we are going to be changing the names of our component or variation so this is how we are going to be creating our folders or subfolders this

is how we are going to Be providing a props for our component and this is how we are going to be renaming or variation of our stories or you can just select the stories there we go so that was example number one so now let me just create another component and this is going to be my example number two and I'll just give it the name of like my input. TSX and I'll use my RFC inside there let's just remove this element from here now it's going to take a prps as a perimeter and I'm

going to Also initate the as any and now here let me just provide my input field now we are going to be passing like or spreading out those props save this file and now let's just go ahead and create a story a file for there so I'll just go ahead and create like my input come on input. stories. TSX and Define the story of my life so just first of all import what do we call it my input field now underneath there we are going to be exporting default so that we can create Work uh

story and I'll just give it the name of like my in put field or inputs here let's just or I'm going to use like input fields and inside there I'm going to provide like my input there we go WR a comma there and now we are going to be rendering our component so I'll use like component my input and semi file now underneath there I'm going to just go ahead and create a variation of there so I'll just give it the name of like small input and here now let's just use our Aror function now

inside there I'm going to be using like my input and here let's just close there and as you can see it takes all of the props I'm going to go ahead and just Define like a placeholder prop and it's going to say like uh enter your name and now let's just sa our file as you can see we have our inputs folder inside there we have another folder with the name of my inputs and now inside there we have a variation of our component we don't want that so I'll Just remove the sem my file

now we are getting just one folder and now inside there we have only one input field so yeah that's cool now let me just undo this and let's just undo there once again I'm going to remove this inputs from here and now we are going to be providing a size prop today so I'll just go ahead and provide the size and size will be set to like 10 Ram I'm going to go ahead and go to my component and here we're Going to be placing our size inside the style okay so based on that prompt

we going to be providing or increasing the width of our component so I'll use like width and I'm going to just access that size property or prop from this props do size now let me just save my file and save this file as well and here you can see we are now getting our small input field right here but now let's suppose if you want to create like a bigger or intermediate size of those input field I Me the what we are going to be doing there well that's quite simple and easy we just have

to create our variation so we use like export cons and then medium input and going to be equals to this Arrow function and inside there let me just pass my input field right here and close there just like that and I'm going to also past the size and the size will be set to 20 r in the placeholder come on just a placeholder will be set to enter your Name come on enter oh my God enter your name God damn it save my file once again and now we have two stories or two variation so

this one will be a small input and now if I click on this one this one is a bit larger input right here and why that's because we are now providing this size prop today and now you know let me just duplicate for the final time now we are going to be creating our large input so I'll use like large input and here let's just Pass or 40 Ram save this file and now if I click on this large input and now we are getting this large input right here that was example number one which

was about the button and that was example number two which is my input field so that was example number two and now we are going be discussing something called the combo stories so like here you can see we have Story number one which is a button story then we also have a input story and now if you want to combine Both of them at once so for that we are going to be using a combo or a combination story or you can say a story within another story so I'm going to just right click on

there and I'm going to create a new file with the name of combo do stories. TSX and now we have to import those stories which we are going to be combining so I'm going to just import first of all my large input and I'm going to also import the primary button so now let's just combine this so First of all we're going to be using export defon and inside there let's just provide some sort of a title and I'm going to give it the name of like combo come on combo and uh components would be

fine so I'll use like components now Jita if you want to combine both of these component we not going to be placing that to our component prop instead we are going to be creating another separate component for there which will combine both of that Component so I'll just use like export con and basically you can give it any name that you prefer but in my case I'm going to only give it the name of like combo and now let's just return our component from there so I'll just use like uh large input and I'm going

to close there and here we're going to be pring the prop off like um placeholder and I'm going to say like enter whatever you prefer and I'm going to also provide the primary so let's just put there and Close this sem my file it should be I don't know why we are getting this error but I'm going to just ignore that for a few seconds and I'll use npm run not test part uh story book and here you can see we have our combo component and now if I expand there we have our combo so

as you can see we have our input field and we also have our primary button so let's suppose if you want to get like I don't know maybe secondary or maybe some other input field like uh medium one so I'm going to copy a name up there let's say first of all import the and place it right here and here you can see we are now getting our medium input and we also getting our primary button right here now let's talk about the arcs in story book so arcs are essentially a way to define the

values of a prop that are passed to a component in your story so they allow you to control the component interactivity they also allow you to share common props across the story and They also allow you to doent your component props so this was the older way of creating a variation for our component and also passing a prop to our component so what is the newer way well the newer way will look something like this first of all we are going to be using export then con we will still able to give it any name

that we prefer and now we are not going to be providing a function we are going to be only providing an object and now inside this Object we are going to be providing something called the ARs and there allows us to P prop to our component also they will allows us to control the behavior of our component and also we can document our component so I'll just put like primary and I'm going to set that to true and I'm going to also provide another prop which will be set to label and I'm going to also

provide like label of button and finally I'm going to also provide the on click like When somebody clicks on there so we just want to fire this function which will not do anything but it's going of just console log like you click me or something like there and here you can see this is the newer way of creating a variation forward component and you know let me just go ahead and go to my button and now first of all we have to destructure a few things from there so I'm going to just remove this so

we are going to be destructuring the label Which we are now providing right here we would also need to restructure the primary and I'm going to also provide the initial value of false today and also the own click event handler so now let me just save my file now it's going to gives us a lot of Errors because we also have to provide a type for there so I'll use like button promps and now I'll provide first of all the label let me just put equal to sign right here that's going to be a we're

going to be also Providing a primary and primary will be set to a Boolean and it should be totally optional and when somebody clicks on there so we also want to just provide a wi for the PO ID there we go and this is going to be also totally optional so now let me just copy there from there now let me place there right here just like that now let me save my file and this is how our component looks like but now we have to use those props so I'll just go ahead and uh

create my Button and close there and here let me just render first for my label and now uh I'm going to also provide the own click event handler and now let me just copy this prop from there paste it right here and now we are going to be also providing some sort of a style and let's just do that so I'm going to provide the background color property and if this is set to primary which we are now setting there to false if our prop is set to Primary in this situation we are going To

be Chang changing there to Blue but if that's not the case we want to set that to Gray and also I'm going to put a bit of color and color will be set to to to White and also ping ping will be set to 10 pixel and Al order will be set to totally none like that and finally the Border radius will be set to only five pixels so now let me just save my file and now let me go ahead and go to my components there we go and now let me click on the

buttons and here you can See now we are getting this button and now I know a lot of you will ask me like Huzan nothing just happen and yeah you are right and I want you to go ahead and just click on this icon or you can just hold art and hit a so it's going to open this test area for you or control area to be precise so now let me just close there if I click on there once again I can also move that to the right and I can also move that to

the bottom right here so as you can see these are the Control forward component like I'm now providing a primary and I can totally set there to false or true and based on this primary prop I can now visually see the behavior of my component and I can also provide the level and this level can be basically anything so can just write like something else and also if I click on this button so here you can see now let me just go ahead and go to my inspect element go to my console let's just refresh

there click on this button Once again and here you can see we are now getting that you click me right here so yeah this is how we're going to be controlling the behavior of our component by passing arcs today so that was just a bit simple example now let me give you a bit difficult example so now let me go ahead and go to my story once again so now that we provided a primary the label and also the on click and now let me just change the to alert so that we can see that

on the screen so that's Looking better I'm going to also put the loading St today so now let me just go ahead and put the loading and loading will be now set to false and I'm going to also put the size and the size will be set to medium and also I'm going to put the color and color can be this color so I'm going to use like 007 BFF I'm going to also put a comma there and provide my full width and this can be set to false initially and we're going to be also

providing even the icon so I'll use like fa home so now let me just install the react Library so that we can get this phone so I'm going to go ahead and you know let me just stop that so I'll just stop it right here and I'm going to use npmi and then react icons was that react icons I'm not quite sure but now let me just install that yep it is react icons I hope so yep it was so now that successfully done I'm going to use npm run story book once again it's it's

going to start there now we have to Import there so I'm going to go ahead and just import this font from our react icon so let's just import there right here so it's going to import there at the top and now here I'm going to past the icon position and let's just set there to left and I'm going to also provide the area label here let's just provide a primary button now let me just save my file so this is how we are going to be providing a different props for our component and now let's

just use That inside your button component so now let me go ahead and go there and the first thing that I want to do is that I want to just remove this type and I'm going to replace that with this new interface so here you can see we have our button interface and now we are providing a label the on click primary disable lading size color full width icon icon position and area label so if you want to provide there you definitely can but if you are not using typescript You don't have to now let

me go ahead and remove all of these stuff from here and now I'm going to just uh destructure the label the on click event handler the primary and I'm going to set that to false and the loading and I'm going to also set that to false size will be set to medium as initial value and I'm going to also provide and full width will be set to false initially and we're going to be also getting that icons and also the icon position and the area label and That's going to be it so now let's just

save our file and this is how it looks like so now that we already used these stuff now let's just also use these so what I'm going to do is that I'm going to just remove every single thing from this component let's just remove the and now here let's just provide our button save our file and this is how it looks like and now we are going to be creating a few classes so I'll use like cons button class and it's going to be equals To this back text and inside there first of all we

going to be providing a class and now we have to render that other classes totally Dynamic so now let me just render there right here totally dynamically so I'll just provide their primary which you are now getting from these props right here so if that is primary so in this situation we want to just provide like button uh primary color which we are going going to be providing in a few second but if that's Not the case we are going to be providing like a button in secondary and this should be double dashes because we

already set the inside our styling which you're are going to be seeing in a few seconds now let me also provide the size so if you are getting the size in this situation we want to change that to a button and then Dash Dash and here let's just render our size from our props right here okay so if that's not the case so in this situation we're going to Be just rendering like uh Dash Dash and also the medium button right here also we are going to be working with the colors so now let's just

get the colors if we have the in this situation we are going to be using like button d d uh come on custom color and if that's not the case then we're not going to be providing nothing at all and also this's say render our full width if we got the full width so in this situation we're going to be using button Das Das full Width like this but if that's not the case we're going to be setting there to totally empty string and also finally we have to provide the loading state so if you

are getting some sort of a loading state in this situation we are going to be just writing like uh Das Dash uh loading and if that's not the case we're going to be setting there to empty string so now let me just save my file and now let's use these button classes inside our button I'm going to go ahead And go to my button right here and first of all uh I'm going to provide those classes so I'll just use like classes remove there and provide my button classes and outside from there when somebody clicks

on this button then you want to just that other prompt which will be that on click prop so I'm going to copy there and place it right here and also on the area label come on area label like so we're going to be providing our area label which you also Destructuring and also for the styling you know let me just save that right here I'm going to also provide a styling so if we got the color in that situation we are going to be changing the background color to something else I'll just use like background

color and now let me just provide like color right here and also the text color will be set to totally white but if that's not the case then we are not going to be providing nothing today so now let me Just save my file so this is how we going to be providing our props now let me go ahead and go inside this button and first of all let's just take care of that loading state so if we got the loading state in this situation we are going to be creating our spin come on what

the hell was that so let's just create our Spin and I'm going to provide like lowering dot dot dot and I'm going to also provide a class name to this so I'll just use like button and then Lowering spinner but if that's not the case then we're not going to be getting nothing at all and here let's just also take care of that icon so if you got the icon in this situation we're going to be providing the icon position and if that is set to left come on SO in that situation we going to

be setting that icon to the left side of the button so I'll just go ahead and use like the span and now let me just provide those icon right here just like that and I'm going To also put the class name which will be set to button and then icon and now let me just save there but if that's not the case then we are going to be also providing our label and here let's just render our label which we now restructuring from our props and provide my class name which will be set to button

and then D Das label and by the way I'm now providing these classes and you also have to do that because we are going to be copying and placing a few CSS classes so that's the only reason I'm now providing these uh what do we call it these classes right here so we going to be essentially working with the CSS styling for a bit okay so now finally let's just Pride our icon to the right so if we have like icon and also our icon position is equal to the right so which means like we

are going to be pushing that icon to the right okay so I'm going to go ahead and provide my span come on let's just provide our span Right here and I'm going to just render my icon and we are going to be also providing a class name of button and then D Dash icon there we go let's just sa our file now that we successfully created our button the next thing that we have to do is that we have to provide a styling for that so I'm going to go ahead and go to my stories

and let's just zoom in a bit I'm going to create new file with the name of style. CSS and here let's just render all of our CSS Right here and you can find all of that CSS in my gab repository so first of all we are just selecting our button we're providing a display of inline flex and also the items will be set to Center justify Center heading on the xaxis will be set to 10 pixel on the y axis will be set to 20 pixel then we have a border radius font size cursor will

be set to pointer we're also proing a bit of transitions to the and the position will be set to relative then we have our Primary button which we are now styling like this this then we have a secondary button which we now styling like this and finally we have a full width and which will be set to totally 100% And then we also have our uh button loading which is now initially set to relative the position is set to relative and now we are also providing our loading spinner and we are just sitting there at

the middle and also we have a margin icon we are now providing a margin right To there then we have a level also we have button small button medium and button large so that's our styling and if if you want to provide there you can definitely go ahead and go to my repository and I'm going to go to the top of my uh button component let's just import those styling so I'll just go ahead and use like style. CSS s file and the Moment of Truth okay so let's just refresh the oh I guess we

lost connection no we didn't let's just check This out here you can see we have only one flavor of our button which is a primary but now if I click on this icon here you can see now we can successfully control the behavior for component so here you can see it is initially set to primary if I click on there so it's going to make it it is no longer set to primary if I click on there once again it's going to just remove those borders so I can also change the label of there to

like a button or something like that And when somebody clicks on this button so it's going to gives us that alert like you clicked me and also we have a loading spinner if I click on this it's going to gives us that loading text right here and now let me just close there if you want to change the size of this button like if you want to see like how our button will look like I can click click on the small so it's going to make it small I can click on the medium it's going

to make it medium I Can also click on the large it's going to make it large I can also change the color of my component so I'll just use like some other color and here you can see it's going to reflect the back and also we can make our button totally full width if I click on there bang it's going to make it full width if I click on there once again so it's going to make it normal and then we have our icon which we are now providing right here and we can also change

the position of This icon so this is now initially set to left but we can also push there to the right and we can see like how our component will look like uh if you set the icon to the right so now let me just click on there and this is how it's going to look like and yeah we can also provide the area label which is just for the accessibility so I'll just write like something cool come on something cool and yeah we can also make their disable if you wanted to so if I

click On this set Boolean now it's going to gives us like a false if I click on there it's going to make it disabled right here you cannot see that because I already provide a styling today but is going to make it disabled so this is how we are going to be testing our component or the UI of our component in isolation now that we've seen arcs let's talk about the arc types so Arc types are used to define and control how the props or arcs which we just saw a few seconds Ago of a

component are displayed and interacted with inside the story book UI and they provide metadata about the ARs and allows us to specify how each prop should behave in the controls panel something which we are going to be seeing in a few seconds which is a part of a story book UI okay so now let me show you those Arch types in action so what I'm going to do is that I'm going to just remove this primary variation from here and I'm going to Define my own One so let's just also remove this fa icon or

fa home from there so I'm going to just use like export cons primary and it's going to be equals to uh this object and now inside this object we're going to be defining our arcs so now inside this Arc now let me just provide a few arcs like label so label will be set to click me and also let me just provide a comma there okay now we are going to be also providing a background color today which will be essentially Our props so I'll just use like 007 BFF I'm going to also provide the

size and size will be set to medium initially and provide the Border radius and it's going to be set to four I'm going to also provide the font size and font size will be set to 16 pixel initially and also the text color will be set to totally FFF like totally white color and now if I save my file and I'm going to also go ahead and go to my button and remove every single thing from there and I'm Going to use my RFC right here I'm going to also remove the style. CSS from there

because we're not going to be using there anymore and now here what we have to do well we're not going to be doing anything n right now first thing first uh we have to restructure all of those props which we just defined so I'll just destructure the label the background color the size border radius XT color now let's just save there I'm going to also Define an interface for there so That we can use our typescript so I'll use like interface and I'll use like button props and here inside there I'm going to use my

level and level will be set to string I'm going to also provide the background color and background color will be set to string the size will be set to either small size come on small size uh or medium size or large size and now need that we going to be providing our border radius it's going to be set to a number initially I'm Going to also provide the font size there and font size will be set to string and provide my text color and text color will be set to string I'm going to copy the

name of there and annotate my component with those props so let's just annotate this our file now we have to create our own size styles so I'll use like size tiles and inside there I'm going to provide first of all the small and small will be set to 5 pixel and 10 pixel for the top and Bottom and also I'm going to put the medium and medium will be set to 10 pixel and also 20 pixel in this case and then we are going to be providing what large and large will be set to 15

pixel and 30 pixel so now let's just sa our file now let me go ahead and go to my UI and remove there from here and change there to the button and render my label inside there I'm going to also provide my style now for this style we going to be providing our background color I'm Going to also provide the piring and piring will be set to the size style which we also defined a few seconds ago and we're going to be rendering our sizes inside there let's just provide our border radius and for this

border radius Rus we're going to be rendering our border radius and then pixel that much pixel percent and we are going to be also providing a font size and font size will be set to font size which is coming from the props and finally let's Just set the color and color will be now set to text color I'm going to go back and this is how my component looks like so now let's just refresh there go to my products and then I'm going to go into my component and yeah you can see like we are

now getting all of the results right here and everything is working the way we expect them to work but now let's use our Arc time right here here you can see this is how we are going to be passing our props forward component but Now we want to tell our story book like how each prop will look like so here you can see we're now passing like background color and now we're providing some sort of a specific color today but we want to tell our story book that we want you to use this value as

our initial color but we also want you to provide our Color Picker so we can choose those color from forward component okay so how what we're going to be doing there this is how we are Going to be doing there so first of all we have to just write like Arc types and inside these Arc types we can now specify our Color Picker and so on and so forth so I'll just select my background come on background color and I'm going to set that to the control and the control will be set to color and

now if I save there now let me just refresh there and here you can see now we can totally select this Color Picker and we can change the values from here just Like that so this is how we are going to be essentially providing our Arch type for our prop and not only that here you can see we have our come on our size so we can also provide different sizes for there so I'll use like size and here inside this size I'm going to put the control and not continue but control so let's just

use the control and the control come on control will be set to select state you want to get the select statement right here you can also Provide the options and here let me just put those option like we can have a small button and we can also have the medium button and we can also have the large button and now let me just save my file and as you can see it's going to change this type so now we can get like the small button the medium button and also the large button right here just

like that so that's also cool now let me also select this label which we're now providing right here and we can also Customize there by using our Arc props so I'll just use like the label and here inside this label I'm going to provide that uh control and controll be set to text I'm going to also Pro a bit of description for there description and uh it's going to be set to like text displayed on the button or something like that and not only that we can also change the Border radiuses if you wanted to

like here you can see we're now specifying this border radius and now we Can also change this so I'll just go ahead and provide my border radius which we are also providing right here so I'll use like border radius and inside this border radius uh I'm going to first of all provide the control so let's just do that uh not continue but control and the control will be set to number and also let's just put like the minimum value is going to start from zero the maximum value is going to go through 50 and for

the step we only want to proide like one And yeah I guess that's going to be fine so now let me just save my file now let me just refresh there and here you can see we're now getting this input field and now we can totally change there like so okay so now if I just write like 30 it's going to make it 30 if I just write like 40 it's going to make it 40 if I just write like 10 it's going to make it 10 so yeah this is how it's going to look

like and what should be just a border radius in lower Case border radius now let me save my file and now this is looking better and we can do all lot sort of stuff with there but I guess that's going to be fine so this is how we going to be just providing our Arc types and now inside the arc types we can just specify our prop and then we can provide different Behavior forward prop like for the size and also for the label for the Border radius and so on and so forth so now

let me just create another variation of the Like I don't have to but I wanted to and I'm going to give it the name of like secondary and here you can see we have our secondary button right here and we can do all of that stuff with this button as well just like that now let's talk about perimeters in story book so what are perimeters and why should even care about them and I can't even pronounce that word like perimeters so perimeters will allow you to change the look and Feel of your story book like

here you can see we have this button right here if you want to put this button at the middle of the screen or at the center of the screen so how in the world we are going to be doing there also if you want to change the color of our background like here you can see if I click on there I can choose light I can choose dark and also uh if you want to change like this control settings you can also do that so how in the world we're going To be doing all of

there now let me just show you so the first thing that you have to do is that you have to write the perameters uh p a r a m e t e r s and now inside there what do we have to do we have to provide our options so first of all I'm going to just write the layout and I'm going to make that as a center and now let me just save my file here you can see or button will now jump to the middle or at the center of the screen so that's

the first thing now let Me also show you like how in the world we are going to be providing a label or a description and all of that kind of stuff for our control panel so this is how we are going to be doing there I'm going to just write like the controls and here inside these controls I'll provide my expanded so I'll write like expanded and I'm going to set that to and as soon as I do the in my file and here you can see it's going to also gives us their description and

also this Default values right here so we already provided this description like text displayed displayed on the button as you can see if I show you there uh okay there we go so displayed I'll write like displayed and now let me just save my file and here you can see this is how it's going to look like and also let's suppose if you want to change the background color to like something else we can totally do that so now let me just hide there once Again and here we just have to provide our backgrounds so

I'll use like um backgrounds we can provide the default value so I'll just write like the default and the default will be set to light and we can also provide our own values if you wanted to Sol just write like uh first of all the name and the name will be set to light and I'm going to provide the value to there so let me just go out from there and the value will be set to totally white so now Let's just sa our file and here you can see we already have this light now

let me make that a bit smaller so that you guys can see everything a bit better and now I'm going to provide a few more color so let's just proide the dark one I'm going to even duplicate there and change the name of there to like dark and I'm going to also change the hex value of that to like 333 s file click on there once again we can now change that to dark we can also change that to Like sky blue or green or something like that I'm going to place all of that colors

in a few seconds but now let me just write this I'll use like sky blue and I'm going to just provide the hexi decimal value of this so I'll use like 00 0 BC D4 now let me just save my file and now if I click on there here you can see we have our sky blue if I click on there it's going to change the background color of there and now I'm going to just remove these values and I'm going to replace them with my own one if you care about these values and these

colors you can definitely go ahead and go to my GitHub repository and grab all of that colors from there so now let me just refresh there click on there once again and here you can see we have a lot of colors we have a hard pink I can choose there we have like I don't know we have a peach and so much more so yeah this is how we can use the perimeters to change the look and feel Of our story book now let's talk about the decorators in story book so decorators are a function

that are applied globally or locally to our stories allowing us to rra or modify the story rendering process and decorators enable us to add additional functionality style context or layout to our stories in a reusable way so that was just a theory about the decorators and now let me show you their inaction okay so that was just a theory about the Decorators now let's talk about how we are going to be using them inside our projects and also we're going to be discussing three kinds of decorators like the variation decorator then the local decorator and

finally the global decorator so now let me just zoom in a bit and I'm going to just remove that from here and create my folder with the name of stories okay so now inside there first of all let me just create my button. TSX file and I'm going to also Create my button. stories. TSX and now let me go ahead and go to my button and I'm going to be only using my rafc inside there and now let's just go into our story file and import that button right here so I'll use like button and

let's just import them and here I'm going to use like export default come on default and inside there let's just provide our title title and this can to be set to a button just a button and also we are going to be providing a Components so let's just provide our component and you want to test the button component right here so now underneath that let's just create or default variation so I'll use like cons default it's going to be equals to this object and we are going to be also providing our ARs and this ARS

will have the label and it's going to just say like click me or something like that we're going to be also providing a specific color to that so I'll use like 007 BFF and I'm going to also provide the disable flag so d s a b l e d and disable will be now set to false now let me go back and now we are going to be creating another variation of4 button so I'm going to just duplicate there and I'm going to change the name of there to disable button right here and I'm going

to just give it the name of like disabled there we go and I'm going to also make it as a disable so that you guys can see there now let me go ahead And go to my component and first of all we are going to be restructuring all of their props and then we would just use this I'll provide my label and the initial value will be now set to like click U me or something like that I'm going to also provide the on click when Handler so like whenever somebody clicks on there so we

just want to fire this function and I'm going to also provide the disabled flag so dis a b e and that's going to be equals to initially False and we are going to be also providing the initial color of this exact same color so I'm going to copy that and place it right here sa my file and obviously we're going to be getting some kind of error okay so now let me go ahead and go to the top or you know what we are already providing an initial value for that so let's just use them

I'm going to go ahead and just Define my button right here and inside this button we're going to only render the label so I'll just provide the label right here and also we're going to be providing a few a few props today so like when somebody clicks on this we want to fire that function also on the disabled St we want to make the as a disabled and also you want to put a bit of style into this so I'm going to just provide like background color and for the background color we want to use

that color which is coming from the props and I'm going to also provide the piring and piring will Be set to like 10 pixel on the top 20 pixel on the bottom and provide the Border set there to totally none and the final thing that we have to do is that we have to provide a bit of Border radius which will be set to like 4 pixel now let me just save my file and this is how our component looks like let's just close them and now let's talk about how we are going to be

working with decorators on the component variation level so this is how we are going to be Doing the you know let me just put a comment right here so that you guys don't forget that I'll use like this comment and I'm going to say like variation or variant rather variant only decorator there we go I know the spelling is incorrect but I don't care and now if you want to provide The Decorator first of all we have to just use the word decorator so I'll use like t o d e c o r a t

o r s and here let's just make the as array because we can Specify more than one item for our decorators and now here we just have to specify our Arrow function but for this Arrow function we are going to be providing the story so I'll just use like story and for now I'm going to just annotate as any so now inside there we can now do anything that we prefer but that's going to be only applied to this variation not to all of that variation and now let me just show you the inaction so

what I'm going to do is that I'm going to just create a div and by the way you can like do whatever you want to do right here so in my case I'm going to just only render the story let's just close there and I'm going to also provide a bit of styling to there so I'll just use the styling and provide my pairing inside there and that's going to be set to 20 pixel we're going to be also providing the background color and this going to be set to F0 F0 F0 and I'm going

to also provide the Border radius And this going to be only set to like maybe a pixel so now let me just save my file and now let me run this so I'm going to use like npm run Dev or not Dev but but I'm going to use npm run story book there we go and we are not seeing anything because now we are providing these curly braces so so we have to return something from the if I sa my file and here you can see we're now getting this button and also this border around

this button but now if I click on This default Button as you can see this decorator will be only applied for this specific variation not for the entire variations of this button so there was just a variation level decorator but now let's suppose if you want to use that same styling or that same decorator for this entire variation of this component how in the world we are going to be doing them to do that that's totally simple and easy all we have to do is that we have to cut that from here and We have

to just remove that now let me just save my file then we have to go ahead and go to the top and here we have to just Define now let me just provide there right here I mean like not the variation but or decorator so as you can see now our decorator is available inside this export default metadata and now if I check this out so here you can see that decorator or that styling will be applied to this component variation and now if I click on the other one here You can see it's going

to be also applied to this one as well so you know let me just create a few more variations so if I just duplicate them and change that to like uh I don't know maybe primary or something like that and then let me just duplicate that once again and I'm going to change that to like secondary or something like this s my file so here you can see we have our primary if I click on there that same styling will be applied to all of these Variation right here so this is how we are going

to be providing our decorator for the variation level and this is how we are going to be providing there for the local component like this styling will be only applied to this button component not to all of them but now let me go ahead and create another component so I'll just create like input field. TSX and I'll just write my RFC inside there I'm going to also remove that from here and you know let me just remove This entire thing and yeah I guess that's going to be fine so now let's just save there we're

going to be also creating another story for there so I'll use like input field. stories come on stories. TSX and now inside there the first thing that we have to use we have to import the input field also we have to use the export default and inside there let's just provide like my inputs or something like that I'm going to also P my component which will be the input Field so let's just pass the input field there we go I'm going to save my file and I'm going to also create a variation of this so

default input so now inside this one I'm going to just only past like the arcs and I'm going to past a label or maybe a placeholder and it's going to say like enter this is s file as you can see if I click on there nothing will happen it's going to gives us an error this because we have to go ahead go ahead and just uh import all of Their prompts I'll just use like those prompts and I'm going to also annotate the is any and let's just destructure all of their prompts s file now

let me just uh refresh there and here you can see we are now getting that enter something and I made a typo which should be enter something and now those decorator styling are not applied to this component why that's because now we made this DEC eror as local to this component only so if you want to make The AS Global so that it can be accessible to all of the component inside your project so this is how we are going to be making the global so I'm going to cut that from here so let's just

cut the s file and now I'm going to go ahead and go to my story folder which is a d story let's just zoom in a bit let me just zoom in a bit and now we are going to be creating another folder I mean like file and I'm going to give it the name of like decorator come on DC o R at R S.T X and you can give it any name that you prefer and by the way you don't even have to create this file you can definitely go ahead and go to your

preview and just provide your decorator there I am now creating this file because later you're going to be creating a lot of decorators so for that this is the best practice to create a decorator so the first thing that we have to do is that we have to import the react from the reactjs the next thing That we have to do is that we have to import something called The Decorator d e c o r a t o r from where from the story book so let's just import there from the story book not from

the aons but from the reactjs so now let's just save there and now we are going to be creating our decorator so I'll just use like export with background come on with background color and this is how the convention of The Decorator looks like anytime you want to create your Decorator first of all you have to write this with I mean like you don't have to you like you can totally give it any name that you prefer but this is the convention like you have to provide this with and then you can give it any

name that you prefer and now we are going to be taking this annotation and now let me just place it right here now it's going to take something called the story function so I'll use like story FN and now inside there uh we have to just Return our stories or our styling to be precise so what was our styling let me just go back and I'm going to just cut all of that styling from here I'm going to cut there and remove this entire decorator from this local component sa my file and now let me

place all of their styling right here okay so let's just go back I'm going to copy the name of this story FN place it right here sem my file and also this should be export so this is how you're going to be Defining your Global decorator inside a separate file and now if you want to use that you have to go ahead and go to the preview. TS file and you have to import that right here so I'm going to go ahead and just import my with background color and now let me just copy there

and this is how we are going to be providing there or making there as a global to all of the components so use like export cons and then decorators and I'm going to just provide My name which is a with background decorators and it should be a equal to sign so now let me just save my file and now hopefully it should be available to all of our component so as you can see right here let's just refresh there it is available right here also here here and now let me just check this component out

and yeah it is also available right here so this is how we going to be working with the decorators so first of all we saw is that you can provide a Decorator inside your component variation you can also provide there for your entire component variations which is called the local decorators by the way and this is how you're going to be creating a separate file for your decorators and you can put anything that you prefer if you want to reuse the again and again either for the component or for the global and this is how

you're going to be importing there and this is how you're going to be using there Inside your preview. file okay so now that we've seen a lot about the story book syntax but now let's talk about how we are going to be providing a types forward stories so which means like we are going to be learning about the typescript with story book so this is how our component will look like first of all we just creating our interface and now we are expecting the label the on click color and disable we are also destructuring there

and we're also Providing a default values for there and then finally we are just using the inside our button component as simple as there so now let me just close there and now let me go ahead and go to my stories folder and I'm going to be defining the button do stories. TSX and now let me just hit enter so the first thing that we have to do is that we have to grab our button component and we also need uh this styling right here that's the only reason I me like not styling but also

These types uh that's the only reason we are now exporting there so that we can use the in other file okay so now let me just provide my comma there and I'm going to be also importing the button props okay so let's just sa our file and this is how we are going to be importing the button and also it's props now anytime you want to use types forward story book so story book provide two types so the first one we have is the meta and the second one we have the Story object which will

be essentially forward storybook object so now we have to import there from the story book not add-ons but from the reactjs so now let me just save my file and The Meta will be responsible for all of the metad data which we are going to be providing for the initial values of our stories and then we have a story object and that's going to be responsible and also will provide us objects or interfaces for our story book variations so now let me just Show you there here you can see we've been creating our uh stories

like this first of all we have to write the export and then we have to write uh d F and then we are providing some values but we're not going to be doing that anymore so now let's just close them instead we are going to be creating something called The Meta object so I'll use like cons meta and then we also have to annotate there with our prop so I'll just use like meta which is now coming From the story book reactjs and then we also have to tell it that we also want to use

our own types which is called the uh button prop so I'm going to copy the and place it right here so essentially by this code we simply means that we also want to use the story book types but we also want to provide our own ones okay so now let me just uh provide my equal to sign and now let's just create or story like this now I want you to hold control and click on this meta so It's going to bring you to this public Dash types and then some sort of a random ID

and these are decoration files so here you can see we have our type then which is coming from The Meta and which is using something this weird sentex I don't even know what the hell this is but yeah this is how we are going to be getting these typ from our story book you want to use these types and we also want to use these button props which are our own Types so this is how we are going to be providing our title so I'm going to just write like components come on component components and

inside there we want to create our button right here now underneath there we're going to be also providing our AR types and inside there I'll provide my color and that's going to be set to control come on control and we're going to be setting there to color now outside from there let me just duplicate like a few times we're going To be also providing the label and also the disable as well okay so I'm going to change that to text and I'm going to also change this one to Boolean now finally we have to export

that so that we can use that in other file okay so this is how we are going to be exporting this I'll use like export default and then meta and now let's just save there and this is how we are going to be creating our story but now let's create a variation for the story so now Underneath there uh we are going to be defining our variation so I'll use like export cons and then default and now here inside they we are going to be using their story object which is now coming from the story

book and by the way these are also a typescript type so if I hold control and click on there it's going to also brings us to this. D or Declaration file. typescript so as you can see there are a lot of crazy stuff going on right here okay so yeah We also have to use them and now you have to set that to as a equal and inside there we are going to be using the ARs and let's just provide our label and for the label I'll just say click me and I'm going to also

provide the color so the initial color is going to be set to like 007 bff or something like that and I'm going to also make it as a disable only false so file now let me create a few more so I'm going to also duplicate there and make the as a Disabled button so I'll use that disabled and I'm going to make the disabled to and I'll just say like this should be the disabled button or something like that now let me just create the final variation so I'm going to duplicate and change the name

of that to like some sort of a red button and I'm going to also write like red and change that to like FF uh 00 or I guess four zeros yeah that's going to be fine and I'm going to also make as a totally False s file check this out now let me just refresh there click on the button and now we are getting some sort of error story component button default annotation is not defined so we are now missing something missing the button let me just copy there and we also have to render there

right here God damn it so let's just sa our file now let's check this out so here you can see we have our button we also have the disabled one and we also have the red button right here If I hold alt and hit a so now it's going to gives us the label color disable and also the on click so yeah this is how we can use the types for our story book okay so now let's talk about the add-ons inside the story book so what are addons and why you should want care about

that so now once again I'm at the official page of the story book because I love their landing page and now let me just go ahead and click on these dogs and whenever we click on There here you can see we have a section called aons or you can also hit control K and you can also type the aons right here if you wanted to but in my case I'm going to only click on these aons and if I click on them there are a lot of addons right here now you might be asking hosan

what the hell are add-ons add-ons are just basically the extension that you can use to make your story look amazing and also a lot of more useful things so now let me go ahead and go to The vs code uh extension area right here as you can see we have a lot of extension for the vs code so we can type for a specific uh theme or maybe something okay so if you type this so it's going to gives us basic em and all of that kind of stuff for the vs code and add-ons are

exactly the same thing inside the story book so there are a lot of them you can choose different popular ones and story book also comes with a default add-ons as well so we have a Chromatic we have a mock service worker and which is by this amazing person Yan why a Ann and I love this guy to be honest I swear to God I love him I try to message him on uh Twitter but he only accept those accounts who are verified and I'm broke so that's why I can't even message him bad for me

anyway so there are themes there are Design Story book story source and there are a lot of things right here so you know what let me just show you the dogs air on so I'm Going to just search for there I'm going to only write the dogs and hopefully it will gives us their dogs and if I click on there or it was docks or autod dos let's just write autod dos let me just type there and tellin autod dos no this is not something that I am interested in now let me just search for

the dogs as well and now let me click on this one and this is how you're going to be installing that specific airons and basically this is just a specific Landing page for that addon once again Yan PF okay so now let me just copy there now let me show you how we are going to be installing there but first of all let me just go ahead and go to my storybook and if I click on the main here you can see story book also comes with a default addon so we have the on boarding

we also have the essentials we also have the story book and we also have the add-on interaction so you can explore there by yourself if you wanted To but now let me just close there and now we have to install our own addons so now let me just control C now let me place that Command right here which is npx install uh story book aons docs or yeah now let me just use the could not determine I guess we have to use the npm I guess so now let me just try there with npm I'll

just use the npm install story book and now it will work totally fine it's going to install it inside our project so now let me use npm run story Book come on story book but before I do that I want to show you something here you can see we only have our uh Bund TSX uh file and now let me go ahead and go to my button. storage. TSX so this is how we are just importing our typescript types this is how we importing our button and this is how we are just creating a story

for there and this is how we are just creating our variations for word button so what I'm going to do is that I'm going to also provide the Tags right here so I'll use like tags and now let me just specify something called the auto do so I'll use like Auto come on auto docks and now let me just save my file and now as soon as I do that let me just open my uh terminal and I'm going to just hit enter so it's going to run my story book right now now let me

just refresh there and here you can see we are now getting something called the dogs which is new for us so now let me just click on there and as Soon as I click on there we are now getting a documentation for our component so now this is how our component will look like this is how the coding of my component looks like this is how we are now providing these props like label disable on click we can also see that if I click on this it's going to make it disabled we can also change

the um come on level of there to like something come on something oh my God something else and also we can click on The and so much more so this is how our story will look like and you can generate all of that dogs by first of all installing that auto dogs and also and this is how you have to specify their Texs and make the as autod dos okay so that was about the documentation and also about the addons inside the story book so what is a style dictionary and why should anyone care about

that so style dictionary is a build system and tool that allows designers and Developers to Define organize and manage design tokens in a Json format so these tokens Can Be mapped to different formats such as CSS variables sense variables or even JavaScript objects so what are the benefits of using a style dictionary well the F benefit is a centralized management so design tokens are stored in a single source of Truth typically in Json file making them easy to maintain and update it is also a crossplatform it can output design Tokens in different formats like CSS

Json SS L and and even Android iOS specific formats extensibility you can extend and customize how tokens are processed enabling you to create complex design system with calculated values custom Transformations and so much more which we are going to be covering in a short period of time and finally automation so style dictionary automates the process of transforming design tokens into usable formats for the Development so how all of this going to work so first of all you would have our input. Json file and inside there we would have our design token and once we use

a style dictionary on there so it's going to gives us the output like so in this case we are now using a CSS variables but if you want to get like a JavaScript version of there or a SS version of there you can totally do that and we're going to be also doing there so how are you going to be installing There you just have to write npmi to install there and then you have to specify style dictionary and also style dictionary utilities so what is that style dictionary thing and what is that style AR

utils thing so style dictionary is a core Library used to manage and transform design tokens it provides a primary functionality to Define process and output design tokens in different formats like uh CSS SS Json and so much more which we just discussed a few Seconds ago and what is that style dictionary UIL thing so style dictionary utils is a supplementary utilities package that provides additional helper functions and tools that can be used alongside with the main style dictionary Library to make a certain task easier so that was about the theory and now let's get into

the coding then you'll get to know what I'm talking about all right guys so now let's Implement that style dictionary in action so FYI this is the Official page of a style dictionary so you just have to type like style dictionary.com and let me just show you there this is how you're going to be defining your tokens as a Json format and it's going to give you the output as a CSS variables and don't worry I'm going to also show you like how you can get the SS output and also the JavaScript output so you

can learn more about that if you wanted to so you can go to their GitHub and these are the People who know what they're doing okay so now let me just click on the documentation if you want to watch like their documentation architecture and so on and so forth but the thing which you are going to be interested in uh is here so you can just go to the hooks uh then the Transformer and then the transform group and you just have to like check out this documentation and that's going to be everything that you

have to know but you don't even have to worry about That because now you're going to be using there so what I'm going to do is that I'm going to right click on there and open my terminal let me make that a bit bigger so you guys can see everything a bit better like so first thing first I'm going to create a new folder with the name of style dick demos and now let me go into that style dick demos and here inside there uh you know let me just open there in the vs code

so let's just open there and now let me go Ahead and create a new folder with the name of tokens uh and inside this folder we are going to be defining our tokens so now let me just right click on there and create a new file with the name of color and you have to specify this tokens. Json because whenever we are building our design system we are going to be using this format so now let me just hit enter so basically this is just a Json file nothing special inside there but now we are

going to be providing our Tokens as a Json valos so now let me open and close my object and inside there let's just provide our colors uh ke key and inside there we are going to be starting from the violet color so v o l t and now let me just provide some sort of a value to there and the value will be set to like 7 C3 a d so that's going to be my one color now let me provide a comma and I'm going to duplicate that a few times so that's going to

be first one second third and Fourth color let's just go to the top and change this color value to Blue I'm going to also change the hexad decimal value of the 3 D 5 a let me change that to Green uh and I'm going to also change the hexy decimal of there to one B uh 981 981 I'm going to also change this value to the red one okay so I'm going to also change that the hex value of there to like EF 4 4 4 4 like four times I'm going to also close there

now let me Just save my file and this is how our design tokens looks like and now we are going to be using a style dictionary to transform there to a CSS variables then we're going to be transforming there to a SS and then finally to a JavaScript and you can also transform there to like Android code if you want it to but in my case I'm not going to so now let me open my terminal and now we are going to be installing like both of those packages which we just Define or which we

just Discussed a few seconds ago so we're going to be installing a style dictionary and also a style dictionary util so now let me just hit enter so it's going to install there right here this is right for there so then St you're done now we are going to be telling a style dictionary to transform or tokens to some other format so what I'm going to do is that I'm going to just create a new file inside the root and I'm going to give it the name of Like config.js and inside this config.js we are

going to be providing a few configurations so the first thing that we have to do is that we have to provide the source we want to get or design tokens like we want you to go to the tokens folder which is this tokens folder right here and every single thing inside their tokens folder which ends with the tokens. Json okay so here you can see we're now providing our token file is like uh color. token. Json so we Have to just specify there so that's going to be our source the next thing that we have

to do is that we have to provide our platform so I'll just write like platform and here inside there we are going to be only transforming there for a CSS just for now and I'm going to show you that other ways in a few seconds so now you want to transform that to a CSS and now we are going to be using a transform t r NS f o r m transform group and we want to get like A CSS transform and we're going to be also providing a path where we want to get the

build okay so I'll just write like build path and here let's just change that to like build and then CSS and then inside that CSS we want to get all of that results now underneath we are going to be also providing our files so here inside let me just space my array and inside this array we're going to be providing our destination and also the format now let Me just provide like t d s t i n a t i o n destination and the destination will be set to very variables. CSS okay now let

me just provide a comma and I'm going to also provide the format like for which format you want to get your values okay so we want to get as a CSS variables like so now let me just save my file and go back so this is how we are going to be providing a source this is how we are going to be specifying different platforms but for now we are Only providing the CSS but later we are going to be also providing that other stuff okay so we are also providing a transform group we are

also providing a build path like where you want to get our items to be like the build item then we are providing a file inside that we are providing a destination and also the format and that's going to be it now let me go ahead and go to my package.json file right here and here we are going to be providing our own script so now let's Just provide our comma there and I'm going to provide my scripts right here and inside the scripts we're going to be providing a build script which will allows us to

build our file so now we are going to be using a style dictionary not dependency but Di i d i o n a r y dictionary and build now let me just save there close there open my sidebar open my terminal and I'm going to be using npm run build and as soon as I do that and if I just hit enter so watch What happens it's going to gives us the build off there and here you can see this is now check like we not getting any errors nothing whatsoever if I click on this

build so now we are getting a CSS folder and now if I click on this uh variable start CSS bang we are now getting all of that colors right here so now we are getting like uh the violet color blue color green color red color and so much more okay so this is how we are going to be creating our tokens this Is how we are going to be creating a configuration for there and this is how we are going to be building there so now let me just delete this folder from here and now

we are going to be providing a few more tokens and we are going to be also providing a few more configurations right here let me just space my spacing and also the typography so we already saw this color one now let me go ahead and go to my spacing so we have this spacing right here so we have a extra Small we have a small we have a medium and large now let me also go to my typography so inside there we have a small Bas large then we have a font wet like normal medium

and bold and so on and so forth so if you want to provide there you can definitely just provide there or if you want to go to my gab repository and grab that from there you totally can now let me just rebuild it once again so if I just rebuild it here you can see it's going to gives us all Of that values as a CSS variable so now we are getting like the colors we are also getting the spacing and we are also getting the font sizes and also the font weights right here now

let me just delete this folder once again and now we are going to be providing a few more configuration for other platforms so now let me just hide there next up I'm going to provide the SS configuration so I'll just provide like scss and inside there uh we're going to be providing our Transform group in this transform group we'll take scss SCS there we go if I can speak there today next we're going to be providing our build path and here for this build path uh we're going to be still going once again to that

buildt folder and now we are going to be creating a new folder with the name of scss and then outside from there we are going to be specifying our files and inside these files we're going to be providing an object and here let's just Provide our destination and for the destination we want to go into the variables do SCS come on scss file okay and we're going to be also providing a format for there and the format we want to get there like SCS and then variables there we go okay I forgot to include my

colon there now let me just save my file and these are all the configuration that you have to specify for the scss so now let me just close there I'm going to zoom in a bit once again and now let me Just rebuild there once again now it's going to gives us the CSS and also the scss so let's just go into the build folder so now we have a CSS and we also have this SCS if I click on there once again so now we are getting all of our CSS or S variables right

here so we are getting the for the colors for the spacing and also for the font sizes and font wids now let me just close there and finally let me just show you there for the JavaScript I'm going to also Hide there and now let me just show you there for the JavaScript I'm going to provide my Js and inside there we are going to be providing my transform group and here we going to be setting that to the J JavaScript and now let's just provide our build and here let's just provide our build and

then JavaScript you want to go into that folder provide a comma there uh we are going to be also specifying our files inside there we have to provide the object destination And the destination will be set to that variables not CSS where in this case JavaScript we're going to be also providing a format and the format will be set to JavaScript and then es6 let's just go back save my file and finally let's just build it and I'm going to just remove this folder once again and rebuild there by using npm run Dev so I'll

use like npm run Dev or not Dev but build once again and now let me just hit enter so it's going to gives us the Output of CSS SS and also the JavaScript let me click on the build and we are also getting this JavaScript so now let me just click on there we have a variables. JS file right here now we have all of our JavaScript variables so we're now getting there for the for the spacing for the font size and for the font WID and that was it about the style dictionary and next

we are going to be covering the clsx now let me show you another super important package for Building a design system and a component Library which is called the clsx so what is a clsx and why should everyone care about that so clsx is a small utility for conditionally joining class names it helps you dynamically add or remove CSS classes based on a condition without having to worry about manual string concatenation or complex logic so that was it about the basic definition of clsx and now let me show you the inaction all right guys so

now let me Show you that clsx package inaction so I'm going to open my terminal and let me just zoom in a bit so you guys can see everything a bit better like so there we go now I'm going to use mkd to make a new directory with the name of clsx uh demos and now let me go into that clsx demos and now I'm going to open that in my vs code so the first thing that I want to do is that I want to open my terminal I'm going to be using npmi not

I but npm inet Dy to Initialize our package.json right here now let me go into that package.json file and here inside there we are going to be only providing one script which will be set to type and then Mo let's just provide there and by the way we are going to be also creating a script for ourselves so I'll just write a d and here I'm going to only provide like node and then SRC and then index.js because we are going to be only testing this index.js file which we're going to be Creating in a

few seconds so you only have to specify this type modu and then this Dev package right here so now let me just close there and here we're going to be creating a SRC folder and inside there let's just create our index.ts or not TS but JS now we have to install the clsx so I'm going to use like npmi and then clsx so it's going to install it inside our existing project so that's all done let's just go into our project and here you can see we have our clsx Dependency right here so the first

thing that we have to do is that we have to import the clsx from where from the clsx and let me just give you the basic usage of of a clsx so you can basically pass a class names or conditional expressions like true and false and it returns a string of valid class name so what do I mean by that you know let's just remove that from here and I'm going to just write like clsx right here and I'm going to pass a button right here and I'm Going to also past like button primary and

now it should be just a primary there we go and now let me store there inside the variable with the name of button class and it's going to be equals to the clsx and now let me just log there to the console like button classes right here or yeah I guess button class would be fine let me just sell there and I'm going to use like npm run Dev and once I do this so what am I getting I'm now getting button and button primary so Basically it's going to con reate this string with this

one right here but we are not done there are a few things that you also have to keep in mind we can also pass a conditional expression so now let me just remove there and I'm going to create a variable with the name of is primary it's going to be set to true and now underneath there we are going to be using our clsx right here and now let me just spride my button right here and now we are going to be Checking like is primary and primary so if this is true it's going to

gives us this value but if that's not true so it's going to only gives us this button right here okay so what I'm going to do is that I'm going to just write like primary uh button class or something like that and now let me just log there to the console like primary button class I'm going to save this file right now now let me just rerun there so it's going to giv us like button and also Button primary but now let me just change that to like false and now let me just save my

file once again and run that so now it's going to only use us that button and not this button primary right here so that's the second thing we can also P AR raise of values so if the item is true so it's going to include there as a final class string but if that's not the case so it's not going to include there as a final string so what what I mean by all of their gibberish so We just have to write like is primary primary and it's going to be set to true and now

let me just close there now we are going to be using our clsx here we have to just specify our button and now let me just provide like um button primary I'm going to also specify is primary and this is right and and then active active but we have to provide that as array okay so now let me just convert there to array and now let me store that inside the classes variable Right here I'm going to also log these uh classes and now let me just save my file I'm going to use that npm

run and now it's going to give us like button button primary and then this active class right here and why is that that's because primary is set to true so that's why we now getting this active but now if you change that to like false come on false and now let me just save my file and rerun that there so now it's going to only gives us that button and button Primary and not the active one we can also use that with object so now let me just remove that and I'm going to Define two

variables with the name of like is primary it's going to be set to true and I'm going to also Define another variable with the name of is disable and that's going to be set to false now underneath we are going to be using our clsx and here we have to specify our object right here so I'm going to past like button and the value will be set to True I'm going to also provide like button primary and that's going to be set to this is primary so if this value is true it's going to include

this class but if this value is false so it's not going to include this value right here I'm going to provide a comma there primary comma I'm going to provide yet another one like is disabled and here let's just set that two is disabled right here so once again if this value is true it's going to include this Button disable but if this value is false so it's not going to include this value right here and now let me just store the inside the classes variable and now let's just log that classes to the console

there we go now let me just save my file and I'm going to open my terminal and use npm run Del now we are getting like button and also button primary as you can see right here because this value is true so that's why we are now getting this value now uh we Are not getting this uh what do we call this button disabled and why is there that's because this value is set to false so that's why we not getting that value but now if I convert that to like true and now let me

just save my file and rerun there now here you can see we're now getting button button primary and button disabl but now if you convert like both of them to like false convert this one to false as well let's just say our file and now let me just reun there Here you can see we are only getting the button and nothing else than there so that was our small package which is called the clsx so now let me show you yet another useful utility package which we are going to be using for building our component

library and which which is called a CVA so what is a CVA and why should even care about that so CVA or class variance Authority is a utility that helps manage and apply conditional CSS class names in a structured and Reusable way often used with utility first CSS Frameworks like tailn CSS it allows you to Define class variations based on a component props or states to maintain the consistent styling so that was just a quick theory about the CVA and now let me show you there in action so now let me show you that class

variance Authority in action so I'm going to open my terminal and I'm going to make that a bit bigger so you guys can see everything a bit clear like so So I'm going to use npm create and then we we at latest and now uh I'll just give it the name of like CVA demos and now I'm going to choose react just with typescript let's just go into that CVA demos folder and install every single thing inside there while it's installing I'm going to go ahead and go to my tman CSS and then I'm going

to click on this getting started go to the framework and guides click on the weat and let's just wait for that to finish then we're going To be making a tan CSS setup that's to done I'm going to open that in my vs code and this is how it looks like so I'll just remove this public folder let's just go to the SRC remove this assets app. CSS remove every single thing from the f. TSX and I'm going to use my RFC inside there and now I'm going to copy this command open my integrated terminal

place it right here so it's going to take a bit of time to install the tailin CSS the post CSS in Auto prefixer right here okay that's totally done I'm going to also hit enter to initialize my tailman CSS that's also done now let me copy every single thing from there to my tving config file and place it and replace it with this new content right here let's just remove there I'm going to also copy this index. CSS and place there right here now let's just remove them and now I'm going to open my terminal

once again and I'm going to use npm run Dev to run my Server and this is how it looks like right here so the first thing that I want to do is that I want to create a components folder and inside there I'm going to create my button come on TSX so this is how we are going to be creating our folder and inside that we are now creating our but. TSX file and I'll just use my RFC just for now I'm going to save this file right now and the first thing that we have

to do is that we have to import something called the CVA let's Just just import the CVA from where from the class variance Authority but we did not install there so we have to first of all install the then we would be able to use this so I'm going to use like npmi to install the class variance aor if the spelling is correct so it's can install there right here that's all done now let me import the CVA CV from where from the class variance Authority that's to done now let me just save my file

and here here we have to Define class variations Okay so variation you know we don't even have to right there so this is how we are going to be defining a different variation for our button component so I'll use my CVA and I'm going to execute there so it's going to first of all take the Bas class names and it's going to also take the configuration which we are going to be providing in a few seconds so first of all I'm going to specify some sort of Base classes like pairing for the x-axis will be

set to four Pairing for the Y AIS will be set to to and round it totally medium and also Focus f o c us Focus will be set to outline and then none okay so now outside from that here we are going to be providing our configuration right here so now let me just hit enter I'm going to go back and this is how it looks like and inside this object we're going to be providing our variants so v r v r i NTS and inside these variants we're going to be providing different Variation for

work component so I'll just provide like color for instance and inside this color we would have two flavor of our color so we would have a primary and I'm going to specify like background to Blue of 500 I'm going to also change the text to totally white and here we are going to be also providing a secondary it's going to be set to like background totally gray of 500 and also the text will be totally black so that's going to be the first Variation forward color inside our component okay so now underneath there we're going

to be using the size and for this size we're going to be providing a like small and large size so I'll just write like text only small and I'm going to also provide like pairing on the Y AIS of one pairing for the xaxis of three now underneath we are going to be also providing a large and the large will be set to Tex large and pairing for the y axis will be set to three pairing For the xaxis will be set to six I'm going to save this file right now and now underneath this

size I'm going to also provide different state for my button like the active State the disabled state so I'll just write like State and here we going to be providing like active if my button is active so we're going to be using background totally blue of 700 but if that's not the case and if the button is set to I can type there today if the button is Set to disable so we're going to be providing background to freay of 300 and also cursor will be not allowed in that situation so now let me just

save my file go back and here we're going to be also providing a default values so there should be underneath this one it's all we just write like default values and here inside there we're going to be providing a default value for the color like primary and I'm going to also specify the size and the size default Value will be set to small I'm going to save this file right now I'm going to also store this entire thing inside the variable with the name of uh what do we call it buttons or yeah button Styles

would be fine okay so let's just say they I'm going to copy a name of there but it should be button styles okay now let me copy the name of them now we are going to be going into our button component and here we're going to be using this so now let me just remove That from here I'm going to also change there to the button so this button will take a few props so now let me just destructure there first of all so we're going to be providing a color it's going to also take

the size and it's going to also take the state and we're going to be also providing our content which will be set to a children so I'm going to also create a button props interface for there I'm going to copy a name of there and Define my interface right here so I'll use like face button props inside there we're going to be optionally providing a color forward button so if the user want to provide this uh color they totally can but if they don't want to provide that they don't even have to so I'll just

provide like primary either use primary or use a secondary because we already set this up now we're going to be also providing a size and that's going to be also totally optional so either small size or large size now we Are going to be also providing a state and the state will be set to active or disabled and finally we're going to be providing a children but why am I providing a comma these are not objects so I'll just write like children and we are going to be getting a react node from the react node

now let me just hit enter just going to import that react node right here that's tot done now we have to use these props inside our component so I'll Just uh first of all render my children right here so I'll just write like children for the class names now we going to be using our button St FES which we already defined right here okay so now let me just hide there I'm going to also hide this one now we are going to be using this button classes right here for the class names and now here

we're going to be passing that color which we are now taking as a perimeter right here we're going to be also Specifying the size and also the state which we are now taking as a perimeters so that's to done now let me just save my file but we are going to be also providing a disable state if the state is equal to disable so in this situ which means like our button will be disabled so that's totally done now let me go ahead and go to my app and here we have to use the right

here so let's just remove there and first of all you know let me just put a bit of classes to There so I'll use like spaces on the Y AIS of four and here inside there we're going to be using that button component which we just defined okay so now let me just close there right here and I'm going to specify like primary large button or something like that and here we're going to be passing a color so the color will will be now let me just hold control and hit space so here you can

see we only have two options like primary or secondary so in this Situation I'm going to only choose like primary I'm going to also provide the size of there and size will be set to large okay so that's totally done we can also specify that other one which was was that state so I'll just write like State and State will be set to active Okay so as soon as I do that now the error will be gone now let me run that by using npm run Dev and check this out so here you can see

we now getting our button we can also change that to like Disable or B and now let me just save my file so now my button is disabled right here so you know what we're not going to be providing the state for this one let me even make the as a optional so now let me just make the optional so that we don't get the typescript error we're going to be also using that button once again and here we are going to be providing like secondary small button and here let's just pass our color Inside

there and the color in this case I'm going to pass like secondary color I'm going to also provide the size of totally small today okay so now let me just save my file so here you can see we're now getting a secondary button and also smaller button than this one okay so there's the second button and now let me just create the final one which will be for the disable so I'll just use like button and disable button like so and I'm going to past like the color and the Color will be set to primary

I'm going to also provide the state come on and the state will be set to disabled I'm going to also provide the size and the size will be set to small I'm going to save this file right now so here you can see this is how we're going to be defining a different variation for our components by using this CVI package right here so these are going to be basically our base classes and then we can specify different variation like uh The for the color we can use like primary secondary for the size we can

use like small and large for the state we can use like active and disable and if we did not specify any color or size so it's going to also take this default variations right here so yeah that was it about the CVA in action all right guys so now we are going to be building our own custom component library from scratch by using tools like reactjs typescript tman CSS roll upjs story book React testing Library vest clsx CVA and so on and so forth so what I'm going to do is that I'm going to open

my terminal and now I'm going to zoom in a bit so you guys can see everything a bit better like so and I'm going to create a new folder with the name of my components uh library or something like that now let me go into that my components library and I'm going to open that in my vs code and this is how it looks like so first of all I'm going to Initialize my GitHub repository by using get in it so let's just use the hit enter so it's going to initialize my GitHub repository and

now I'm going to be using npm in- Y to initialize my package. jsn file okay so now let me go into that package. Json file and now here you can see we don't have anything special inside there but we only have this boiler plate of uh package.json file so now let me just close there and now the next thing that we have to do is That we have to install a reactjs and also typescript so I'm going to use like npmi and then reactjs typescript and also types for the reactjs as well so now let

me just hit enter so it's going to install the inside this packages and that's totally done and now I'm going to also create a new file with the name of get ignore Sol just use like get ignore and inside there we're going to be only ignoring the node modules folder and now let me just save there and here we can See that's going to be gone it should be gone now there we go so that's to done now we're going to be creating a folder structure and then we are going to be writing our code

inside there so now let me just create a new folder with the name of SRC inside this SRC folder we are going to be creating a new file with the name of index.ts so let's just write like index.ts also we are going to be creating a new folder with the name of components so I'll just use like Components and inside there we're going to be creating a new file with the name of index.ts once again and now inside this components folder we are going to be creating yet another folder with the name of buttons so

let's just use like buttons or just a button would be fine and now I'm going to create a new file inside this button folder with the name of index.ts now let me just close all of that files and now I'm going to go into that buttons folder and now we are going To be creating yet another file with the name of button m. TSX and now inside there we're going to be just writing a boiler plate for or button component now let me just save there and we would also need to import the react JS

so let's just use come on import the react Js from the react JS and we would also need to grab the react node so now let me just save my file it's going to also take a few props so now let me just write like children and we're going to Be annotating the as uh button promps or something like that so now let me create that interface with the name of button promps and now inside there we are going to be creating our children and now let me just space like react node which we are

now importing from the reactjs or react node once again now let me just sa my file and that's going to be it also we would need to change this div to the button so that we should get our button right here so now let me just save my File I'm going to close this file right now now I'm going to go into this buttons folder and inside there we have this index.ts file so I'm going to click on there and here we are going to be exporting let's just try it like P default from where

from where button folder or from our button file so now let me just save my file close there now we are going to be clicking on this index.ts file which is now available inside this components folder not inside The buttons folder so I'm going to just activate there and here we are going to be exporting our default as button from where from our buttons component so I'll just use like uh let's just go to the Advan folder and now let me just save there and that's toly done now finally we have to go into this

root index.ts file which is now available inside this SRC folder and we only have to export every single thing from there so let's just use like export every single thing From that components folder like so now let me just s my file and that's already done so now we are going to be adding typescript to our component Library so what I'm going to do is that I'm going to write like npx and then TSC and then d d in it to initialize my typescript inside this project so now let me just close there and here

you can see now it's going to giv us this TSC config.js file I'm going to just double click on there and I'm going to remove every Single thing from there and now we are going to be replacing them with our own one so first of all we are going to be providing our compiler options and now inside this compiler option we're going to be first of all providing the target okay so our Target will be es next in this case I'm going to also provide a comma and we are going to be also providing like

es module ENT repo and now let me set to True also we are going to be providing the force consistent Casing in file names and let's just set the true and we are going to be also providing a strict mode and that's going to be also set to true and let's just also provide the skip Library checks that's going to be also true and for the root directory and the path will be only dot so now underneath there let me just even provide a comma there we going to be also providing a jsx so for

the jsx we want to use reactjs in this case and also for the modu we are going to be Setting that to es next I'm going to also provide the Declaration so let's just use like declaration that's going to be set to true we're going to be also providing a declaration uh directory and which will be our types directory in which we going to be writing our types okay so now let me provide a comma there we are going to be also setting the source map to true the out directory will be set to a

disc because we are going to be building our project and now We are going to be using like module resolution and module resolution will be set to node okay we going to be also providing allow synthetic default Imports let's set that through and finally emit declaration only come on uh emit declaration only and also set that to true and now let me just save my file and that's everything that you have to provide for your TS config file and now we are totally done with the typescript stuff so now we are going to be Installing

rollup and that's going to be a lot of fun but you have to install a lot of dependencies for there so if you want to type there by yourself you totally can but you can also find all of them in my gab repository so I'm going to just use like npmi let's just zoom in a bit and then DD to install the as a dependency this just install the rollup and go to the plugin and then common JS we also have to install the rollup let's just go to the plugin once again install The note

resolve then roll up once again go to the plugin and then terer then roll up plugin typescript because we're going to be using typescript and now we are not going to be providing this add symbol but we are going to be only providing just a rollup okay and then roll up uh plugin DTS and roll up plugin here dependencies external p is live roll up plugin then post CSS because we are going to be also installing a t in CSS so we have to install all of there Right here it's going to take a while

to install all of these dependencies but I'm going to just but I'm going to just face forward this R right now that's totally done I'm going to close go there and now I'm going to go ahead and just go to the root and here we're going to be creating a roll upjs file so for the configurations I'll use like rollup and then config then. JS so let's just add that close that one and here inside they we're going to be placing a lot of code But you don't have to worry about this code because these

are just a code for building this project here you can see we now just grabbing all of their dependencies which we just install like resolve commonjs typescript d and so on and so forth and then we are providing an input like where is our file located then we want to get like the output in this file and format and so on and so forth okay so we are also providing a few plugins which we are going to be Using inside this project so that's everything that you have to provide and if you want to also

get that from my GitHub repository you totally can but you don't even have to worry about this code if you care about that well can just check out some video about the rollup but in my case I'm not going to be worrying about this so now let's just close was there and that was the setup of a rollup but now I'm going to go into my package.json and here we're going to Be replacing a few things so I'm going to have to delete the main and also the test and also the keywords let's just delete

them because we are going to be providing our own stuff okay so I'll just first of all provide my main and Main will be coming from this disc folder because once we build our project so it's going to go into this disc folder and then CJs and then index.js okay so that's going to be my main file entries now we are going to be Also providing a files and for these files we are going to be going into the disc that's to done we going to be also providing a types okay so once I provide

the for the typescript types declaration you want to go to the dis and then index. D.S like so and now underneath that we're going to be also providing our own script to build our project so I'll just go ahead and uh put the rollup and that's going to be set to uh roll up and Then d c and then D- bundle s CG yes there we go I'm going to save this file right now and now underneath there we going to be also providing a keywords if you don't want to provide this keywords you don't

even have to provide there but if you provide the like once you push this project to the npm so you're going to see these keywords inside your landing page so I'll just write like uh random and then I'm going to proide like test and then test two or something like That now underne these keywords we're going to be also providing a type and type will be set to modu okay so let's just Cho like module like so and now underneath that we're going to be also providing a PE dependencies okay so underneath this dependencies we're

going to be providing a PE dependencies like dependencies and now let me just set the react come on not sing but set the react to re J not 18 19 but 18 so basically peer dependencies just simply means like Whenever somebody else using these packages they have to have at least reactjs 18 or greater version than there and now let me just save my file and there was about the rule of JS and now let me close there okay so now we going to be installing a TN CSS in our project so I'll just go

to the talin come on if I can get there today tent css.com I'm going to go to the getting started button now let me click on the framework and guides choose weed I'm going to copy All of these commands and now let me open my terminal and place it right here so it's can to install the T CSS post CSS in Auto prefixer now totally done I'm going to hit enter one more time to initialize my telin CSS inside this project right here so now we are getting this telin config.js file I'm going to go

there and copy every single thing from there and place it right here that's also done I'm going to also create this index.css file so I'm going To copy there go to my SRC folder and create a new file with the name of index. CSS and now let me just copy every single thing from there place it right here say my file and that's going to be it and now if I just use like npm run uh roll up J so it's going to build my project so I'm going to use like npm run and then

roll up now let me just hit enter and here you can see it's going to build my project right here so we can now find all of that code inside this Disc folder now inside that we have our index. DTS we also have our CJs and inside there we have all of our components which are now ready to publish to the npm packages okay so if you want to publish there by yourself so you can just use like uh npm publish I guess and you have to also log into the npm it's going to publish

there to your npm so this is how we are going to be building there and now let me just delete this folder and we're not going To be pushing there to the npm so that's St done now we are going to be adding a story book for visually testing our components so how in the world we are going be doing there we just have to write like npx and then story book at latest come on at latest and then iner now if I just hit enter so it's going to initialize the story book inside this

project so now it's going to ask us to choose either wheat or some sort of a bundler so I'm going to have to choose Wheat and now it's going to install it inside my machine and this is how my story book will look like but it will gives us an error uh you will just see that in a few second God damn it just show us the error oh if I click on that but anyways it's going to gives us an error because we need to install the weat we also have to install the react

D so I'm going to just hit n and set there to no let me just rerun there once again I'm going to Use like n PM not npm but I'm going to use like npm story book or npm run story book and once I do that now it's going to give us that error okay so here you can see it's going to crash because we have to install the weed so now we have to install the weed and react and react Dom so I'm going to use like npmi then react and react D and also

the weat so now it will successfully start to work that's St done I'm going to use npm run story book once again and now it's going To start working so here you can see we're now getting our configuration if I go to the button so we are now getting these buttons primary secondary we are also getting our header components and we are also getting our pages and everything is working the way we expect them to work so that's toally done and now I'm going to have to just stop there for a few seconds because we

are going to be removing every single thing from the stories and we are going to be Defining our custom story in a few seconds okay so now we're going to be building a simple component and we're going to be also testing the inside our story book so what I'm going to do is that I'm going to go into my buttons component or just a simple button component and here I'm going to just remove every single thing from there and I'm going to just replace it with this RFC once again so the first thing that we

have to do is that we have to import The react uh from the react J we would also need to import the CVA oh we did not install the CVA like class variance authorities so we are going to have to install the I'm going to use like npmi and then class variance Authority a t h o r i t y I guess that's the spelling so it's going to install there right here and we would also need to install something called the tww merge or tent uh merge I hope the spelling is correct yep that's

only done So now we have to import the CVA from class variance Authority and we also have to import the tww merge like the Tailwind merge from the tailin merch package so now let me just save my file now underneath we are going to be defining our CVA so for the base CL is I'll just write like pairing for the xaxis will be set set to four pairing for the y axis will be set to two to it rounded and focus uh will be set to outline and then none then toly done I'm Going to

also provide my object and inside that we're going to be providing a different variations so I'll just write like variants and here inside there let's just provide our variant like v a r i a n t a few flowers forward buttons so just put like primary and primary will be set to background ho blue of five 00 and text will be set to totally white underneath that we going to be also providing a secondary and the background will be set to totally gray Of 500 uh like so text will be set to totally black and

now let me just save my file and now need this variant we're going to be also providing a size so for this size like or button can accept a small size and the text will be set to totally small and our button can also accept I thought I'm just writing a Json so or button can also accept the medium and it should be set to text of totally Bas and we can also specify the large size forward button which will be set to Text totally large and that's going to be it and we're going to

be also providing a disabled state so b i s a b l e d and for the disabled State we're going to be setting there to true so if it is disabled in this situation we're going to be providing the background of toay of 300 and text of toay 600 like so cursor will be not allowed uh like so and now underneath for the default styling uh we are going to be providing like default variant variants And for the variant we going to be setting there to like primary for the default one and for the

size test can be set to medium and also for the disable which will be set to F initially so now let me just save my file and this is how our class variance Authority looks like but I'm going to have to store that inside the button styes like so and now let me just save my file and I'm going to also hide there now our button will accept a few prompts so it's going to Accept the variant I'm going to destructure there right here so it's going to uh accept the variant it's going to also

accept the size and disabled children and class names like so or just a singular class name and next we're going to be also destructuring the entire props or resting the entire props and we also have to Define interface for there so that we can inate our component so I'll just use the interface with the name of Button props which will extends from the react. buttons uh button HTML attributes and here we're going to be also providing HTML button and here we're going to be also providing a HTML button element I'm going to also close that

in here inside there let's just provide our variant so v a r i NTS and or just a singular variant this going to be totally optional and we can either get the primary variant or we can get the secondary s n d a r y secondary variant So for the size which will be also totally off we can set the to is small size or medium size or large size okay uh and why am I providing a commas there God damn it I always do that and let's just provide a disable and disable will be

set to a Boolean now let me just sa my file I'm going to copy this button props from there and I'm going to annotate my component with that like so and now let Me just sa my file let's just go back so you guys can see everything a bit better and this is how my component looks like so now I'm going to be using a tail merge to merge our classes uh so I'll just use like tww merge and let me just import there because yeah I guess we already imported yeah we already did and

so now inside there uh we are going to be passing our button style component or not a component but a function which we are now creating by using this CVA Package like class variance Authority package so we are going to be calling there right here and inside this button style we're going to be providing what variant which we're now taking as a perimeter so I'm going to have to copy there from there place it right here we're going to be also providing a size today like so and finally we also have to provide the disabled

prop so I'm going to copy there and place it right here I'm going to store the result of There inside my variable with the name of merged class names and that's going to be set to the St and config and by the way outside from this object and also these parentheses we going to be providing our class names and now that's toally done okay so now let me just send my file here inside this button uh I'm going to just first of all change there to the button because we are going to be using there

and for this button label let me just change that to button right Here like so and for this button label it's going to accept the children so now for the props we are going to be restructuring all of them and now let me just provide like props and for the class names we are going to be providing our merged class names and for the disabled State we are going to be providing that disabled State and now let me just sa my file and this is how we are going to be defining our button component by

using class variance Authority uh tellin CSS tellin merge reactjs and typescript so now let me just close there and now we are going to be testing our component by using the story book so now let me just zoom in a bit and now inside this SRC folder uh I'm going to create a new folder with the name of stories and let's just Define our button story right here so I'm going to just uh create a new file with the name of button. stories. DSX and now inside there let's just Define Our first story so the

first thing that I want to do is that I want to import the type of meta and also the story object okay which we're going to be using right now from where from the story book not addons but from the react JS okay so now let me just sa my file and it should be upper case m not a lower case and now we are going to be also importing our button so that we can test there that's toally done and now we have to Define our meta so I'll just use Like meta and I'm

going to also in like So So Meta and the type of button because we now creating our button and this can be equals to this object so we have to provide the title so which will be our components and then button and now we also have to provide the component so the component is that component which we already grabb let me just even copy the name of there God damn it there we go and now let me provide a comma there for the parameters We going to be setting the to toally lout let's just put

our lout and store centered like so and I'm going to also provide the tags so for these tags uh we are going to be also using the auto dos now let me just save my file and I'm going to hover over there I'm going to hover over there quick fix there and add there to the workspace settings so it will not gives us that error again and again now underneath that we're going to be exporting our default meta that's Only done about the meta but now we have to Define our type and that's going to

be set to a story and now let's just set there to like story object and here we are going to be providing a type of meta and close there now let me just save my file and now we are going to be providing our actual stories forward button so I'll just use like export cons primary and primary button will look something like this so I'm going to annotate there with this story first of All and it's going to be set to this object we have to provide the arcs and inside these arcs we have to

provide the variant and the variant will be set to primary which is also a default value if you want to provide you totally can but if you don't want to proide there you don't have to so for the size I'm going to set there to medium and for the children I'll just put like primary button or something like that now let me save my file and I'm going to be using Mpm run story book so that we can test this out story book and this is how my button looks like but I'm wondering why the

classes are not provided if I click on there why is the classes not working you know what let me just go to index. CSS oh that's because we have to go in there to the story and then we have to go to the preview and now we are going to be importing over let's just go to the SRC folder and inside there we have our Index. CS uh CSS and now let me just save my file refresh this out and here you can see where styling is now working the way we expect him to work

if I click on the secondary so it's going to gives us this styling I can also get like the smaller button the medium button or the larger button I can totally change the content of the Buton I can do whatever I want to do with that so if I want to make that like disable if I click on the set Boolean and change that to true and Here you can see the cursor is not allowed that's going to be my primary Button as you can see that right here so now let me just refresh there

that's going to be my primary button let's just set there to false and I guess that's going to be fine now let me go ahead and go to my story book once again and I'm going to just create a few more stories now underneath there I'll just use like a export con secondary and I'm going to Also annotate with my story it's going to be equals to this object we have to provide our arguments inside there the variant will be set to secondary and we also have to provide the size and the size will be

set to totally medium and also for the children I'll say like secondary button component or something like that now let me just save my file click on the secondary and now we are getting the secondary so this is going to be basically our primary button and This is going to be our secondary button right here which is also looking cool now we're going to be taking care of the small button so I'll just use like small and provide my story right here and I'll just provide like arguments and for these arguments let's just provide our

variance and primary and the size will be set to totally small and the children will say like small button or something like that I'm going to save this file right now click on the small and now we Are getting our small button which is a bit smaller than this secondary but right here now let me create two more stories for the large and also for the disabled one so I'll use like large and as a story and here we're going to be passing our arguments and variance will be set to toally primary uh like so

let's just say our file for the size we're going to be providing a large size today and for the children this going to be set to large button like so s our File click on the large and now we are getting our large button and finally we have to create another story for the disable button so I'll just use like disable and annotate there with the story and inside they provide our arguments and here we're going to be passing our variant and variant will be set to primary like so and the size will be set

to totally medium and I'm going to also put disable and set the to true and the children will be set to disable Uh button like so now let me just save my file and now if I click on the disable and as you can see this is a disabled button so the cursor is not allowed so this is how we are going to be creating our actual component this is how we are going to be visually testing our component but now if you want to like actually write a test cases for this component so we

have to make a setup for there so we are going to be installing like we test and also the React testing library to test okay so now we are going to be installing the react testing library and so on and so forth so now let's just close there and I'm going to also stop there for a few seconds because now we are about to install a lot of things so the first thing that we have to do is that we have to install the what do we call it the vest as a Dev dependency so

it's going to take a while to install there but we are going to wait for it Baby okay it's taking a lot of uh so now that's totally done now we are going to be installing another package as a Dev dependency which is a testing library and then reactjs and also uh come on testing library and then user event okay so let's just proide them that's toally done we also have to install as a dependency the JS Dom and we also have to install what we call it npmi then DD at testing library and then

just Dom come on just D install there now we are Going to be installing a types for this so I'll use like npmi and then DD and add types for what for the just and also for testing library and then just come on just Dom oh we already installed the just Dom so it's going to overr right there basically and now okay it's taking a bit of time but now we have to install something called the testing Library L IB r a r y and then just a Dom now the next thing that we have

to do is that we have to go to the root and inside this Route we have to create a new file with the name of vest. config dots okay once we do that here inside there we have to provide a bit of configuration forward vest so I'll just first of all will import something called the Define config from the rollup not from the from the vest come on from the vest and then config and now underneath we going to be also importing rejs from where from the vest and we have to install this package so

we're Going to be installing the from the wejs and then plugin react I'm going to copy the name of there like so I'm going to open my terminal and use npmi and then wejs plugin reactjs so while let inst calling now we have to export default that Define config and here inside that we're going to be providing our plugins so we want to just use the reactj okay so I'm going to just execute there sa my file provide a comma there and now we are going to be providing our test cases So we want to

use the environment e n v i r o m e n t so we want to use the environment which will be our JS Dom and we also want to provide the globals and which will be set to True come on true there we go and we're going to be also providing a set of files and which will be set to SRC test and setup. yes I'm going to save this file right now now we have to go into this SRC folder and inside there we are going to be creating a new folder with the

name of test and Inside there we are going to be creating a new file with the name of setup okay so I'll use like setup. TS and here we have to import a few things so I'll just import first of all the testing library and we are going to be getting there from the Gom and also we have to import something called the testing library from the the react JS so now let me just save this file right now that's only done I'm going to also go into my package.json file right now and we have

To create our script for our test so what I'm going to do is that I'm going to just write like uh test and then UI and now we have to just write like vest and then d d you want not three dashes but only two dashes so now let me just save my file close there and I'm going to also go into my ts config file uh I mean like TS config.js Json file file and here we have to specify our types so let's just write like types and types will be set to retest and

then Global Globals like so g l o b l s there we go and here we also have to provide our comma Ser our file and then was it about the entire setup but I'm going to open my terminal right now and I'm going to use like npm run test and then UI it's going to ask us to install the vsi I'm going to just write like y so it's going to install the vsi right here and now we have rerun this command one more time and here you can see we're not providing any test

so we have zero test so we have Zero pass test zero fail test and zero total test okay so going to be creating our test file for our button component so now our setup is successfully done and now we are going to be writing a unit test for our component so what I'm going to do is that first of all I want to go into my G ignore file and we're going to be ignoring the what do we call it the this folder we would also need to ignore the rollup k a c a c

e there we go and also I guess that's going to be Fine so now let me just save my file and that's really done I'm going to also go into my test folder and inside there we're going to be creating yet another folder for the components and let's just use our button. test. TSX and now we are going to be writing a test cases for our button component so the first thing that I want to do is that I want to import react from the reactjs you would also need to import the render and also

the screen and fire you went from where from The test library reactjs now let me just save this file right now you would also have to import the button component so we can test it and also now let me just use the describe and for the label I'll just write like button component and here let's just remove that second from there and now let me just save my file right now and here I'm going to just say like it should come on I don't mean to import that but it should come on it should render

a button with default Styles like so and here we have to provide our Arrow function so that we can test that so I'll just pass my arrow function right here pass my render component and here we have to render our Buton component to the virtual do now say like click me and that's going to be fine and now underneath there why we getting this error that's because we have to make the disabl totally optional so not here but here I'm going to also have to just Mark the as disabled Optional and that's totally done now

underneath we are going to be getting our actual button so I'll just use like screen. get by R and here let's just space our button inside there because we are now testing our button component and I'm going to also store that inside the button variable like so and that's already done now let's just provide our expectation first of all so expect the button to have the text content of Click me and now let me just save my file I'm Going to also provide a few more expectation for the default class names so whether they have

a default class names or not so I'll just put it like expect and I'm going to pass my button inside there and we want to check like to have the class names of background toly blue of 500 I'm going to also duplicate that like a few times so change that to like background totally white and also change this one to background B and I'm going to also Remove that last one from there that's all done now here we also have to provide another expectation for our button and we want that to initially not be disabled

by default so I'll just write like not to be disabled and I'm going to execute this so as soon as I do that and sa my file now I'm going to have to run there but why in the world we are not getting this error okay so it should render a prop I'm going to go into my B component and search for the Bas class and it should be text base and I'm providing a BG uh base it should be a text base now let me just save my file and hopefully it will work but

now this one is failing but because this one should be text as well and now all of our test are successfully passing but I'm going to have to quit there and I'm going to use like npm run test UI because we want to test that inside the U and now let me just refresh there so here you can see we have one p test and We even have just a total of one test so now our test is successfully passing and that's something that we want now let me just close there and also I want

to open my story book as well because later we are going to be also testing our components so I'm going to use like npm run story book so both uh story book and also a test are successfully running so I'm going to have to copy there from there now let me just place it right here hit Enter and here you can see this is how we are going to be testing our components visually and this is how we are going to be testing or unit testing our components so that was our first test so now

let me just collapse there now I'm going to write another unit so we have to use the it once again and it should render a button with secondary variant okay so here we are going to be also passing our variants today so what I'm going to do is that I'm going to Just render my component once again close there and God damn it execute there and and past my B component which will say like click me and also we are going to be passing a variance of secondary to there now let me just sa my

file and underneath there we're going to be still getting our button component which will be a screen. get by roll and pass our button inside there save this file right now and here let's just pass our expectation today so pass our button To have the class names of background totally gray of 500 I'm going to also duplicate there and the text are totally black to there because now we are testing a secondary variant so my file and now let me just run this so here you can see we have two test cases and both of

them are now successfully passing so I'm going to also hide there and the next thing that we have to do is that we have for a test cases for the small button so I'll just use like it render Come on render a small or a button with a small size okay so I'll just pass my arrow function and here inside there let's just render or component by using that button and it's going to say like click me I'm going to also paste the size of totally small today now we have to use like screen dot

get by roll once again and we're going to be searching for button and now let's store the inside the button variable and now let me provide my expectation of button to Have the class name of text only small and now let me just save this file test this out so here you can see the small size button is also working I'm going to collapse that right here and now let's another test case so you know I'm going to just duplicate there because it's wasting a lot of our time so I'm going to just duplicate there

and change this to it should render a button with large button with large size so we now getting our button and now here for our Expectation I'm going to just change there to like LG for the larger size and our test is failing because something is not right so here you can see you now already a size of small medium and large but here we are providing a text of totally large txt dlg this because we are providing a small it should be a large God damn it now let me just sell my file and

run there and our test is now successfully passing so I'm going to Duplicate there yet another time duplicate there and change this test to the disabled test so I'm going to change there it should render a disable button and here we're going to be placing a disabled prop right here so place a disable and set that to True like so and we are now getting our button but now we have to remove that and here we have to proide our expectation for the button and we want it to be disabled and execute it now Underneath

we going to be also providing yet another expectation for the button once again and we want that to have the class names of background to gray uh Gray of 300 and I'm going to also duplicate there once again and gray of 600 but it should be for the text so now let me just save my file and our test is now successfully passing and which means like everything is working the way we expect them to work I'm going to collapse there now we are going to be Testing like whether we can provide our own custom

styling or not so can we merge them or not so like it should merge custom class name with default Styles okay so here we're going to be passing our Arrow function once again and and I'm going to first of all render uh my component like so execute it it's going to say like click me lower case me and I'm going to also provide my own class names like custom classes or something like that and now underneath There we're going to be getting our button so use like screen get by uh come on get by R

and here we have to pass our button inside there and I'm going to be using like button and it's going to be equals to this get by roll button right here so I'm going to paste my expectation and we are checking for the button and we want there to have the class names of custom class like so and now underneath there we also want to provide yet another expectation for the Button and to have the class names of background totally blue of 500 now let me just save there now let's just refresh there so here

you can see all of our test are now successfully passing which means like we can also specify our own custom styling forward button okay so like if somebody wants to add like new styling to the button they totally can and now finally we're going to be also taking care of the children prop so I'll just uh provide like it should Render a button or it should render button with correct children text and here I'm going to pass my arrow function render my component and it's going to say like click or not click me but submit

would be fine because we are now testing like we can place anything to this button not just a click new or something like that okay so I'll just get my button by using a screen get by roll and pass my button inside there and here we have to pass our expectation Like button and that should have the text content of submit which we now passing as a content right here for this children check this out so here you can see all of our test are now successfully passing so this is how we are going to

be creating our component this is how we are going to be visually seeing that component the result of that component and this is how we are going to be writing a unit test forward component okay so that was a about the button Component now we are going to be creating yet another component for the accordion so I'm going to just uh go to my components folder and inside there we going to be defining yet another folder with the name of c r d i o n accordian and inside there we are going to be creating

three files the first one will be for the index. TSX and then the next file which we are going to be creating will be for the accordion. TSX and we're going to be also creating one more file For the accordian section so a c r e o n Accord in section. DX okay so now let's just start from the first one which is accordian okay so I'm going to start from the first one and then we are going to be taking care of the rest of them so what I'm going to do is that I'm

going to import my react JS and also the react node from where from the react JS okay so now let's just do the SMI file you would also need to import the CVA from the class variance Authority and we Would also need the tww merge from the tailin merge Okay so so next we have to Define our component by using the rafc and now this component will take a few props so it's going to take the children it's going to also take the variant v a r i n t and can also take the size

so we are going to be annotating there by using the accordian props and I'm going to copy a name of that and Define my interface right here so I'm going to just write like interface with the name Of accordian props it's going to take the children we have to annotate there with the react node which we are now importing and we should also provide the variant which will be totally optional and the default value we going to be providing like default and also the bordered bordered and also we going to be providing a size for

that and that's going to be totally optional we going to be setting there to either small or large size of accordian now let me just Save my file and that's to it about the component but now we have to specify our class variance authorities so I'll use that accordian style is going to be equals to the CVA and here we have to test like the base classes of space on the y axis will be set to two and we also have to specify our own class variance Authority object so inside that we going to be

testing our variant V NTS and inside this variance we have to specify a Specific variation for this component so I'll use like variant and here we have to specify the default and the default value will be set to background forly white and we're going to be also providing a border and the Border will be border and then border come on Border gray of 300 100 and also call rounded large this can be it for the variant we also have to specify the size and the size will be set to small and for the smaller size

we want to set the text to Totally small and also for the large size we want to set the text to be totally large and now underneath this size we are going to be also providing a default variance but it should be underneath this one okay so we have to provide our default variance and inside there let's just space the default value for the variant which will be set to a default and also we are going be passing a size and the size will be set to totally large then said about the Accordian style I'm

going to copy a name of the laps there now we have to go into our jsx and remove that from there and I'm going to only pass my children's right here which we're now taking as a props and here for the class names we're going to be providing our come on tww merge first of all and here we have to pass our accordian Styles and now we are going to be passing our variant and also the size which you're now taking is a props from this compound that's all done About the accordion next up we

have to go into what do we call it or accordion section component now let's just start working on there I'm going to go ahead and import the CVI from the class variance Authority I'm going to also import the reactjs and the react node if I can get there today oh we can so I'm going to have to write like uh react node and also we are going to be using the use St from where from the reactjs I'm going to save this file right now Push that to the top and now we also have to

import the tww merge from the Tailwind merge now we are going to be defining our uh component right here and our component will take a few props so we are going to be providing the children obviously and also we are going to be placing the title and the variant like so now let me annotate this component by using the accordian section n section props I'm going to Copy the name of there and create my interface right here with the name of accordian section uh props and inside there we have to pass our children and which

will be coming from the react node I'm going to also provide the title and title will be set to toly string we're going to be also providing a variant v a r i n this can be set to either a default value or a bordered value so now let me just save my file and I'm going to also make the variant totally Optional like if you want to provide there you can if you don't want to provide there you don't have to now we are going to be using the CVA or the class variance Authority

so that we can get over style so I'm going to use like con and then accordian section come on Section Styles can be equals to the CVA and P for the base classes we're going to be passing like pairing all around of four and here inside we have to pass our variance v a R i NTS and inside these variants we are going to be passing a specific variant and we are going to be also providing a default one so for the default we are going to be changing the background to toally gray of 100

and also we are going to be providing the bordered one so for the Border we are going to be providing like border of Border only for the bottom and Border color will be set to gray of 300 like so okay so now underneath I mean like underneath this One we're going to be also providing a default variance today and here we have to place our variant and the default will be set to default now let me just save my file and I'm going to also copy this name and collapse it right here I'm going to

go into my jsx and remove that from there and here inside this jsx we're going to be using the H2 and P my title inside there and also for the classes I'm going to specify a few classes like Flex and justify will be Set to like between also the cursor will be set to pointer and here we are going to be also passing like whenever somebody clicks on this accordian in this situation we're going to be fting this function which is a set is open and not is open like so and which we're going to

be creating in a few seconds you have to just bear with me and you know all this is create there right now I'm going to go there and here we have to first of all Define our state so I'll Use like is open and then set is open it's going to be equals to the use State and the initial value will be set to false semi file that's to done now we also want to wrap that with another D I'm going to cut that from there and I'm going to put that right here and inside

this div you can even change that to a section or something like that we're going to be using our TN merge so I'll use like tww merge and place my accordian section right here and here we Are going to be only taking those variants which we are now providing for our accordian section and we are going to be sending that to our accordian section Styles now finally we are going to be also providing a spin here and which will just render a few uh like icons so if our state is op so in this situation

you want to use this minus or Dash whatever you want to call that but if that's not the case we are going to be changing that to this plus icon of Course you can use the react icon libraries but in my case I'm not going to so if this is open and then you want to use this uh UI word here so I'm going to just render this UI which will be just a simple div and here we have to just pass our children inside there okay so I'm going to also P the class names

of pairing for the top of two and that's going to be it but if that's not the case we are not going to be showing nothing at all so this is how we are Going to be building our components so that's our accordian section component and that's our accordian component so now let's just combine both of them inside this index. TSX file so what I'm going to do is that I'm going to export default as the accordian section first of all from where from the this is go to the top from the accordion section and

we're going to be also exporting default as the accordion c r d i o n from where from let's just go into the accordian Component and save my file so this is how we are going to be creating our accordian component the next thing that we have to do is that we have to visually test there so that we can see there by using the story book okay so now let's create our accordian stories file so I'll just use like accordian stories. TSX and now let's just visually test our component so I'll just import react

Js from the react you would also need to import the type of meta and also Story object obj from where from the story book and then we want to get that from the Rea J you would also need to import our accordian component uh so that we can test we would also need the accordian section component so we are going to be also testing there okay so now we have to create our meta and now let me just annotate there with the meta and the type of accordion like so and I'm going to also close

there so inside there we are going to be first of all Providing the title and the title will be still going into the components folder and you want to pass our accordian there okay so here we have to just pass for a component and you want to test the accordian component a comma there and we are going to be also providing perimeters so for the layout uh layout you want to set there to centered and I'm going to save this file right now but it shouldn't be array it should be object like so I'm going

to Put a comma there and for the text we're going to be only passing this Auto a o t a GS auto tags or not auto tags but autod dos there we go and this is how we are going to be defining our meta but we are going to be also exporting there by using the same meta I'm going to also provide a type of story and going be equals to the story object and here we have to pass our type of meta and close there now it's time to Define our first story so what

I'm going to do is that I'm going to just write like cons default default like so and we're going to be annotating there by using the story provide our ARS inside there and use our children and for this children we are going to be providing our UI so first of all let me just provide my Rea fragments and I'll use like accordian section right here in this case and for this accordian section we are going to be providing some sort of a title today which will say like section one and here Inside this accordian section

we're going to be providing a paragraph which will say like content or come on four or just a four section one I'm going to also make as uppercase and now let me just duplicate and now let me just duplicate there a few times so I'm going to change that to two and I'm going to also change this one to two and change this one to three and also the paragraph to three now let me just save my file and we are already running there right Here so I'm going to have to quit that and use

my npm run story book once again uh and now we are getting our accordians right here so we have this accordian and we can also test this out right here so we have the Border one if you set that to default that's going to be the default look if you click on there so it's going to show us this content if you click on there once again so it's going to hide there and this is how our border component will look like this is How the smaller screen will look like and this is how the

larger will look like let me just set that to default and that's our default story right here uh no I'm going to just click on there and that's looking cool anyways so now let's just create a stories for the other ones I'm going to collapse them and I'm going to define a story for the Border one so I'll use like cons bordered and here let's just annotate with story this going to be equals to this object and Proide my arguments in side there Prov the variant and the variant will be set to border and here

let me just put a comma and children and here we are going to be passing or fragments or react fragments now let me call my accordian section component and it's going to take the title so I'll just pass like I don't know maybe section one or something like that we're going to be also passing our variants so I'll just set that to like border and inside there we're going to Be using a paragraph which will say like content content for section one come on section one I'm going to save this file right now duplicate there

a few times so this one will be a section two still border and also content for the section two content for the section three and content for the section three now let me just check this out so here you can see we now getting this border uh accordian component right here and you can totally customize there if you wanted to okay so That's our second story for the Border one now we're going to be creating another story for the smaller one so on small story and this going be equals to this object provide my arguments

inside there and the size will be set to totally small and here let's space our children inside there and inside these childrens we are going to be providing our fragments and I'm going to say like a cordian section and here I'm going to also paste the title of like section one Or something or what is HTML would be F like oh you know what section section one was fine I don't want to waste your time and here a space or paragraph which will say like content for the section for the section one and I'm going

to duplicate that a few times I guess one time would be fine and here let me just change that to two and two right here semi file and now if I check this out so these are going to be basically my small content but I'm going to also duplicate There once again change there to three and change this one to three as well so this is how the smaller will look like this is how the Border will look like and that's default one now we are going to be also taking care of the another story

which will be the last story and large story so we're going to be using like export con large and provide or annotate with the story not sory and here let's just SP our ARS inside there and for my size and the size will be set To large we're going to be also passing a children and for these children let's just space our react fragments and I'm going to say like a cordian section close the P my title inside then and I'm going to select section one inside this accordian section I'm going to place my paragraph

which will select content for section one and I'm going to also duplicate there like a few times so this one will be content for the section two and this one will be content for the Section three like so I'm going to save this file right now if I click on this large one so it's going to gives us this large one and these are the smaller ones right here but yeah that's totally correct so this is how we're going to be visually testing our accordian component next we have to write a unit test for our

accordian component okay so now let's write a unit test for our component so I'm going to go into the test components folder once again and Here we're going to be creating our accordion. test. TSX component or file rather and now we are going to be importing react from the reactjs we also have to import the render and also the screen fire event from where from the testing Library uh reactjs now let me just save this file we also have to import the accordian not the accordian plugin but a r di n accordion and the accordion

section so that we can test both of them Now we are going to be describing so let's just use there okay so we have to write there manually so accordian component that's going to be the message we also have to P our callback function today and here we are going to be using uh like it should or it renders accordian correctly or it should render a cordion it should uh render cians correctly now we're going to be passing our call back function today and here inside there we are going to be first of All using

our render method so let's just use the render and inside this render method we are going to be rendering our accordian component what am I doing today God damn it what the hell is wrong with me accordian there we go and now let me just close there so inside there we are going to be also proving accordion section and I'm going to also close that here we're going to be pasing the title in section one okay so for this section one let me just pass A paragraph which will say like content for section one and

now let me just save there or you know let me just make the lower case section one there we go now this is looking better now underneath that uh what do we have to do we have to provide our expectation so let me just use like screen. get by text and not test ID but get by text and we're going to be passing a section one we are going to be getting our item by using this section one and we want it to be in the Document and I'm going to execute now underneath we're going

to be using their expectation once again so let's just use the screen get by text and password content which is the same content I'm going to copy this entire thing from there now let me just place it right here and we want it to not to be in the document now let me just execute this and my file and I'm going to use like npm run uh test UI so it's going to run there and our test is failing I don't Know why but we have to figure this out it shouldn't be get by it

should be query by text so let's just use a text right here save my file and now our test are now successfully passing check this out let me just refresh there and uh where is that accordian component there we go I'm going to also collapse there so yeah this is totally working the way we expect him to work I'm going to hide there now we have to put yet another one and that's going to be the final one so It should uh come on it should toggle section content visibility v i s i b i

l i Ty y there we go and I'm going to also provide my callback function today use my render and here pass my accordian component close there past accordian section also close there like so and we're going to be passing the title so title and we are going to be providing like section one inside there let's space our paragraph content for section one I'm going to save this file Right now and now underneath we are going to be using our testing Library fire event and here let's just check like whenever somebody clicks on there in

that situation we are going to be first of all getting uh item by using get by text and past like section one we're going to be getting there then next that we have to do is that we have to provide our expectation for that which will be screen get by text and um we have to pass that content like Content for section one which is the same content so I'm going to have to copy that from there both of them are totally fine that's why it is now highlighting and we want there to be in

the document and now let me just execute there and now underneath there we are going to be providing yet another expectation so basically I'm going to just duplicate there and whenever we click on there once again so then we don't want that so then we want to hide There so like whenever we click on that for the first time we want to show that content but whenever we click on there for the second time then we want to hide there let me just test this out okay so this is uh query by text and now

let me just save that and here you can see all of our test are now successfully passing I'm going to expand that right here and yeah this test is also passing which is looking cool okay so that was there about the accordian component like this Is how we are going to be building there this is how we are going to be visually testing there and this is how we are going to be writing a unit test for there now let me just close there and now we are going to be creating yet another component which

will be for the card so I'm going to first of all create a new folder with name of card and inside there we are going to be creating three I mean like two files in this case so the first file will be for the card. TSX and the second file will be for the index. TSX okay so I'm going to go ahead and go to my card first of all and I'm going to use my rafc save this file and I'm going to go to the top and import the react from the react JS then

we also have to import the CVA from the class variance Authority and also the tww merge for from the telin merge now this component should accept a few props so we are going to be destructuring this it should accept the size the Shadow the Border children and also the class name or just a singular class name now we are going to be also annotating there by using our interface so that we don't get those error or those typescript errors so I'll just write like card promps I'm going to copy that from there and let's just

Define our interface with the name of card props and inside there let's just provide a size which will be totally optional like if you want to provide there you can but you don't have To so we going to be providing a small size or a medium size uh or the large size okay and now we are going to be also providing a shadow which will be also totally optional so either the shadow will be none or smaller or medium or come on or large so now let me just save that so that's going to be

it for the shadow we are going to be also providing a border which will be totally optional so either border none or border solid or border rounded like so and now Underneath that we also have to provide the children which will be coming from the react node okay so now let me just hit enter so it's going to also import this react node from the react J now underneath that we also have to provide the optional class names so class name which will be totally optional and this can be set to a string now let

me just save my file and that's going to be it for these props and now let's just use our class variance Authority I'm going To Define that right here by using a card Styles and can be equals to the CVA for the class variance Authority so pairing for the all around will be set to four only rounded large and background totally white and Shadow will be set to totally medium now we going to be also providing our object and here we have to place our variants and inside these variants we are going to be first

of all providing a size so sizes can be different sizes like small size let's Just write like small the size is small so we're going to be providing like width of 64 and also the height will be set to 48 let's just use our our 48 right here I'm going to also provide the medium and the medium will be set to width on 8 80 let me just use 80 and the height will be set to 60 but if that's not the case we are going to be also providing a large and the width will

be set to 96 and the height will be set to 72 like so now let me just save this File and now underneath the size we are going to be also providing a shadow and let's just use like if the shadow is none so we going to be using like Shadow none or if the shadow is small so we're going to be using like Shadow SM for the smaller Shadow or if the shadow is medium so in this situation we are going to be using like Shadow MD for the medium if the shadow is large

so we are going to be using Shadow large and now let me just provide my comma there now Underneath there we're going to be also providing a border uh yeah just a border like so and here let a space like if the border is none so we're going to be using like border none if the border is sonid so in that situation we are going to be using like it should be solid and border border gray of 300 and I'm going to also provide like rounded and rounded will be set to borderer two and borderer

gray of 300 and totally round rounded large now let me just save this file Right now and now underneath there we have to use our default variance and inside there I'm going to be providing a default size of medium and I'm going to also provide the shadow of totally medium and I'm going to also provide the border and the Border will be set to solid like so for the default variants that's to done now that we successfully write a code for our class variance Authority now we have to use that inside our jsx so I'm

going to just remove that From here and I'm going to render my children inside there and now I'm going to also use the tww merge for the T merge and here we're going to be passing our card Styles so it's going to take those props like size and also the Shadow and also the border and we are going to be also providing our class names to there okay so I'll just use like con merged class names this going to be equals to this tww and it should be just a class name singular and now I'm

going to copy the name of the go to my class names and here we're going to to be providing our class names remove there and paste my merge class names and that's going to be here now let me just save my file and this is how we are going to be creating or uh card component and this is not going to be the most beautiful looking card component but yeah if you want to change the styling of there you to you can but you don't have to now let me go ahead And go to my

index.ts TSX file and I'm going to be exporting there by using default from the card component now let's just use a card and I also forgot to export the right here inside you know let me just uncollapse all of them I'm going to go into my components folder and inside that we have our index.ts file so now we are going to be exporting default as card from where from let's just go to the card H it should be from there we go And now if I hold control and click on this it's going to brings

us to this card component right here which is looking cool and this is how we are going to be building our card component so now let's just create a story for this card comp component so now I'm going to go into the stories folder and inside there we are going to be creating a new file with the name of card. stories. TSX and now let's just start working on our stories baby so we have To import react from the react just we also have to import those types because we are going to be using that

so we have to import The Meta and also the story object from where from the story book from the react just story book and we also have to import that card so that we can test that so let's just use that card I'm going to save this file right now now we are going to be creating our meta so I'll just use like meta and I'm going to also annotate that meta with This type of card close there and here inside we going to be placing our title which will be a components and then card

component which we are now creating right here now we going to be passing our component and here let's just space our card right here and now we are going to be also providing a perimeters so that we can test that I'm going to use like layout and we want it to be totally Cent third and now we have to use the tags and for these tags we are going to Be providing the auto docs so automatically generate a documentation for our component now we are going to be exporting default that meta so that we can

use that in other file and now it's time to Define our story so I'll use like story and going to be equals to the story object and now we going to be placing a type of meta and close there now we going to be also using like export cons small and story going to be equals to this object provide my arcs or Arguments inside there and I'm going to provide the size and the size will be set to small I'm going to also provide the Shadow and Shad will be set to medium and also for

the Border what the hell am I doing the Border will be set to totally solid and we are going to be also passing a children which will be set to this div and which will say like small come on small card content or something like that now let me just save this file I'm Going to open yet and another terminal and now I'm going to be using npm run story book to see their interaction and this is our card component now let me just click on there so now we are getting a card with a

lot of variations so if I click on the medium so it's going to give us the medium one if I click on the large so it's going to gives us a large so if I click on the nun so it's going to remove those shadows I'm going to make there as a Small and provide a bit of Shadow today you can see there right now and here you can see this is how it's going to look like for the medium Shadow and this is how the large shadow will look like and that was a rounded

card we can also set that To None we can also set that to like totally rounded one or solid one and we can provide like our own children for this content as well and we can also provide our own custom classes if you wanted to so that was the first story Now we are going to be defining a few more stories so now to need let's just use like export cons medium and Define my story inside there for the arguments uh we are going to be providing a size size and provide my medium size in

there I'm going to also provide the Shadow and the shadow will be set to large for the Border we're going to be setting their to toally rounded and I'm going to also provide the children and children will Be just a d which will select medium uh card content or something like that let's just sa our file click on the medium so this is how it's going to look like I'm going to close this so that's the smaller one and that's the medium one now let me Define a few more stories so I'll just use like

uh export cons lar story it's going to be set to story and inside there we going to be providing the arguments so it's going to take the size Of totally large because we are now building a large story The Shadow will be set to totally medium the Border will be also set to totally none and I'm going to also provide the children and the children come on children will be set to D it's going to say like large hard content right here semi file if I click on the large so this is how my large

card will look like now we going to be creating yet another story for no border so I'll use like export cons no Border and it's going to take a story and here inside they provide the arguments and I'll just use like size and the size will be set to medium and I'm going to also provide the Shadow and the shadow will be set to medium I'm going to provide the border and set that to none and the children will be set to D no border come on Border card found or something like that so now

let me just click on the border and here you can see it will not include any borders if I Click on the medium so it has this border if I click on the no border so it's not going to include any border okay that was a lot of things that I just explained but now I'm going to also show you like we can also specify more custom content to our uh card component so now let me just show you there so I'll use like export Cons with custom content and it's going to take a story

inside there we're going to be placing the arguments and let's just use the Size and for this size we going to be setting there to medium and I'm going to also provide the Shadow and the shadow will be set to totally large and for the Border we're going to be setting that to totally solid I'm going to also provide these childrens and let's just test this out so we can just provide a d and inside this D I'm going to also specify like H2 and I'm going to say like card title or something like that

I'm going to use the class name like f will be set To semi bold semi Bold and the text will be set to totally large and we are going to be using a paragraph which will say like some content come on content inside the card period I'm going to also provide the class names of text only small sem my file now let me just refresh there click on the custom card and yep we can totally provide that we can even also specify some more content like lauram of something and here you can see this is

how my card will look Like so yeah there was it about the card component and this is how we going to be writing a story for there but next we're going to be writing a unit test for work card component I want you to bear with me for a second because we are now about to write a lot of unit test case so I'm going to go into this components folder which is now available inside the test and we're going to be creating yet another file for the card. test. TSX and now inside there let's

get into it baby We're going to be importing Rees from the react we would also need to import the render and also the screen from where from the testing line Library uh reactjs underneath we're going to be also importing the card component save this file and we are going to be using a describe for there and let's just describe the right here so like card component and remove that second from there save this file go in there now we are going to be using like it okay so It's not importing so it uh should come

on it should render with default renders would be fine so it renders with default props and here we are going to be passing our Arrow function and use our render method right here P our card and default card right here underneath we are going to be getting there right now so I'll just use like screen get by text we are now going to be getting our item by using this Rex right here if you guys don't know what a Rex is you don't even Have to worry about that but basically we're now searching for this

default card content right here okay so we we don't care if that's upper case or lower case but if you found this content gives us there and now we're going to be storing the inside the const card element and it's going to be equals to the screen now we are going to be providing our expectation like card element and we want it to be in the document and also let's another Expectation for the card element once again and we want to have the class names and let's just proide the width and the width will be

set to 80 and the height will be set to 60 uh and also I'm going to provide expectation once again for the card element and I'm going to select to have the class names of shadow of medium I'm going to also provide here another expectation for the card element card element and we will select to have the Class names and Border gray of 300 like so now let me just save my file paste this out so let's just go there here you can see we have our card test and which is now successfully passing and

everything is working the way we expect him to work so I'm going to hide there now let me just write another unit test so I'll use like it applies large size class now we are going to be also testing the large uh size class so we would have to render our card component First of all so I'll use like card component and I'm going to say like large card and here we're going to be also providing a size of large today and now underneath we're going to be getting this so I'll use like screen. get

by text and I'll just provide like large card and provide my I right there okay so we going to be using like card element it's going to be equals to this screen object so now let's just provide our expectation like card element and Here we want that to have the class names of with will be now set to like 96 and height will be also set to 72 7 to2 there we go now let's just save our file and check this out so here you can see this test is also passing let's just duplicate the

right here and now we're going to be changing like applies uh I'm going to change this to like applies no Shadow when Shadow is none okay so we're not going to be providing any Shadow today and in this situation We're going to be removing there and proide My Shadow and Shadow will be set to none and I'm going to also change that like no Shadow copy there from there place it right here and we want that to have the class names of Shadow oh my God Shadow none cuz we don't want to provide any Shadows

when the shadow is set to none check this out test is passing cool I'm going to hide this one hide that one and now you need this it we're going to be also duplicating there Once again so I'm going to just duplicate them and change the message of there to like applies large shadow in this case so I'm going to change it to like apply large Shadow when Shadow is LG or the large one and it should be Shadow there we go inside there we are going to be changing that to like LG and this

should apply the large Shadow Card I'm going to copy the content of there and place it right here and this one should have the shadow of totally large I'm going to save this file right now and here you can see our test is now successfully passing so I'm going to have to collapse the other one and these test are now successfully passing and what about if we don't specify any borders today so I'm going to duplicate there and now let's just take care of there so here we we going to be saying like applies no

border when border is set to none okay so in this case we are going to be just removing there and Proide my border and Border will be set to none and I going to just say like no border card or something like there I'm going to copy the content up there and place it right here and here let's just change that to like border none I'm going to save this file right now okay so it is failing I don't know why but it is oh that's because it's not a shadow it's a border and now

let me just test this out once again and here you can see it is now successfully passing I'm going To hide there and duplicate there one more time and now we are going to be checking for the rounded border so like applies rounded border when border is uh rounded okay and here let's just past it right here uh I'm going to just change there to like border rounded and change this one to rounded border card there we go and here we're going to be also changing that to like rounded border card so I'm going to

write like rounded border and let's just also Change these class names uh to like border 2 border gray of 300 and round it toward LG for the large border and test this out so here you can see all of our tests are now successfully passing and that's only done I'm going to once again duplicate there and now we are going to be checking for the custom class names like can we even provide a custom class names or not so I'll just write like applies additional a t d i t i o n a l additional

custom class name okay so I'll have to change that to uh the class names like can we want provide a custom class names or not so I'll just write like custom class and change that to like I don't know maybe uh custom class card or something like that I'm going to copy that from there and now let me just replace it with this new content here we are going to be so changing this video to custom uh class right here now let me just save my file and here you can see our test is passing

which means like we Can also apply our custom styling for our card I'm going to duplicate that one more time and now we are going to be checking like can we want also provide our own children or not so I'll just write like it should render uh children corly or bruis Le whatever you want to call so I'm to just remove the and change there to like card and here we are going to be passing like a d and child content or something like that and I'm going to save this file right now And here

we're going to be searching for the child content so child oh my God child so we are going to be searching for a child content God damn it we are not going to be searching for a child content but we are going to be searching for the child element content so let's space for child content uh and it should also be a child content right here I'm going to copy there and place there and we want that to be in the document and execute it and Here you can see it should also renders the children's

correctly like so which is looking cool and now we are going to be writing the final test so that's going to be a lot of fun use the it once again and it applies correct combination of size shadow uh and Border props okay so here we're going to be providing a correct one so that's going to be basically the last uh what we call it the last unit test so now let's just use our render test our card inside There and I'm going to say like combine combined props card and here we are going to

be using like size and size will be set to large you would also provide the Shadow and the shadow will be set to SM for the smaller one this is PR where border and Border will be set to totally Sol so now we are testing like can we even provide all of them at once or not so let me just get the I'll use like screen get by text and P my Combined uh it should be combined and close the provide I combined props card right here okay I'm going to also store the inside the

card element it's going to be equals to this uh get by screen content my expectation right here the card element and we want it to have the class name not value but to have the class names of with will be set to 96 and the height will be set to 72 and now underneath I'm going to just duplicate it like three times and here we're going To be providing like Shadow will be set to totally small and we are going to be also providing a border of totally gray come on Gray 300 like so I'm

going to save this file right now and that was it about forward component oh I forgot to show you this one so now let me just refresh there and here you can see all of our test are now successfully passing and everything is working the way we expect them to work and this is how we are going to be creating our card Component this is how we are going to be exporting there this is how we are going to be visually writing a stories for our components and this is how we are going to be

testing our component all right so now it's time to build another component which will be a DAT picker component so I'll just go ahead and uh write a date picker there we go and now inside there we're going to be creating two files the first one will be for the index. TSX and the second one will Be that picker. TSX so now let's get into the first one so what I'm going to do I'm going to import reactjs from the react and also we would need to import the CVA from the component or class variance

Authority you would also need to import the tww merge from the Tailwind merge and now let's just use our component like so this component will take a few props so we are going to be providing a size color and select ected see e l e c selected dat and also The on change event handler now we are going to be also creating an interface for there which will be a de picker promps I'm going to copy a name of there and here let's just Define our interface which will be our de picker promps and I'm

going to P the size which will be totally optional and the sizes can be like small size or medium size or uh large size or extra large size like so okay we are going to be also providing a color which will be also totally Optional and the color can be either primary color or a secondary color or a danger color okay we we are going to be also providing the selected dat and that's going to be set to a string and also when somebody change the so on change event handler we are going to be

fing this function which will take a DAT as a perimeter and that's going to be a string and we are going to be returning a white from there so I'll just use like white like so now let me just save my File now let me just go to the top and here let's just Define our class variance Authority so I'll use like that picker Styles uh going to be equals to CVA and let's just provide our Base Class like the class will be set to relative block with will be set to totally full text totally

gray of 700 uh 700 like so border and rounded totally large Focus state will be set to outline and none on the focus State the ring will be set to two and on the focus St once again F cus on the Focus ST once again we are going to be providing a ring of blue 400 that's to done we are going to be also providing our optional object and here inside there let's space our variant so v r i ns and for each variance we are going to be providing a size and for this size

let's just provide like a few sizes like small medium large and so on and so forth so for the smaller size the padding on the y- axis will be set to one pading on the Xaxis will be set to two text will be set to ho is small uh and on the medium screen size we are going to be providing pairing for the y axis of two pairing for the xaxis of three and text will be set to totally B and I'm going to also provide the large one so for the large screen size pairing

on the y axis will be set to three pairing for the x-axis will be set to four text will be set to totally large for the extra large screen pairing on the y axis will be set to Four pairing for the x-axis will be set to five text will be set to extra large now let me just save my file and now want to need these sizes we going to be providing a color and the color will be set to primary for the primary color order will be set to Blue 500 I'm going to also

provide a secondary and the secondary color will be um we have to provide a comma there and the secondary color will be border green 500 and I'm going to also provide the danger one so For the danger border will be set to totally red of 500 now let me just save this file right now so that's going to be it for our variants now let me also provide a default variance like the default value for each variant so I'll just provide a size and size will be set to medium I'm going to also provide the

color and color will be set to primary save this file and now our de picker styling are totally done I'm going to collapse it right here now let me go Ahead and go to my component I'm going to just remove that from there and here inside the you know let me just WR like the class name of relative and inside this D we're going to be providing our input field which will take the type of uh date because we are now building a date picker and now we are going to be providing a value and

value will be coming from the date which we are going to be defining in a few seconds and when somebody try to change that then we want To fire this function which is a handle change and we are going to be also building there in a few second now for the class names we are going to be using our tail merge so let's just use like tww merge and we are going to be ping our uh dead picker Styles which we just defined a few seconds ago and here we are going to be destructuring the

size like we are going to be providing the size and the color now let me just save there and this size and color is now Coming from this prop right here and now let me just take care of this date and also this handle change I'm going to go to the top right here and here we're going to be defining our dat so con dat and then set dat it's going to be equals to the used St and the initial value will be set to selected dat which we are now taking as a perimeter right

here and now let me copy the name of uh this handle change and Define this function right here so I'm going to go ahead and Just Define like uh handle change function it's going to take the event and now we are going to be annotating the as a react change event and let's just annotate with the HTML input element because we are going to be using the on the HTML input element okay so now inside the we are going to be getting like event. target. value and now let's just store that inside the new D

it's going to be equals to this event. target. value and here let me just use Like set date and new date and also when somebody try to change this we are going to be passing like a new date right here in this case now let me just save my file and that was it about how we are going to be building our date picker component but now let's test it by using the story book and also the v test oh and I also forgot to go into this index. TSX and I'm going to be using

like export and then default from where from the dead picker which is a dead p i k r And now let me just save my file if I hold control and click on there it's going to brings us to this component which means like everything is working the way we expect them to work now let me just go into the stories and create a new story right here so I'll just give it the name of like that picker. stories. TSX and here we are going to be first of all importing the react from the react

JS we also have to import the type and we are going to be getting the Meta and and story object from where from the testing Library not testing library but from the story book and then reactjs there we go and we would also need to import the dead picker component so that we can see there I'm going to Define my meta right here so let's just use the meta and I'm going to annotate there with this meta and the type of will be set to De picker and close there like so and it's going to

be equals to this object provide my title inside There and provide like components uh components and then dead picker like so I'm going to also provide the component right here it should be equals to A de picker p i c k e r for the perimeters we are going to be providing like the layout and once again we are going to be making the as a tottally centered and I'm going to also provide the text and the text will be set to uh Auto dos now let me just sa my file go to NE there

and I'm going to export there right here So export default of meta and that's going to be fine now let me also Define my story so I'll use like s o r y and then story object and provide my type of meta and close there like so now let me use export cons default and here we have to pass our story inside there and I'm going to provide like arguments and for each arguments we're going to be providing a selected date and I'll just provide like some random date like 2025 third month and the first

date or Something like that and whenever somebody change this in this situation we are going to be using like date and uh we are going to be passing this function which will be taking a date as a perimeter and uh we are going to be just logging to the console that specific dat right here so now let's just say our file we are already running our story book but we have to stop there and rerun there now let me go ahead and just refresh there and here you can see We are now getting our de

picker and yep it is is looking cool so we can change there to like a medium one we can change that to large we can change that to extra large or small okay we can change the color of there to like primary which is the default color we can also change that to the secondary and also to the danger color cool so everything is working the way we exp him to work now we have to write a few more stories for there I guess I'm going to be just Writing like two stories so I'll just

go ahead and Define like export Cons with custom come on with custom size so like can we even provide our own custom size or not yes of course we can okay so now let's just provide like arguments and use the selected dat and here uh I'm going to set that to like 2025 and the third month of 2025 uh I'm going to use like 03 and the first date of 20 um 25 on change event handler and we're going to be writing Like uh de come on inate as a string and once again we are

going to be logging to the console dat I'm going to also provide the size right here so for the size uh we are going to be providing a small size and now if I click on there here you can see we are now getting our small size de picker which is also looking cool okay that's to done now let me provide the final story so which will be for the withd custom color and we are going to be Using a story this going to be equals to this object so for the arguments uh let's just

use the selected dent and provide like 20 25 and 03 for the month and 01 for the date on change Handler is going to take the date and return a string to us now we are going to be only logging to the console dat date and I'm going to also provide the color and the color will be set to secondary but I'm going to have to provide my comma there this is how we are going to be providing A color and yep our de picker is working the way we expect him to work so this

is how we going to be writing a custom stories forward de picker but we are going to be also testing there by using the react testing library and v test time to write a unit test for our component so I'm going to go there and create a new file with the name of De picker. test. TSX and inside there the first thing that we have to do is that we have to grab the react from the Reactjs then we have to import uh render screen fire event from where from the a testing Library react GS

now we would also need our component like a DAT picker component and that's all now let's just describe or test speed so describe and I'm going to select dat picker component or something like that now I'm going to go there let's just put our first test speet like it should render correctly with initial de i n Initial D there we go and I'm going to Be passing my arrow functions to there just pass a arrow function and inside this Arrow function we are going to be getting a handle change function so I'll use like handle

change and going be equals to this VI and then if I hit enter so it's going to import it right here it is not so I'm going to have to do that manually so I'll just import the vi from where from the v test okay so now let me just sa my file vi. FN for the function and now underneath we are Going to be rendering our function or component like dat picker component and I'm going to close there like this and we are going to be also providing a selected date today so I'll just

SP like 2025 and third month and the first date like 01 like so and we are going to be also passing the own change event handler today so let's just pass it right here so thenly done now we are going to be getting our input field by using screen get by display video and We're going to be ping like 2025 01 and then 0 not one but 0 3 and one I'm going to store the inside the inputs variable like so and I'm going to provide my expectation like input and we want it to be

in the document and I'm going to execute it right here uh it should be just a input so now let me save my file and our test are successfully passing and this is how it looks like so I'm going to collapse there now let me go to the de picker and all of the tests are Now successfully passing and which means like everything is working the way we expect them to work and now NE let's just write a last site for this so like it should call the on change when the de is selected selected

like so and we are going to be passing our aror function today first of all we have to mock our function so I'll just use like handle change it's going to be equals to like VI and then FN and now we have to render our component which will be a dead Picker component and I'm going to close it like so I'm going to be passing like the selected date and here let me just P the selected date like 2025 and the third month and the first date and when somebody change this we are going to

be fighting like handle change function right here now underneath there first of all we have to get our input field so I'm going to be using like screen H by display value and I'm going to past like 202 25 and 03 and Then 01 for the day now I'll just store the inside the input once again semi file and now we are going to be using that fire event okay so whenever somebody try to type something inside this input field so in this situation we are going to be getting the Target and now we're going

to be providing a value to that and that value will be like 2025 and then 03 and then zero I'm going to change there to like two or you note I'm going to change this one to like maybe Four month in this case and let's space for expectation like handle change and we want it to have been called with uh this one like 2025 04 and then D2 okay now let me just save my file and this is not the correct one to have um been called with function are we one getting there yeah uh

not this one called oh that's fine so now let me just save my file now let me refresh there so here you can see all of our test are now successfully passing And our component is working the way it should be working and there was our dat picker component we're going to be building uh what do we call it the input component right now so I'm going to create a new folder with the name of input and inside that we're going to be creating our index. TSX and also our input. TSX okay so now inside

this input. TSX file uh we have to create our component so I'm going to import react from the react JS you would also need to Import the CV from the class variance Authority you would also need to import the tww merge from the T merge and now I'm going to be using my RFC to create my input component so here we're going to be also providing the variant as a prop size as a prop disabled as a prop and class name as a prop and now let's just spread out the rest of them okay so

we are going to be also providing the input props so now let me copy the name of the and create that specific Interface right here with the name of input props and we are going to be placing a variance but before we do that first all we are going to be extending there I forgot to do this so we will use like extend and it will be extending from the omit then from the re. input HTML attribute so not this one from the react JS and then input HTML attributes and now let me just specifically

provide my HTML input element right here because we are going to be using the on the HTML Element attribute now let me provide my comma and provide my size there and close there like so okay so now if I save there this is how it's going to look like right now so now we are going to be providing our variant uh v a r i a n t this going to be totally optional and we going to be providing the primary variant the secondary variant and also the error variant right here next up we also

have to provide the size so size will be also totally optional so we can Either provide like small size or we can provide the medium size or we can provide the large size like so you can also put the disable d a LED and for the disable which will be also totally um optional so we have to provide like Boolean value to there so now this is how we are going to be annotating our component but now let's use our class variance Authority I'm going to go to the top and here we're going to be

providing a Bas classes for our class Variance Authority I'm going to give it the name of like input style or Styles rather and CVA for class variance Authority and pairing for the xaxis will be set to four pairing for the y axis will be set to two order and totally rounded and for the Focus ST the outline will be set to totally none I'm going to also provide this object right here for the variants um it's going to be set to this variant v a r i n t and let's just provide a few different

variants to our Component so we can put the variant of primary which will look something like this like border will be set to totally blue of 500 T will be set to totally blue of 500 and Focus ST will be set to a ring blue of 500 so it should be Focus f is like so and this going to be it for the primary this is quite the same secondary variant so it will look something like this so border uh will be set to gray 500 and text will be set to gray of 500 once

again and for the focus State ring will be set to gray of 500 like so I'm going to provide this comma there I'm going to also provide a comma right here and we are going to be also providing an error state so for the error state border will be set to to rate of 500 and text will be set to Red of 500 as well on the Focus ST the ring value will be set to red 500 and there we go that was our variance but now we are going to be specifying the sizes so

for each size uh let's just start from The small one we're going to be providing like text of to small uh we going to be also providing a medium size so medium size will be Tex of to Bass and I'm going to also provide the large size and which will be Tex of to LG for the large one okay now we are going to be also providing a disabled state so d i s a b l e d and I'm going to set that to true so when this is true in this situation we are

going to be using background gray of 200 x will be set to Gray of 500 and cursor CR s o will be set to not allowed like so now let me just save this file right now and now underneath it we going to be providing a default value for our variants so I'll just write like default value for this specific variant it's going to be set to primary we're going to be also providing a default value for the size which will be set to medium and we are going to be also providing a default value

for the disabled which will be set to false now Let me just save my file and I'm going to copy there collapse it right here I'm going to also collapse there and now let me go ahead and use it right here but before we do that we're going to have to use our tww merge like tailin merge and we're going to be passing like input styles and now here we're going to be placing our props like the variant and so on and so forth so I'm going to copy the variant place there we're going to

be also providing the size so I'm going To copy there and place it right here write a comma there and finally we are going to be also providing the this disabled one and provide there right here now outside from there we're going to be also providing a class names and we are going to be storing there inside some sort of variable like uh merge class names or something like that now let me just s my file and that's already done I'm going to copy these class names variable and now we have to use the Inside

our GSX so I'm going to just remove there and provide my input feed and close there and now we are going to be spreading out the props you will also need to provide the class name names and provide my U merge class names and for the disable we are going to be also providing that disable prop now let me just save my file and this is how we are going to be creating our component by using the class variance Authority by using typescript and also they will Merge and reactjs now let me go ahead and

go to my index do not this one but my index. TSX file which is inside this input dot which is inside this input folder not DOT so I'm going to just export default uh default from where from let's just go into the input folder now let me just save my file and that's done I'm going to also go into this index.ts file not this one you know let me just collapse there go to the SRC folder then I'm going to go to the Components folder then I'm going to go to this index.ts file and here

we also have to export there so we are going to be exporting default as uh is De picker which we also forgot so let's just go ahead and go to the dead picker component and we are going to be so importing not importing but exporting default um come on d e f a l t default is a input component from where from our input component folder so now let me just save my file and that's done so now Let me close there and now we are going to be going into the stories folder and create

a story for our input component so I'll use like input. stories. TSX and let's get into it baby let's get into it so the first thing that we have to do is that we have to import react from the react J would also need to import the type of meta come on meta and story object from where from the test not why am I saying testing all the time we should be getting there from the story Book Rea J and we will also need our input component so that we can work with there but we

are not going to be importing there from there we are going to be importing there from our components folder and then we have our input component like so now let me go ahead and provide my meta and I'm going to also use my meta type and the type of will be set to input so now inside there we're going to be passing our title and title will be set to components and then Input component I'm going to also provide my component right here and that will be equals to this input field or that input component

which we just defined and also the perimeters we're going to be setting that to the layout and layout will be set to centered like so I'm going to also provide the tags and for each tags we want there to gives us like automatically generated Docs all just use like autod dos save this file and now underneath there we have to just Export there like so now we are going to be creating our type so type will be set to story and it's going to be set to story object and I'm going to provide like type

of meta and close it like this now we are going to be creating our first story which will be a primary and now let's just annotate with the story and inside there we're going to be passing our arguments and provide my variant and variant will be set to primary I'm going to also provide the Size so the size will be set to medium and I'm going to also provide the placeholder for my component like primary input I guess that can be fine so now let me just save my file go into my story book and

everything is working and now let me go there and refresh there here you can see we are now getting our input components now if I click on there so we are now getting different colors like this can be set for a primary color secondary color and Error color we can also get the smaller screen size the medium one and and also the large one we can also change the content to be something else or something like that and we can also make there disable so like whenever we have over there we would not be able

to type something inside this input field so now let me just change that back to the smaller one and primary component like so and that was our first story and now let me Define a few more stories so I'm Going to go ahead and just export my con secondary s e c o n d a r y and and provide my story there and inside there we're going to be passing our arguments and let's just use like variant and variant will be set to secondary and for the size that's going to be set to medium

and I'm going to also provide the placeholder and placeholder will be set to secondary input like so I'm going to save this file right now go into the secondary component and here you can see The color is now totally changed I'm going to also Define a few more stories so I'll just go ahead and Export cons small story and this going to be set to the story and inside there let's just pass our arguments and I'm going to be passing the variant and variant will be set to primary I'm going to also put the size

and the size will be set to small in this case and also the placeholder will say like small input field or something like that and now let me just Go ahead and click on the small one and now it's going to gives us a small input field right here which is looking cool now I'm going to be generating the large input field so I'm going to go ahead and write my export cons and large infut large and provide the story right here and that's going to be set to the arcs and inside this arcs we

are going to be placing a variant which will be set to a primary I'm going to be also placing a size and size will be set to large and The placeholder will be set to large input right here so now let's just sa our file and if I click on this now it's going to gives us a bit large input field right here which is also looking cool now the final story that we have to write will be for the disabled one so I'll just use like export cons disable and P my story right here

I'm going to be passing my arcs and inside these arcs this's is sp the variant and variant will be set to primary the size will Also be set to medium and I'm going to also provide the disable and set that to true I'm going to be faing a placeholder in which will select disabled uh input field like so now let me just save my file click on there and that was it about our stories about our input field so next we're going to be writing a unit test for our component time to write a unit

test for our component so I'm going to go into my test folder then components folder then I'm going to Create a new file with the name of input. test. TSX and now here first of all let's just remove this one and also that one now we're going to be importing reactjs from the react you would also need to import the render function and also the screen from where from the testing library and then react G we would also need to import or input component so that we can test that but not from the lib what

the hell is there we have to go into the components folder God damn it and then we have to go into now we have to go to the components folder and now we are going to be getting there from the input there we go now let's just Define our describe and for this describe we are going to be passing like input component and let's just pass input component and password AR function inside there so first of all let's just write a first Suite like it should render correctly and then uh we are going to be

pring our Arrow function So now let me just render my input component and now let me just close it like this I'm going to be also passing a placeholder which will select test uh input like so now let me just save my file right now then we are going to be selecting that component by using get by placeholder text and then we're going to be passing like text input right here and we are going to be selecting that component by using that placeholder text and now we going to be also providing an Input element it's

going to be set to this value and now underneath it let's just provide our expectation like for the input element we want it to be in the document let's just sa our file and let's just see all of our test are not successfully passing and I'm going to go into the v test refresh there and collapse this component uncollapse that yep our test is now successfully passing and which is is looking cool now we're going to be providing another test Suite Like it should apply the primary come on primary variant by default uh like so

and here we have to pass our uh Arrow function right here and I'm going to just render my component by passing my input field then we are going to be passing some sort of a placeholder like primary variant uh in lower case variant and now underneath there I'm going to get there by using screen. get by placeholder value let's holder not value but text and let's space our primary Variant inside there now we're going to be storing the inside the input element and it's going to be equals to this value let me past my expectation

and I'm going to past my input element and we want there to have the class name of Border totally blue of 500 I'm going to duplicate that three times and then I'm going to change that to like uh blue then the text to be blue of 500 and on the focus let's just remove them what the hell am I doing let's just remove Them and for the focus T we're going to be passing ring of 500 blue and now let me just remove there check this out so yeah all four test are now successfully passing

and by default it will provide that primary um variant to there so I'm going to collapse it right here and now we are going to be providing another test suite for the secondary so it should apply the secondary variant b a r i a n t when specified and and here let's just pass our Arrow function pass Our render prop and it will F right here close there and for the placeholder we will select secondary variant I'm going to be also placing my variant of secondary right here s s n d a r y secondary

variant and now need there we going to be getting that specific element by using uh get placeholder text and let's space our secondary variant right here like this and now we are going to be storing the inside the input element and it's going to look something Like this now underneath we have to provide our expectation for our input element and we want that to have the class names or P toally gray of 500 I'm going to duplicate there a few times and I'm going to change this one to text of 500 text of gray 500

and this one will be for the focus one so for the focus we want to put the ring of gray 500 and let's just remove them check this out all of our test are now successfully Passing and yep here as well we are now at the 23 test cases cool that was a lot and now underneath there we have to provide yet another test suet like it should apply the error variant V an when specified like so and here we are going to be passing our callback function render our component by using this input close

there and pass or placeholder which will say like uh error variant here we're going to be also placing a variant of error like so let me just sa My file and underneath there we are going to be using a screen get by placeholder text and I'm going to say like error uh variant and now we have to store the inside the input element variable like this underneath that we are going to be placing our expectation like input element and then we wanted to have the class names have the class names of border to R because

this is a error variant and now this going to be set to 500 I'm going to duplicate there Two more time in this one will be set to text off rate 500 and this one will be for the focus state so Focus ring rate 500 check this out refresh there and our test is now successfully passing and that's because our code is working the way it should be working now underneath there we are going to be providing another test case for the smaller input field so I'll just write like uh it should apply the small

size when specified when we specify a smaller SC Size so it should just render that smaller input field okay so I'm going to be providing a placeholder which will say like small size or something like that I'm going to be also providing a size right here and the size will be set to small and now underneath them we are going to be getting by using screen get by placeholder and place our small size like so and then we're going to be getting our input element by using that placeholder text so now underneath them Provide our

expectation and we want the input element to have at least this class so to have class text of tot is small let's just say our file test this out yep our test is now successfully working now let me just uh duplicate there for the medium size so I'm going to duplicate there and change there to like it should apply the medium size m e d i u m and I'm going to also change there to like medium and change this one to medium I'm going to also change there To like medium and here we're going

to be also changing the text to be B T our file and yeah our test is now successfully passing now let me do the same thing for the large screen size so now let me just duplicate there oh my God if I can get there today so now let me just duplicate there one time and should apply this medium so instead of a medium we going to be changing there to large size okay so large size and this one should be large size as well and This one will be large size as well change that

to large and here for the text we're going to be changing there to LG and now here you can see it is also passing now let me duplicate that for the disabled state so I'm going to duplicate there and it should apply or not apply I'm going to just remove there it should be disabled when the disabled prop is passed like so and here we're going to be passing a disabled input disabled input and I'm going to also Change this you know we are not going to be providing any size today but instead I'm going

to pass a disable right right here okay so here I'm going to just write like uh disabled input and let's just remove them what do I provide a new expectation and provide our input element inside there and we want it to be disabled and I'm going to execute there right here and here you can see it should also take the disabled State as well that's to done and we should also Check like it should not be disabled by default so you know let me just write another test case for there I'm going to go ahead

and just write like it should not be disabled by default and here let's just space our Arrow function my render function and input field like so and then we're going to be placing a placeholder of enabled input and I'm going to use like screen. head by placeholder uh then password enable text right here and I'm going to be using Cons input element and it's going to be equals to the screen of that input element now let me just P my expectation of input element and we want it to not be disable disable there we go

and now let me just save my file okay so we are now getting that one as a error and why is that because it should be enabled now let's just passord Ed and now let me just refresh still it is not working oh that's because it should be input not text and now it is working Successfully now let me write the final test case and that's going to be it for this input test or input component so I'll just write like it should merge custom class name um correctly because we also made this so that

the user can also specify their own classes if they want to so I'll just use like input close then now let me just P my placeholder which will say like custom class in lowercase class there we go and I'm going to be also providing a Custom classes like custom class or something like there and I'm going to also use like let me just get the from the screen get by placeholder and let's space or custom uh class right here I'm going to store that inside the um input element and it's going to be equals to

the screen of placeholder now let me just place my expectation of input element and we want there to have the class of custom class like so I'm going to save this file right now and here you Can see you should also take a custom classes okay that was a lot of typing in a lot of speaking so now that we successfully created the input component uh where is the we successfully created the input component then we write a story for our input component then we provided a test cases for our input component okay so now

we are going to be building a bit tricky component so which will be a pagination component so I'm going to go ahead and go to the Components folder I'm going to create a new folder with the name of p a i n a o n pagination inside the imagination. TSX and also input uh not input but index. TSX right here I'm going to close the index one and now let's get into the pagination component so I'm going to go ahead and just import the react from the re we would also need the CVA component and

also the tww merge from the tailin merge now let me use my RFC inside there and it's going to take a few props so Now let me just destructure this so it's going to take the current page it's going to also take the total page or pages and yeah it's going to also take the on page change like whenever the page change changes it's going to also take the size the variant and also the disabled as well now we going to be also inating there by using the pation props I'm going to copy the name

of there and Define this interface right here I'm going to just go ahead and Define this Interface and inside there let's just space the current Uh current page and the current page will be set to a number we are going to be also placing a total Pages this going be also set to a number we're going to be also placing like on page change like whenever the page changes so we're going to be placing a function which will take a page as a perimeter this going to be also a number and we should return the

wide like nothing from there so size will be Totally optional but we are going to be providing like small screen size or medium screen size or large screen size okay we can also specify the variants so variant will be set to default and then uh it's going to be set to primary and secondary s and d r y like so now underneath we going to be also passing the disable d s a b l e d and disable will be set to a Boolean and also totally optional now let me just save my file and

that was about for this Interface and now we are going to be using our class variance Authority so I'll just go ahead and Define my page in p a i n a o n page Nation Styles it's going to be equals to the CVA and here for the base classes we are going to be passing like Flex and items will be set to to center spaces on the ex will be set to two I'm going to also paste this object and here we're going to be pasing the variants and for these variants let's just pass

the size and the size Will be a few sizes like small and when it is small size then we're going to be providing like text of totally small and when it is a medium size m e d i u m the text will be set to totally Bas and when it is a large screen size then we're going to be passing a text of totally large today but I'm going to also have to specify my comma there and now to need this size variant we're going to be also passing our own variants to there so

for the default variant the Background will be set to to gray of 100 text will be set to toally gray of 800 and also when somebody H over there so background color will be set to gray of 200 I'm going to also provide another uh variant which will be set for a primary so background will be set to totally blue of 500 T will be set to totally white and when somebody H over there so background totally blue of 600 100 like so I'm going to be also passing a secondary and for the secondary Background

will be toally gr of 300 and text toally Gray of 700 and I'm going to be also passing like when somebody how over there so background gray of 400 in this situation so that was our own variance but we are going to be also providing a disabled state so d s a b e d and I'm going to set that to true so when the disabled state is true in this situation we are going to be changing the background to gray of 200 and text will be set to gray of 400 and cursor Will be

not allowed a l o w e d there we go and then for the default values uh let's just pass these default values we're going to be passing the default value for the size of medium we're going to be also providing a default variant to be default and also for the disable it it should be false now let me just sa my file I'm going to collapse that right here I'm going to copy the name of them I'm going to also collapse this interface and let's just use the inside Our component I'm going to go

into this component and I'm going to be using the tail merge and here let's space our pagination Styles today and now we are going to be placing the size as a prop variant as a prop and disable as a prop okay so now let me store the inside the variable with the name of merged um class names this going to be equals to this tww merge and now let me go into this UI and take care of this so for this D we're going to be passing the Class names of that merge class names there

we go and now inside there we're going to be removing that pagination and we are going to be creating a button and this button will be a special button okay so I'll just write like first of all my entity this HTML entity which will be if I can get the today end symbol and then alt T and then pre so that's going to be set for a previous button and we're going to be also creating a next button so let's Just write like you know let me just delete that from here and I'm going to

change that to next and then end GT and close there okay so first of all let me just take care of the what do we call it the previous button then we're going to be taking care of the next button right here so when somebody try to click on this in this situation we're going to be using this function which is handled previous which we are going to be creating in a few seconds and I'm going To be also passing a disable State and for this disable state if the current page is equal to one

then this should be disabled but if that's not the case so it should not be disabled so I'll just write like class names pairing for the ex will be set to four pairing for the Y AIS will be set to two and totally rounded now let me just s my file and I'm going to be taking care of this uh handle previous and also this current page so I'll just copy there go to the Top or maybe here now let me just uh create this function which will be handled previous it's going to be basically

an aror function which will only just return like if the current page is greater than one which we are now taking as a prop in this situation on page change prop we'll take the the current page minus one uh whatever page we are on so just minus one from there go to the previous page okay so it's going to gives us there and that's going To be it for this uh what do we call it previous button and now let me go into this uh next button and when somebody try to click on this button

then we're going to be passing like handle next and I'm going to be also passing a disable state today so the if the current page is equal to the total Pages or disable so I'm going to paste like the class names of pairing for the xais of four pairing for the y AIS of two totally rounded so now let me just save my file Right now I'm going to copy there and now let me go to the top here and now let me create that function so I'll just go ahead and uh create this handle

next it's going to be also an AR Arrow function we are going to be checking if the current page is less than the total Pages which we are now taking as a props in this situation the on page change will take the current page and then we are going to be adding one to this so in this situation it's going to gives us The next page okay so the that's also totally simple and easy but now the real magic will happen the middle of these two buttons and which will be a lot of cool stuff

so here basically we're going to be creating a function and then we are going to be rendering that function which will be a render page numbers and now let me just execute there I'm going to copy the name of there go to the top and create this function right here and I want you to bear with me for a few Second because it's going to require a lot of explanation first of all let me just cre create the body of this function and inside there we are going to be first of all creating a container

where we are going to be storing our Pages I'll just write like cons uh page numbers and it's going to be set to this empty array now the next thing that we have to do is that we have to iterate over through their total Pages which we are now taking as a prop okay so we have To iterate over through these total Pages like how many pages we have so we want to just iterate over through there so to do that we can use like the four off Loop or just a for Loop to be

precise I'll just use like let I is equal to one so we're going to be starting from one the zero will not be count so we want to start from one and if I is less than or equal to the total Pages then we want to increment there by one then I ++ okay so if that is the Case so for each iteration we're going to be taking our page numbers and then we're going to be pushing this button to there so now inside this push let's just create this button right here and I'm going

to close them and here we're going to be only render that I which we are now taking as a index for from this for Loop okay so that's to done now let me provide a key to that because we now iterating over through this so it will require the key And now we have to specify that I as a index today and now we are going to be providing a PA of classes to there so the class name will be totally Dynamic so that's why we are going to be using these back Texs so pairing

for the xaxis will be set to four pairing for the Y AIS will be set to totally to totally rounded and here let's space or classes Dynamic so if the I like the index is equal to the current page in that situation let me just go back in that Situation we are going to be providing this uh blue color which will be background totally blue of 500 and also the text will be set to totally white but if that's not the case in this situation we're going to be changing the background background to totally gray

of 100 and also the text will be gray of 800 so now let me just past SM file okay so now let me just explain there once again if you guys do not get it so if index which we are now iterating over Through is equal to the current page which we are now taking as a perimeter or prop so if that is the case so you want to change the background to be to totally blue and also the text to be totally white and if that's not the case then we are going to be

setting there to like background totally gray of 100 and text off totally gray of 800 so that's it now underneath that uh when somebody try to click on there then you want to fire this function which will be uh this Handle page change come on p a g and then change handle page change if I can get there today and here we are going to be passing our index inside the also for the disabled State we're going to be providing our disabled state right here and finally I'm going to be creating this function in a

few seconds but finally we have to return something from this function or from this iteration so I'll just use like return page numbers okay so which is these page numbers and We are now pushing this button for each iteration to this page number so basically it's going to gives us like the page numbers I'm going to copy the name of this function and now let me go to the top and here we going to be defining that function which will be super simple so I'll just use like handle page change and the page will be

set to a number and here inside there let's just remove that P and on page change and let's just pass our page Inside there and that's totally done okay so this is how we are going to be creating our page nation and I hope it helps but if it didn't I don't know what to do so I explained that enough so now that we successfully created our page Nation component by using reactjs class variance Authority tman merge tman CSS and also typescript now the next thing that we have to do is that we have to

go into this index. TSX file and we have to export there so I'll use like export Then default from where from our pagination component now let me also go ahead and go to this index.ts and I'm going to also Port T right here so export default uh default as pag p a g i n a d i o n pagination from where from the pagination component now let me save my file and that's done next thing that we have to do is that we have to create a stories for there and then test cases okay

so time to create a story for the pagination component so I'll just create A new file with the name of pagination do stories. DSX and inside there um we first of all need to import re from the rejs then we would also need to import the type um meta and also the story object from where from the story book and then we have to get there from the reactjs and now we also have to get the pagination component so that we can use it inside this file now we have to create a meta and that's

going to be set to meta type of will be set to Pagination p a g i n a t i o n and I'm going to close that that's going to be set to this object inside there we have to render our components and then the pagination inside there and it should be C NT and now we have to render our main component which will be the page Nation component p a g i n a t i o n I'm going to be also providing a perimeters and that's going to be set to totally a

l of centered I'm going to be also providing a tags so the tags will be set to the Auto dos so that it will automatically generate a documentation for us or for our component so let's just export default The Meta and create a type forward story so I'll use like type story can be equals to the story object we're going to be providing a type of meta and close there now underneath there we're going to be exporting so let's just use like export cons default and there going to be a story and it's going to

be equals to this ARs and here Inside there we're going to be passing a current page and current come on current page IND this can be set to one and the total Pages uh will be set to five and we're going to be also providing the on page change like whenever somebody triy to change this page so we're going to be passing a function today which will take a page as a perimeter and that's going to be a number and we will just loog to the console like uh page change to that specific page which

we are now taking as A perimeter okay so sat it should be a story there we go and underneath we also have to specify the SI and the size will be set to medium and we also have to provide a variant and the variant will be set to default now let me just save my file and check this out whether everything is working or not okay so everything is effed up so we have to start over I'm going to just use like npm run story book and test this out right now let me just refresh

There and here you can see we're now getting our pagination component you can also increase or decrease the sizes of this like the current page will be set to three it's going to jump into three if you set there to five it's going to jump to five to two and so on and let's suppose if you want to get like 20 pages so it's going to give us 20 Pages let's suppose if you want to get like 100 Pages it's going to gives us 100 Pages if you want to get like 10 pages so it's

Going to gives us 10 pages um we can also set that to small medium or large component and this is how the default look will look like and this is how the what do we call it the secondary look will look like secondary look will look like what the hell am I talking about and also so if you click on the set uh disable you can also disable there if you wanted to so now let me just close there and now there was a default story next uh we are going to be creating Another story

for there which will be a primary story so I'm going to go to the bottom and use export cons primary and that's going to be set to a story and it's going to be uh taking the arguments and inside there let's just space our current Pages inside there which will be set to one the total pages will be set to five and on page change uh so that's going to take a page and that's going to be set to a number and we will just loog to the console that same thing like page Change to

that specific page I'm going to go to the top and I knew I imported something but we don't have to use that so now let me just write like the size and the size will be set to medium I'm going to be also providing a variant and the variant will be set to primary save this file and refresh there I'm going to go into the primary and this is how my primary component will look like and you can definitely go ahead and change the styling if you don't like the Styling so in my case that's

looking totally cool so I'm not going to change there the next thing that we have to do is that we have to use export cost small and then I'm going to be using the story inside there this space or arguments and pass our current page which will be set to one for the total Pages which will be set to five pages and on page change we're going to be using the page and that's going to be a number use the console.log page change to change to This specific page which we now taking as a perimeter

and also for the size we're going to be setting there to small and also for the variant I'm going to change it to default save my file I'm going to go to the small and this is how my small uh component will look like or the small variation of this component now let me Define another story for the large one I'm going to basically duplicate there and change the name of there to large so I'll just go ahead and change that to large and here just change the size to large I'm going to save this

file right now and click on the large and this is how it looks like so this is a small one and this is a large one now let me create the final story which will be for the disabled state so I'll just duplicate there once again and change that to the disabl b s a b l e and here uh I'm going to only provide like the disabled and set there to true and now Let me just save my file click on there and here you can see this is now successfully disabled so yeah that

was there about the what do we call the stories of this pagination component and next we're going to be writing a unit test for our component so now let me go ahead and go to my test file or folder and inside there we're going to be creating another file with the name of p a a n pagination test. TSX and inside there let's just import react from the React J we also need to import the render uh also need to import the screen and the fire event from where from the testing Library wejs we also

need to import our pation components so we can use them inside this file I'm going to also just Define my describe function and here inside there let me just use like page Nation component uh c m p o n n t and I'm going to use my arrow function inside there and let's space our first test case like it should Render correctly with G1 total Pages GI I V and given total pages and here let me just P my arrow function inside there and render my component like page Nation component close there and I'm going

to be passing the current page which will be set to one the total Pages which will be set to five and the on page change which will be set to the mock function which is like VI and then FN for the function and we also have to import that vi from the testing Library v test so vi From where from the vest v test v t s there we go and now let's just save our file I don't know why it's giving me an error now let me have over there and variant is missing okay

go to the pation variant is missing that's because we have to make that totally optional I'm going to close that and now that error is successfully gone so now underne this render uh we going to be providing our expectation like screen And then get by text and pass or less than in previous sampol okay so we want it to B in the document what is that even mean so we are now checking if the previous button are present or not I'm going to also duplicate there and I'm going to also change there to the next

button and also change this symbol to this greater symbol right here like now in this case we are checking if the previous and next buttons are present or not okay so then if that is the case in This situation we're going to be iterating over through there so I'll use like let I equals to one and then I is less than five or less than or equal to five then I ++ in this case and now let's space our expectation like screen. get by text and here not test but text get by text there we

go and I'm going to be ping like I and then two string and execute it and we want it to be in the document and execute it like so and now I'm going to go there and here we have To run like npm run test UI and now let me go to this vest refresh this and go into my component which is this pagination component let me just click on there and yep everything is passing and everything is working the way we expect them to work I'm going to collapse them I'm going to also hide

this it function or this cases and now underneath there we have to Define yet another one so it calls the on page change function change when a page Number is clicked okay so it should call that function which we just Define a few seconds ago and inside there first of all we are going to be mocking a function so I'll just use like and then FN execute there and I'm going to store the value of that inside the on page uh changes going be equals to this value now underneath that we have to use our

render method and inside there let's just pass our page nation and I'm going to close it like this and now here we Have to pass our current page which will be set to one and the total Pages which will be set to five and on the page change in this situation we are going to be passing our mock function which is a on page change okay so now let me just sp there and now underneath there we are going to be using the fire event and when somebody clicks on this in this situation we are

going to be using like screen. get by text and we want to get like come on get by text there we go you Want to get the third text right here in this situation and now we have to check whether the on page change function was called with a correct page number or not so now let me just P like expect an on page change and then to have been card with card with there we go I'm going to just paste three right here now let me just save my file and yep sure it does

and here you can see where test are now successfully passing now let me just collapse this one as well and we should Also disable the previous button if the page is less than one so I'll just choose like it disables disables the pre come on I guess I'm going to have to write a double quote so disables the what do we call it the pre button when on the first page uh pre Buton not when but yeah that's totally fine and here we're going to be also passing our Arrow function and render my component like

page Nation component and close there and I'm going to be placing the current Page which will be set to one the total Pages which will be set to five and on page change uh in this situation we are going to be providing our M function like VI and then FN and close this now let me just save there and underneath this render uh we're going to be getting our pre previous button so I'll just use like screen. get by text and past my list and symbol in previous button like so and now we are going

to be getting our previous button and it should be Equals to this value I'm going to also provide my expectation for the previous button and we want it to be disabled and I'm going to execute it like so and here you can see our test are now successfully passing and which is looking cool I'm going to also hide there and I'm going to just duplicate there because we are going to be using there for the next button so it should disables the next button come on the next button when it is the last page so

Let's just use the last let me check out the codes now we are providing every single thing that we should be providing I'm going to also change that to like next button and here uh we should just change there to like oh my God next and then greater than symbol and now let me just save my file and I guess that's totally done okay so we are now getting our next button when the last page is defined oh we we have to change there to five the current page should be five now Let me just

refresh there and yep everything is now working the way we expect them to work and now we have provide a test case for both the previous button and also for the next button to be disabled when the disabled prop is true okay so in this situation we are going to be using like disables uh the come on the I can't even speak today so I'll just use like the previous and also the x button when disabled uh prop is true that's totally True and here we have to pass our Arrow function render or component by

using the page nation and I'm going to close there like this inside there we're going to be passing the current page which will be set to three we're going to be also passing the total Pages which will be set to five and on page changes in this situation we are going to be marking our function by using VI in FN and disabled will be set to totally true now let me just sa my file and now let's Test this out underneath there first of all we are going to be getting the previous button and also

the next button so I'll use like pre button it's going to be equals to the screen. get by text and past my list in preview button and I'm going to also duplicate and change that to the next button like so and also change this lbel to the next button and now we have to provide our expectation based on this so expect and we want the previous button to be disabled and we Also want the next button to be also disabled and let's just save our file test this out so here you can see this test

is also passing which means like everything is working the way we expect them to work and both the previous button and also the next button will be disabled if the prop is set to true if the disabled prop is set to true there we go and now we are going to be providing the final test which should highlight the current page with the Correct styling okay so let's just use like highlights uh the current page with the correct Styles there we go and here we are going to be passing our Arrow function like this render

our component which will be our page ination component and I'm going to close it like this pass our current page which will be set to three and total Pages which will be set to like five in this case and on page change in this situation we are going to Be providing our mock function like V and FN save this file and underneath there we have to check if the correct page number is highlighted or not so I'll use like current page button it's going to be equals to the screen doget by text not all text

but get by text like so and provide three inside the here we are going to be ping our expectation like current page button and we want that to have the class of uh background totally blue of 500 and I'm Going to also duplicate that and changes the class of there to like T of totally white now let me just save my file and now also we are going to be ensuring that other Pages do not have the current page style okay so to ensure that we are going to be providing our expectation once again in

screen. get by X once again and here we're going to be passing one inside there and not to have the class and here we're going to be passing like background totally blue of 500 let Me just duplicate it like five times and here we're going to be changing these values so I'll just go ahead and change that to two this one to three this one to four and this one to five okay so now let's a s file and our test is failing okay so our test is failing I don't know why but it is

let me just go into fix blue for the third one why is it failing for the third one oh that's because we are providing this third one right there it should be four and then Uh five and we should just remove the last one so 1 2 four and five and we are already providing this three right here because we are not selecting that one and now let me just check this out so here you can see all of test are now successfully passing and we wrote 36 test baby that's a lot of test that's

a lot of test time to create another component which will be a select component so I'm going to go there and create my select inside there let's just Create our index. TSX TSX there we go and also the select. TSX so I'm going to close all of them I'm going to go into the select right here and I'm going to first of all import react from reactjs also the CVA from the class variance Authority also the tww merge from the tailin merge and now we are going to be using our RFC it should take a

few props so I'm going to restructure there which will be a variant prop the size prop the disabled Prop and the options prop because we're going to be providing different options today op t o NS and also the class name and dot dot dot props we're going to be also annotating this component with the select props and now let me just copy the and create interface for them I'm going to go ahead and just write my interface and select props which will be extending from uh the omit and here let's space our react and then

dot select HTML attribute and we are going To be specifically using there on HTML select element I'm going to close it right here also we have to provide the comma and size now let me just close there like this and inside there we are going to be using the variant uh so let's space or variant v a r i a n t this can be totally optional provide a primary variant or a secondary variant right here I'm going to be also providing a size and the size will be either a small size or use a

medium size M e d i m or use a large size let's just save this file right now and we're going to be also providing a disabled one uh d i s a l which will be totally optional so now let me just anate the as Boolean and also for the options we are going to be providing a label for the option which will be totally a string and we're going to be also providing a value which will be also a string of array now let me just save this file right now now I'm going

to go to the top and use my class Variance Authority so I'll just use like con select and styles can be equals to CVA for the class variance Authority for the base classes we going to be providing a block and with will be set to totally full pairing for the xais will be set to four pairing for the y axis will be set to two and totally rounded Focus state will be to totally outline and none it should be Focus focu there we go and I'm going to be also providing a border and now we

have to Specify our different variation so I'll just use like variants v r i n TS and inside these variants let's space our specific variant today so for the primary we going to be providing like background totally white text of totally black and Border will be set to gray of 300 and also for the focus we're going to be using ring blue 500 and on the focus the Border will be set to totally blue of 500 so now let's just save this file and now we going to be providing Yet another prop for the secondary

so let's just use like secondary I'm going to go back and this going to be set to like background to gray of 200 text will be set to totally black and Border uh will be set to gray of 400 I'm going to be also providing a focus for the ring and ring will be set to gray of 500 and for the focus once again the Border will be set to gray of of 500 so now let me just save this file right now underneath this variance we're going to be also Specifying the size for there

so the size is small uh so in this situation we are going to be using text of totally small and pairing for the Y AIS will be set to one for the medium screen we are going to be providing like text of totally base and pairing for the y axis will be set to two and now we are going to be also providing a large screen size which will be set to like text totally large pairing for the y axis will be set to three I'm going to save this file Right now now we're going

to be also providing a disabled state so d i s a b l e d for the disabled State this is provideed true to there so background will be set to gray of 300 and text will be set to gray of 600 and cursor not allowed because this going to be totally disable or will be gr of 300 now let me just save my file and now let's just provide a default variance for values or default values for the variants so I'll just use like variant and the default Value for there will be set to

primary the size will be set to medium and also the disabled state will be set to totally false okay so let's just change there now let me just save my file I'm going to copy there from there I'm going to collapse there and now let's use the inside our component so what I'm going to do is that I'm going to just use like tww merge for the tail merge and place my select styling inside there and we're going to be placing a variant size and Disable from the props and here we're going to be also

ping a class name and now let's store the inside the variable with the name of merged last name or names rather now let me just save there I'm going to copy the name of them here let me just remove this jsx and I'm going to change there to select and here inside there oh my god let's just change there to select and here inside there uh first of all we have to spread out all of the prompts and now let me past the Class name and for these class names we are going to be passing

our merge class names and also for the disabl state we're going to be passing that disabled state which is now coming from the props inside this select uh now we are going to be trting over through all of that options which we are now taking as a perimeter and now let me pass my option and here inside this option let's space our option right here okay so here let's just render our option come on option. Lael and now we are going to be also providing a key because it's going to take some sort of a

key so option. value in this case and for the for each of the value we're going to be ping like option. specific value so now let me just save there and that's everything that we have to do for or select component so that was are about the story component I'm going to go into this index. TSX file and here we're going to be using export default from Where from the select component come on I have to type this select and now let me say my file that's already done now let's go into this index.ts file

which is now inside this components and now we are going to be also exporting um default as a select component from where from the select this just go into that select folder and now that's already done the next thing that we have to do is that we have to create a story for that component so I'm going to right Click on there and create a select. stories. TSX and here inside there I'm going to import first of all react from the reactjs you would also need to import the type and which will be the meta

type and also the story object is we're going to be grabbing there from the story book reactjs so let's just import there you also need to import our select components so we can test there now I'm going to just Define my meta and I'm going to annotate that with this Meta and the type off will be set to this select and close then going to be equals to this object and we have to specify the title and the title will be this components and select component okay so we are going to be also passing the

actual component and which will be that select component I'm going to also provide the perimeters and which will be that layout and here we have to set there to centered and I'm going to also provide the text and which will be set To the autod Dos like so now let me save my file but I'm going to also have to export it like so now here I'm going to be passing my type of story and this going to be equals to the story object and here let's space for type of meta and close it like

this I'm going to be creating my story which will be a primary story so it's going to be equals to let's just write like story and it's going to be equals to this object and Here we're going to be passing our arguments and the variant will be set to primary the size will be set to medium in this case and I'm going to also provide a few options like um it's going to have a few options so I'm going to past like label and label will have like option one and I'm going to also specify

the value and the value will have the value of only one now let me say there put a comma there and I'm going to duplicate the three or two times so this One will be two and this one will be three I'm going to also change this one to two and this one to three now let me save my file and now let me just go ahead and go to my components refresh there and then I'm going to be going into this select component and here you can see we have our select statement where we

can select our different options so that's going to be my primary component now if I click on this so that's going to be the secondary we can Also change that to small or medium or large and here we can also set that to totally disable so if I have my mouse over today so it is now disabled and we can also check out our primary component but I'm going to have to refresh there this just refresh there and now let me click on this primary and this is our primary component now let me create another

story so basically we're going to be exporting like con secondary it's going to be set to that story once again And inside there let's just pass our ARs and I'm going to be passing the variant and variant will be set to secondary and let's just past the size uh size and size will be set to medium and also past those options so you know what I'm going to have to copy there from there let's just copy there place it right here sa my file check this out so if I click on the secondary so this

is how my secondary uh select statement will look like I'm going to just copy and place This entire story like one more time and now in this case we're going to be creating a story for the small one so there going to be small and here we can also specify like I don't know maybe primary would be fine but I'm going to change the size to totally small and that's totally done let's sa there and if I click on the small one so this is how we are going to be getting a small uh what

do we call it select statement or our component now let me duplicate There one more time this time we are going to be creating a story for the large one so now let me just write like large that's going to be set to primary and now we have to change the size to like large and the rest of the stuff will be the same so let's say our file test this out if I click on the large so it's going to gives us this large select statement right here or uh select component to be precise

so that's SL done now we are going to be creating the Final uh story for the disable so I'll just export default or export con disabled and it's going to be a story so let's just annotate there I'm going to be also providing an arguments and provide my variant and variant will be set to primary I'm going to be also providing a size and the size will be set to medium and for the disabled one we are going to be setting that to true in this case and I'm going to also specify a few options

today so let's Just space those options I'm going to past like label just one option would be fine and this will be a disabled option because we would not be able to select it so that's why I'm only writing one and it's going to be just a disabled I guess save my file if I click on there here you can see this is now totally disabled okay so that was the entire story of our select component so then install done now let me go ahead and go to my test folder and then I'm going to

Go into the components folder and now here we have to create a new file for the select. test. DSX and here inside that we have to import react from the reactj we also have to import the render and also the screen from where from the testing Library and then from the reactjs we would also need to import our select components so we can use it and now here we are going to be just creating our describe and select component like so and I'm going to just Hit Tab and then inside there we're going to be

writing our first test case like it should renders with the correct options first of all we have to even check like whether it will render or not with the correct options so I'll just go ahead and WR a few options right here so inside they I'll just Define like label one you know what I'm going to just copy that thing from here I'm going to just copy there and place it right here so I'm going to have to remove this Existing one and that's going to be add for the options now the next thing that

we have to do is that we have to render our component to the virtual Dom so I'll just use like select and I'm going to close it like this now here we have to specify those options and I'm going to be placing those options which we are now providing right here okay so that's only done now we are going to be also using the on change event handler and we want to make a clown or mock of There so I'll use like uh VI and then FN we also have to import that vi from the

vest so I'll just import that vi from where from the v test like so now let me just save this file right now and now here we are going to be checking if all the options are rendered or not so we're going to be using like option dot for each option and we're going to be just passing like that specific option and I'm going to be providing my expectation like uh for the screen. get by text We're going to be set cting our element by get by text and let's space our option. label inside there

which we are now providing right here there we go so if that is the case we want that to be in the document and now let me just execute this s my file and now let me go into this s test and let's just refresh there so here you can see all of our tests are now successfully passing but I'm going to collapse this one and let's just check this testing I mean like this Select testing and yep it is working the way we exp him to work I'm going to hide there from here and

now underneath there we have to check like it renders with uh the correct variant and size class or classes would be fine rather so now let me just P my arrow function inside there and I'm going to just create a few options so that options would be like label and that's going to be set to like option one I'm going to be also providing a value to the and value will Be set to only one I'm going to just duplicate there one more time and change there to two and change this value to to two

as well so that's to done now we are going to be destructuring the container from the render function so now here we are going to be passing first of all our select statement and I'm going to execute the like this so we are going to be passing not this one but the options and here we have to past those options inside there or it should be options Let's just put s and also s here and we are going to be also providing a variant and variant will be set to primary primary like so and I'm

going to be also specifying a size and the size will be set to medium it is not helping me with the auto correct so I'm struggling here so I'm going to just use like on change and let's just provide our mock function and execute them and now that's toally done but here we are going to be destructuring the container from this Rand method so I'll just destructure the container c n t i n e r there we go and now we are going to be just renaming there to like primary container like so and now

underneath it we have to provide our expectations so now I'm going to be using like expect and then primary container that first child okay and we want that to have these classes which we are now going to be providing right here so we want that to have the class of background to White Tex of to Black and Border of gray of 300 and on the Focus ST we're going to be providing like ring blue of 500 and also on the Focus ST the Border will be set to totally blue of 500 so now let me

just say there and underneath there we are going to be providing yet another expectation for the primary container and we are going to be getting the first child from there and we want that to have the class of uh text will be set to totally base and the pairing for the y axis will be set to Two I'm going to save this file right now and test this out now let me just refresh there and here you can see our second test is also passing or or our third test yeah this is a second one

not a third test let me just zoom in a bit and yep our test is now successfully passing I'm going to hide there because that's a lot of code and now we are going to be also testing the secondary variant as well inside that same test so I'm going to go ahead and just uh render My component once again and I'm going to be using like select statement and I'm going to have to close it like this and provide my options inside there and that same options and provide my variant and in this case we're

going to be passing a secondary variant like so and for the size we're going to be providing like the large size and I'm going to be also providing the on change and let's just use like V and then FN and execute there but now in this case we are going to be Restructuring the container and I'm going to rename that to the secondary secondary um container like so and now let me just save this file right now and now we are going to be using this secondary container to provide our expectations so now underneath there

uh what do we have to do we have to provide our expectation and you want to get like the secondary container and first child from there we want that to have at least these classes okay so I'll just write Like background tot gray of 200 and also text will be set to totally black border will be set to gray of 400 and the Focus ST f c us on the Focus ST ring will be set to gray of 500 on the Focus ST once again we're going to be providing a border of totally gray and

500 I'm going to be providing yet another expectation for this same it okay so let's just use like secondary container once again you want to get the first child out of there and we want that to have the classes of Textor large and also pairing on the y axis will be set to three now let me just save my file and now let me just refresh there and here you can see we are now getting all of our test are now successfully passing so now we have to hide there because that's a lot of code

and now we are going to be providing yet another test case so let's just use like it disables come on disables the select s e c select when the disable prop come on Prop is true okay so we are going to Be disabling our select statement when the disabled prop is provided and that set to True okay so now inside there let's just uh create a few options and let's just provide like I don't know label one uh which will be option one and now we are going to be also providing a value and value

will be set to one change that to two and change this value to two as well underneath there we are going to be using the render method and provide my select Statement and close it like this and for the options we going to be providing those options and for the disable now we are going to be setting that to true in this case and on change we're going to be using like vfn and execute there and now underneath there we are going to be getting that specific element by using get by row and here let's

just proide like uh combo box because in this case we're going to be selecting our options or select statement to be precise that's Why we are now ping like combo box and now let's just use like select element this going to be equals to that same value underneath that we have to provide our expectation and which will be set to a select element and we want it to be disabled and execute it so let's say our file test this out so here you can see it will be disabled uh when we specify the disabled prop

to true that's to done I'm going to also hide that underneath we going to be creating yet another it Statement so it should renders uh with the default value if provided okay so if somebody provided a default value today so it should also render there let me just P these options right here and now underneath there we're going to be using like Fender and let's space our select statement and close there I'm going to be also providing these options and place these options right here and value will be set to two in this case so

now we are going to be selecting that second Value out of the and on change will be set to V and then FN and execute there underneath let's just proide our expectation that's going to be the main thing okay so let's just get our element by rule first of all and we are going to be getting there by using this combo box and now we want it to have the value of two so now let me just save this file right now so here you can see it should also render with the default value if

somebody provided that's only done I'm Going to also hide that and now let me provide the last case for this component so like it applies the correct Styles uh when disabled okay so we should also apply correct style when we disabled there okay so first of all let's assume and create a few options it's going to be set to like um that same option level one or option one and we're going to be also providing a value and value will be set to one duplicate that change that to two and change this value to two

as well Okay so here now we are going to be providing our render method and provide our select statement inside there but we not going to be closing it like this now we are going to be providing our options and that options which we just defined up above provide this disable and set it to true and when somebody try to change this we are going to be using V in FN and execute there but now from this render method we're going to be destructuring this container this going To be set to this container I mean

like this render method to be precise okay so now first of all we want to get the first chart so we going to be using that container and then first childart and I'm going to sort the value of that inside this selected selected element and it's going to be set to this container first child to be precise now let me just proide my expectation and we want to provide those expectation for this selected element and we want that To have the classes of background to gr of 300 I'm going to duplicate there a few times

and here let's just change these class names to like cursor not allowed and also change that to order will be set to gray uh gray of 300 and now let me just save my file and all of our test are now successfully ping which means like where components is working the way we expect them to work and that's amazing that's phenomenal that's Incredible okay I guess that was the last component I'm not quite sure welcome to the new section so in this one I'm going to be showing you the real power of yan workspaces mono

repos I said it like a Yaga anyway so what I'm going to do is that I'm going to right click on there and open my terminal zoom in a bit so you guys can see everything a bit better like so and now we are going to be creating a new folder with the name of uh mono repost Demos and I'm going to go into that mono repost demos now let me open that in my vs code and this is how it looks like so here you can see we are now inside this mono repost demos

folder and now I'm going to be just creating a new file with the name of package.json and inside there I'm going to just specify a few things so the first thing that I have to specify will be a private because we are going to be creating our private uh what do we call it monor repo and I'm going To set that to true and also we are going to be specifying the workspaces because in this case we want to use the workspaces if you're working with multiple projects inside your monor repo like for instance you're

going to be working with the UI component library or something like you don't have to create this folder which I'm about to create you're going to be also working on the web version and also you're going to be working with The uh come on the native or the mobile version or something like that of your project so in that case you can specify those folders right here inside this rout of package.json inside this workspaces like you can specify mobile version and so on and so forth but we are not going to be doing that I'm

going to just remove these three folders and instead we're going to be creating another folder with the name of packages like so and we're going to be storing All of our packages inside this folder okay so now here we just have to specify that packages folder so I'll use like p a c k a g s and every single thing inside their packages folder okay so now let me just save my file and that's to it about the package.json and now let me just close there now the next thing that I want to do is

that I want to create a few packages so what I'm going to do is that I'm going to just zoom in a bit first of all we are going to be creating A folder which will be my math and now inside this folder I'm going to be writing some code which will be useful for those other packages so this one will be like basically my utility functions uh package or something like that now let me create yet another folder inside the packages and which will be like my project so basically uh we are going to

be writing our utility functions or math utility functions inside my math and then we are going to Be using them inside this my project folder okay so then inst all you're done now the next thing that we have to do is that we have to initialize both both of these packages okay so I'm going to open my terminal and now let me go ahead and go to that packages folder uh so let's just write like packages folder and now inside there first of all we are going to be going into this my math folder so

I'll just go ahead and go to my math and now we are going to be using a Yan in- y To initialize there so here you can see it's going to giv us this package.json so now let me just click on there so it only has the name version main license and they said okay so now we successfully initialize or my math package but now here we are going to be also creating a new file with the name of index.js and we are going to be filling there in a few second but now let me

just close there so that's totally it About the my math package now let me go ahead and go to this my project and we are going to be also initializing that okay so I'll just uh go out from my math which we are now inside so I'm going to go out from there and now we are inside the packages folder so now you want to go into this my math project so I'll just just go ahead and CD to my math uh not my math but my project there we go and now we are going

to be also initializing that so I'll just use like Here in y and now if I hit enter so as you can see we now getting this package.json we now getting the name version man and license and that's all yet now I'm going to also right click on there and create a new file inside there which will be index.js and once again we are going to be filling there in a few seconds but not right now so now let me just close there now here I'm going to open this package.json and I'm going to specify

the type of module okay so in This case we're going to be using a modules if you guys don't know what this line means you don't have to worry about that because this is just related to uh the nodejs and you don't have to worry about this type module okay so basically it's going to allows us to use the es6 um or Beyond like Import and Export statement so we don't have to just write like uh what do we call it the export do something and something like that so we just have tried like export

default and Something and we just have tried import something from some package there we go that was a rough explanation but here you have to keep that in mind I'm going to copy this line of code now let me go ahead and go to my math package then I'm going to go into my package.json and place there right here and now let me just save this file right now so next I'm going to go into this my math package and here we are going to be writing a few math utilities so I'll Just basically write

like add function and it's going to take like X and Y and we are going to be just combining or yeah adding there and now we're going to be also creating like subtract function and this going also take the X and Y and now we are going to be subtracting X from y we would also need to multiply m l TP l y is going to also take the X and Y and we are going to be using like X time Y and also you would need the divde it's going to take the X comma

Y and Here is going to be equals to like X time y or not times but divide y God damn it and now here we're be just exporting there so we can use the in other files so I'll just use like add then subtract come on subtract also multiply and divide so now let me just save my file and that's going to be it for our utility function now that we successfully created this utility function and we also exported there so that we can use that in other packages Or files now let me just close

them I'm going to go into my my project and now let me just open this index.js right here now we are going to be consuming there okay so what I'm going to do is that I'm going to just write like import and now we are going to be getting the ad from where from my math and here you can see you might be thinking like husan you have to write some sort of a path then you would be able to use there like you have to write this path and then go To my math and

then you are going to be getting that content from this index.js but now we are not working with the static files we are now working with the mono repo so which means like we have to install this my math package first of all and then we would be able to use there so if I just save my file right now and console.log this add function so I'm going to just write like two and then three so it's going to add there and that's toally done so now that we Successfully import the code from my math

and we are now using there but it will not work and why is there that's because we have to install this package inside this dependence inside this project then we would be able to use there you can think about that is like uh for instance you are working with reactjs and you have to install the T in CSS then you would be able to use that okay so what I'm going to do is that I'm going to go into my package.json file And here we're going to be providing our dependencies so I'll use like dependencies

and for these dependencies I'm going to be adding like my math and here I'm going to be writing like uh the version of 1.0.0 and now let me just save my file now that we successfully add the as a dependency but now we have to install there okay so now let me just close there and I'm going to open my terminal now let me go ahead and we are already In inside this my project so now we just have to use like Yar install and once I do that Watch What Happens so here you would

be able to see that package.json and now if I just hit enter so here you can see it's going to gives us this node modules and also yarn. log okay so now let me just close there if I go into this node modules so now inside there we have our my math if I open there now inside my meth we are now getting all of that functions right here now let me Just close them and finally we just have to run our code which is now available inside my project so what I'm going to do

is that we are already inside this my project so I'm going to use like node and then index.js hit enter so now it's going to gives us the value of fiveo here so if I want to import something else like I don't know maybe um multiply or something like that and I'm going to just duplicate this line of code and change there to like multiply come on Multiply like so and now let me just say my file run there and now it's going to also multiply there which means like our package is working the way

we exp him work so that was about the basics of yarn workspaces mon repos but in some situation you would also see like people add where you call it their name or their aliases so what do I mean by there I'm going to go ahead and go to my project and then I'm going to go into the package.json inside there and here We are going to be changing the name to our Alias so I'll just add like this add symbol and I'm going to give it my name which is husan and if you are using

your own package so you should also definitely provide your own name and I'm going to copy this save this file and now I'm going to go into my math project and then I'm going to go into the spec. Json and place there right here save this file and now here let's just remove the I'm going to delete this node Modules folder I'm going to also remove the san. log folder and now I'm going to open my terminal and now we just have to reinstall this I'm going to go into the root first of all and

now here let's just use like uh yarn install but before we do that I forgot to mention first of all we have to go into this package.json inside my my project and we also have to change that to hosan because now we are going to be installing this package because we already changed the name of There okay so now let me just close there and watch what happens so if I just use like ion install and if I hit enter so it's going to install there right here inside my project so now if I just

go there here you can see we have only one folder and inside there we have our packages right here so which means like we can totally use that and now let me just close there I'm going to go into my project and now it will not work and can you guess why it will not work it Will not work because we have to change this name to uh husan webd or just husan and then my project or my math now let me just use them and here I'm going to just uh use that same command

but first of all we have to go ahead and go to my project so I'll use like my project then I'm going to use like node index.js and hit enter so now it will success y work but now if I just remove that from here and rerun there it will gives us an error because we have to specify that Actual path right here okay so that's to done and this is how we can set up our mono repost so first of all we have to initialize our package.json and then we have to specify our works

spaces or our packages like this so if you have like more than one packages you can totally Define there right here like uh you can say my math uh you can also say like you can also say like my project or something like that but I want to group all of their packages into one folder Which will be a packages folder because this is a public convention like everybody use this convention so that's the only reason I'm going to be using packages and every single thing inside these packages will be included as a package okay

so this is a separate package and this is also a separate package so if I change that to like something else if I store that inside some other folder it will totally work because we have to just install that Right here and it will not care about this code and by the way let me just also show you one more thing so if you weren't using yarn workspaces like monor repo so like let's suppose if I go ahead and go to my math and if I just change something like if I made a bug here

you can see this is now adding but let's suppose if I just write like minus say my file and now let me just close this file and here you can see we are now using this add and it's supposed to add These two numbers right here right so now let me just delete this line of code and now I'm going to be using that uh node index.js and if I hit enter right here so now it will gives us minus three and why is that that's because we Chang this code right here there is some

bug inside our library we have to fix there so if you weren't using the yarn workspaces first of all you would need to fix this buug that's the first thing that you would have to do second of all You need to push the to the npm by using npm um what was there npm push us I'm not quite sure about that but it was a command which will allow you to push your packages to the npm but the next thing that you have to do first of all you have to fix the bug then you

have to push that to the npm then you also have to push that to the GitHub and also then you would have to reinstall your packages from there and then finally you would have to use this code and then you Would have to check like whether the code will work or not but now you're using a monor repos so anything you change inside this file will be directly reflect inside this file okay so if I just fix this pug and now let me just try there once again and here you can see we are now

getting the exact same result but now if I change something like I don't know maybe if I just use like minus or something like that once again and if I just rerun that here you Can see we are also getting that same result so you don't have to do like all of that work you don't have to like first of all you have to fix a uh bug then you would have to publish there to the npm also you would need to publish there to the GitHub then you would have to uninstall that from your

existing project and then you have to reinstall there and then you have to use the code and check whether the code will work or not okay so that was a lot of Explanation about the mono repos and I hope you enjoyed it all right guys so now we are at the point where we are going to be building our own design system in reactjs and that's going to be a lot of fun so what I'm going to do is that I'm going to open my ter and now let me just zoom in a bit so

you guys can see everything a bit better like so I'm going to create a new folder with name of uh my own design system now let me go ahead and go to that my own Design system folder like so and I'm going to open there in my vs code and this is how it looks like so I'm going to open my terminal and first of all we have to initialize our GitHub repository if you want to do that you can but if you don't want to do that you don't even have to do that now

we're going to be using another command which will be the Yan set version Berry basically it's going to use us the latest version of the Yar okay so now let me open my Sidebar right here so it's going to install the latest version of yan and chances are if you are watching this course in the future the version of yan will be totally change and that's totally my guarantee it will be Chang and now we are using uh Yan 4.6.0 but as long as you're using like Yar set Berry version that's going to be completely

fine so that's done now the next thing that we have to do is that we have to create our mono repo so first of All we are going to be creating our packages folder and inside this packages folder we are going to be defining our own packages so I'm going to go ahead and first of all start from the first one which will be the foundation package f o u n d a t i o n like so we are going to be also creating another package for the rejs and also we are going to

be creating a package for the story book like so and in which we're going to be writing our stories and you will see There in a few second but now we are going to be going into this Foundation folder and we have to initialize there as a package so I'm going to open my terminal and now I'm currently inside my own DS package which is now the root so now you want to go into the packages and then the foundation folder so I'm going to use like CD and then the packages folder then we want

to go to the foundation folder and now we are going to be using like Yan in it and now if I Hit enter so it's going to initialize my yarn right here so if I open there here you can see we are now getting this package.json and also readme.md and we are now getting like uh the name of foundation and also the package manager so now let me just close there that's totally done now the next thing that we have to do is that we also have to go into this react package and also initialize

that okay so I'm going to open my terminal once again we are now Inside the foundation package so I'm going to go back from the CD dot dot and now we are going to be going into CD to the react folder and now we are going to be using Yan in it right here so if I do there now let me just close there now if I expand this react folder so we still have this package.json and also this readme.md inside both of these folders okay so now let me just close there now we are

going to be going into the story book folder and we are going to be Initializing there as a private package so how we are going to be doing there first of all we have to get out from this reactjs now we are inside this packages folder and now we are going to be going into the story book package so I'll just write like story book and now let me just hit enter and now we are going to be using like Yan in it and then D- private because we want to initialize that as a private

package which we are not going to be pushing There to like anywhere now let me just open this package.json file so here you can see we're now providing this uh private label right here which means like this package is totally private which means like we are going to be only able to use the inside this packages folder but nowhere else so now that's to done now the next thing that we have to do is that we have to make the is ual monor repo so I'm going to just double click on there and here we

are going to Be passing our workspaces so now let me go to the yeah we're now at the same place and now I'm going to just use like workspaces and we have to tell a specific workspace which will be that packages folder and every single thing inside that packages folder p c k a g s and which is that packages folder right here that's totally done the next thing that we have to do is that we have to provide our aliases so I'm going to go to the foundation package And now I'm going to just

write like the Alias of Huzan come on hen DS and that's going to be here if you using some other package like if you want to provide your own name you totally can but my recommendation will be to at least provide my name because I'm going to be using some commands and you will just get confused so at least if you watching this course please provide my name and then later if you want to change there you totally can so I'm going to copy There from here say my now let me just H my mouse

over to there and you won't be getting this uh error so now let me just add this sa my file now I'm going to be going into this react package open my package.json from there and place it right here this hosen DS and reactjs now let me go ahead and go to this uh story book then package.json and also place it right here save my file and close there now I want to explain one more thing about uh what do we call it mon repos so Let me just zoom in a bit here you can

see this story book package is now dependent upon the rejs and also this Foundation package so now inside this Foundation package we are going to be using or we are going to be building or design tokens and we are going to be also using those design tokens inside this Rea components and then we are going to be visualizing there by using this story book so both of these packages are super important for this Story book and this story book is dependent upon these two packages so now let me just highlight there right now and let's

just right click on there then I'm going to go into the set color and I'm going to change some color off there you don't even have to do that because I want to do that I'm showing you there I'm going to just choose this fuchsia color and now let me just click on there so I want to say like these two packages are super important for this story book And now we are going to be adding both of these packages to this story book so for that we're going to be using this command so now

let me just go back and first of all you want to go into the yarn workspace and we want to access Jose n DS and then the story book okay which will be story book package like so so now what do we want to add so I'll just use this add we want to add reactj and also the foundation package so I'm going to just use like hosan DS and we Want to just add the reactjs and we also want to add hen DS and then the foundation package so now if I hit enter so

it's going to just install all of that packages inside this story book right here so if I click on there now we are getting the dependencies of who DS foundation and also H DS reactjs so that's totally done and now we also know that reactjs is also dependent upon this Foundation package like we are going to be building or design tokens inside this Foundation package which we are going to be using inside this react package so now we have to install this Foundation package inside this react JS so how the what we are going to

be doing there well we have to open our terminal let me just go back from there and now we are going to be just using using or Y pin workspace and now we are going to be accessing first of all hen DS and reactjs and we want to add something called the husan DS and then the Foundation package so now let me just hit enter so it's going to install the inside this react package so you know let me just delete there or maybe change the color of this so I'll just change okay so how

the we going to be even changing the color let me just remove that from there and that's done so now here you can see if I go ahead and go to this uh reactjs and go to the package.json so what are we getting we are now getting this dependencies and Inside there we now getting like huzen DS for design system foundation and we are now attaching this workspace to there that's all done and next we're going to be adding a typescript forward project so that was about the basic setup and now we are going to

be installing a typescript inside this entire monor repo so what I'm going to do is that I'm going to open my terminal and I'm now inside the route as you can see there right here and I'm going to Just use like yarn add and then DD as a d dependency typescript so now if I just hit enter so it's going to install the inside the route now let me just show you there okay so if I go ahead and go to the packages so here you can see uh we are now getting this typescript version

and by the time you are watching this video obviously this version will be changed okay so that's done now we are going to be installing the inside this Foundation package then we're going To be installing the inside the Rea and finally inside the story box so now let me go ahead and inst they inside this Foundation package so I'm going to open my terminal once again and I'm going to write like Yar then workspace and then in which workpace you want to install there so I'm going to use like hosen DS for hosen design system

I'm going to go into first of all the re or you know first of all let me go to the foundation package and we are going to be adding There as a d dependency and I'm going to just write like typescript so it's going to add there now let me go back and this is how it looks like so now let me just hit enter so just can install inside the found Foundation package let me go ahead and show you there if I go to the foundation package and here you can see we now getting

this typescript right here now let me also go ahead and go to the react package and we're going to be installing there inside the react so Once again I'm going to be using like here workspace and then I'm going to go into husan DS and then reactj and we're going to be adding there as a Dev dependency typescripts now let me just hit enter so it's going to install that inside the react uh package as well now let me use like Yan workspace I'm going to go ahead and go to hen DS and then the

story book now we are going to be adding the as dependency typescript so now let me just hit enter so it's going To install inside uh both of these packages so if I go ahead and go to the reactjs here you can see we are now getting the typescript if I go into the story book here you can see we are also getting there right here now we also have to create our TS config file inside the root so I'm going to just double click on the root and I'm going to give it the name

of like TS config.js let me just zoom in a bit and this is how it looks like now let me just hit enter and Now inside there we are going to be providing a few compiler options so first of all let's start from the compiler option so compiler option there we go so the first thing is we want to allow JavaScript and we want to set there to true and then allow synthetic default import which is this one right here and I'm going to set that to true I'm going to also provide the strict mode

and true let's justlo the no implicit any okay so we going to be also Setting that to true and then for the strict null checking uh we are going to be also setting that to true I'm going to be also forcing the consistent casing in files so I'll just use like uh Force come on f o r c consistent casing in files and true no fall through cases in switch so I'll use like no fall through cases in switch and set the true no unused local variables I'll write like no unused uh locals and I'm

going to set there to true I'm going to also provide The module resolution which will be also set to true so module resolution and this going to no that's going to be set to node not true isolated module will be also set to true so isolated module and set that to true I'm going to be also providing a down level iteration so which is level iteration and I'm going to set that to True uh declaration will also be set to true and the remove comments remove comments when we want to build it this going be

set to false and The SCE map will be set to True going to be also providing a lib we want to use the lib like es next and we also want to use the Dom okay so now underneath them uh we're going to be providing a base URL and that's going to be only set to dot which means like the root and I'm going to also specify the paths so these paths will be set to this in this path like hen DS and now we want to go inside there and here we want to set

there to the packages so I'll just use like uh Pack packages and every single thing inside the packages and then inside the lib okay so first of all let me just put a comma there and then to done I'm going to also put a comma there and then es Module come on module enter repo and that's going to be set to true I'm going to be also providing a skip lip checking as well and that's going to be set to true and then resolve and then resolve Jon modu so let's just remove there and resolve

Json modu and set through Experimental declaration will also be set to through we're going to be also providing the no emit error not this one no no emit this going to be set to true then the strict function types will also be set to True let's just set the to true and now underneath there we going to be excluding a few files so I'll just write like exclude and we're going to be excluding the node modules folder m o d u s and also we are going to be excluding every single thing let's just Write

two two stars and then test dot every single thing like all of the file which will have this test file okay so you just want to exclude there so there was about the main root configuration for the typescript now let me just go back and this is how it looks like if you want to copy there from my GitHub repository you totally can or if you want to pause the video and type there by yourself you can also type there now let me just close that from here I'm Going to go ahead and go to

my packages then I'm going to go into my react package and here we are going to be be creating a new file with the name of TS config so TS config.js and here we are going to be first of all extending our own configuration which we just created so we are going to be using like extends and we are going to be grabbing there from let's just go ahead and go to the root and then we are going to be grabbing there from the TS config.js File so now let me just save my file if

I hold control and click on this so it's going to brings us to this root TS config.js file right here okay so we are now taking like every sing thing which is available inside this route we are now taking the and now we are going to be adding a few more okay so I'll just provide a comma and let's just add a few more compiler options for the reactjs so we are going to be providing a base URL and the base URL will be going into the SRC folder which we are going to be creating

in a few seconds and the outer directory like when we build this we are going to be using like outer directory and we want to go to the lip folder okay so we're going to be also providing a down level iteration so let's just write like down iteration and now let me just set that to true we are going to be also providing a Target and Target will be set to yes next this is also provide the Jsx and here we're going to be providing the react jsx because we are now going to be using

jsx inside this package this's us also provide the module and module will be set to es next okay so now we are going to be also providing a es module uh into repo set that to true and also allow JavaScript obviously true and then the strict mode will also be set to true and now on need we are going to be including a few files and then we are going to be excluding a few files so Now let me just include there like we want to only include the SRC folder and now we are going

to be excluding a few folders so like e xcl and we want to exclude first of all the node modules folder and we also want to exclude every single thing which is inside the test file okay so we not going to be writing any test for this repo but uh if you want to write there you totally can and that will not be included here that will be totally excluded we also want to Exclude the LI folder and now let me just save there and then toally it about the react uh TS config right here

so if you want to write that by yourself you totally can but if you want to copy that from my GitHub repository you can also copy there so now let me just close there now let me go ahead and just create a simple component so that we can check whether the typescript is working or not so I'm going to just go ahead and go to my react folder and we are going To be creating another folder with the name of Sr C and inside there let's just create our index.ts file inside there and I'm going

to just use like uh some simple component like greed let going to take a name of a person and that's going to be totally a string and now let's just write like um render first of all the person name and then person name or we are going to be showing the word right here is not n we have to also provide this colon right here which Means like our typescript is now successfully working if I don't specify then it expect this colon so now let me just provide there and here you can see where typescript

is now working the way we expect him to work so now let me just use like export default and then cre component and now let me just save my file and yeah our typescript is now successfully working and now let me just build there so that we can see there I'm going to go ahead and go to this react Package and inside this react package we are going to be going into this package.json file okay so here we're going to be also creating a script for ourself so I'll just write like scripts and here inside

there I'll just write a build script for ourself and now currently we are going to be only building our TSC like only our typescript configuration so now let me just save my file close them and now watch what happens right here I'm going To open my terminal right now and now let's just go back I'm going to go ahead and go to the packages then the reactj and here I'm going to be using Yan build and now if I hit enter so it's going to build there right here inside the slip folder so now let

me just zoom in a bit and here you can see we we have this lip folder and inside there we have our index.js file and yep it is working the way we expect it to work and these are or typescript Declaration file so that's Totally working I'm going to delete this folder right now and there was about the typescript so there was about the typescript now we are going to be adding our design token inside this Foundation package so what I'm going to do is that I'm going to open my terminer right here and I'm

going to be using Yan workspace and then we are going to be going into the hen DS and then the Foundation package right here okay so we are going to be adding as a Dev dependency style Dictionary because it really allows us to transform our design tokens into meaningful code so we're going to be using like style dictionary and now let me just add there so it's going to install there inside the foundation package so it's going to take a bit of time and I'm going to fast forward the video oh it just installed it

so I don't have to fast forward the video and next we're going to be adding our design tokens inside this Foundation package Now let me just even check there yep we are now getting our style dictionary version 4 or something and by the time you are watching this video you're going to be getting some new version now let me go ahead and just create a new folder with the name of SRC inside the foundation package and then we are going to be creating a new file inside there which will be a tokens file so I'll

just write like tokens and inside this tokens folder we are going to be adding a few More files so first of all we're going to be adding our uh colors. Json and here we're going to be placing all of our colors which we already designed in the figma section of this course so now let me just place the file and as you can see right here first of all we have our Json object then inside there we have our color so first of all we have our primary color then we have a different variations of

uh those color like we have 9 950 then we have 900 Through 50 so now let me just show you there okay so now I'm going to go back so that is my primary color if I can hide there then we have our neutral color then we have we have our warning then danger color success color and gray scales right here I'm going to also H over there and I'm going to add there to my workspace like so so now let me just save my file and that's totally done I'm going to also close there

now we are going to be adding our radius tokens I'm Going to right click on there and just write like radius. Json and here we're going to be placing our radius tokens I'll just place there right here sa my file so here you can see first of all we have our radius and inside there we have our tiny radius then uh extra small small medium small medium large extra large super large huge gigantic and full radiuses right here okay so now we are going to be also placing this in my file I'm going to be

also creating yet Another file with the name of opacities so op a c i t i s. Json and in this file we're going to be placing all of these opacities so first of all we have our OPAC then we have the semi OPAC then transp arent light transparent very transparent now let me close this file now we are going to be adding yet another file which will be for the shads so I'll just write like Shadows or just yeah shadows. Json would be fine now let me also place it right here so my file

So it's going to gives us a few warnings and now let me just add there here you can see we have our shadows object and inside there we have our uh extra small sharow then we have a small sharow then medium sharow then large sharow and extra large Arrow let's just close this file and finally we are going to be adding our spacing so I'll just uh create a new file with the name of spacing or spacing. Json okay and inside there let me just uh save this file so First of all we have a

four uh spacing then we have a 8 12 16 20 uh 24 28 32 36 40 44 48 52 56 60 64 68 72 76 80 84 88 92 96 and finally we have 100 okay so yeah that's also my entire spacing and next we're going to be using a style dictionary to make actual code out of there like the SS code also the CSS code and also the JavaScript code so to do that first of all we are going to be going into the foundation route which is this folder I'm going to right click

on There and create new file with the name of style Dictionary d i c t i o n a r y style dictionary.c config.js file and inside there we are going to be providing a few configuration for our style dictionary so I'll use like module. export so module oh my God moio if I can get there today and then export exports and here we're going to be passing our source first of all so let's just add the source and then Source will be set to uh we want to go ahead and go To this SRC

folder and then you want to go to this tokens folder which is this SRC and then the tokens folder you want to go there and every single thing inside there which ends with the Json extension so we want to go there this going to be our source now we are going to be building there for different platforms we are going to be using like uh platforms and here inside these platforms first of all we are going to be building there for the scss so I'll Just write like scss but why in the word I'm providing

this codes right here let me just close there and we don't have to provide these codes so first of all we're going to be building there for the scss and I'm going to just write like transform group so transform and we're going to be transforming there first of all for the scss and now we me provide my build path and we are going to be building there inside the lip folder so we want to Create a tokens folder for there and we specifically want to Output there on the scss folder okay so that's totally done

we're going to be also providing our files type and also the extensions so first of all let me just go ahead and remove there and change there to array and inside there we're going to be adding our object let me just add my destination d s t i n a t i o n and the destination will be this tokens. CSS file or SC CSS rather SCS there we go We're going to be also providing our format so it will format the as a scss and then the variables like so so now let me just

save this file right now now we are going to be adding our CSS configuration so I'll just write like CSS and then we are going to be providing our transform group and now this can be set to this CSS because in this case we are going to be transforming that to the CSS now let's just Prov our build path and we're going To be going into the LI folder then the tokens folder then the CSS now let me just add my files so for these files uh we are going to be providing our destination first

of all D STI d s t i n a t o n destination this going to be set to our tokens. CSS in this case and the format will look like this first of all the CSS folder then the variables like so I'm going to save this file right now underneath there we are going to be also providing the JavaScript Source Configuration so I'll just write like JS and then SRC and here inside there we are going to be providing our transform group this going be set to our JavaScript we are going to be also

providing our build path and build path will be set to SRC then the tokens folder then the JavaScript folder like so okay so we are going to be also providing our files and the files will look something like this so let's just provide our name and the name in this Case we're going to be going into this tokens folder and then we are going to be providing our JS SRC like for the JavaScript we're going to be adding the inside this tokens folder okay so I'll just provide like tokens we're going to be also providing

our destination uh which looks something like this like we're going to be writing our uh tokens. JS in this case and the format will look something like this we're going to be writing our John folder and then the Modu or just a module a singular and now underneath there let's just add a pure JavaScript so in that case we're going to be writing our transform Group which will be set to just a pure JavaScript and we're going to be also providing our build path and build path will go into the LI folder and then we

are going to be going to the tokens folder then the JavaScript folder and that's going to be it okay so now we're going to be also providing our files and files will first Of all put the name and then the name will be set to tokens the Destin ation will be set to tokens. JS and also the format will be set to JavaScript and that's totally done that was about the entire configuration for the style dictionary so if you want to write there by yourself you totally can but if you want to go to my

gab repository and copy all of that from there you can also do that so now that's to done I'm going to also go into inside this Foundation Package we're going to be going into this package.json and here I'll just write a script for myself so I'll just use like uh script first of all we are going to be building a tokens so I'll just write like build tokens and that's going to be set to the style dictionary p i c t i o n a r y style dictionary we are going to be building them

and then provide our config and then style Dictionary d i c t i o n n a r y and then config.js file so we are going to Be first of all building there and then we're going to be building the entire project by using yarn build tokens like we also want to use this Command right here and now we're going to be also providing the TSC like also build the typescript okay so I'll just write like TSC and that's going to be it now let me just save my file right now close there close

this file and for now we are going to be only building these tokens so I'm going to open my terminal and I'm going To use like yon build tokens and now if I hit enter right now oh we are now inside this Rea so we have to go into first of all the foundation package and I'm going to use y build tokens and if I hit enter right now it's going to take a bit of time and now it's going to build there and all of that are now successfully build so it's going to gives

us the scss folder it's going to also gives us the CSS folder the JS SRC folder and also the JavaScript folder so Now let me go ahead and go to this lip first of all and here inside there we are now getting these different tokens so if I go to the CSS here you can see we have our tokens. CSS and it's going to generate all of that um design tokens for us so here you can see we have primary token then the neutral and we have the warning danger success and we have the gray

scale we also have the different opacities radiuses and the different shadows spacing and you name It so that's going to be it for the tokens. CSS file we can also go ahead and go to the JS file and this is how our Javascript file will look like so first of all we have a primary and then we have a 100 and now we can go to the bottom it's going to give uses different colors as you can see right here and you name it now we are going to be also going into this scss file

and here you can see it's going to also generate the SS variables for us so it's going to Also generate a SS variables and I'm going to close there and that's totally done next we're going to be adding our tailin CSS setup okay so now we are going to be adding our tailin preset so I'm going to collapse every single thing I'm going to go into the packages folder then the foundation folder then the SRC folder and now here we are going to be adding our t preset so I'll just uh right click on there

create a new file with the name of TDP like the tnd design Preset then do config.js and inside there we're going to be first of all importing our design tokens from the JavaScript folder so I'll just write like Tok sense can be equals to require and if you guys don't know what a requir is you don't have to worry about that because require is a nodejs thing and you don't have to worry about that so basically this is just a older way of using the import statement like nowadays we use this import something from Somewhere

uh but we used to use this required statement so it will require a lot more configuration to use this statement like I use import something something so that's the only reason I'm using this older way okay so we are going to be first of all going into the tokens folder which is this tokens folder Right Here and Now inside there we have ajs token right here and inside this JS token we have our token .js file and it is mess Let me just show you There okay so first of all we are going to be

going into the tokens folder then the JavaScript folder and then the tokens. JS we don't have to provide the JS right here I'm going to save this file right now and now I'm going to write a bit more JavaScript code which looks something like this now let me just save my file this is basically a function which will flat in our object you can learn more about that if you wanted to but I don't want to waste your Time now let me just show you what this function does here you can see inside this tokens.

JS file we have a huge object first of all we have the colors then we have each variation for different color and then we have a different value and which is a nested object like this is object one this is object two this is object three this is object four and this is object five and so much more so now to flatten there we are going to be using this utility which Will allows us to Flat in our object okay so if you want to write that by yourself you totally can if you want to

copy the from my GitHub repository you can also do that so I'm going to just hide there right now and here we're going to be using module. export so let's just use modu and here we're going to be providing do exports and it's going to be equals to this object so first of all we are going to be adding some prefix if you want to provide this Prefix you totally can but if you don't want to provide there you don't even have to provide this so I'll just use like prefix and I'm going to prefix

with my own name which is hosan so basically let me just show you like why we're adding there basically whenever we are just creating some component I'm going to go into the react component right here and then we're going to be using some sort of uh let me just use like R fce you don't have to write this code by The way and we're going to be providing some class names and for each class names like uh if you want to use the T CSS so you will just write like background blue of 500 like

so or 400 but if you want to use your own design system class so first of all you would have to write hosan then you would write a background then blue and then 500 or 400 right here so that's the only reason we are now adding this prefix right here okay so if you want to provide there you Can but you don't have to so now let me just save that and close that right here and now we are going to be adding our theme and first of all we have to add our color so

that we can use our own colors and we are going to be wrapping there first of all inside the flatten values which is this uh function so now I'm going to copy the name of that and place it right here and we want to first of all flat in the values of tokens and then a spe specific colors from their Tokens so what am I doing right here first of all let me just go into this folder so we are now providing those tokens as you can see right here which will be a huge object

and now from that tokens we want to specifically provide that colors which are these colors right here now let me just collapse there then we are going to be adding the opacities then we are going to be adding the radiuses and then finally we are going to be adding the shadows and spacing Okay so this is how we going to be adding there so now that was there about for the tokens. color and now we are going to be also providing a border radius so let's just use like border radius and here we are going

to be using that flaten Val P our tokens do uh what do we call it radius right here we're going to be also providing our spacing not tokens. spacing but just a spacing and spacing will be set to Flat in value and let's Space for tokens do uh spacing right here okay I'm going to be also providing a box Shadow and box Shadow we use this Splat in value and here we are going to be using like tokens. sharow and now that's going to be it we're going to be also providing our font family which

will just use like enter font but if you want to provide your own font you totally can Okay so let's just use like sense and this going to be set to this enter font enter like This and now for the plugins we're not going to be writing any plugins but now let me just even provide the plugins that's going to be set to just empty array now let me save this file right now and that's everything that you have to do for adding the T preset okay so now we have to build this Foundation package

so we can consume there in other packages so I'm going to close there I'm going to collapse every single thing I'm going to go into the packages folder Then the foundation and now here we are going to be adding first of all our TS config for our typescript so I'll just create a new file with the name of TS config.js and inside there we're going to be adding a few uh configuration so first of all we have to even extend the existing configuration which will be available inside the root so I'll just write like TS

config.js I'm going to hold control and click on this so it's going to brings us to this root Configuration I'm going to close it right now let me provide my comma there and we are going to be adding our own configuration which will be compiler options and let's just add our basic base URL and which will be set to let's just go ahead and go to this source and for the output directory so I'll just write like output directory we're going to be adding that to the lib okay so let's just add that to the

liveb and also we're going to be including one More file so let's just use like a include and we are going to be including the SRC folder now let me just save my file in this can be for. here config about this uh Foundation package and now you want to go ahead and go to this package.json file which is available inside this Foundation package and inside there let me just go back first of all so you guys can see everything a bit better we have to add one more script and that's going to be here

so You'll just write like build style dictionary and if you want to do that you totally can but you don't have to this I'll just use like style dictionary and now we are going to be building the config and then style Come on Style dictionary and then config.js right here now let me just save this file right now now I'm going to be also adding two more things so first of all we have to add the main and Main will be this uh first of all we have to go into the lip folder Inside the

lip folder we have our index.js file and now we are going to be also adding a types so types will be available inside the LI folder which it will gives us when we build this package so now it's going to be available inside the lib and then index. D.S okay so now let me just save my file and there all yet close there now here inside this SRC we are going to be creating yet another file which will be index.ts and inside there we're going to Be importing all of our tokens uh from the JS

tokens and now we have to export there so we can use there now let me just save this file right now and finally let me just zoom in a bit and we're going to be building this entire Foundation package okay so let's just remove these tokens sure I REM yeah I'm going to just remove that from there I'm going to also go to this SRC then go to the tokens I'm going to also delete this JS folder okay So just delete that and now we're going to be building this Foundation package so I'm going to

open my terminal and I'm going to use like Y and then build okay let me just go back yarn build and hit enter so now it's going to build that in a few seconds so yep we are now getting them and now if we go ahead and go to this Li folder we have our tokens we have our index.js index. D.S uh and configuration and so on and so forth so this is how we are going to be building Our package and now we are totally ready to consume this package inside the react package right

here okay so that was about the foundation package and now we're going to be taking care of the react package so first of all we have to install reactjs and also the what do we call it react Rea Dom and also their types and then we will be able to use that so I'm going to go back and now we are going to be going into the react package or we don't even have to do that Because we are going to be using a Yan workspaces so we just have to write like Yan and then

workspace and then we want to go into this hen DS and react J and we want to add as a Dev dependency react JS and react D okay so now let me just hit enter so it's going to install the inside our react package now we going to be also adding let's just go ahead and go to or hen DS and also react JS so we're going to be also adding as a d dependency the types for react JS and Also the types for the react Dom so I'll just use like react Dom and now

let me just hit enter so it's going to also install that let's just close there now let me go ahead and go to my react package and here you can see we're now going to be getting this uh types and also reactjs and reactjs Dom or just react Dom right here okay now we are going to be also adding a peer dependencies and peer dependencies are those dependencies which will be used by Your consumer like the people who are using our package or our design system so I'll just write like peer dependency God damn it

peer dependencies it is challenging like speaking and typing at the same time so we are going to be adding react JS and we want that to have at least greater greater version of 16.80 of reactjs and also the react Dum it should have the greater version of uh greater than or equal to 16.80 version now let me just save this File right now and this is how we are going to be adding our per dependencies close there we also don't need this PNP do CJs file let's just delete there we also don't need this PNP

loader. MJS file let's just also delete there and now we are going to be going into this EML file and we are going to be only our node Linker and node Linker will be equals to this node modules okay so now let me just save this file right now and that's to it about the react package so Then St done now let me go ahead and go to my react package then I'm going to go into the SRC folder and here I'm going to just remove this index.ts file and I'm going to be creating a

component with the name of button. TSX and I'll just use my RFC inside the same my file and jsx element implicitly has type of any this because we all already added react JS but we now have to install all of that packages so to install that I'm going to go ahead and go outside from This react so I'll just use like CD do dot I'm going to also go ahead and go outside from this packages folder so I'll just use like CD do Dot and here I'm going to go back and I'm going to just

use like Yan install and now if I hit enter so now it's going to gives us that node modules folder right here and that's going to be it so now let's just close that now let me go ahead and go to my p. TSX and that's working the way we expect them to work and now here I'll Just write like props and here I'm going to also remove that from here and I'm going to just write like button close it like this and now we are going to be spreading out those props I'm going to

save this file right now I'm going to also type the as any so it should just remove that typescript error now let me close that and that's totally done okay so that was about the foundation package and also the reactjs package now we are going to be taking care of this Storybook package so what I'm going to do is that I'm going to install the story book but first of all we have to go to the packages then the story book and now inside there we're going to be using npx and then story book and

then inert if I hit inert so it's going to ask us to install we I guess I'm not quite sure but it's going to install that story book inside that specific directory yes I'm going to just type why and here I'm going to choose Rea and we Okay so it's going to take a bit of time to install there okay our GitHub repository is getting Huger and Huger I forgot to include that get ignore file and obviously it's going to gives us an error right now we don't want to report anything so I'm going to

just set that to in like now and now we going to be installing like y add and weed is a Dev dependency okay so let's just hit enter and just going to install the inside as a Dev dependency to a story book and now We can use like Yan story book and here you can see it's going to gives us that story book right here which means like everything is working the way we expect it to work so this is how we are going to be adding a story book and we are now getting a

lot of errors but you don't have to worry about that I'm going to stop there for now and now I'm going to go ahead and go to my story book right here and here we're going to be adding our TS config file so I'll just use like TS config.js and here inside there uh what I'm going to do is I'm going to just write a few configurations so first of all we have to extend all of their types no more root types so I'm going to go there this is right like TS config.js I'm going

to make sure so I'm going to hold control and click on there yep we are now successfully importing them right here and now let me just close there provide my comma there and now I'm going to provide my compiler options Inside there let's space or Bas URL and that's going to go into the stories and now we are going to be also providing the down level iteration set that to true I'm going to be also providing a Target and Target will be set to ES3 I'm going to also provide the GSX so let's just add

this we're going to be adding a react jsx in this situation and I guess that's going to be it but we also have to include that folder so I'll use like include and here let's just add our Stories dot yeah I guess stories would be fine now I'm going to save this file right now and that's everything that you have to add for this TS config for this story book right here okay so what the hell is going on oh that's because I I was clicking on the wrong folder okay so that's everything that you

have to do for this story book and now we are going to be adding the most simple play story so that we can test there so I'm going to remove every single thing inside the Stories now I'm going to create a new folder which will be that same stories folder and inside there we're going to be creating our file with the name of button so I'll use like button. TSX and now inside there the first thing that we have to do is that we have to import the button from the buttons so import buttons from

let's just go into hoseen Diaz and then I'm going to go into the react G then I'm going to go into the SRC folder and now we are going to be Getting our button okay so now let's just use like export default and inside there provide my title and here God damn it t tle e and here that's going to be set to like um components in then button I'm going to be also providing my component right here and this going to be set to the button now let's just sa our file and I'm going

to just write the most basic what do we call it story so I'll just write like export and then cons primary It's going to be taking uh primary and it's going to be taking there as a function so we just have to printer this component and I'm going to be providing a variant today uh v r n and variant will be set to primary variant because we're not going to be doing anything with this so that's the only reason I'm writing it at this way and I'm going to also close there and change there to

like primary duplicate there a few times I'm going to also change that to like Secondary and also change this one to secondary I'm going to also change this one to danger and close that just put a danger remove that from here also change the variance of this so I'll just write like secondary and also change this one to the danger I'm going to save this file right now and now let me just use my Yar story book so it's going to run there and it shouldn't be just a button it should be God damn it

let me just close there it should be a button. Stories. TSX so I'll just write like stories. TSX I'm going to close there right now and I'll use my Yan come on Yan and then story book like so and here you can see we're now getting our button component and which is a primary then the secondary and then the danger button which means like our story book is working the way we expect him to work but now we have to add a TN CSS to this project and that's going to be here oh my God

10K that's awesome so you know what I'm going to collapse there create a file which will be the get ignore file and ignore all of that stuff now let me just save there and close there and hopefully it should get disappear oh it's not working I don't know why but it's not anyways we're going to be taking care of that in a few seconds but first of all you want to go into the tailin come on tailin css.com I'm going to click on the getting started then I'm going to go to The framework and guides

go there copy there now I'm going to open my terminal and let's just go back open the terminal once again now we are going to be going into the package.json now we are going to be going to the react package and now let's just install t CSS or you know what we can also do that totally simply so I'm going to just write like ion workspace and now we are going to be going into the hosen DS and then we want to go to the reactjs and we want to add There as a Dev dependency

a talin CSS so let's just hit enter so it's going to install a t in CSS as a d dependency inside your reactjs package so let's just close that and that's to done now we are going to be going into the packages then the reactj then we want to go to the SRC uh yeah not even the SRC but inside the reactjs I'm going to right click on there and create a new file with the name of uh T.C config.js config.js there we go I'm going to hit Enter right now and inside there we are

going to be going in there I'm going to copy every single thing from there player right here we don't need this theme so I'm going to delete this save this file now we going to be adding our Plug-In or our preset which we just created so I'll just write like preset and here for the presets we are going to be adding our own preset right here provide a comma there so we are going to be requiring there require or importing There so we are going to be importing there from where from the hoseen DS and

from the foundation then from the lip folder and then inside the LI folder we have a TDP and then config that's going to be it and now let me just save my file okay so now let me just close there next we have to go into this SRC folder and I'm going to create my index. CSS file and now now we are going to be copying this index. CSS directives and now let me Just place that right here save this file and finally I guess that's going to be the final step of this entire thing

I'm going to go into this package.json and here we are going to be adding our script right here so that was there about for the build I'm going to change that I'm going to write like y build and then CSS and DSC like for the typescript we going to be also providing the watch mode for the CSS so we are going to be using like any PX and then tellin CSS And we want you to go ahead and go to the SRC folder and watch for the index. CSS and gives us the output of there

inside the LI folder and then the output. CSS and watch there and so that's going to be it for the watch CSS we're going to be also providing a build CSS so I'll just use like npx and then tvin CSS and we want to go into the SRC folder and then we want to go into the input. CSS file we want to output there you want to go into the LI folder then The output. CSS file and that's going to be here now let me just save my file and now we are going to be

testing our component but first of all I'll just go ahead and uh build there so I'll just use like uh first of all let me just see one go into the foundation package I guess we already built that I'm not quite sure about that yes we already did so we don't have to go to the foundation let me just go outside from there I'm going to just use like um watch CSS okay So we have to go into the reactjs and then we going to be watching that CSS God damn it Yan watch CSS and

now it's going to watch there right now okay input. file is not specified I guess I named that as index but it should be input yep I'm going to have to rename that to input and then CSS and now let me just use like y watch CSS and now it's going to totally work okay so that's totally done it's going to first all build there as you can see Right here it's going to build there and we're now getting all of that values and now we can totally use that inside our component and that's it

so what do I mean by that I'm going to go ahead and remove that from here and I'm going to just write like Buton component which will say like click me let's just zoom in a bit and here we can just write our class names and now if I just write hosen first of all we have to enable our intelligence then it will work so I open This extension which is a TN CSS intelligence and I'm going to click on this switch to pre-release version it's going to take a while to install there and now

I'm going to just restart my extension okay so now let me just go ahead and go to my component once once again and I'm going to remove this class name from there and I'm going to just write like class name if I just use like you know let me just use like BG and here you can see we are now getting all Of our background colors right here so we are now getting background color of hen you know what I can't even show you there right now what the hell is going on with my IDE

today I'll just write like husan and if I if I just use like um PG so here you can see it's going of gives us all of that colors which we can use right here so we are now getting like all of our colors which is a primary color oh my God why can't you see that God damn it and we can also Provide our pings and so on and so forth so you know what let me just show you there I'm going to use like background of warning and 500 which is my own color

right here okay so which is the hosan background color and now we are going to be also providing some sort of a pairing so I'll just use like husan Ping on the x-axis will be set to add it will totally work I can also provide like husan pairing on the y- axis of four it will totally work I'm going to also Provide like hen rounded totally small it will work and yeah as you can see we are now getting all of that values and we can also specify like hen the width will be set to

16 and it will totally work now let me just save my file right now I'm going to open my terminal so it's going to rebuild there and now we are going to be opening yet another poers Shell poers Shell God damn it not Powers shell so I'm going to click on that and now we are going to be opening Another terminal now I'll use like npm or Yan story book so it's going to open there right here but first of all we have to go into the storybook package and then we're going to be using

like Yan story book story book with a Yan and now let me hit enter no it's going to work let me just refresh there okay it's not working I don't know why I guess I'm going to have to restart so I'm going to close there I'm going to also close there and let me just restart this watch Once again and we are going to be restarting the story book once again it's still not working I don't know why we have to check it out so you know if I right click on there go to inspect

element we should be getting all of these classes but it's not working so I'm going to have to figure this out right now okay so that was not one error but there was a lot of errors and it took me a lot of time to figure this out the first error was uh you know what let Me just remove every single thing and rebuild there I'm going to go ahead and go to the foundation and delete there just a lift folder also go to the tokens folder and remove this uh JS folder from there I'm

going to delete them now let me go to the react package we're going to be removing this lip folder which we just built and also I'm going to go ahead and go to this telin config.js file and instead of providing this uh export default we are not going to be Doing there but instead we are going to be using this syntax which is a module. export that's the first thing that you have to do now we are going to be rebuilding our project so now let me just stop there stop this one even kill this

entire terminal and now let me just reopen there right here so we are now inside the route I'm going to go ahead and go to first of all the packages folder then I'm going to go to the foundation folder and I'm going to just Build there so I'll use like here on build and now it's going to build there so that's totally done now I'm going to go outside from this Foundation package and I'm going to go into the react package so I'll just use like CD and then reactjs and I'm going to also build

this so I'll use like here on build and I'm going to just build there also we are going to be building a y CSS uh yeah just a build CSS as well so it's going to also build there now we are going to Be watching for the CSS I'll use like here watch and then CSS so that's totally done the next thing that we have to do is that we have to go ahead and go to our stories then we are going to be going into this do story book folder now we are going to

be going into this preview. file and here we have to import that CSS output file so I'll just go ahead and import there I'll use like dot dot and then I'm going to go into the root directory now we are going to be Going into the reactj now we have to go into this Li folder which we just built and now we are going to be getting like output. CSS which is this folder now let me just show you this we are going to be going into this SL folder and we have this output. CSS

file so now we are going to be importing there the next thing there we have to do that we have to also our story book so we can see there so I'll use like your story book and now if I just hit enter okay so we Have to first of all go into the story book folder now we are going to be using a u what do we call it yeah story book I can't even uh I even forgot the names of them so now if you test this out here you can see it will

now successfully work okay and why is there it's because everything is now totally correct and now we can just use our own design system styling inside this design Des system and that will totally work so here you can see I was using my primary Color but let's suppose if I want to change that to like my secondary color so I'll use like hosan and then background of to one in color it's not even giving me that intelligence but that's totally okay so now let me just save my file and here you can see the color

is now changed to this yellow color and I'm using my warning color right here which is coming from our design system I'm going to also provide a few pairing like pairing for the xaxis Of eight and then pairing for the Y AIS of four so let's just add the four I'm going to be also providing a few roundness so I'll just write like rounded toly small which is my own thing okay so I build it by myself by using my design system and here you can see it's going to make this amazing button and let's

suppose if you want to change the styling of this I'll use like husan and width will be set to 16 or something like that and I'm going to also provide Like husan and the font will be set to semi bold I'm going to save this file right now and here you can see it will also work so I'm going to go ahead and just remove this width of SC from there save my file and that's totally working and the next thing that you have to keep in mind is that we also build our own component

Library so you can also push that to the npm and use that right here or you can create a new file for there and I mean like new folder for there Which will be a component Library so you can put there right here inside your packages folder and then you would be able to successfully use there inside your design system and that was it about the design system that was a lot of talking and a lot of explanation and I hope you enjoyed it hey guys and YouTube channel so in this video we are going

to be building this mer St monster from scratch okay so now let me just show you How this entire project is going to look like and then we're going to be jumping into the prerequisites and the setup so what you can expect by the end of this 7 hour of content is this entire application so now let me just show you that so first of all we have this amazing slider right here and we can change our movies by just clicking on these dots or we can just click on these arrows so it's going to

just also change our movies right here okay so then it's Going to just gives us that choose for you like all of the top rated movies okay so we can also change our movies by just clicking on there and then it's going to also gives us our top movies as well so it's going to just grab our top movies from our database and it's going to just show it right here something which we going to be also learning in this course okay so now let me just click on there so here you can see we

can totally change our movie Like that and then we have a Choose movie right here we can also choose different kind of movies by just clicking on this genre so now let me just click on this action so it's going to just only gives us that action movies so if I just click on this adventure so it's going to also giv us that adventure movies and so on and so forth so that was just a homepage now let me just go ahead and go to this browse movies and now once I click on that and

it's going To brings us to this entire movies database and we can just search for different kind of movies like for instance if I want to search for like the Antman is going to give us that Antman or the black arum or John Wick or I don't know Avengers or something like that so we can totally search for a specific movie or we can also select a movie by a specific genre so I'm going to just click on there and let's suppose if I only want to get the action movies So I'm going to just

click on that so it's going to just only gives us the action movies right here or if I want to go to a specific like I don't know maybe Adventure so it's going to just give us that adventure movies right here or if I want to go to like I don't know maybe comedy or yeah romance just click on this so it's going to just give us that song and I accidentally put that right here and we can totally remove that from more genres so that's there now we can Also select a different movies by

a specific year so I'm going to just click on that and we can just choose like 2009 so it's going to gives us all of the movies which was released in 2009 I did not provide a lot of movies because I don't have but I'm going to show you how you're going to be adding a lot of movies to your database but this is just a test to show you we are going to be building and now let me just click on this sort by and I can sort the movies By the new category so

now let me just click on that and it's going to gives us the latest movies right here or I can also click on the top so it's going to gives us the top movies like the top rated movies and I can also choose the random movies so here you can see it's going to gives us that uh what do you call it Avatar right here and now let me just refresh that and now let me just click on that random movie once again so anytime I click on that random movie It's going to gives us

that specific random movie right here okay so that's that now let me just go ahead and go to a specific movie like I don't know if I want to go to maybe this Avengers and game now let me just click on there so first of all it's going to gives us the movie image then it's going to gives us the movie name description and also the cast and also the releasing that as well something which we're going to be discussing as well and here you can also See that we can totally provide a review for

that so how that what we're going to be doing them so now let me just click on this icon right here so we can totally log in if you already have our account but if you don't have our account so we can just click on this register or we can just click on this plus button right here this plus user icon right here so it's going to also brings us to this page where we can create different users so now let me Just create a specific user like I don't know maybe the Black Adam we

would have the Black Adam gmail.com and we will also provide the password of Black Adam and one 12 black adam12 once again and now let me just click on there and here you can see we are now successfully registering a specific user and now let me just go ahead and just uh provide a review for a specific movie so I'm going to go ahead and write a review for this John Wick okay so now let me just write Like I don't know uh this is amazing movie blah blah blah or something like that and now

if I click on this submit button so here you can see it's going to also gives us that who did that review and what kind of review that person did and we can also see when that review was made okay so that's the now let me just click on this drop down menu we can log out if you wanted to or we can go ahead and go to our profile so we can totally update our profile like the user name The email and also the password we can totally do that but now let me just

log out and now one of my favorite part about this course which is the admin functionality okay so now let me just log in as an admin and you can create different admins if you wanted to something which we going to be also diving into in a really great detail but now let me just log in as an admin and now let me just click on this sign in and here you can see we also have the Dashboard right here so now let me just click on this dashboard and it's going to gives us that

amazing dashboard right here where we can see all of the users all of the comments and all of the movies right here okay so it's going to also gives us that how many people subscribe like how many people log in and yeah and then it's going to also gives us the top content right here like how many comments are provided for each of these specific movie so we can Totally see there we can also see the comments if you wanted to we can also go ahead and go to the create movie mov and here we

are going to be just creating a different movie so now in this case I can just click on this upload image and I'm going to just provide like I don't know maybe this one 1899 TV series so I'm going to just provide like 18 uh 99 and TV series or something like that and I don't know when this series was released so I'm going to just provide Like 2023 or something like that and now let me just SP like um [Music] horror DV series which will just make you yeah I'm going to just leave the

detail right now because this is just a test and now let me just provide the cast and the cast was hosan and also the John and also come on John and also um web dev or something like that we can also select a Specific genre so now let me just click on there and we can put that in a specific genre so now let me just put the in the comedy or something like that and now let me just click on this create movie so it's going to just create a specific movie and it's going

to brings us to all of that movies right here now let me just go back to my dashboard once again and now what I want to do is that I'm going to just click on this create genre so we can just create a specific Genres right here so I can just create like uh I don't know documentary or something like that now let me just click on this let me right click on there and select as a documentary now let me just click on this submit button so we can just select this documentary right here

we can select a specific genre we can update that if you wanted to or we can delete this so like in this case I want to update that to something else or Something like that now let me just click on this update button so it's going to just update that right here and now if I want to delete that so I can just click on this button and I can just click on this delete so it's going to just delete there right in here okay so yeah that's that now let me just refresh that and

now let me just go back and we can also go to the update movie so I'm going to just click on there and we can just choose a specific movie to either Update or delete so in this case I'm going to just update like andman so in providing an end man now let me just remove that and real man okay so we can update the year we can update the detail we can update the cast we can update the image we can update every single thing that we want so I'm going to just click on

this update movie and it's going to brings us to this movies detail and here you can see we have our Antman now let me just show you there and here you can See we now successfully changed that from the Antman to the real man and now let me just click on there once again let me just go to my dashboard once again and what I want to do is that I can delete a specific movie let me just go ahead and go to this update movie and let's suppose if I want to delete this I

don't know maybe this s or you know let me just delete this because this one was just arbitrary so now let me just click on this update movie I can just click on This delete movie and there you have it so it's going to now successfully delete the from my database so now let me just close there and here you can see we no longer have that 1899 mie and now let me just click on there once again go to my dashboard we can also check all of the comments like entire comment section so now

let me just click on these comments so we can read all of the comments like who did a specific comment what they are saying and when this comment was made Okay so now let me just click on this delete button so we can also delete a specific comment if you don't like that so yeah that's the entire thing that we are going to be building in this amazing 7 hour of content so now let's talk about the prerequisites for this course like what are the thing that you will need to work with this project so

now let me just go ahead and go to my YouTube channel right here you can just type husan webd on the YouTube and and It's going to just bring you to my amazing channel right here where you can learn different kind of things but and you can also Even build this e-commerce project and this is the biggest project I have ever made okay and you can also build 100 projects and so on and so forth but what I want you to do is that I want you to just go to this specific playlist right here

which is the full stack web development complete Course once you click on this playlist so it's Going to just bring you to this playlist right here so what you have to know for this project is HTML but not CSS so if you already learned CSS from somewhere else so we are not going to be using CSS in this project we are going to be using something called the tment CSS so you can totally skip the SS because in this project we're not going to be using the SS so you have to know the HTML you

also have to know the 10 CSS you also have to know a lot of JavaScript you don't have To be a master in JavaScript but you do have to know the es6 and how to work with the new features of es6 and all of that and you don't have to know the typescript because in this course we're not going to be using a typescript and then you also must have to know the reactjs and also the Redux toolkit and rtk query you also have to know that and you don't have to know these two courses

and you also have to know a lot of not J and a lot of expresses and a lot of okay and you can also skip the VJs and if you want to be fast like me so you can also take this course but you don't have to okay so let me just count there this is going to be the 1 2 3 4 5 six 7even and eight courses that you have to take then you would be able to follow along with this amazing project so yeah that's everything you need to know for this amazing

project and now let's get into it all right guys so now let me make a set of for recording Journey so I'm going to open my terminal right here inside my desktop and now let me just make that a bit bigger and what I want to do is that first of all I'm going to be creating a separate folder inside my desktop so I'm going to just WR not CD but mkd R and my M you can get any name you like and then I'm going to go into my movies so I'm going to just

write like CD my movies and now what I want to do is that I want to create my react project so I'm going to be just Using this Command right here it's going to allows us to create a new react project by using the weed and now here I'm going to just rename that to like front end let's just rename that to front end okay so now let me just hit enter Right Here and Now what we want to do is that we want to go into this front end folder right here so we are

currently inside a desktop and inside the desktop we have my movies project and then inside my movies we have this Front and folder right here you know what let me just show you there so I'm going to be using the ls right here and here you can see we only have this front end folder and now I'm going to go into this frontend folder right here and then I'm going to be using the npmi to install all of the packages which we need for the reactjs so it's going to install all of the packages right

in here so here you can see all of the packages are now successfully install And now let me just go back from this frontend folder so we are now inside this my muis project and now I'm going to be using the code Dot and it's going to open my vs code right here and you know what let me just use this code dot once again so it's going to open my vs code on the other screen right here okay so here you can see we only have this front end folder and inside this folder we

only have our react boiler plate okay so now the next thing which you want to Do is that you want to create a separate folder for the back end so I'm going to just create a back end right here and now the next thing which you want to do is that inside my movies not inside the front end and also not in inside the backend but here inside my movies let me just highlight that for you inside my movies folder I'm going to be initializing my back end stuff okay so now let me just write

npm in net come on I nit T-y so it's going to just initialize our note package right here and here you can see inside the file we have the name the version the description Main and all of that kind of stuff so what I want to do is that I want to just write the type of module okay so you just just have to write this save your file and now we have to install a lot of packages for the back end not for the front end but for the back end the first thing you

have to do is that we have to install The BCP so I'm going to be just writing the npmi and then let me just place this BCP right here now the next thing which you want to do is that we also need the body passord so now let me just place there right here and we're going to be also using the concurrently to combine the back end and the front end so now let me just install that the next thing which you need is the cookie parser so now let me just install there as well

and we would also need the EnV because We want to secure our file and here you can see we are now just passing orb right here and now let me just head space one more time we're going to also like obviously need Express ja so we're going to be also installing the express ja and now we are going to be also needing the Json web tokens now let me just head space one more time we would also need the mongus so now let me just install my goose and also the multer as well and finally

the noron Okay so now let me just hit enter right here but before I do I want to show you every single thing so we are now installing the B the body parser the concurrently cookie parser EnV Express Json web token mongus molter and normon so we are now installing all of their packages inside my movies not on the back end and also not on the front end okay so now let me just hit enter so it's going to just install all of that packages for me and now the next thing Which you want to

do is that we want to take care of the front end but now let me just leave this one to do thing and I'm going to just see you in a few seconds all of the packages are now successfully installed so now the next thing which you want to do is that you want to make sure that everything is successfully installed or not so here you can see we have a big CP we have the body part C currently and all of them right here so yeah that's cool but now The next thing which you

want to do is that we want to go into this frint folder and you want to install a lot of packages inside there so I'm going to just using the CD and front end so it's going to just brings us to that front end folder and now let me just use the npmi to first of all install the react icons we would also need the Redux toolkit so we're going to have to just write first of all the react Redux and then we would also need to install the Redux toolkit so now let me just

place the Redux toolkit right here let me just make oh you know I'm not going to make that a bit bigger and now we would also need the react router and now here you can see we are now placing the react router now we would also need the react router Dom so now let me just place that right here we would also need the react silk and now here we would also place the react silk right here and also the react toastify so here let me just place The react toastify and finally for the react

I mean like finally not finally yeah I guess finally this is going to be the final package which we are going to be installing so now let me just install sell car okay so now let me just make that a bit bigger so the first thing which we are installing is the react icons then the react Redux then the Redux toolkit then the then the react router react router Dom react silk react toastify and silk Carousel so now let me Just hit enter right here so it's going to install all of their packages inside this

folder right here now let me just make that a big bigger or you know let me just go into this folder and it's going to install all of their packages which we are currently installing inside this front folder right here okay so now let me just wait for that and it is looking awful but it will install there right here let me just make there a bit bigger and yeah and see all of the Packages are now successfully installed and now I'm going to close that and now what I want to do is that I

want to delete this public folder fer and I also want to delete this SS folder I also want to delete this uh yeah I also want to delete this app let me just go ahead and go to my app and now let's just remove every single thing from there and I'm going to be using this uh RFC shortcut and now let me just remove every single thing from the index. CSS And now I'm going to also remove this react strict mode from here let's just remove there and here you can see everything is looking a

okay but now the next thing which you want to do is that you want to ignore this node modules folder and now let me just write a DOT get ignore and here we are going to be just ignoring the node modules folder and here you can see that St or no moduls with s now let's just save there and now the next thing which you want to Do is that we also want to use the EnV and now inside this EnV first of all we're going to be defining our Port which will be 3,000 and

then we're going to be also defining our URI so I'm going to be using the URI URI it's going to be equals to the string of off let me just search for URI right here and I'm going to just search for come on Mongoose and here let's just click on myose and here let's just click on myose and I'm going to just Copy there okay so let's just copy that from here and now let me just place that right here and we are going to be using a single code here as well instead of writing

a test I'm going to change that to um M app or something and we would also need something that JWT secret which I already discussed so now now let me just Place some random text right here you can place whichever kind of thing you like you can pass one two 3 whatever so yeah that's looking cool but Now you know let me just first of all go to this front end folder and I'm going to just use first of all front end and npm not I but npm run dep to to run our project by

using this port so now let me just go into my port and let's just see here you can see we don't have any errors nothing inside there which is looking totally cool and a okay but now we also want to bind the back and also the front end functionality to one thing so for that we're going to be using a Script so I'm going to go ahead and go to my package.json and now let's just remove this script from here so now the first thing which I want to do is that I want to create

a script from my front end so we are going to be running our front end by using the npm Run front end so we are going to be first of all going into the front end folder and then and npm run Dev so that was the first script and now the next thing you have to do is that we have to duplicate that let's Just remove that and we will also have to create for the back end as well so I'm going to just write a back end and now here we are going to be

running our backend by using the node modon and then first of all we have to go into the backend folder and then inside this back end folder we are going to be just listening to this index.js right here so now finally let me just create for the full come on full stack you can give it any name you like but in my case I'm Going to just give it the name of like full stack and here what I want to do is that I'm going to be using the concurrently and first of all we going

to be just writing a back slash and inside that we're going to be using the npm run back end first of all and let's just close that and I'm going to be also using the back slash one more time and now let me just reuse my npm run front end like we are going to be first of all running the back end and then we are Going to be running the front end so for that what you want to do we just have to write one more back slash and then end off the codes and

now let me just put that down and here let me just provide a comma let's just remove that from here sell my file and now let me just go ahead and go to my back end folder and inside this back end folder we're going to be doing a lot of things we are not going to be doing that right now but now let me just create a few folders so the First folder I'm going to be creating for the config so let's just create folder for config the next one will be for uh the controllers

so controllers the next folder which we are going to be creating for the routes so let's just name it as a routes and we are going to also creating a folder for the middle wees so middle Wares and we are going to be also creating one for the models so now let me just write a models and here finally we're going to be creating a Folder for the utils so utility functions we are going to be writing it inside there now finally we just have to create a separate file inside there and I'm going to

just name that to the index.js and inside this file we're going to be defining a few things for now so you know let me just write let me just go back and I'm going to be just writing like uh yeah running baby or something like that now let me just save my file and here you can see we already Stop our server and now let me just go back from this front folder and here I'm going to be just first of all using the npm run back in So if I just write npm run back

in so here you can see it's going to run our file by using the nor modon so which is totally a okay so now let me just change something inside there s my file and here you can see it's going to gives us there yeah okay so yeah that's only working but now the next thing which you want to do is that We also want to run our front end so I'm going to be using the npm Run front end right here so now if I hit enter and here you can see it's going to

also run the front end for me and that's looking totally cool but now the next thing which I want to do is that I want to run both so for that we are going to be using The npm Run full stack stack there we go and now if I hit enter right here so it's going to first of all run my back end and then it's going to run my Front end right here which is totally amazing so yeah that's cool but now let me just remove that from here now the next thing you have

to do is that we also have to add over uh database right here so I'm going to just go to my fig folder and inside this folder we are going to be just creating a db. JS and now inside this file the first thing which you want to do is that we want to grab the from the and also we just want to create a function so I'm Going to just name that to connect DB and here we're going to be using the as synchronous function and now what I want to do is that I'm

going to be using the try and catch block and for the catch statement we are going to be just writing like cons. error and here let's just put our come on successfully connected to mongod DB okay and I'm going to also Place correct okay yeah this one right here now let me just also use the process. exit if you have some Sort of error so we're going to be just exiting out every single thing and finally let's just go back we're going to be exporting the default connect DB and now let me just provide my

logic inside there so if you want to connect to our database so for that we are going to be using the not but use. connect method and we're going to be using the process come on p r o CS process. ENB mangu I come on you know let me just Copy that from here and now let me just copy that from here and now let me just place it right here so we are now successfully connected to our database so we would also need some sort of a message inside the console what the hell am

I doing CLG and successfully uh s c a s f l y successfully connect here to mongod DB okay oh that's not what I want that's not what I want I'm going to have to cut that from here and then we're going to Be just writing console. error and here we're going to be just passing our error if we got one and now let me just render my error right here so error. message as not M Goose but message as m e s a e so error message as well now let me just save that

and that's every single thing that we need right here now the next thing which you want to do is that you want to use that inside our index.js file and now what I want to do is that I'm going to be importing a lot of Packages right here so we would need the express the cookie pass the EnV and also the path and that's every single thing that we need for now and now let me just grab something from the files so let's just name that as a files and we're going to be just importing

our connect DB from where let's just go ahead and go to the config file and then dot JS right here okay so now we just have to provide our configuration so I'm going to just write a Configuration I guess this is how you spell it so now let me just use the EnV and then do config okay and now let me just execute there and finally we're going to be also connecting to our database and underneath that what do you want to do we just want to create instance of our Express so we just want

to store the server app and not like that exps and now let me just execute that and here we're going to be also passing our middleware okay Wares as Well what the hell m i e l e w r s and now let me just use the app. use and we are going to be using the express. Json express. URL encoded right here inside that we're going to be just providing the extended extended to true and we're going to be also providing the app. use of cookie pars which we already grabbed and now underneath that

we just want to get our Port so we we going to be just writing a port it's going to be equals to process. env. port or just use the 3000 by default and now underneath that we're going to be just creating our routes and here let's just Define our route or you know we're going to be defining our route a bit later and now what I want to do is that I just want to listen to that Port so I'm going to be using the app. listen and I'm going to just listening to this port

right here and now let me just place my console. log of server is running on Port and let's just place this port right here Okay so everything is now successfully done now let me just go back to show you every single thing right here so first of all we are just importing our packages then we are just grabbing our connect DB then we are providing our configuration we are creating an instance of Express JS we are providing the needed middle wees and we are also grabbing the port and also we are just listening to that

Port right here okay so now let me just rerun every single Thing right here let me just zoom in a bit and I'm going to be using the npm run and back in this case and now let me just hit enter server is running on Port 3000 and also successfully connected to mongod DV so everything is now working totally as expected and now the next thing which you want to do is that you want to create a routes right here but you know I'm going to just take care of that in a few seconds but

we would also have to install the T CSS right here so What I want to do is that I'm going to just go back from there and then I'm going to just go into the front end folder now let me just hit enter right here so we are now inside this front folder and now let me just install the twin CSS so I'm going to just write like tell TN CSS right here let's just go to them and I'm going to be just hitting control K and then or you know let me just click on

this getting started onward here let me just zoom in a bit And then we have to click on this framework guides and here we just have to select our White Project right here what they are suggesting is that first of all we have to create our project then we have to navigate to their project and then we have to just use these two commands right here so I'm going to just copy there but now let me just go back to show every single thing and here now let me just place this Command right here okay

so it's going to Just first of all install the T CSS and post CSS and also the auto prefixer and then it's going to just initialize our project or tman css project by using this command and now let me just initialize my T CSS by using the npx T CSS in it DP that was a bit mouthful but now let me just hit enter right here okay it's going to just initialize our post CSS and also the tman config file okay so yeah that's cool but we have to test it Out so now let me

just use the npm Run uh not full stack but the front end there we go so it's going to do it oh we are already inside this front end folder so we have to go back from there and then we have to use the npm Run front end and it's going to do its thing but I just want to copy there let's just copy that from here we have to go ahead and go to or telling config file that there we go let me just replace that by using this one this new one which we

just Copied right here now the next thing you have to do is that we have to copy the CSS styling and now let's just save this file let me just go ahead and go to my SRC and then I'm going to just place it right here inside this index. CSS file which is already located inside the SRC folder and now let me just copy this H1 from here and now here let me just go ahead and go to my app and now let me just replace this div with this H1 so now let me just

SA there and here you Can see it is already running let's just stop there and now let me just use my npm run uh front end one more time and now let me just hit enter so it's going to just start my server once again and here you can see TN CSS is working totally as expected so we can change whatever you want to change like Toft till I don't know 200 or something like that and here you can see that's working totally a okay and yeah that was all about the setup of This project

so we would have to take care of a lot more than that but yeah that was just the entire setup of this amazing project so that was the setup now let's take care of the user management so I'm going to go ahead and go to my back end first of all and let's just go into my index.js file and now underneath inside the routes so now let's just Define a route by using the app.use and we are going to be going into the API the version one and then The users because we are currently taking

care of the users so we're going to be justifying the user routes and a few seconds but first of all we have to define the schema so I'm going to just take care of the user routes in a few seconds but now let's just take care of the schema or the model whatever you want to call this so user.js would be fine and now let's create our model right here the first thing we have to import is the from and then We also have to create our schema so cons user schema will be now equals

to Mongoose come on Mongoose there we go Mongoose schema and here we just have to Define our schema right here so the first thing which you want to do is that you want to put the username and inside this username we're going to have to define the type oh my God what the hell let's just remove that and also remove that one as well and now inside there for the type it's going to be set to String and it's going to be required like the user should have to provide the types are required like that

let's just sell our file so this is how we're going to be providing a username now let me just take care of the email as well so we're going to have to WR a type of string and also required uh will be set to true and it should be unique so unique u n IQ will be also set to True let's just create for the password as well so we are going To just providing a type of string to it and also it should be required set to True let's just provide our comma there and

finally we just have to take care of the is admin okay so if the user is admin so it's going to be a to only Boolean and whether the user is admin or not and then let's just provide a required we'll be now set to three and we have to just provide a default instead of that to false okay so by default the user will be not admin and Then we can make it as admin if you want it to and now let me just Pro my time stamp right here so times come on times

STS will be set to true as well okay so let's just save there let me just go back and this is how we are going to be creating our schema so first of all we are providing the username then the email then the password then the admin and finally the time stamps so now underneath all of that we have to just export that right here so we're going to Be just creating a user it's going to be equals to the mongus do model and here we just have to pass our user right here and let's

just pass our user schema and now let's just export that so we're going to be using export default of user so now let's just save that but now we have to create our routes right here so we're going to be just creating a route of the user routes.js so now inside these routes the first thing which you have to do is that we have to grab or Express from expressjs and now the next thing which you have to do is that we have to also grab a lot of controllers so we are going to be

grabbing controllers right here and we will also grab the middle wees as well but we're going to take care of that in a few second but now let me just create my router right here so conso router we be now set to express. router okay so now underneath that what do you want to do and here we just have have to Define our Router. route as simple route when somebody go to the user so what do you want to do in that case so if somebody post something so now let me just WR a post

request then we're going to be passing our create user right here so now let me just create that right here I'm going to sve this file and we're going to be also exporting a router so cons export default router right here default DF a l t there we go and now let me just create this controller word here Now let me just save there and what I want to do is that I want to go to my controllers inside these controllers we're going to be creating our user controller.js and inside there the first thing which

you want to do is that you want to grab our user from where from our model so where is our model let's just go ahead and go to our models then we have to just write a user.js and now underneath that we're going to also need the BCP so I'm going to just write a Bcjs from where from the bcjs okay so now underneath there we're going to also have to just uh create a token and also the asynchronous Handler so now let me just take care of that in a few seconds so I'm going

to go into my middle wees right here and we're going to be creating two middlewares the first one which I'm going to be creating for the async Handler handler. JS and then we're going to be also creating for the off Middleware doj whether the user is authenticated or in admin so we're going to be creating our custom Asing Handler right here so I'm going to be just using like Asing Handler you can give it any name you like and it's going to take a function as a perimeter it's going to also take the request the

response and also the next because this is a middleware so we have to pass the next right here and inside there what you want to do we just want to write a Promise. resolve and when the promise is resoled so we're going to have to pass this function once again uh and which is which we are taking right here as a perimeter and inside that we're going to have to pass our next perimeter right here so we're going to have to just write request and response and also the next as well and now inside there

or you know not like this we have to catch something if you have some sort of error so for that if we have some sort of Error so we are going to be catching that error by using rest. status and then we have to just pass 500 and we just have to write a Json provide a message to that and we're going to be just passing our error. message okay so that's there now finally we just have to write export default and Asing hand Asing hand alert there we go now let me just s my

file and that's it about the asynchronous Handler and now let's just take care of the Earth mware the first Thing which I want to use that I want to take care of the JWT so we're going to be just grabbing the JWT from the Json web tokens and I already discussed all of that things in my merge St course and also in the other projects so I'm going a bit fast that's because I already discussed all of that things so now let me just go to my models and we're going to have to grab our

user.js and then we also have to grab our sing Handler from where from let's just go ahead and go to Our asynchronous come on from sing handler. JS right here okay so then the next thing you have to do is that we have to check if the user is authenticated or not so for that we're going to be creating a function which will be authenticate and it's going to be now equals to the S synchronous or a sync Handler function which we already created right here and we're going to be providing yet another call back

function So request response and also the next and now inside that we're going to be just creating a separate variable right here for the token and now we are going to be initializing a token to there so it's going to be coming from the request. cookies and then the JWT the Json web tokens and I'm going to show you where this coming from so read JWT from the um JWT cookie which I'm going to show you so now let's just check if the token is valid or not but first of All we have to check

if you even have our token or not okay so if you have the tokens so for that we're going to be using the try and catch block and if you have some sort of Errors so we're going to be just like res. status and then here we just have to passord 401 and then th new error uh not like that but error not authorized no token failed there we go and now if we have the token and token is valid so what we want to do we Just want to decode that so we're going to

be just using decoded and it's going to be equals to A JWT and verify function and here we just have to passw token and also the process. EnV and we all already defined our JWT Secret in other file which you can see right here inside this EnV we are now defining our JWT secret and we're now passing that secret right here okay so now the next thing which you have to do is that we have to get the user so request. user Will be now equals to a user. find a a w a t a

find uh not just find but find by ID we are going to be first of all getting the user and then we're going to be just writing a code. user ID we are going to be just getting the user ID and we are going to be just selecting the password like we need every single thing but the password we don't need the password okay so now let me just use the next and now let's just go back and that's everything we need to do for now But if you don't have the token so that was

like if we have the token so we're going to be just decoding the token we would need every single thing about the user but we don't want to get the password and then finally we just want to get to the next middle where and what if we don't have the token right here so what do you want to do in that case so for that we're going to be just using like rest. status and then 401 and here we just have to write a throw new error Of not authorized and no token we don't found

any token so yeah that's it about how we going to be checking if the user is authenticated or not now let me just collapse it right here now the next thing which you have to do is that we have to check if the user is admin or not so check uh if the user is admin or not okay so I'm going to be just creating a function I'm going to just give it name of like authorize authorize admin it's going to be equals to the Request response and also the next and inside that we're going

to be checking if request. user and request. user do is admin okay so we're going to be getting these two values from our request then just go to next middle where like everything is totally a okay but if the user is not in admin so we just have to write like r. status of 401 and then um let's just send this message right here which will be not authorized uh as in admin okay so now let me just save There and finally we just have to export both for middleware so I'm going to be just

exporting the authenticated and also the authorize is in admin so now let me just save there and we're now totally done with both of these middle wees right here but now we have to use them somewhere I'm going to just close it right here and now let me just grab that right here so the first thing which you have to do is we have to grab our async Handler async Handler from where From or sing Handler so let's just go to my uh Metar right here let's just go to my sing Handler we will also

need to create a token I forgot to show you that first of all we have to just do that and I'm going to just go to my utility function right here and we're going to be just creating a token so I'm going to just give it the name of like create token. JS and to create a token the first thing we would need is the JWT from the Json web tokens and also let's Just create our tokens so I'm going to just Define a function generate uh generate token is going to be equals to the

response and also the user ID and inside there what you want to do we just want to get the token first of all so cons token will be coming from the JWT sign and we are now going to be just destructuring the user ID and then we have to just write a process.env and we already Define our JWT secret and then we have to just pass Our expiration uh dat right here so it's going to have expired in 30 days so now let me just pass my 30 days and now let's just save that so

this is how we are going to be creating a token and now the next thing which you have to do is that we have to set the token as an JWT HTTP only cookie so now let me just WR a set JWT ASN HTTP only uh cookie there we go so now let me just save that and let's just close that right here and now we are going to be using rest cookies uh Not cookies but just a singular cookie and we have to just write a JWT for Json web token and then we have

to just write a token which we already generated right here let me just show you that which we already generate right here now the next thing which you have to do is that we have to place these properties and values so HTTP only will be set to True secure will be just getting from the oh I forgot to do now let me just copy that just realize that I forgot to do that Let's just place that right here and I'm going to just place it right here it's going to be equals to the development DV

PM n there we go and now let me just save there and the secure will be set to the node envirment not equal to development so in this case this is set to development but when we launch or deploy this project so it's not going to be in the development mode so then it should be secure so then the same site will be set to straight and here we are Just providing the max edge of 30 days right here okay so now let me just save that and now let's just return there right here so

we have to just write return token and there you have it underneath that we are going to be just using export default of generate token right here which we already create right in here okay so now we successfully create our token but now we have to use that okay so now we are going to be using it right here and to use that the First thing we would need is the create token from where let's just go to my UT tails and then we have to go to the create token word here and now finally

we have to create our user so we are going to be just writing like con uh create user and it's going to be equals to the asynchronous Handler async Handler function which we already defined and now let me just provide my sing Handler of request response and inside there we're going to be just Restructuring the username the email and also the password from where from the request. body and now let me just write a cons. log of create not create but usern name and also the email and also the password as well so now let

me just save that and finally we just have to export the create user from there and now let me just save there and we have to grab the controller from there so we're going to be just using like import create user and let me just hit enter Right here and finally at the end we have to just specify this. JS and now let me just we are already using the word here but I forgot to show you one thing we have to go to the index.js file and we have to import the word here so

let's just try it's not going to just Auto Import we have to manually import that so we're going to be just importing this user routes from where let's just go to our routes and inside this routes we have the user routes.js now let me Just save there and close every single thing and for that we're going to just using npm run back end and now let me just hit enter and here you can see we don't have no errors inside there now we can use either the Thunder Cline or the postman so throughout the course

I'm going to be using the postman because I know a lot of people don't already know about the thunder cin so I'm not going to be using that although it is called tool and I always like every single day Use this thunder CLI but in this course we're going to be using this Postman word here so now let me just create a blank collection right here and I'm going to just name it like M project or something like that and now inside that we're going to be just creating a few folders or not folders but

files and let's just create a add request and we are now first of all creating or create user right here and what I want to do is that we are listening to this port right Here and you know first of all let me just Define my Local Host let me just Define http then Local Host 3,000 and we are now listening to this port right here which is API come on API version one and then users okay so now if I hit or you know it should be a post request right here because currently we

are just listening to the post method right here okay and we also have to send some sort of a data inside there so for that we're Going to be just sending some sort of a data inside the raw and then we have to click on the Json and now let me just provide some sort of a data right here and I'm going to just pass let me just zoom in a bit Ah God damn it let's just click on that and here we're going to be just passing the username first of all so username and

the username will be set to Alex and then we have to just uh specify the email for that so we would have like Alex gmail.com and we also Have to provide some sort of a password for that and password will be like alex12 or something like that and now let me just click on the send button and here let's just check out okay it's not working I don't know why but we are just getting some sort of error okay so 404 not found what's up what are we doing uh 3,000 is okay but ah I

forgot to include the one right here we have to just write this version one and then we have to click on the send button and Then it's going to give us the username the email and also the password right here at the end okay so this is how we're going to be sending the data by using the postman and now let's just create our user actually so now let me just get get into that and we're going to be just removing this code from here and now let's just create a real user but before we

create a user first of all we have to validate so we want to check if we don't have the username or if we Don't have the email like if the user did not specify the username or the email or the user did not specify the password so what you want to do in that case we just want to throw new error like throw error and we just want to say like please fill all the fields right here okay so if the user does Pro all of the input field so what you want to do in

that case we just want to check for already existed users so we're going to be just writing like const user exist And it's going to be equals to aent and user. find one which is Mongoose method and inside that we're going to be just passing the email okay and we're going to be also checking if you already have user already existed uh so what do you want to do in that case you know what let me just make that as a oneliner and we're going to be just runting like r. status of 400 100 and

we just have to write a send user already exist s there we go now let me just sell that so at This point we are not creating the user but now let's just generate our user so first of all we are going to be just hashing the user password so hash the user pass user password right here and now if you want to Hash the user password we're going to have to provide some sort of a salt inside there so for that we're going to be using a and then bpjs not JS but just a

BCP did I name it as a BCP JS it shouldn't be a JS just a BCP now let me just copy that and now Let me just place it right here as a b crib and we have a method inside there which is a gen Sal so it's going to just generate a solt for us and then we have to pass the generated salt inside our hashed password so we have to just write a hashed password and it's going to be equals to A and then let's just use our BCP one more time and it

should be a w we have to use our BCP one more time and we just have to Hash our password by using this hash method and here we have To specify this password right here which we are already getting from the user okay so we have to specify the hash password and we want to provide a Sol of this 10 randomly generated uh something some text right here like I don't know the numbers and yeah it's going to just generate a solt for us and we want to provide that salt into a real password and

now the next thing which you have to do is that we have to create a new user so we're going to be just writing like Con uh new user it's going to be equals to new then we have to just specify the user model word here and we have to just write a username which the user is already giving us and also the email and also the password we are not going to be just writing a password but instead we have to pass our hash password right here okay so now let me just pass this

hash password and that's it this is how we going to be creating our user but now we have to store this user inside our Database over there we are going to be using the try and catch block for the catch we're going to be just writing like r. status of 400 and underneath that we're going to be also just um providing some sort of error like uh invalid U user data or something like that and for the tri block first of all we are going to be storing our user inside our database so for that

we're going to be just using the come on the schema name or the variable Name by Which we are creating our user and then we have to just specify the save method so it's going to just save our user to our database and now we have to also create a token based on the user so we're going to be just writing like create token that function which we already created right here inside the UT Tails file here you can see we already defined this function it is taking the response and also the user ID and

we are now grabbing there right here so now we Have to just specify there and so what I want to do is that we have to just specify the response and also the new user so it's going to just gives us the ID right here already so that's some good things so we are now providing a specific user new ID right here so based on that ID it's going to just create a token for us okay so now underneath that we just want to show some sort of a message to user like yeah the username

and everything is totally a okay so We're going to have to just write like r. status and we have to just write 2011 like the user already created or the user just created like the new user created and we're going to have to just write IDE of new user and we have to just get the unique ID from there we have to define the username and the new user and then we have to just WR a username and also we have to define the email we have to just WR a new user and then the

email and also finally is admin Uh a DM i n and then we have to just WR a new user dot is admin okay so now let me just sell there and now let me just go back and let me just say that once again so the first thing which we are doing is that we are grabbing the credential from the user and then we are checking their credential and all of that field so if the user did not specify any of the field or if the user Miss any of these fields so we're going

to have to just pass this error please Fill all of the input fields and then we are checking if the user already exists inside our database so for that we're going to have to pass the user already existed if the user provide every single thing and the user is not already existed inside our database and then we have to just generate the salt and we have to pass that salt into a real password so it's going to just make it as a random characters and then finally based on that random characters and the User data

first of all we're going to be just providing the user entered username then the email and we're going to be also providing the hash password so that nobody can see that and finally we are just saving the user to the database and we are creating a new token based on that specific user ID and finally we're just showing something to the user like yeah the user is created or not okay so now what I want to do is that let's just go back ah that was a lot that was a lot Of going back okay

so now let me just create my user right here and for that we are going to be going into my mongod you can use the mongodb compass if you wanted to but I'm going to be just using my mongodb so now let me just drop this already created datab bases so H movies and we also have the movies app let's just delete that so movies app come on movies app and now let me just hit enter right here and here you can see we don't have any other databases but now if I Click on this

button right here so it's going to just gives us uh this preview right here it is now set to Raw but if I click on the prev so it's going to just make it free I can also click on the visualize and then click on this visualize response and then click on the continue so it's going to just take a bit of time and here you can see it's going to just create a table for us so we have the user ID then we have the username then we have the user email and Also the

user is not admin okay so now let me just show you that inside my real database right here so now let me just refresh that and here you can see we have a movies app we have a users collection inside there now let me just click on that then we have to go to the document inside this document we only have have one document right here so we have a uniquely created ID right here then we have a username then we have a email and here you can see the password Is totally hashed and the

user is not currently set to admin so it is now set to false and the created de is this de right here okay so yeah this is how we are going to be creating a new user now I want to create a few more users so that we can work with them so I'm not going to be just clicking on the test I'm going to just click on the body and I'm not even going to be just visualizing this so I'm going to just click on this pry right here and now let Me just uh

change all of their data so I'm going to be just creating first of all myself but before I create myself I'm going to have to drag that at the bottom I guess and now let me just create myself so I'm going to be just creating myself which is husan baby and now let me just create husan gmail.com and we have a h12 okay now let me just click on that so it's going to just create that hen for us then we have Al we already Created alexer Jordan and I'm going to just create Jordan and

also Jordan one two let's just click on that and finally we're going to be just creating a few fruits so mango and we have mango and mango and now let's just click on that finally let's just create for one for the I don't know banana one of my oh you know not banana but Sprite uh Sprite like that copy there place there last there right here let's Just save there so now let me just show you all of their users so I'm going to just refresh there and here you can see we have all of

their users right here so this is how we are going to be creating a user but now let's talk about how we going to be logging in a specific user so I'm going to go into my user route here we have to just register a new route so we're going to be just writing like router. poost and then we have to just write off inside there and login User so we're going to be creating this controller right here we have to first of all grip grab it save this file and then we have to create

it right here so now let me just create my login user and it's going to be also an asynchronous Handler we have to just passord a request and the responses as well and now inside that we're going to be just getting the email and then the password from the user then by using that same email and password we would be able to Successfully log in and log out so you know let me just write cons. logo of email and also the password as well are we want getting the user email and password or not so

now let me just copy that place it right here sve my file and now let me just create another request right here so add request and in this case this is going to be the get request or not a get request it should also be a post request right here so now let me just make that as a post request I'm Going to just go back so you guys can see everything a bit better and now let me just copy this exactly same thing and now let me just place it right here now in this

case what you want to do we just want to write the O okay so now let me just copy that and now let me just place the off and we also have to send some sort of a data right here so we are going to be just writing uh binary not yeah raw and then Json and here we just have to specify first of all the user Not a username but the email so the email will be uh Alex gmail.com and then we have to just specify the password for that Alex we're going to have

to just write a password uh not password but Alex one to okay so now let me just click on the send button so it's going to just uh what's okay so it's going to just gives us the email and we are also getting the password right here which is totally a okay and now we have to save This file everything is looking totally a okay based on this email and password we are going to be logging in the user but first of all we have to check whether if you already have the user in the

database or not so we going to be just work like exist exis user there we go it's going to be equals to aware and then user model and we're going to be using the Mongoose method which will be the find one and we are going to be just providing the email So now let me just log that email right here or existing email or user why am I saying email okay so here if I click on the send bound right here and here you can see it's going to gives us all of that data based

on that specific user which means like yeah this user is already inside our database so what do you want to do in that case we just want to provide our if statement if you already have the user inside our database so what do you want to do we Just want to compare their password whether the user is providing the valid password or not okay so con is password valid so what do you want to do we just want to write a BCP and we have a compare method inside there and we're going to be comparing

this password which the user is providing right here and also we have to just uh search for the existing user and then we have to just search for a specific password right here which is already defined Inside our database so yeah that's cool but now the next thing which you want to do is that you want to also check for the valid password so if the password is come on not his password but uh is password valid so what do you want to do in that case we just want to create a new token so

we're going to be just using Create token we have to provide a response and then we have to just put existing user and set that ID right here and finally we have to show Some message to user so we are going to be just showing the user ID the user email and I mean like the usern name and the email and also whether the user is admin or not okay so if that's not the case what do you want to do in that case so like if the user is not authenticated so what do you

want to do in that case we just want to write oh no here I'm going to cut that from here now let me just place it right here and now we have to just specify r. status and for the Status we're going to be just passing like 401 and then Json okay and here we just have to pass the message and the message will be invalid password there we go now let me just save there and underneath this Li Braes we're going to be also defining our else block right here so rest. status of 401

right here as well and we're going to be just providing the Json message and the message will be user not found okay so if the user credentials are invalid so The user will not found okay so now what I want to do is that I want to do a review first of all we are getting the email and the password from the user and then we are checking if we already have our user based on this email and password I me like based on this email so if we already have the email already available inside

our database then we are checking for the password validation so if the password is valid what you want to do we just want to create a new Token based on that password and we're now specifying the existing user and ID to that and finally we are just showing something to the user so if that's not the case so we are just providing like invalid password or if that's not the case we are just providing like user not found so now let me just test this out by using the postman now let me just save that

and here we are working with with login or user login would be fine okay so we are now logging this specific User inside well you know first of all let me just show you the cookies now if I click on that here we already have there but now let me just close that from here you know I'm going to just close this entire thing right here now let me just go into my login user once again and now let me just click on this cookies right here and here you can see we have a zero

cookies right here but as soon as I pass the email and also the password and now if I click on the send Button right here it's going to just show us like this user is now successfully logged in and now if I click on the cookies here you can see it's going to just giv us that JWT cookie which we are already creating right here let me just show you that which we are already creating right here so we have a JWT cookie right here which we are providing so we have a response. cookie so

we have response. cookie and we're now providing a JWT cookie right Here and this is going to be over value right here okay so yeah we are now creating our cookie but now I want to just click on this cookies right here and here you can also see we are now successfully logging in this specific user so yeah we are now setting the cookie which means like we are now successfully logging in this specific user so now what I want to do is that I want to close that now let me just reopen that once

again and now let me Just click on the cookies once again so here you can see we already deleted that cookie now I want to log in some other user like I don't know myself or something like that I'm going to just log in myself so we have a hosan we also have hosan one2 and now let me just click on the same button one more time it's going to just use us that same not same but totally different cookie right here and now let me just click on that here you can see it's going

to also Gives us so yeah this how we are going to be logging in a specific user okay so we are now totally done with this login as well now let me take care of the logging out okay so now let me just duplicate there and instead of writing off we are going to be just writing a log out and here it should be the log log current user I'm going to copy that and let's just place it right here and we're going to be creating this controller in a few second I'm going to Copy

this name now let me just go ahead and provide it right here and now let me just create that controller so we're going to be just creating like log out ah not log current user but log out the current user I'm going to copy that or you know I'm going to copy this entire name let's just place it right here s file and I'm going to also place it right here in both of these areas s file but now now we have to provide our async nness Handler so we have to just write Async Handler

we have to provide our async request response and inside there we're going to be just using a rest. cookie we're going to be just providing a JWT because we are working with the JWT and we are just providing the empty cookie okay and we are going to be also providing the HTTP only which will be also set to three and we're going to be just providing the expiration dat so expires at new dat recing this same second finally we just have to show some Sort of a response to the user like yeah we are totally

logged out so I'm going to just write like message and here we just have to write like logged out successfully there we go so now let me just save that and now let me just test this out so I'm going to just save there and here you can see we have this JWT right here but now let me just close there we are going to be creating yet another uh request right here I'm going to just give it the name of like uh log Out it should be all so post request and now let me

just copy that same thing and now let me just place it right here collapse that and instead of writing off we are going to be just writing like log out here you can see we already have this JWT right here but now if I click on that so it's going to just give us that result right here like logged out successfully and here you can also see inside the cookies we don't have any cookies right here okay so now let me Just save there let's just close there let me just reopen there once again and

then if I click on this cookies one more time and here you can see that cookies are totally gone okay so yeah this how we going to be logging out the users so now let me just show you this entire flow one more time okay so here you can see this how we're going to be logging in the user user login I'm providing my email and also the password credential now let me just click on there so it's Going to just set this cookies and here you can see we have this cookie and now if

I click on these cookies so we already have one cookie right here which is totally okay and now let me just close that and now let me just go ahead and go to my log out and click on this cookies right here so we have this JWT cookie and now if I click on this send button we would not see this cookie right here inside this cookie and if I click on this cookies right here and Here you can see that cookie is totally gone okay so yeah this is how we're going to be logging

out the user so let me just rename that to user log out or something like that and rename that to user log out there we go now let's talk about how we are going to be getting all of the users inside our database so for that what do you want to do and yeah for that we're going to have to first of all import our middlewares which is the authenticated and the authorized so We're going to have to first of all import the something from let's just go ahead and go to not a config but

middlewares then we have to go to the off middleware right here and we're going to be importing our authenticate and also the authorize as an admin and now we are going to be just creating yet another uh dog right here because we are getting the users so in this case the user should be authenticated and also authorize as an admin so authorize as an Admin then they would be able to see all of the user the regular user cannot be able to see all of the users the users should be authenticated and also authorizes an

admin then they will be able to see all of the users so we're going to be just writing like all the users come on get all users like there I'm going to copy that and now let me just place it right in here save my file and now let me just copy this name let me just go ahead and create there Right here but first of all we have to register there and now let me just create there right here so con get all the users we're going to be providing our async Handler and we

have to just specify the asynchronous request and also the response and now inside there we're going to be just using a mongoose method so we're going to be just writing like users aware user. find and we're going to be getting all of the users so now let me just write like rest. Json And users save my file and now let me just test this out so I'm going to just creating uh get all the users so now let me just write like all users right here and now let me just close that and by the

way I have to copy that I always forget that so now let me just copy then place it right here and here we are not going to be just writing a log out we're using the get method so it's going to give us all of our users right here and I just way zoomed in I don't know why But now let me just uh zoom in a bit like that and now let me just click on this send button one more time so it's going to okay not authorize no token because we are currently not

authorized like we are not providing our credentials we have to first of all log in and we also have to be an admin so here you can see we now getting like not authorized not token but now we have to be log in okay so here you can see this how we're going to Be logging in we now successfully logging in we are getting this uh JWT cookie right here which is totally a okay but now come on how the hell can I close this but now if I try to get all of the users

it's going to gives us a different warning it's going to say like not authorized as an admin like you have to be an admin then you would be able to get all of the users so now let me just make this hosan as an admin I'm going to go ahead and go to my Mong B let me just Found myself so this is a mango Jordan and this is Huzan right here okay so now let me just make myself as an admin let's just remove this false and I'm going to just set that to True

sell my file and now I am totally in admin and now if I click on this send button right here it's going to gives us all of their users right here because currently I am logged in and I'm also in admin so that's why I can totally see all of the users and all of the users data right Here so yeah so the admin can see every single thing so this is how we are going to be getting all of the users by using this user. find method okay so yeah now let me just close

this one out now the next thing which I want to do is that I want to get a specific user profile so underneath that we going to just creating like router. route and it should be going into the profile and we're going to be also changing the profile later but right now the user Should just be authenticated the user should not be authorized as an admin but the user should be authenticated then we would be able to get the current get current user profile so now let me just copy that and now let me just

place it right here s my file and now let me just place it right here as well now and now let me just create them so what I want to do is that I want to create my controller as the asynchronous Handler and we are going to just also passing The asnc request and also the response as well and here inside there we're going to be first of all getting the user by using the AET and then user find by ID and here we have to just specify request user and their unique ID word here

okay and then what else do you have to do we have to check if you already have the user or not okay so you know first of all let me just show you there I'm going to just log to the console this user sell my file and now I'm going To go into the specific user which is an Alex I'm going to copy his ID right here so now let me just test this out so I'm going to go ahead and go to my Postman and create a new request and here get specific user okay

so let's just copy there place there and it should be a get request and we're not going to be using the O but instead we are going to be providing the user ID so I'm going to copy this user ID one more time which is an Alex copy there and now let me just Place it right here click on the send button so it's going to just uh what's up and I forgot to include the profile so now let me just provide a profile and then hit enter right here still getting that error let's just

check it out so here you can see let's just copy this profile and instead of writing users and let's just place this profile but why it's not working uh and the user should be the method is good the user should be authenticated and we're now getting get All of the user profile we don't have to provide that specific ID we just have to users and profile and now let me just click on the send button right here and now let me just open my terminal so here you can see it's going to gives us that

specific user ID right here okay like the user which is already logged in okay my bad I was providing an unique ID right here I was just thinking about something else so now let me just close that now let me just save there so why Are we getting this specific user data that's because we are logged in as this specific user that's why we are now getting this specific user credential or the specific user information right here okay so let's just close that and yeah that's to okay but you know what get a specific usero

okay so yeah we are not toally able to get the user credentials and not a credential but the user information right here and now what I want to do is that let me just remove This console. log from here and here we have to first of all check if you already have the user so we just have to write like res. Json and we have to just specify the user ID and the user ID right here the username will be just set to the user username and also the email will be set to user. email

okay so if that's not the case if you don't have the user so what do you want to show to your user you just want to say like four or four user not found so throw new Error and I am going to just say like user not found and Dot okay so now let me just s there and let me just test this out so now first of all if I click on there here you can see it's going to give us the user information right here but if I click on this cookies and remove

this Cookie From Here and Now if I click on this send button right here so it's going to give us like not authorized no token it did not found the token so that's why we now getting this Uh no no token right here okay so yeah this how we're going to be getting a specific user or getting a specific user profile but now let's talk about how we are going to be updating the users so we are going to just writing the dot put method right here and the user should be authenticated not authorizes an

admin but just authenticated and then update the current user profile now let me just copy this sa my file and now let me just place it right here inside a controller Area let's just copy that and I'm going to be just placing it right here and now let me just create that controller let me just go back and I'm going to be just creating this controller by using the asynchronous Handler and we have we have to provide our asking request response and inside that we're going to be just getting the user by using the a

user find by ID and let's just provide a request and then the user and then the specific user inside our database so if We already have the user so what do you want to do with that user uh we just want to get the user and then the username and it should be coming from the request. body. username we are going to be specifying that so if that's not the case so we just want to stick to the default username so we just have to write the user and then the username right here okay so

if the user already specified some sort of a email so that email will be coming from the request. Body. email so if that's not the case we just want to stick to the older one or the previous one which is just a regular user email so inside there we're going to be providing yet another check which will be if the user request. body if the user also specify the password so we just want to provide a salt and we just want to use aware and then BB and then we have a generate salt we have

to we have to generate the salt and we have to also hash the password so we have a hash Password will be now equals to a wa and then BB and we have a hash password we are going to be just proving the request. b. password which the user will gives us we're going to be also adding a salt to that and then user. password will be equals to this hash H HED password right here okay so now let me just save that so this is totally a okay so now underneath we going to be

just updating the users so I guess underneath this one yeah we going to be just Writing like updated User it's going to be equals to A and then user. save so we just have to save this updated user and we also have to show some sort of a message to the user so we're going to be just showing to the user the user ID the email I mean like the name the email and also the password not a password but if the user is admin or not okay so now let me just take care of

the else class for the else block so what do you want to do we just want to provide a rest. status Of St us of 404 and let's just throw new error which will say user not found okay so now let me just save there and now let's just test this out let's just copy there and I'm going to be creating yet another request right here and let's just place it right here and I'm going to say update user and it should be a put method and now let me just go to the body then

go to the binary not a binary but the raw and we are going to be providing some sort of Raw data right here okay so what do you want to do we logged in as oh we didn't even logged in we have to be logged in okay so let's just go ahead and log in as someone Alex maybe I'm going to just log in as Alex and we have the password of alex12 and now let me just click on this send bound so we are not logging in what's up hash is not defined where are

we oh we are getting the hash let's just remove this There like so and where are we using one hash now let me just save there and here you can see everything is okay now let me just click on this button one more time and we are now logging in as an Alex right here which is totally cool but now let me just go ahead and provide some sort of a Json right here so the first thing which I want to do is that I want to change the Alex name to something else so uh

let's just zoom in a bit and we are now log in as an Alex But now let me just change the username to something else so I'm going to be just providing like uh I don't know computer and I also want to change the email as well so instead of providing an Alex gmail.com I'm going to just change there to computer gmail.com and I'm going to also change the password of the Alex so I'm going to just change that to computer one two okay so now let me just first of all show you there and

here you can see we have Alex name then we have Alex gmail.com and we have this password right here but now let me just close this one as well and we have that Alex on the top and now let me just click on the send button right here let's just go back and let me just show you that so here you can see the username is now changed to computer the email is changed to computer gmail.com and he is not an admin so it is now set to false and now let me just click on

the first one once again and here you can see instead of Getting the Alex we're now getting the computer and also computer at gmail.com and H password right here that was a a lot of talking so yeah that was it about uh for the back end of creating the user updating the user getting a user specific profile getting all of the users and all of that kind of stuff like how we going to be authenticating and authorizing as an admin how we going to be creating a token and all of that so yeah that was

Just a backend part of how we are going to be managing our users so we are totally done with the backend logic now the next thing which you want to do is that we want to use that same logic inside react component and the UI okay so now let me just go ahead and go to my we config and here we have to provide our proxy right here underneath that we're going to just creating a server and inside the server we are going to be providing the proxy and Proxy like that and the proxy will

be first of all for the API and now let me just provide my HTTP and colon colon local host of 3,000 we're going to be God what the hell did I just do let me just retype them once again so local host of 3,000 and now let me just put a comma here I'm going to copy that same thing and we're going to be also taking care of the uploads a bit later but now let me just provide my uploads folder right Here and now let me just provide a proxy for that okay so I

just messed it up right here let me just place it right and this how we're going to be providing a proxies for our Weir project so now the next thing which you want to do is that we are going to be creating our folder structure right here so so I'm going to be just creating a comp let me just zoom in a bit and I'm going to be just starting from the components and inside they we're going to be just Creating a loader components loader. jsx I'm going to take care of that in a few

seconds but now let me just create another folder which will be for the pages inside this Pages we're going to have a few folders and I'm going to just create first for the off and the second one will be for the user and now let me just collapse that now let me just create another folder which will be for the Redux so in this case redex is a bit appropriate name but in some situation People give it the name of like app and yeah you totally get the idea and now let me just create another

component inside this redex folder which will be for the API and now let's just create one for the feat or features and now inside there we're going to be creating one for the Earth as well so that's there but now let me just create my store inside this retex folder and I'm going to just give it the name of like store.js and now let's just start from The the store first of all and what I want to do is that to create a store first of all we have to just write a configure uh store

function from where from the Redux toolkit okay so we are going to be grabbing there first of all let me just proide my curly braces right here and underneath that we're going to be also grabbing our setup listener setup l i s t n e r from where from our redex toolkit and then we have to go into the query come on query and then we Have to just write react now let me just go back back and now underneath that we're going to be creating our store right here and we are going to be

just calling our configure store function and inside that we're going to be providing a reducer and in this case we're not going to be providing any reducers to it and now let me just export default or store right here and also the setup listener will be listening to the store. dispatch something which I'm going to be Doing in a few seconds and you know what I'm going to also provide my middleware right here for the K so middleware will be now equal to the get default middleware come on ah get default m i d l

e w a r e like so and now what I want to do is there is going to be set to the get default middleware one more time and we are going to be calling there and we are going to be just concatenating or API slice which we did not create it not right now but we are going to be Creating in a few second now let me just SP my comma and then we're going to be setting the dep tools to True okay so now let me just go back and then single thing that

we need for the store okay so yeah that's that but now we have to use the store inside our main component so now let me just go to my main component and the first thing we would need is to import the store let's just import that right here let's just go ahead and go to our store uh you know one file then we Have to go to the Redux then we have to go to the store right here not API but let's just WR a store.js and then we also have to import the provider so

I'm going to to be just writing an import Provider from where from the react Redux and the next thing which I want to do is that I'm going to be also using the react router so I'm going to be just grabbing the router or route first of all let's just grab the route and we're going to also have to Grab the router provider and also the create routes from elements okay so we're going to be getting there from the react router and underneath that we're going to be also getting something called the create browser come

on let me just get the create b r o WS browser router from where from the react and router Dom so we're going to need all of that stuff and now let me just also provide a comment for the off user and also for the restricted user so Restricted user now underneath all of them we're going to have to create a router so we're going to be just writing like cons router and let's just use our create browser uh router and it should be an uppercase B let's just make that as uppercase B I'm going

to copy and place it right here and now we have to use that and now inside that we're going to have to pass or create routes from um element right here inside that we're going to have to just pass our route Okay so now let me just close there and it's going to take the path of home and here we have to pass the element or the component as an app component which we are I guess already grabbing right here we are already grabbing that so we are now providing a route right right here so

now the next thing you want to do is that you want to use this so I'm going to go ahead and copy that and now let me just remove this app from here inside this render method we're going to be Using our provider and we are going to be binding our Redux store which we are already grabbing and inside that we're going to be just providing a router provider and we just have to provide our router which we are already creating above above okay so now let me just save them and yeah I guess that's

every single thing that we need for now but now let me just create a few components or you know first of all let me just take care of the store and then also This API slices as well the first thing which you have to take care of the loging in and the logging out of the user so we're going to have to go inside this off and inside this off we are going to be creating a o sl. JS aut come on a slice. JS and if you want to create a slice so we're going

to have to import the create slice from where from the Redux toolkit Okay so so we're going to have to just write redex toolkit so it's going to just import there for us and Now let me just create my slice so off slice will be now equals to the create slice and here inside there we're going to have to provide our name first of all and the name in this case we're working with the authentication so we're going to be just providing the O and yeah then we have to provide our initial state in this

case I'm not going to be creating my initial state right here but what I want to do is that I'm going to copy there and create my initial State Outside from there because in this case we going to be work working with a lot of things so we're going to have to first of all get the user info by using the local storage and then we have to just write a get item and then we're going to be just searching for the user info if that's the case what do you want to do we just

want to Json pars and then we just want to pass out our local storage and then get item of the user info come on inside a string of user Info user info there we go and if that's not the case we just want to set that to no okay so now let me just save there and we are already using that right here and now the next thing which I want to do is that I want to create my reducers so now let me just put my reducers and inside these reducers the first action which

we're going to be creating is the set credential c r e r d e n t i a l s and we have to provide a state and also the action in this case so now inside There we're going to be just writing a state to user info will be now equals to the action. payload and now underneath that we're going to be setting our data to our local storage so we're going to be just writing like a local storage. set item and inside that we're going to have to pass our user information and we

are going to be just writing like user. stringify and we're going to be just passing our action and payload which we already have inside the action and we're Going to be also providing the expiration dat so I don't want to type it out so now let me just place it right here and finally we just have to use our local storage. set item and we have to just for expiration time and the expiration time will be this expiration and come on let me just copy the name of that and now let me just place it

right here and now that's it about how we're going to be setting the credentials but now how we are going to be logging out a Specific user so now let's just create action for that so we're going to be just writing like a log out and it's going to only take the St and what I want to do is that inside a St we're going to be searching for the user info and I'm going to just set that to know and I'm going to be also setting the local storage to totally clear so it's going

to just remove every single thing that we currently have inside or local storage so now let me just export the Set credentials and also this log out actions I'm going to come to the bottom and I'm going to be using export const and let's just export our set credentials and also the log out function from where from the OD slice and then actions with the S and now I'm going to be also using export default off off slice and then reducer and now let's just register that inside our store so I'm going to go ahead

and go to my store right here and the first thing Which I want to do is that I'm going to be just importing my auth reducer from where from let's just go ahead and go to the feature come on not API but a features and inside this feature we have Au and inside the Au we have Au slice right here and we're going to be importing that and now let's just use it right here inside the reducers and I'm going to just say the O property and the value will be off reducer so now let

me just save that and that's toally Cool but now we also have to take care of the API for this authentication so now we we are totally done with that and what I want to do is that inside this redex folder let me just zoom in a bit I'm going to be creating yet another file I'm going to give it the name of like con constants you don't have to do that if you don't like this convention so you don't have to do that but I'm going to be just extracting my constants and I'm going

to be putting that inside This constants file so I'm going to just hit enter right here and the first thing which I want to do is that I want to create a constant for the b b e and URL is going to be equals to totally empty string and why is that because because inside our we config we are already setting our API to Local Host of 3,000 right here so that's why we can totally leave there as an empty string now let me just create a constant for the users URL and it's going to

be equals to first Of all let's just go ahead and go to the API then the version one and then the users now let me just save there and close this file and what I want to do is that I want to create a rtk query right here so I'm going to go into my API right here the first thing we show want to do is that I want to create my api.js and inside there we're going to be working with almost all of the rtk query and inside this file we're going to be making

a set of four or rtk query so I'm Going to just say like fetch base query we're going to have to first of all grab that then we have to just write a create API and then we have to grab that from the Redux toolkit and we're going to be getting that from the query and then the react I'm going to go back and underneath that we're going to also need to get our constant right here here from where from let's just go ahead and go to our constants and we would just need our BAS

come on bass URL right here okay so Now we have to use that underneath that we're going to have to provide our B query come on let's just make this a constants and then it's going to be equals to the fetch base query and inside that we're going to be providing our BAS not B query but Bas URL it's going to be equals to or base URL like that now let me just save there and that's tottally cool but now the next thing which you want to do is that we want to create our API

slice so we're Going to be just writing like export and then cost API slice will be equals to the create API and inside the we going to be just providing our base query which we are already creating right here now let me just copy then now let me just place it right here and underneath that we're going to be defining our end points so end points and that end points will be coming from a separate file you don't have to do that if you don't want to do that but in my case I'm going to

Be creating a separate file for my endpoints and we're going to be injecting that endpoints right here inside this file so yeah that was just a total setup for the rtk query now let's just remove that now let me just create another file for my users endpoint so I'm going to be just creating a file given name of like user.js and inside there the first thing which I want to do is that I want to get my API slice from where let's just go ahead and go to the API uh I mean like API slice

and then we would also need to get the users URL from the constants right here now let's just use our export con of user API slice and it's going to be coming from the API slice and we are going to be injecting our end point inject come on inject the end points inside the okay so what are we doing first of all uh what the hell is let's just remove that from here so what are we doing let me just show you there here you can see we are Providing our empty end points right here

and now we are going to be injecting all of our end points to this API slice right here okay so now let's just do that so what I want to do is that I'm going to be passing my end points and inside there first of all let me just take care of the logging in the user so builder. mutation m u t a t i o n because in this case we are changing something we are posting some data to our database so for that we're going to Have to just write a query it's going

to take a data and now let me just uh use my function right here and inside that we're going be proving the URL and in this case our URL will be coming from the users URL right here and we specifically want to go to the off so that's why we are now providing the off and then we're going to be also providing the method of to the post method okay so now let me just provide a comma here as well and it should be a Method so now let me just make there is a method

and we're going to be also providing a body and the body will be set to toally data let's just save that now let me just create a hook based on this endpoint right here so so I'm going to just write like export con and we're going to be exporting something from the user API slice so what are we doing we are going to be just writing a use and here you can see we have a use user API slice no that's not something that we Want we have to just already use log in what the

hell is going on we now inside endpoints I don't know why but it is not helping me in this case but let me just do that manually so I'm going to just write like use login m u t a t i o n and yeah I guess they should do it use login mutation would be fine now let me just save there and yeah this how we're going to be creating our hook based on there and now let me just use this somewhere but before I do that first of all let me Just go to

my pages and inside these Pages now let me just zoom in a bit inside this Pages we're going to be creating one file for the home. jsx I'm going to just write RFC and I'm going to just leave there the way it is okay so I'm not going to touch there and now the next thing which I want to do is that I'm going to go ahead and go to my off and inside this off we're going to be creating our login. jsx right here okay so now let me just use my RFC sa my

file And now let me just go ahead and go to my main and register there right here okay so we are doing every single thing that we supposed to do but now inside this routes the first thing which I want to do is that I want to create a route and I'm going to be just passing the index of true right here in this case gu and now let me just for a path of uh home right here and we're going to be also passing the element of home or the component of home and now

let me just Close that and we also have to grab the home so it's not going to do it for us but we're going to have to do it manually I guess so now let me just import the home from there let's just go to my com not component but pages and then we have a home. jsx right here s my file and here you can see it is giving us an a because we have to run uh npm run full stack so now if I just wrun npm run full stack so it's going to

just run both the front end and also the backend And now let me just refresh that right here and it's going to gives us something let me just right click on there and click on a force dark and that's looking cool but why in the world we're not getting the home you know I'm going to just right click on that and go to the inspect element and we have nothing inside there then let me just go to the console and we are getting something inside a store now let me just go ahead and go to

the store and yeah I Guess I'm going to have to comment this line out for a few seconds I'm going to comment this line out s file and refresh that so the module uh query does not provide an export name setup listener let's just comment this line out and I'm going to also have to comment this line out as well s file what the hell is wrong let's just un uncom oh I made a setup but I did not configure inside my store that's the Only thing I'm doing wrong so now let me just go

to my users and here you can see we are creating the endpoint and we are set uping almost all of the rtk query and we are even creating a hook based on that but we are not registering that inside our store and now let's just do that okay so what I want to do is that to grab my API slice let me just hit enter right here and now let me just place it right here API slice and then reducer path R RR path it's going to be equals to not equals to but this is

a property and we have to provide a value of API slice and reducer now let me just put a comma here sell my file and we also have to remove this colon from there sell file we also have to remove this ah that was a lot of errors and now let me just refresh this so we are now getting the internal server error which is saying they're missing query yeah so let's just search for I'm Going to have to copy that and let's just search for this specific thing and we're going to have to grab

there from the query there we go now let's just sell there and we should be getting something but we are not okay the requested module and does not provide an export name setup listener it should be listeners with s and now let me just copy that let me just place it right here s my file and refresh refesh there Still does not provide theic sport store so I guess I'm going to have to go to my man and we are doing something wrong inside a store I'm going to just remove these curly braces from here

let's just remove that s my file and here you can see we are getting over hello word right here which is totally cool but what I want to do is that we are now providing our home component right here inside this home component we are first Of all providing our app we shouldn't be doing that let me just provide this hit enter right here but now let me just go to my app and now let's just take care of the app component the first thing which you want to do is that I'm going to go

to the top and then we're going to be getting the outlet from the react router Dom so we going to have to grab the react router Dom yeah we're going to have to just get the outlet first of all then we have to get the toast container Because we're going to be also using the toast in this project so we going to just write a toast container from the react toasttify and then we have to just grab our CSS so we're going to be just writing like react toasttify and then let's just go to the

disc folder then we have to go to the react toasttify do CSS right here underneath that what I want to do is that I'm going to just remove this H1 from here and I'm going to just passing my toast container and also I'm Going to just pass my main and I'm going to just provide the padding for the y axis of maybe three would be fine so I'm going to just past the padding for the y-axis of three and we are going to be just providing our Outlet right here so now let me just save

that and we're going to also have to provide our fragments so that we don't get these nasty errors so now let's just provide there and here you can see we are now getting the home right here so that was The entire setup that we have to make but anyways we are not totally done with that but we are going to also have to create a navigation right here at the bottom then we will be able to work with that so what I want to do is that I'm going to go ahead and go to my

o and inside this o we are going to be creating our navigation. jsx n a v i g a t o n and now let me just use my rafc and here uh we are going to be importing our navigation right here so I'm going to just say like uh you know underneath there we're going to be grabbing our navigation let me just copy that and underneath this uh toast container we're going to be just placing there right here semi file and here you can see we are getting our navigation right here which is totally

a okay and what we have to do is that we have to just design this navigation and that's going to be a lot of fun so the first thing which you have to do is that We have to import the used stad uh not used T but used T from where from the reactjs and then what we have to do we have to grab a lot of uh font icons from the react icons library and we're going to be getting that from the AI I'm not going to waste your time by writing all of them

so I'm going to just place them right in here okay so we're going to be just using all of them and now underneath we're going to be also using this one as well this is also a font Which is coming from the MD folder and we will also need the link from the react rou D and we will also need to grab the use navigation as well uh I mean like the use navigate not navigation okay and we will also need the use selector to read the data from the store so we're going to be

just writing the use selector and also the use dispatch DP P TCH to change the data from the react router not router but the Redux And we will also have to get the use login mutation which we already cre this is our own buil-in hook and then we also have to grab the log out okay so we're going to be getting there from the feature and then the all slice so we are now getting almost every single thing that we need right here but now let me just create instances of there so the first thing

which I want to do is that we're going to be just graving the user info from where from the use selector And we're going to be just passing our state right here and we're going to be just writing a state. off and underneath that we're going to be just creating a state so I'm going to just say like a drop down open we are going to be creating a drop down menu right here and then set drop come on drop down open it's going to be equals to the come on the use T and currently

it's going to be set to false and now underneath there we're going to be just creating a Function for toggling that drop down so toggle dropdown in lowercase will be now uh Arrow function and we going to be just writing like I said drop down uh open and not drop down open there we go now let me just create instances of both the dispatch uh the use dispatch and we are going to be just using the dispatch and it's going to be equals to this use dispatch and we're going to be also creating an instance

of navigat so we are going to just writing a use n get Word here and then we have to use our own hook which is cost uh log out API call from where from the use logout mutation and we're going to be just using that and now underneath there let me just save this file we have to just write your jsx right here and that's going to be a lot of jsx so I guess I'm not going to waste a lot of your time by writing a lot of jsx or a lot of classes rather

so I'm going to just remove this navigation from here and now let just Provide a class name and I'm going to just remove that and place these classes right here so I'm going to just give you a few seconds to stop the video and write all of these classes by yourself or you can go to my gab repository and grab all of these styling right here and and grab all of their styling from there or you can just stop the video and just type it by yourself now inside there what do you want to do

let me just you save this file and now inside there what You want to do we going to be just creating a section and for this section we going to be just writing a flex and justifying between and also the items will be set to totly Center and inside that we're going to be just creating two sections we have a section one and section two so inside this section one we're going to be creating a div so now let me just create a div and I'm going to be just spacing the class name to there

and We're going to be just placing these class names right here okay so now inside there we going to be just creating a link and I'm going to just pass the two and it's going to just only go to the home and now let me just provide some classes to it and trust me I'm not going faster because I want to save your time now let me just go back and save our file and here you can see these are the only stting that you have to provide right here for this specific Link and now

what I want to do is that I'm going to be just using the AI outline home okay and we have to just specify the classes to it so we have to just write a margin for the right of two margin for the top of three R and we also have to provide some sort of a size for that so I'm going to just specify the size of 26 and now underneath that we're going to be also providing a span of to home and now let me just provide a class name of hidden and also the

nav Item name and also the margin for the top will be set to let me just provide three Rim right here okay so now let me just save that and the use is not a function or it's not a return it trible uh okay we not even using the US so why the what we going to be needing there oh I I forgot to destructure that now let me just save that and refresh that so here you can see we are getting our navigation right here and everything is a okay and if I click on

this so it's Going to just brings us to this home right here anyway so that was just a small little silly bug that I just fixed now underneath this link we're going to be creating yet another link and it's going to go to the movies uh page which we did not create not right now but we are going to be creating there in a few second now let me just provide a class names to there and here you just have provide these class names right here okay so now let me just save there and I

Want you to just pause the video and proide these classes to that and now inside this link we're going to be just writing like MD outline and then that movies right here we have to just write our classes of margin for the right of two margin for the top of three rim and we also have to provide some sort of a size for that so the size in this case will be also 26 size and now let's just close there we're going to be also providing a span of shop in this case And now let

me just put a class name of uh come on the class name of hidden and also the na item name and margin for the top will be set to three Rim okay so now let me just close there let's just close that as well so now let me just save there and here you can see we are getting this movies icon right here if I click on that so it's going to just brings us to these movies right here which we did not create not right now so yeah that's cool but now let's just take

Care of the section two so I'm going to just hit enter right here let me create a div and I'm going to just give it the class of relative and inside this div uh r e l a t r e l a t i v e and inside this div we're going to be creating two buttons for one button right here so when somebody clicks on this button so we're going to be just passing this drop down function which we already created up above now let me just put a class names of text of totally

gray of 800 and Also the f c will be set to outline of none and now inside this B what do you want to do we just want to check if you already have the user info so what do you want to do in that case we let me just hit ENT right here we just want to create a span and let me just create their spin right here manually and we're going to have to provide a class names of text of totally white and now inside there we are going to be just providing the

user info do Name or username rather and if that's not the case like if the user did not specify I mean like if you don't have the users so then we don't have to provide nothing and just empty fragments so yeah that's it and underneath that I'm going to be placing a bit of code but I want you to bear with me and I am going to give you a lot of time to write that code so now let me just write a user info so if we already have the user info and uh then

just do something if You don't have that then do another thing okay so now if we have the user info so we are going to just place ing this SVG right here and you can found this SVG in my gab repository so here you can see what we are doing is that we are just passing the entire SVG and we are now passing this class totally dynamically so if we already have the drop down open so for that we're going to be just writing the transform and the rotate of 180° if that's not the case

we Are going to be just setting there to empty string and we are just filling there with no colors we're not providing I me like we are providing a bit of view box to it you can totally specify icon right here in this case but in my case I'm not going to be doing that because this is just a simple drop down which I just created right here oh you know it should be just only one case it should not be more than that so now let me just remove that from here and just put

your SVG right here and there you have it underneath this button what do you want to do we just want to create yet another drop down menu right here so drop down menu and the user info and then do something with that so inside there we're going to be just creating our ul and for this UL we are going to be finding a lot of uh classes right here but that classes will be dynamic so I'm going to just provide the absolute right here and the right will be set to Totally zero margin for the

top will be set to two the margin for the right will be set to 14 and width will be just totally 10 rims and I'm going to also specify the space of Y AIS will be set to two and I'm going to also say the background will be set to totally white and text will be gray of 600 and inside there we're going to be just rendering if you don't have the user info and is admin if the user come on is admin so if the user is not an admin in this case so What

do you want to do we just want to write the Top Value to 20 and then if the user is admin so then we just have to write a top of 24 okay so now inside there what do you want to do let me just scroll down inside there we're going to be just writing like if the user is admin so is admin and inside that we're going to just writing our fragment and here we just have to specify our lii and let's just provide a link and for this link it's going to just go

to first of All the admin and then it's going to go to the movies and then it's going to go to the dashboard which we did not create not right now but we will create there in a few SEC not in a few seconds but later okay so it's going to be totally block and also the pading for the xaxis will be set to four ping for the Y AIS will be set to two and when somebody how there so we're going to be just changing the background color of that to totally gray of 100

and here it should be just a Dashboard this is going to be only happening for the admin user not for the regular users so yeah that's cool but now underneath that what you want to do we just want to create lii yet another lii right here and I'm going to just say the lii and inside this Li we would have yet another link and it's going to just go to the profile now let me just put a class name to there it should be block ping for the xaxis will be set to four ping for

the y axis will be set to two When somebody hows over there background will be set to totally gray of 100 and inside this link we are going to be just writing a profile okay and then underneath this lii we're going to be creating yet another Ali and inside this lii we're going to be creating a button when somebody clicks on this button we're going to be just creating a log out Handler which we did not create not right now and we are going to be also providing a classes like block and with Will be

set to four pairing for the xaxis will be four pairing for the Y AIS will be two text will be set to totally left and somebody how over there we are going to be changing the background color to totally 100 for the label we are going to be just writing a log out let's just save that we have to also create that function of above we have to check if we don't have the user info and uh what do you want to do we just want to write Li I mean like UL but the user

Did not logged in so we're going to be just showing this UI to the user like uh Flex first of all and inside there we're going to be just writing a Li and we're going to also have to create a link and it should go to the login page and now let me just put a few classes word here and I'm going to just place this classes word here and you have to do the same now inside this link we just have to write our AI outline login not a home log in and we have

to specify the Classes of margin for the right will be set to two margin for the top we be just set to four pixel and now let me just provide a size of 26 let's just close there underneath that we're going to also proving a span and it should be a log in in uppercase and now here we're going to be just providing a hidden class and the nav item will be set to name and the final Ali which you have to take care of is going to be another Ali and we're going to have

exactly the same Link but it should go to the register so now let me just write register right here and we are going to be also providing these same Clauses so now let me just review that and now let me just place these Clauses right here and in this link uh we are going to be just writing like AI outline user ad okay and the size will be set to 26 let's just close there and what the hell did I just do I'm just getting tired a lot now let me just write a span and

it should be Register and here we just have to write a class name not in upper case but in lower case hidden and nav item will be set to toally the name okay so we also have to close there s my file and I guess that's every single thing uh that we need for now here you can see this is how currently what navigation looks like but I'm going to change the UI a bit later so if I click on this it's going to brings us to the movies but now if I click on um

this button right here so It's going to brings us to a login page and now if I click on this register button so it's going to just brings us to this register page right here which we did not create not right now so we are now getting the home right here which is totally okay but now the next thing which you want to do is that we want to go ahead and go to our main and inside this main we are going to be registering or making a specific routes for the login component and we're

going To be also creating yet another component which will be the register. jsx r g i. jsx and we are going to be just using the RFC for now let's just save there and we already have our login component right here and now let me just grab that right here so I'm going to be using the login let's just grab that and we're going to be also using the register component as well and now what I want to do is that I want to just place it right here just create a Separate route for that

so I'm going to just using the route let me provide a path for that and we're going to be going into the login and as element we're going to be just passing or let me just pass my element not element but our login right here let's just close that and let me just close this component as well now let me just save that and what I want to do is that I want to just click on this bound right here so it's going of just brings us to this login And here you can see we

are now getting our login right here which is totally amazing but now we also have to register or register component as well so now let me just duplicate there and instead of writing a login we are going to be just writing a register not react down but register and we are going to be also changing that to register component so now let me just save there let's just refresh there and now let me just click on this person and it's going to just Giv us that register component right here which is totally amazing so yeah

that's it about how we're going to be grabbing stuff but now the next thing which you have to do is that we have to create our register component so we're going to need a few things to grab from our store and also the state and all of that so the first thing we would need is the use T and also the use effect because we are going to be using both of them so now let me just write a link and Also the use location not this one l o c t o n and also

the use navigate from where from the re router Dom okay so we're going to need that and we would also get the used dispatch and also the use selector to just interact with or storage now let me just wrap the inside curly braces and we are going to be just grabbing there from the react and Redux okay now underneath that we're going to also need our loader which we defined but we did not create that so we're Going to be just grabbing our loader from our components folder so now let me just go ahead and

go to my components folder and we're going to be grabbing our loader from there and we're going to be also grabbing our set credential CR d uh CR d n t i LS from where from let's just go ahead and go to our feature uh I'm going to go ahead and go to my uh Redux first of all and then we're going to be going into the features and inside this feature we have off and then we Have our all slice right here now let me just provide a craes inside there and now let me

just go ahead and go inside there I'm going to copy there let me just place it right here s file and finally we're going to also need the toasttify so I'm going to be using like ah what the hell did I just do we're going to just writing our toast and we're going to be getting there from the react come on from the react and toasttify there we go so now let me just Save that so that's every single thing that we currently need right now but I want to go ahead and go to my

Redux and inside this Redux we're going to have to go to the API and then I want to go to the users and now underneath this login we're going to be defining yet another query not a query but or endpoint and I'm going to just write a register and it's going to be a builder. mutation because we are sending something sort of a data to our database so that's why it Should be mutation not a query and we're going to be just writing a query and we're going to be passing our data and inside this

data uh we are going to be just passing first of all the URL and the URL will be just a users URL which we already Define and now let me provide my comma and we're going to be also providing the method of post because we're going to be posting some sort of a data right here in this case and finally we just have to provide our body let me Just do that in a lower case Body and we have to just specify our data which we are already defining or grabbing as a perimeter right here

so now we successfully create our endpoint and now let me just put a comma here and if I just use the use keyword so it's going to gives us that use register mutation so now let me just copy this save this file and then let me just go ahead and go to my register component and now let me just grab the so I'm going to be just Using the import and we're going to be just grabbing this same Hook from where from let's just go ahead and go to our uh Redux so I'm going to

just go to my Redux and inside that we're going to have to go to the API then we have to go to our users right here so now let me just save there and now the next thing which you have to do is that we have to create a lot of States so con uh first of all for the username because if you want to create the user we're going to Have to get some sort of a name from the user so it should be SE username rather SE uh user like that or you know

it should be in lower case so Set uh username or something like that it's going to be equals to the used T and we're going to be just defining the totally empty string we would also need to get the email from the users so we are going be just writing a set email and it's going to be also equals to the use St of to empty string and underneath That we're going to also need one for the password and set password and then it's going to be equals to the use tat and inside that we're

going to be just defining our initial set of empty string and then cost for the confirmation password so cost confirm password uh and also said confirm pass come on PSD will be now equals to the US St and it's going to be equals to to the empty string we're going to need the dispatch and it's going to be equals to the use Dispatch and we're going to just executing there and then finally we would just need the navigate and it's going to be equals to or use navigate hook and now let's just call there and

now underneath there we are going to be grabbing our register hook or register function rather from or use register hook so I'm going to be just using the use register mutation and then we're going to be just using or ARR structuring syntax right here so I'm Going to just write like const it's going to be equals to register we're going to be grabbing our register function and we are going to be also grabbing the is loading property from there so underneath there we would also need the user information so we're going to be getting there

from the state and we already defined that inside a state and O and now let me just destructure there so I'm going to be just using the user info it's going to be equals to This use selector and now underneath there we would also need the search so now let me just use the search uh we're going to be destructuring the search from the use location and now let me just execute that and we would also need to use our search parameter so I'm going to just write SP for search parameter it's going to be

equals to the new URL search perams and now here we're going to be just passing our search which we are already grabbing from the use Location so then we have to just redirect the user so redirect the user by using the search parameter and then we're going to be just providing the get to that and then redirect the user or uh outside from that just redirect the user to the homepage okay so now underneath that we're going to be also defining or use effect and here we just have to provide our aror function right here

as for the dependency array we are going to be defining first of all the navigate And we would also need to define the uh what do we call the redirect and also the user info as well and now okay the spelling is incorrect n a v i g i g a t e so now let me just copy there and now let me just place there right here now we get there we go okay so now the spelling is totally correct but now the next thing which you want to do is that we are going

to be just searching for the user info if you already have the user info so what do you want to do we Just want to navigate the user not like that but now weig get the user to the redirect okay now underneath all of that we're going to just defining a lot of GSX right here so I'm going to just provide a class name of padding for the left of 10 RM I'm going to change that to something else like the UI doesn't matter but yeah here inside there we are going to be just writing

margin for the right first of all and it's going to be just I don't know four r or something Like that and we're going to be also defining the margin for the top of five R and inside that we're going to be just using our H1 of text 2 Xcel and also the font will be semi Bo come on semi hold and margin for the bottom will be set to four and we're going to be just defining the registered there we go so now let me just save there and now let me just refresh there

right here and we are not getting anything I don't know why but we are not getting anything at all so we Have a used dis ped we have a set confirmation password and nothing is happening let's just see over errors and we have 16 errors wow that's a lot you know I'm going to take care of that because they're just a the name conflix and let's just refresh that you're not seeing anything let me just go ahead and go to my console and we are now getting the requested module loader. GSX does not provide an

name export ah God Damn we have to just import there like so so now let me just save there and refresh there and still how the hell we Define a loader component let me just go ahead and go to my components then we have a loader right oh we did not even spe if I anything inside there so now let me just create a loader component right here s s file and refresh that and I guess we're going to have to remove these Co braces from there and now let me just rename there to a

loader and Refresh there and here you can see we are now getting a register right here which is totally awesome so yeah that's cool we are now making a lot of progress we are now getting into creating the user okay so what I want to do is that I want to create a form and inside this form we're not going to be defining the EG and inside this form we are going to be also providing a class name of container first of all and the width will be 40 rim and inside this form We're going

to be just creating a div with the class of my and we are going to be just giving it the two rims and inside this div you know let's just close let me just close there and inside this D we're going to be defining our label l a l and we're not going to providing any HT or you know I am going to be providing the HTML for of name and let's just Define our classes like like block of text small font will be medium and text will be totally set to White And now inside

this label we're going to be just defining the name now let's just save then here you can see we're now getting the name and now underneath this label what do you want to do we're going to be creating our input and inside this input the type will be set to text and we're going to be also defining the ID of name right here and now let me just provide a class name of margin for a top of one border and also rounded and with will be set to totally full and also the Place Holder will

be set to enter name okay and also the value we are going to be defining which we already declared above which will be the user name and on change when somebody clicks or writes something not clicks but when somebody start to type something inside this input we're going to just using our set not interval but set username there we go and we're going to be just providing the E target. value inside there so now let me just save that and here you can See we are getting our input but that's looking supremely awful I don't

know why but that's looking totally awful let me just right click on that and disable there yeah that's looking nasty you know I'm going to just provide the piring of two to it so now let's just save that and that's looking totally amazing but now let me just take care of this background color so now let me just right click on that and disable the dark force disable the dark force let me just Go ahead and go to my index. CSS file and we are going to be just defining these classes and these styling right

here so we are just uh first of all providing a background color of this to our body and the text color will be totally set to White and then we're selecting our input field and also our text area and we're making that totally black same for the selecting option we now making that totally black so now let me just cut that from here and let's Just preview there and and now let me just right click on there disable force will look like this and also undisabled will look something like this so yeah we are getting

there but now the next thing which you want to do is that you want to just uh grab there I'm going to just duplicate I don't know for a few times I'm going to just select this day with a class name of margin for the y axis of two and I'm going to just duplicate there a few times I'm going to Duplicate that first of all for the email then for the password then for the confirm password okay so now let me just go to the top and here you can see first of all we

have the name right here and then we're going to be changing this value to the email in this case and now let me just type the email as a label and I'm going to also change the type to email as well so now let me just provide the email right here and we are going to be also providing the email right here As well and instead of providing the enter your name we're going to be just defining the enter email and also the email here as well and then we have to just write a set

email okay so now let me just save that also we're going to have to change this one to password so I'm going to just change the label to password and we're going to be also changing this one to password as well the type will be password and also the name or ID will be also set to password And enter your pen password like that and it should be the email address rather I'm going to just change this label to email a RS this is a password and then we have to provide a password confirmation but

here we're going to have to also remove their username and change that to password and here set password like that and that's totally cool but now the final thing which you have to do is that we have to just write confirm password and also we have WR a Confirm come on SO n if I RM password like that and now underneath that we're going to be also providing the password once again and also we have to just provide a confirm password and then we have to just write uh confirm come on confirm password like that

and now let me just put a confirm password now let me just copy that or you know let's just Pro Set confirm password right here now let me just save that and here you can see we now getting the input of uh name And also for the email and also for the password and conf conf password and now the next thing which you want to do is that underneath this div we're going to be creating our button right here so I'm going to just create a button and inside this button we're going to be providing

a disabled state of lowering if it is lowering then we're going to be just disabling there otherwise we are going to be just providing the type of submit to there and also the classes and the Classes are a lot and I'm going to just copy the classes and now let me just place that right here sell file and you can also type there if you wanted to but here what I want to do is that I want to just write uh if is loading so what do you want to do we just want to write

registering dot dot dot and if that's not the case we just want to write a registered there we go okay so yeah that's cool but now underneath this button what do you want to do we just Want to show our loader so I just want to write is loading and then we have to just write our loader so loader and now let me just close that s file and that's cool but now underneath this form what do you want to do we just want to provide a with a class of margin for the top will

be set to totally four and now inside that we're going to be providing a paragraph with a class of text totally white and now inside that already have an account if you already have an Account then let's just provide an empty space right here underneath that we're going to be also providing a link and it should redirect us to first of all let me just WR redirect r e r CT and if it's redirect so we're going to be just providing the login question mark and redirect and here we are going to be just rendering

or redirect dynamically so now let me just make as a as a template literals and here we're going to just providing or redirect so if That's not the case we are going to be just going into the logging screen okay so now here I'm going to just write uh login right here but I'm going to also provide a classes right here now let me just place this classes right here sell file and here you can see we are now getting a register button and we are also getting this already have an account and we are

now getting this login right here okay which is totally a okay and amazing but finally we're going To be also attaching some sort of image right here underneath all of these divs but up above the last one we're going to be just placing this image right here and you can find the same image in my gab repository and now let me show you how that's going to look like and it is looking not okay okay so I'm going to just change the width to I don't know maybe uh 55 or something like this s file

and now that's looking totally better and here you can see we have our Data right here which is totally a okay but we have to attach our event handler to our form okay so inside this form we're going to be attaching our event handler and the event will be on submit when somebody submit this form so we're going to be just writing submit Handler come on h n d l e r and now let's just create our submit Handler right here so we're going to be just writing a submit Handler it's going to be equals

to the asness function and we're going to be Just providing a e now let me just use that e right here so we're going to be just writing a prevent default right here now let's check if our password is not equal to the confirm password so what do we want to show to the user we just want to show the toast um. error right here and we're going to be just writing like uh password do not match and if that's not the case so we are going to be just writing our try and catch blocks

and inside the catch block We're going to be just writing our err let me just make that as a to err and then we're going to be just writing our conso log of to error and then we have to just write a toast toast. error and we are going to be just proving our error. data. message okay so now inside the tri block what do you want to do we just want to get the response so we're going to be just using AED and now let's just use our register function from the rtk query and

we're going to be Providing our username which the user will provide and also the email and the password and we are going to just using the unwrap at the end and now underneath that we're going to be just using a dispatch and now we also have to provide our set credential right here because currently we are now dispatching or store okay so now inside that we're going to be providing every single thing which we are providing inside this rise variable if everything is okay so we are Going to be also navigating to the redirect okay

so now underneath there we're going to just also using the toast. success and now let's just provide a user successfully uh register registered or create new account or something like that now let me just save that and now let's just try this out so I'm going to just reload that and currently we don't have nothing or I guess we have a lot of users right here now let me just go Ahead and go to my users so we have five users right here let me just check the last one uh let's just check the last

one and the last one is Sprite so I'm going to be creating yet another user so I'm going to just give it the name of like I don't know keyboard or something like that and keyboard at gmail.com and as a password I'm going to be providing a keyboard one come on let's just retype that keyboard one two and key keybard one two and now let me Just click on this register button and here you can see it's going to just create a new user and it's going to also set the Json token inside the cookie

so now let me just show you that and now let me just go ahead and go to my application right here and now let me just expand there so you guys can see everything a bit better now let me just go ahead and go to my session storage and not not a session storage but a local storage so here you can see we Have our user info and we have a specific user ID right here and we also have a user credentials and then we have expiration time which will be that much days okay so

yeah we are not toly able to successfully register the user and now let me make sure that we are saving the user to our database so now let me just here you can see we currently have five users right here but now let me just refresh there and here you can see we have a six user and now let me just Check this out we have a keyboard as a name and then we have a keyboard at gmail.com as an email and then we have an encrypted password and the user is not an admin so

yeah this is how we are going to be registering the user inside our application so that was it about how we are going to be registering the user and now let me just take care of the loader and I'm not going to be wasting your time but I am going to just place this CSS right here and you just have to Type this CSS and it's going to give you an amazing loader and now let's just close it okay so that was it about for the loader and now let's just take care of the login

okay we already find that now let me just show you this so I'm going to just close that right here and here you can also see by the way we have our name right here and if I click on the name so we have a logout Handler not defined we're going to be also taking care of that in a few seconds but now Let me just go ahead and go to my login screen and you know what first of all we going to have to remove our um what do you call our cookie right here

then we will be able to log in so I'm going to just remove every single thing from there and now if I just refresh my browser and here you can see it's going to give us that register and also that login now let me just click on this login and here you can see it's going to gives us that login let's just click on On there so I'm not going to be wasting your time but I'm going to go ahead and go to my register component and I'm going to copy every single thing from there

I me like from the top and now let me just place it right here but instead of writing a use register we're going to be just using a use login mutation right here and that's everything we need for now when we're logging the user we're going to need the email and the password from the user so we're going to be Creating a St for the email first of all it's going to be equals to use T not selector but use T and we have to just Define it as an empty St or empty string rather

and we're going to be also getting the password from the user so set password is going to be equals to the US T and we are going to be just providing an empty string inside there and now let me just create an instance of dispatch it's going to be equals to the use dispatch and now let me just uh We're not going to be providing anything inside a dispatch but we are going to be just creating an instance of navigate n AIG is going to be equals to the use navigate and now let's just execute

there and now let me just grab the login function from my rtk query which will be the used login mutation and now inside there we are going to be just getting our login and we are going to be also restructuring the is loading now underneath there we're going to be Creating our cost user info and it's going to be equals to the use selector and now let me just pass my state first of all and here we're going to be grabbing our state from the state off so now underneath that we are going to be

doing the same thing like first of all we're going to have to grab uh the search from the used location so we're going to be just grabbing that from the used location then we have to just create our search parameter by using the URL search pram uh s e r c prams and we are going to be just passing our search inside there and now let me just provide a redirect redirect it's going to be equals to the search parameter and and we are going to be getting the redirect from there and now let me

just use if that's not the case we're going to be going into the home and now under Neath them we are going to be just providing our use effect and we are going to be providing our function inside there and For the dependency array we're going to be providing our navigate and the redirect and also the user info inside them and now inside this use effect we're going to be checking if you already have the user info so what do you want to do in that case we just want to navigate to that redirect which

we already created up above so now let me just save there and now let's just write a lot of jsx now let me just remove this login from here and I'm going to be just Creating a section and I'm going to just give it the class names of first of all the padding for the left will be set to 10m and we're going to be also providing a flex and flex off uh totally W and now inside there we're going to be also defining margin for the right and it's going to be equals to 4

RM okay so let's just Pro our four R right here margin for the top will be set to five R and now inside that we're going to be just defining where H1 off sign in baby and Also we have to provide the text of 2XL and also the font will be semi bold bold and then we have to provide margin for the bottom of four now let's just save there and here you can see we now getting our sign in button right here or not a button but a label and now underneath that we're going

to be creating our form right here and we're not going to be providing any actions to that but we will provide a classes to it so we're going to be defining the Container and width will be set to 40 rim and now inside there we're going to be just creating a d with a class of margin for the y- AIS of two RAM and now inside there we're going to be creating our label and inside this label we're going to be providing the email and also for the classes we're going to be providing the block

and text will be set to totally small and font will be set to medium like that and text will be also set to totally white as well and here we Just have to provide our email address like that now let me just save that it's going to look something like this and here you can see we are now getting our email right here and now what I want to do is that underneath this label we are going to be creating our input and let me just for email as a type and now I'm going to

also provide the ID of email let me provide a classes of margin for the top of one and pading all around will be set to two border and totally Rounded and also width will be set to totally full and I'm going to be also providing a placeholder to that and I'm going to just say like enter email or something like that and I'm going to provide the value of email in this case and now let me just provide when somebody writes something inside there so we are going to be just providing the set email and

we are going to be just Prov e. target. value inside there now let me just save that and here you can See we are getting our input field right here which is totally amazing but now we have to duplicate there so I'm going to just select this Dev and I'm going to just duplicate there I don't know maybe two times you know what I'm going to just duplicate the one time and now let's just change there from email to password so I'm going to just write a password in this case and password there we go

and also we have to just remove this email from here email from there And we have to just write a password right here and I'm going to also remove this enter email instead of providing an enter email we're going to be just providing enter password and I'm going to also provide the password here and also the set password there we go now let me just save that and here you can see we now getting our password as well now let me just type something inside there so that's a password and that's the email yep that's

looking amazing but Now underneath that underneath this D we are going to be creating yet another button and now this button will be disabled and we are going to be just checking the loading if it's loading so this button will be totally disabled otherwise we're going to be providing a type of submit and now let me just provide a classes and it has a lot of classes so now let me just copy and place that so I'm going to just copy there and now let me just place these Classes right here and I'm going to

just save there okay so now inside this button what do you want to do we just want to check if it's loading so we just want to provide a signing come on s i g n i n signing in and then dot dot dot and if that's not the case so we're going to be just providing the sign in okay so now let me just save that and now underneath that we're going to be also providing a loader so underneath this button we are going to be just Providing if it's loading then we also have

to render or loader okay so now let me just close the word here seller file and underneath this form we are going to be creating or D with the class of margin for the top will be set to four and then we have to just specify the paragraph of text totally white and inside there we're going to just providing a new custom come on CME and then here we just have to provide empty space okay so now inside There we're going to be also providing a link and this link will go to let me just

provide a two right here uh first of all the redir come on redirect and if it is a redirect so we just want to provide first of all the register and redirect the user to this specific redirect right here and if that's not the case we are going to be just providing the register there we go and as a level we're going to just providing the register right here I'm going to Also provide a few classes right here so I'm going to just say like text of till 500 and when somebody how over there so

we're going to be just providing the underline right here so now let me just save that and that was a lot of talking and here you can see we are getting word signing in and also the new customer Right Here and Now under underneath this div we are going to be providing our image right here and you can also copy this same image from my gab repository So now let me just save there and here you can see we are getting this image once again which is looking totally awful so I'm going to make the

55 s file and here you can see that's looking a bit better now let me just provide my Handler to this forms so I'm going to just found my form and here we're going to be attaching our event handler when somebody submit this form so we're going to be just attaching the submit Handler and now let me just copy that from here And now let's just create that right in here so cons handle subm Handler handle submit Handler what the hell and we are going to be just putting a prevent default default and now let's

just save that and underneath that we're going to be using our try and catch and for the catch block we're going to be putting a toast of error and if we have some sort of error then you know let me just change this one to ER R and then we are going to just getting the specific data From there and then the specific message from that data and if that's not the case we're going to be just providing an error do total error and for a tri block we're going to be just defining a response

and aw of login and we are going to be providing this email credential and also the password but this should be an asynchronous function so async there we come on async there we go and here I'm going to just unwrap there so unwrap and Now let's just close there and we're going to be also dispatching so set credential and we're going to be sending all of that credential to our store and now let me just navigate that to the redirect okay so now let me just save that and now let's just test this out baby

and I'm going to just log in as a keyboard and now let me just provide a keyboard one two now let me just click on this sign in and here you can see we are now successfully sign in and you can Also see my name right here so now let me just take care of the log out and also this navigation right here so I'm going to go ahead and go to my navigation and now let me just search for the log out Handler oh we are not okay we are proving one so let's just

click on that so we are providing our login Handler but we are not creating one so now let me just copy that from here go to the top and now underneath all of that Above This GSX we're going To be creating our logout uh handlers so we're going to be just defining our asynchronous function and inside there we're going to be just using our try and catch block and for the error we're going to be just logging like console. error uh this specific error right here we're not going to be doing anything else in there

and let's just use aw and log out API call which we are already grabbing and now let me just use the unwrap inside there and now let's just Execute that then we're going to be also dispatching or uh what you or store by providing this log out function to there and then we are going to be just navigating to an AIG at te we're going to be navigating to the login screen so now let me just save there and if I click on that so it's going to give us the profile which we did not

create but if I click on this log out you know first of all let me just show you something I'm going to go ahead and go To my in ECT element and then I'm going to go ahead and go to my application and here you can see we have our user information right here now let me just make it a bit smaller like that we have our user information right here as soon as I click on this log out button and here you can see we are getting an error let's just check it out so

we have a log out and we have unauthorized and what's up with that and it took me a while and I finally found it what in the word are We doing in here we are restructuring the logout API call from the used login mutation and that's not correct we're going to have to grab that from the use log out mutation so uh I'm going to just go ahead and go to my users first of all and now let's just create an endpoint for logging out the user and I'm going to create the underneath this register

and I'm going to just give it the name of like log out and it's going to be a builder. mutation and here inside there We're going to be providing a query and now let's just Pro uh or Arrow function right here and inside this Arrow function we're going to be defining first of all the URL and the URL will go to the user's URL and then specifically to the log out and then underneath that we're going to be also defining the method of toally post let's just save there I'm going to copy the name of

there or even I'm going to just put a comma here and then use log Out mutation I'm going to copy there and save that now let me just go ahead and go to my navigation right here let me just place it right here and also I'm going to be grabbing the use log out U mutation right here now let me just save that and I'm going to just refresh that once again and I want to show you that thing once again so I'm going to go ahead and go to my uh what do you call

it my application right here and here you can see we have our user information But now if I click on that and click on my log out and here you can see that information is now successfully gone and we are now getting the login or it will redirect us to the login page right here okay so yeah that's looking cool and now we are totally done with the logging in and logging out so now let me just try that once again and in this case I'm going to just uh log in as an apple gmail.com

and then we have apple one2 or something like dot let me just click on This it's going to give this like user not defined or if I just remove that and let's just empty out every single thing now let me just click on that so it's going to giv us that this user is not defined you can provide more validation than that but in my case that's going to do it and now let me just log in a user so I'm I'm going to just log in myself like husan gmail.com and we have h12 right

here and now let me just click on a sign in and here you can see we are Now admin so it's going to gives us that dashboard also the profile and also the log out so now if I click on the log out it's going to brings us to this page right here now the next thing which I want to do is that I want to click on this register button and we want to register that Apple users so we have apple uppercase Apple then we have apple at gmail.com and the password will be apple1

12 and Apple come on a PL E12 now let me just click on this register Button and it's going to just successfully register that Apple now let me just log out and try there once again so we have that apple and now let me just try the apple one two and hit enter and it's going to log in that specific apple right here okay so this is how we going to be creating a user and this is how we are going to be registering our own users now that's cool but now the next thing which

you want to do is that you want to take care of the user Profile and also the private route so what I want to do is that I want to go ahead and go to my o one more time and we're going to be creating a separate component for private routes. jsx right here okay so it should be just private route not with the S and now I'm going to be just defining my RFC right here and inside this private route the first thing which I want to do is that I want to go to

the top and we're going to be grabbing our navigate uh let's just grab Our n a v i g a t e and also the outlet as well from where from the react router and Dom and underneath that we're going to be using the use selector come on the use selector from where from the react and Redux and now underneath that we are going to be just grabbing first of all the user information so we are going to be just using const and let's just destructure our user info from where from our use selector and

we're going to Be just defining our stat right here and we are going to be just getting our St from the off and now underneath then what I want to do let's just remove uh these stuff from here and I'm going to be using my user info and if you already have the user info then we are going to be providing our Outlet component and if you don't have the user info so we are going to be just navigating our user to the login screen okay so now we are going to be just replacing there

and now Let's just close there so this is how we are going to be defining our private route and now let's just use the inside our main component okay so now what I want to do is that underneath this register I'm going to be using my rout let me just provide a route in uppercase and path will be totally empty string and I'm going to also provide my element and the element will be just my private route come on p r i v a t e and routes or route and now let me just close

that Right here like there and now inside that we're going to be doing our magic but first of all let me just copy that from here and we are going to be placing that right here inside this restricted area so private route from there let's just go ahead and go to uh uh go to our uh Pages component inside this Pages component we have o and inside this o we have our private uh routes right here now let me just save that and now inside there we're going to be defining our Route for our uh

profile component so we are going to be creating our profile component right here I guess we did not create that so here you can see we have a user and inside this user we going to be creating our profile. jsx right here now let me just use my RFC save that and now let's just come back to my and here we're going to be defining a route and let me just provide a path to that and the path will be profile and we're going to be also providing the elements and The elements the element and

now let me just provide my profile component let's just autograph that and now let's just save there like so save file and we're going to be taking care of the profile component in a few second but now we have to check this out I'm going to just provide I don't know maybe apple and then we have apple one2 login ah God a E12 okay I just forgot the password of there I'm going to log in with myself so hoseen gmail.com and hosan one2 and here You can see we are now successfully log in now let

me just click on there and now if I click on the profile component so it will brings us to this profile right here okay so which is totally amazing and now let me just click on that and now let me just take care of this profile component the first thing which I do is that I'm going to be grabbing first of all my import use effect and also the use State as well and the next thing which I'm going to do Is that I'm going to be grabbing my use dispatch and also the use selector

come on C from where from the react Redux library and underneath that we're going to be also getting our toast as well from where from our react toasttify there we go okay so now we are going to be also getting our loader which you already created and underneath that we're going to be also getting our set credentials from our features and now I'm going to just save My file let me just go ahead and go to my users and Define our endpoint right here okay so underneath this log out I'm going to Define my profile

so profile and I'm going to be using a builder. mutation because we are sending some sort of a data and we have to just provide our query let me just provide my data inside there and inside there we're going to be defining our URL and here we just have to render our user um user URL and we specifically want to go to the Profile and now let me just provide a comma here and the method will be a put method because in this case we're going to be changing our data and now let me just

provide a body and the body will be that data which we are already grabbing uh as a parameter right here okay so now let me just provide my uh use profile mut no not this one use POF there we go so use profile mutation now let me just copy then save this file now let me just grab that right here so I'm going to be Grabbing my Ed profile mutation from no yeah from my redex API and user so now let me just save that and now let me just create a lot of states right

here so con username and also set username is going to be equals to the use St and we have to just Define our uh State word here then we have to write our email and set email and it's going to be equals to the use come on use and inside that we're going to be just defining our empty string and then we have to just Write our password and set password will be now equals to the use St one more time not selector the use St and here we just have to provide our empty string

and then con we have to just Define a confirm so if I F iirm password like that hope the spinning is correct set confirm password is going to be also equals to the used T and let's just Define or empty string right here c n f i r m password there we go now underneath that We're going to also getting the user information so let's just grab that and we're going to be destructuring the user info it's going to be equals to the use selector and here we just have to provide our state and inside

the state we're going to be getting our state. off now underneath that let's just use our rtk query and we are going to be destructuring the update profile and we are going to be also destructuring the is loading like that and I'm going to Just rename that to loading update profile I'm going to rename my is loading to the Loading update profile and it's going to be equals to the use profile mutation and now underneath that we're going to be also defining our user effect and inside that we're going to be passing our aror function

and I'm going to be using the set username it's going to be equals to the user in we are now getting the user information right here and now let me just duplicate oh God Damn what the hell am I doing let's just duplicate that and change their user information to the email right here as a dependency array we are going to be just Prov or uh what do we call it the user info do email and also the user info do come on username there we go now the next thing which you want to do

is that you want to create an instance of Dispatch they use dispatch hook and now let me just execute there okay so that's cool but finally we have to write a lot Of jsx right here let me just remove my profile right here and I'm going to be creating a d with the class of container and margin for the xais will be set to Auto and ping will be four margin for the top will be set to something like 10 Rim okay and now let me just close that inside this div we're going to be

defining this div right here I just copied and place it and you should do the same and now let me just close that right here okay so now I'm Going to just close that and inside this div we're going to be creating yet another div and I'm going to be just using class name of margin for the not yeah margin for the or not margin but MD screen size will be just withd of 1 over three and and then here we're going to be just defining or H2 right here so H2 will be update profile

and now as a classes we're going to be defining like text of 2 XEL and font will be semi bold and also margin for B Will be set to four now let me just save there and here you can see we are now getting our update profile Right Here and Now underneath that what you want to do we just want to create our form and I'm not going to be attaching any action to it so let's just remove that and inside this form we are going to be just creating a d with the class of

margin for a bottom of four and now inside there we're going to be just creating a label and for the label we're not going To be attaching any HTML for to there so let's just remove them and I'm going to be also providing a class name of block and text will be set to totally white and margin for bottom will be set to two and it's going to be a name okay so now let me just provide a name right here sell file and now underneath that we're going to be creating our input and for

the input the type will be set to text but the placeholder will say placeholder will say like enter your or enter name Would be fine and now I'm going to be also providing a class names of form input and also ping all around will be set to four and totally rounded of small and also the width will be set to totally four okay we're going to be also providing a value and the value will be the username okay so outside from that we're going to be also attaching the own change H right here when somebody

types something inside there so we're going to be just pushing there to set username And we are going to be just defining the target. value now let me just save that and here you can see it's going to gives us my uh email like I logged in as a hus right here so that's why we are now getting our hus gmail.com now let me just refresh that and we are still getting this email right here okay so that's cool but I want to duplicate this div right here one more time not one more time but

I'm going to be duplicating there for the email the Password and also for the confirm password okay so let's just go ahead and go to the top so this is going to be my name and then we have email address so email if I can write email a d r e s like and let me just provide an email right here and enter your email email there we go and everything is totally okay let me just put my email let's just provide our set email right come on not intermediate or something like that but we

have a set email what are we Providing for the email let's just go to the top and EM set email let me just where is said now let me just copy there go to the bottom and I just lost it okay there we go so here you can see we're going to be using our set email right here in this case and now let's just provide for the password so we have a password right here and now let's just remove that and change that as a password and enter your password so let's just remove that

and Change that to the password and here we're going to be also using the password and this is going to be the set password there we go not confirm but just a said password I guess I didn't Define the above so we have the God damn it I always forgot this te so we have a set password right here and now let me just use that uh we have a set email and then we have a set uh password right here now let me just change that to confirm password p a s w r d

so c n f i RM confirm password and now let's just change this one to the p password as well then I'm going to just write confirm password or something like that c n FM password there we go and let's just change this one to confirm password and this one to the set confirm password as well okay so c o n f i r m and now let me just copy that from here and go to the top and we have to update it right here as well so now let me just save there and

that's looking totally Cool now underneath this div and up above this form we're going to be just creating a div with the class of flex and just Define will be set to between and now inside there we're going to be just creating a button let's just Define our button and inside that button we're going to be defining the type of submit right here and yeah I'm going to be just grabbing the classes from my on code so now let me just copy that and now let me just place it right here and here let me

Just put my update sa file and this how we're going to be updating our button and now under underne this div we are going to be just defining the level of if you have the loading update profile then we have to Pride or loader and now let's just close that s file and yeah I guess that's every single thing that we need for the UI so we are now getting the email right here why are we getting the email right here for the name we have to be getting our email right here In this input

and now let me just go to the top and what we are doing is that we have a set username we have a set email right here but now let me just go to my ah there we go so we have a set email right here in this case and s file and now let me just check this out so we have a name and then we have a email right here which is totally amazing now let me just provide a functionality for that so when somebody change something inside that then we will be able

to Update there so I'm going to just log out because this person is an admin and I want to just log in as someone else like I don't know maybe Alex would be fine and I'm going to just WR like Alex Gmail and alex12 and this user is not created let's just check out the Alex I forgot the password of that and we have hen we have the computer let me just log in as a computer so let's just write computer gmail.com and we have a computer one two I guess and there we have it

okay now let me just click on this profile and it's going to allows us to change this profile right here but now the first thing which I want to do is that I want to attach my event handler on this form on the on submit not scroll but submit we're going to be attaching the form or not a form Handler submit Handler would be fine now let me just copy that and create that right here so now let me just create that right here I'm going to Be creating con uh submit Handler it's going to

be equals to the asynchronous function we're going to be just foring our e for the event and now let me just use my e prevent default and execute there now underneath that we're going to be checking if the password is not equal to the confirm password so we're going to be just showing this toast so toast. error and passwords do not match okay and now underneath that we're going to be also providing the else class and for The else class we're going to be defining the TR and catch blocks for the catch we are going

to be just writing the RR RR and the err and now let me just use the to. error and now let me just Define my error and we are going to be getting the data from there d at TA and then we going to be also getting a specific message from there and if that's not the case we just have to write error. portal error there we go Now for the tri loock what do we want to do we just want to con res and we want to update our profile and how we are going

to be updating our profile first of all we're going to be defining the ID it's going to be coming from the user info and then the specific ID and then we're going to be defining the username and we are going to be also providing the email and also the password which the user will gives us and now let me just use the unwrap on there and finally Uh here we just have to dispatch or store by just providing the set credentials today so credentials and here we have to pass our response the overall response and

we have to also write a toast. success and we are going to be just writing a profile updated successfully okay so now let me just save there and here you can see we have all of the data and I'm going to just change there to like I don't know maybe Mango or something like that and mango gmail.com and I'm going to also provide the mango1 12 and mango one two right here and now if I click on this upd button and it's going to gives us an error and what's up with that error now let

me just uh check this out we didn't mess up something in this component let's just right click on that and go to my inspect element then I'm going to go ahead and go to my network or you know first of all let me just check out the Console the server responded with the status of 401 unauthorized let me just click on that once again so we are now getting that from the profile and we are going into the profile we are providing the payload of uh let's just check this out we're providing the email we're

providing the password username oh so we are now getting the error of duplicate key error Collection movie app user and that's because we already created the mango User so now let me just try to create some unique user now let let's just refresh there and what name should I give it I don't know God damn it I just forgot the name I'm going to just provide a James and we have a James gmail.com and I'm going to just write like james12 james12 and it should be in lowercase j and now let me just click on

this update button and it's going to just give us That profile updated successfully and we are also getting that James right here so here you can see we are now getting this James and this how we are going to be updating a specific user so now let me just search there inside my database and now let me just refresh there and we have the apple right here I'm searching for the James so I guess that computer was the first one and we now updated there to the James right here and yeah this how we are

going to be updating a Specific user and this is how we are going to be getting a specific user information and updating that so now let me just log out and yeah this we are going to be updating a specific user so that was it about for the user management and now let's talk about how we're going to be making a genres so I'm going to just uh close my terminal and I'm going to be just using the npm run back end in this case and it's going to just start our back end because Currently

we're going to be working with the back end and now let me just go ahead and go to my index and now we're going to be using app. use first of all you want to go to the API like that then you want to go to the version one and then JRE okay and then genre routes and now let me just copy that we're going to be importing there right here but first of all we have to create there but before we create there first of all we have to create a model for that so

I'm Going to just create a model given name of like genre. JS I'm going to grab my Mongoose from the Mongoose and now let me just create my genre schema like that it's going to be equals to the new do not this one Mong come on Mongoose do schema and here inside that we're going to be providing the name and this name will take the type of string and also the trim will be set to true and also it should be required and it's going to be equals to true the maximum length which You are

going to be providing is L GTH is going to be just 32 and now let me just also make it as unique and it's going to be set to true and now finally we're going to be just exporting that by using model and then we have to just write a genre and here we just have to pass our genra schema now let me just save that and this is how we going to be creating our genre now let me just go ahead and create my r right here which will be the genre routes.js and now

Inside the first of all we're going to be importing the express from the express CHS and then we're going to be creating uh con router it's going to be equals to express. come on xs. router now underneath that we're going to be getting our controllers and yeah that's going to be and also we would get our middle Wares as well I forgot to show you there uh middle Wares there we go you know let me just get my middlewares right here so authenticate and also Authorizes an admin so now we are successfully grabbing that let's

just remove that from the end and now let me just Define my route so router. route and when somebody go to that specific route so we want to just post and the user should be authenticated and also authorize as an admin then they would be able to create the genre so now let me just export that so export uh default and router okay so that's cool but now we have to grab that inside our index File and I'm going to be getting there so I'm going to just write a genre routes gnrs routes from where

let's just go ahead and go to um or routes not this one come on routes and inside there we have our genre routes right here I'm going to copy that and I'm going to just make sure that I just provide there right here s file and let me just check and we don't have any errors we have error right here because we are not Providing this controller right here so we're going to have to grab that but first of all we have to create our controller file and I'm going to name that as a genre

controller.js and now inside there first of all I'm going to be getting my genre from where from let's just go ahead and go to my models and then we have to go ahead and go to the genre. JS and then we also have to get our asynchronous uh Handler sync Handler and now let me just Copy that and here we're going to be just creating this genre is going to be equals to this ASN Handler and we're going to be just passing our as synchronous request response and inside there we're going to be using a

try and catch for the catch block we're going to be just passing these errors and for the triy block first of all we're going to be destructuring the name from where from the request and body which the user is going to be specifying or the admin In this case is going to be specifying and now let me just check if we don't have the name like if the user did not specify the name so we just have to return the r. Json and we are going to putting some sort of error word here and name

is required and now underneath that we're going to be searching for the existing ex uh is s t iing genre it's going to be equals to the aware and genre and then we have to just use our method which will be find one and We are going to be finding our genre by using this specific name and if we already have the genre so existing genre so we just want to return to the user like r. Json and it is going to be the error and now let me just pass like already exist like so

and now underneath that what you want to do we just want to create a new genre so genre will be now equals to A and then new genre and here we are going to be just specifying the name and we have to just save that to Our database and finally we have to show something to the user so that the user can see that we created something right here so now let me just save that and yeah we have to just export that I'm going to copy that and go to the bottom and Export or

genre right here now let me just save that and I'm going to go ahead and go to my routes and here we're going to have to import that right in here so we're going to have to import our genre like so I'm going to copy that But at the end I'm going to also have to specify this JS right here and we're already using there so now let me just save there and let's just restart npm run back in in this case so it's going to just okay we have some error and what's the error

we have the error inside a genre routes okay what are we doing wrong create genre I'm going to copy then place it right here and I guess we are not pring the JS right here that's why let me just Provide this JS and let's just restart that um by using the npm run back in and here you can see everything is working as expected and now what I want to do is I want to create a separate folder right here and create a folder G name of like users or users management or something like that

I'm going to just grab every single thing that I currently have right here let me just select all of that and grab that from here and now let me just put the inside users management and Let's just close that okay let me just close this one as well and now inside there we're going to be creating here another folder I'm going to give the name of like genres and inside there we're going to be just creating a first request which will be create uh genre okay so I'm going to just copy the name from there

or URL from there I'm going to copy there and now let me just place that right here in this case we're now Posting the data so we are going to have to change that to post okay and we are now providing the user instead of providing a users we're going to have to provide a genres was that s or just a singular okay it's just a singular I'm going to have to copy that now let me just place it right here and we have to post some sort of a name right here inside there and

now let me just post some sort of name like movies like The sure it's not a movie by the way uh it's A game and also uh what do we call it let me just close that right here and let me just refresh this we only have the users right here but once I click on this send b right here it's going to give us not authorized as an admin we have to first of all login as an admin so the admin is hosan so I am going to be just logging in as hosan right

here okay yeah hoseen one2 now let me just click on there and we successfully logged in let me just show You there we successfully logged in and this person is an admin and now if I click on the send button so it's going to just create this genre for us and now let me just refresh my database and here you can see it's going to giv us their genres and inside there we have a document and now let me just show you that and here you can see we have this unique genre so this is

how we are going to be creating a unique genre and now let me just go ahead and update the Genre what I want to do is I want to write my router. route and we are going to be going into a specific ID and here we have have to provide some sort of ID and we are going to be providing the method of put because in this case we are now what we call we now updating our genre user should be authenticated and also authorize as an admin so authorize as an admin then they would

be able to update the genre okay so now let me just copy there save this file but I'm going To also have to paste it right here s file and now let me just create this genre right here but before I do I'm going to have to pass it right here as well and now let me just create this so we have a Asing Handler and we're going to have to pass for SN request response and inside there we're going to be passing the try and catch block so try and catch blocks for the triy

block first of all we're going to be grabbing the name from where from the request. Body and what else do we have to do we have to also get the ID from where from come on let me just put equal to sign from the request. prams okay so here you can see we are providing this ID right here inside of parameters and we are going to be destructuring that from this request PRS and now we are going to have to search for the ID so we're going to be just writing a genre it's going to

be equals to A and then genre do find one and inside that we're going to be just Placing our ID is going to be equals to that ID which we are already getting right here okay so we're now searching for the genre and now let me just check if you don't have the genre already so what you want to show to your user we just want to return response. status of 404 and then Json here we just have to provide the error of error and genre n phone okay so if that's not the case we

are going to be just updating the name of our genre so genre. name will be Equals to this newly added name and underneath that we're going to be also updating our database so for that we're going to be just using updated genre and it's going to be equals to A and then genre do save okay now let me just execute that and finally we have to show something to the user so we're going to be just writing like response. response. Json and update genre that's a lot of talking and and for the catch block we're

going to be just placing these Console logs now let me just save there and now let me just test this out but I'm going to copy there and place it right here update to genre and here you can see we have The Witcher name I'm going to just create a new file or not a file but request and now let me just create a request right here I'm going to just give a name of like update genre let me just copy all of that let me just place it right here and change that from get

to put so now the first thing which You have to do is that we have to provide a specific genre ID right here because we are providing that ID right here and we are getting that ID right here from uh or prams so now let me just go ahead and go to my database and now let me just click on there let's just click on what the hell am I doing oh my God let me just click on that now let me just copy that from here and now let me just place it right here

so we are going to be just updating this specific genre And I'm going to just change the name of there to like um what was that the name yeah the name come on the name and I'm going to update that to like something else okay so now let me just click on this send button right here so here you can see our genre is now successfully updated to this something else so now let me just show you that here you can see this set to one and now if I refresh that it is going to

be still set to one and now let me just click on that and Here you can see our genre name is now set to something else right here okay so we can just um write another one like uh I don't know we have different kind of movies like God father and now let's just save there click on that send button so it's going to just make it as a Godfather let's just refresh that and here you can see it's going to make it as a Godfather and yeah this is how we are going to be

updating our genre now let me just collapse it right here I Don't want to waste your time now let's talk about how we are going to be removing our genre so for they we're going to be using like router. route and here we have to uh route and here we have to specify the specific ID and we're going to be using a delete method inside there the user should be authenticated and also authorizes an admin and remove genre okay so now let me just copy that from here and now let me just place it right

Here sell file and now let me just go ahead and register that right in here okay so I'm going to be just creating my remove genre by using the asynchronous Handler and provide our snc request and also the response as well and now inside there we're going to be using our try and catch block so for the try block or you know first of all let me just write like console. error and let me just place this error right here and also rest. status will be set to just 500 and Json will be set to

error come on e r and then interal server error or something like that for the tri block what do you want to do we just want to get the ID first of all from where from the request are progams and also we have to just remove the specific ID is remove moved uh is going to be equals to A and then we are going to be just using our genre model so genre and then we are going to be using like find by ID and delete so we have this method on mongus And we're going

to be specifying that specific ID right here and now what I want to do is that I'm going to be just checking if we don't have removed uh removed in this case what do you want to do we just want to show to the user like res. status status and it's going to be set to 404 not found okay so we have a error and we're going to be just specifying like genre not found it should be e rather and underneath that we're going to be just showing to the User like Json and removed their

genre so now let me just save there and this is how we going to be removing a specific genre and now what I want to do is that I want to just go ahead and create a new request right here I'm going to give it the name of like delete genre and now I'm going to be just copying all of that now let me just play place right here and change that to delete so it is already taking this ID right here so we're going to have to Specify the ID and now let me just

click on that so here you can see we only have one movie and now let me just copy the ID of that and now let me just place this ID right here s our file and click on this send button and here you can see that Godfather is now successfully removed now let me just refresh that and here you can see we have zero documents which means like overall genre is totally empty so now let me just create the here and I'm going to be just Creating a few more movies like extraction 2 and uh

Jonathan Wick so John Wick uh John Wick 4 chapter 4 and also we have different kind of movies like I kind of just forgot the name like Spider-Man and we also have a Spiderwoman we have a Superman we have a Batman we have hosan man hosan is just a boy but very soon he will become a man and now let me just refresh that let me just go ahead and refresh that right here and here you can see we now Successfully created these seven genres right here so yeah this is how we are going to

be creating updating and deleting the genres finally not finally but we're going to have to do two more things now let's just list our genres I'm going to go ahead and go to my genres routes and also to these controllers and here we are going to just defining like router. route we're going to have to go ahead and gen GN r s like that and we're going to be getting All of the genres so I'm going to be using like get and here we have to just WR a list genres now let me just copy

that and here we are going to be placing that right here I'm going to also provide a space here and also there let's just save there go to our genres controllers now let me just register there right here and now let me just create my controller con genre Or List genres will be equals to the asynchronous Handler and we're going to Be also passing the request resp response and inside there we're going to be using our try and catch block and for the catch we're going to be using like cons. log in this case come

on cons log of error and also the return will be set to response. status of 400 and also the Json will be set to error. message okay and now up above this Tri block I mean like inside this Tri block we are going to be just getting all of the genres by using aw and genre model and using the Find method which you already have inside among use and we going to be just rendering all of that genres so now let me just save that let me just go ahead and create a new request right

here I'm going to give it the name of like all genres like so and now let me just copy that and now let me just place it right here and in this case we're going to be getting there are weone getting there let's just see yep we are getting there so in this case we're going to have to Remove this ID from there and it should be Johan Ros with the S and now let me just click on the send button and it's going to gives us error and I wasn't expecting this one to be

honest uh okay so we have a genres I just misspelled I guess I'm going to have to copy there and now let me just place it right here and now let me just click on the genr button okay we have to specify the genre first of all and then we have to provide the genr okay so now Let me just uh provide it once again with s you can rename that to like all genres or something like that but in my case this would do it for me so I'm going to just click on this

send button and it's going to use all of their genres for me okay so we have The Witcher extraction Spider-Man Spiderwoman Batman and all of that now let me just sa this how we are going to be getting all of the genres and now let's talk about how we are going to be Reading a specific genre so I'm going to go ahead and go to my genres and inside there or underneath there we're going to be just creating yet another route for what for a specific ID and we're going to be just reading a specific

genre okay so I'm going to copy that and now let me just place it right here save my file and go to my controller and now let me just register there right here and create there so I'm going to create my read genre by using my asynchronous Handler we're going to be providing our asyn request response and inside there we're going to be using our try and catch block for the catch we're going to be using like error and also return of response status of 400 and also the Json will be set to error do

message and inside this Tri block what do you want to do we just want to get the Gen ra and it's going to be coming from aware and genre do find one method which is coming from the and we are going to be using the ID and request. progams and then specific ID right here and then we are going to have to just show that to the users so now let me just save that and I guess that should do it I'm going to just go ahead and go to my collection let's just create a

new request right here and I'm going to just hide there and specific General something like that I'm going to also have to copy that and now let me just place it right here Let's just remove that and here we are using oh we are providing the ID in this Cas I forgot to do this so now let me just go ahead and go to uh I don't know maybe this specific genre which is John Wick I'm going to copy that and now let me just place that right here okay so now if I click on

this send button it's going to gives us that specific ID or their specific genre oh oh my God what the hell am I doing I providing the movie's name instead of a Specific genr so God damn it I I'm going to just save this file now let me just go ahead and remove uh a specific oh you know I can do that by using right clicks oh my God that's a big mistake I just made I'm going to just delete all of them and that was the final part but thank God I realized that I

made a mistake I was providing the movie's name instead of a shandra's name oh oh my god let's just remove that we can provide a Sci-Fi we can provide the acting I mean Like romantic and there are a lot of them but yeah for now I am going to be just creating one for I don't know um oh God uh action would be fine and then we're going to be also creating for adventure I don't even know how to spell adventure but yeah I guess that two would be fine so yeah this is how we're

going to be creating and updating and deleting and all of that kind of stuff with genres so that was the back end of Genres so now we are totally done with the genres back end now let's just use that inside or front end so I'm going to go ahead and go to my front end then go to my SRC then I'm going to go to my store I mean like constants in this case and now let me just create a constant for that so I'm going to be using like genre URL and it's going to

be equals to API first of all and then the version one and genre there we go so now let me just save there and now the which you Have to do is that we have to create API slice for there so I'm going to be just creating a genre. JS and now inside there the first thing which you have to do is that we have to import our API slice from where from our API slice right here we're going to also have to import our genre URL and now let me just copy that we're going

to be just exporting our con genre API slice and is going to be equals to the API slice and then we're going to be injecting our end Points right here and here we just have to use our endpoints and we're going to be just passing our Builder it's going to be equals to or Arrow function and inside there first of all we're going to be creating the endpoint of create genre and it's going to be equals to Builder do mutation and inside there we're going to be just specifying the query and it's going to take

the new genre and based on that new genre we are going to be creating a specific new genre okay so It's going to take the URL and in this case we're going to be just specifying our genre URL it's not going to go to anywhere but I'm going to also provide a comma and Method will be totally a post and then we're going to also have to specify the body of new genre and there we have it okay so this is how we're going to be creating a genre and you know what I'm going to

just create all of the end points right here for all of that back End now let me just show you there so we have a genres routes right here so we are going to be just creating all of that uh and points right here so now let me just do that so that was for the first one now let me just take care of updating the genre and to update genre we are going to have to write update genre and then builder. mutate come on let's just remove the and update genre is going to be

equals to the Builder do mutation because we are changing Something inside there we're going to have to pass our query and we're going to have to past the ID and the update t or update gen would be fine and inside them uh we're going to be just passing our Arrow function the URL will be equals to or uh what do we call a genre URL and it's going to go to the specific ID and then we're going to also have to P our method it's going to be equals to the put method and now let

me just P my body is going to be equals to the update Genre okay so we are now totally done with updating the genre now let's talk about how we are going to be deleting a specific genre okay so to do that we're going to have to write a delete genre and then we have to just write a builder. mutation and what we want to do is that we're going to be using our query and we're going to be specifying the ID to that and inside there what do you want to do we just have

to specify the URL and the URL will be or genre URL And it's going to go to the specific ID right here in lower case now let me just provide my comma and then the method uh will be equals to delete method because we are just deleting our genre now let me just put my comma Here and Now underneath that we're going to be just creating yet another genre for fetch genres like for all of their genres so we're going to be just using like query in this case we are not going to be doing

doing anything with that but we Are now just querying our product so I'm going to just write uh what do we call it my genre and it's going to go into the Gen R right here okay so I guess that's every single thing that we have to do so now let me just save that and yeah I guess that's every single thing that we need to do for the genres and points now the last thing which I want to do is that I want to export all of that hooks so I'm going to be using

export con and We are going to be exporting this genre API slide nice and we are going to be exporting all of that hooks which is use create uh genre then we have the use update one then we have the use delete one and also we have the use Fetch and now I guess that's it save our file and now we are totally done with uh all of their genres endpoint and rtk query and to use that the first thing which you want to do is that you want to go ahead and go to or

Pages inside these Pages We're going to have to create a new folder I'm going to give the name of like admin and side that we're going to be just creating two components the first one will be for the admin uh routes and this kind allows us to protect our routes the next one will be for the genre list. jsx right here so now let me just use the RFC right here and I am going to be using there right here in this component as well now let me just go ahead and go to my main

and Register there right here but I'm going to do that underneath this private routes right here so I'm going to just writing like route I'm going to also provide a path it's not going to go to anywhere and now let me just point my element and the element will be U my admin uh admin routes if I can get there was there routes or just route I forgot the name of that okay it's not going to be a routs but just a route a singular I'm going to Also have to just rename that to let

me just select that and rename that to just a specific route okay so I'm going to just close there and yep I'm going to take care of there right here I'm I'm going to copy that let me just go to the top and grab that right here so we're going to be just grabbing our admin route from where from let's just go ahead and go to our pages and inside this Pages we're going to have to go to the admin then we have to go to our Admin route right here okay so we are now

successfully grabbing our admin route now inside there we are going to be just defining another route and the path is going to take is something but we're going to also have to provide the element and the element will be genre uh list and now let me just close there and close this one as well and now for the path I'm going to be passing my admin and then movies and then the genre now let me just copy that and now I am Going to go into the top and now let me just place it right

here from where let's just go ahead and go to my pages once again then admin then we have our general list and now we are totally able to do there so now let me just first of all take care of this admin routes and then we are going to be jumping into this genre list so now let me just click on there and the first thing which I want to do is that I want to get my navigate or not navigation what the hell Let me just get my navigate from the react router and not

react router but react router Dom and we are going to be also getting the outlet from the react r d just a Dom there we go and now underneath that we're going to be also getting our use selector from where from or H God from uh or react Redux okay and now we are going to be using that right here the first thing which you have to do is that we have to grab the user information from our store which will be The use selector and we're going to have to pass our St and inside

there we're going to be using the st. off and we're going to be getting our information from our store and now the next thing which I want to do is that I want to delete this uh return statement from there and I'm going to be just supporting my return statement right here but if you already have the user and if you have the user information and if the user is an admin so what do you want to do in that case We just want to provide the outlet and let's just close them but if the

user is not an admin what do you want to do in that case we're going to just navigating that user to the login page okay and then we have to replace the not relative but replace the and let's just close it right here so this is how we are going to be protecting our admin routes and now let me just close them and now the next thing which you want to do is that we want to take care of this genre list And we going to have to do lots of stuff inside there like how

we're going to be creating the genre updating the genre and all of that so the first thing which I want to use that I want to grab a lot of things so we're going to be just grabbing the use St uh St like that and then we would also need to grab or let's just grab import or something from the Redux toolkit so let's just go ahead and go to the Redux then the API and then the Genres uh yeah I guess the genre would be fine and we're going to be getting our use create

um genre mutation use update and yeah also the use uh come on let me just put a space in here and use update update genre mutation use delete one is also fine and we're going to also have to get the use fet genre as well so now let me just save that and there's all of the hook which we have to grab and then we also have to grab the toast From where from from the react toasttify because we're going to be also using the toast and yeah that's going to be fine and now we're

going to have to take care of the actual component now inside this genre list what I want to do is that I want to get my uh come on I want to get my data and I want to rename that data to genres and then we're going to be also using the refetch uh to refetch our product once again and then we're going to be grabbing that from us genre query And underneath that we're going to be just creating a for the name and set name is going to be equal to the use selector and

we're going to be just passing our empty string right here and then the next thing which we have to do is that we have to just write a selected genre and then we have to just write a set selected genre status going to be equals to the used stad and we're going to be providing the initial value of null to it now let me just create one For the update or updating upd a t n updating the name and set updating the name it's going to be equals to the usad and we're going to be

just providing the empty string now let me just provide one for the model which we're going to be creating in a few seconds so we have a model visible and it's going to be equals to set model v i s IBL e it's going to be equals to or use St and we're going to be just passing the initial value of false to it okay so v i S i b e yep the spelling is correct now we have to use our rtk query and we're going to have to destructure our functions from there so

we're going to be just uh restructuring our create genre come on create genre and we are going to be just getting there from the use create genre mutation and now we going to be also getting uh what do we call it uh update genre it's going to be equals to the use first of all and update genre and then we have to just Get one for the delete uh genre it's going to be equals to the use delete genre and now let me just execute the now I'm going to go ahead and go to my

jsx area right here and I'm going to be just placing this div can and I want you to do the same so now let me just save there and I'm providing The Styling right here now inside there we're going to be just placing this D and I want you to do the same and that's because I don't want to write my styling so now Let me just write my H1 and now let me just provide my height uh or yeah h of 12 and uh genres and now let me just save there restart there so

I'm going to be using npm run full stack in this case case and it's going to just start our server on this port and now let's just click on that and it's going to just start our server and now let me just log in as an admin uh log in as an admin so I am going to log in as husan gmail.com and hosan one2 so now let me Just click on there now I am going to go ahead and go to my dashboard but before I do you know I am going to go ahead

and go to my genres and not allowed let me just go ahead and go to my and we're going to have to WR Airman and then genres I mean like Airman movies and then genres so let's just remove that from here and now let me just place that and hit enter and here you can see it's going to give us that manage genres right here and that's totally cool and Now the next thing which I want to do is that I want to create a separate form component for the specific genre so I am going

to be just passing that right here so we have a genre form and we're going to be just passing the value of value I like the value of name the state which we are already creating up above and then the set value v l is going to be equals to the set value and we're going to be just also passing the handle submit to that and the handle submit Will be the handle and we are going to be creating this function in a few seconds but I'm just wondering should I create it right now or

later I don't know man oh this shouldn't be a set value but instead should be a set name rather and now let me just take care of this genre form I'm I'm going to go ahead and go to my components and I'm going to be just defining a new component which will be a genre form. jsx and now let me just use my RFC sell My file and now let me just grab that right in here okay so now let me just Auto Import that it's going to just import it right here so now let

me just save this file and now let me just go ahead and go to my genre form and take care of that so the first thing which I want to do is that I want to restructure a few things like the value the Set uh set was there a set value or the name set value and also the hand uh handle submit and we are going To be also passing the button text as well but I'm going to just specify the initial value of submit to there we're going to take care of that bit later

and we're going to be also passing the handle delete to there as well okay so now let me just save there and I guess I have to specify the comma I forgot to do there let me just save there now inside this return statement I'm going to be just passing the padding of three all around and then I'm going to just remove That from here inside this D we're going to be creating a form it's not going to take any actions it's going to just take only the own submit and when somebody submit this form

so we're going to be just spacing our own I mean like handle submit button right here and it's going to take the on submit Handler and we're going to be just passing the handle submit right here and then the classes will be just space for the Y AIS of three and now inside this form we're Going to just spacing our input and the type will be text but we're going to also have to specify the class name of pairing for the y axis of three pairing for the xaxis of four and also the Border uh

rounded totally large and with will be set to 60 rim and now let me just close that and we're going to be also providing the placeholder for that which will say right uh right genre name now let me just save that so that we can see everything a bit better and we're Going to be also ping the value of value today and then the on change we're going to be just passing the E and also it's going to take the set value and we're going to have to paste the E target. value right here in

this case and now let me just save there underneath this input what you have to do we're going to be just creating yet another day with the class of F and I am going to also providing the justify of between to that and now inside there we're going to be Just creating a button and it's going to be a huge button let's just remove that and now me just copy that button right here and now let me just place it right here sa file and you should do the same and now the need this button

what do you have to do we're going to be just creating a handle delete button and inside that we're going to have to provide our button right here so now let me just put my button let's just close there like so And we're going to be also attaching the on click event hander on there and handle delete we're going to be just passing and it's going to be just responsible for deleting a specific genre and now let me just provide the styling to it so now let me just save that and you should also provide

the styling right here as well and I am going to be also providing this delete right here and this should be F ooc us there we go and I guess that's it Because we are going to be creating a genre and we're going to be also able to delete a specific genre right here okay so yeah we are doing every single thing right here but we have to take care of this handle create genre and we're going to do that in a few seconds but now underneath there oh you know let me just take care

of that other stuff because we want to also show the specific genas right here if you just create that I don't want to show everything in the Console I want to show every single thing inside the desktop so I'm going to be just using a div with the class of flex so now let me just use a flex and also the flex will be set to wrap and inside there we are going to be just iterating over the genres if we already have there so we're going to be just using the map method and we're

going to be just passing our specific genre and then we have to just use our div and inside this div we're going to be also Providing a specific key of uh the genre and ID a specific genre ID right here and now let me just close the uh I don't know why it didn't close itself but now inside this D what do I have to do I'm going to be creating a button right here and now let me just close that and I am going to be providing a lot of CSS so now let me

just save there and you should provide the same and now let me just use the on on click on click event handler on there and we're going to just Passing this uh what do we call it this function right here and it's going to just take the object of set model visibility or visible and it's going to be set to true now let me just save there and I'm going to be also providing the set selected um genre right here it's going to be also set to genre and we're going to be also providing the

set updating name it's going to be equals to the genre. name because we are are already Defining the right in here okay so we are already defining them and that's why we are now providing there right here and as a button label we're going to be just rendering our genre name okay so this is going to be the label of our button so genra name and this is how we going to be rendering there now underneath this div what do I have to do I'm going to be just creating a new component for the specific

model and we're going to be providing the Attribute of is open and if it's open we're going to be passing the model visible right here in this case and when it's close on close we are going to be just passing our aror function in this case and it's going to just take like set model visible and it's going to be set to false in this case and now let me just close that like so okay we're going to be just creating there but inside that we're going to also have to pass for genre form or

yeah genre form and Now let me just close there and we're going to be providing a lot of prop St so the value will be set to updating name and also the set value will be also set to the value and then the set updating name will be also taking the Valu so now let me just save there and this is how it looks like for now but we're going to be also passing the handle submit and it's going to be taking that handle update genre and we're going to be creating there in a Few

seconds but I want you to bear with me so update genre and then we have to also specify the button text off set to update in this case and underneath that we're going to be also providing the handle delete in this case and it should be the handle come on handle delete genre in this case Okay so yeah that's cool but we're going to have to create these three uh what do you call these three function in a few second we're going to Be creating there but first of all now let me just create this

model component inside my components folder right here I'm going to create my model. jsx and now let me just use my RFC sell my file and now let me just grab that right here so we have a model and it's going to just Auto Import that for me sell file and now let me just take care of the the first thing which you have to do is that we have to do our destructuring so we have the is open and then we have the on Close and then we also have a children right here okay

so now let me just remove that from here I'm going to also remove these divs and I'm going to just leave it as a fragments and inside there is open and we're going to have to specify some sort of a GSX right here inside there and what I want to do is I want to create a div and it's going to just take the class name of fixed and also the inser will be set to zero and also we have a flex and items will be Set to Center justify will be set to Center Z

index will be set to 50 and now inside that we're going to be just creating yet another div for a separate so I'm going to be just creating a d with the class of fixed and inser will be set to zero and also we have a background totally black and opacity will be set to 50 okay and now underneath that what do you want to do we just want to create another D with a class of absolute and the top will be Just this arbitrary value which is 40% let's just close that and left will

be also set to uh 20% let's just close that background will be set to totally white pading all around will be set to four and rounded will be set to totally large Z index will be set to 10 and text Will set to totally right okay so inside there we're going to be just creating a button now let me just create a button and I'm going to just put a class names off there like text will be set to Totally black and also the font will be set to semi bold and how will be set

to text of totally gray of 700 I'm going to be also providing the focus stat on there and when it's focused the outline will be none and margin for the right will be set to two and for the label or you know uh yeah for the label we're going to be just providing this x word here and when somebody clicks on that on click uh we're going to just closing or St so now Let me just save there and underneath this but we're going to be just providing our children right here okay now let's just

save there and there was about 4 model let's just close that and now let me just create these functions right here okay so now let me just close this let me just comment this line out this line and I'm going to also comment this line out as well now let me just save that and here you can see it's going to giv us this UI right here so if I click on that it's going to open that specific uh genre we can update that we can delete that we can do a lot sort of stuff

with there if I click on this action we can just open and close our model right here and now let me just take care of creating the genre so now let me just save there copy the name of that and now let me just create my genre right here I'm going to just write a con create handle create genra will be now equals to the asynchronous function it's Going to take the event and inside there we're going to be just preventing the default so prevent default DFA ul and now let me just execute them and

we're going to be checking if we don't have the name so what we want to do in that case we just want to show to the user this toast dot come on toast. error and we just want to say that genre name is required okay and we just have to return then there will be able to specify a new genre name to there and now let me just Use my try and catch blockings underneath there let me provide a conso loog for the catch blocks and now let me take care of const result is going

to be equals to the A and create genre uh which we are getting from the rtk query and we're going to have to past this name right here and just unwrap that and now underneath that what do you have to do we just have to check if you already have the result. error so what you want to do in that case you just want to show This toast to the user like we have some sort of error which is coming from the result and now if that's not the case what do you want want to

do we just want to set the name to totally empty string and we also have to just write a toast and then we have to show some sort of a success toast right here so we just want to show to the user that uh r. name uh is created so it's going to just give us the genre name is created and then we also have to refetch all of our genre so That we can see the newly created data so now let me just save there and it's going to just allows us to create this

genre but we would not able to see that and to see that for that we're going to have to create this function uh which we have right here so we have a handle update one so you know what let me just create a genre right here so I am going to just say like I don't know another action or something like that and now if I click on the Submit button so it's going to give us that toast and it's going to also gives us that another button right here but if I click on that

we cannot update that and we cannot delete there now let me just create my con uh handle up there genre it's going to be equals to the as synchronous function and we're going to have to re our event and now let me just use the prevent default and now underneath what you want to do we just want to check if we have I mean like if You don't have updating name so we're going to be just writing a toast. error and we're going to be just saying like genre name is required like so RQ uied

and we just have to return it out and underneath that we're going to also have to just write our trying catch block and for the catch block we're going to just saying this eror conso ER of error and for the tri block you know let me just save there for the tri block we're going to be just getting the result so con Result will be now equals to the A and we're going to be using our update genre from the rtk query and we are going to be just specifying the ID of selected genre and

their specific ID and then we also have to just write a uh updated genre and then we have to specifically Define that name which we are getting from the updating name not genre but updating name what was updating name okay so now let me just put a comma here and we just have to Unwrap that okay and now let me just execute that underneath that we're going to be just checking for the error so if you have the result. error so what do you want to do in that case we just want to show this

toast. error to the user so we have the result. error and now if that's not the case so what do you want to do in that case we just want to show the success message to the user and we're going to be just saying that uh result. name is updated Okay and now underneath there what do you want to do we just want to refesh or data so refet or data and that was a lot of talking but now let me just uh empty out all of our state and visibility and now let me just

place it right here okay so now let me just save that I'm going to just refresh my browser and now let me just click on this another action I'm going to just say another adventure okay now if I click on this Update it's going to give us their toast and it's going to ALS gives that another adventure right here so I can totally remove this adventure right here and I can just write update and now let me just click on there it's going to just update it right here now let me just take care of

deleting the specific uh v i s i b God damn it I'm going to have to rename that again and again so we have model v i s i b so we're now changing that right here and we are also changing That right in here okay so now let me just show you there we're also changing that right here so now let me just save that and test this out one more time I'm going to click on that and we have another so I'm going to just change that to hosan movies I'm going to click

on that so everything is working totally a okay and yeah that's cool but now let me just take care of deleting a genre I'm going to just uncomment there let's just check this Out I'm going to go ahead and go to my genre form and you know what I am going to just change that to oh c us save this file I'm going to go ahead and create that let's just copy that from here and excuse me and CPS it right here delete genre what the hell d e l e at t e d l

e t genre there we go I'm going to have to copy this one first of all and check out or delete Focus F OC us and we we have a delete come on delete Genre and we're not using that that's because we did not create this function now let me just copy that and we are going to be just creating that right here and now let me just place right here it's going to be equals to this as synr function and inside that we're going to be using our try and catch block for the catch

we're going to be copying there and we're going to just placing this console. error and these errors right here and for the tri block What do you want to do you just want to get the result first of all C result and it's going to be coming from the event and delete genra which we just corrected a few seconds ago and we're going to have to proide our selected genre and then there specific ID inside there and let's just unwrap there and we're going to have to check for the errors first of all so if

you have some sort of error like result. error so we're going to be using the toast. error right here and The result. error okay so now outside from that that's not the case so we're going to be using our to. success and then we have to just specify the result. name is deleted so is deleted d o and we're going to also have to refetch or I God r e f e t c and now let's just execute the insert selected genre we be now set to totally now and then we have a set model

method or visible will be now set to totally false So now let me just save that let me just click on this hosen and now if I click on this specific genre so it's going to just delete it right here so if I check out my database so now let me just go ahead and go to my mongodb right click on there and click on refresh so it's going to gives us that uh genres and here you can see we only have these two genres right here now let me just delete them as well click

on delete and also click on delete as well refresh them and Refresh this database so this is how we're going to be just removing every single thing from our database and yeah what I want to do is that I want to create a few genres so we have a action we have romance we have uh comedy c m a d y I guess this how you spell comedy I don't even know how to spell comedy and then uh we have Adventure H I forgot the name but now let me just change that to Adventure and

yeah I guess that would be fine and now let me just refresh that so it's going to gives us that four genres right here so yeah that was it about for the genres in this m project we are now totally done with the genres so now let me just close all of these files and I'm going to go ahead and go to my back end folder so I'm going to collapse that let me just go ahead and go to my back end and we're going to be first of all creating a model so I'm going

to just Give the name of like movie. JS and inside there first of all you need mongus from the mongus and then we are going to be destructuring the object ID from where from the come on mongus M s so we are going to be destructuring our object ID and now underneath that we're going to be creating our movie schema right here it's going to be equals to the new mongus do schema and inside there what you want to do our movie will have some sort of a name so The name will be type of

string and also totally required and also we're going to be taking care of the image which we're going to be doing in a few second but it should also be a type of string and then we have to take care of the year and now let me just put a type of number in this case and also this should be required to and now underneath that we're going to be also taking care of the genre and we are going to be going into the object ID and now we're going to be providing a Reference to

our genre uh model we've already created right here okay so now let me just Prov required and it should be required and now underneath that what do we have to do we're going to be providing our detail and the detail will be type of string and also totally required will be now said to True let me just provide a cast and the cast will be array of objects so type of string and now inside that we're going to be also providing reviews and for the reviews we Are going to be just creating this review schema

in a few second but I want you to just bear with me for a few seconds so now underneath that let me just also provide the number of reviews on a specific movie so then we're going to be providing a type of uh not string but number to that and also required will be set to three and the default value we're going to be specifying zero and it should be required there we go now let me just provide a comma and Create it at create come on created at will be equals to the type of

date and then the default date will be just date do now okay we're not going to be executing there now underneath there let me just put my timestamps and it should be true now let me just save there and now let me just take care of this review schema so I'm going to just create that right here and I'm going to just the name of like review r v i e w schema it's going to be equals to mongus Do schema and inside there we're going to have to provide the name first of all and

the name will be the type of string and also totally required will be set true underneath that we're going to be also providing a rating for the review so I'm going to just say the type uh of number and also required to true and now underneath that let me just provide a comment and the type will be set to string and also the required come on required will be set to true as well now Underneath that we're going to be also providing a specific user like who is writing this specific review so we're going to

be just writing a type of mongus and then schema and then types let me just get my types and then the object ID and now underneath that we're going to be providing the required of TR and also the reference will be set to user time Stamps will be now set to true and now let me just save there and this is how we're going to be creating both Of our schemas so now let me just export it right here I'm going to be using export movie and it's going to be equals to model and here

we're going to be just passing over movie let's just go back and now let me just for my movie schema oh God chtm and now let me just export or you know it should be const and now let me just export that right here so export default of movie Okay so movie there we go now let me just save that and we are now totally done with The schema right in here now let me just add a route for myself and now here we're going to be just using like app. use and first of all

we're going to be going into the API then the version one and then okay now let me just paste my movies routes or yeah movies route would be fine let me just copy this save this file and now let me just create the file right here I'm going to just name it the m routes.js and now inside there first of all let me just grab my Express prom Express and also let me just create an instance of a router so we're going to be using Express dot come on what the hell and now let me

just execute that we're going to be importing our controllers and also the Middle where as well and you know what I'm going to just import my authenticate and also authorizes an admin middleware right and you know what we're going to be also creating yet another middleware so I'm going to go ahead and go to my middle Wees and I'm going to be creating my middleware of uh what do we call it the check id. JS and now inside there first of all we're going to be importing something from the Muse and that something will be

uh is valid object ID okay so we're going to be grabbing that and now let me just create my middleware right here come on we can't even create a function what the hell is wrong let me just create my function right here and I'm going to Just give it the name of like check ID is going to take the request and also response and we're going to be also providing a next to it because this uh middleware and now we're going to be checking if we don't have the is uh valid object we're going to

be specifying or request or prams and then ID and if that's not the case what do you want to do we just want to show to user like r. status or 404 underneath that we just have to throw new error and We would say uh come on error and we will say that uh invalid object off and then let's just pass our request. pr. ID right here and now finally we just just have to use our next and provide our middle right here and now let me just export that export default of check ID and

now let me just save there and here we have to use that I'm going to close this file and we're going to have to grab that right here so I'm going to be using check ID check ID from where from Let's just go ahead and go to our midw right here and then we have to grab that from the check id. JS yeah we also have to specify the do JS right here because it's going to just throw us an error now let me just save that and I'm going to go back and the first

thing which you want to do is that we want to create our public routes so we have a public routes then we are going to be creating a restricted uh routes as well and we're going to be also creating a routes for The admin specifically okay so now let me just create a public routes like those route which will be accessible for all of the users so now let me just create a router. g and we're going to be specifying all movies and here we just have to specify the get all movies let me just

copy that from here and we're going to be restructuring there but first of all we have to create our controllers and I'm going to just create the name of like movie Controller.js and now inside there the first thing which you would do is that we would grab our movie R uh let's just go ahead and go to our model where is our model and now inside that we're going to be grabbing our model from our model right here okay so the first thing which you have to do is that I just made a mistake uh

I'm not going to be providing my you know I'm going to just just comment this line out for a second because first of all we have to create Something then we would be able to access that so now let me just save the word here like only the admin would be able to create a new movie so we're going to be just using like router. poost and now let me just provide a create movie and first of all the user should be authenticated and then authorize as an admin then they would be able to create

a movie okay m o v i e now let me just copy that from here sve my file and let me just go ahead and Create that right here and to create a movie it is totally simple so we're going to be just creating our create movie let's just pass our as synness I mean like asking function request and response and then inside there we're going to be just using our TR and catch block and for the catch block we're going to be just providing like pr. status of 500 and also the do Json and

now let me just pass my error and here we're going to be using the error do Message M Ms AG G and now let me just create a new movie and it's going to be equals to the new movie schema and we're going to or model we're going to be providing our request. body and then we have to just provide a saved movie it's going to be equals to the await and let's just save that new movie to our database by using the same method which will be coming from Mose and then we have to

use our response. Json and let's just P our Ser come on Ser movie oh my God Ser movie there we go okay so now let me just save that and finally we have to export this we're going to be using export create movie and now let me just cop copy this sa there right here let me just go ahead and go to my movies controller I me like movies routes and we're going to be grabbing our controller right here from where we're going to be grabbing there from let's just go ahead and go to our

controllers and we're going to be grabbing there From the movies controller okay so now let me just pass my um movies control I mean like create movie and we're going to be also passing the right here which we are already doing there but finally we have to export default or router okay so now let me just save there and we also have to grab the inside this index so we're going to be just grabbing that right here so we have a movies routes from let's just go ahead and go to routes uh routes and inside

there we Have a movies routes right here so now let me just save that we're going to be using npm run backend and now let me just hit enter and we are indeed getting an air inside a movie controller so huh let's just go ahead and go to our movie controllers and I just messed up something no nothing so we have some error right okay yeah we are grabbing there right here what's wrong oh here you can see we are not providing the do JS now let me Just PR that and let's just restart our

npm run back it one more come on npm run back and there we go so it's going to just restart our back end and now let me just test in my post man and let's just close all of them right here and now let me just take care of the movies so we're going to be just creating a new folder I'm going to just give the name of um movies detail or movies will be fine rather and we are going to just creating a new request right here inside there And I'm going to just create

the name of like create movie there we go and let's just close this one and we're going to just grabing or uh link from there and now let me just place it right here let me just put my post method right here and in this case we're going to have to go to the movies let me just see uh we're going to be going into the movies right here and then we have to specifically specify the create movie right here okay so let's just write a Create movie and now let me just go ahead and

go to my body let me just click on the raw and it is already set to adjacent so we're going to be just proving a few things for the movie Let me just go ahead and go to my movie so is taking the name the image the year and genre detail cast reviews new uh reviews and also the created ad so you know first of all let me just provide a name so I'm going to just provide the name of uh name of Extraction uh two or something like that now let me just click on

the send button so it's going to just give us like movie validation P detail is required genre is required and also the year is required so we're going to also have to provide that so now let me just provide all of them so the next one we have is the image so we're going to be just specifying the random image right here let me just provide like image.png which we don't have right here but we are just Providing there for the string and now let me just proide the e here and the year I don't

know when this movie was released but I'm going to just provide a 2024 or 23 would be fine and now we have to also provide a genre and then for the genre we are going to have to specifically specify our genre let me just go to my mongodb let me just open there let me just go to my genres and I'm going to just go ahead and go to this action R right here let me just Copy that and we're going to be just providing there right here okay so let's just close there and that

was required so now we are totally providing there now the next next one we have is a detail and we are now going to be providing some sort of a detail right here like um detail detail and it was the best action movie ever or something like that let me just provide a comma and then we have to provide a cast and the cast will be I Don't know uh John do and Alex now let me just provide what else reviews so uh I'm going to just leave the review right here we will provide the

later but not right now so yeah I'm going to just leave the review right now let me just for a number of or you know we're not going toing number of review and everything else should be fine now let me just close that let me just remove that from here go back let's just zoom In a bit so we are not providing all of that data right here now let me just click on the send button and here you can see that movie is now successfully created right here so we have extraction two we have

the image here the genre detail cast and every single thing right here so yeah let me just see if you already have the movie and I'm going to just refresh that and it's going to gives us that movies right here we only have one movie right here and now let me Just check this out we have the ID we have the movie name we have the image then we have the year genre detail and also the cast and we're not providing the rest of the stuff so it's going to just take the D4 one word

here okay so yeah this is how we are going to be creating the movie now let me just go back let's just close this one the next thing which you have to take care of this get all movies but first of all we're going to have to create a lot of Movies then we would be able to see all of them so I'm going to just proide like I don't know Transformer come on Transformers and then I don't know maybe 2025 or something like that it's going to be also an action movie and I'm going

to just leave the rest of them totally the same and now let me just change there to like John Wick or something let's just provide them and here you can see we only have three movies right here So now let me just uncomment this line of code let me just copy that from here let me just go to the top and provide there right here copy this save this file let me just go ahead and go to my controllers and I'm going to just collapse that and now let me just register there right here and

now let me just create my controller so I'm going to just giving it the name of like get all movies it's going to be equals to the async and now let me just put a Request response and now inside there we're going to be just using our try and catch block for the catch block we're going to be using like first. status of 500 and now let me just put a Json and the error will be the error do message right here okay so it should be e r like so and for the tri block

what do you want to do you just want to use our Mongoose method which will be just use the model and then the find method on there and we're not going to be Providing anything to that and now let me just use a rest. status of M is right here okay so now let me just save them and now let me just test this out so I'm going to just save this file and now I'm going to just create a new request right here I'm going to just give the name of like Get or you

know all movies right here okay so now let me just copy that and now let me place it right here and we're going to be using the get request in this case and instead typing a create Movie let me just close there we are going to be just passing the movies so we're going to be passing all movies and now let me just hit ENT right here so it's going to gives us all of the movies right here inside our database so yeah this is how we going to be getting all of the movies and

now let me just save this file let's just uh you know I'm not going to close there and now let me just take care of a specific movie so for that we are going to be Just creating a R.G and we are going to be going into specific movie and then we're going to be providing ID for the specific movie get specific movie and now let me just copy that from here and I'm going to just place that right here okay now let me just uh save this file let's just copy there and now let

me just oh you know let me just close this file let me just register there right here and register there and I'm going to be creating that route right here it's Going to be equals to the asnc request response and now inside there we're going to be using our try and catch block for the catch we're going to be using a restart status of 500 and provide our Json and for the Json we're going to be providing the error of error message for the tri block we're going to be destructuring our ID from where from

the request. prams and now underneath that we're going to be also getting our specific movie and it's going to be Equals to A and movie. find by ID and we are going to be passing our ID right here in this case and then we are going to be checking if we don't have the specific movie then we're going to be just returning let me just return the response. status of 404 404 and then Json let me just provide my message and the message will be movie nor found okay so now let me just save that

and also we are going to be showing something to the user so we're going to be using like Rest. Json and specific movie now let me just save that and now let me just try this out so I'm going to go ahead and go to I know Transformers so I'm going to copy there and now let me just go ahead and create my new request right here let's just collapse that and I'm going to just give it the name of like specific M something like that and I'm going to go ahead and copy there let

me just test it right here and we not going to be recording the all movies but a Specific movie which was this uh let me just show you there which was specific movie and then we are going to be providing our ID right here okay so then we have to specify our ID so in this case we are going to be providing our ID from or mongod DV and you know in this case we're going to be providing the ID of this John Wick and now let me just copy them and place it right here

and click on the send button so it's going to gives us that specific movie which Was John Wick okay so this how we are going to be getting a specific movie by using the ID so now let's talk about how we're going to be updating our movie so we're going to be using the R.P and now let's just provide our endpoint of update movie and we're going to be providing a specific ID right here in this case and now we have to end the user should be authenticated and also authorize as an admin so authorize

as an admin and then they would be able to Update the movie so now let me just copy that from here and now let me just register there right here sell file and now let me just create them right here produ comma and also the update movie and now let me just create my update movie it's going to be equals to snc and request response and now inside there we're going to be using our try and catch block for the catch block we're going to be using like r. status of 500 and also the Json

so now let me Just put a Json of error and also the error. message in this case and now for the tri block what do you want to do you just want to restructure first of all our ID from where from or request our prams and also we have to just get the updated movie and going to be equals to A and let's just go ahead and use our model and we're going to be using like find by ID and update this method which is coming from the mongus first of all we're going to be

providing our ID then The request. Bor like how we are going to be updating our data and then we're going to be using the new toor now we're going to be checking if we don't have the updated movie or updated movie there we go so what do you want to do in that case we're going to be just returning the response. status and we will say 404 and then let's just provide with Json response and message and for the message we would say like movie not found okay and now underneath there finally we're Going to

just sending to the user like updated movie and now let me just save them so what I want to do is that I want to test this out so I'm going to go ahead and copy this update from it and now let me just go ahead and create new request right here I'm going to just uh give it the name of update come on update movie and now let me just change that to put and I'm going to copy all of that now let me just place it right here and instead of ring a Specific

movie I'm going to just say like update and I want to update a specific movie which will be I don't know maybe instead of a Transformers I'm going to just give it the name of like something else oh I'm gonna have to copy that and now let me just place it right here and let me just go to the body and I'm going to just update the movie name in this case so I'm going to just say like uh the name and the name will be like I don't know which kind of name Should I

provide Godfather would be fine and now let me just click on the send button so here you can see everything else will be totally the same and only the name is totally changed right here okay so if you want to change the image or the year or the genre you can totally do that but in my case I want to just show you how we going to be changing the name of the movie if you want to change the other stuff so you can just proide like uh I don't know you can provide the Image

first of all and then you can say like um let's just go ahead and my image.png or jpg or something like that and here you can see it's going to also update there for you so now let me just save there and this is how we're going to be updating our movie now let's just close this out and now let me just take care of the movie review so we're going to be just using like router. poost and we're going to be providing the specific movie ID and then reviews and now the User should be

authenticated not authorizes an admin like not only the admin will be able to provide the review everyone can provide the review for a specific movie and check ID which we are already grabbing and then we have to also proide the movie review k r e v i e w and now let me just copy that from here let me just place that right here save this file and let's just collapse that and I'm going to be just placing there right in in here okay and now let Me just create them and to create there first

of all we're going to be just writing our movie review and it's going to be equals to the as synchron request response and now inside there we're going to be using our try and catch block and for the tri block first of all let me just take care of the tri block we're going to be just restructuring the rating and also the comment from where from the request. body okay and then we would also have to just use one movie Not movies but just a movie and a wait for movie and then find by ID

and we are going to be providing request or Rams and a specific ID okay which we are already taking in this case not yeah there we go which we are already taking in this case and now the next thing which you want to do is that we want to check the movie if we have the movie so what do you want to do in that case we're going to be using like already uh reviewed so if the movie is already Reviewed so what you want to do in that case you just want to use our

movie. reviews uh. find and r e v i e w Ed I guess yeah already reviewed and for this find method we are going to be passing our call back function and we're going to be just checking like if wrting user to string we're going to be converting that to string is triple equal to the request. user come on let me just use the user and the specific user ID and we're going to be also converting that To string as well now let me just save them and underneath we're going to be just checking if

the movie is already reviewed so what do you want to do in that case we just want to send to the the user like response. status of 400 and now underneath that we're going to be just throwing a new error to the user which will say like movie already reviewed I don't know how to spell this reviewed r e v i e w d I guess this is How you spell it and now underneath that what do you want to do we just want to create our review so we are going to be just writing

a review and it's going to be equals to the name like the specific username who is doing or who is writing that review and then we have to provide the rate in and for the rating we're going to be converting that to number let me just provide a rating inside there and then we have to just provide a comment and also the user so we would Say like request. user do specific ID okay so this how we're going to be creating a review and now underneath that let me just push that to or movies we're

going to be using like movie. reviews R ews and then let's just push over review which we just created right here up above and now underneath that we're going to be also using our movie. number of reviews will be now equals to movie. reviews reviews. length Okay so we're going to be incrementing There or decrementing there by using this line of code let me also take care of the rating as well so we're going to be using like mov rating it's going to be equal to the movie. reviews uh reviews like that and we going

to be using a reduce method reduce first of all we are going to be providing the accumulator and then the item name and we are going to be just using like item rating plus accumulator and then here we have to just specify the zero and then We're going to be dividing them by movie. reviews and then length Okay so now let me just save there and it should be l e n GT and now let me just save there to our database so for that we are going to be using like a and then movie.

sa to the database and now underneath that we're going to be using like rest. status of 2011 and then we have to use our do Json let me just provide my message message to that message and review added by the user so if that's Not the case what you want to do we just want to send to the user like 404 and then throw a new error of movie not found okay and for the catch block what you want to do we just want to use our console. error and we just want to set the

error we're going to be passing the error and also the response. status of 400 and then Json will be set to or you know like error and error just. message there we go so now let me just save there and we are already exporting there And we are already grabbing there right here everything is okay so now let me just test this out and I'm going to just create a new request right here and now I'm going to just give it the name of like movie review or review movie would be fine and now let

me just copy all of that now let me just place the right here and I'm going to just change there to post in this case it is is now first of all requiring the ID and then we have to specify the reviews in this case so Now let me just remove that and also the update movie as well so first of all we're going to have to provide a specific movie ID so that we would be able to review that specific movie so here you can see our reviews are now set to zero and we

are not providing any review to that so what I want to do is that I want to grab this specific movie ID from there let me just copy that from here let me just put that right here and now let me just add the reviews at the End so was there reviews or just a review yep that's a review so now let's just provide a review for that so I'm going to go ahead and go to my raw and here we just have to specify a new review right here let me just zoom in a

bit and we have to just say that review and first of all I want to make sure that I am logged in and let me just click on the cookie and yeah we are already logged in so I'm going to just say the reviews we are going to be Providing there for this review so I'm going to copy there and now let me just place it right here and I'm going to just say like uh one of the best movie or action movie so far or something like that and now if I click on this

send button right here so here you can see review. Z rating gu number fail and I just debug my application and found two mistake we are now taking or destructuring the rating and also the comment and here we can see we not Providing a reviews right here now let me just change that to comment and then we're going to also provide the reviews right here so uh what's that no not reviews but rating and now let me just provide a rating of like I don't know maybe two would be fine or five would be fine

rather now let me just click on this send button and here you can see message and review edit right here in this case and now let me just go ahead and check this out but first of all I'm Going to have to close this one and now let me just reopen that and now let me just go to the bottom and here you can see we have the rating of five and we have the comment of one of the best action movies so far so yeah this is how we're going to be adding a comment

to our specific movie so now let me just comment or not comment but now let me just collapse it right here and now let's talk about how we're going to be deleting a specific movie and to do that First of all we're going to have to go ahead and go to our admin and we're going to be just providing a router. delete method and for this delete we're going to be just providing a delete movie and we would also need to provide a specific movie ID and the user should be authenticated and also authorizes an

admin and then they will be able to delete a movie now let just copy that and save my file but I'm going to also have to put there right here s file and Now let me just register there right here and also let's just create the right in here so now let me just create my delete mov and it's going to be equals to ning function request response and also inside there we're going to be just using our try and catch block for the catch block we would just select response. status of 500 and also

the Json would be set to the eror and we're going to be just passing the error. message okay so now for the tri block What we want to do we just want to just destructure the specific ID of the movie and it is going to be coming from the request. prams and we're going to be just using the delete movie it's going to be equals to the event and movie uh scheme or model whatever you want to call that and we're going to be using the Mongoose method which will be find by ID and delete

not update find by ID and delete there we go and now let me just pass my specific ID right here Inside there and now let me just check if we don't have the delete movie so what we want to do we just want to return to the user the response. status or 404 and movie not found so let me just use the Json and message uh will be equals to movie come on movie not found in this case and now underneath this F statement we're going to be using a rest. Json and now let me

just pass the message off um movie delete Successful come on s u c e s f u l y successfully and now let me just save there and now let's just try this out okay so we're going to be just using this delete movie copy there and now let me just create a new route right here I'm going to just give the name of like uh Delete movie let me just change the name of that to delete movie right here in this case and now let me just Place uh something like that let me just

remove the reviews and all so that we're Going to be using our delete movie and now let me just provide a specific movie which you want to delete okay so we have the Godfather and I want to remove that movie so I'm going to just copy the ID from there and now let me just place that ID right here let me just change that to delete and say bye-bye to the godfa and here you can see we're now getting the movie deleted successfully and now let me just save this one and save this one and

this is how we going To be deleting here you can see we have three movies and now if I refresh that so it's going to only gives us that two movies okay so this is how we going to be deleting a specific movie so now let me take care of deleting a movie review or the comment whatever you want to call that so we're going to be just using like review and delete not review but r. delete and we're going to be just passing the delete comment in this case and the user should be authenticated

and Also authorizes an admin then they would be able to delete the comment okay so now let me just copy that from here and now let me just place it right here save this file and now let me just go ahead and collapse it right here let me just place that right here and now let's just create that right in here so I'm going to just say cons delete comment and it's going to be equals to the request response and now inside that we're going to be using our try and catch block We're going to

take care of the catch in a few seconds but now we have to destructure the movie ID and also the review ID as well okay so we're going to be just using the request. body and now we have to just use like movie and it's going to be equals to the A and move M v. findind by ID and provide our movie ID right here in this case let's just remove that empty space from there and now let me just check if you don't have the movie so what do you want to show to Your

user we just want to say the response and also the status of 404 movie not found so we're going to be just using like message and then movie not found now underneath there what do you want to do you just want to get the review index in this case and it's going to be coming from the movie and then the reviews let me just show you that I'm going to go ahead and click on this one right here so we have this movie entire object and we have this reviews inside There and then inside this

reviews what we want to do we just want to use our find index method and inside there we're going to be just passing our error function it's going to take the review and then the review and a specific ID which we have for that specific movie and we're going to be converting that to string and if it's equal to the review ID so we're going to be just removing that and if that's not the case what do you want to do in that case we just want To use our if statement one more time and

review come on uh review index which we have right here uh triple equal 2us one if it gives us minus one so what do you want to do in that case we're going to be using like response. status and we are going to be just providing that um come on let me just provide a message right and we would say like comment not found and now underneath that we're going to be just checking like movie and reviews do splice and we're going to be Just providing our review index come on not ID but review index

in this case and also one to okay so we are now splicing our comment and then we have to just increment or decrement our number of reviews so we're going to just writing our number of reviews and it's going to be equals to the movie and then reviews and then the dot length and underneath there oh what the hell now underneath that what do you want to do you just want to take care of the movie rating so Movie. rating is going going to be equals to or not movie rating but yeah movie rating will

be now equals to the movie. reviews reviews uh do length is greater than zero if that's the case let me just put the length uh l n GT if that's the case so what you want to do we just want to write m. reviews right here in this case and then we are going to be using the reduce method and we are going to be providing our accumulator and also the item itself and now in side There we're going to be using the item do rating uh plus the accumulator and we're going to be passing

zero and now let's just divide there by movie and then reviews The Dot come on dot length and then finally we're going to be just providing a zero if that's not the case and the final and final thing which we have to do is that we have to save or comment to the database so we're going to be using like movie. save and here let's just use that and now I'm going to Be also using the rest. Json and provide our message to them and I'm going to just say like comment deleted deleted successfully there

we go and yeah that was it but now let me just also take care of the uh what do we call it the catch statement and I'm going to just say console dot come on Console do error of error in this case and underneath that we're going to be using like uh response. status of 500 and now let me just put the Json right here and we're Going to be ping the error and error message if you have one so now let me just save that and we are going to be testing this out in

a few seconds but we are going to have to Prov the movie ID and also the review ID in this case so now let me just close that and you know what first of all let me just go ahead and create a new request right here and I'm going to give it the name of delete comment so delete review would be fine rather and now let me just change that To delete method and I'm going to also copy that from here let me just place right here and what are we doing is that first of

all we are now providing the come on we are just using this uh Delete comment right here now let me just copy that from here let's just remove all of that and we're going to be just providing a delete comment in this case now let me just click on the body and inside this body we're going to be just providing first of all the movie ID and Then the review ID so now let me just go ahead and go to there so in this case if I want to remove okay so we only have review

for uh this specific movie which is which is extraction so now let me just show you there we only review this movie so the first thing which you want to do is that we want to get the specific movie ID so we have that ID right here so I'm going to copy that from here and now we are going to be just using the movie ID right here so Movie ID and now let me just place it right here come on let me just place it right here and now let me just also provide the

review ID right here in this case so the review ID is uh this ID right here so we have this user ID and we also have this um movie or not movie but review ID right here now let me just copy that and I'm going to just say review ID and now let me just place my review ID right here in this case so it's going to just remove this comment And also this entire review right here okay so now if I click on this send button so it's going to just give us us like

comment deleted successfully now let me just close that and now let me just reopen that once again and here you can see the reviews are zero the reviews are totally gone okay so that was for the extraction and now let me just also show you that John Wick and we don't have no reviews inside that so this is how we going to be removing a specific Comment okay so that's there now let me just take care of the rtk query specific um end points so I'm going to just create a comment right here and I'm

going to just give it like rtk query uh end points or something like oh you know we don't have to do that now let me just write a router. get and we're going to be getting the latest movies so we will sayell like new movies but first of all we'll also have to provide this slash right here and then I'm going to just say like get new movies right here movies and now let me just copy that from here and now let me just place it right in here save this file and now let me

just register there and now underneath that what we want to do we're going to be using our get new movies and asking request response and now inside there we're going to be using our try and catch block for the catch block we will s like response. status of 500 and now let me just proide my Json Off error and also error. message and for the tri block what we want to do we just want to use our new movies it's going to be equals to A and then the movie. find and now let me just

sort that by what by the created ad and now let me just provide the minus zero so it's going to gives us the latest movies and now let me just also limit that to 10 movies you can just limit that to like how many movies that you like but in Mye I'm going to just limit that to 10 and now let me just use the rest. Json and now let me just provide my new moves inside the semi file and now let's just create endpoint or not Endo but now let me just test this out

I'm going to save this file and I'm going to remove all of them from here so that we can see everything a bit better and now let me just go ahead and create a new request right here I'm going to give it the name of like uh new movies or something like that and now I'm going to copy that from Here and now let me just place that right here and and we are going to be using the get so now let me just show you the end point once again we are going to be

sending a request to this new movies so now let me just copy that and now let me just place it right here and as soon as I click on this send button so it's going to gives us only the latest movie right here so the latest movie was John Wick and then it's going to also gives us that extraction Too and you know what let me just create new oh you know that's it that's it you can create new movie and then you can see the result but here you can see it is now giving

us the new movie right here so yeah that's that now let me just take care of the top movies so I'm going to just say like router. or get and then we are going to be just providing the top movies in this case and get top movies and now let me just copy that from here and now let me just place it Right here save my file and now I'm going to also register that here and now let me just create the controller right here I'm going to just say like get toop movies and async

request resp PS and now inside that we're going to be using our try and catch block for the catch we're going to be using like press. status of 500 and then the Json let me just proide my error and also the error. message and now for the tri block what do we want to do we just want to use like con stop Rated movies and going to be equals to the aent and then movies or not movies but just a movie and find okay so then we're going to be sorting that by using the number

come on the number of reviews and then we're going to be just providing the minus one right here and then let's just limit that to 10 movies and we are going to be just sending that to the user so we will say the top rated movies save this file but first of all we're going to have to just review Specific movie and then we will be able to see that specific movie so what I want to do is I want to go ahead and go to my review movies and I'm going to just review a

specific movie so I'm going to just refresh that from here and we want to review this extraction 2 mov right here so I'm going to just copy there and now let me just place it right here and then I'm going to just give it the review of two and I'm going to just remove that from here and I'm going to Just say yeah it was cool cool movie or something like that and now let me just click on the send button so it's going to gives us that movie edit I mean like that review edit

right here let me just reopen that and it's going to gives us that specific review made by hosan now let me just close there and now let me just test this get toop mve is out so here you can see we already reviewed one of our movie so it's going to use that extraction on the top so now let me just Go to that and that was for the new movie and now let me just take care of the top rated movie so I'm going to just create new request I'm going to give it the

name of like uh top R rated movies or something like that and I'm going to go ahead and copy that and now let me just place it right here and I'm going to just say that this is going to be the top movie so I'm going to just copy there place it right here and now let me just click on this So it's going to gives us the top movie which was extraction why is that because only for this movie we have some sort of a revie right here not for this one and not for

the rest of them so we have only reviewed this specific movie so that's why we are now getting this extraction on the top so this how we're going to be getting the top rated movies and now finally we're going to have to take care of the random movies so I'm going to go ahead and go to yeah That's fine uh go to my movies routes and I'm going to just say like r. getet and in this case we're going to be using like random movies and now get random movies let me just copy there from

here and now let me just place it right here seller file and now let me just register that here and I'm going to also create there right here so const uh this movie provide a request response to that and let's just use our Arrow function and now I'm going to be using The try and catch block for the catch block we will say like response. status of 500 and then the dot Json and we will say the error of error message and also we going to be just putting a cons random movie and it's going

to be equals to the aent and we are going to be getting the movie and then the aggregate function a g r e g a t we're going to be using our aggregate function and it shouldn't be a movies but just a movie and now we are going to be just Providing first of all the sample and then we're going to be providing the size and the size will be 10 in this case so we're going to be just getting a random movies and then we are going to be just providing a rest. uh Json

and let's just Pro our random movies in this case so now let me just save that and now let me just test this out so I'm going to go ahead and copy there random movies and now let me just test this out so I'm going to just create a new Request right here here add request and I'm going to just say like uhuh random random movies and now let me just copy that from here let's just place that and now instead of writing a top I'm going to just change that to random okay so now

let me just click on the send button so it's going to just gives us that John wig and then it's going to gives us that extraction but if I click on that once again and here you can see it's going to giv us that extraction and then it's Going to gives us that John Wick but if you have a lot of movies so it's going to just give you a random movie Inside from that um what do you call it from that entire database so now let me just save that and I guess that was

it about for all of the back end of the movies now we are able to create a movie get all of the movies get a specific movie update a movie review a movie delete a movie delete a comment from a movie get new movies get top movies and random Movies as well so that was the entire flow of the back end of the movies so now let me just take care of the front end so those are about the random movies and now let's talk about the image upload so for that we're going to be

creating our route right here so we're going to have to provide the version one and then upload and now let me just provide my upload routes right here I'm going to copy that sa my file and then I'm going to go ahead and go to my Routes and here we're going to be creating a route of upload routes.js now let me just show you that I'm going to hit enter right here and the first thing we would need is a path from path and then we would also need the express CH from the express JS

and we would also need the molter so now let's just grab that and now what I want to do is that we're going to be creating a router and it's going to be just the instance of Express and router And now let's just execute that now underneath that let's create our storage so I'm going to be creating my storage s r a and it's going to be equals to the molter do disk uh storage right here this is a method on the molter now let me just put my destination of request and file and also

the Callback function now inside there what I want to do is that for the Callback function we not going to be providing anything for the first parameter and for the next Parameter we're going to be providing the uploads folder which we're going to be creating right here inside our route so now let me just create a folder of upload or uploads with s I'm going to just create that and now what I want to do is that underneath uh these C braces I'm going to be writing my file name and it's going to be equals

to request and also the file and the Callback function and now inside there we're going to just creating our extension name so EXT name Is going to be equals to the path. extension name this is the method which we have on the nodejs and we're going to be just grabbing the file and original name okay so now underneath that we're going to be passing our callback function for the first parameter we're not going to providing anything to that for the second parameter we are going to be providing the file do uh field name and then

we're going to be just providing the dash and here for the Uniqueness we're going to be just providing a DAT now and then finally we just have to add extension name okay so that's now let's just save our file so that was it for the storage and now let's just take care of the file filter so I'm going to just creating a function I'm going to give the name of like file filter and it's going to be taking the request and the file and this cack function as well and now inside there we're going to

have to first of all take Care of the file types and it's going to be not like that but file types in lower case and it should be um the JP G and also the PNG and also the w BP and that's a different file formats and then we have to write a MIM type MIM types it's going to be equals to the images or image and then we can also provide the type of JP JP question mark G and then we can also use the image and let's just provide um what do we call

it the PNG as well and we can also provide The MIM type of uh wbp okay so now let me just close that and I guess we're missing something I don't know why but but it feels a bit off you know let me just close it right here and there we go so that's then now the next thing which you want to do is that we still want to get or uh what do we call it or extension so now let me just grab that from here and now let me just place that and what

else do I have to do is that I'm going to be just typing the M type Not with s but just mime type okay so just a singular and now let me just P my file and then M type come on M M and then type there we go now underneath that what do we have to do uh we are going to just just writing a file types and then we have a test okay so we are going to be testing the extension name and let me just write and the mime types in this case

and we're going to be also testing the mime uh what do we call MIM type as well now inside that we're going To be also creating our cback function now let me just pass my null and also the true and then for the else Clause what I want to do I'm going to be passing my callback function and new error and now in this case I'm going to be just passing the error of images on and now let me just pass my file right I mean like false right here in this case now let me

just save this file and underneath this function we're going to be creating our upload it's going to be Equals to the molter and now let me just put the storage and also the file types or not a file type but a file filter and now let me just take care of uploading a single image so I'm going to just write like con upload single image image and it's going to be equals to upload do single and now let me just pass my image right here inside there so underneath there we we're going to be just

providing our uh method of post on this Endo we're going to be posting our image And let me just provide my request and also the response and now what I want to do is that we're going to be using upload single image which we just created up above and now let me just Pro my request response and also the error as well and now inside this error function we're going to be checking if we have some sort of error then what you want to show to user we just want to show that response. status of

400 to the message and then we have to just write a Err of message there specific error message and if that's not the case so we're going to be checking for the request. file and inside there we're going to be sending the response of status of 200 and now let me just send my uh Json I mean like uh my object and we're going to be sending the message off uh image uploaded come on uploaded uh successfully there we go now let me just Pro my image and we are going to be providing our image

of first of all we Are going to be providing this random path which will be request. file. path and now let me just save that okay so now if that's not the case what do you want to do in that case so we are going to be just sending this response like send out uh send. status of 400 and now let me just send the error message right here so we're going to be sending the message of uh no image file provided there we go okay so now let me just save that and everything is

looking totally a Okay and we don't have any errors right here so finally now let me just export my router so I'm going to be just writing export default of our right here so now let me just save that and now we totally done with this file now let me just close that and we have to grab that right here so I'm going to just remove that okay so it's not going to give me the auto complete so I'm going to just grab that manually so now let me just write import upload routes and then

Let's just go ahead and go to our routes and then we have to go to the upload routes routes.js word here we're going to be first of all getting the directory name so we are going to be using like thir name it's going to be equal to path. resolve and now let me just execute that and now we are going to be making that static so we are going to be using like app. use and for this uploads folder what do we want to do we're going to be using like express. static and Then we

have to just use a path. join and here we just have to provide our uh directory name and then we have to add this uploads folder inside this uploads there we go and now let me just save there and that's everything we need to do for what do we call it um for the image upload there we go now let me just close these and what I want to do is that I want to create yet another um what do you call it yet another yet another request and now inside that Request we're going to

be testing our file upload and now let me just get the name of like file or image upload and now let me just um make that as a post request I'm going to just copy that and now let me just place it right here and for the API we are going to be using this API so I'm going to just copy there and we're not going to be providing the version ones and all of that let's just remove there we're going to be providing the upload and provide something right Here so what I want to

do is that I'm going to just click on the body and then I'm going to just click on the form data and now let me just provide like some sort of an image right here and the image will be some sort of a file so now let me just click on that add new file from your local machine I'm going to click on there and then I'm going to just go to my images and I'm going to just add this image right here click on the open and now let me just click on This send

button right here so here you can see it's going to give us that image is now successfully uploaded and now let's just test this out and here you can see inside this uploads folder we have our image right here which is Jonathan Wick and shout out to this uh website I just grabed this image from that website now let me just test another image so I'm going to just go ahead and remove that uh let's just remove that from here let me just uh Close that and let me just add another image word here and

I'm going to just add the Spider-Man let me just add that and click on the send button so here you can see it's going to add this another image to my folder right here which is the Spider-Man okay so yeah this how we're going to be adding our images by using node Jazz we are now totally done with the back end functionality now let's go ahead and go to our front end and I'm going to go ahead and go to my SRC then the redex and then the constants and now let me just create my

constant right here and we're going to be creating a constant first of all for the movies so we'll just write a movie URL it's going to be equals to the API and then version one of mov movies and the next one which we going to be also creating is for the upload URL it's going to be equals to first of all let's just go ahead and go to the API then version one and then upload now let me Just save there let's just close it right here and I want you to get rid of yourself

for creating a lot of endpoints so we're going to be just creating a mu. JS file inside this API and now the first thing which you have to do is that we have to grab our API slice let's just grab them manually and now let's go ahead and go to our API slice and now underneath that we're going to also need the movie URL and also the upload come on up God damn it up L upload URL there We go and now underneath that what we have to do let's just go back we just have

to export our con of movies um M's API slice it's going to be equal to the API slice and now let me just inject my endpoints right here now let me just save that and inside there we're going to have to pass our object and now inside this object we're going to be defining our end points so now for the points we are going to be providing the Builder and now inside that uh let me Just provide my get all movies and it's going to be equals to the builder. query and now let's just provide

our query right here inside them and now inside this error function we're going to be providing first of all our M URL and then we have to provide our all uh come on all m in lowercase now let's just close that and Prov a comma here and that was our first endpoint now let me just go back and let's just create a movie okay okay so we are going to be Creating an endpoint for that so to create a movie for that we are going to be using the create movie let me just pass my

builder. mutation and inside there uh we're going to be passing our query let me just pass my query and we're going to be also providing the new movie and it's going to be inside let me just put the inside and we're going to be providing the URL first of all and the URL will be uh the movie URL and we're going to be specifically go to the Create movie and now let me just put a comma here and now let me just provide the method of post so we're going to be posting there and we

would also need to provide some sort of a body inside the body we're going to be providing a new movie so that was it about for creating the movie now let's just take care of updating the movie so to do that first of all we're going to be using the update update mov and we're going to be passing the Builder down mutation Because we are changing something inside there and we have to just specify the query and we have to P the ID and also the updated movie and as well okay so now inside there

we are going to be just passing our Arrow function and first of all we have to provide our url url and for the URL we are going to be first of all providing our movie URL and then we are going to be going into the update movie come on in lower case uh update and movie and then we have to specify Their specific ID of the movie and then we have to specify the method and I'm going to be just passing the method of put to it and then finally we have to provide the body

of update movie or it should be updated movie rather now let me just put a comma here now underneath that what we have to do we're going to be creating yet another endpoint for update movie review R ew and now let me just provide my Builder H not this one but builder. mutation and for the Mutation we're going to be passing the query and inside that we're going to be passing the ID the rating and also the comment and we are going to be providing the URL first of all so for the URL we're going

to be passing the movie URL and then we're going to be also providing a specific ID inside there and then finally our reviews there we go now underneath that we're going to also provide the method of post because we're now posting our data and now let me just Put the body and inside the body we're going to be providing the rating ID and also the comment okay so now let me just save there and I just want to make sure that this is a put method and yeah it is now underneath that we're going to

be providing yet another endpoint for deleting the comment okay so now let me just for my builder. mutation and inside this mutation we're going to be providing the query and it's going to take the movie ID and also the review ID As well okay so now inside there we're going to be providing our URL and the URL will be uh the movie URL and also we're going to have to pass the delete comment and now underneath that we're going to be providing the method of delete to it because we are deleting something so the method

will be uh DED so now let me just provide my movie ID and also my review ID as well now let me just save that let me just create an endpoint for uh deleting the entire Movie so we're going to be using like delete movie and it's going to be a builder. mutation and now inside there we're going to be passing the query and for the query is going to take the ID and based on that specific ID we're going to be deleting our movie so now let me just provide my movie URL come on

movie URL there we go and we also have to provide the delete movie and then we are going to be deleting the specific movie by this Specific ID okay so now let me just provide a comma and the method should be a delete because we are deleting a movie so we have to provide the method of delete to now underneath that we're going to be also adding uh what do we call it we're going to be also adding end point4 get specific movie okay so we're going to be using a builder. query in this casee

because we are only fetching some sort of data we are not rotating that data and now let me just Specify the ID inside there and then we have to specify the arrow function and I'm going to be passing my movie URL and then inside there we're going to be defining our specific movie and then the ID of their specific movie okay so now let me just save there underneath this endpoint we have to create yet another endpoint now underneath there we're going to be defining yet another endpoint for upload image and now let me just

take care of this we're going to be Using like builder. mutation and now inside that we're going to be proving the query of aror function of form data okay so now inside that uh let me just P my data and also my aror function we're going to be defining our URL and the URL will take the upload URL and it's not going to take anything else in that and now let me just provide my method of totally poost and then also we have to Define our body and the body will be there form data okay

so now we totally Done with that now let me just put my comma here now underneath that we're going to be creating an endpoint for get new movie or movies rather and we're going to just using like um builder. mut not mutation but in this case we're now getting some sort of data so we have to use the query and now if you want a query that for that we're going to be using this Arrow function and we're going to be using the endpoint of the movie URL first of all And then we have to

just write a new movies there we go okay so now let me just you know I'm not going to duplicate that let me just provide a comma here and let's just remove that from here and now the next thing which you want to do is that you want to get the top movies and we're going to be using like Builder do query and we going to be using almost the same function as the previous one so now let me just add my arrow function inside there and we are going to be Using like my movie

URL and then we want to go to the top movies there we go okay so now let me just duplicate this one what the hell and now let me just put a comma here and I'm going to just change the name of that to like get random movies now let me just change this top and change that to random mov M right here so now let me just save that and that was a lot of endpoint right here but we did that now let me just create a hooks based on these end points and then

We're going to be using the inside our component so now let me just use the export con and now let me just grab that from the M API slice okay so now inside there first of all we're going to be exporting the use get all movies then we're going to be also um exporting the use create movie mutation and then also the use update movie mut then also use add uh movie review and uh use delete comment and also they use get specific movie query and also they use Upload image uh mutation and now let

me just provide a comma and use get new movies and you know let me just save that and I'm going to just provide my comment right here uh this is going to be for the dashboard or you know I'm not going to provide their dashboard right here because we can use that in other places if you wanted to so use get top movies and also they use get uh random movie come on random movies as well so yeah that was all of the end point we Have to create and also uh that was a lot

of hooks okay so that was a long journey but we did that so that's to you're done now the next thing which you have to do is that we have to create a movie so for that we're going to have to go ahead and go to our pages and inside this Pages we're going to be going into the admin and inside this admin we're going to be creating or uh what do you call it or create come on let me just remove this cursor we're going to be Creating or create movie. jsx so now let

me just write my RFC inside there let me just save there and we're going to have to go ahead and go to the main and register there right here okay so now let me just duplicate there and instead of writing this genre I'm going to just write a create right here and I'm going to just remove there and change there to create movie and it's going to Auto Import there for me let me just go back and now let me just save there and I'm Going to copy that from here let me just copy that

entire thing from here and I'm going to place it right here but first of all I'm going to have to just stop my server and I'm going to be using The npm Run full stack in this case not just a backend but the full stack and it's going to run my front end and also my back end so now let me just place it right here and I'm going to be just placing the hit enter and here you can see it's going of just gives us first of All we have to log in as an

admin I forgot to do this so now let me just log in as an admin and I'm going to just write h12 and it's going to log in as an admin right here now the next thing you have to do is that we have to place this endpoint right here and now let me just hit enter and here you can see it's going to gives us that create movie right here okay which is totally amazing so yeah what I want to do is that I'm going to go ahead and go to my create Movie and

now let's just take care of that and the first thing which I want to do is that I want to grab my use effect and also the use T and the next thing which I want to grab is the use navigate from the react router D in this case re router Dom let's just close that and we are going to be also importing a few hooks from our rtk query which will be something but I'm going to show you there in a few second let me just go ahead and go to my Redux then let

me Just go to my API and then um movies and now inside there uh we are going to be just grabbing two so we're going to be grabbing like use create mutation create movie mutation and then use upload image uh mutation word here so that's that now let me just also get um all of the movies so for that we're going to be getting there from same path let's just go ahead and go to the redex then the API and we're going to be getting the genre not the movies but the Genre and I'm going

to be just using like us PCH uh genre query right here so it's going to giv us all of their genres and now let me just import my toast from where from the react toasttify okay so now let me just save that and that's everything we need for now and now let me just create an instance of my navigate so cons navig again and it's going to be equals to the use navigate and now let me just execute the N AIG G which is totally correct and now let me Just create my state for the

movie so we're going to be just writing like movie data and then we have a set movie uh data there we go and we're going to be using the used St and now let me just provide my object first of all we are going to be providing the name of the movie then the year and the initial value will be set to zero then the detail will be also set to uh d e t t a i come on D e t a i l but now let me just check my uh come on my

model and Let me just check was that a detail or details okay that was just a detail now let me just copy that and let me just place it right here and that was correct and now let me just put the cast and the cast was an empty object uh empty array rather and now let me provide my rating of zero and also the image will be totally know and also the genre will be set to empty string now let me just also create a state for the selected image so I'm going to just say

like selected Image and also set selected image uh will be now equals to the use St and we're going to be just providing the null inside there and now underneath there we're going to be destructuring something from our rtk query end points and we're going to be destructuring there first of all from the use create movie and we are going to be first of all destructuring our create movie and then not in not in upper case but in lower case so we have a create movie and Then we're going to be doing next destructuring so

we're going to be destructuring the is loading and we are going to be renaming that to is uh creating movie so we are now renaming that and now let me just also restructure the error and also I'm going to just rename that to like mie uh error detail or something like that and yeah you can give it any name you like but in my case that's totally fine and now let me just destructure something from the Use upload image mutation and we're going to be destructuring first of all the upload load um come on upload

image and then we would also do a NE destructuring of is loading and then we have to just give it some sort of name so I'm going to just give the name of like is uploading image and then also the for the error we're going to be also providing the name of like upload um image error E R R details there we go okay so now underneath there what do you Want to do we just want to Fitch all of our genres so we're going to be destructuring there from the what do we call it

from the use pitch genres query and now let me just fetch that and we're going to be just getting the data I'm going to rename that to genres and also we going to be fetching over is loading and we are going to be renaming that to like is loading genres okay so now underneath that we're going to be using the use effect to get all of the genres In the first render let me just Pro my arrow function inside there and here for the dependency array we are going to be just foring our genres and

inside there we are going to be checking if we have the genres so what do you want to do in that case we just want to set movie data and here we're going to be just passing our previous um previous St or previous data right here and now inside that what we want to do we just want to provide our previous data first of all previous Data and then we are going to be providing or we are going to be mutating our genre and we are going to be just setting that to like genres and

here we're going to be taking the first index and if we have that we're going to be just getting the ID from there and if that's not the case so we're going to be just setting there to empty string okay so that's there now let me just save that and I'm going to just Place The Styling right here and you should do the Same now inside there we're going to be creating our form let's just remove this action from there and now inside this form we're going to be just creating our paragraph and I'm going

to just say like create movie I'm going to also proide The Styling to it so now let me just save there and let's just check this out and here you can see we are now getting our create movie right here which is totally amazing now onne that we're going to be creating our D with the Class is of mar for the bottom of four and now inside that we're going to be providing a label and for the label we're not going to be providing any HTML 4 but we will provide some sort of a class

to it so I'm going to just provide a class of block to it and now inside there we're going to be just providing the name and let me just also provide my input inside there type will be set to text and now inside there we're going to be also providing the name to it and the Name will be a name and I'm going to also provide the value of movie data do name let me just also attach the event handler on that so I'm going to just pass the handle uh change event hand right here

and which we did not create by the way but we will create there in a few second and now let me just attach some classes to it so pairing for the xais will be set to two and pairing for the Y AIS will be set to one and with will be totally full now let me just Save there and comment this line out for a second s there and here you can see we are now getting one name right here and that's looking totally amazing you can change the UI if you want it to but

in my case that's going to do it let me just copy this div and duplicate there a few times so first of all we're going to be duplicating that for the year then for the detail then for the genre and one time for the cast and I guess that's going to do it so I'm going to go to the Top and first of all we have a name and now the next one we have is year so I'm going to just type the year right here I'm going to also change the type of number and

also let me just provide uh here in this case and inside the movie data we're going to be just parting over here and we also have a handle change right here for this one as well and we're not going to be changing anything inside there now the next one we have is a detail so now let me just change there To detail uppercase D and then tails in lower case and I'm going to be just removing this input field from here and now let me just put my text area and inside this text area we're

going to be providing for the name as a detail and for the ID we're not going to be providing any IDs to it and we're not going to be providing any rows and columns inside there okay so now let me just provide the value and the value will be like movie data and then we have Our detail right here inside there now let me just attach my own change event hander on there and we're going to be passing our handle change event handler which we did not create yet okay so now let me just um

copy some styling from here and let me just place it right here God damn it let's just cut that from here and let me just place it right here s my file and comment this line out okay so that's that instead of writing this name let's just remove this name and I'm Going to just provide a cast of comma separated s e p a r a t e d and let's just put our separate right here and everything else should be the same but let me just Prov for the name of cast and then we

have a movies data and then cast and we're going to be just providing the join method on there and let's just provide a comma and space okay so that's there and we're going to be also attaching our event handler but now let me just remove that from here And we're going to be attaching the event and now let me just use my set movies data and here we're going to be first of all providing the movie uh let me just use my spread operator and now let me just provide my movie data first of all

we're going to be providing there and then we're going to be just changing the cast to the event. target. value and now and now let me just split all of that and we're going to be splitting there And now let me just provide a comma and space so that's everything that you have to do let's just take care of the genre so let me just write a genre and also uh we have to just remove uh uh this entire input field right here I'm going to just remove this entire input field and I'm going to

just change that to select and inside the select we're going to be providing the name of genre to it and for the ID we're not going to providing the ID uh we're going To be providing the value and the value will be movie data. genre and now inside there we're going to be also providing the on change when Handler on there and that same handle change event handler which we're going to be creating in a few second okay so yeah let me just copy that entire thing from there and now let me just place it

right here and that's going to do it but now let me just save there I'm going to comment this line out for a second like so and now inside the Select statement uh what do you want to do you just want to check for is loading genre if it's uh if it has this genre right here we're going to be passing our option let me just pass my option right here and close there okay and we're going to be just saying like loading genres dot dot dot okay so if that's not the case what do

you want to do in that case we're going to just iterating all through all of the genres that we currently have by using the map method And let me just provide my genre name and now inside that we're going to be just passing our Arrow function and that's looking awful but let's just remove there so we have our genre and yeah you know let me just close that that's looking totally awful let's just remove that and let me just try that once again it read over through all of the genres by us using the map

method and we are going to be also passing the genre and inside that What do you want to do you just want to attach our option so now let me just attach my option and I'm going to be attaching the key first of all and the key will be my genre and then there's specific ID from that genre and then we are going to be also providing the value right here and the value will be genre and then that specific ID from their genre okay so then we have to also write a genre. name and

now let me just SA there okay so that's every single thing That we have to take care of right now but you know what underneath this select and also this label and also this D but inside this form and let me just with a class of margin for the bottom will be set to four and we're going to just passing the label off we're not going to be providing any HTML 4 to that but we will provide a styling to that so for the styling we're going to be checking if we don't have the selected

image then what do you want to do we just want to Attach the border of um one pixel solid come on solid and then 888 come on 88 come on 888 there we go and also let me just provide a comma here I'm going to be also passing the Border radius B Rd r r a d us s and for the Border radius we're going to be passing the five pixel border and also we're going to be adding the adding of at pixel okay that's not the case what do you want to do in that

case so now inside that we're going to be adding These styling right here just a border of zero and the Border radius of zero and ping will be also set to zero okay so yeah that's cool but now inside this label uh we are going to be rendering our image and also that input so we're going to be checking if you don't have the selected image and we just want to show that upload come on upload image come on let me just type image right here and underneath that we're going to be just providing our

input and the type Will be just set to file and now we are going to be also accepting all of the images so now let me just add image and every single image and on change we're going to be just typing our handle handle image change which we're going to be creating in a few seconds and now let me just add a bit of styling to it display we be now set to not selected image and if that's not the case so we are going to be just writing a none and if that is the

case we are Going to be setting there to block okay so now let me just save there and now let me just comment this line out we're going to be creating there in a few seconds but it will take a bit of time now underneath this level and also this de we're going to be creating our button so now let me just finally create my button right here and we are going to be providing the type first of all and the type will be set to button and we're going to be also attaching the on

click Event handler on there and handle create movie in this case and now let me just add these classes so I'm going to just copy there and now let me just place it right here and you should do the same let me just comment this line out we're going to be also attaching the disabled as well and if that is not creating a movie so what do you want to do in that case or is uploading the image okay so if that's the case so now inside that we're going to be just attaching or is

Creating a movie or uh is uploading the image and if that's the case we're going to be just saying like creating dot dot dot and if that's not the case so we're going to be just saying like create movie in this case Okay so yeah now let me just save that and that was it about for this entire UI and that's a lot of coding and a lot of explanation of every single line and yeah now let me just check this out and here you can see we have the UI right Here you can totally

definitely change the UI if you want it to but currently we have every single thing that we currently need right here so now let me just finally attach the functionality and first of all we're going to be just starting from uh what do you call it creating a movie but we are going to be starting from the handle change now I'm going to just uncomment there and let me just see we have this handle change right here now let me just uncomment This line out as well now let me just select that hit contr d

one more time let me just select this handle change one more time and hit control D we have yet another ah God let me just select that hit contr D so we have yet another handle change right here let's just uncomment that and let me just hit contr d one more time and yeah we are now totally done with that but now let me just copy that and let's just create our handle change up above this jsx right Here okay so we're going to be just creating like con handle change and we're going to be

just passing the event object inside there and we're going to be destructuring two things from the event. target object okay so we're going to be just restructuring first of all the name and also the value from there okay so now underneath there what do you want to do we have to first of all put the equal to sign right here now underneath there what do you want to do We just want to check if name is triple equal to the genre then what you want to do in that case we just want to first of

all take the selected genre and come on g e n r e come on selected genre it's going to be equals to the genres. come on genres. find method and we're going to be passing our genre in this case and here we are going to be just checking like genre. name is triple equal to the value okay so then it's going to gives Us that selected genre we can totally log there you can totally log there if you wanted to but I'm not going to and you guys already know all of that stuff so that's

why I'm going a bit fast now let me just add my set mov data and here inside there we're going to be just providing the previous data for the previous St and now let me just pass my arrow function inside there come on Arrow function there we go and now first of all we're going to be just adding our Previous data and then inside come on previous data let me just copy the preview data from there and now let me just place it right here but then we're going to be mutating our state or changing

word stad by using the genre if the selected genre selected genre so what you want to do in there we're going to be just providing like selected genre let me just add a genre and then the specific ID from there and if that's not the case we're going to be just setting That to empty string okay so that's the now let me just save this file but something is not okay and that's because we forgot to include the curly braces let me just add the curly brace there and let's just add it right here sell

file uh let me just copy that place it one more time what the hell am I doing and uh that was for the F statement but now for the L statement what do you want to do in that case we're going to be adding The set movie data let me just add my previous um data one more time and now let me just pass my arrow function inside there and let's just add our previous data and we're going to be just adding the name and value to that name okay so that's that and we are

now totally done with this function now let me just save there and we are not going to be testing that right here because it will create a movie for us without any specific there and it's going to just Gives us an error now let me just take care of the image and also the create movie function so now let me just take care of that I'm going to just uh collaps it right here for a few seconds uh image change so we have that handle image change in one area which you can see right here

now let me just copy the name and let me just go to the top and here we're going to be just creating that function right here okay so underneath this function we're going to Be creating our handle image change so now let me just create there and this is totally simple function you will see that so first of all we need the file and we're going to be getting that file by using e. target. files and we only need the first one and then we going to be just changing our set selected image and we're

going to be just passing our file inside there and that was it about this function baby that was it and now let me just take care of this handle Create movies we have that in one place and now let me just click on there and here you can see we have that let me just uncomment this semi file and copy there let let me just go to the top one more time and let me just create their function right here and this is going to be the big one okay so underneath this function let me

just collapse that right here we're going to be creating our uh handle create movie so now let me just create like con handle create movie it's Going to be asynchronous function as syn function and now let me just add my arrow function inside there we're going to be also attaching the try and catch block but we have to check for a lot of different things so I'm going to just remove that and hit enter right here and now let me just place it right here so first of all we are checking if we don't have

the movie name the year detail the case or the selected movie so what do we want to do in that case we're going to Just finding the toast so we would just say like toast. error and we would just say like please fill all required Fields okay so then we're going to just returning there and if that's not the case let me just save that if that's not the case what you want to do we're going to be creating a variable with the name of like uploaded up l o a d d upad Ed image

path and it's going to be currently set to no okay and now the next thing which you want to do is that You want to check if the movie is selected or if you have the selected image so what do you want to do in that case we're going to just creating our form data it's going to be a new form data okay and this is a Constructor and now we have to append data inside this form so we're going to be using our form data not this one but form data and we're going to

be appending our image first of all and the image will be this selected image so now underneath that We're going to be just making another variable so which will be upload image response it's going to be equals to the r r p n there we go it's going to be equals to A and then upload image and now let me just provide a form data inside there okay so now underneath there we're going to be just checking that if we have the upload image response let me just see copy that from here and now let

me just place it right here so if we have the upload image Response and then we have a data inside there so what do you want to do in there we're going to just setting our uploaded image path image path which we just created and we just set there to n let me just show you there I'm going to copy there and now let me just place it right here and it's going to be equals to the upload image response oh my God there's a lot of uh long variables right here so now let me

just get the data from there and then the image inside there okay so If that's not the case what do you want to do in that case console. error and we would just say like failed uh to upload come on f a i l Ed fail to upload image and now let me just add my uh upload image uh error detail right here okay and also we will just say like toast. error so if you have some sort of error so we're going to just saying like fail to upload image right here okay and now

finally we just also have to return that so that it will not execute no more And finally we just have to take care of creating a movie we're going to be just calling our create movie function and we just have to specify first of all with movie data and then also we have to set the image and then the upload image uh upload image path let me just show you that I'm going to copy that from here now let me just place it right here sa my file and then we have to navigate or user

two let me just WR navigate to this admin and then um movies then Dash list Which we're going to be reading later but we did not have that not right now okay so now the next thing which I want to do is that I wanted to place that right here we're going to be also emptying out our input field even though we don't have to do that but I am going to do that I don't know if you come back to the same page and if you have a k so that will be already erased

and finally let me just write my toast. sucess and here we're going to just adding like Movie addit or add it to database right here okay so now if that's not the case and if we are inside a catch block we're going to be first of all proving our console. error and now let me just provide like fail to create movie and I'm going to also provide a separate right here and then we're going to be just passing our create movie error detail which we're getting from the rtk query and also we're going to be

just passing our toast. error and the toast Error will say like failed to create movie and now let me just render my movie movie there we go let me just render the create movie come on create movie detail uh eror detail if we have there we're going to be just getting the message from there and finger crossed that was all the thing that we have to do for just creating the movie and now let me just test this out so I'm going to just refresh there and now uh currently let me just check my database

Where here I'm going to go ahead and go to my mongi B and we have only two movies inside there and finger cross first of all we're going to be just creating a movie of uh I don't know um black AR would be fine let me just add this image and I'm going to just say like Black Adam and I don't know when this movie was released so I'm going to just add like 2023 amazing movie of the rock or something and the guest was hosan Because I was a Black Adam and John uh and

also come on John oh my God John and then Alex and now let me just add some sort of a genre right here let me just select that and I'm going to just add that inside the romance that was a romantic movie oh my God let me just add that right here and let me just click on this uh create movie right here so it's going to just create one movie and then it's going to just brings us to this movie list right here which is a a Good sign but we did not create that

right here not right now let me just check my database right click on there and refresh that and the movie was not created I don't know why and I just found out that I made a mistake right here let's just remove that and let's just also remove that and now let me just go ahead and create a new movie let's just close them and what I want to do is I want to create a new movie Black Adam and it was released I guess in 2023 and one of the best superhero H movie ever or

something like that let me just add rock paper and hosen or something like that and now let me just click on this genre click on the REM remains and click on the image and let me just add my black itam image and click on this create button and it's going to just create that movie for us and now let me just check this out here you can see we have these two movies right here now let me just right click On there and click on the refresh so we have now three movies so now let

me just check this out let me just click on this one so here you can see we have a black itum we have the image we have the year genre and we also have the cast and the detail the number of review we have zero and yeah that was it about how we're going to be creating a new movie We're Not totally done with the movie creation process now the next thing you have to do is that we have to create another Component and I'm going to just create the name of like admin um movies

list. jsx and inside there we're going to be using our RFC now let me just go ahead and go to my main and register there right here and I'm going to remove this um come on this genre list and I'm going to just provide my admin uh movie list right here and it's going to Auto Import that for me and now let me just remove this genre from here and also this movies and I'm going to just replace That with movies and then Dash list so now let me just save that and let's just test

this out so here you can see it's going to just gives us that admin movie list right here and why is then when we successfully create our movie it's going to redirect the user to this movie list right here okay so now let me just take care of that so the first thing we would need is the link so I'm going to just grab my link from the re Dom now we would also need to use or rtk hook so For that I'm going to just go ahead and go to first of all my Redux

and then I'm going to go ahead and go to my API and then movies right here and we're going to be just grabbing this hook right here which will be the use get all movies query now let me just grab there and now let me just create an instance of there yeah we are going to be creating the instance of there but we will also have to uh destructure the data right here so we're going to be just destructuring the Data and I'm going to just rename this data to movies okay so now we are

totally done with that and now let me just remove this label from this GSX and we're going to be first of all creating a container now let me just put a class name of container and margin for the x-axis will be set to nine rim and now inside them we're going to be just creating a day with the class of flex and also the flex of column and for the medium screen what you want to do we Just want to set that two let me just write a medium screen and flex row we're going to

be also creating yet another day with a class of padding all around will be set to three and inside that we're going to be just also creating margin for the left and also it's going to be just set to Two Rim and now let me just put a text of totally extra large and font will be set to totally bold and and the heart will be just set to 12 and inside there I'm going to just say like All movies and here let me just pass my uh come on movies if you have that we're

going to be grabbing the movies L like how many movies we currently have so now and here you can see it's going to gives us their three movies right here now underneath this D we're going to be creating yet another div and I'm going to just placing these uh classes right here and inside this div we're going to be iterating over through all of the movies and now let me just itate over Through there by using the map method and we're going to be just passing our movie right here in this case and now inside

there first of all we're going to be creating your link and now let's just close there let me pass my key and the key will be just set to movie and a specific movie ID and now let me just provide a two so it will go to first of all let me just write my back Tex it's going to go to the admin then the movies then the update and now let me just pass My uh movie then do specific movie like specific movie ID and then inside there or you know what first of all

let me just provide this classes right here let's just save there and these are going to be the classes for this link and now inside there we're going to be just creating yet another da with a class of flex and now inside this Flex we're going to be creating yet another div with the key of uh let me just pass my movie and then a specific movie ID Let me also place these classes right here now let me just save there and inside this div let me just put that right here inside this div we're

going to be creating our image and for the image SRC like for the source we're going to be providing our m. image and for the alternative text we're going to be providing our mu. name okay and also I'm going to be just placing the class name of width will be set to totally full and also height will be set to 48 48 there we go and object will be also set to totally cover and now let me just save there and here you can see for these two movies we don't have the images but we

do have the names but for this movie we added the image so that's why we can see that okay and this is also a link so if I click on that it's going to brings us to that specific movie and we're going to take care of that a bit later underneath this image we're going to be creating yet another Div and I'm going to be placing these classes right here for the styling and inside this div we're going to be creating yet another div and I'm going to just give a class name of font will

be set to to bold and text will be set to extra large and margin for the bottom will be set to two Okay and here we are going to be just rendering the movie. name and now let me just save that and now underneath this D what you want to do we just want to add a paragraph and For this paragraph you're going to be attaching the class name of text totally gray let me just pass a gray of 700 and also text will be set to base and now inside there we're going to just

passing the movie. detail uh D come on D detail detail let me just save that and underneath that what do you want to do we're going to be creating yet another div and let me just place the class name of margin for the top will be set to Two Rim and also margin for the bottom will Be set to one Rim okay so now let's just close there and now inside there we're going to be creating our link and this link will go to that specific movie so I'm going to just pass first of all

my admin then I'm going to just past the movies then update and it's going to just allows us to update a specific movie so we're going to be just passing the movie and then ID okay so now inside there or you know let me just also add the classes and now let me just place These classes right here let me just save that and it's going to just say that update movie now let me just save that and here you can see this how we going to be getting our UI and that's looking better but

you can change the UI like however you want but I'm going to just delete these two movies right here so let's just go ahead and go to my database uh and then we have the extraction to and wi so now let me just remove these movies let's just remove That and I'm going to also remove this movie as well let's just leave this black Aram right here let me just refresh there so it's going to just gives us this movie right here which is totally looking cool and yeah that was it about the admin movies

and next we're going to be taking care of I guess uh all the comments I'm not sure but we are going to be taking care of something so that was it about the admin movie list so now we are totally done with the Admin movie list now the next which you have to do is we have to take care of uh update movies so I'm going to be just creating a component I'm going to just give the name of like update movie do or movie. jsx right here and I'm going to be using my RFC

now let me just save that and what I want to do is that I want to register that right here so now let me just duplicate that and we're going to just placing like update movie and it's going to Auto Import that for Us and now let me just remove that from here and I'm going to be ping my movies and then update and specific movie so now let me just save that and now let me just go ahead and check this out so if I click on the specific movie so it's going to just

give us that update movie right here which is something that we want so I'm going to go ahead and go to my component and we're going to be grabbing a lot of things the first thing which you have to grab is the use effect And we would also need to grab the use St as well now underneath that we would also need to get the use per Rams and also they use navigate as well and we are going to be grabbing that from the react router Dom and we are going to be also importing our

Hook from the rtk query which we have like use get specific movie query and use update movie mutation use upload image mutation and use delete movie mutation now underneath there we are going to be also Importing let's just remove that from here we're going to be also importing the toast uh from the react toasttify okay so now let me just save there and now inside this update movie what do you want to do we just want to restructure the ID from the use prams and now let me just uh create an instance of that use

navigate and store the inside of navigate and now let me just create my state we already created the state so now let me just place a right here so we Have a movie data and we also have a set movie data and inside there we have a name year detail Cast rating and also the image okay so that's the now the next which you have to do that we have to also make a St for the selected image and also the set selected image as well and we're going to be grabbing that from the used

St and now let me just pass my null initial value and now we are going to be destructuring the data and we're going to be changing the name of that Data to the initial i n i t i l initial movie uh data it's going to be coming from the use get specific movie uh movie query and we're going to be passing a specific ID to that specific movie so now let me just use the use effects so that we can see something when the component first renders so now let me just proide the dependency

array and for the dependency array we're going to be just providing the initial movie data and inside there we're going to be just Checking if we have the initial movie data what do you want to do in that case we're going to be just setting our movie data to the initial movie data right here okay so that's that now let me just save this file so now there we're going to be just destructuring a lot of things from the use update mutation or movie mutation and now inside there we are going to be just passing

the update movie and let me just Pro the is loading and we are going to be just renaming That to something like is updating movie would be fine okay so now we are going to be just destructuring there now the next thing which you have to do is we also have to destructure something from the use upload image mutation and we're not going to be ping anything to that but we're going to be just destructuring the upload uh up a upload image and we are going to be just also destructuring the is loading and let

me just rename that to like is uploading image and also The error okay so we're going to be just passing the upload let me just pass upload image error details or yeah details will be fine now let me just save that it's going to look a bit horrible so now let me just go back and that's totally different things so now I'm going to also destructure my deletion so let me just zoom in a bit once again and I'm going to be just destructuring there but first of all we have to use the use delete

uh movie Mutation and then we're going to be just destructuring the delete movie right here come on delete m o v i e there we go let me place my styling right here and inside there we're going to be creating a form and we're not going to be providing any action to there and inside this form we are going to be creating a paragraph which will say the update movie right here and now let me just place the these classes right now let me just save there and let's just Refresh there and here you can

see we are not getting anything but now let me just right click on there and go to my inspect element let's just go to the console and we are getting the error it is saying the requested module SRC uh M does not provide an export name use delete movie mutation why not let me just go to the top movies does not provide the use delete mve mutation use delete yeah we do have the used delete comment but we Are already defining or used delete I guess we're not exporting that let me just check so let

me just type the use once again use delete and we have a movie mutation right here now let me just provide a comma save this file and now let me just refresh that and here you can see we are now getting the movie right here updated movie rather so we are now getting there which is totally cool but now let's just take care of the jsx right here so now Underneath this paragraph gra we are going to be creating our dat with the class of margin for the bottom will be set to four and now

inside that we're going to be just providing the label of um let's just remove that HTML 4 and now we me provide a class name of block to it and inside there we're going to be providing the name and also the input field so this input field will have the type of text but we're going to be also providing the name of name as well and Also the value will be set to the mie data and then we have to specifically specify the name and then the on change property we're going to be passing the

handle change okay something which we're going to be creating in a few second but now let me just provide a bit of styling to it so border and ping for the xaxis will be set to two pairing for the y axis will be set to one and withth will be set to totally full so now let me just save there let's just count this Line out save our file and here you can see we are now getting our black arum right here and which is looking totally a okay but now let me just duplicate this

line of code maybe three times so this is going to be one two and three now let me just take care of the first one so we have a name but now let's just change this name to year so I'm going to just change that to year let's just provide a year right here and the type will be set to number and also this is Going to be set to year and from the movie data we're not going to be taking the name but in this case we're going to be providing the year and I

guess the rest of them will be totally the same but now let me just change that to detail and we're not going to be providing any input to that so now let's just remove that from here we're going to be providing text area and let's just provide a name of detail to it and for the ID we're not going to be providing Any ID and colums and rows so let's just remove that and now we are going to be also providing the value and the value will be movie data do detail there we go now

let me also provide the own change Handler on there so handle change which we're going to be commenting in a few second now let me just copy the same styling from there let's just copy that from here and now let me just place it right here same my file and now let me just uh comment this line out and inside This text area what I want to do uh and we're not going to be closing our text area like that but now let me just close them manually so now let me just save this file

and that's there and finally let's just take care of the cast so you would have a cast and then the comma separated cast s e p a r a t d and now underneath that we're going to be just passing the cast and then we have to specifically provide the cast and then the join and now let's just split that By using the comma and now what I want to do I'm going to just uncomment that let me just remove that from here let me just P my event object to there and the set movies

data and we are going to be first of all providing all of the movies so let's just provide let's just remove there movie data and now let me just change the cast and the cast will be ER Target do value and now let's just split that by using this comma and there we go okay so now let me just save there and Underneath this label and div we are going to be defining our classes I mean like that same styling once again so now let me just go back and now let me just Place The

Styling right here so here you can see we are now providing their div and we are now providing their classes to it and then we have a level and we're now providing this inline styling to that and if we don't have the selected image so then we are providing these classes but if we have there so then we Are providing these classes right here okay now inside they we're now providing if we have the selected image so we're going to be just saying like upload image and otherwise we're going to be just taking care of

the handle uh image upload so now let me just save that and that's exactly what you have to type okay so I'm just uh copying and placing there because I already written this code and I'm rewriting there once again so I don't want to waste your time and Not mine so now let me just save that and underneath this dat what do I have to do I can totally copy the the button as well but you know what let me just retype there so I'm going to just placing the button and now let me just

put a type of button to it I'm going to also provide the on click Handler to that and then we have a handle update movie and we are going to be providing there in a few second but now let me just provide a b of classes to it and Then outside from there we are going to be also attaching the disabled State on there if we have the is updating movie or we have the is upload uh movie right here so now let me just save that and inside there uh inside the level of this

bone what do you want to do we just want to check if you have is updating movie or we have the is uploading movie is uploading movie right here uh this should be uploading so is uploading movie so what You want to do in that case we just want to check if we have the updating dot dot dot or we are going to be attaching the update movie there we go okay and now underneath this button we're going to be creating a another button and I'm going to just um WR the type of button to

it and also the on click event handler will say the handle delete uh come on handle delete uh movie right here and we're going to be also attaching the same classes so now let me just copy that and Now let me just place it right here and the disabled state will say there is updating movie or there is uploading movie okay and now here inside that there we are going to be just ping that is updating movie or that is uploading uploading movie and so we are going to be just spacing like uh either deleting

come on d e l e a d e l e t i n g dot dot dot or we're going to be just passing like delete movie d e l e t e delete movie as a label so now let me Just save there and now let me just comment this line out sa file and here you can see we now getting all of the movie detail but we going to have to provide a bit of more classes to there so now let me just place these classes to these classes right here so now let

me just save there and here you can see we're now getting this red button right here they are not doing anything because we're not attaching any event listener on there and yeah that's the UI but now Let me just take care of the functionality I'm going to go to the top and first of all we're going to be just defining the handle change functions we have this handle change function in three area so now let me just uncomment that now let me just click on that once again so we have that right here now let

me just uncomment there here and now let me just uncomment there right here at the final stage now let me just go to the top and create the same function Which we are defining for all of their components so we are going to be just providing first of all the handle change it's going to take the event and now inside there uh what do you want to do we just want to grab the name and also the value from where from the ER Target okay and now underneath that we're going to be just defining like

set mie data and let's just provide our previous uh data right here and inside there let's just remove that from here and inside There we're going to be providing our previous data so prev data and now let me just provide my name and let's just Define a specific value for that okay so now let me just save that and that's it about for this function now let me just take care of the handle image change and I'm going to just search for that so we have the instance of there in one place and now let

me just uncomment that and I'm going to go to the top once again and now let me just create this function Right here underneath this handle change now let me just create that function and this one is going to be totally simple so we're going to be just creating like um the function name and now let me just provide our event object and inside there we're going to be just providing the file and that will be the e. target. files and we're going to be getting the first one and now need that we're going to

be using like say selected image and we're going to be providing the type of File okay so that's the now let me just search for the handle update movie and here you can see we have the instance off there now let me just uncomment there go to the top and let's just go to the top once again and we are going to be creating this function right here at the top of this jsx so we're going to be just creating like uh handle update movie and this is going to be the asynchronous function and now

inside there we're going to be using our try And catch loock for the catch loock we're going to be taking care of there in a few seconds but first of all we're going to be just checking if we already have these properties so let's just remove that and hit enter right here and let's let's just check if you don't have the name or the year or the detail or the case so what you want to do in that case we just want to throw some sort of a to so we are going to be just

saying like toast. error and now let me just Define like please uh fill in all required Fields okay and now I need that we're going to just returning that or you know what that's exactly the same logic as the create movie so I'm going to go ahead and go to there and we have that exact same logic of how uh handle CH not this one you know there's a bit of different so you know let me just remove that from here and underneath these curly braces what do you want to do first of all we

going to Be defining like uploaded u l o a d e d uploaded image path and it's going to be equals to the movie data. image okay so now let's just close that and now let's just search for the selected image and now inside there we're going to be just creating our form data and it's going to be equals to the new form uh data which we're going to be creating by using this new form data and now underneath that what do you want to do we just want to append our image so form Data

and let's just append or image in there okay and the image will be that selected image okay so now underneath there we're going to be defining our upload upload image response is going to be equals to the A and then upload image and now let me just P my form data inside there now underneath there we're going to be just checking if we have the Lo image response and then inside there we're going to be just searching for their data then what you want to do we Just want to check for the uploaded uh not

this one but the uploaded image path and it's going to be equals to the uploaded not upload it but upload image response image response and we are going to be getting the data do image so we're going to just setting that to the data image and now if that's not the case what do you want to do you just want to pass the lock and also the toast of this error right here now to need this FNL statement what do you want To do we are going to be just creating or not creating but updating

our movie so aw and then update movie and now let's just pass our ID of ID and also the update uh yeah update T movie will be now equals to let's just first of all Define over all of the movies so movie data and then we have to just write a image and then uploaded uh image path in this case and if everything is totally successful F then we want to navigate our user to the Movies okay so we're going to be just taking care of that in a few second but now let me just

take care of the error and now we are going to be just attaching this error right here okay so now let me just save there and the final thing which you have to take care of this handle leate movie let me just go ahead and search for that and let me just uncomment this line of code and then we want to go to the top let me just copy the name of that let me just Go to the top and here you can see underneath this function we're going to just cre our handle delete function

so now let's just do that so we have a c handle delete movie it's going to be also a synchronous function and inside this function what do you want to do uh let's just provide or try and catch block and for the catch block I'm going to just provide these logs I'm going to just Define this console. error and also this error of toast and for the triy Block what do you want to do we just want to try the toast. success and now let's just provide like movie deleted successfully there we go and now

underneath that we're going to be attaching the delete come on delete movie right here and now let me just past the ID inside then and finally we have to just navigate our user to that specific movies page which we're going to be creating in a few seconds now let me just save there and that was a lot of Explanation uh so what I want to do is that I want to test this out so here you can see we have only one movie which is a black AR movie so now let me just change that

to like um white AR or something like that let me just change that to White item and it is going to be releasing in 2025 and one one of the awful movies so far or something like that instead of writing the rock paper scissors I'm Going to just P like John and Jordan and Peterson or something like that and let me just also change the image of there to like this saw X but this is a white Arrow so now let me just click on this movie button I mean like the update movie but now

let me just right click on there and go to my inspect element and then I'm going to go ahead and go to my security and let's just search if we don't have any error okay so let's just go back and click on this update movie And here you can see everything is now successfully updated and now let me just show you there okay so now let me just go ahead and go to my database and let's just refresh that let me just go ahead and here you can see we're now getting the white item we're

getting the image and we're also getting the year and also the detail and the cast and every single thing so yeah the updation or the update is totally working but now let me just delete this movie from the database so I'm going to just go ahead and delete that but you know what first of all let me just create another movie so I'm going to just go to a dashboard oh we did not create a dashboard so now let me just go ahead and go to my main and thank God I came here I accidentally

remove uh what do you call it the create movie right here I guess we did that let me just see here you can see we already created but I don't know I accidentally deleted that so now let me just grab That right here once again so I'm going to copy that and now let me just grab that right here so import create movie let's just go ahead and go to our comp not component but Pages ah go to the pages and then we have to go to the admin then we will be able to create

a new movie so now let me just save there first of all you want to create a movie but now let me just grab all of that from here and now let me just place that right here And remove that uh Slash and now let me just hit enter and now we can totally create a movie so now let me just click on this upload image and I'm going to just paste this John Wick and provide a name for there like John Wick and I don't know when this was release so I'm going to just

past like 2018 or something like that and best action movie so far by Jonathan or John Wick would be fine and now let me just WR John on and Wick and For the genre we're going to be adding that to the adventure or something like that and now let me just create that movie okay so we have now two movies right here and we can totally update there and you know what let me just delete one of the movies so like in this case I'm going to just remove this white item now let me just

click on there let me just right click on there and go to my network panel once again because I don't want to take my chances and now Let me just click on this delete button and yeah that is totally working and the movie is now successfully deleted let me just show you there and let's just refresh there and here you can see we only have that John Wick movie and what was that white item is now successfully gone okay so yeah this is how we're going to be creating a movie updating a movie and deleting

a movie so yeah here you can see we only have this uh John Wick right here which is totally looking Awesome I just went to IMDb and I grab the same actual information about these specific movies so I just created a few movies and I want you to do the same okay so you can find the images in my gab repository you can also find the description and also the title and all of that kind of stuff in my gab repository so what I want to do is that um we're going to be focusing on

the home first of all so now let me just remove that and now let me just go ahead And go to my home and here you can see we are now at home which is totally amazing but now we're going to have to split that into a few components so I'm going to be just creating a folder and I'm going to just give it the name of like movies and now inside there I'm going to be creating my header first of all so header jsx now let me just use my RFC s my file and

now let me just grab that right here so I'm going to be just grabbing my header let's just copy there Let's just remove these deals and I'm going to just make there as a react fragments and now inside there we're going to be passing our header now let me just save there and here you can see we're now getting our header right here instead of the home so that's cool now let me just go ahead and go to my header component and inside there we're going to be writing a lot of GSX so so you

can find all of that GSX in my gab report tree because I'm not planning to type All of that GSX so I'm going to just copy and paste a lot of things so now let me just go ahead and go to my redex and you know not like that let me just go ahead and go to my redex like that then we have to go to the API and then the movies okay so we're going to be grabbing um the use get yeah get new movies and now let me just grab them and we would

also have to grab our link and now let me just grab my link from there let me just go ahead and write react Router and then D and we are going to be grabbing there by using these curly braces okay so now let me just save there what you want to do we just want to grab the data and we are going to be grabbing there from use get new movies query okay so now inside this header jsx now let's just remove there and now let me just style there by using these classes and now

inside there we're going to be creating yet another nav and now let me just style there as well and I Want you to provide the same styling as I'm doing right here and now let me just provide a link and and now it's going to go to let me just go to the home screen and we're going to be providing these classes and now let me just add these classes right here and it's going to just go to the home so now if I sell my file and now let me just check this out and

here you can see we're now getting this home button and when I H my mouse over to that so it's going to gives us That kind of tail color or something like that and the UI doesn't matter you can change the UI like however you want and now the next thing which I want to do is that I want to grab that and duplicate there instead of going to the home I'm going to go to the movies and then let's just change there to like browse B SE browse movies and now let's just save that

and here you can see we're also getting the browse movies as well which is also looking totally okay Now underneath this nav we're going to be creating yet another div so now let me just create my div right here and now let me just style that by using these CSS classes or t CSS classes and inside there we're going to be passing our component which we are going to be creating in a few second and we're going to be also providing a data which we are already graving from the rtk query so now let me

just create this uh slider UIL I'm going to copy that and then I'm Going to go to my components and inside this component we are going to be creating our slider ut. jsx okay and now let me just use my RFC sell my file and here what I want to do is that I'm going to also save this file but first of all let me just import it right here uh so it's going to Auto Import it for for me and now let me just save that and now let's just work with the slider UT

tail and here you can see this how it looks like like currently we have these Buttons and we also have our slider right here so now let me just take care of these sliders so the first thing which I want to do is that I want to grab my sliders so let me just grab my let's just import my slider from where from the react and silk okay and the next thing which you want to do is that we are going to be also importing the CSS so silk s l i c k c a

r o u usal and now let's just go ahead and go to the SLI i k and then silk. CSS come on do CSS there we go and we are going to be also importing the theme so we have a silk well you know let me just remove that from here and duplicate that and then I'm going to go ahead and go to my silk Das theme. CSS in this case Okay so yeah that's looking cool now let me just save there and now let's just use our slider so what I want to do is

that I want to first of all provide a settings so now in inside the on settings for my care cell so now let me just provide a Dots and dots will be set to true and we're going to be also providing the infinite like scroll infinitely i n f i n it t and it's going to be set to three and now let me just provide a speed to that and speed will be just 500 and also the slides to show will be now set to four and slides to scroll r o l will be

set to two as well okay so that's there and now let me just take care of my GSX right here so now let me just remove that and now in this Case let me just remove that and I'm going to also remove that from here and instead I'm going to be using my slider and now let me just provide my dot dot dot of settings like all of that settings which we are already grabbing or already creating so now let me just copy and paste that right here and now inside there uh I'm going to

also provide a slider not slice but why am I providing a slice I mean slider let's just copy that and place that right here And inside the slider we're going to be just iterating over through all of that data if we have the data then we're going to be iterating over through all of that data let me just pass my movie and then inside there we're going to be creating yet another component which will be the movie card and let's just put our key to that and I'm going to be just passing my movie. ID

okay so now let me just provide a movie and movie will be set to movie and now let's just Close them but first of all we're going to also have to grab that right here let's just destructure that data and we're going to be passing that data right here and we are going to be iterating over through that data and based on that data we are going to be creating this component now let me just take care of this movie card component and I'm going to just go ahead and go to my movies once again

and now let me just create my movie card. GSX and now inside That we're going to be using our RFC s file and now let's just import that right here okay so now let me just import that s file and here you can see we now getting our Carousel and we are also getting these m is right here which is totally looking a okay so yeah that's cool but now let me just take care of the movie cards the first thing we would do is that we're going to be grabbing our link from the react

R Dom and now let me just also destructure that movie Which we already specifying right here as a prop and now we're going to be using that so now let's just remove this movie car from here and we're going to be passing the key of the movie and their specific movie ID and now let me just put a classes of relative r e e l a t i v e and group also margin will be Auto will be set to two R and now inside this D we're going to be creating a link and it

should go to the specific movie so let's just go ahead and go to the Movies and then the specific movie. okay so now inside there uh I'm going to be also placing my image so now let me just add the image and now inside this image for the source we're going to be passing our movie. image and then for the alternative text we're going to be passing the movie. name and now for the classes I'm going to be placing these classes right here I don't know why it is giving me this error movie name is

missing in the prop oh that's because we Did not specify the prop validation we don't have to do that no more in the react 18 we're not going to do that okay so now underneath this link what do you want to do I'm going to be placing this paragraph and it has a lot of styling right here but inside that we are going to be just providing our movie name okay so that's exactly what we have to do and now let's just save there and once we sell that and here you can see it's going

to gives us all of their movies Right here I can click here on these small dots and it's going to just giv us that slider or I can just click on this button or just click on this button right here okay so it's going to just giv us that amazing slider and we can browse through the movies or we can go to the home okay so yeah that was the first header component and now let me just take care of uh what do you call it the movies container so what I want to do is

that I'm going to be just placing The section and now let me just a bit of classes to it so margin for the top will be set to 10 R and inside this section we're going to be just placing our movies container page and now let's just close that and we're going to be creating this component in a few second and now let me just do that and inside this movies folder we're going to be creating this uh movies container page. GSX and now let me just write my RFC inside there sve my file and

now let's Just autog grab there and now let me just hit iner so it's going to just grab the right here for me sell my file and here you can see we're now getting our movies container page now let me just hide there and here you can see that's looking a bit better and now the next thing which I want to do is that I wanted to take care of this component so now let me just grab my use St first of all not store but s from the react J and now let me just

Also grab a lot of uh hooks so you know what I'm going to just copy and now let me just place it right here so we only need the use get new movies query the get top movies and random movies right here so that's that and we would also need to grab our genre so let's just import something from let's just go ahead and go to the Redux and then go to our API and then genre okay so we're going to be grabbing or use fetch genre query and now let me just save that Underneath

that we're going to be just importing our slider UIL from or component and slider UT tail now let me just use my rtk query hooks so for that we're going to structuring our data from the use get new movies and now let me just execute that we're going to be also restructuring this data once again and I'm going to just rename that to top movies it's going to be coming from the use get top movies query and now let me just also destructure the data and it's Going to be coming from the genres and now

we are going to be getting there from the use fetch genre query and also uh let's just get the data rename that to like random movies it's going to be coming from the use get random um mov s right here and now let me just execute that and now underneath that we're going to be just creating a state for the selected genre and also for the set selected genre it's going to be equals to the US St and now let me Just pass my null initial value to there now let me just save there and

now let's just take care of this jsx now let me just remove that and now let me just provide a lot of claes to that okay now a lot of you will like H you just copying and placing there you should also do the same because I already written this code and you don't have to just rewrite again and again because this is just a UI not a logic so you don't have to write your UI from scratch So I already did that just thank me and write there or copy there okay so now let

me just place this um come on this classes right here now let me just save there and inside this navigation we're going to be iterating over through all of our genres and we are going to be just using the map method to iterate over through there and and for each genre we are going to be passing our G and for each genre we are going to be just creating a button and now let's Just close that now let me just pass my key and the key will be genre. ID that specific genre and now I'm

going to be passing the styling right here so we have all of these default styling but here in this case we're now checking if we have a selected genre is equal to genre ID then we're going to be passing our background color of 200 if that's not the case so we're going to be just passing nothing okay so that's there and when somebody clicks on there what you Have to do on that case and now let me just write my on click event hander and we're going to be just passing or handle genre uh in

a few second we're going to be creating there and now let me just past my genre ID inside there and for the label of this button we're going to be just creating our genre name okay so now let's just save there and now let me just go ahead and go back let's just comment this line out and underneath this navigation we're going to be Creating a section now let me just create a section and I'm going to be just placing these classes right here and now inside that we're going to be creating yet another div

and inside this div uh let me just P these classes and now inside there we're going to be just creating our H1 and choose uh for you and for this H1 we are going to be just providing a class name of margin for the bottom of five and now underneath there we're going to be just using our slider UIL and now let me just put a data of this random movies and there we have it okay so now let me just save there and now underneath this section I'm going to just duplicate there for a

few times so should I do that or not you know what I'm not going to duplicate that I'm going to be creating a div and inside this div now let me just provide a bit of classes to it so I'm going to be just passing like with of totally full and also on the large screen what do you Want to do uh we just want to add the width of 100 rim and then we're going to be also providing the margin for the bottom will be now set to add and inside that we are going

to be just passing our H1 of top movies and now let me just pass my class name of margin for the bottom will be now set to five and now underneath that we're going to be also providing our slider and now let me just past the data and the data will be top movies in this case and now let's just Close the okaye now underneath there I'm going to just duplicate this one uh one more time like that and everything is totally cool but now here let me just pass my Choose movie and now let

me just proide my slider your K and we're going to be just passing the data of fil come on f i l t e r e d filter movies which we're going to be creating in a few seconds so yeah I'm going to just save this file and first of all let me just take care of this one oh you know what First of all let me just take care of this uh handle genre click so now let me just create that functions right here so I'm going to be just creating this handle genre click

and we're going to be just spacing our genre ID and now it's going to take the arrow function set selected uh genre and we are going to be just passing our genre ID in this case Okay so that's the now let me just take care of this filtered movies okay so now we are going to be just creating this Filtered movies it's going to be set to if we have the data then we are going to be just filtering that data and I'm going to be just passing the movie like a specific movie and if

the selected genre is triple equals to null or the movie. genre come on not ID but genre is triple equals to the selected genre so it's going to just gives us that filtered movie so now let me just save that and we are now totally done with this component as well so now let me Just try this out and here you can see it's going to gives us this UI but that's not something that I want uh I don't know where did I miss spill something or what did I do wrong we have our div

then we have our navigation and here you can see I just made a mistake I'm going to cut this section From Here and Now underneath this D we're going to just spacing our section right here or you know and on the top of this Dev now let me just save there first of all it's Going to give us that choose for you these are going to be the random movies so if I just refresh that and here you can see it's going to giv a Spider-Man in this case and now let me just refresh that

once again and in this case it's going to give us that Transformers and now let me just refresh T once again so it's going to give us that s okay so these are going to be totally different I mean like random movies then we have a top movies so these are going to be just The top movies and then we have uh choose movies right here like we can also choose them by using these genres so I can just click on the action so it's going to just only giv us the action movies I can

click on the adventure so I'm going to just click so it's going to just giv us the adventure movies right here and I can just click on these genres and it's going to gives us that different movies okay so yeah we are totally done with this uh first home Or you can say the Herer and the home whatever you want to call that and we can also use these small sliders or we can also use the the slider as well so we now totally done with the home screen and now let me just take care

of the browse movies okay so what I want to do is that I'm going to just review that from here and also from here and now let me just go ahead and go to my movies once again let me just zoom in a bit and now let me just create a component of All movies. jsx and I'm going to just writing like RFC s my file and now let me just go ahead and go to my main and now let's just register there right here underneath this home now let me just register this I'm going

to be just passing the route and then the path will be let's just go ahead and go to the not the movies yeah go to the movies and then let's just pass our element and the element will just take all movies and now let's just close it like so and now Let me just save that and we have to grab them manually so let's just import that so now let me just save there and here you can see we're now getting that all movies instead of that error okay so that's to resolve and now the

next thing which I want to do is that I'm going to go ahead and go to my own movies and we are going to have to write a lot of stuff okay so the first thing we would need is the use get all movies query and we would also need the use fch genre Queries and we're going to also import a lot more than that so use get new movies uh get new movies query and use get top query top movies squarey and also the use get random ones as well now let me just remove

this SK Li bra s file and now let me just also import my movie card as well now let me just save that I'm going to be also importing my use effect and also my use selector but we also have to register that inside our store bar you know let me just import it Right here I'm going to be using my used dispatch d s ptch and it's going to be coming from let's just write or react Redux okay so now let me just save there now here you can see I have my banner picture

I'm going to cut that from here and now let me just go ahead and go to my front end and inside this front end I'm going to go ahead and go to my SRC and now let me just create a separate folder which will be the assets I'm going to just place my banner right here And now let me just check this out so here you can see we have our assets a s TS and we have this banner picture right here let me just show you that and what I want to do is that

I want to grab the right here so now let me just import that so I'm going to be using import Banner from where from let's just go ahead and go to our assets and then inside this asset we have a banner.jpg okay so we need there now let me just save there and now let's just Take care of the Redux side okay so I'm going to go ahead and go to my Redux and inside there we're going to be introducing a new feature which will be movies okay so now let me just create a new

folder I'm going to just give a name of like movies and inside this movies folder we're going to be creating a new movies uh s. JS file right here here okay and the first thing which I have to do is that I'm going to be grabbing my create slice God damn it so create slice From where from let's just go ahead and go to the redex toolkit and we're going to be grabbing our create slice from there and now let me just create my movie slice and it's going to be equal to the create slice

function and now inside there first of all we have to give it some sort of a name so in this case I'm going to just giving it the name of like movies now the next which you have to do is that we have to specify the initial state and for the Initial State we are going to be just passing with movies uh M come on movies filter it's going to be equals to this object and then we have to specify first of all the search term and the search term will be set to empty string

and now let me just remove that from here and now the next thing which you want to do is that we want to also take care of the selected genre it's going to be also set to empty string and then we have a selected year come on selected year and Now let me just add the word here and also the select sord as well it's going to be equals to this array okay so now underneath that let me just add my filter um movies filter movies will be now equals to this array and we can

also just write a movie years um movie years and it's going to be equals to this array as well and now let me just use my unique here and it's going to be equals to this array as well so now let me just save that and then Was there about four or initial State and now let me just take care of the reducer and in actions and inside this reducer uh let me just pass my reducers right here and inside this reducer the first action which I'm going to be introducing is the set movies filter

and it's going to take the St and also the action as well and now inside there I'm going to be using the state do movies filter okay it's going to be equals to dot dot dot and state first of all and We're going to be grabing our movies filter and then we have to provide our uh come on dot dot dot of action. payload like all of the filter movies and also the payload as well okay so that's then now underneath that we're going to be also creating uh set filtered movies as well so set

filtered movies is going to be equals to the state and also the action and now inside there we're going to be using our st. filtered uh f i l t e r e d filter Movies and it's going to be coming from the action. payload okay and now underneath there we are going to just also create a set movie year uh or years with plural and we're going to be passing the state and also the action and now let me just provide my st. movie or movie years and it's going to be equals to the

action. payload there we go and yeah that's cool but now let me just finally provide My Last Action which will be set unique uh come on set U n i qu e ears okay and set unique ears will be St and also the action and inside there we're going to be just carrying our state and then their unique years from there is going to be equals to the action. payload okay so now let me just save that and finally we have to export all of these sections from this slice right here and now let me

just place there right here so we are now exporting the set movies filter the set filter movies and also the set movie Here and also the set unique Here and Now underneath there let's just use our export default of movie slice and we are going to be just exporting the reducer and now let me just save my file and now we have to go to our store and register there let's just grab our U movie oh yeah movies reducer and we are going to be grabbing that from uh reducer then we have to go to

the feature then we have to go to the movies then we have to go to the movie slice okay and now let's Just register that right here underneath this o I'm going to be just introducing there by using the movies and then the movies uh reducer like this one and now let me just my comma let me just save this file and there you have it that's it about the redu side let's just close that and now we're going to be importing all of their actions right here and now let me just place a right

here so we're now importing all of their actions from this specific file so now let me just go Ahead and go to that we now exporting there right here and now in this file we are importing there so that's there now the first thing which I want to do is that I want to create an instance of that used dis space so I'm going to be using like disp at and it's going to be equals to God use dispatch and now let me just execute that now we are going to be also destructuring our data

let's just destructure that from where from the use get all movies uh query right Here and now let me just also restructure my data and let's just rename that to genres and we are going to be pitching that from or use get or not get but use fetch genre squarey right here under that we are going to be also destructuring our movie once again and we are going to be just renaming that to new movies it's going to be coming from the use get new movies in this case and now let me just also restructure

my data once again and then We have a random movies right here and we're going to be just destring that from the random uh come on use get random movies and now let me just execute them now let me just create a St for my filter movies so now let me just provide my um movies filter and also we have a filtered movies as well it's going to be equals to the use selector and we're going to be just getting that from the stad and we have our st. movies right here inside there and now

Underneath there let's just create our movie years and it's going to be equals to the data if you have the data then we're going to be just iterating over through the movies and then let's just provide a specific movie inside there and now let me just pass my movie year okay and now underneath let's space for Unique years it's going to be equals to the array. and now here we have to just use the new set because it is a data Structure it's going to only giv us a unique movies right here in this case

it's going to just remove their duplication and we totally want that okay so now let's just save that and that was a lot of logic okay so now the next thing which I want to do is that I want to first of all dispatch my action by using my use effect so use effect and inside this use effect we're going to be just providing our Arrow function and for the dependency array we're going to Be passing our data and also our dispatch is ptch in this case and now inside there let's just dispatch first of

all our set filter movies and we're going to be passing our data or the empty string okay and now let me just dispatch my uh set movie ear and now let's just execute that I'm going to be passing my movie ear and now underneath that let's just dispatch there one more time and then set unique years okay so now let me just P my unique years in This case and save there okay so that's there now let me just go ahead and go to my GSX and remove there and I'm going to be providing these

classes right here now inside there let me just P my react fragments and inside there let me just create my section and inside this section let's just create a div and inside this D I'm going to be providing this uh what do we call it these statement CSS classes and also the this inline class of just adding a banner to It which we are already grabbing from the assets folder here you can see we have this Banner right here and now we are providing there as inline CSS so now let me just save there and

inside this div now let me just add yet another div for the CSS class so here you can see we have these classes right here I'm going to sve that and now underneath that let me just uh create yet another div and I'm going to passing these class Nam St it and let's just pass that and now Inside this div uh let's just create our one and I'm going to just provide a class names of like text at pixel like at Excel like 8% extra large and now let me just proide a font of totally

bold and merge for B will be set to four and now let me just proide the movies Hub underneath that let's just provide our paragraph and I'm going to be providing my class names to it so we have a text of 2 Excel and now inside there let me just P this slogan right here save my File and let's just check this out and we are now getting the set movie here is not defined so let's just check this out and it shouldn't be movies but just a movie let's just remove there and now let

me just save there and here you can see it's going to gives us that amazing look right here which is amazing now let me just close that and let's just go back to our topic so now underneath this paragraph we're going to be creating another section and I'm going to just Past the class name of f so loot there and the bottom will be just set to five rim and it is negative bottom and now inside there let me just provide my input field and then inside there we're going to be providing a class name

of first of all the width will be set to totally 100% and now we also have to provide the height of five frame toade and the Border then we have pass or pairing for the xaxis of 10 and then outline will be set to totally none and Totally rounded okay so now let's just saell there and we are now getting this input field right here which is not looking that cool but we will take care of them later and now let me just add my placeholder so we have a placeholder of search movie now underneath

this placeholder let me just P my value and it is going to be the movies filter. search term DM there we go and now let me just also pass my own change Handler to that which we're Going to be creating in a few seconds so we have a handle search change and I'm going to just comment this line out so let's just save there now underneath this section or not a section but underneath this input field we going to be creating a section and I'm going to be just adding these classes to it let me

just add these classes and now inside there we would have first of all our select so now let just pass my select it's not going to take any name and ID So I'm going to just remove that is going to be taking the class name of border and and also padding will be all around set to two and let's just put around it text will be set to totally black and I'm going to be also providing the value of M filter do select ected uh card s e e c t e d selected genre and

then uh outside from there I'm going to be providing the own change event hander on there c h n g come on yeah there we go and now let me just provide my event And now I'm going to be providing my handle genre click which we are going to be creating in a few seconds so we have a handle genre click event. target. value inside there okay so now let me just save there and I'm going to just comment this line out and now inside this select we're going to be passing our option let's just

pass our option and for the value we're not going to be providing anything to that then we have our genres so now underneath this option Let's just it over through all of our genres and now let's just get map and now let me just provide my genre to it and inside there we're going to be just passing our option once again so let's just pass our option and close there I'm going to be also providing the key of that specific genre ID right here and also the value will be that specific genre and ID okay

so now inside there let me just add my genre. name let's just save them and here you can see it's Going to just make our input fi a bit bigger and it's going to also giv us all of their genres which I currently have okay so we took care of that now the next thing which I want to do is that underneath this select we're going to be creating yet another select so let's just create select and it is not going to be taking any name or ID but it will take that same CSS classes

so I'm going to just copy that and I'm going to just place that right here and now let me Just provide my value and the value will be the movies filter do selected uh selected here in this case and now let me just pass my own change event hander and we're going to be just passing the event and also the handle year come on year change and now let me just pass my e. target. value in this case and so now inside this select we're going to be passing our option and now let me just

P my year in this case and for the value which will be totally Empty string and now let me just iterate over through all of my unique years and then let's just iterate over through the let me just P my year inside them let's just pass each of the option for each of the Year okay so for the key we're going to just passing our year and now let me just also pass the year for the value as well and for this label we're going to be just also passing our unque year okay so let's

just sa our file and now let me just comment this line out s my file and Here you can see it's going to give us that year and we have all of their years right here okay and they are totally unique and we don't have any duplicates inside there and I guess I'm going to also add the margin for the left right here okay so now let me just save that it's going to gives us a bit of spacing right here in this case Okay so that's done now underneath this select what do you want

to do we just want to create our final select and now let me just Create the let's just remove our name and also the ID from there we're going to just attaching that same classes so I'm going to just copy and place that right here and now let me just add my value and for the value let me just pass my movie filter and then we are going to be just selecting our selected selected sword okay so let's just use our s e l e c t e d selected sword and now for the on

change uh we're going to just spacing our event and also this handle sort Change something which we're going to be creating in a few seconds so either target. value let's just save that comment this line out and now inside this select we're going to be just passing our option so now let me just pass my option of with the value of nothing but we have a sort by and then I'm going to just duplicate that a few time right here and now the next one we have is a new movies m o v and also

we have a top movies and we also have have The random movies as well so now let me just save that and it's going to giv us this input field right here so we have a new movie we have the top movie and we also have the random movies okay so yeah we are not totally done with that but now let me just create these uh what do we call it these function so now let me just start from this first one which is a handle search change so I'm going to copy there and now

let me just create that right here and what I want to do is That I'm going to just passing my cons handle search change it's going to be equals to the event and now inside there let's just dispatch or set movies filter not years but set movies filter and inside that let's pass our search term and this search term will be equals to the E Target and then that specific value now underneath that let's just filter our movies so I'm going to be using like con filtered uh movies it's going to be Equals to the

data data. filter and now let me just attach my movie inside there and movie. name. to lower case so we're going to be converting our name to or lower case and it shouldn't be movies but just movie singular movie let me just also attach the includes method on there if it includes the e. target. value do2 lower case and now let's just execute that so it's going to only giv us that filtered movies okay and now let's just dispatch our uh store by Providing our set filtered movies and now let me just provide my filtered

movies okay so now let me just save there and we would not able to see anything not right now because currently we don't have any data right here so you know what let me just take care of that and what I want to do is that underneath this uh section and div I'm going to be creating yet another section and let's just attach a bit of styling to that let me just Place The Styling and for the Section uh I'm going to just provide a filtered movies and now if we have there then we're going

to be iterating over through there so now let me just attach my movie inside there let me just provide my movie card which you already created and for the key let me just pass my movie ID and I'm going to also pass my movie as a movie and now let's just close that so I'm going to just sell that and here you can see it's going to gives us all of their movies right here But if I just search for a specific movie like I don't know maybe a Spider-Man so I'm going to just type

like a spider and it's going to giv us their Spider-Man right here so now let's just close that and if I just search for like black atom so I'm going to just write a b and we only have one movie right here inside a databas by using the b word so that's why we have our black atom right here so if I just search for Transformers trns so it's going to gives Us that Transformers right here so let's just go ahead and take care of uh what do we call it this handle genre click okay

so now let me just copy that and I'm going to go to the top and now let me just take care of that and this one is quite simple and easy so what I want to do is that I'm going to just pass my genre click and it's going to take the genre ID and now let me just P my arrow function and inside there I'm going to be using my filter come on Filter by uh genre and now let me just P my data. filter and we're going to be filtering through all of the

movies I mean like the data and now let me just get my movie. genre is triple equals to the genre ID so we only need that specific movie so I'm going to just write like dispatch and set filtered movies and now let me just pass my filter by genre so now let me just save that and now let me just refresh there so it's going to gives us all of their Movies but if I click on this genre and if I select like I don't know maybe the action so it's going to only gives us

their action movies and if I click on the comedy so it's going to only gives that com this is not a comedy movie but I just put that inside a comedy category or genre so that's why we're not getting there so now let me just click on the adventure so it's going to give us the adventure movie If I click on the horror it's not going to gives us anything Because we don't have any horror movies if I click on the romance and watch what happened it's going to giv us that song movie because I

already put in the romance but anyways you get the idea so here you can see it's going to gives us all of their action movies now let me just take care of this one which is called the handle year so I'm going to copy the name of that and now let me just go to the top and create the right here and let's just Create our handle year change and it's going to take the year and now let me just pass my uh aror function right here and con filter or filter by year it's going

to be equals to the data. filter and I'm going to be just passing my movie and movie. here is triple equals to and now we have to convert this year from the string to a number so to do that we can either use the number Constructor or we can just use a plus right here okay so now let me just pass That as a dispatch and let's just use our set filtered movies and now let me just pass my filter by year so now let me just save there let's just refresh there and now if

I click on the year if I click on the 2004 so it's going to give us there Jonathan Wick and then we have a 2009 and we can just click on there and it's going to gives us all of that movies based on a specific year right here okay so yeah that was filter by year and now Finally let me just take care of this one and this is going to require a lot more coding than the other ones so now let me just copy there and now let's just take care of this one so

underneath this handle here change we're going to be creating our handle sort change now let me just write con handle uh sord change it's going to be equals to the sord option okay so sort option and now let me just provide my switch statement you can use like the if and else Statement if you wanted to but in my case I'm going to be using my switch statement and now let me just provide my sord option and now for the new what do you want to do we just want to dispatch let's just dispatch was

stored by providing a set filtered movies and I'm going to be just providing a set I mean like new movies and now I'm going to copy there and for this one you know I'm going to just duplicate there a few time so we have a new now the next one we Have is the top and for that we're going to be just passing the top movies come on top m o v i e s we already have there didn't we let's just check this out so we have that we have a new movie and we're

not grabbing the top movies so now let me just take care of that underneath this one we're going to be also destructuring our data and now let me just grab my top movies it's going to be coming from the use get top movies query and now let's just save there underneath There let's just go to the bottom and we're now going to be passing our top movies and finally let's just add another one for the random so now let me just change that to random and I'm going to be also passing my random movies and

for the default St what do you want to do we just want to dispatch or set come on set filter movies and let's just empty there so now let me just save there and refresh my browser so it's going to give us all of their movies but If I click on sorted by new movies so it's going to just gives us nothing because we made some mistake uh okay so we have a new one are we even providing there or not let's just check this out oh we are now we are not providing anything inside

there so this is going to be the new one this is going to be the top one and this is going to be the random one okay so now let me just save there and now let me just refresh there so it's going to Gives us all of that movies but if I click on there and if I click on the new movie movie so it's going to gives us all of the latest movies but if I click on the and click on the top movies so it's going to only gives us the top movies

and then if I click on there and click on the random movies so it's going to just uh gives us that random movies if I just refresh them and if I just click on there once again let me just click on there once again so it's going To just giv us that John we one more time let me just refresh that once again and now let me just click on there and click on the random so it's going to just gives us that random movies so now let me just refresh that once again and now

if I click on the random so it's going to just gives us the flash John Wick and all of that so yeah we are now totally done with all of their movies so I can totally search for a movie like I don't know Black Adam so now let me just Write like a black so it's going to give us that Black Adam and I can also search by year or genre or anything like that so yeah that was about all of the movies that's cool but now let's take care of a specific movie detail so

I'm going to just click on this Jonathan Wick right here so here you can see it's going to just gives us that specific movie and ID so now let me just create a new component right here inside my component folder and not in the component folder But inside my movies folder right here inside there okay so I'm going to be just creating a component I'm going to just give the name of like movie details. jsx right here now let me just use my RFC register this s my file and now let's just go ahead and

go to my main and now let me just register that right in here okay so I'm going to just duplicate this line of code and I'm going to just write my movie detail and if I hit enter so it's going to Auto Import there for me and now let me just remove all of that and I'm going to also remove the admin right here in this case and now let me just pass my movies and then a specific ID right here so now let me just save that and here you can see we now getting

our movie detail right here which is totally amazing okay so now let me just go ahead and go inside this component and now let me just take care of that okay let's just zoom in and the first thing we would need is the Use t uh use T like that and we would also need the use pram and also the link so now let me just write a link and we will grab that from the react router and um okay now underneath that we're going to be also grabbing or use selector so that it allows

us to select our data from the Redux toolkit so now let me just use the react Redux and we're going to be grabbing them from the react Redux now let me just also grab my toast and it's going to be coming from from the React toasttify and now underneath that you would also need something from the Redux toolkit so now let me just go ahead and go to my Redux and then I'm going to go ahead and go to the API and then movies okay now inside there what I want to do I want to

get my use get specific movie query and also the use add uh movie review mutation as well and that's every single thing that we currently need for now now let me just sve that and now inside this movie Detail what do you want to do we first of all want to grab the ID and I'm going to just rename there to like movie ID it's going to be coming from the use perams and now let me just execute that now inside there we would also want to get the rating and also the set rating okay

is going to be coming from the use State and now let me just P zero inside the initial St now let me just also create a state for the commment andert comment as when it's going to be coming From the US St not selector but Us St and we are going to be providing the initial value of totally empty string and now let me just destructure my data and I'm going to just rename that to movie and we're going to be refining there so it's going to just gives us all of the latest movies and

we're going to be grabbing that from the use get specific movie query and now let me just pass my movie ID inside there so we are now requiring a specific ID right here In this case we are now getting that ID and we are now passing that ID right here so now underneath that we would also want to get a specific user information as well so we're going to be getting there by using the use selector uh selector hook right here and now let me just P my state and now let me just get there

from the state. off okay now underneath there we're going to be also uh destructuring or create review and also let me just destructure my is Loading and I'm going to just rename that to like loading loading movie uh review there we go it's going to be coming from the use add movie and there we go okay so it's going to just auto complete that for me and now let me just sell that let me just go back and yeah yeah that's it but now let me just take care of my GSX and the first thing

which I want to do is that I want to make it as total the react fragment so now inside there we're Going to be creating our div and now inside this div we're going to be creating our link and it's going to be going into the home okay and now inside there I'm going to also add The Styling to it and now inside there it's going to just say like go back and now let me just save this file and here you can see we are now getting this go back button right here which is

totally looking amazing now underneath this D we are going to creating yet another div and I'm going to just provide the class names of like margin for the top we we set toor and now inside this div we're going to be creating yet another div let's just do that and I'm going to be providing these classes to it and now let me just provide my image and that image will take the source off uh let me just for this God damn it the movie if we have there we're going to be grabbing the image from

there and for the alternative text we're going to be Providing our movie if we have there we're going to be grabbing the name from there now let me just provide a class names today so we are going to be providing the width of uh 70% and now let's just close there and totally round de okay now let me just save there and here you can see we are now getting this Jonathan which is looking totally amazing so now underneath we're going to be creating yet another div so I'm going to just give it the name

of like Container one and now underneath that we're going to be creating yet another D and now let me just style there and now inside there we're going to be creating our section and now inside this section let me just for my H2 and for the label we're going to be providing the movie if we have the movie we're going to be providing the specific name let me just add The Styling to that let's just add there right here and now underneath this H2 we're going to be creating yet Another paragraph and here let me

just get the movie detail detail right not just details but just a singular details and I'm going to also style that right here as well now let me just sell there and here you can see we now getting the movie name and also the movie description which is also looking totally amazing so now underneath this section what do you want to do we just want to create a div and I'm going to be just providing a class name of margin For the right of five frame and now let me just close there and now inside

there we're going to be creating our paragraph and it's going to just say text of 2 Excel and I'm going to be also providing the font of semibold and now inside there I'm going to just say like uh release come on r e l e a s i n releasing that will be the movie if we have that we are going to be getting the ear from there now let me just save there and now underneath this paragraph We're going to be creating yet another div and inside this div we're going to be just iterating

over through all of the movies and I just want to get a specific cast and now let me just iterate over through there and now let me just proide a specific cast inside there and now I'm going to be just creating a UL let's just create our UL right here and now let me just close that as well and I'm going to be passing the key and the specific cast ID now Inside there we're going to be also creating Ali and now let me just pass my character character what the hell the cast now let

me just provide the class name of margin for the top of one rim and now let me just save there and here you can see we are now getting all of that cast right here and we are also getting the releasing de okay so yeah that's looking totally cool now underneath this div we're going to be creating yet another div which will be For the movie tavs okay so now let me just create a div I'm going to just give the name of like or you know a class name of container and margin for the

left will be set to 20 rim and now let me just close there and inside there we're going to be creating our movie D not detail but movie tabs component in a few seconds but I'm going to just pass a few props so we have a loading movie review it's going to be equals to that loading movie review right here and now Let me just pass the user info it's going to take the user info and I'm going to also past the submit Handler it's going to be also equals to uh this sub ummit Handler

which we're going to be creating in a few second and now let me just also put the rating and the rating will be equals to the rating as well and now we have a set rating it's going to be also set to the set rating and now I'm going to be also passing the comment and let's just Pass the comment prop and we have a set comment prop and I'm going to be also providing the set comment prop right here and finally let me just P the movie and movie so now if I sve that

and we did not create none of this stuff I'm going to just comment this line out and now let me just create this component and inside this movies folder I'm going to be creating a component G the name of like movie tabs. jsx and I'm going to just write that RFC and now let me just Save that and let's just go back to our component and now let me just Auto grab there so now let me just save there and let's just destructure all of that stuff well you know first of all we would need

a link so now let me just grab the link by using just uh re CR D that's totally cool and now let's just destructure all that thing so we would need the user info come on the user info we would also need the submit Handler and the common set comment and also the movie itself so Now let me just save that and now let me just use all of that right here so I'm going to just remove there and inside this D we're going to be creating our section and inside this section now inside this

section now let's just check if we have the user info we're going to be passing this content and inside there I'm going to just passing the form right here we're not going to be reiding any action to that and now I'm going to be also attaching the on submit Handler on There on submit and that submit Handler will be submit Handler Right Here and Now inside this form we going to be just putting the label and it's going to just say the comment okay and I'm going to also provide the class name of block and

text will be set to extra large and margin for the bottom will be set to two and as a label we would just say like write your review review there we go and now let me just save there but we would also have to take care of the else Clause and and we're not going to be providing anything for now let's just provide empty string for now so now let me just save there and here you can see we are now getting right your review okay which is looking totally amazing but now underneath this label

what do you want to do first of all we're going to be creating our text area and we're not going to be providing any of that stuff so let's just remove that and I'm going to be just passing the ID of Comment and also the rows will be set to three and I'm going to be also making it so it should be required and also let's just provide a value to that and the value will be set to comment and now when somebody change that we're going to be just passing the event object and set

comment will be now equals to the e. target. value and now let me just save there and underneath this own change now let me just P this uh classes right here we're not going to be typing anything Inside there and we're going to be also creating a button so you know what I just made a mistake let me just wrap there inside the div so I'm going to be creating a div and now let me just provide a class name of mar for the one access will be set to two and now let me just

cut that From Here and Now underneath this text area I'm going to be just placing my div Right Here and Now underneath this text area we're going to be also creating a button so Now let me just create a button I'm going to be providing the type of submit to there and now let me just add a few classes right here or you know what let me just copy and place there place there right here s file for the label I'm going to just P the submit and now let's just sa there and here you

can see we are getting our Tex area and we are also getting that button but you cannot see that you know what we're going to take care Of that in a few second but yeah that's when we have the user information this is going to be the form which we are going to be providing but if you don't have the user information then we're going to be taking care of that right now so I'm not going to do anything crazy but I'm going to just provide a paragraph which will just say please and then visit

to this link okay so just provide a two and should go to the login page and now inside there we would just Say sign in okay and now let me just past my to write a review okay r e v i e w and now let me just save there and we cannot see that because we are already logged in and yeah that's then now underneath this section what do you want to do we just want to create another section and now let me just uh provide a classes to that so the class will be

just margin for the top will be set to three RAM and I'm going to be also providing the div now let's just Pro a Div and this div will say if we have the movies then we're going to be getting the reviews and then let's just check the length and if the is triple equals to zero then we have to provide this paragraph which will say like no reviews like if you don't have any reviews then we're going to be providing this paragraph which will just say like no reviews and what is wrong movie review

is missing a propil we don't have to worry about that What the hell now underneath that we're going to be creating our new de and inside that let's just pass our movie and if we have the movie reviews and now let's just it right over through there let me just pass a specific review inside there and now inside there let's just pass our error function and I'm going to just passing the div come on let's just pass the div and I'm going to close there God let's just close that like that and now let me

just also paste The review and a specific review ID and now inside there I'm going to be also providing a we of classes to them and now let me just pass all of their classes now inside this div we're going to be creating our da with the class of flex and justify will be set to between okay and now inside there let's just for our strong tag and inside there we just say the review. name like the person who is doing their review and I'm going to just passing the class name of text and Uh

B 0 B 0 come on and I'm going to just copy there for a few times so we have one two and three and now let me just close that okay so now underneath there we're going to be creating our paragraph and I'm going to copy this entire class from there and now let me just paste there and inside this paragraph you would say the review come on review and when that review was created so we have created add and let's just put our sub string inside there and I'm going to be Passing the zero

and 10 okay so now let me just save that and we don't have any reviews so we cannot see that right now but we will create a review in a few second okay so now underneath this paragraph or even underneath this div we're going to be just creating another paragraph which will just say the review comment data okay and now let me just also add the margin for the Y ACC will be now set to four now let me just save there and test every single thing out Okay so here you can see we have

our uh come on we have our input field right here so I can just write like this is one of the greatest come on great God damn greatest movie so far let me just make that a bit smaller because I cannot see the button let me just make the totally small we are doing something wrong I'm going to open my inspect element and and now let's just go ahead and go to my network Tab and I'm going to just for The review of like something now let me just click on the submit so what just

happened are youone providing the reviews let's just uh refresh there what is going on oh that's because we did not create anything like any Handler for that I just realized I thought I just made a mistake but I didn't now let me just make the a bit bigger and now let me just take care of all of that event handlers now me just Close there and I'm going to also uncomment there right here s my file I'm going to copy the name of there and now I'm going to go to the top and now let

me just create that submit Handler so we have a const uh const submit Handler it's going to be asynchronous function now let me just for my event object and we have event pre come on prevent default and now let me just execute that and now underneath there we're going to be using our trying catch block for the Catch block we're going to be just passing like Toast of error and now let me just say error if we have one so we're going to be just getting the data from there otherwise we just have to show

the error message m e s a g e and if that's not the case so for the tri block we're going to be just creating our review so let's just write a create review and inside there we just have to pass the ID which will be the movie ID and also I'm going to be passing the Rating and also the comment as well now let me just provide my unwrap to them and I'm going to be also fetching all of that data so let's just use a refetch and now let's just execute that and finally

we're going to be just also showing some sort of a toast to the user so we have a toast. success and I'm going to just say like uh re come on r e v i e w review created successfully okay so c e c e c r e at there we go now let me just save there And now we will be able to add the review so what I want to do is that I just wanted to show where is that button oh my God I cannot see that but I don't know what the

hell is going on right here I must have proed that button inside there and yep I guess I did let's just see where is our button let's just search for that we don't have that button right here but I'm going to have to go ahead and go to my component which we have that movie Tab and now let me Just search for a button right here and we have that right here so underneath this text area we are not forwarding our button but now let me just cut that from here and underneath this D now

let me just pass the and here you can see there we go and our button is looking amazing and now let me just provide a review right here finally so I'm going to just say like this is one of the greatest greatest action movie so far I don't care about the spelling and now Let me just click on submit and here you can see we are getting our toast and we are also getting like who is doing that um review and we are also getting the review comment and we can also see that what do

you call it that spe specific dead so what I want to do is that I'm going to just log out and I'm going to just log in as someone else like uh I don't know mango gmail.com and let's just uh provide the mango one two and the password is Invalid I don't know which kind of password I provide M ngo1 123 one two yep nothing is working so I'm going to just log in as Alex maybe Alex gmail.com and let me just proide alex12 and now let me just click on sign in ah all of

their user not found ah I just forgot the passwords and email of the users because it took me a lot of time to uh record all of that videos so we have a James now let me just log in as James let's just try there so we have a James Gmail.com and we have a james12 and now let me just sign in and there we have it okay and now what I want to do is that I'm going to just click on that and now let me just go to a specific movie like John we

one more time and we have a bug if I click on there it's going to just reload the page and I don't know why let me just try this out and I just found out the bug and the bug was when I log out and when I log in as someone else like in my case I'm going to just log in As James gmail.com and we have uh james12 and if I log in and now if I click on a specific movie we cannot go to that movie but now let me just log out and

now let me just log in as hosen which is an admin and if I just fight husen2 and here now if I click on a specific movie so it will brings us to that uh specific movie right here so now let me just log out and show you where in the world was that error so now let me just log in as James Gmail.com and let's just log in as James gmail.com and now let me just write a james12 now let me just log in there and now if I click on a specific movie we

cannot go to there that's because I made a mistake right here inside this man I'm going to cut this line of code from here and now let me just make that as a public so that everybody can access that specific movie now let me just sell there and now if I refresh there and here you can see if I click on a Specific movie so now we can totally go to the specific movie so now let me just go back and write or review so I'm now logged in as James and I'm going to just

write a review for this movie so I'm going to just say like yeah yeah best action movie so far and now let me just click on submit and here you can see there review is added and we have that uh come on we have that review right here so which is made by hoseen and we have that specific comment and we also Have that dead when this re was added so now let me just log out and log in as someone else like I don't know how many people we have inside our database let me

just check this out I'm going to go ahead and log in as Jordan and now let me just write Jordan gmail.com and Jordan And1 to let me just go ahead and go to to my Jonathan Wick and I can just write like one of the awful movies so God damn now if I click on that so Jordan is A bit rude and here you can see we now getting his review right here so yeah that's cool but if I try to add some other view right here like uh I don't know or something wrong or

something like that and we are already logged in this Jordan and we already reviewed this movie but if I try to add another review and if I click on this submit Handler so it's going to give us like movie already reviewed and now let me just go back and review some other movie like I don't Know maybe a flash I'm going to just click on there and now let me just review this movie so something uh good or something like that now let me just click on there and here you can see we can totally

add reviews to all of their movies so yeah that was it about how we're going to be taking care of all of that stuff so that was about the movie detail and now let me just take care of the movies comments so what I want to do is that I'm going to go ahead and go to My page and inside this page we are going to be going into the admin and inside this we're going to be creating a file I'm going to just name it as all comments. jsx and I'm going to be using

the RFC to re come on r r a fce and now let me just save that I'm going to copy that from here and now let me just register that right here and it is going to be only for the admin so now let me just duplicate there and I'm going to be ping my all comments and now let me just Import that right here and I'm going to be also removing all of that and I'm going to just write like movies and then we have a comments right here so now let me just sell

there and I'm going to copy that from here and first of all I'm going to log in as an admin then we would be able to see there so now let me just log out and log in as an admin so I'm going to be using hosen2 let's just log in and now I'm going to be just providing this link right here which is Admin and movies and then comments now if I hit enter so it's going to just gives us all of that comments M so now let me just go back and now let

me just take care of that so the first thing which I want to do is that I want to grab a few hooks from my rtk query so let's just go ahead and go to our admin uh I mean like Redux then we have to go to the movies and we're going to be grabbing the use delete uh comment mutation and use get all U movies query Okay so now underneath that we're going to be also getting the toast from where from the react now inside this all comments I'm going to be just destructuring my

data and now let me just rename that to movies and we are going to be re oh God r e f e r e f e TCS so we are going to be ref fetching that from where from the use get all movies query okay so now the next thing which you have to do is that we have to also destructure or delete comment Delete comment from where from or use delete comment mutation okay and now let me just use that so what I want to do is that I'm going to just remove this all

comments and now inside there now let me just put a movie if we have there we're going to be iterating all through all of their movies and now let me just pass my movie inside there okay and now inside there we're going to be also passing a section and for each of these section I'm going to be passing the key and the Key will be movie and the specific movie ID okay so let's just press the m and there we go and now let me just also style that a bit now inside this section we're

going to be just checking the movies if we have there and then a specific review from the specific movie and we're going to be iterating over through all of their reviews let me just pass the review and I'm going to just provide a d right here and inside this div let's just pass our key and for the Key we are going to be passing our review. specific review ID and I'm going to also style there and now let me just style there and inside this D now let me just save there and inside this div

we're going to be creating yet another day with the class of flex and justify will be set to between and now inside there we're going to be so creating our strong tag and it will be just a text off let's just change that to like uh b0 and I'm going to just copy that three Times and now let me just pass my movie my review. uh name right here inside the review and now let me just also pass a paragraph and we would also want to get the review and then the created ad and also

sub string there to Z and 10 and now let me just also style there so I'm going to be just passing the same X of the same color so now let me just copy that from here and I'm going to just place there right here save my file and here you can see we're getting all of That comments and we can get the name and also the specific dat when this comment was created now underneath this T which is underneath the paragraph we're going to be creating yet another div not a div but paragraph and

now let me just pass the review and that comment which was made and now let me just pass like my uh I like margin for the Y AIS of four and now let me just save there and here you can see we are now also getting this specific comment as well And now let's just take care of how we are going to be deleting that specific comment so I'm going to just passess a button and it will just say delete for now and I'm going to be just passing the on click event handler to there

and which will just say there delete a comment so handle delete come on handle delete comment which we going to be creating a few second and now let me just pass my movie and specific movie ID and then the review and let let's just Pass there okay and now I'm going to also style thereit so I'm going to just pass my class name off text will be set to totally red or 500 and yeah now let me just save that and now let me just create that uh what do you call now let me just

create this hook right another hook oh God I just forgot the name of that that event handler there we go and now let's just create that right in here so it's going to be an asynchronous function and now it's going to take the Movie ID and the review ID as well okay so we already passed as an argument and now let me just pass my try catch block for the catch block we would just say like console. error and error uh deleting comment and now we are going to be also providing our error right here

and for the tri block what do you want to do we just want to a and delete comment and now let me just P my movie ID and also my review ID as well now underneath that let me just pass my Toast. success and also we will s like comment deleted and now underneath there let's just refresh every single thing and sell there and here you can see we have this delete B right here but now if I click on that so it's going to just remove that comment from here if I want to just

remove this Jordan comment so I'm going to just click on there it's going to totally remove that so yeah that was about all of that comment and how we're going to be just deleting a Specific comment and we'll come to the last part of this project in this one we're going to be just taking care of the dashboard so now what I want to do is I want to go ahead and go to my my main and now let me just create my dashboard and it's going to be totally complex like we're going to be

creating a lot of components and yeah you will see that so I'm going to go ahead and go to my front end then go to my source then go to my uh yeah Pages then the Admin and now inside that let me just create a separate folder and I'm going to just rename that to dashboard okay so I'm going to just hit enter right here and inside this folder we're going to be creating our admin dashboard. X now inside that we're going to be just writing like RFC save my file and now let me just

register there right here inside this man so let me just duplicate this line of code and I'm going to just say like admin dashboard and it's going To UT import that for me and I'm going to just delete that from here and admin let's just go ahead and go to the movies then we want to go to the dashboard and I'm going to just put that right here at the top and now let me just save there and now if I click on this drop down menu and if I click on this dashboard so is

going to just brings us to this dashboard right here okay so yeah that's looking cool and now let me just uh take care of that right here so the first Thing which I want to do is that I want to delete that and I'm going to just make it as a react fragment and inside there we're going to be rendering two component which will be the sidebar and now let's just close there and we're going to be also rendering the main let me just save that and now let me just create both of them now

inside this dashboard folder we're going to be creating two nested folder which will be for the the main and also one will be For the sidebar so we would have a sidebar and now let me just hit enter right here and the first thing which I want to do is that I want to create the sidebar component so now let me just create a sidebar. jsx and now let me just use the rafc sem my file and I'm going to be also creating my main. jsx component and now let me just also create this semi

file and now let me just go ahead and go to my admin dashboard and now let's just import that Right in here okay so let's just import both of them sell file and here you can see now getting the sidebar and also the main component so we're not going to be doing anything craziness but we are going to be just styling there okay so now let me just go ahead and go to my sidebar and the first thing we would need is the link so now let me just grab my link uh let's just grab

that from the react router down and now inside there uh let's just sa there and I'm going to Just remove this sidebar right here and I'm going to be placing a lot of D CSS classes so now let me just past there and also let me just create a side inside there and I'm going to also style there so now let me just style there and now inside this aside we're going to be creating our Ur and I'm going to just put the pading of for the y axis of four and now inside there we're

going to be creating our Li once again and now let me just also style there so I'm going to Also style there okay and now inside there we are going to be also creating our link and now let me just provide a specific uh path where it should go so we're going to be providing the admin and then movies and then it should go to the dashboard and now let me just provide dashboard and now let me just also add a few classes to it so we have a block we have a padding for all

around of two margin for the left will be 20 margin for the bottom will be set to 10 So now let me just save that and here you can see we are now getting this dashboard right here but we are now also getting our man right here okay so if I click on this it's going to just brings us to this dashboard right here okay so that was the first link and I'm going to just duplicate there four times so we have this Ali I'm going to just copy there and that was the one so

we would have to just one two three four times so we leave The Styling as it is so the First one we have is a dashboard and then we have the create movie so now let me just change that to create movie and I'm going to also change that from admin movies and dashboard to create create there we go and now underneath that we have another dashboard and I'm going to just make that as create genre and I'm going to just change that to genre like so and yeah that's cool but now let me just

also take care of the update movie so we would also have the update movie And also let me just go to uh I'm going to just remove that from here and it's going to just brings us to the movies uh list right here and now let me just save that and let me just also go ahead and go to my dashboard once again and the final one we would have is for the comments okay so now let me just click on this dashboard and change that to comments and now let me just save this file

and now let's just just check all of that and here you can see we have all Of their dashboards right here but that's not something that I want uh what I want to do is that I just have to change the styling so instead of writing these styling so I'm going to just leave the first one as it is but for the second one which we have is the create movie I'm going to just select The Styling hit contrl dtrl d control d one more time and I'm going to just place these styling so now

let me just place there and here you can see are now Providing when somebody how over there then we are providing a gradient to the bottom from the green to the lamp of 400 so now let me just save there and here you can see it's going to just gives us their dashboard but if I click on this create movie so it's going to just brings us to this create movie right here then if I click on the create genre so it's going to just brings us to there if I go to the update movie

so it's going to just gives us the list of all Of that movies so we can update a movie we can delete a movie if you wanted to and now let me just also go to the comment so it's going to also gives us that comment section right here so from there we can totally see all of the comments or we can totally Del all of the comments and now let me just take care of this main area and trust me it's going to be a lot more fun than the rest of them so I'm

going to just close all of that and now inside this man we Already create our man right here but I'm going to be creating a lot more components okay so the first thing which I want to do is that I want to create a primary card. jsx then I'm going to be also or you know let me just add my RFC manually so now let me just write my RFC s file and now let me just create another another component for the real time card. jsx and I'm going to be just spacing my RFC seller

file and now let me just create here another component For the secondary card. jsx and I'm going to just spacing the RFC s my file and now you're going to be also providing the V card. jsx and now let me just uh write R come on RFC s my file let's just close that let me just go back and now let's get into the Main and start working with the main so the first thing which I would do is that I'm going to be grabbing my secondary card uh CD from where from let's just go

ahead and go to the secondary card and I'm going To be also grabbing my videoo card oh I guess I didn't create the r card let me just also do that so we would also create the r card. jsx as well H where you card yeah we already have that we already created that right here but now let me just grab this we have a radio card and we're going to be grabbing that from the radio card okay now the next thing which you have to do that we also have to grab a real time

uh card from where from let's just go ahead and go to The real time card now let me just use my rtk hooks right here so we are going to be also importing something from let's just go ahead and go to or redex ah redu oh my God why in the world let's just go back three times and now let me just oh not here let's just go one more time and there we have it then we have to write the redex then we have to go ahead and go to the API and then we

have to go to the movies so I'm going to just Duplicate this template like three times and I'm going to be just spacing the users in this case and also the movies as well but um you know we don't have to do that so now let me just cut that from here and we are going to be grabbing the used get top movie squarey and we will also get the used get all movies query from there and now inside this users what do you want to do we just want to get like use get users

C users query so why it's not giving us the users query Let me just test this out so I'm going to just comment this line out and I'm going to go ahead and go to my users and check if we have the use get all the users query or not and yep indeed we don't have that and what I want to do is that underneath this profile now let me just create my endpoint right here and get users and we are going to be using our builder. query and now let me just pass the query

and let me just pass my endpoint right here which will be the URL and we're going to just providing the users uh URL right here so now let me just save that and now finally now let me just export that right here so I'm going to be just using like uh use get users query so now let me just copy that save this file and I'm going to just uncomment this line out and I'm going to be just placing my use get all use get uh users query right here now let me just save there

so that's all the thing that we currently need for now and Now let me just destructure all of that content so we are going to be just destructuring or data and I'm going to just rename that to like top movies and then we're going to be just using like use get top movies query and now let me just also destructure my data once again and I'm going to just rename that to like visitors it's going to be equals to the use get users query and now let me just execute that we're going to be also

restructuring all of the movies and I'm Going to just uh write a use get on mov query and now that's it but you know first of all let me just also make a variable for uh total total comments length come on t o TL and then C O M N TS l e n GT it's going to be equals to all movies and now we're going to be just iterating over through all of the movies by using the map and now let me just Place the movie and inside there we're going to be just getting

the number of comments we have a Num uh reviews there we go and now underneath that we're going to be just getting the sum of comments length Okay and now it's going to be equals to the total comments length like this variable which will only gives us all of the reviews and now we have to just use our reduce method on that and let's just provide our accumulator and also the length as well let me just go back and now here we're going to be just adding the accumulator plus the length as well And I'm

going to be also recing the comma of zero at the end okay so yeah that's then now let me just save this file and now let's just use that so what I want to do is that I want to go ahead and go to my main and I'm going to be creating a section and for this section now let me just P my Flex and justify will be set to around in this case and now let me just also add my margin for the left of uh 14 Rim come on rim and I'm going to

be Also providing margin for the top of 10 and inside there let me just create a div and I'm going to be passing the class name of translate translate for the xais of four and now let me just also pass the flex and now let me just use my secondary card and let's just close that so for the secondary card we are going to be providing these props so now let me just provide the pill and the pill will be users for the first one and also let me Just provide the content and the content

will be visitors and now let me just provide the length of their visitors and now let me just provide the info you you can provide anything you want but in my case I'm going to just space like 20.2k and more more than uh usual U USU come on us there we go and I'm going to be also passing the gradient so g a d n will be from teal of 500 500 to the lime 400 okay so now let me just save this file and I'm going to Just duplicate there for a few times like

three times would be fine so we have the second one for the second one I'm going to be just passing the comments and now let me just pass the sum of all the comments so now let me just remove this so we have sum of all comments and then let's just remove this info from here and I'm going to just spacing like 7 uh 42.8 more than usual and let's just change this one two from the from this Color of gradient which is CCC 515 four uh to this color so now let me just pass

the CD c b add uh e there we go and now let me just save that this is going to be the second color or gradient rather and now let me just also put the movies and then we have to just remove that and all movies if we have that we going to be getting the length from there and now let me just change there to 372 uh plus more than us come on Usul and now let me just pass the gradient of from Green of 500 to the lime uh of 400 okay so now

if I say there nothing will happen because we did not create these components now let me just save that and let's just take care of the secondary card I'm going to go to that and now let me just take care of that so it's going to take the props of first of all the pill then the content then the info and the gradient okay and and now inside there let me just remove The secondary and I'm going to be just providing this class name to there so let's just remove there let me just save there

and here you can see we are now going to be passing that gradient which we are already taking right here so we have g r a d i e n t so now we are passing that gradient dynamically and the rest of them will be the same now inside this div we are going to be creating yet another div and now we are going to be just rendering the pill Inside the the props which you are already providing today but I'm going to be also providing a classes to them so now let me just go

ahead and provide these classes so now let's just save there and now underneath this D what do you want to do we just want to create another div and inside this div we're going to be creating our H2 and now let me just provide first of all the content inside there and now let me just style there so let's just provide this styling To it and for the H2 let me just Pro a space and I'm going to be faing these uh styling to so now let me just save this file and now underneath this

div we're going to be just creating our final D which will be for the in info okay so now let me just render the info and also let me just provide the styling to it so let's just paste this styling ah let's just provide that sem my file and now let's just test this out and see it's going to gives us all of that secondary Cards so we have for the users then we have for the comments and we also have for the movies okay so we have 10 movies inside our database we have two

comments for all of the movies and we have seven users inside our database so yeah that was for the secondary card now let me just remove that and now let me just just go to the bottom and now underneath this div let me just create another div and now let me just style there and inside this div we're going to be Creating our paragraph which will select top content and also let's just create another paragraph for the comments as well underneath this div we're going to be itting over through all of the top movies so

now let me just itate over through there by using the map and now let me just past the movie name and inside there we are going to be just rendering our video card and now let me just close them first of all let me provide the key and the key was movie And specific movie ID and now let me just P the image and the movie image and I'm going to be also pting the title and the title was movie name and also the date when this was released so now let me just past the

movie. year and also we have a comments as well and we have a movie and then number of reviews so now let me just save that and now let me just go ahead and go to this movie I mean like video card and now let me just take care of that okay so now let me Just save that first thing we would do is that we would destructure the image the title and also the date uh date and also the comments as well and now let me just use it right here so I'm going to

just make the as a react fragments and inside that we're going to be just creating a d with the class of fle and items will be now set to Center and I'm going to be also providing the width of uh let me just put 90% And also margin for top will be set to five and now Inside there let me just put a div and for this div we are going to be also rendering the image and now uh I'm going what the hell was that oh God let me just provide the image right here

inside there and for the alternative text I'm going to just P like card image or something like that and I'm going to also provide a class to it so class will say like height will be set to three Rim okay so now let me just saell there and that's not something that I want that's Not something that I want so now let me just try that and here you can see we are not writing outside from there now let me just cut all of that stuff from here and now underneath this div let me just

place that okay so if I just place it right here sa my file and here you can see it is still looking bad but I'm going to just take care of there in a few seconds so so bear with me for a second so now let me just go ahead and go to my video and underneath this div What I wanted to do I want to just create a div with a class margin for the left of four and now inside there let me just put a H2 right here and now let me just render

the title and also the paragraph and paragraph will just say the dead and now to need this D we're going to be creating yet another div and now let's just create a div for the comments right here so now let me just put a bit of closing to this one to this one and also to this one as well and now Let me just add classes to this one so now let me just save there and we only added classes to this data right here okay so I want you to write that as well and

here you can see this is how everything looks like so it's going to gives us all of their movies and it's going also gives us all of their movies comments so here you can see for the first movie we have only two comments and for the rest of them we did not even create any comments so that's why we Cannot see there so yeah this how we're going to be taking care of the r card and now let me just take care of the final one which will be underneath this div and now let me

just create a div and inside there let's just place a real time card and I'm going to just sell there and now let me just go inside there and inside there that's going to be the final component so let's just grab something from where from let's just go ahead and go to or Redux like Three times not like that but I guess four times and then we have to go to the API then we have to go to the users and I'm going to be restructuring the use get users query and we would also need

the primary card right here so let's just use our primary card and we are going to be grabbing that from our primary card okay so now inside there let's just get our data and let's just destructure there and I'm going to just change the name of there to like Visitors it's going to be coming from where from the use get users query and inside this Dev let me just remove that from here and let's just provide first of all the H2 and I'm going to just s like real time or real time in lower case

and then we would have to also write a paragraph which will say like update live uh live and also we will have another div which will not say anything at all but we are going to be just styling there in a few second now Let me just Prov H2 and which will just say like visitors and then the length from that visitors uh l n GT and then also finally we just have to write a subscribe su su SC C rbe while I add classes to these I want you to subscribe to also my YouTube

channel as well okay so now let me just add classes to each of them so I'm going to just f for the video and now let me just add that for the final one right here so we just added classes To ah let me just highlight so we just added classes to all of their divs okay so yeah that look cool I can totally guarantee that but now let me just ride my HR and now underneath that let's just also print our primary card and close the sell my file and that was the end and

here you can see we have our primary card right here you can provide even more details to them and we are getting the primary card and where in the world is that coming from We have a primary card let's just check this out and why in the world you're not taking care of the primary card I thought this is going to be the last component but we also have to take care of this primary card as well so yeah now let me just do that okay so the first thing which I want to do is

that I wanted to import something from let's just go to four time let's just go to four time and I'm going to go ahead and go to the API and then uh the users so We are going to be grabbing uh what do we call it uh the use get users query and now let me just create an instance of there or even D structure or data and I'm going to be just spacing the visitor and use get uh users query and now let me just execute that and for this T inside that we going

to be just creating our H2 and I'm going to just say like congratulations and I'm going to also provide the paragraph which will say like you have this amount of visitors uh Visitors and if you have that we going to be getting the link from there new users and then watching come on watching your content content there we go and now let me just add classes to both of them and first of all I'm going to be adding classes to this one and now let me just add classes to this one so now let me

just save there and here you can see we are now getting our congratulations and now let's just click on the movies and that was our entire Project and that was a beast finally now I have to do a lot of work like I have to edit these videos and then I'm going to go ahead and put that on my YouTube channel so yeah if you like my content so feel free to subscribe to my YouTube channel and please please follow me on GitHub please I'm saying please I'm begging you please follow me on GitHub So

yeah thank you so much for Watching this video and and I will do my best to provide more high quality content more than this project and we're going to be creating more projects soon so if you have any idea for a specific course or I don't know for just a specific video or I don't know for a project or something like that so drop that in the comment section and I'm going to do my best to make a specific separate course on there okay so we can go to the dashboard now we can also go

To the profile we can change everything and we can totally log out and we can also register so yeah that was everything and thank you so much from the bottom of my heart for watching my content love you all and see you in the next course bye-bye