Learn React, Typescript & Material UI With One Project | Build a Movie App in 90 Minutes

hey what's going on guys welcome back to another video a lot of companies uses react with typescript as it provides the static types which makes the code more readable and maintainable as compared to JavaScript and in this video we are going to build a movie app using react typescript and material UI to style our app let me show you the demo of the app that we are going to build in this video so this is the application that we are going to build we have the movie app where we have the sidebar and we have the menu use Home Movies TV series and bookmark on the home we have the trending movies and then we have the recommended for you so this is the trending movies and then we have the recommended for you which has the list of movies now for each of the movie what we can do is we can actually add them as a bookmark so it will have a toggle to make it as a bookmark now whichever movies got bookmarked they will be shown in this bookmark so here we have the bookmark list and then we have the TV series where we will see all the TV series based on the category we have the movies here all the movies and we can also make a search on the movies so we have a search bar and I can search for the Earth and you will see that we found three results for Earth and these are the filtered results you can also have a similar filter on the movies and TV series and since we are using the material UI so the application is completely responsive so if we go to inspect element and if we go to the phone mode then we see that we have the responsive application all the content is adjusted and these are a menu items so we have TV series bookmark and home and we can also make a search here all right so if this sounds interesting then stick around also don't forget to subscribe the channel and press the Bell icon so that you don't miss the videos like this one so let's get [Music] started all right guys so I have already created my project and the name of the project is Picacho app now if you want to create this project you can just use the PX create react app and then the name of your application then we going to use the template as typescript because we're going to build this project in typescript and not in JavaScript now let me give you the walkth through of the code that I have already so I have made some modifications and added some assets and data so if we go to the public folder I have added the thumbnails these are basically the images so that we don't waste much time so these are the images and then if we go to our source folder the first thing we will see that we have the index. TSX which is a pretty standard index. TSS when we get in our C which is a create react app then we have our app. TSX we haven't done anything we have the default application and then what I have added is I have added an assets folder in this asset folder I have the icons so these are all the SVG icons which we are going to use for our project then we have the Avatar images then we also have this data. TS this is our main source of data that is going to be used throughout our application so if I click on it then you will see that we have the movie data and this movie data is a array of objects where each of the objects will have the ID title thumbnail then the thumbnails will be trending regular thumbnails and then we have the year category all this information we will also create a interface of this movie data later on then I have the components folder and inside the components folder I have few more icons like the bookmark icon home movie and series icon all right so that's the initial project setup I have now what we need to do is we are first going to install all the packages that we will need for this project and for this project we are going to use the material UI for styling all right so now let's go and let's install the dependencies so what I will do is first let's install the react router Dome so I will have the npm install react router Dome all right and this is going to install the react router Dome version 6 which will be used for the routing now we will also need the material UI so let's go to the material UI website and let's see the documentation so this is the material UI documentation and here you will see that if we want to install it we are going to use the npm as a package manager so I'm going to go here and we can just copy this all right and then we can just add it here so that it will get installed so I'm going to click enter and this is going to install the material UI emotion react and emotion style so all the packages that we will need in order to use the material UI in our project so we have installed it now if I go to the packet Json file then we should be able to see that we have the material UI installed and we also have the react roucher Dome installed now the other dependency that we need to install in our project is the Mighty Men so I'm going to tell you in a bit about Mighty Men what it is but before that what I will do is I'm going to start my application on the Lo local environment so I'm going to use the npm start so let's have the npm start and we already have the start script in our package Json file so I'm going to hit enter and this is going to start my application on the local environment so we see that we have the Locos 3000 and this is our application now let's understand about this Mighty Med which I was just talking about so if we go here then this is a future kind of a Dev tool so we have already seen the native Dev Tools in our browser which we do the spec element but this is a Next Level and it is going to give you a lot of UI updates on the fly as we code and it is actually going to speed up our react development with some visuals and intuitive superpowers so we are going to install this in our project and we will see that how beautiful it is when we are going to build our application so you will see that we are going to have this studio and then we can directly jump to our code whenever we want to make any changes and what we will do is we are going to install this in our project so let's go to the installation guide so in order to do the initial setup what we need to do is first we are going to copy this npm install we are going to install the mimed runtime so I'm going to copy this let's go to our Visual Studio code and here what I will do is I'm going to have a new terminal and then I'm going to add it here all right I'm going to hit enter and this is going to install our mimed runtime in our project all right so our runtime dependency is installed now the next step what we need to do is we need to initialize Mighty Med for that what we will do is we can either use the npx Mighty Med in it or we can just manually create the mighty. Json so I'm going to create the mighty. Json in our root directory all right so I'm going to have it here all right we have the file and then what we need to do is we will just do some configurations so I'm going to click on the configuration options and here you will see there the list of configurations that we need to do for the system configuration we are going to add this r run and web server URL so what I will do is I'm going to create a Json here and here what we will do is we are going to have the run and then we are going to use the npm Run dev then we are going to use the web server URL so what I will do is I'm just going to copy and paste so I'm going to copy this all right and then I'm going to add it here all right for the customization we can add the prefabs directory I'm going to show you soon what this prefabs are so let's add the prefabs D Dory and then what we will do is we are also going to use the pror so I'm going to have it true and now we will do the code interpretation and for the code interpretation I'm just going to use this one all right so I will add it here okay so we have already added the mightet Json configuration and now to do the further setup what we need to do is we also need to install the plugin so let's click on the plugin and here what we will do is uh we are using the create react app template so if you're using your next project or white using beel or white using S swc uh you can click and you can check the instructions so for us it's create react app so I'm going to click on create react app so we are using the create react app and we have not ejected it so we cannot access the react scripts directly so for that what we will do is we are going to use the custom CR plugin so here you will see that this is the custom CRA plugin which will allow us to override our react app rewired so all right so what I'm going to do is I'm going to copy this or if if we go here then we can simply use this so I'm going to copy this and let's install it so I'm going to install this and you will see that there is a lot of setup we are doing but after doing all the setup and when I show you the myet studio you will see that it is worthwhile to set up while building the projects so now we have it and now what we are going to do is we are simply going to add this in our packet Json file so let's go to the package Json file and I'm going to add it here all right so now we have an additional script and the last step what we need to do is we just need to create a config override. JS so that we can just override the babble plugin so what I will do is I'm going to go here I'm going to create the file all right and in this file we are just going to add this so let me add this all right so we have it and we are just adding a babble plugin using the customized C all right and then what we have is now we can just use the this run so I'm going to just change this so I'm going to copy and then I will go to the Json file and in the Json file what I will do is I'm going to just simply change this to this one so now we have successfully done it now what we need to do is uh we will also need to have the mimed secrets so for that we need to log the mimed app and then we can just create our instant and get the secrets so what I will do is we will go to the mimed app so I'm going to go to the myed app and you can just create your account so you will find all the details about creat creating the account in the description of the video so what you will do is we already have it I'm going to go to the instance you can just create your instance so I'm going to create a instant maybe I will name it as Pik show and then I can just download my secrets all right so the secrets are downloaded and we can just add those secrets into ourv file of the project so I'm going to go here and I'm going to create a EnV file so let's have the EnV and I'm going to add the secrets here all right so I have added the secrets into myv file and now what we can do is we have completed our setup now we have all the dependencies that we require to build the application so now what we are going to do next thing is uh I show you about the prefabs so if we go to the mighty. Json then here you will see that we created a prefabs directory so let's add the directory in our source folder so I'm going to click here I will have the prefabs here we are using the material UI so we are going to add the material UI prefabs so let's go to our browser and in the browser you can just go to the GitHub repository and here you will see that we have this prefabs repository and what we are going to do is I'm going to go to the source and in the source we are going to use the Mi UI so basically it is going to allow us to have the material UI components in our mimed studio and then we can just use a drag and drop and build our UI before going that let me show you what is this mimat studio is so to open the mimat studio what I will do is I'm going to have the npx my team Med all right and I'm going to hit enter and this is going to open the studio so you will see that now we have the studio. M.A all right so this is the mightet studio where you will see that we have all the libraries here then we have the active browsers and we can also have the different tabs if you want to view our application on tablet or mobile and then we have a lot of different things here but before going to all into this deep what we will do is now you will see that we have only the app here and we can also see our source code here all right but we will also need to have the prefabs so what I will do is let's add the prefabs to add the prefabs what you can do is you can just go to the prefabs and then you can just download this mui jsx and HTML so this is two we are going to use it so I'm going to download it and then I will just put it into my prefabs folder so let me add that all right so I have added the HTML jsx and mui jsx now if we just rerun this so I'm going to go and I'm going to rerun my Studio then in this case what you will see that you will have the additional libraries so now you will see that we have the HTML and we also have the mui libraries where we can just use a drag and drop and then we can build our UI layout so now let's go back to our project and what we are going to do is we are first going to set up our routes and let's work on the routes so what I will do is I'm going to go to the app. TSX and I'm going to remove everything and before that before writing anything we will just create the folder structure so what I will do is let's create the folder structure so I'm going to have the pages here so I'm going to go here and I will have the pages all right and inside the pages I'm going to have the home first so let's have the home then I'm going to have a movies then I'm going to have the TV cies then we are going to have the error and we are going to have the bookmarks so let me have the bookmark I will have the bookmark and inside all these folders I'm going to create a index. TSX file so let me quickly create the index. TSX and here I will have the functional component I'm using this react snippet to get the component and I will have the bookmark and I will just add the bookmark here as well so I will have the bookmark now I'm going to create the error so let's have the error I'm going to have the index. TSX then I'm going to have the function component where I'm going to add the error I will change this to error and I'm going to add an error here then I'm going to go to the home I will have the index. PSX all right I'm going to have the function component and I'm going to have the home here all right I will change this to home all right let's do for the movies so I'm going to have the index. TSX and then I'm going to have the RSC we're going to change this to basically this should be movie so what I will do is I'm going to rename the file as movie so I'm going to go here I will rename and I will rename it as movie then for the TV series let's create the index. TSX so I'm going to have the index. TSX and I will go here I'm going to have the RSC and I'm going to change this to TV cies so I will have the TV CDs all right I'm going to copy and I'm going to add it here as well so now we have all the different pages now for those pages what we need to do is we will also need to create the route so let's go to our app. TSX all right so I'm going to go to the app. TSX and inside the app. TSX I will have the RSC and I will have the app here and then what we will do is I'm going to import the route provider so I'm going to have the router provider all right and then I will just wrap this in the router provider so I'm going to have the router provider all right so this can be a self closing so I will have this self closing and inside the router provider what I need to have is I need to have have the router as a prop and I'm going to pass the router here so what we will do is we are just going to have the brackets here all right now it is complaining about the router as we don't know what the router is so let's create the routes file so that will contain all our routes so I'm going to go here and then I will have the routes. TSX so let's have the routes. TSX now inside the route. TSX what I will do is I'm going to have the export constant we are going to export a router and this is going to be equals to the create browser router so we are going to use the create browser router which is going to have an array of the routes so let's create a single route where we are going to have the path AS Slash so this will be our home route we need to specify the element so let's have the element as home and then we will also specify the error so I'm going to have the error element and the error element will be error all right so this will be one of our routes so I'm going to copy paste for the others so I'm going to copy and I'm going to paste it here then I'm going to paste it again all right so the first route will be home the second route can be movies all right so this will now change to movie then the third route can be TV series so I'm going to have the TV series here and this can be changed to TV series and the last route it can be for the bookmarks so let's have the bookmarks and and I'm going to change this to bookmark so we have set up the routes now we have to use this route into our app. TSX so let's go to the app. TSX and what I'm going to do is I'm going to have the router here so we have the routes here I'm going to save it all right so now we see that we don't have any errors and our code is also successfully compiled and if we go here then we see that we have the Locos 3,000 and we see home here now if we go to the Mighty Med so here we see that our studio is running and we need to do one thing is we always need to specify the same port so our application is running on local 3000 so if we go to the Json and if you see the web server URL we need to specify the same 3,000 Port here so let's go to the studio and in the studio also you will see that we have the home now a good part of this is that I can also change the path so if I go to movies then I will see movies here now if I go to TV series so let me go to the TV series and I see TV series here now let's go back here and now what we are going to do is we are going to first create the layout of our page so what I will do is I'm going to go here in the source folder I'm going to create a new folder I will name it as layout now in this layout what I will do is I'm going to create an index. TSX and now what we will do is first let's create the interface here so I will have the interface for the layout props so I'm going to have the layout DRS oops I misspelled the layout and this interface is going to have the children so let me add the children and the type of the children would be react node so we are going to have a type as react node all right it's got Auto imported and now let's create the function so I'm going to have the RSC and I will have the layout here so let's have the layout I'm going to remove this and this layout is going to accept the children so let me add the children and type of this children would be layout props so let's have have the layout props so we have this layout and now what we are going to do is let's create the UI so I'm going to have a box here so let me have the box and this box is a material UI component so let me import it so I'm going to have the input we are going to have the box all right so this will come from the material UI so if you want to understand about it what you can do is you can always go to the components and inside the components you can search for the box so it is kind of a div that can be used so if I go down then we will have a layout and we have the box so this box is basically a type of a container and we can have a different UI elements into that container so we have created a box and if we want to add the props or we want to add The Styling to the Box we can use it via SX so if I click on this box then you will see that if you want to add the props we have an SX where we can just Define all the array function functions or objects so I'm going to go back here and we going to have the SX all right and to this SX what I will do is I'm going to give the background color first so let's have the background color and I'm going to have the color as # 10141 F so we are going to focus more on the material UI and we will see how we can design the UI of the application so I will show you the demo app so this was the demo application that we are trying to design and this is our original application let's go back and now we see that we have the SX and we have given the background color we're going to add the display property and I'm going to give the display as Flex then we are going to define the flex Direction the flex direction for extra smaller devices I want in a column structure so I'm going to add a column and for the large devices what I will do is I'm going to have it in the form of rows then we are going to define the color so let's have the color as white then we need to give the padding so I'm going to give the padding as three we're going to give the Gap and I'm going to give the Gap as three then let's have the Overflow y so let me have the Overflow Y and the Overflow y would be hidden and then let's give the height to our complete page so height to our page will be 100 vertical height so this is basically the container we are creating a parent container just below the body so we have an HTML page where we have the body and then we are going to have this complete layout in our app TSX I'm going to save this and once we have this what we will do is we are going to have the other box which is going to contain all the children's so let's go and let's see first so I'm going to refresh my page and we don't see anything because we are not using the layout anywhere so now we have this layout now if we go here and we see that we have this complete layout and inside the layout we are dividing the page into two different sections we are going to have a sidebar which you will see it here and then we have a right hand side which will contain all our data so let's do that so what I will do is I'm going to go back here all right and in this bigger box we are going to have a sidebar so let's create a component for the sidebar so I'm going to go and create the component first so I'm going to go to my components and inside the component I'm going to create a folder I will have the sidebar and now we are going to create an index. TSX so let me have the index. TSX I'm going to create the component and we have the sidebar so let's have the sidebar all right now inside the sidebar what I'm going to do is I'm going to create a constant nav links where we are going to have all the navigation links so I'm going to have an array here all right and for this array what I will do is I'm going to have the name as home then I'm going to have the icon for the home so let's have the icon I'm going to have the home icon so home icon all right then what we will do is we are going to have the link and this link will be slash so this is for the home now we are going to create it for the movies TV series and bookmarks so for the second one I'm going to have this as movies I'm going to have the movie icon so let me have the movie icon and this is going to have the movies as the link then we are going to have the TV cies so let's have the TV cies oops TV cies and we going to have the icon for the TV series and then this will be the TV hyen series and the last one is the bookmark so let me have the bookmarks we're going to have the bookmark icon so let me have the bookmark icon and then we have thisk icon all right so we have the na links now we just need to create the UI of it so what we will do is uh in order to make the link active we are going to use the use location so that we will identify which path is in the URL and then we will just take the path name to add The Styling so what I will do is so I'm going to have the constant I'm going to have the path name and this will be equals to the use uh location all right so this will be coming from the react router Dome all right so now let's add the CSS so what I will do is uh I'm going to add the box container again here so let's have the box container and inside the box container we are going to give some styling to it so if we go here then we see that what styling we need so we are creating this box here and to this box we need to give the color and everything so I'm going to go back here I will have the background color first so let's have the background color so the background color will be 6 1 d 2 F all right and then we are going to give the padding so let's have the padding as two then we are going to give the Border radius so we are going to have the Border radius as two then we will have the display so let's have the display as Flex so I'm going to give the flex then we will also need to define the flex direction for smaller screens so we're going to have have the flex for the extra small we going to have it as row and for the larger screens we are going to have it as column all right oops there should be LG larger screens then we are going to have the Align items so let's have the Align items we want all the items to be aligned as Center all right and then I'm going to have the justify content that will also have a space between and then we are going to define the width so the width for the smaller screen what we want is we need 100% And for the larger screen we are going to Define it as 200 so we have this and now if we want to see then what we can do is we have the sidebar let's import the sidebar here so I'm going to have the side barar and then once we have the Side Bar we are going to have the box for the right hand side so for the right hand side we are going to have a box I'm going to give the SX and let's have the width so we are going to have the width as 100% all right and then we are going to have the Overflow Y and overflow y would be scroll so we're going to have a scroll on the Y AIS and inside that we're going to accept the children's so let's have the children so we have this layout now if you want to see the layout we need to import the layout in one of our page so let's start with the homepage so I'm going to go to the homepage and inside the homepage what we will do is instead of returning this I'm going to return the layout so let me have the layout component and I'm going to add it home here all right I will save it and now if we go then you will see that we have the home here and on this side we are going to have our sidebar so if I go here inspect element then we should see that this is our sidebar and this is our home similarly if we go here and if refresh our page and you will see that now we have this home so now let's go back and let's continue to build our sidebar so I'm going to go back to the sidebar and and inside the sidebar we just created a container now inside the container we need to add our menus so what I will do is let's create the another container so I'm going to have the box SX all right and in this SX what we are going to have the we will have the display Flex then we're going to have the flex Direction so let me have the flex Direction and the flex direction for the extra small we going to have it as row so let me have the row and for the largest devices we are going to have the column all right I will save it and then what we are going to do is we are going to have the Gap let's give the Gap as five then we are going to define the Align items so we need to have all items aligned so for the extra small we will align them in the center so let's have the center and for the larger we will align them from the start so these we are aligning the items inside this box which will be the actual menu items which will be the Home Movies and TV series so we have this and then we will we'll just Define the width so let me have the width and the width will be 100% so we have this container and now inside the container what we will do is we are simply going to make use of a typography that will help us to give the styling on the headings and the text all right so if we go to our material UI then you will also see a typography here so I will have the typography and this typography is going to give you the styling how your uh if I click on this typography then it will give the styling that how your font is going to look like so we are going to use the hidden component as well so if we go and see the hidden component so this is going to get activated uh for the screen that we will specify so so this has a couple of uh props so you will see that for larger down uh for the medium devices and for the small devices it will be s m and for extra Sol it is excess down so when the device get a particular size then this flag will get true so what we will do is if we go back here we are now going to have this hidden component and in the hidden component this we want that whenever it is a small device so I'm going to use the SM down then in that case this will get activated and now inside this I'm going to have the typography so let's have the typography oops I made a mistake so I will just cut this and I'm going to add it here all right I will save it and and inside the typography what I will do is I'm going to have the paika show app and here we can Define the variant so for this text Pika show what variant we want to use we are going to use the H5 all right and then for the component what component we need is we are going to use the H1 all right and I will have the margin on y AIS as two all right we're going to give the font weight so let's have the font weight as 400 so it's become very easy if we use the material UI for styling because we don't need to write much CSS on our own then we need to specify the font and I'm going to give the font as 18 so let's have the font size now we have this and the last thing what we need to do is we need to just Loop through the nav links and then display all the nav links so I'm going to have this hidden and just below the hidden I'm going to create a container with a box and then I'm going to just Define the SX and let's have the CSS to that box so what I will do is I'm I'm going to have the padding on the Y AIS so padding top and bottom so for the smaller devices I want this padding to be 0 pixel and for the larger devices I want this padding to be 16 pixel and then what we will do is I'm going to have the display property I'm going to give the display Flex then let's have the flex Direction so I'm going to have the flex direction as for the extra small devices this Flex direction will be row and for the larger devices this will go to the column so let me have the column now we have the flex Direction and then what we will do is we are just going to define the gap between the boxes so I will have the Gap as four and now we will simply Loop through so to Loop through what we will do is we are going to have this nav links I'm going to use the map on it and this is going to give us an individual item we're going to have the arrow function all right and inside the arrow function we are going to use the link component from react router Dome we're going to have the key all right and this key would be the item do name so I'm going to have the item do name all right we will have the two and this two will be item. link and then we are going to have a style so let's have the style as text decoration and I'm going to give the decoration as none so that I don't get the underline whenever I have an anchor tag replaced for this link component I'm going to close this and inside this what we will do is we are going to have all our menu items so to get the menu items what I will do is I'm again going to use the hidden and this hidden for medium devices I want to hide this and what I will do is I'm going to have the typography and inside that I'm going to have the item dot name and what we are going to do is uh we are going to have a box container just inside this so I'm going to put everything inside the box container so I'm going to cut it and I'm going to add it here and I will save it all right so we get some errors so what we will do is this is going to be a bracket and I'm going to change this to a bracket and we will just remove this now for this box we need to add some styling because we will have an image here so if I go here then we will see that we have an image and then we have the text all right so we need to add an image here so this is the text and just before the text we need to add the image so what I will do is I'm going to have the image then I'm going to define the source to that image which will be the item do icon we are going to have the alt tag so let me have the alt tag as and we close the image so I'm going to have the alt tag and this alt tag will be the item do name let's have the styling to that image uh we going to have the styling so I will have the width so the width for that icon I'm going to give it as 18 pixel then we will have the filter and we're going to use the CSS filter property where we are just going to add the the values so I want to add the styling to the image based on the active link and non-active Link so I have to compare it with the path name so I have the path name all right and if this path name is equals to equals to item. link then in this case if it is true or false I have to define a different CSS property so I'm going to have it here all right and I will just paste the style here so this is what I want as a style and if this is false then I just have to invert this so what I will do is I'm going to use the invert and I'm going to invert it till 84° so I will have the invert and I will invert to 84° all right and now what we will do is we are just going to style the box as well so for this box I will have the SX and for The Styling what I will do is I'm going to have the display so let's have the display flex and then we are going to have the Align items so we need to align the item to the center and then we going to have the Gap so let's have the Gap so I'm going to have the Gap as two then we are going to have the color and I will have the color as white and then we're going to have the text decoration so text decoration should be none all right so we have this now if we go and check so let's go here all right so now we can see the sidebar here and we have the Side Bar and we also have the home so if we want to navigate it what we can do is I can click on the drive and then I can click on the movies and it is going to go to the movies folder all right I can go back and it will go to the home again so if I click on TV it will go to TV series and I can go back I can also see them in the tablet mode so if I click on any of the tablet mode I will be able to see it in the tablet and in the mobile browser now we have already designed this sidebar now we need to design the home component so here in the home component what we can do is let's go back to our Visual Studio code so I'm going to go to the visual studio code and I'm going to go to the home and here what we will do is uh I'm going to remove this and inside the layout I'm going to create a box container so let me have a box container and inside the Box what I will do is I'm going to use the paper component so if you want to see what this paper component is we can go to our Mi UI and we can search for the paper now if we click here then we see that this is a paper component which is uh we'll click here and we see that we are going to get this kind of an elevation or something like this so this is going to help us to build our search menu so if we go here and we see then we have this search menu so we are going to get this kind of an UI if we use the paper all right so for this paper what I will do is I'm going to have the component so I want this to be a component of form so I'm going to have the form here then we're going to use the SX and we're going to pass some props so I'm going to have the display Flex so let me have the display Flex then I'm going to give the Align items so I will have the Align item as Center then I'm going to have the Border radius so I'm going to have the Border radius as default so let me have the default all right and then I'm going to give the padding as one and we will have the background color so we are going to have a different background color for the search bar so I'm going to have the background color as # 10 0141 F oops this should be one Z and we're going to have a codes here all right so we have the background color and then we will just give the Border as none so we are going to create a form and we're going to give the Border as none so we have this now inside this what we will do is we are going to create the input base so if we go and check and if we refresh it then now here you will see that if we click here then we see that we have our layout box and paper and the very similar we will see here as layout box and paper now the prefab is actually if we want to use the UI element then what we can do is we can go to Mi UI and we can use the input base so I can just drag the input base here so let me add the input base and you will see that now we will have the input base I want the input base to be inside the paper so I'm going to drag it down so this is going to give me the input base inside this now I can also add the CSS styling from here itself so here you will see that for the paper we have all the inline Styles like Flex align item so I'm going to click on the input base and I'm going to add the the props so I will add the placeholder and for the placeholder what I will do is I'm going to have the search for movies or TV series all right and I'm going to hit enter and now my placeholder will be added now what we can do is the other prop which we want to add is the SX and what we will do is I'm going to add the SX as margin left which is going to be 1 pixel then I'm going to have a flex I'm going to have the color as white and then the last thing we want to add is the border and I'm going to add the Border as none so I'm going to change this To None all right I'm going to hit enter and now we will see that we have this base property so we have this inline Styles which we given the margin left and everything now we can also add the props so I will also have the value and the value will be the search so let me add the search all right now we will have a problem because we don't have the search for the prop so now what we will do is we are going to create a state variable for the search so I'm going to go here I will have the constant I'm going to have the search and I will have the set search this is going to be equals to the use State and we going to have the value as empty so now we have the search here and we see that we have the search so I misspelled the search so I'm going to correct it all right so next thing what we are going to add is we are going to add the on change so let's add the on change and I'm going to add the on change as handle search as soon as we added you will see that we get an error so we can do this we can also go to the app and we can go and change in the source itself so if I go to the pages so let me go to the pages if I go to the home you can click here and we can also directly add it here so I'm going to go here and I'm going to create a constant where I'm going to have the handle search so I will have the handle search and this handle search is going to be equals to I'm going to have the event which will have a Target so I'm going to destructure this event I'm going to have the target and the target is going to have the value and the type of the value will be the set State action so this is the type and then we are going to have the as string all right now this is going to be equals to an arrow function where we are going to set our search term so set search and we're going to set that event. target. value all right and I'm going to click on save so you can do a lot of things from my so if I go back here and if you see then we have this term and we just need to import the so I'm going to have the set State action all right so now let's create the UI for the search bar so here what we will do is for the search we will also need to have an icon So Below this I'm going to use the start adornment so this is a prop which is provided by the material UI and on this prop what I will do is I'm going to use the input dorment where we can have the icons so I will have the position as start and then inside that I will have the image we going to have the source as search icon all right I'm going to have the alt tag which is equals to the search icon I'm going to give a width and the width will be equals to 20 and then we're going to give the height for that icon which is also be 20 so we have this now we need to import the search icon so let's import the search icon so what I will do is I'm going to go here I will have the import search icon and this will be coming from our assets so let's go to the assets and inside the assets we have the icons and inside the icon we have the search SVG and then what we need to do is we need to have an another container where we are going to display our trending movies so if we go here then we have added this search bar now we need to create this container where we will have the trending list and then we have the recommended list all right so let's create the container so I'm going to go back here I will have the box all right and in the box I'm going to give the padding as two all right and you'll give the padding for X as four and then what we will do is we are going to have a search and if our search is equals to empty then in that case what we will do is we are going to display some jsx and if it's not empty then we are going to display a different jsx all right so what I will do is I'm going to have it here first so here what I will do is I'm going to have the box all right and inside the box I'm going to have the width so I will have the width as 100 % all right then inside I'm going to have another box element and the width of that box element will also be 100% so let me have the 100% And then what we will do is we are going to use the typography component which will give us the text so I'm going to have the variant as H5 then we are going to have the component and the component will be H1 we're going to have the margin so the margin will be six all right and then we're going to have the font weight so let me give the font weight as 400 all right so this is our typography component and inside that what we are going to do is we going to have the trending all right I will save it okay now we have the trending and then we need just need to display the trending list so what I will do is I'm going to have a movie Trend component so let's have a movie Trend list component where we are going to pass the trending list so I will have a prop as trending list and I'm going to pass the trending list so let's have the trending list so I'm going to copy and I'm going to add it so we have this trending list and below that what we will do is we will also have a recommended for you so what I will do is I'm going to copy I'm going to add it again here and then this time this will now change to recommended for you so I'm going to have the recommended for you so let's change this to uppercase and in this what we will do is I'm going to have a mobile list here new component where I'm going to pass the recommended list so let's have the recommended list or maybe recommend list and I'm going to copy and I'm going to add it here now if this is the case when the search term is equal to equal to empty but if the search term is not equal to Mt then in that case what we have to do is we go here and I'm going to have a box let me have the box here and then I'm going to give a width which will be equals to 100% And then we're going to have the typographic component so let's have a typographic component and inside the component what I will do is I'm simply going to have found so for now I will just keep it found so in case if we are trying to search anything and we don't find it then we are going to display this particular uh text so for now I will just keep it found and we will just change it later on now let's create two new components which is the movie Trend list and the movie list so what I will do is I'm going to go to my components and I'm going to create a folder which will be the movie list all right and inside the movie list what I will do is I'm going to have an index. X and the other one will be the movie Trend list. ESX now oops I misspelled the trend list so I'm going to have the trend list. TSX now let's create these components so we'll have the component and I will have it as mov list all right I will just have it as a movie list and this component is going to accept a prop and that prop will be equals to recommended list all right and we need to provide a type of it and let's have a type so before the type we need to create an interface so let's have an interface of movie list drops now this is going to have a recommended list so let me have the recommend list it will be a list of the movies maybe I will just add any for now all right and I will have the any here and we have the movie list I'm going to save it now if we go to the the movie Trend list it will be a very similar so what I will do is I'm going to copy I will go here I will add it and instead of of this I'm going to change this to movie Trend list prop so I'm going to change this to Trend and here we will have the trending list so I'm going to copy and I'm going to add it here and then we are going to have the movie Trend list here so let me change all this all right and this will now get changed to movie Trend list now we can go to our home and we can just import them so what I will do is I'm simply going to have a movie Trend list and here I'm going to have the movie list now we still see that we have an error because we don't know what this trend list is and what this recommended list is but before doing those two fixes let's go and let's check our data so if I go to the assets if I go to the data. TS then this is our data so let's create an interface for the movie data first so what I will do is I'm going to have the export I will create an interface since we are using typescript so we have to create the interface for each and every type of data so I will have the movie data type all right and this movie data type will have the ID of type string then we are going to have a title of type string then we are going to have a thumbnail and this thumbnail will be of okay I'm just going to copy and I'm going to add it here all right what I can do is I can actually copy this little bit Yeah I will copy till here and I can just add it here now we have the thumbnail we will have the trending so I'm going to add a question mark here because this can be a null so what now we can do is we can remove all this and instead of that we can have a string so I'm going to remove this I will also remove this let's remove this this this and all the images path are of type string so let me add the string everywhere I'm going to add the string then we have the ear so ear is a type of number so let me have a number we have a category which will be a string we have a rating which will be a string and then we have a e bookmarked which will be a Boolean and then we have a trending which will be a Boolean so now we have this uh interface ready for the movie data type now the next thing what we are going to do is we are going to implement the context API all right so that we can fetch the data so I'm going to go and implement the context API so let's have a source and inside the source so I'm going to create a context folder and inside the context I'm going to create a file as movie context ESX all right so now let's create the context so what I will do is I'm going to have a export I will create a movie context and this is going to be equals to so I'm going to have a constant here and this will be equals to the create context so let me have a create context and in this what we will do is we are going to make use of a use reducer hook to have the state so I'm going to have the state as initial value so we're going to Define an initi I value here all right or initial movie State let's name it as initial movie State and then we going to have a dispatch all right so this is going to be an arrow function now we are using typescript so we also need to define the type of our context so let me Define the type here so what I will do is we're going to have the state first all right we need to define the state as movie State and then we are going to have a dispatch function so this dispatch would be of type react. dispatch so there is a dispatch all right and then we are going to pass a movie action here so we have this context now there are a couple of things we need to create is first we need to create the movie State all right or how the movie state will look like okay so let's create an interface first so I'm going to have a constant initial movie State all right and this will be of type movie State okay and this is going to be equals to an object and in this object we are going to have the movies so let me have the movies all right and this movies will be of type movie list all right now we don't know what this movie list is so first let's create all the interfaces so what I will do is first let's have the interface for movie context props all right and this is going to be an object and we are going to have the children all right and this children will be of type react node all right so now we have the prop now the second but we need to create is we need to create the movie state so let's have the interface and we are going to have the movie State and this movie state will be equals to movies all right and those movies will be of type movie data so we have a movie data here so we're going to use this movie data type all right so this will be movie data type and it will be an array of the movie data type so now we have the movie State now the third we need to create is we need to create the movie action so if we go here we see that we have a movie action so let's create an interface for the movie action all right and for the movie action we are going to have two things one will be the type and the other will be the payload so I will have the type which is a string then I will have the ID which is also a string all right now we have this now what we will do is we are going to have the initial state of the movie list so we need to create the movie list so let's have a constant of this movie list all right and this movie list is of type movie data type array all right and then what we will do is we are simply going to have the movies data here all right now this movies data is basically the movie data that we have it here all right this is the movie data all right so now we have all this and now what we have to do is we have this initial movie State we also have the dispatch but we don't have the use reducer here so let's have the use reducer so what I will do is I'm going to go here and here we are going to create the provider so if you don't know about the context API then I have a dedicated video on it you can just click on the card above and jump to it directly so the next thing what we need to do is we need to create the movie provider so I'm going to have a constant I will have the movie provider and this will be equals to so this is going to accept the children so let me have the children and those children will be of type movie context prop so I'm going to have the movie context props so we have the op I have movie content so it should be movie context props I'm going to I'm going to copy this and I will add it here all right now we have this movie provider I'm going to have an arrow function and inside the arrow function we are going to create the use reducer hook so we will have the state I will have the dispatch which will be equals to the use reducer all right we need to provide a reducer and we need to provide the initial state so let's have a movie reducer all right and then we are going to have the initial mov movie State and this provider is going to return the movie context. provider all right we need to pass the value and the value would be the state and the other one will be the dispatch so whenever we have we use the use context hook to get the value from the context we are going to get the state and we are going to get the dispatch and inside this we are going to have the children now for this movie reducer we need to create a function for the movie reducer so let's go and let's create it oops this should be the brackets and we need to create an object here and we will have this inside the object so I'm going to cut it and I'm going to add it here now let's create the movie reducer so I'm going to go here I will have a constant I will have a movie reducer all right which is going to take two parameters one will be the state of type movie State other one will be the actions so let's have the action which will be a type of movie action all right and this is going to have a type of movie State all right so when whenever we have a reducer so it reducer will take an action then based on the action it is going to manipulate the state and then it is going to return the new state so this is what we are going to do in this movie reducer so I will have a arrow function now let's have a switch case here based on the action so I'm going to have the action. type and then for the action we are going to have a case for toggle bookmark so we are going to toggle The Bookmark so if we go here and if you see if we click on it we can toggle it so this toggle state we need to have it so I'm going to go here I will have the case and this is going to have a toggle bookmark all right and for this case what we will do is we are going to return the new States so we will take everything whatever is in the initial State and then what we will do is we are going to have the movies so we will have the state. movies. map and inside that we are going to take an individual movie and then we are just going to manipulate it we're going to have the arrow function and inside inside this what we will do is uh we are going to return let's take all the property of that movie and then we will just change the is bookmark and we will see whatever the value is so we are going to have the movie do is bookmark so if it is true then we going to make it false if it is false then we are make it true and we need to do this only for the condition where our movie do ID is actually matching with the action. ID so if it matches then we are going to manipulate the E bookmark flag so I'm going to go and add it here now if everything is fine then what we will do is we are just going to return our movie state so let me return the movie so now this is the new movie state that we are returning now what we have to do is uh if it's a default case then let's have a default case what we will do is we are just going to return the state that we have so let's have a simple State all right so now we have already return our context API so let's go through it so first we have created the context and then we also have the context provider and then we also created the movie provider where we have the movie context. provider and we are using the use reducer for the state now we can use this in our pages and we can fetch the data so if we go back to our home component then we still need to fetch the trending list and we need to have the recommended list all right so what we will do is first we are going to create an extra State variable which is going to have the search list so I'm going to have a constant we're going to have a search list and then we're going to have a set search list all right this will be equals to the use State and then what we will do is it is going to have a movie data type of array all right and then we're going to have an empty array all right so we have this now what we have to do is whenever someone is typing in the search bar in that case what we have to do is uh we need to filter the results but before that let's get the movie data so I'm going to have a constant ENT we're going to have the state and this state we will get it from the use context hook so let's have the use context and now let's pass the movie context here so I'm going to have the movie context once we have the state we can get the movies so let me have the movies so if you want to see what we get in the state what we can do is we can just do a console.log and in the console.log we can have the state but before that we need to fix the trending and the recommended list so I'm going to create a constant for trending list so let's me have the trending list which is equals to an empty array all right I'm going to have a simple any here then we will also have the recommended list so let me have the recommend list so I'm going to have the recommend list which will be an empty array all right so now if you want to see the state then let's go to our browser and what I will do is uh I'm going to have a console lock so I'm going to go to the inspect I'm going to go to the console I will refresh it and here you you will see that we have the state which is the movies so we can actually destructure movies from the state so if we go back then we can just destructure the movies from the state all right now if you want to have a trending list we can simply go through the movies and then we can just filter the results for the trending list so I'm going to have the movies do filter which is going to give me an item all right and then what we can do is we can have an arrow function and then we can just match it so I will have the it dot is trending then this should be equals to true all right so now we see that there is an error here and we have missed one thing so we need to provide the childrens to the context provider so if we go to the app. TSX and here in the app. TSX what we can do is we need to have the movie provider so I'm going to go here and we're going to have the movie provider and inside the movie provider we need to pass this so that we can get the values so I'm going to save it now if we go here and now what we have to do is uh here it will be an equals to instead of the colon or we can also make this as any but we don't need to do that so now we get all the trending list now similarly we can also get all the recommended list so whichever values are not in the trending we will put them in the recommended so here instead of this what we are going to do is we going to have not equals to true so we have the trending list and we also have the recommend list now the next thing we need to do is for the handle search and for the handle search what we can do is whenever a user types something we just need to filter out those results so I'm going to have a constant new list and this new list will be equals to the movies do filter all right then we are going to get an individual movie all right which is going to be an arrow function we will see the movie. title. to lowercase and we're going to have the includes and then we're going to see that if this is included in the search string so we're going to have have the search do to lowercase so I'm going to have the do to lowercase so if this matches then it is going to filter out the results automatically and then we are going to set them to the set search list so I'm going to have the new movile list all right I will save it all right so now we have already done with the home component and in this home we have the two components which will be the movie list and the movie Trend list so now we need to work on the movie list and the movie Trend list so now if go to the the movie list so let's go to the movie list so I'm going to go here I will go here I'm going to go to the movie list and in the movie list what we can do is I can simply have a console. log and I can show the recommend list is and we can just pass the recommend list and for the trend list we can simply have the same thing so that we can see that we are getting the values properly so I'm going to copy this I will go here I'm going to add it here this will be the trend list and this will be the TR friend list now let's go and let's check so I will go back here and we see that there is a problem with the test case so let's go and let's delete the test case File all right so now let's go to the browser and let's check the values of the trending list and the recommend list so if I go to the browser and I see that we have a problem here we see a children here so let's go and check the context API so if I go to the context API and we see that we have a problem here so I'm going to fix this all right I will save it and now if we see then we see that we have the trending list and we also have the recommended list and the values are also here so this is the trending list and this is the recommended list now what we need to do is we just need to create the trending list and the movie list let's go open in the editor and then we will simply go to the movie Trend list so I'm going to write this component and here what we will do first is we are going to have a box we will have the SX and let's have some styling to it so I'm going to have a display and we're going to give the display as as Flex all right then I'm going to give the Gap as two we going to have the Overflow X so let's have the Overflow X and I'm going to have the Overflow X as scroll all right we need to import the box and then inside that we are just simply going to have our trending list so I'm going to have the trending list do map all right and this is going to give me a movie this is going to be an arrow function and then here I'm going to have a grid I will give the item key as movie ID all right and then what we will do is we are going to use a paper for the elevation so let's have the elevation as zero and this is all for the styling we are doing it so we are going to have the SX we are going to give a background so let's have a background color and the background color I'm going to give it as a transparent now I'm going to close this and then we going to have a movie Trend card all right which I'm going to pass the movie to it and then we're going to create a new component which will be the movie Trend card so let me pass the movie here all right so now we have this and if see then this should be of type movie oops movie data and I'm going to have this as and now what we will do is uh we are also going to change the type here because I have given the type as any so we are going to have the movie Trend list props so now we need to create the movie Trend card and the similar thing we can also have it in the movie list so what I will do is I'm simply going to copy this jsx all right and then I'm going to add it here so I will go here and then I'm going to add it here I will save it and here what we have to do is we need to import the box and grid so I'm going to copy I will go here I'm going to add it here now this will get changed to recommended and this will be a movie data type of type array and this will also get changed to movie list props now we have this recommend so I'm going to change this to recommend now this is recommend list we have to change this to recommend list and then we need to have a movie card here so now it's a very similar thing if we go and check let's go and let's see how it looks so we get an error because we don't have the movie card so let's create the component for the movie card so I'm going to create a new folder which will be a movie card all right we have the movie card and inside the movie card what I will do is I'm going to have the index. TSX and the other one will be the movie Trend TSX so I'm going to go here I will have the movie trend. TSX now let's first have the component so I'm going to have the RSC where I'm going to change this to movie card and I'm going to have a movie card here now this movie card is going to give us a prop which will be a movie so let's have a movie here now we need to create an interface for the movie card props so let's have an interface movie card props and this is going going to have a movie and the type will be a movie data type now here what I will do is I'm going to have the movie card prop now I'm going to copy and I'm going to add same thing to the movie Trend I'm going to go to the movie Trend and this is going to have a movie Trend card so let me have the movie Trend card this will be movie Trend card and this will also be a movie Trend card now we can import these two in the list so here we have the movie card so I will have the movie card imported and here also we will have the movie Trend card so let me have the movie Trend card so now these two also working fine now the last thing what we need to do to have something on our UI display is to have the card components so if we go here if we refresh it then we will see that we have these two and we have all the values as well so you will see that there are some values as well so we need to design that so let's go back here so I'm going to go to my Visual Studio code and if we go to the index. PSX let's design the movie card or movie Trend card first okay all right so the first thing what we will do here is that we're going to have a constant and we're going to take the dispatch event because on the movie card a user can toggle The Bookmark so we will have a dispatch patch is equals to the use context and we going to pass the movie context and now what we will do is uh let's create the jsx first so I'm going to remove this and inside this Js X we are going to have the card component of material UI and in this what we will do is we are going to have a key which will be equals to the movie. ID then for the card we going to have an elevation prop which will be zero and then we are going to give a style so let's have a style as background color so I'm going to change this background color all right and we can give the background color as transparent now in the card what we need to do is we are going to have the card content component and let's have a style to that so I'm going to have the style all right and to the style what I will do is I'm going to have the padding as zero I'm going to have the position as relative I will have the Overflow X as scroll all right and then I'm going to have a display Flex so I have the card content as well now inside the card content I'm going to have the image so let me have the image so I'm going to have the image where we are going to give the source source will be from the movie. thumbnail do regular. large we're going to give the all tag so let me have the all tag as empty we're going to give the style so let's have the style as width I'm going to give the width as 300 pixel so now we will be seeing that our movie cards are actually taking some shape and we will be see something nice UI so we going to have the height and let's have the height as 100% we're going to give the Border radius so let's have the Border radius of 8 pixel so I'm going to give the Border radius as 8 all right I'm going to close the image tag now if we go and see let's see what it looks so we see that now it started looking like this we have all the images coming up so let's go and continue to work on the movie card so I will go back here all right we have the image and now below the image what I will do is I'm going to create a box and to the Box what I will do is I'm going to give a position of absolute so let me give an absolute position addtion to the box I'm going to have the top as zero left as zero right as zero and then I'm going to have the bottom as zero so what we are trying to do is if we go here then we are trying to get all this information on the box and we also trying to get the black shade on the image so if we go back here then we don't have the black shade so let's have that black color shade so what I will do is I'm going to give a background property background color and we're going to pass the the background value as rgba so we're going to have the rgba value we're going to pass the value as 0 0 0 so it's a black color and we're going to pass the alpha as 6 and the last property which I want to give is the Border radius let's have some border radius so we will have the Border radius which will be equals to the 8 pixel so this should be 8 pixel so now I have the box as well and we just need to have a layer on it so I'm going to have a self closing tag here now after this what we will do is we are going to use a stack so we're going to have a stack component and we're going to use the margin as six then we are going to have the spacing we're going to have the spacing as zero then we going to have the position we're going to have the position as absolute then we're going to give them a bottom of zero we will have the left as zero we will have the right as zero and we're going to give the padding of four and then inside this we are going to put a grid box so so if we go to the grid box we are going to have the item and then we are going to have our text so I'm going to use the typography for the text and the text will be movie year so let me have a movie do year and I need to give some props to this so what I will do is I'm going to have my font size and the font size will be 10 then I'm going to have the color property and the color would be # e0 e0 e0 all right and then let's have the area label so let's have the area label and I'm going to give the label as year of movie so I misspell the Year let me fix that year of movie so now let's import the grid as well so I'm going to go here and I will have the grid now if you want to see then let's go and let's see now we see that we have the year here now with Year we will also need to have the movie the category and name so let's go and write the jsx for that so we have the typography all right now the next what we will do is we going to have an another grid so what I will do is I'm simply going to copy and I'm going to add it here and then I'm going to change this to box so let me change this to box and to the box I'm going to give some properties so I'm going to have the I'm going to remove this and let me have the SX and let's give some properties so I'm going to give the a width of 1 r m then I'm going to have the height of 1 r m all right then we are going to have have a background and that background will be e0 e0 e0 and then what we will do is we're going to give the Border radius so let's have the Border radius and the Border radius will be full all right we have the box and after the box if we go and check so let's go and let's see if I go here then we have the box now the next we need to do is we need to have the movie and then we will have the category so let's go back I'm going to have copy this and I'm going to add it again here now we will need to have an image so let's have an image tag so what I will do is I'm simply going to copy the image from the above so that I can put it here so I will have the image so I'm going to have the self closing and now we have the image and now this image will be the movie category so let's change this to movie category I will just keep the alt as it is and for the source what I will do is if the movie category is equals to equals to movies then if this is true then I need to have the movies icon and if it's not then I will have the TV oops TV series icon and I will have the all tag and then for the width so I'm going to remove this and I'm going to give a width of 16 and I'm going to have the height of 16 now let's import the movie icon and the TV series icon so I'm going to go here I will have import movie icon movies icon and this will be coming from the dot do slash do do slash we're going to have the assets and inside the assets we're going to have the icons and then we going to have the icon for the movie so we are going to have the category movie now we will also import the other one which is the TV series icon and this will be coming from the do do/ do/ assets then we're going to have the icons we're going to have the icon category TV so we have this now if you want to see then we can go here and we can see that we have the icon as well for the movie so now let's go and let's have the movie rating and the title so I'm going to go back to my visual studio code all right I have the image now I'm going to have the typography so I'm going to copy this and let me add it here and this time the label area will be the movie category so I'm going to have the movie category and this is going to equals to movie category all right now after that we are going to have the same box so that it will create some space between them so I'm going to copy and I'm going to add it here all right and then after that I'm going to have the movie rating so let's copy this and I'm going to have the movie rating this time so this will change to movie rating and this will change to movie rating now we are going to have the title so I'm going to copy and then I'm going to go here and now I will have a title here so let me have the title I will just remove the font size I will keep the color and then I'm going to give the padding so let's have have a padding of zero and I'm going to change this to title let's go and let's check so we see that we have this but these all are one below the other but we want them in a one line so what we can do is we can actually add a grid here so I'm going to close all this grids and we can add a parent grid on the top so I'm going to close them and now what I will do is I'm going to have a grid all right and I'm going to just take this grid and put it here now what we will do is uh we will just add the styling to this grid so I'm going to have a grid here I'm going to have this grid will act as a container I'm going to align all the items in the center so I'm going to have the center and then I'm going to have the spacing as one and now it should look fine so now we see that it looks a little bit similar what we see it here so now the app is taking some shape now the next thing what we need to do is we just have to add this bookmark icon so now let's go back to our Visual Studio code and here what I can do is we can have a box so if I go to the stack we have this stack we will put everything in the card content so I'm going to have the box so I will just copy the box here all right I'm going to remove everything and then we will just have the closing of the box now through this box I'm going to give the styling so let me have the styling and here what I will do is I'm going to give the position as absolute all right and then we are going to give the top as zero left as Z Z right as zero we're going to give a display so let's have a display as Flex oops this is dispatch I'm going to change this to display so this is a display Flex then we're going to have the justify content as Flex end and we're going to have the padding of 16 pixels so let's have the padding of 16 so I'm going to have the padding all right so now we have this box and we have also have the styling to it now what we are going to do is we're going to create and another box and then we are going to have that icon so I'm going to have a box here so I'm going to copy I'm going to have an another box here and to this box what I will do is I'm going just going to give the SX now I'm going to give the padding as one RM then we are going to have the background color and the background color will be black then we are going to give the Border radius and the Border radius will be 100% so we're going to create a circled of it then we're going to have the cursor we're going to have the cursor as pointer and then we're going to have that pseudo property if we hover it then in that case what we want is we want the opacity to be 0.8 all right then we going to give a onclick property and this is going to be equals to an arrow function and we're going to have the handle toggle bookmark and we need to pass the movie ID to it we will write this handle to bookmark function but for now let's complete this all right and here what we will do is I'm going to have the movie. is bookmark if it's true then I need to have the bookmark icon I'm going to have the fill and then I'm going to add the color to this fill so let's add the color which will be e0 e0 e0 all right and if this is not the case then in that case what we have to do is we need to have the bookmark empty IC so we see an error because I added an extra here all right and then in the end we just close the bookmark so here I will have to add this so now if I save it then everything works fine we need to create this handle toggle bookmark so let's create this function so I'm going to go on the top all right uh and on the top what I will do is I'm going to have the constant handle toggle bookmark and this is going to be an arrow function so it is going to take an string which will be the movie ID and the will be an arrow function and here what we will do is we are just going to use the dispatch and we are going to pass the type first so let's have the type and the type will be toggle book Mark and then we're going to pass the ID so let's have the ID oops ID here so we have this now if we go and check so let's go back here and if we check then we can see that we can now toggle it all right now we need to do a very similar for the recommended for you now let's work on this recommended for you so I'm going to go to the Visual Studio code and in the visual studio code uh we have this recommended list so let's go to the recommended list uh I'm going to go to the recommended list and in the recommended list we will go to the movie card so let's go to the movie card so we need to work on this movie card now all right so what we can do is we can simply copy few stuff from here so I'm going to go here and I'm going to copy all this stuff we will have the very similar thing so copy and I'm going to add it here all right we will also need to have the I'm going to copy and will also add it here all right now let's add the jsx part so what I will do is I'm going to change this and I'm going to add the jsx here now the first we need to add the card let's have the variant all right and the variant would be the outline so I'm going to have the value as outline and then we're going to have the SX and then let's add some properties on that we're going to have the background color so the background color would be transparent then we are going to have the color we're going to give the color as # e0 e0 e0 then we going to have the margin for the Y which is going to be three and then we're going to have the Border as none so let's have the border and we're going to have it as none next what we need to do is we have the card and then we need to create the card content all right so now let's create the card content and for the card content what I will do is I'm going to have the card content all right I'm going to have the SX and I'm going to have the property we're going to have the padding as zero and then we are going to have the position so let me have the position as relative so I'm going to have the position relative now inside the card content we are going to have the grid so let me have the grid and to the grid I'm going to use it as a container and I'm going to have the spacing as one inside the grid we need to have a grid item for the image so I'm going to have the grid I will have the item then I'm going to have the image I will use the image source and the image source will be movie do thumbnail do regular. large I'm going to have the alt tag and I'm going to have the style so let me have some style to the image so I'm going to have the width as 400 pixel then I'm going to have the height so let me have the height as 180 pixel then I'm going to have the Border radius so this will be a border radius and I'm going to have the Border radius as 8 pixel so we will have the image and once we have the image we will also need to have the text so what I will do is I will have this grid and below this grid we are going to create another grid all right and for this grid uh I will have it as an item I will use for the extra small I'm going to have it as eight all right and now on this grid I'm going to create another grid which will be a container type so let me have a type container all right and I'm going to give the spacing as one and then we're going to have align the items as Center so align item and I'm going to have the at center now this grid is basically for the text so if we go if we save it and in below the recommended we have this this one is in another grid that we are now creating so we have this grid and on this what we need to do is first we are going to have the movie ear all right so let me go back here I'm going to just fetch it from the movie ear so I will go and I'm going to have this movie ear so I'm going to copy I'm going to go here and I'm going to add it a movie here then if I go back here then we are going to have the grid for the spacing so I'm going to copy this grid item and I'm going to add it here so this one is here I'm going to add it here we will have the box where we're going to have the width as 4 pixel height as 4 pixel we're going to have the background color so let me change this property to background all right and this background will be BD BD b d and Border radius as 50% all right then we have the movie category and I'm going to copy this so we will have the movie category so we need to have the movie icons and TV series icons so let's copy it from here I'm going to copy or maybe I will also copy these two because we will also need to add that so I'm going to copy and I'm going to add everything here so now this is more kind of reputation uh but there's slight change in The Styling so now I'm going to copy again the grid box and then I'm going to copy the rating and then I will have the title all right I have the typography for the category then I have a grid and then I'm going to add the grid again all right and now let's see how it looks so if we go here then we see that we have 2019 we have the movie e and then we have this text all right and now if we go here then we see that we have this here but we see that there is a problem with the dots in our case the dots are on the upper side so let's go and let's fix them and we will also just copy the bookmark icon which is very similar so what I will do is I'm going to go here and we have the card content and then we have a grid all right and here we are going to have a bookmark icon all right all right I will save it and now we can see that we have the bookmark icon here the only problem we see is with the dots so let's fix that dot so if I scroll down then we see that we have a height of 4 pixel we see a width of 4 pixel we see a background and then we see a border radius of 50% so we can fix this by changing this to align items center now if we go back here then we should be able to see that we have it in the center all right so now the recommended is also working now we can also work a similar ways now if we see on the search then let's have the search then we see that we have this found so now let's fix this found all right so what we are going to do is if I go to the home and I have added a found here so I'm going to make some changes here so what I will do is I'm going to have the found and and then here I will have the search list do length all right and I'm going to have the found results for all right I'm going to have the search and then here I'm going to have the value now let's go and let's check so found 18 results for Dr so we see that our search is not working and we don't see the results so let's fix that so what I will do is uh let's go back here and then when we have this in this case what we need to do is we will also need to have the movie list so we missed that movie list so I'm going to have the movie list recommended and we're going to have the search list here all right and now let's give a try so I'm going to go back here I will refresh it so if I do a search then we see that we have three results so now our home is working fine now we can use a very similar for our movies and for our TV series so what I'm going to do is let's do a copy paste of home on our movies so I'm going to go to the visual studio code all right so I will go here and I'm going to copy this ho so let me copy the jsx from the layout so I'm going to go here and I'm going to copy I will go to the movies so let me go to the movies all right I'm going to go here and I will add it here now we need to have a lot of different things here so what I will do is I'm going to go here and we will also need to have the state and all the stuff so I'm going to have this all right so I'm going to copy and I will also add them here then we will also need the handle search so I'm going to go here and I'm going to copy the handle search so let me copy and I'm going to add the handle search as well so now let's import some stuff so I'm going to go here and we need to import these couple of steps from here so I'm going to copy and then I'm going to add it here so I have added everything and now we should be able to see so I don't want this friending list I'm going to remove it and rest I'm going to keep it as it is all right so we will have a similar search on the movies as well and then what we will do is we are going to have a search equal to empty then in that case we are going to have a box and I'm just going to remove this box and I will also remove this and instead of this I'm going to have the movies here so let me have the movies and then we're going to keep the styling as it is then we're going to have the movie We're going to have the recommended list and here what we will do is we're going to have the search if the search is equals to empty right then in that case give me the movies so give me the movies otherwise give me the search list so I'm going to have the search list all right and in this case if it's the empty then we going to have a very similar and we're going to have the search list so I'm going to save it now let's go and let's check so if I go and if I click on the drive and I'm going to zoom a little bit then if I go to movies then we see that we have the movies if I go to home then we see we have home if I go to movies we see that we have the movies now we can also do for the TV series and bookmarks so let's go back so now everything is little bit very similar we don't have to do much about it so what I will do is I'm going to copy the whole function from here and I will copy till here okay now I will go to the TV series so let me go to the TV series all right I'm going to change this all right now we need to import so let's do the import so I'm going to go here and I'm going to copy this and I will import it in the TV series now in the TV series what we have to do is uh we will have a very similar search we will have the search list we will have the state we will also have the movies but now we will also need to have the TV series so what we will do is I'm going to create a constant for the TV series and I will just filter out those results so I'm going to have the movies filter all right and in this I will have the movie and here what I will do is I will have the movie do category and this should be equals to TV series so I will have the TV series all right so this is going to give me the TV series and then what we will do is we will have the search functionality as it is and then we will have that if this search is equals to this will now change to TV series and now we will have the movie list we are going to change this to TV series so let me have the TV series here and then everything will be the same now let's go back and check so now if I go to TV series we see that we have the TV series if I go to movies we see that we have the movies all right so now we have also done the TV series and the last part we will do for the bookmark so let's go to the bookmark and for the bookmark also we will have a very similar because we have a flag is bookmark and we will just filter out the results based on that flag so what I will do is I'm going to copy the TV cies stuff so I will copy everything so let's go and copy all right now I'm going to paste everything in the bookmark all right I will copy all the Imports I will go to the bookmark I will add it here and now what we need to do is we just need to change few stuffs so I will go here and I will change this to bookmark first so this will now become the bookmarks so movies filter we get individual movie and where we have the item or the movie what we will do is we are simply going to have the movie dot is bookmark so we will take this bookmark now and we will just add the bookmark so I'm going to go here and we will have the bookmark so the recommended list will be the bookmark so I'm going to have the bookmark all right and then we will have the search results so now let's go back and let's test everything so if I go to uh let me go to drive and if I go to TV series I see all the TV series if I go to bookmark I see all the bookmarks okay we see that we have a sample which is an additional so we are just going to remove that because we don't want it and it goes to the error so we don't want that so let's go to our Visual Studio code and I'm just going to remove it now we see see that if I go to movies I can see the movies TV series and bookmarks we can also see that if I want to see it in a tablet then I will click on the tablet and I will get a tablet view so where I can see that this is the tablet and here we have all the list we can also see it on the mobile and we see that the view gets changed on the mobile so we have all the three views and now on this tool we can also see the source code so if we want to see the source code we can go to the edit we can click here and we can see our app source code so this is the complete source code we can open any of the file and we will see the file is loaded here we can also push the code directly to the GitHub so if I go and click here then this is going to give me all the changes that are made on the files so these are all the changes so now let's go back to the app and that's all I have in this video I hope you like the video a thumbs up is appreciated it was a long video but we did a lot of things we implemented a lot of pages with material UI as a sing and then we build a react typescript project so I hope you like the video a thumbs up is appreciated you can also connect with me via Facebook or Instagram you can follow me on Twitter for latest update and before you go don't forget to subscribe the channel and press the Bell icon so that you don't miss the videos like this one thank you thanks for watching

Channel: Dipesh Malvia

Views: 5,288

Keywords: react tutorial, react, react js, react typescript project, react material ui typescript, react typescript tutorial, react typescript, react typescript movie app, build typescript project, typescript context provider, context api react, mui crash course, react material ui, learn material ui react, build typescript react app, react tutorial for beginners, learn react, react typescript for beginners, react js in 90 minutes, movie tv series app in react, movie app clone react js

Id: uGnh1NnlEbQ

Length: 92min 5sec (5525 seconds)

Published: Tue Nov 21 2023