React Movie Rating App - Code and Deploy React Intermediate Project

hey guys how's it going I'm back here with  another video and today I'm going to be coding   and deploying a really nice application that you  can put in your portfolio if you're interested   in doing that uh and the application will be  consisting of a website where you can log in it   will utilize one of the most sophisticated movie  apis out there which is Free by the way and I'll   have the link for it in the description and you  will be able to see a list of a bunch of movies   that are really popular in the moment you'll be  able to to see information about those movies   and not only that but also be able to rate them  and have those ratings affect the movie ratings   in real life then you'll be able to also interact  with the movie and see all the movies you've rated   before uh it is a really nice website uh and  I think the text te chosen for this video is   really useful because it follows all the standards  that I know to be true and use in the industry and   I'm going to be showing you guys every step along  the way so um before we get into the video I want   to give a little bit of of a demo to what we're  building so that you guys can also decide now if   you guys want to build this or not right so what  we have over here is the application when you   hav it logged in and we're going to be using um a  guest login which all it consists of is basically   just clicking on logging in and it will log us  into the application as you can see so when we   click log in it actually creates a session for us  and as I refresh the page you'll see I'm I'm still   logged in right if I want to log out I'll click  over here but basically what this project consists   of is we can see that on the homepage we have here  a really nice UI displaying a bunch of popular   movies at in the moment um so if you if you're in  the future those Mo those movies are probably not   popular uh by the time you're watching this but as  of right now this are the most popular movies that   are out there right now uh and not only that but  you can also click on TV shows and see all the TV   shows that are popular in the moment for each of  them you can see um information about it such as   like the release date their current rating um also  a brief description of them and you can actually   click on the movie and see more information you  can see their MDB ID you can see their Jas you   can see their budget you can see a bunch of stuff  about them um obviously this is also this project   will be fully customizable for all of you guys  because you don't Pro you probably don't want   to just copy exactly what I build you probably  want to manipulate it a bit so that you make it   the way you want it to be so um this is where what  I find interesting about this project as a whole   but you can do the same thing with um TV shows as  you can see and TV shows is actually a little bit   different you have like uh a list of the seasons  and how many episodes each of the seasons have   so I can just click here uh this one actually oh  it's a movie let me click on a TV show uh I don't   know I'll click on this some of the TV shows to be  honest I've never heard of in my life like look at   this this has like over over 200 Seasons uh which  is crazy but yeah it's it's I like the UI of this   um we've been using semantic UI for everything and  you can also one of the coolest Parts is you can   actually uh rate a movie so we have here Mission  Impossible if I want to give a movie a rating of   eight I'll put eight and I'll click rate and  you should see that the rating was successful   how do we check if it was successful well we go  to the rated page and it shows both TV shows and   movies that we've rated and right now we only  have the U Mission impossible as the movie but   we can actually rate Five Nights Freddy's with a  seven and let me rate also a TV show here so you   guys can see I already lowkey as a nine and  we can see that now they appear in this list   as well and this isn't locally this is actually  using the API that we're going to be presenting   in this video also at the end of the video we're  going to be deploying all of this using one of the   best platforms out there for hosting also known as  hostinger I've used them a bunch of times by now   and you guys probably heard of me talking about  them because I really like their service and in   the end of the video I'll show you guys exactly  what you guys can do to deploy this application   and take advantage of their really nice promotion  for Black Friday so with that in mind before we   get into the video if you could leave a like  And subscribe I would massively appreciate and   let's get into the [Music] [Applause] [Music]  [Applause] tutorial okay everyone so before we   actually start writing code I want to set up our  environment so that later on when we deploy our   application we already have everything done and we  can just really quickly deploy it so in this video   we're going to be using hostinger as a platform to  deploy our application if you've been watching my   videos for a while now you know how much I enjoy  hostinger I have countless projects deployed at   there because I really like the service that  they provide and especially now with the new   features that they've added to the platform  I believe it is without a doubt one of the   most complete Services out there for deploying any  application as you can see over here here whenever   you create an account and purchase one of their  premium plans you get a lot of things together   with just deploying your website they allow you to  they gave you a completely free domain which I've   shown to you guys and I will be showing in this  video we going to actually get a domain for this   um they also give you free website migration and  they have a really really good customer support   and they're also currently running a really good  Black Friday deal where depending on when you're   watching this video the price might be a little  bit different but as you can see as of right   now um it is costing only $249 per month plus  an additional two months free to actually get   all of the features that I'm going to be showing  to you guys in this video but the craziest thing   is that between the days of November 20th and  December 3rd this price will actually get even   cheaper to $1.99 per month and the deals are not  just for the premium plans which this one is in   reference to it's also for the business plan which  is actually going to be between the October 30th   and December 3rd as well it's going to be around  $349 per month now in this video we're going to   actually be using the Premium plan and in order  to actually do that you can see they have a a   bunch of the different hosting plans that you can  actually work with uh but the one that I want to   work with is this one over here the Premium plan  you can obviously look uh but I would just want to   to specifically notify those things uh one thing  that the the the premium fe uh plan doesn't have   that the business plan has is the fact that um  on the business plan it it actually comes with   a completely free CDN and for those who don't know  CDN basically stands for Content delivery network   uh you can actually use a CDN to enhance your  website's performance by up to 40% since it will   basically geographically distribute the network  of proxy servers so that it will load your website   depending on which location you're in and thus  ensuring that your website has high availability   performance and resilience against things like  DDOS attacks and such so it is a really good   thing to have and we actually also have hostinger  was really nice to set us up with a business plan   as well not only that but uh I believe recently  um as you can see over here I searched uh for the   premium for the business and the cloud startup  plans uh they provide you with 200 gigabytes   of nvme storage which uh for those who don't know  utilizing a server that uses only nvme technology   which basically stands for a nonvolatile Memory  Express you will see significant improves in the   website's operational performance so it basically  will just help the performance of your website so   that's why I think also the business plan might  actually surpass the premium one um if you are   interested in using something like this and one  final thing I see here that is actually kind of   interesting is depending on which plan you get  uh especially with the premium and the and the   cloud startup one uh you actually get uh daily  backups which is crazy as you can see uh this   even has a value of $25 so by just pending like  $1 more a month uh you can get $25 back in value   um uh and I honestly think that this can help  you a lot you can see that it will basically   protect your website and it seems like at least  in this case um daily backups are St for 7 days   and weekly backups are sted for 7 weeks so I'm  actually just going to show you guys really quick   how you would uh do this um you would click add  to C to whichever plan you're interested in then   you would come to this page uh you would again  choose the period in which you want this plan   for you can actually just have it for 1 month you  can have it for 12 months 24 months the price you   saw in the beginning is for 48 months because  if you're going to deploy a website and you   believe your website will be up for 2 years  for example you can save a lot of money by   getting the two-year plan first obviously so with  this kind of stuff I would say not to cheap out   because unless you're 100% certain you're not  going to deploy this website uh I would say to   stick with the 48-month plan because you actually  save money on the long run so then what you have   to do is log in with your account I already have  mine so I'm going to click on Google and just log in okay as you can see I just logged in and we can  see here we can choose a bunch of different types   of payment ments we have all of our discounts  right over here which is pretty good we can   choose PayPal we can choose Google pay they even  have alipe and coin gate which is really really   nice uh but by the way this this info here is not  actual info for me uh but you would come here and   put your address your city um whatever everything  that you need you get the 75% off which saves US   $500 which is crazy um and the total would end  up being just $178 for two years of free hosting   which is really nice but if you want to save even  more you can come over here and just put the code   Pedro Tech and click apply and you'll see that  not only you get all of the discounts I just told   you but you get also an additional uh discount  with my my code so don't forget to put this when   you're actually purchasing then obviously you put  the information for your card or whatever Payment   Processing or whatever payment provider choose uh  and then click on submit secure payment and that's   basically how you purchase your plan and after  you're done purchasing your plan you're going   to see that you have access now to the H panel  of hostinger now I have this over here I have   two one um a free business hosting and One Premium  web hosting but for now we're going to leave them   uh for the end of the video where I show you guys  how to set up and actually deploy all we're going   to do now is actually just claim our free domain  so to do that you can actually just click on claim   domain this should be here if you purchased a  plan that gives you a domain and you can just   put the domain name I'm also going to choose Doom  because I think websites with.com tend to have   a more an added value of trust because it is the  most commonly used uh domain extensions out there   um but the name of this website will be something  I'll just call it patro tag movies something like   that obviously this is a a fake website that  I'm creating but I would recommend choosing your   domain name better than what I'm doing because  um it is the domain name that you're going to be   using later on I'm going to check for availability  obviously I doubt there's a website with this name   so you see we get it for free you can just claim  the domain and just like that we finished the   domain registration we just click on this button  and as you can see uh after this is complete we'll   have everything done and so it is done so I'm just  going to click continue and we'll actually start   writing the code for our video okay everyone now  let's start writing the code for this video so   like I said we're going to be using the following  text te we're going to be uh creating our app   using v um first of all then for UI we're going  to be using a really interesting Library called   semantic UI now again you don't have to follow  the UI that I'm going to be making in this video   usually I don't even include UI UI in my video  because I don't I don't like doing that the focus   is the functionality however I like semantic UI  especially for projects like this where it isn't   a very Advanced project but is also not a very  beginner project and I think that it adds a lot   to the project so if you want to follow along and  also install somei feel free to do so but if you   don't you will still be able to follow the video  now we're also going to be fetching data by using   react query which is one of the best providers out  there and obviously as a language we're going to   be using typescript and yeah I think that's pretty  much the text T we're going to be using so let's   start off by just creating our app I'm going to be  using yarn but you can use npm if you want to um   to create a vit app I just say yarn create V and  um as you can see it will ask us some questions   I'm want to create the app right inside of this  directory so I'll put a dot press enter and I   also want to choose react because obviously we're  building a project in react then there's a couple   options over here I'm not going to be using S swc  uh I'm going to be using just typescript so that's   pretty much it it created all the files however it  hasn't installed any of the necessary stuff that   we need for this project to do that I need to run  Yorn now that that's done let's run YN Dev and oh   I wrote it wrong so YN Dev and hopefully as you  can see it should open on the port 5173 we press   enter and this is the app that we have it's a  simple borderer plate um page that comes when   you run um the command that we have so what we do  now is we want to kind of structure our project   so I want to first of all delete the assets folder  because we're not going to be using it then I also   want to create a couple more folders I want to  create the components folder that will be used   for any components that we need to create that  will be shared between multiple other components   and Pages then we want to create the pages folder  um which will contain all the different pages we   have in our application and then inside of the  pages folder we will create a couple different   pages that we're going to have in our app  for example we're going to have the off page   where we're going to be able to log in to the app  we're also going to have the homepage um which we   obviously we justay display the movies and the TV  shows that we can rate and then we're also going   to have a page page called rated because if you  recall in the demo we have a page which displays   all the movies we've previously rated right so  those are primarily the pages that we want um we   can make any changes later if necessary now over  here in our um app. TSX we want to clean this up   a bit because it obviously includes a bunch of  logic that uh comes with the boiler plate code   so I want to delete all of this um save it delete  delete all of the Imports as well and just save   it like this now obviously this means that it's  completely empty um but that's completely fine I   also want to make some changes to the initial CSS  the reason for that is because um as we progress   uh I don't want that CSS to um affect the UI of  how we want things to look so I'm going to make   some changes firstly on the index. CSS file I  want to delete everything over here that isn't   The Styling add added to the root and in The  Styling I want to delete the background color   uh so now it will look like this but um it will  obviously change in a second so then we want to   come to our app.css and we also want to delete  some of the stuff that is initially here for   example I want to delete everything below the  roots because again that was all part of the   boiler plate code that we don't actually need so  as you can see over here again continue looking   exactly the same so there wasn't a lot that we  could we we saw it right now however ever um it   would have affected as we progressed now let's  start installing some of the stuff that we need   in this project so I'll open up a new terminal  over here and we'll run the following command   I want to install first of all the react router  Dom package which will allow us to create routes   in our application and navigate through them then  we also want to install semantic uh semantic UI   react which will will be used to obviously create  a UI for our project and then I want to install   uh the package at 10stack SL react query which  will be used to fetch data so I'll press enter   and all of this should be installed and in order  to uh start our project we're actually going to   start by just setting up all the stuff related  to uh react Ron so that means that up here in   our project in our app. TSX which is the almost  the root of our app we're going to have to import   some stuff from react router D so like this what  we're going to install is first we want to import   the browser router and call it router uh this will  be a component that will basically allow us to   determine that we have routes in our application  then we need a component called routes which will   signal react R Dom where our route definitions  will be and and then we need our route component   to create uh said route definition it will become  clearer and if you've never worked with react C I   would recommend brushing it uh through a project  before this because um it is a very basic concept   in react and I have a bunch of videos on it  already but I will also explain it in this video   uh the main thing I want to do here is I want to  First create a div which uh will serve as the div   encompassing our whole app and then inside of  here will'll first tell react that we need a   router in this app we need some routes in this app  and then inside of this thing we'll put the routes   component to determine that inside of this we'll  have routes definitions and we'll start with the   most basic route definition which will be uh a  route and we'll put the path which is an empty   slash meaning it's home and we will determine  an element which is equal to the simple H1 tag   over here now what does this mean well if we go  into our project this will basically mean that if   you are in the route equal to an mty slash which  is the entry point of your url you will display   whatever component or whatever jsx you put inside  of the element portion so if I went to something   else like uh I don't know rated you'll see that  it doesn't show that anymore because it doesn't   match the correct URL so we'll do the same thing  for all the other routs we need we need one for o   we need one for rated and uh this will obviously  serve as a home one so for now we'll keep it like   that so for o we'll change the path to O and for  rated we'll change the path to rated here for now   we'll just write off and here for now we'll just  write rated page obviously here uh we don't have   any way to navigate through the pages so we'll  start by creating our first component which will   will be our nvar so over here I'll create a nvb  bar. TSX file and simply I'll create a component   by saying const nvar equals to uh this definition  of component and we'll just export it over here   at the top now we want to start using some of  that semantic UI stuff I mentioned to you guys   in the beginning now semantic UI allows us to have  something similar to material UI where we're able   to have pre-made components that allow us to  uh just use their components and not have to   actually write our styling that's pretty good for  projects like this where we really don't care if   our styling looks very similar to other projects  using centic Qi but at the same time we want to   generate a good-looking website quickly so to  use cement AI we've installed it already but   we actually want to come to the root entry of our  application which is the main. TSX file and over   here we want to import uh the following CSS file  we'll import semantic UI react uh no semantic UIC   CSS semantic min. CSS just like this and you'll  see that here it says that there's an error and   it's because when we installed centic Qi we  actually had to install uh centic Qi CSS as   well I just forgot to do that so we'll just say  you an add centic qy CSS and and you'll see that   if I save this uh it and refresh this it should  work now let's go to our Navar and over here we   will start implementing it so the first thing I  want in this Navar is I want to use uh the menu   component from uh centic UI react and the menu  component is really cool look what it will do   it basically allow us to just set up kind of a  cool looking nabard in our app literally I'll   just put here return uh menu and we want this  nav board to be fixed at the top so we can just   put a prop called fixed and say top and we also  want it to be very big so I'm going to say size   equals to huge uh I like how sqi is very like  literal with how you determine your styling but   then inside of here we're going to basically set  up the links so inside of this menu we'll have a   menu another menu right and inside of this other  menu we're going to put two links and the reason   why we're creating this menu inside of another  menu is because I want in our neore to have two   uh links on the left and I have the o link at the  right uh so I need to separate them and styling   wise this is how you would do it you would come  over here and put that the position of this is at   the right because you can only put positioning um  on this component and then inside of here we we'll   put an item or a menu. item which will contain  the link text called o and it will uh have the   following properties we want to First say that  this menu item will act as if it is a react rdom   link so if you've ever used react rdom you know  that you can navigate throughout Pages by using   a link and a link is like a a um an a tag like any  URL link that you can click and go to a page but   it is built by react rerd and it follows the  functionality just like react Rd one22 so if   I say that this should act like a link it knows  that when you click on it it should bring you to   the following page and it will import all the  props that this component uh requires so that   you can also use it in the menu. item so one of  the props that reactor adom link has is the two   property which you can just determine where  you want to go if you click on this link so   I'm going to say I want to go to uh the off page  if you click on this now we can see it right now   because I actually haven't imported this uh into  our page but I'm going to do it right now I'm   going to come over here at the top and import from  uh SL components slnv bar and I want to import the   Navar now we want to put this Navar in a place  such that it is inside of this router because   it uses a link uh to navigate so it has any like  any component that uses react Dom uh components   needs to be inside of this router so we need to  put it inside of the router but above the routes   because it can't be inside of the routes because  it's not a route so we'll put it right over here   and we'll save this and you should see kind of the  structure of it already and you see that the off   button is over here and if I click on it it will  bring us to the off page and the off page shows   the off text so it's looking pretty good but we  haven't added the other links yet so in our nfb   over here I also want to change some stuff like  change the styling a bit of this link uh the only   thing I want to do really is just give it um a  font size to it so I'll say style and give a font size uh of 1.5 Ram so 1.5 RAM and I want it to  look similar to this it's a little bit bigger   than what it was before and I like it more like  this so now what I want to do is I want to create   the other two links so to do that we'll get out  of the inner menu and we'll actually put the other   menu items outside of it so we say menu item and  we'll put the first one which will be the homepage   and obviously it will contain all of the same uh  props as this one over here but obviously this   will change to just an empty slash to go to the  homepage and we'll do the exact same thing with   the rated we'll say rated and we'll put here the  rated page and you should see that now what we   have is uh looks weird because it's it looks like  all of them are in the right but they they will   be to the left the reason why they're currently  to the right is because I should actually put   the this two before uh this one so that they're  not pushed as you can see so the off is to the   right because it's actually after but this two  are to the left because they're before uh this   menu pushes all the elements to the right so we  have our cool looking nare right here and I can   navigate through all of the components as you can  see by just clicking on the links so it's already   looking kind of nice but what are we supposed  to do well we're going to be using an API like   I said and this API is really really cool and  the API I'm talking about is called the movie   database. org now I'm not sponsored by this API  like you know this video is sponsored actually by   hostinger and this API is just one that I found  online and I tried it out and I actually really   enjoyed it again it's completely free I'm sure  you can pay to maybe get a lot more uh requests   but as far as I've worked with it it hasn't been  paid at all and I think they have a really good   pricing system uh you can check them out I'll  obviously put the link in the description but   this API is really cool because it allows you to  see a lot of data as you can see over here in the   documentation there's a lot that you can actually  get uh there's a lot of endpoints and they have   really cool explanations to all of them so even if  you uh build a project like I'm building exactly   step by step you can add more stuff and more  features um as you progress because you'll have   the option to and you can actually make your  project a little bit more complicated and more   complex uh which is really cool now the way we do  this is I want you to create an account with this   and I want you to request so what I want you to  do is I want you to create an account with this   I'm going to show you uh kind of how to build how  to create that account and the steps you need to   take but obviously I already have an account so I  don't have to do that but follow as I show you I   want you to go to the sign up part and I want you  to put different um usernames I'm going to create   a fake one here right put a password then put  another password and then put your email now when   you create your account it's going to uh obviously  um verify through your email so I recommend you   doing so and when you're done activating your  account you can just log in with the password   that you created so I'll put here the password  for this new account that I just created and you   should go into uh this page now in order to be  able to get your API key that you're going to be   using in this project you need to click on more  and then go to API here you'll see that it will   ask what kind of API key we want to register  for obviously we are a developer we're not a   professional company so we'll click on developer  uh it will ask us to read the terms of use um   read it if you're interested and then click accept  then you need to kind of give a brief explanation   of what your project is it's really quick I'm just  going to put here website I'll give it a name cool project uh it doesn't have to be a real uh URL  so I'm going to put not applicable um this is a   personal project I am working on to the just test  the API then you put your name your last name your   phone number and all of this stuff and when you  click submit uh this is what you're going to get   you're going to get your API key and you're going  to get your API re read access token so you need   this information and I recommend you uh to save  this information um somewhere safe I already have   it like I said uh from my other account so uh  I'm not going to be using this one but please   keep this in somewh safe because we're actually  going to be using it in our code now that you're   done creating your account we can actually start  using the API so what we want to do is we want to   start our app by just allowing the user to uh log  into an account and in this API you can actually   create accounts using usernames and passwords  and all that stuff but you can also log in as   a guest session and a guest session allows you  to uh do less stuff uh but it's a lot easier to   set up because you don't need to ask a user for  a password and a username so I thought it would   be more fit for this video um but if you want to  authenticate using the other methods you can do   so as well so to do this I'm going to create an  index. txx file in our off folder every single   component or page that we're going to create  inside of a folder will be called index. CSX but   the name of the file of the folder will be what we  will use to recognize what this component is about   if you've never seen this style of organization  I've used it in a bunch of my videos and I've   used it in a bunch of different companies as well  it's a really nice style in my opinion uh you just   come here in every single folder you create a file  called index uh because then you can just organize   it in a simple way and you use the name of the  folder as the identifier but let's start with the   O right because that's the one we're we're working  on so here I'll say export const o and create the   component inside of this component we want to add  some styling to it now we'll import here at the   top from semantic UI we'll import the following  things we'll import from semantic UI react and   the the components we want to import is first  of all a grid then a header then a form then a   segment and then a button now you obviously don't  know what any of them are if you've never used   semantic UI but I'll explain it right now so I'm  going to return uh the following UI first we'll   return a grid and a grid will allow us to have  some sort of uh structure to our project so this   is actually the props I want to put to this grid  I want to align all the text to the center and I   want to align this vertically in the middle of our  page so that we can actually just have it right in   the middle like you saw in the demo and the style  I want to actually make it 100 VH VH is just the   vertical height of the browser or your computer  so um we just wanted to make it full screen and   Center it directly in the middle then we're going  to close this grid and we're going to add a column   to this grid we're going to say grid column and  we will add a Max width of 450 so that it's it's   not that big it's right in the middle and it has  kind of like a box for us to log in inside of this   grid column We'll add the header which is just  like a normal header tag in normal HTML uh we can   actually specify how we want this header to look  like especially size-wise uh I want it to be kind   of like an H2 tag so I'm going to say I want this  to be as an H2 tag we can give a color to it and   I want the color to be Violet because it's a cool  color uh that cqi has you should look by the way   if you want to change the color all the colors  that they have and you can check that out by   clicking on this and clicking on cemented colors  and checking all the options but that's beyond the   point um then we want to align this text in the  middle so we're going to say text align Center   and over here we're going to say something like  welcome uh login by registering uh as a guest   below like this and we should see that this is  what appears but it isn't now the reason why it   isn't is because we haven't imported the off page  into our actual route definition currently we're   just showing this thing so we'll remove this and  we'll put the O component over here and we will   obviously import this comp comped into this page  now we should see the text and everything centered   perfectly in the middle of the screen based on  the UI that we defined in our page then I want   to add a form because uh we're going to be using  this form to actually log in now the form we want   to size it um to be large um just like this and  then we also want to create a segment that is   stacked now a segment if you're not familiar with  it is just an component that is used to create a   grouping of different related content so in our  case we literally just want to put a button inside   of here like this and we'll put a text called  login uh for the button now this is how it is   looking uh let's make it look a little bit better  uh let's put a colar for this to be Violet and I   also want the size to be large and I want it to  be fluid so that it adapts to its parent so you   can see it looks a little bit better now uh we  also want to be able to click on this uh button   and we will call a function called handle login  which we'll create right now so handle login uh   and this function will be used to actually log in  the user now how are we going to log in this user   well to do that we want to make a call to the API  there's an endpoint in the API that we can make   to actually log in as a guest session now I'm not  going to be showing the docs but you can check it   you can check it out I'm just going to be giving  you guys the API endpoints straight up and you can   just copy and paste it uh to your project now the  way I want to do this is as follows I want to use   something called react query now react query is  really interesting because it facilitates a lot   of the process for uh fact ing data obviously  we still have to fetch the data manually using   something like ause or just a normal fetch API  however react query will handle all of the other   extra stuff that we would have to handle ourselves  like being able to uh fetch the data on render ref   fetching the data if we want to handling if the  data is loading or if there was an error and much   more I have a full video on react query and why  it's super cool and really really useful if you   want to check that out feel free to do so but I'm  not going to spend that much time just going over   all the details of rqu in this video we're just  going to be using it because it is a powerful   tool to do so uh since we already installed rare  query we need to actually set it up in our project   by coming to the main. TSX file now the reason  why we need to come here is because react query   will need um to do some context management so we  need to actually wrap our whole project around a   provider that comes from react query so to do  that I'll import from from at 10stack react   query and I want to import a query client and  a query client provider just like this now the   query client we'll just Define it by saying query  client uh is equal to new query client and then   we'll just wrap our app around with the provider  so query client provider and over over here we'll   put the client and we'll pass in the C client and  the app will go inside now if you're confused by   this don't worry uh this isn't that important it  just means that uh in order for react query to   work inside of our app we have to wrap our whole  app around with this provider that's it we're not   going to be touching on this anymore now let's  go back to our index. TSX here we want to make   what is known as a mutation so in react query we  have two two types of not just inquery but in a   lot of different Technologies we have two types  of actions that we can make towards data we can   either query data or we can mutate data querying  means getting the data right if you think about   it as crud it means fetching data so you can get  into your client and you can display it to the   users and mutating includes all of the other stuff  that involves changing the data like adding new   data deleting data and updating data so in this  case we want to create a new user so this is a   mutation so in react query I'm going to import a  hook called uh the use mutation hook which will   be really useful for us so I'm going to say use  mutation over here we're going to put um a const   that will be called equal to the use mutation  and all we have to do here is we actually have   to pass in two things into the used mutation hook  we need to pass uh first of all a mutation key so   that react query can uh keep track of what this  data is represented as so we're going to call it   uh login like this and we can put multiple Keys  that's why it's an array but we're just going to   use one and we need to put a mutation function now  a mutation function is just a function that will   return the data for us now this is where we're  going to put the fetching logic of the data so   what we want is to actually create another file  where we're going to create that function let's   call it mutation. TS now in this file we want to  create a function called mutation login something   like this and it will be an asynchronous function  um just like this uh I'm having TR trouble typing   today um but inside of this function uh wait why  did you use that that syntax but yeah uh inside of   the function we want to First fetch the data from  the API so we're going to say conz equals to await   Fetch and then by the way if you see AO completing  is because I do have GitHub copilot but I'm not   using it that much in the video so that you guys  can obviously see me writing the code but I hope   it's not that distracting but inside of here I  want to put the following URL this over here is   the endpoint in the movie database API that we're  using that allows us to create a login as a guest   so this is going to return back a guest session  ID that we're going to then store inside of our   project and use it to make API requests to keep us  logged in so in order to log in we'll just fetch   this data and we also have to pass in some headers  so that we can uh identify to the API that we've   actually created an account with the API uh we  have authenticated ourselves all that stuff that   we did in the beginning of the video If you recall  uh they give us two things they give us a bearer   authentication token and a API key now we want to  use in this one the token and if you're confused   on where to get that you can actually come to the  docs and they'll actually show you your token when   you go to any of the end points uh they will  actually show you over here at the top so if   you see here the example requests they'll have  something like this right uh Au authorization   and a string this is what you actually want to  put inside of your API requests inside of your   headers you want to specify an authorization token  just like this and this is how it's going to look   and if we don't put this uh the movie database  API will think that we're just a random person   making a request to their API and won't allow  us to do so so we do have to authenticate our   requests by doing this thing so now we'll get  back this response let's check to see what this   response says uh for now right so we'll actually  uh return this res. Json right we obviously want   to convert this into Json but before we return  we'll conso log the response I should say r.   Json again so we can actually see the response  and um over here I'll just import the mutation   login function and pass it over here now for now  let's just import the data that we get back from   this mutation uh but let's try to actually log in  and see what happens in our request so we'll open   up our console over here and also our Network tab  because we can see the API requests happening and   we'll click on login as you can see nothing  happened and I immediately know why nothing   happened we haven't actually called the mutation  yet to call this mutation they have a function   called mutate and we just have to call it in  order to execute the the the fetching so I'll   make the handle login function asynchronous and  I'll say await mutate just like this now I want   to try to log in and as you can see it did make  a request and it was successful uh it did give   us back a guest session ID as you can clearly  see over here uh we can also see if this is   was console logged it was but apparently it was  console logged as a promise which is fine we'll   just uh it was just a show to you guys but we can  actually see the data being displayed over here so   what we want is to get this guest session ID and  keep it somewhere inside of our app now where I   want to actually keep this is inside of the local  storage which is this part of the browser because   it will make it simple for us if we leave the the  tab we can just come back and it will still be   here meaning that the user will be persistently  authenticated and logged in even if they leave   their computer so I want to do something like  that and to do that we're actually going to have   to deal with this a little bit differently  we going to come after the mutation and say and say local storage. set item and then we'll  set an item called guest session ID equal to the   data do guest session ID just like this and if we  do so you'll see that when I click on the button   now it should set the correct information  apparently it is not actually setting the   correct information uh and I'm wondering why  it is actually creating a new guest session   every time we log in but let's check to see if we  did something wrong I believe the problem might   be that we have this question mark uh which  understand why this would actually cause a   problem um I'll delete this question mark and we  should see that if I click login uh yeah it does   create a session ID in our local storage now we  don't only want to just create this when we log   in we also want to be navigated to the homepage  when we log in so to do that I'm going to use uh   something from react rodon called use navigate  and it's a hook that allows us to just call a   function and navigate to a different page so I'm  going to come over here and say con navigate um   equal to use navigate and then after we set the  local storage item I want to be navigated to the   homepage actually uh and let's see if this works  I'll refresh this I'll click login um and yeah you   can see it did navigate us to the homepage and  generated a new session ID now that we have the   login functionality in place let's start building  our homepage so the homepage will use a lot of the   concepts that we've already addressed so we'll  move a little bit faster with it and I want to   show you guys um kind of the structure of how  this page will look like we'll first create the   component by saying uh actually just creating  the function and returning some UI uh over here   at the top we'll import some stuff from centic  Qi so we're going to import from semantic uh I   wrote from wrong so from semantic UI react and  we want to import a button from here and inside   of this uh UI all we want to put is first a div  which will actually have uh a couple of inline   stylings we'll say that it has a margin top of 50  and I want the height of it to be Auto because we   want the uh project or the page to like grow  as more movies are put in so we'll set it as   Auto then inside of this div I want to create  a button group because what I want to actually   display is the two buttons that are going to be uh  containing the movies Tab and the TV shows tab if   you recall there were two tabs right and I want  to click on them to then change the data that is   being displayed when I click on the button for the  movies I want to display the current top movies   and if I click on the button for the TV shows  it should display the current top TV shows so   to do that we'll create a button group and inside  of this I'll create a button and uh this button   will say movies and we'll have a Coler that will  change depending on whether or not we clicked on   it or not um and to do that actual functionality  we're going to have to create some typescript   stuff we're going to come over here at the top  and we're going to say um enum uh display type   is equal to the following uh display type will  be used for us to be determining if we want to   display a movie or a TV show right so we'll have  two entries we'll have either a movie uh which   will be called movies and TV shows which will  be called TV shows and now we can use this as   a way to determine which one we want to create by  creating a state so I'm going to say const equals   to use state from react and this will be of type  display type so it can either be a movie or TV   show by default we want this to already start as  a movie right but as we click on the buttons it   will change that so we'll say display type and  set display type just like this then I want to   have an onclick to this movies button and on this  onclick what I want to do is I want to alternate   between uh the different types so if we click on  this one I want to basically just set the display   type to be equal to movies or display type do  movies right to keep it consistent and and the   color will only be uh blue which is a color of  the selected tab if the display type is equal to   display type. mov if that's true we'll make the  color blue if not we'll keep it undefined just   like this now we're going to do the exact same  thing for the uh other one which is the TV shows   but obviously change the the values to adapt so TV  shows and then this will be TV shows uh and then   this will be TV shows as well and this should be  fine now where are we seeing this we're not seeing   any of this actually appearing in the screen and  I understand it might seem a bit confusing for you   guys but let's start seeing the visual feedback  so you guys can get a better understanding let's   first just import the home component here and  allow ourselves to see it in our screen and as   you can see this is what we built we basically  created the two buttons right and we said that   the the color of the buttons depend on the value  of this display type State and the value of this   state is supposed to determine which kind of media  or display type we want to display either a movie   or a TV show so if I click on the TV shows tab it  should color this and if I click on the movies tab   it should color this now obviously currently  all it's doing is just switching between them   and changing their colors it's not actually  changing any thing being displayed because we   haven't displayed any anything right but let's do  that right now I'm going to come over here and I   want to create a new component called the column  display component so we're going to say column   display and I want to create a TSX component out  of this and we'll just say export const column   display just like this the reason for this this  is because it doesn't matter if it is a movie or   a TV show I want to display very very similar data  so I'll actually just combine both of them into a   component and then just pass in the individual  data depending on which of them I'm trying to   actually uh display so for this we'll import and  display right down below this the two types of   um displays so we'll say div uh and we'll create  a style here actually I'll put a style of margin   top 20 so we can be a little bit uh further away  from the buttons that we just created and inside   of this div I want to basically display two two  different display types right so we'll first ask   okay is display type equal to movies or TV show if  it's equal to movies we want to display a column   display component which we haven't created like  we've created it but we haven't actually done   anything to it yet so we'll just write the logic  first and then add that stuff to this component   but we want to display a column display with the  movies data but if it's not we're want to display   a column display with a TV show data now how are  we going to actually pass that well inside of this   column display we can accept some props right and  um we obviously and the prop I want to create is   by creating an interface in typescript called  props and we'll say that we want some data just   like this now what kind of data are we actually  going to get back from um the the apis that we're   we're we're running so if you come over here to  the API um and you look at the documentation um   when we search for movies so we'll go to lists and  we have here lists of movies here we can find a   bunch of options I could have put the now playing  or the popular I think I chose the popular ones to   display in in my project and you can see that the  type of data that we get back from this is a bunch   of information right we get a list of movies and  each of them contains um a movie poster uh gender   uh gen genre IDs uh a description a title the the  movie language the popularity the release date the   title uh the vote voting stuff a bunch of stuff  so we kind of want to structure how we want to   display the data because we don't want to display  everything right so actually what I want to do is   I want to create an interface called display data  which is going to contain uh the data that I want   to display for both TV shows and um movies in uh  inside of their their individual cards right in   the homepage so first of all I want each movie and  TV show to have an ID which will be a number then   an overview which will be a string overview is as  you can see over here it's a description uh of the   the movie it's like like a a mini description of  it a summary of it so if you're not familiar with   the names I'm giving to the data it's because  I actually already know the API but I'm just   following the structure that they provide us with  their data and then I want to have a poster path   which will be a string it will be a link to the  poster uh title uh voting average so the average   like voting for this thing and a release date  which will be a string as well so both movies   and TV shows in the homepage will display this  information so inside of our props our data that   we're going to get from this prop will actually be  a list of movies right or TV shows but the format   of that list will be of the structure that we  just determined over here and this is pretty cool   but we also want to know if this is currently  displaying a mov or TV show so we also want   to play pass down as prop a display type which  will be a type display type actually don't think   I exported this enome so I'll just export it and  I'll say display type and just import it but yeah   so this is our props and we'll create a variable  called props and pass in the props just like this   and whenever we do something with this component  we will um use those props now that means that   when we are displaying something like this uh we  can pass in as props uh both the data which we   currently don't have but it's exactly what we're  going to do right now and uh we also want to pass   in the display type which obviously for the first  one will be a display type of movies because it   will be the movies uh displaying and the other one  will be for TV shows so I'll say TV shows now I   hate that this looks red because obviously it's  missing stuff but it's missing stuff because we   haven't actually grabbed the data so we'll deal  with this now let's actually fetch the data for   both the top uh like the popular movies um right  now and the popular TV shows right now so to do   this I want to create another file to fetch the  data similar to how we did with o but since we   want to fetch data this time we don't want to  alter data we're going to create a file called   query non mutation so inside of this file we're  it's going to contain the functions for both uh   fetching the TV shows and fetching the um movies  so I'm just going to copy that uh the the function   that we created before because we actually look  very similar and I just want to change the name   of this functions to fetch movies and uh fetch TV  shows so I'll come over here and I'll say fetch   TV shows now in Fetch movies the API link will  be as follow I'll put the link the correct link   over here it's basically this you just copy and  paste this um and for the other one will be the   same but we'll just switch from movie uh wait  I did it wrong let's just switch from movie to   TV so it's a very similar API links um and we'll  also be using the same type of authentication so   this should return the correct information now  we're going to come to our homepage and we're   going to import those two things we're going to  import from dots SL query we're going to import   both functions fetch movies and fetch DV shows  now similar to before we're going to be using   a hook from react query but this time the hook is  going to be called use Query and not use mutation   now the use Query Hook is really cool we're going  to do the same thing as we did before by passing   a query key and in this case let's do movies first  the qu the query key will be movies and it will be   used to identify ify this data later on if we want  to again I won't go into too much detail about the   intricacies of react query so if you want to see  that just check out my other videos but it's it's   really important that we set an ID for our query  just like this then the query function and autocom   completed for me but it will be the fetch movies  one and we'll do the exact same thing for um for   the TV shows just change this to TV shows and this  to fetch TV shows and we'll grab the data for both   now both of them can't be called Data so we can  actually alter the variable name for them by   putting this thing and saying that this is movie  data and saying that this one is TV show data   just like this now we also want to check if the  data is loading or not and react query provides   that to us really easily by just saying is loading  now again I can't have both ver both both things   called is loading so I need to change the name of  the variables this one will be called is loading   movies and this one will be called is loading  TV shows so I'll just copy this and paste it   here and we'll just change this now let's use the  information that we just got straight off the bat   I want to check to see if the stuff is loading so  I'll say if is movie loading is loading movies or   is loading shows then I actually want to display  a message uh saying like actually determining that   they are loading so I'll say something really  simple and dumb here I'll just say like yeah   div loading just for now and then we'll if they  are like not loading it means the data has been   received we will display the column display we'll  put this all inside of this conditional statement   and we'll see that uh if we were to fetch the  data this is what would happen but before we do   that let's pass in the data through props we'll  pass in the data for column display for movies   as movie data and for this one we'll pass in TV  show data now it's still given us an error but   the reason for that is because we haven't returned  anything on this um uh Callum display thing so for   now just to test out if this data is actually  working we'll just uh return a link return a   piece of the data that we got so we'll say props  do dat and we know that for a fact when we get   back this data uh as an example here we'll get  uh an object as a response which includes an item   called results and instead of results will contain  the array of movies uh or TV shows so I'm going to   say data. results and I'll grab the first one and  I'll try to grab the title of it oh it seems like   it's not it's not allowing me because uh actually  I should pass in the not just the data I should   pass in the movie data. results and the same with  this just like this and then here I'll just grab   the title let's see to let's check to see if this  is actually working let's come to our project and   straight off the bat it is working as you can  see the first movie in the list similar to the   demo is Mission Impossible let's see TV shows uh  it seems like TV shows isn't really working and   I guess it might be because of how the the data  is structured maybe uh let's check I I've made   two API requests which is expected one for movies  and one for TV shows this one is for the movies   and this one is for the TV shows um yeah it seems  like there's no title for a TV show we'll probably   need to use um name instead of title because  it's the name of the TV show so in order to   actually different differentiate that we could  do something like if the props do display type   is equal to display type. mov then we'll display  this but if it's not we'll display a props do dat   do um name something like this now it's going to  give us an error obviously because uh we we said   that it has to have a title but we actually put  a question mark on title and we'll put the name   of option over here and also put a question mark  on name so both of them will work and you'll see   that now it does display the name of the TV show  whatever this TV show is but it seems like it is   working it seems like we are fetching the data we  just now have to display the data in our page now   in order to display this data we're actually going  to delete all this stuff that we did um actually   I'll keep this uh just because I think we will  probably use it later on I'll create a variable   called title or uh you just I'll just say title  U even though it can be either the title the name   and I'll just paste this uh and it will basically  set the title equal to whatever we need over here   and then whenever we want to use this title we'll  just use this variable but yeah bottom line let's   start styling this so first I need to create a  grid uh and this will obviously be from semantic   UI I want the number of columns to be three now  it's nice that it autocom completed uh and I want   it to be able I also want it to be centered and I  want it to be vertically aligned to the top and I   also want it to be padded vertically now inside of  this grid I want to put some stuff I want to Loop   through the data and for each item of the data I  want to put a grid column so we're going to say   not props the data in itself because I'll actually  grab the data from the props like this I'll say   data data and also grab the display type and this  means that I can actually just delete the props   thing over here and just use the variables we just  destructured and then over here I'll say data do   map and we'll say that each item inside of this  uh array will be of type display data so we can   now close this and return that for each item in  that um array we want to return back the following   UI so we want to actually display a grid. column  like I said and we can put the the key for this   column um as the display data. ID so the ID of  the movie or the TV show and then we want to   use cementa qi's card group cementa Qi has cards  which obviously would mean it's like a really nice   pre-made component and we want to have a group  of them so I'll say card group and we'll put over   here inside of this a card now um this card will  have the following props it will be fluid it will   have an image it will have a header it will have  a meta and it will also have a description now   there all things that compose a semantic UI card  so we can actually put our data all in one place   by just passing the props the image will obviously  be the poster path thing that we got from the API   now uh the way this API displays stores image is  they store all of their image in this URL over   here uh and whatever you put over here is the  poster path for the specific image you want so   if you want to fetch the the image you have to  go to this URL uh plus the poster path for the   specific image so we'll say over here uh display  data. poster pass poster path then the header we   probably wanted to be the title of the movie or TV  show so we already have that title because we're   grabbed it over here so actually this makes no  sense I just noticed sorry about this this isn't   the code that I actually wrote before the video  um I'm obviously making changes as I progress   uh but I just realized this wouldn't actually work  because this isn't inside of of the loop so what I   want to do is I want to delete this and copy that  thing and just put it such that uh inside of the   header itself we'll check to see if the display  type of the movies then we grab uh whatever this   uh displ data. tile is and we'll do the same for  the other one we'll grab the name instead so if   it is a movie it'll grab the ti title if it is  a TV show it'll grab the name now for the meta   we'll say um that we'll put some text here we'll  say first of all the release date is equal to uh   and we'll put here some the release date according  to the the data we got and then we'll put like a   block in the middle and we will it will show the  rating just like this the voting average then for   the description it will just be the overview  that we can get from the um display data but   we also don't want to display the whole thing  because some movies have like um descriptions   or overviews with like a thousand characters and  some have like two sentences so I actually want   to put a Max to it and put three dots at the end  so that we can standardize the size so I'm going   to say slice this text uh between the first  character and the 350th character so I I only   want to keep 350 characters in the description  of the movie or TV show to make it simple and   at the end I'll just add the three dots so let's  check this out it already looks perfect right uh   it almost perfect obviously there's some minor  things that I'm going to edit but this is the   beauty of using something like semantic UI because  it literally does a lot of the work for you and   gets you started with your UI really quickly so  the card is exactly what we built over here but   you might notice that I can't really click on it  right uh which I could before and if I clicked on   it it would actually bring me to a page for that  specific movie right now we can't click on it so   I want to actually wrap this card around with  a link so I'll change this to a link uh link oh   I should actually put this here and this link  will be from react ROM so I'll import it from   react ROM and um over here we'll just add that  it will link to and this is an interesting thing   where do we want to link this to like which page  do we want to go to well what we want to do is   take advantage of what is known as URL perms for  this so in react Ron we have our routes but we   can create what is known as a dynamic route which  is a rout that will change depending on some part   of the URL so I'll create here a movie route that  will also take in a ID as uh perm to this UR and   based on this we can actually change how the page  looks just by the URL and we'll do the exact same   thing with the TV shows we'll create a route that  will show a one TV show based on its ID now we   haven't really created this this page yet or this  component yet so we'll do that right here in our   um folders we'll just create for now a folder  for individual movie and and inside of it I'll   create an index.ts TSX and we'll create one for uh  individual TV show and we'll create an index. TSX   as well then what I want to do is I'll just create  their the skeleton of each of them I'll say movie   and I'll just return probably a text called movie  and I'll do the exact same thing with TV show and   call this TV show now back here in our app we'll  just pass in those two as the elements to the   route so we'll pass this one as movie and we'll  pass this one as TV show like this now we'll see   that if we come over here uh when we click on the  card we wanted to link to the individual um either   a movie or a TV show so I'm going to add uh back  Texs as quotes and I'm going to basically say that   I want to go to the route that will be determined  um by whether or not our display type uh is the   movies one so display type. movies or not so if  it is the display types. movies then over here I   want to go to the route which is slash movies or  movie actually and over here if it's not we want   to go to the one that is sltv show but this is not  it it's not just going to either a movie or a TV   show we have to put the ID after it so we'll put  another slash and we'll just put whatever the the   display data doit is so we'll save this and um if  we click on this we should actually be redirected   to uh the page which is slovie slash whatever the  ID for Mission Impossible is which is exactly what   we do uh and it should change depending on the  movies we're clicking now if I go to a TV show   it should actually change to a TV show slash  whatever the ID is which again is what happens   so it seems like our thing is is basically going  on pretty smoothly but obviously nothing is being   displayed when we go to an individual movie or an  individual um TV show so let's work on that over   here in the movies I actually want to um first of  all create a styling for this I want to uh give a   margin top of 50 so we again have some space um  from the Navar and then inside of this I want to   do a bunch of uh semantic Qi stuff I'll first  determine this to be a segment then I'll write   a header for this page uh I'll say header and the  header will just display the movie title now how   are we going to get the movie title well we want  to get specific details from this movie even more   details than the ones we got from the generic uh  list popular movies end point that we used for uh   the homepage um because we can actually do that  by passing an ID there is an endpoint over here   called movie details which if you pass a movie  ID it will return back a bunch of details from   from that specific movie and the same thing  exists with TV shows so it'll be all pretty   similar so to do that we need the ID and like I  said we can get the ID by using something known   as the use perm um hook so if I come over here  and say use perm um we can get um the perms from   the URL and it will be a string and over here  we can just destructure the ID because because   it is the name of the program that we determined  over here now this is the movie ID or TV show ID   correct so we'll actually check to see if there's  no uh ID because there is a chance that you might   uh get to a point like that and we'll just return  invalid movie ID so if we went to over this and we   try to uh go without an ID uh you'll see it will  actually not work right um so now what we want   to do is we want to fetch the data using this ID  so again like before we're going to be using the   use Query hook uh I'll just even copy all this  stuff and I'll paste it over here but obviously   we'll change it accordingly I'll import um the  use Query hook I'll change this to be uh just   a individual movie not movies and I'll change this  to be fetch movie details which will be a function   we'll create in a second now the data we can we  don't have to Define a specific name for those   variables cuz um again like it it it already this  is the only fetching that we're going to be doing   in this component but we do need to create the  query. TS file inside of this folder now similar   to the other functions this is how this function  will look like it has a minor difference the Endo   we need is this one over here uh you can just  copy and paste it we'll be using the same kind of   authentication um so you can just leave this the  same but but the difference is that the depending   we have to pass a perm to the URL and that PRM is  the movie ID so that means that now this function   will require an argument we called it movie ID  of type string and we just pass it to the URL   so that we can actually fetch the correct movie  now to make that work we have to actually pass   in the movie ID just like this we'll first import  fetch movie details and we'll pass in the ID as an   argument so now we're passing the ID that we get  from the perm into this function and patching the   correct data which means that now what we can  do is we can just um first of all question if   it is loading there's actually a cool um thing  from from semantic UI called the loader so I'll   actually just return this I'll return a loader uh  and say that it is active and you'll see that if   I come over here uh for a brief second it does  show a little loader over here obviously we are   not doing anything with the data yet so that's  why it's it's kind of like failing the page but   let's work on that um if it's not loading we'll  display the data and the first piece of data that   I want is the title so I'll say data. tile right  now I don't want to specify what kind of data we   want for this because I want to put it up to you  this page will Encompass a lot of data if you want   to display you can even display everything that  they allow you to return because if you check on   this API documentation they can return a bunch  of stuff right I'm only using a couple of them   and that's why I don't want to put in constraints  to this data so I won't create an interface like   I did with display data and stuff I'll just do  it directly over here um but basically with the   title we'll just I also imported the header from  semantic UI then I'm going to put a grid over here   and this grid will have a couple props first  one will be columns and will be a a two will   have two columns it will be divided and I want  to align the text to the left because I think   it will look a little bit cooler I also want to  put some styling because I also want to put some   margin uh so it doesn't get all cluttered so I'll  say margin top and I'll say 20 then inside of this   grid I'm want to create a grid row and this grid  row um will contain a column right because we said   we want to have two columns so grid. column and  the width of this will be six uh six just like   this and we'll close this um and inside of here  I want to put a div that will contain a bunch   of styling stuff that we might want to have for  example I want to add the follow styling I want   to say that the display is flex then I want  to say that I want to align the items to the center uh I want to justify the content to the  center and I want the height of it to be 100%   of its parent just like this then save this and  inside of this div I want to put an image and   this image will be the poster for the movie so  it'll be very similar to what we've done before   I'll just put a size of this image to be medium  and and I'll also say that this uh image should   be centered but then the the actual source of this  image will do it very similar to what we did with   um the column display just grab this and put it  over here um oh centered is wrong just like this   and I'll just paste this and for this obviously  it won't be display data it will just be data and   this this won't be image this will be source and  um weird it seems like it's not it's giving us an   error um oh it seems like it didn't even import  from semantic UI yeah so it fixed the error but   basically this is how the image is going to look  like if we come over here and I click on this now   this is how it is kind of structured right now we  have a title and an image to the left but to the   right we'll have all of the other stuff so we'll  get out of this column and uh we'll create another   column so we'll say grid column we'll make the  width 10th and over here we add a list a list   will allow us to determine to like display a  bunch of information one on top of the other   now the first of all I want to add an item to this  list um which will be the header which will be if   this movie is um for adults or not so that's the  first piece of information that I actually want to   display and the structure of how I'm going to do  this is similar to what is actually suggesting on   GitHub co-pilot over here I'll have a list. header  and um I'll say something like is the movie for adults and over here I'll just say that if the  data do adult is true then I'll say yes and then   I'll say no if you know if you don't know adult  is actually part of the data um and it should   represent whether or not the movies for adults or  not wait I'll show this yeah it's a buo but this   is kind of the structure of how we want it so I'll  actually copy this and we'll um create a bunch of   them the next one will be for the budget of the  movie so I'll say budget and we'll say movie or   data. budget then we'll do one for um mult like  the the genres and this one actually is a little   bit different what I want to do is is uh I want  to say there's it can be multiple of them so we   actually have to Loop through some of them  so I'll say data. genres. map and for each   genre uh which we'll just for now give a type  of any um we want to return back a list. item   which will contain the J.N name just like this  I also want to pass the key which would just be   the genre. ID then uh let's see how it's looking  so far um yeah it seems to be looking cool then   let's create another item um this one will be for  let's do IMDb ID I think this is important because   if in case people actually want to use MDB they  can just look at this and check out so I'll say   ID and then I'll just display the IM DB ID then  uh let's do it again and let's do popularity so   I'll put popularity this is again I think just  the how popular the movie is uh popularity then   production companies this one is actually kind  of cool um it's again an array so I want to do   it like this I want to say production companies  and inside of here I want to say data do product   ction companies do map and then I'll again  grab the data and then just return back the   companyname um and I'll actually join all of  them by uh oh yeah a comment just like this   and what this will make is it will grab the  list of company names for the production and   it will actually just put a comma and make  all of that into a single string now we'll   come over here and we'll just add a couple more  things we'll paste it again and we'll say release date and we'll say release date I'm sorry that  this part is kind of like boring but it's part   of it uh you can actually change it however you  want you can make it such that it is a little bit   different you can make it such that um you're  adding different data to make it more cool but   I'm just doing what I plan don't doing before so  we'll add Revenue so revenue and then we'll do run   time damn we're doing a lot of things so runtime  uh then voting average whatever that even means   I'll put vote average and uh we're almost done  I'll say vote average and the I think the last   one is just the language so I'll say language and  here I'll grab the original language okay pretty   cool this is all the data we're displaying and I  just want to display this you can add other stuff   if you want to as well but you can see that this  now is working for all of them it will display   all the information depending on the movie that  you actually click which is really really cool   so we're pretty much done with the movies um  component for this now let's do the exact same   thing but for TV shows so I'll close a bunch of  these tabs because it's kind of annoying me and   I'll open up the TV show Tab and over here I'll  actually just copy all of this and paste it here   because it will be very similar it will have some  differences but it will be extremely similar so   I'll say TV show and um over here I also create  a query. TS similar to the movie one uh and I   will even copy the query from here and paste it on  this one and this just change this to TV instead   of movie and change this to TV show ID instead  of movie ID and paste this over here then on   the TV show oh actually it's still called Fetch  movie I'll change this to fetch TV show details   and then just paste this over here and then paste  this over here as well and then change this to TV   show for TV shows it will be different like I  said uh we will change this to TV show as well   but what we want is uh A diversity in the kind  of data we're displaying because CV shows have   different datas when you uh fetch the endpoint so  first of all we want to instead of just displaying   the title uh at the top I'll display the name  right because um this is how we have it right   and right now it's displaying all this stuff but  it's not really what we want to um and and I'll   show you exactly why there's some stuff that  we put for movies that we don't want to put   here and there's some stuff that we didn't put in  movies that we want to put here so the first is I   don't care if this is for adults I'm not going  to put this on the TV show I actually want to   put who created this TV show so I'm going to say  created by and then over here I'll just display   the created by but this isn't just one it can be  created by multiple people so this is an array and   I'll just for each creator of the CV show we'll  do the same thing we did with production companies   we'll just join into one string and um it seems  like this one wasn't created by anyone which is   weird let's see if it's just because of this one  yeah it was uh some TV shows might not have the   proper data um so we do take that into account um  but yeah let's continue um then what we want to   do is actually let's make this a description not  a header let's put a actually no we'll keep that   as as a header but we make this a description so  description and then we'll close this like this   and it will look like this it does change a little  bit of the color but basically uh what else do we   want we want episode run time so we'll change this  to runtime uh or episodes runtime and this will   will change to data do Abol R time and we want to  join because this is also U an array as you can   see and there is U apparently the epodes for low  key is 52 minutes which is pretty cool um then we   want to do uh the date of when it was first aired  um so we'll change this from genres to actually   we'll keep genres but we'll change the IMDb thing  to the first air date and this will be simple it's   one of the easy ones we'll just say first air date  then for jras actually I want to change this to   instead of a list item I want to change this to a  label and I might want to do this with the other   one too I think this is what I did when I wrote  the initial project uh cuz a label just looks a   little bit better you see it looks like this yeah  I'll do the same for the other one um let's go to   movies uh where is the genres yeah I'll change  this to label um and then just import okay here   what we want to do is uh we've done genres now  we want to display the networks uh I'll delete a   bunch of this stuff because actually no I'll keep  some uh I'm constantly thinking if I should just   delete so that it becomes more easy for you guys  to look at it but basically for networks uh we   want to display a list of the networks that this  show has aired in so we'll say data. networks.   map and no I don't want to just display this  I want to actually show the pictures of each   Network so what I'm going to do is I'm going to  open like this and display an image because uh   the network endpoint actually returns back the  image so in image we'll just pass a key which   will be the network the specific network.id then  we'll pass pass a source which will be uh that   link that we we put on a bunch of the other  things um plus the network. logo path which   is the path to the actual logo of the network  then we'll make this really small so I'll say   size equal to I I'll say mean I'll probably say  small uh and then I'll say I actually want to put   some styling to it uh yeah this is actually pretty  good uh we'll see this over here uh maybe it is a   little bit too big too big uh maybe should I put  this as meanie that's too small I'll just keep it   as small but yeah now we're going to continue  with this and we'll put number of episodes uh   have we done production companies we haven't so  we'll just keep that uh and we'll put number of episodes like this number of episodes and I'll  change this to again number of episodes and then   I'll do number of Seasons because I think that  that might be good as well seasons and I this   will be similar now um should I do popularities  no Revenue no cuz this doesn't really make any   sense runtime time as well I'll just remove it  a vote average sure and language I'll remove   language to make it a little bit different but  I do want to add one thing which is the actual   individual seasons and how many episodes per  season there is which is something really cool   that I added on the demo right so to do that  what we'll do is We'll add a list item so we   say list. item and instead of here we'll first  put a header like we've been doing and we'll   say seasons and then over here we'll add a  list. description and in this we'll put an   accordion which is a really cool thing from uh  semantic UI this accordion uh will be um will   have a default active index of zero and it will  have a couple panels to it right because that's   how an accordant is we also want to put a styled  here which will make it styled obviously uh but   the panels is a piece of UI that we have  to generate uh somewhere over here in our   project and to to not make it exist inside of  this massive line of UI I'm actually going to   create it up here so I'll say con uh season  panels uh is equal to uh wait where is it um   yeah season panels is equal to data. seasons.  map and then I'll grab each indivisual season   and also call it any and um inside of here  we'll just return all of this together and   I'll say return an object that contains a  key which will be the season [Music] ID uh season. ID then uh I hate when it just keeps J  see me stuff and I'm recording a video but I'll   say title and then I'll put season like this and  I'll say and then I'll just put the a specific   number of the Season then I'll say content and a  panel in the an accordion can contain an object   contain content which can contain some UI inside  of it it's a bit confusing but if you've played   around with semantic UI you'll understand why I'm  doing this but we'll actually put a card inside   of each individual panel U so we'll say card and  we'll add a style to it uh the style would just   be the height of the card CU I don't want it to  be massive I'll just say that it's uh 70 pixels   then I'll import the card now I'll close this over  here and we'll just pass in some props we'll say   the content of this will be um just say the meta  of this will be um the specific season. air date   which is the date that this was aired um and then  we'll have a description which will be a season.   episode count so say episode count so we just  want to display the the air date of the season   and how many episodes it has I also want to put  a I want to make this into a string and just do   like like this and then say episodes at the end  so it's like oh it has 52 episodes or whatever   uh and then we'll just P pass in this panels to  the to the panels thing over here let's check to   see how this looks to be honest uh it does look  kind of cool it has the two things but you see   it's kind of adjusting the height of the total  thing depending on how big or how extended we   are extending this thing right this isn't what we  want because we want it to actually be if there   's more than two seasons which by the way there  are a lot of them that will be like let's go to   this this looks like an animate so it must have  like 500 Seasons right uh it doesn't that's cool   uh let's go to another one uh this is movies let's  go to TV shows um what can have a lot of Seasons   okay House Hunters yeah this has like a billion  seasons and this doesn't look cool what we want   is to have a a certain fixed height box with this  accordance and we'll just be able to scroll within   it so to do it um we'll just come to the specific  um part where we create this thing over here and   we'll add some style to this description so we'll  say that the height of this has to be fixed as uh   let's say like 200 pixels and we have an overflow  on the y direction as scroll so if it overflows on   the direction we just scroll and this is exactly  what happens it has a fixed height and we can just   scroll if it ever overflows so it looks pretty  cool and we can obviously Click on each of them   and see how many episodes the season has obviously  the data might be broken uh I'm just telling you   guys some of the data for some specific movie or  TV show might be broken but uh for the most part   it has good data and it works so straight off we  just kind of finished the TV shows part which is   great because I don't know if you noticed I hated  this part of building the project but it looks   kind of cool in my opinion and uh it does a lot to  the project as a whole now what we want to do is   actually allow ourselves to rate uh a TV show or  a movie which is one of the most important parts   of this project and it's the last thing we're  going to be doing in this project together with   displaying the movies that we've rated or the TV  shows that we've rated okay so in order to um be   able to rate movies or TV shows for example uh we  want to come to our column display component uh   something that we've haven't touched in a bit  and we want to add something to the bottom of   it so right below the link over here we actually  want to add a form from semantic UI and this form   um basically will be used as a way for us to have  the button so we can actually rate so I'm going to   give this a style of margin top um 10 again like  we've been doing so far so we can space things out   um and then below here I'll P I'll put a form.  group um and we'll say inline and we'll put a   form. field then a form. input and the input will  look kind of uh different it won't actually look   like this because we won't have a it will be self  closing closing and then we'll come over here and   we'll put a type for it to be uh input wait why  is it not giving me what's happening oh it it   grabbed the form from react Dom not the form from  semantic Qi so make sure you that that's not what   you did as well so we'll say type and we'll give  a type of number then we'll put Min for a minimum   amount in this form we'll obviously say a minimum  radians of of zero uh the max is of 10 now uh the   ratings how you vote uh you can vote on intervals  of 0.5 according to the API so I want to say that   the step is of 0.5 what this means is uh if we see  over here now we have this little thing over here   as we click it will increase by 0.5 and again  um you can see that we can't go below zero and   we shouldn't be able to go above 10 right so now  we'll come here and we'll add an unchange property   that we'll obviously deal with and we'll have  um an action prop as well that we're going to   need now this action prop is kind of cool because  with a form input we can actually add some styling   to it whilst also adding the functionality to  submitting this form so uh just before we do that   we'll do the onchange first which is we'll have a  state called rating uh and we'll create it up here   which will'll change depending on how we click on  that so I'll say use State um and then it'll be   zero whatever and then we'll say uh rating and  we'll say set rating this will be a number and   uh we'll say that whenever there's a change in  this input we're going to set the rating equal   to uh whatever this event. target. value is and  obviously oh it's yeah we obvious have to convert   into a number because this is a number and if it  grabs it it'll probably grab it from the from the   text so now we do keep track of this but we need  to add some actions so first of all what action do   I want to put and like I said an action in this  case is basically this is an input but when you   put an action prop it will add a a small button  next to the input that you can click on it and it   will cause the thing to submit so we can actually  style that button by first of all adding the color   and I want to make it Violet because it's a color  that we've been using then I want to put a label   position and we'll make it right then I want to  put an icon and you can see the different icons   they have I like the star one because it makes  sense to rate something using a star and then   I'll say the content is rate because then this  will be uh what will be inside of the button   when we click and the on click for now let's just  do this but uh you'll see that this is how it is   looking it's looking pretty good now when we  click on it all it's doing is literally just   a console log in whatever number we put here  right so you see it console log 8 but we don't   want that we actually want to rate the thing so  how are we going to rate this thing well what we   want to do is we want to have another mutation  logic right because if you recall we're adding   a rating to a movie so it is a mutation so I  want to come over here to um the top of this   of our um no it's actually on the column display  uh I'll come over here at the top and I'll put a   mutation so I'll say const equal to use mutation  and uh again this will have a mutation key and the   first one will be um rate movie just like this  and the second one will be a mutation function   now the mutation function will take in an ID uh  and it will be a number and then it will rate it   will call some sort of function that we're going  to create called rate movie and it will not only   pass the ID but it will also pass the rating that  we have on the input just like this now um we have   to create this specific function but not only that  we actually have to duplicate this because we also   want to do the same thing for TV shows right so  I'll say rate TV show and change this to rate TV   show just like this now now I'll come to uh the  thing over here and I'll create a mutation. TS   and I'll copy similar to the mutation we have over  here I'll copy this and I'll paste it over here   let's change this to rate movie and we'll make a  similar one and call it rate TV show now I'll tell   you something this is probably the most different  API request we're doing in this tutorial because   um how this API works is you have to authenticate  using um your o token if you are doing everything   but um actions when you're doing actions like um  rating a movie or getting a movie that was rated   inside of a guest session you actually have to  authenticate using your API key and we've kept   track of both right I mentioned in the beginning  of the video so in order to make this work we're   not going to do this we're actually going to do  it a bit different we're not going to going to   put the authorization thing over here at all we're  going to put some headers uh but they're going to   be like normal headers that you usually put when  you're making a an API request I'm actually going   to change this also to say charet equal to utf8  just to specify a little bit more and um what I   want to do as well is I also have to put another  thing and what I want to do is I actually want   to put the following uh endpoint and I'll explain  what it is in a second so this endpoint over here   um and let me actually change the back takes this  endpoint over here is kind of interesting we will   need the movie ID from the um from the arguments  we also need the rating right from the arguments   now when you make an API request to this API for  adding a rating to a movie I'll even show it to   you guys uh it's not adding ra it's add rating  here add rating it requires a couple of things   it requires a movie ID uh it requires the the  body with the rating it requires a content type   and that's why I actually did and it also requires  the authentication using the API key but also if   we are a guest session if we're a using a session  and we're a guest we have to pass in the guest   session ID if even if we weren't we would have  to pass the session ID but we're we're guests   uh that's how we set up our authentication  so we'll pass in a guest session ID so let's   get step go through step by step which parts we  added so first of all we put the end point over   here and after the movie we put the movie ID that  we want to rate then we actually have to pass in   our guest session ID which is something we stored  when we logged in inside of our local storage so   I say here that the guest session ID is equal to  what we're getting from the local storage but most   importantly right after this we put an an empm  to say there's more variables that we want to   pass in this request and then we put the API key  which is how they determine how we authenticated   we are based on our API key now it is not safe  to just put your API key straight up like this   uh it's actually recommended that you use an  an EnV file so I'm going to actually do this   I'll say EnV over here and instead of this we'll  create a variable for our API key we going to call   it Vite API key now the reason why I called it  Vite in the beginning is because when you create   environment variables creating a project with  Vite you do have to put this thing before the   name of the variable or else it won't work so my  API key is this one over here and you might be   wondering oh why are you showing your API key  because I'm not stupid I'm going to I'm going   to delete this right after I'm done with the video  like this account so you guys don't use my API key   but it's important to know that I put it as the  EnV uh variable because then when when I publish   this to GitHub I'll just hide myv file so it's  not published with my API key my API key is not   public so how do I actually put that API key over  here well invite to get to grab um an actual EnV   variable you have to say import. meta EnV do the  name of the variable so I'll say Vite API key just   like this and this should work the only thing we  need left is the body to this request and I'll put   here uh the body and I'll actually make the body  straightforward I'll make it into uh Json which   is a string so I'll say value is equal to um the  rating now if you're confused with what I'm doing   is because if you look at the API documentation  they have they have an example of what a what a   request would look like a successful one and  as you can see you pass in in your your body   uh looking like this and it's exactly what I did  over here right I pass in a value and the value of   it is the r so now let's save this and let's just  copy this whole thing and paste it inside of this   one it's the same thing for um for the TV show  the difference is this is TV show ID and uh this   is TV and then this is Al TV show ID uh so the  rest is basically the same so let's come back to   this uh now we will just import this and we'll  add all missing Imports and this should pretty   much be working we now just need the function so  uh I'll grab the mutate function but obviously I   have to change this to rate movie mutation and  I'll also call this rate TV show mutation like   this and okay that's fine now let's make it such  that when you click on the button it will rate   either a TV show or um a movie now it dep what  we pass over here will depend on the display type   right so I'm actually going to create over here  a variable called rate which will be a function   that will be the result of whether of either one  of this functions right so what I'm going to do is   I'm going to say okay if the display type that  we're in is equal to display type movies then   the rate function will be equal to rate movie  mutation and if it's not oh actually I should   use the yeah and if it's not it will be equal to  rate TV show mutation so we're just alternating   between the functions that we got from here and  making them all into one variable so I can just   come over here and just say that um if I want to  rate this I would just call the rate function and   pass in the ID so I'll say display data. ID um  of the specific movie or TV show so now let's   check to see if this is working we'll open up our  Network tab because there's no confirmation as of   right now um that a a rating was successful so  we'll come over here and we'll try to rate this   movie an eight you'll see that nothing seems to  be happening which is interesting I actually don't   know why why nothing's happening uh let's check  to see uh if there is a problem here H let's go to mutation let me try something let me try to put  a a method to this uh a method of post because   it is a a post request uh I think this should  probably work uh let's try to rate this movie   again an eight and yeah it it did work we see  here that it did successfully rate this movie   which is great how do we know that it was rated  well we get the return back but we currently   are off fetching the rated movies so for now  we'll just assumed assume it worked because   the network request returned uh a success but one  thing I want to do is if it is a success I want   to actually put some visual uh feedback right I  want to actually put a toaster over here at the   top that will appear and show that there it was  successful in rating so to do that we're actually   going to be using a really cool Library called uh  react toasttify and I've been using this library   for a while now uh I I know how to make to like  snack bars SL toasters manually I have a video on   that if you're interested but using this library  is actually way simpler so what I want to do is   over here at the top I'll just actually install  before so I'll say yarn add react toasttify and it installed so I'll just import over here  uh from react um react SL toasttify and I want to   import something known as the toast function which  will basically U trigger a toast to appear at the   top and then I also need to import something  called uh react slash toasttify SL d uh yeah   this thing over here it's basically the CSS that  uh the library provides for us I need to import   it in the file I need but not only that I also  need to put um a part a specific component from   react toasttify into the root of my application  for it to work so I'm going to go to the main.   TSX I'm going to import this at the top and grab  the toast container uh toast container just like   this and I'll just paste it uh probably below  the app just over here we just have to leave   this somewhere in here and whenever um we call  the toast function re toast if file will know   to display this in our screen it doesn't matter  where we put as long as it it's at the root of   our app and now what I can do is the following I  can come over here to one of our mutations let's   start with the rate mov mutation and inside of  this uh thing over here we can actually put uh a   function called on success which basically will  be triggered if this mutation was successful or   not same thing can be done for an on error right  if there was any errors it will display over here   and we want to take advantage of that because  we will throw a toast displaying a successful   message if it was successful and one displaying  a failure message if it was failed so over here   we yeah I'll actually do what what it was  recommended there I'll I'll just do this for   success and then I'll do const uh on error  and I'll do this just for now and then I'll   pass both of them to my thing over here um see  obviously um since they're both the same name I   can actually in JavaScript or typescript I can  just remove it just like this then save it and   I'll do the exact same thing for the TV shows now  let's test to see how this works if I try to rate   Five Nights at Freddy's as an eight and I click  rate we should see a toast appearing at the top   now is this all well there's a lot more that we  can do to this we could specify the position we   could specify how long it takes for example if I  wanted I could just literally put over here that   if it's successful I want it to autoc close in  I don't know 1 second then you'll see that it's   actually a lot faster I'll try to rate this one as  a seven you'll see it stays for like 1 second so   I made a difference right right uh I liked how it  was by default so I'll actually just leave it like   this but you can add a bunch of configurations  as long as you uh look at the react toaster file   library and see what customizations you want to  add but it is really cool right I love having   toasters in projects it adds a little bit of um  UI that definitely adds to the overall aesthetic   and styling of the project and makes it look a  lot more professional so now we are we've rated   a bunch of movies we can even rate some TV shows  I'll give a 10 to Loki um and yeah it seems like   rating TV shows is also working uh all we have to  do now other than also fixing the like the cleared   uh error in styling over here which I'll do at  the end is um make it such that we can display   the movies and the TV shows that were rated so  to do that I'm going to create the rated page so   I'll come over here and I'll actually just close  all of this Tex tabs they're kind of annoying me   um and I'll create a folder called The Rated um  folder oh it's already created right we created   in the beginning of the video um yeah over here  we have an index page so we'll just export const   rated uh and we'll create this component um  no this will be a a function um like this   and it will return for just a div now let's  import this into our app. TSX and put it over here and then just import this and start working  on it so for the UI of it I'm going to keep it   simple um but a little bit different from what  we've been doing so I'm going to put a container   uh from cqi then I'm going to put a menu and I'll  put inside of this menu I'll put a menu. item one   for the movies Tab and one for um the TV shows tab  so for the movies I'll say uh actually make this   self closing um like this and then I'll just  put at the item I'll put a name to it it will   be movies then I'll say it is active and we'll  have have to actually put a state to determine   which tab is active and we also have to pass an  onclick then I'm going to create another one of   these for the TV show and you guys will see how  this works uh TV shows like this then I'm going   to create a state called active tabs so I'll say  active tabs and set active tabs and this will be   a string we'll use the use State like this and  we'll just say that if active tabs is equal to   um actually let's not let's not use this let's  use display type like we've been using so we say   movies and this will be of type display type  and we'll say that if active tabs is equal to   display type. movies then this is active and if  you click on this we want to set the active tabs   to be equal to this playay type. mov we'll do the  exact same thing for TV shows uh I'll say TV shows   and TV shows and this is how it looks uh wait it's  not showing it's literally not showing because I   haven't added any styling yet but um it does it  you can see that you can alternate between stuff   over here let's actually add some of the styling  uh in the menu I'll put it to be pointing and I'll   make it secondary and I'll add a style to this  which will be a margin top of 50 and we should   see that this now appears over here right doesn't  appear inside of the NBO and you can see that it   looks kind of cool uh we can alternate between  them and switch the tabs depending on which one   we click it should display different pieces  of data so now what I want to do is I want to   display those different pieces of data I want to  start with a segment uh to wrap all of this around   and I want to basically inside of the segment put  over here uh a conditional saying if the active   tab is equal to yeah just like this if the active  tab is equal to movies then we're going to display   some UI if it is not we'll display different UI  so put a div for this for now and this div will   contain an uh header uh from from centic UI and  we'll say red movies now I want this header to   act as an H2 tag like this and um this is how it  will look then what I want to do is I want to grab   the data for those movies now the display of that  data would be very similar to we did with column   display it will actually be basically the same  the only difference will be the fact that uh we   will also display the rating that we gave for that  specific movie or specific TV show so what I want   to do is I actually want to uh first of all grab  the data which we haven't done yet and the data   for grabbing um rated movies and rated TV shows as  a guest uh in a guest session it exists somewhere   over here wait let me show guest session yeah over  here this is the the two end points we're going to   be using um and all it requires is very simple  we're going to come inside of this thing and   say query dots and then we'll say const or export  actually we'll just copy the query from here way   easier we'll just paste it here and we'll call  this fetch rated movies then this doesn't need   any arguments and the end point is similar to  the endpoint from uh when we worked with adding   a rating because we do need to be authenticated  using API Keys instead of uh this thing over here   but the difference is we don't need any actual uh  actual stuff for this endpoint um we just need to   actually put the correct URL over here at the  top and the correct URL looks like this um I'll   just paste it yeah this is the correct your all it  basically grabs we put the guest session ID over   here as you can see we grab it from the local  storage and then at the end we put the API key   and this should return the correct information  now let's do the exact same thing for TV shows   so fetch rated TV shows and we'll change this  to let's see rated TV uh and yeah that's pretty   much the only difference then over here let's  actually copy the use Query hook so we don't   waste any time um I guess by this time if you're  watching this video and working on this project   you're probably tired as well but maybe you're not  doing all of this at once like I'm doing this is   all One recording so it is taking a while for me  to do this but um I'll paste this over here and   I'll import this actually import yeah I'll just  import this and then let's um fetch rated movies   we don't need any IDs we don't even need to do  this because we don't need IDs and then uh let me   remove this as well uh I'll say this this is rated  movies and yeah this is pretty much working uh and   I'll change this to rated movies and this this to  okay we'll make a is loading loading rated movie   as well and then we'll copy this and duplicate  it because we also have to do it for TV shows so   rated TV shows and is loading rated TV shows okay  and then this will be rated TV shows and this will   be fetch rated TV shows so really cool what we  want to do now is display that thing so inside of   the rated movies I want to put the column display  component that we've actually created before and   we'll pass over here the data for it will be uh in  this case the rated movies data do results because   remember this returns a results it's exactly  how we did for uh inside of the homepage when   we called the column display and then we also  need the display type and obviously the display   type will be uh display types. movies right  and then we'll do the exact same thing for um   if this is a TV show but uh we'll change it a bit  so we'll say rated TV shows um and then this will   be rated Tov shows and this will be Tov shows now  let's see how this looks um it looks nice like we   did before it does show it does show the correct  information which is something I forgot to say say   it shows the movies that we've actually rated so  far and if we wanted to rate an actual movie or   an actual Tv show uh let me give a rating for um  I don't know let me give a rating for Big Brother   how does this have a rating of 10 this makes no  sense okay I'll give it of seven and let's check   out okay it's successfully rated we go to TV shows  now it should display that information so really   really cool oh it actually changed to an 8.5 cuz I  gave an radium of eight that's crazy I definitely   affected this rating I think this only had like  one or two ratings or or whatever but yeah this is   crazy um what we need to do now is we need to add  the fact that we voted for this and add our actual   voting so I gave this an eight I want to see over  here that I gave this an eight when I voted right   because what is the point of seeing this so the  way we're going to do this is no matter which one   U we're displaying we want to display the rating  at the B so so to do that we need to come to   column display and actually make a change in this  we need to ask if this is uh be a column display   for rated stuff or non-rated stuff so what I want  to do is add something to the prop so I'll say is   rated which will be aoan which by default it it  don't it's not expected to be passed but if you   pass it it will be true and by default it will be  false so down here at the bottom actually put it   right over here put it below the card uh we'll say  okay if is rated and I'll actually grab it from   the props so I'll say is rated if uh where was it  okay if is rated then I want to basically display   a label over here that will say the rating of the  thing so I'll say your rating is equal to uh data   Dot rating and it will give me an error because if  you recall um currently data is of this type over   here display data so we actually add the rating  as an option as well so that it doesn't error for   us um it literally does what what is it saying  oh okay I just noticed it should be displayed   data not data okay it works you'll see that now  um oh I haven't passed the the thing yet let me   refresh this uh I haven't passed the state here so  I'll pass the is rated like this to make it true   and I'll pass it on this one as well and you'll  see that now if I go to rated uh it's giving me   an error let's check the error it seems like  cannot read properly undefined reading results   huh is it an error in our Network request doesn't  seem like it um I'm going to check out what error   this is and I'll come back in a second okay guys  I figured out the error the error was basically   simple error handling and simple fetching logic  which was I did I wasn't checking to see if the   data was loading and if it is I actually don't  return this I return a loader so that if the data   is loading it shows that it is loading as you can  see the pro the reason why that was that was like   actually causing issues is because while the data  was loading we were trying to access the results   thing of the data but the data wasn't done yet  so there was no results so it was giving me an   error so if we check that if it's loading and not  like we return this then it will only return all   of this and try to get the results when the data  is actually done so you can see it works now for   both TV shows and movies and we can also see our  rating right this is really cool we can see the   rating we gave for each of the individual things  uh which is what we wanted to do uh I want to see   if I can change the color of it um to Green let's  see if it looks good yeah it looks a little bit   better I think it adds more style to it but yeah  that's that's what we wanted to do so now the last   thing we want to be able to do is uh first of all  let me fix the UI which kind of has like this it's   kind of uneven as you can see and then finally I  just want to be able to log out for my account so   to fix the UI it's actually pretty simple we're  going to come here to visual studio code and on   our um on our card instead of column display  we actually just want to add a Max height or   a height to it right a standard height to each  card I'm actually going to give it 820 which I   believe is what I put on my on the project that  I put the demo um I have to close this and you'll   see that now all of them are standardized as  the same height and since we've used the same   component for every single part of our project  it seems to be standard everywhere as well which   is pretty good um I really like how it looks now  let's make it such that you can log out and that's   uh the simp the most simple thing we've done so  far we're going to go to our na navbar over here   and we're going to actually add um functionality  to check that now how do we check that well I'm   going to say const is logged in and this will be  equal to the local storage. getet item uh uh guest   session ID so if the user logged in then um that  will there will be something here so I'm going   to say not equal to n um then we're going to just  check okay if the user is logged in then we want   to display the off if the user is not logged in  then we want to display something else so we'll   say is logged in we want to display actually no  if it's logged in we don't want want to display   the the yeah we don't want to display the the O  we want to display the um the log out and if it   is not logged in we then display the O uh this  will be the logout button and we'll make it such   that it doesn't act like a link but it acts like  a button we'll say log out and this won't exist   what will exist though is an unclick now we'll  create a log out function over here and this logo   function is pretty simple uh first of all it'll  just remove that item from our local storage as   you can see and but not only that it also should  redirect us to the off page because when you log   out you need to authenticate again so we will  import from Ron the use navigate hook which we've   used so far we'll say const uh navigate equals  to use navigate and we're going to navigate to   the off page just like this and one thing I also  want to do is I don't want to be able to go to   the homepage or any other page to be honest but  I'll just do this with the homepage so you guys   can see how to do it uh I don't want to be able  to go to the homepage if I'm not authenticated   so I'm going to say if local storage. get item  get session ID is equal to n then I want to be   redirected to the off page now how do I do that  well do I just just call the navigate uh function   like I did here well no because this isn't inside  of a function this is just an if statement and we   do need to return something so uh in react rou  Dom there's actually uh something similar to the   use navigate but in the format of a component  called the navigate component so I can just   grab the navigate component over here and instead  of this I would just say return navigate and and   uh I'll navigate towards the o link so SL o link  and you'll see that now if I want to log out I'll   click log out it will have navigated me towards  the oth and it should probably not have a guest   session ID over here and if I try to go to the  homepage it doesn't allow me to it forces me to   stay in O obviously if I go to the rated it will  work but it will break uh but it's all because we   haven't added that uh just as a quick since this  won't actually change that much let's do that just   because it will give me a pet peeve like it's a  pet peeve to have that is that thing in your in   your project so I'll just put this and I'll import  this and now it works as well we get redirected   every time we go to the rated page and we can just  log in and every time we log in we do get logged   in as a different user so the rated page doesn't  exist there um you'll see it doesn't exist um but   that's that's basically it for the project okay  everyone so now that we finished our application   let's start the deployment process which we  basically started uh earlier in this video   when we were um when we set up our account and  claimed our free domain with hostinger so to set   it up it's really simple uh I have two um plans  over here that host owner gave to me however uh   you can the process is very similar depending on  which one you choose so it doesn't really matter   which one you actually chose to buy for this  I'm going to be showing you the business one   real quick um whichever one you have you'll see  something like this up here and you can click on   setup when you click on setup uh we'll see that  there's a beautifully made guide for our setup   we'll click on start now it's going to ask if you  want to create a new website or migrate from an   existing website in our case over here we don't  want to do either of them we actually want to   skip and create an empty website then it's going  to ask us to um select your domain so since I got   two free domains because I have two different  plans this is just my case uh you will probably   just have one we only set up one so we don't need  to claim a free domain again we already have it   and it's actually by default already here pag Tech  movies um as the domain we're choosing and if you   don't have it over here just click on this and the  option of the domain you created should be over   here as well so we're going to select this then  we can choose the location um it's nice that Hol   has a bunch of locations around the world since I  am literally over here in Vancouver um I'll select   the one that is closest to Vancouver which which  is uh North America Arizona however like hostinger   mentions you should choose the server location  which is the nearest to where your audience will   be at because you want it to be closer to whoever  is using the website so I'm just going to keep it   like this domain is right and I want to finish  the setup just like that it is pretty easy it is   finalizing the setup as you can see the loader  is loading uh but when it's done we get this   two options over here one to view our website  which I'm going to click but you'll see that   there's absolutely nothing here uh and one that  is to manage your website which will just bring   us to the H panel for this specific um website  we just uh set up now to put this website into   our hosting or platform there's a bunch of ways  of doing this but the easiest way in my opinion   is to just use the file manager over here we'll  click on this and we'll open up the files that   are being served in our project and you'll see  that there is a folder called public do public   underline HTML here we have a default.php file I  want you guys to delete this file just like this   delete it and then we'll come to our project over  here and we want to generate what is known as the   this folder or the build folder for depending on  what your you're using in our case we're using V   so we'll see in the package.json that to generate  that file we just have to run yarn build so I'm   going to come over here and I'm going to run yarn  build and it's going to create an optimized build   version for production inside of our project and  it is this folder over here now all of our project   is inside of here so what we want to do is we want  to reveal this folder and finder which is where   we're going to be seeing uh the files that exist  inside ins of it we're going to open it up and   we're going to copy everything that is inside of  here and just throw it inside of the website just   like that you should see all your files here if  you don't then it probably didn't work and I would   just try it again but interestingly enough if we  go to where our website preview is it's literally   already working see the files are already being  served but not only that um you'll see that in   there's a message over here saying that the domain  status uh of our domain will be accessible in 3   minutes so in 3 minutes we'll actually be able  to see our website not just as a preview but   also being served in with its actual proper domain  so what I'm going to do is I'm going to come back   in 3 minutes to show you guys the final product  okay everyone so as you can see um The Domain   seems to be ready so I'm just going to click on  this and as you can see it opens up not actually   on the preview but on the domain that we got and  everything works we can log in to an account as   you can see the API seems to be working perfectly  everything is exactly how it was when we had it uh   locally and yeah it seems to have run perfectly  so there's a lot more that we can actually use   with hostinger is not just this uh obviously it's  not the point of the video but I just wanted to   point out since in case you guys want to you can  see that you can run a speed test on your website   uh ours has a performance score of 98% which is  pretty good uh a lot of the stuff that I mentioned   that you can do with hostinger um you're able to  do through this H panel that we have opened over   here you can see the total number of requests uh  and much more as you can see and you can also set   up the CDN like I said my plan the one I'm using  right now the business one gives you one for free   but uh if you have the premium one then you won't  be able to do so but I do recommend using it it   is already active as you can see but yeah that's  that's just one of the things I wanted to show to   you guys but that's basically it I really hope you  guys enjoyed this video If you enjoyed it please   leave a like down below and comment what you want  to see next subscribe cuz I'm posting less videos   however I think I'm putting extra effort in every  video I'm making and I've been getting a lot of   support from you guys and I'm really enjoying  it because I did feel a little bit burnt out on   YouTube however just seeing the support you guys  provided me and seeing that I can just dial back a   little bit but post higher quality videos allowed  me to continue making this videos and I'm really   enjoying how YouTube is treating me recently so  uh I wanted to thank all of you guys for that   also thank hostinger again for sponsoring this  video they allow me to continue producing this   kind of videos for you guys um so I wanted  to give a massive shout out for them again   check out the link I have for hostinger in the  description uh it will help support the channel   in that way but yeah that's basically it really  hope you guys enjoyed it and I see you guys next time [Music] [Applause] oh

Channel: PedroTech

Views: 25,388

Keywords: computer science, crud, javascript, learn reactjs, mysql, nodejs, programming, react tutorial, reactjs, reactjs beginner, reactjs tutorial, typescript, react js crash course, react js, node js, express js, pedrotech, traversy media, traversymedia, clever programmer, tech with tim, freecodecamp, deved, pedro tech, hostinger, react vite, vite, react-query, react project, react resume project, react movie, react netflix, react intermediate project, react beginner, react resume

Id: miUsa5SOXGk

Length: 141min 30sec (8490 seconds)

Published: Tue Nov 21 2023