How to Resolve CORS Error in React | React Proxy to Backend | Blog Application MERN-6 | Intellipaat

hello and welcome to part six of M Stack block project Series in today's video we are going to see how to resolve cor error in react most of time you guys will come across cor error while dealing with lots of API I'll teach you how you can resolve them as well as we will also set up the react proxy to backend by end of this particular session but before we do that I would urge you guys to enable both the Subscribe button and the bell icon for intellipath YouTube channel to come AC across more technical updates like this now let's get started with today's video so first of all open Postman to check whatever the API you have created so uh I have already installed uh Postman inside my system and if you haven't done that uh I request you to download the postman tool so that we can check whatever the API we have return is right or wrong okay whenever you will open this uh Postman app you will see this add button at the top so uh what you have to do you just have to click on this app add button and if I'll just maximize the screen over here and you have uh you can see that I have already tested lots of API over here and uh my back end is already running and my front end is also running okay so uh make sure before tast testing your API uh your back end and front end both is working okay so uh over here you have to give the URL so in my case my URL is my uh back end is running on server 8,000 and my URL is API sl/ register okay so uh um it's not a get request that's why it is giving you 404 not found error okay so what I'll do I'll just uh quickly change it to the post uh if you don't really remember which kind of request you have created in that case what you have to do you just have to go back to your index.js if I'll just show you over here uh in my index.js over here you can see uh this request is inside my/ API SL and in inside my Au I have two kinds of uh request uh one is login and one is register okay so here I am uh you know registering so um it's SL register okay and uh then click on the body over here and click on the change this none to Raw okay and make sure this is Json so uh we are passing the data in format of Json format right so we will pass the Json data over here uh so if I'll just show you the example I I recently tested this particular API if I'll just copy this particular part and if I'll just paste it over here this is how you pass the Json data right we write in a object form okay so inside double inverted comma whatever the uh object you are passing make sure these names are same see uh this is username so here it is username and make sure the sequence is also uh similar to whatever you have written inside your um you know your router okay so um first of all we passed our username then email address and then password so I have uh taken the same sequence so I have already registered this particular uh you know user so uh what I'll just do I'll just quickly change this as a test one test one and I'll keep the password as it is okay and if I'll just uh click on the send button over here you can see uh this is coming as uh okay 200 which is which means the success and you can see all the data over here here and if I'll just show you on my mongodb in my mongod compass you can see this particular data and one thing if you have noticed over here if I'll just show you over here uh it has already generated ID for us it also hased our password you can see I have given password is 1 2 3 4 5 6 but over here it is not giving me 1 2 3 4 5 6 it is showing some uh random values with the key we have just passed with to it okay and uh you can see uh the time of creation and time of updation why we have took the time of updation because uh whenever we will be updating the profile we want to save that particular time stamp as well so if I just move to my mongodb over here and this was the blog website if I'm not wrong so if I just double click it will connect me now inside my users you can see uh this which we have just created uh this is Test 1 Test [e-mail] and this is the password and the uh creation date and the updation time okay so you can see that our apis are working just fine now uh I guess we are completed with our back end now what we have to do we just have to work on our front end part okay so uh let's quickly move to our front end part I'm just closing this Postman as of now because I don't need it I'm maximizing my um V code and I'm just uh you know minimizing my um terminal you can see my front end and back end both is one running over here and let me just quickly close all of these tabs I'll just click on close all let's move to our uh homepage first and uh let's see the navigation bar which we have created is working or not okay so inside my home screen uh before just adding this navigation bar let me show you the output first okay so over here uh this was our output when we uh didn't just a minute so uh this was the output which we were getting before uh we have implemented our nav bar now what you have to do you just have to import your nav bar and over here you just have to write Navar slash and over here you can see your nav bar is working just fine your uh Na bar is looking perfect and I don't think any changes are required in the navigation bar but if you like to make any kind of changes over here you can do it okay uh over here you can see login and register if I'll just uh show you the you know responsive version of your particular nav bar because we have already imported our menu bar inside this also right so if I'll just uh minimize this a little you can see inside my phone it will look something like this and over here you can see this uh small you know login and sign up thing whenever you are opening your menu over here okay so I'm just closing this as of now and uh this is looking perfect so now what we will do we will create one um file and inside that particular file we will store our URLs so what kind of URL we are talking about over here so let's say uh the backend URL so we will be connecting our application to backend again and again so I don't want to write a HTTP uh Local Host 8,000 again and again so for that what I'll do I'll create a separate file and inside that file I'll store all the the URLs inside it okay so I'm opening my vs code and inside my front end folder only what I'll do I'll just close this particular uh you know U folders first so inside my SRC folder I'm creating one more file over here and the file name is url. JS so this file basically contains all the URL okay uh okay so it has created uh url. JS file for me now over here what I'll do I'll write export constant and one variable name is URL which will contain the you know basically the URL for my backend application so let's say HTTP HTTP colum Local Host this is um you know the port where my back end is running so I'll give that particular same back end link over here so if your back end is running on Port 5000 or port 8080 then don't forget to change this accordingly okay and over here we will also create one more U you know variable now you will ask me for what we are creating another variable so we are creating this another variable to store the link for my images folder so as we have created a images empty folder inside my back end now I want to access that particular images in my front end as well right so for that my URL will be changed why it will have the folder one folder inside my port 8080 that will be images and inside the images we will be getting uh you know the particular images so for that I have to also store that particular path of the images folder so that I can access that in my front end so for that I'm creating um you know this particular variable I'm copying this Local Host 8,000 and slash images slash okay now why the slash we also have to move inside that particular folder because images will be inside that particular folder I hope this part is clear to you now I'm just saving this particular file and I'm just closing this okay now we also have to uh set up the proxy why we are setting up the proxy because uh sometimes uh you will face a course error so when I was creating this particular project or uh I was facing the cor error that it's not because my Logics were wrong or something like that but it was because uh there are some issues with the course whenever you using course and exos together you can also use fetch as well but I'm making use of the ex so in my case I was getting course error maybe some because of my system configuration or something like that but uh you can skip this part as well if you're not getting the cuse error you don't need to set this proxy up okay I'll just quickly show you how to set up your proxy okay so over here I'll just create one more U you know file which I have already created named as setup proxy do JS so inside my setup proxy I have this uh create proxy middleware okay so I also have to install this particular um create proxy middleware okay uh from here uh HTTP proxy middleware so if I'll just show you on um you know over here uh if you will go to your npm website and search for HTTP proxy middleware then you will find this and you will uh see how this works and you can directly you know copy paste this particular code and your proxy error will be gone okay so if I'll just copy this particular path and if I uh move to my front end folder and if I'll just paste this part it will take a minute to download okay and uh meanwhile I'll explain you what code I have written so what I did I imported create proxy middleware from my HTTP proxy middleware and over here I'm exporting this particular module and I have taken root inside my function why the root because our application starts running from the root now what I said over here um root. use I'm forcing my root to use SL API API is my endpoint which you have seen inside my back end that I have created SL API sl/ API SL users like that so um here I have taken SL API then inside my create proximal where I'm seeing that my target is 8,000 because my back end is running on 8,000 then change of origin I'm making as as true I'm uh making secure as false because uh I don't want http P S2 request on this particular server okay then my inside my headers what I'll be doing I'll be accessing my Local Host 3,000 where my back end is running uh to get the data from Local Host 8,000 why I'm making this connection to 3,000 to 8,000 is because I want the data transfer between them okay so if you are not getting this particular error this doesn't happen every time but sometimes it does and you might have to uh reink on your Logics and maybe uh you have to recreate your particular application it sometimes goes away when if you just simply you know create a same code again uh while writing the same code again this error might go away as well but here uh what I have done to just to take a precautions that I don't get any you know course errors so that's why I have created or you can say I have seted this proxy up okay you can skip this part as well if you're not getting error you are you don't need to set up this particular proxy okay so we are done with our proxy now inside my home I have already shown you the navigation bar which we have created right now uh let's quickly move and let's complete with our register and sign up page okay so inside my pages I have my login and my register page okay so if I'll just show you over here this much we have already done right so we have created this component and we had make use of this particular component when uh we were writing inside our app.js or we were creating our navigation bar okay now what we have to do uh I'm just removing this register over here like this now we will set up our register so for that uh first of all inside my register what kind of data I want first of all I need username then I need password then there can be a error and I want to navigate if my registration is successful right so uh what I'll do first of all I'll create uh one variable and inside that I'll take some states so basically when we are creating our register so we make use of our US state hook okay so first of all I'm creating one uh you know variable or you can say use state for my username so let's say username username comma set username name name is equal to use State you can see my use state is auto importing at the top in your case if it doesn't then import manually okay now um this is for my username similarly I have for my email so I'm just changing my name over here to e mail and this this is set email like this and my set email will also be the string and then will be password password like this then um set password and password will also be the string now once then we will have one error comma set error and initially uh there can be two possibilities whether there is error or there is no error so initially I'm keeping my error as false because I don't want any error message at the beginning because we don't want be having any error at the beginning if we have the error we will toggle this particular button and we will show some tost or or something like that to you know make sure that the user knows that there is some error now we will also make use of a navigate is equal to use navigate and one more thing uh when we created our you know um this uh menu.js over here it will not be used navigation it will be used navigate okay so uh over here and as well as on our you know Nar bar over here it will be U use navigate not navigation so make sure that otherwise you might get error and also make sure you enclose this particular thing inside your curly braces okay because in last video my I might have missed that now after our uh use navigate um this will be in function form okay all right now we have all of this uh you know uh things with us now what we have to do we will create one um button so on click of that particular button uh we will try to send this particular data to our back end so for that I'm creating one button over here let's say const handle register like this is equal to a function I'm using aror function over here you can use normal function as well but I prefer using error functions okay now uh as we are sending this particular data to the back end obviously there're going to be uh some uh you know there are chances to get some errors right so for that we will be uh creating try and cache blocks again so we will write try and then we'll write cach and inside this we will cash our error like this let's make this error okay so that we don't get confusion between this error and this error okay set error fine now starting with the uh Tri block we will create one const as uh Rees is equal to await exos dot the type of request it is it is a post request so post and inside this we will pass the url url we will be getting from that particular file which we have just created so for that write URL over here and let's import that particular URL as well so I'm writing here import URL from back/ URL from here okay URL Plus we also have to write slash API slash register slash sl/ register sorry SL register and done over here now after this uh we will take this particular data and we will pass this particular data in the sequence so let's say username comma email comma password now uh we get this data uh make sure you manage this particular sequence over here now what we will do uh we will set the particular data let's say uh set user name like this and we get the response dot data dot username like this then similarly we will do for our email email and inside that we will write um response.data do email like this then we will set the password and U similarly we will pass the same password so uh right now you can see that we have passed the same password but whenever we are passing this particular data to our back end there we are hashing this particular password so we don't need to do any other functionalities in our front end part okay then we will say set error set error as false because this data is already set and we will navigate to login so let's say slash login like this now let's say uh in case there are some errors so what we will do we will set error as true and we will also console this particular error so let's say console do log error okay like this so uh we have took all our data and uh why this error is um okay I guess this is fine okay now what we will do we will uh move inside our divs and we will start creating our fun okay now um if you have noticed our uh you know login page there we had this uh you know similar kind of theme for uh both the you know login and register so we will do the same over here we will uh create one Dev over here like this and we will give this them some class names so let's start by giving some class names we will make the display Flex item Center like this justify between we will give pixel 86 and for medium screen my MD TX sorry for my medium screen my p x will be 200 pixel like this then my py will be four so this is the data you know uh which I likeed better so if you want to make little changes here and there you can do that okay uh then we will create one H1 over here like this uh we are using telin so it doesn't matter whether we are using HTML or sorry whether we are using H1 or not uh it will consider as a div only so still to just make sure that I'm writing a heading that's why uh you know I have took this H1 you can take normal span tag or Dev tag as well okay now inside my class uh I'll write text as LG I want my text is large uh for my medium screen my text will be Excel then uh font will be extra bold so this is my main heading which says uh you know block spear so let's do that here I'm giving a link tag like this and uh okay link is imported okay in the your case if the link is not imported please import it okay so uh whenever our registration is successful we will redirect it to our homepage so for homepage we use slash if you remember so that's why we are keeping slash over here and inside the link tag uh you can uh give whatever the you know text you want to give so this basically link tag is inside my H1 tag so uh this is something um if you see the logo and click off that particular logo the page gets reloaded right so for that uh we are making this particular thing okay so um basically what happens is whenever we click the company's logo it redirect us to the homepage of that particular website right so for that I'm um creating this particular link and inside this I'm writing blogos spear spear like this now uh this was my H1 tag now there will be one more link which says that login so so for that I will also create one more uh you know H 3 let's say and inside this I'll create one more link and this link will redirect you to login page so over here I'm again creating a link link like this and this link will redirect you to my slash login page okay and between this I'll also write login and I don't need to give any styling to this particular uh part okay now outside this di I'll create one more div like this and inside this div uh we will create our particular form okay so let's start by creating um you know giving this div a class name so let's say class name and uh so uh before giving this a class names I'm just uh closing my terminal because I don't need it anymore and over here we will start by giving some stylings over here okay so let's say uh let's first of all make our width is equal to full uh display as Flex justify content Center item Center and uh let's uh fix the height as well so here I'm taking 80 VH VH means uh view Port height okay so uh similarly you can use u w VW which is uh view port with okay so uh this basically exist according to your particular screen size okay so that's why U we use VH to make it more responsive we also can uh use R but R is uh mostly you know uh difficult to control it okay so now let's move ahead and create one more Dev over here and uh inside this div as well I'm make giving some stylings uh first of all making this as Flex Flex call and justify Center item center now um there will be some spacing so let's say space uh y as 4 and withd of this particular D this this is basically the container in which we will be putting our form okay so uh um High uh width of sorry width of this particular uh container will be 80% and uh my for my medium devices my width will be 25% okay so once we will uh you know check the output you will get the idea why we are uh taking this particular values and if you want to you know increase or decrease the size you can do it now again I'm taking one H1 over here and I'm giving some classes to this particular H1 starting with the text so let's say text is equal to excel so that it will look little you know bigger font will be bold because this is my heading uh saying that the create account okay and text will be let's keep it left over here and here we will give create an account account like this now after this we will uh give an input tag so we are creating a form now so this is our input tag over here and on change of this particular input tag we will pass this value to our set user okay so we have created this variable right now what we have to do we just have to set the values over here so let's do that now uh on change of this particular uh you know input tag we will pass the data to our uh let's say first we have our set email or let let's keep set the username first okay so let's say on change sorry over here on change what we will do we will create one uh Arrow function which takes this uh e element and we will pass this data like this to set user name like this and inside that e do Target target. value okay so here basically this e is the data we are getting and this uh represents the e and e do Target value means whatever the value inside this particular input tag is that Target value okay so we will pass that particular we will give this function that particular data and we will uh inside our set username we will say that whatever the value that e contains not Target value whatever the value inside that particular e element we will give that to our particular uh set username and similarly we will do for our password for email address and everything okay so I hope this part is clear to you now uh we will also give some class names over here so I'll just write class name like this and over here we will make with as full and uh PX4 py2 and you can change these values okay we will also give some border border block and outline outline zero and uh type is equal to text and this type text will be out side of our particular you know um class name so this will be over here this is the properties of our uh input tag okay now uh we will also give some placeholder and this placeholder will say enter your name and this will be our first input tag okay now I'm not creating creating labels over here if you like you can create labels as well okay but I think just the input tags will look great and uh the demo which we have seen for our particular blog website had only input T so I'm just copying this particular part down like this over here I'm pasting it over here okay and uh over here I'll change this as a password first okay password and uh here I'll change this as a password password the type will be password to password and I guess uh before password we should take the email address so I'm just uh shifting this as down okay so uh the shortcut to shift this down is control shift and down arrow key or you can use up Bary to move it upwards okay so if you just select this particular part and if you just move like this you can change this location okay now I'm keeping password as uh at the end and over here I'm making this as an email like this and over here I'll also say type is equal to email and uh here we will give enter your email like this okay so I guess um this is complete ated and we don't need to change anything over here so U we will move ahead and create a button so on click of that particular button we will call our handle register so we have created this handle right and this hand what this handle does is this pass our particular data to our particular Endo okay so uh we are making use of our API o registered so we are passing this data to our register oath okay now let's let's create a button over here so let's a button like this and over here we will uh just write register register like this and over here uh first of all on click of this particular button we will have our you know handle register now let's give some class names over here let's make the as to full PX = to 4 p y is = to 4 also text is equal to LG like this and font will be bold then we will have text as white and uh background of this particular button will be black so this will be BG black then uh our button will also be rounded so I'm making it round LG you can use any other values as well however you like it okay H I'm keeping um H class also so on hovering that particular button the background will be changed nothing else will be uh you know Chang as just the background and our particular text okay so let's make it uh B gray um let's keep this 500 okay I guess 500 is fine and on H I also want my text to change to Black so let's make this as black okay now um so this button will have my uh handle registered so on click of this particular button my data will be send it to my you know backend so uh one more thing I have to do if you remember we have created our error right so over here let's say we are not able to send our data to our backet in that case what we will do we will uh you know also give some messages saying that the you know um there are some error occurred you you are not successfully loging and something like that okay so let's say if we already have the account we will say already have an account uh also okay and if there is some error so we will give text as something went wrong and if the account is successfully created we will say your account is successfully created okay so let's do that so first of all I'm checking whether I have the error or not so for that I'm using a ternary operator and for that uh to write any conditional you know operation so for that we use this curly braces and inside this curly braces we write our code so let's say error so uh this basically returns true or false right and why we are using and operation over here because um if my error is true and if my this part part is uh in that case this part will be displayed over here okay so let's say um H3 class name uh over here I'll be just you know returning that uh there is some error in your uh you know whenever you were trying to log in there was some error okay so let's just say text uh red let's keep with 500 and text will be small now we will uh give the text over here and over here we will say something went wrong like this now uh we can also you know give the success message but uh I guess whenever we will be successfully logging to our account in that case we will all we will automatically redirect to our homepage so there won't be any time to you know show that particular message you can do that by using tost but for this project I'm not making use of any kind of tost okay so if you like you can also download the npmi toasttify react uh in your this particular project and uh give particular toast okay according to your errors or you know uh whenever the uh account created successfully you can show a green color toast if the account is not created you can also say something went wrong something like that okay you can make use of your toast over here as well now uh let's create one more div over here now why we are creating this particular div in this div we will uh you know give the path to our login page why we are doing this because you know if I already have the account and by mistake I have clicked on register in that case I want to move to my login page as well so it is very uh basic Common Sense thing and and we generally see this part um on any general website we visit okay so let's say class name over here and uh let's first start by making our displays Flex justify Center item Center like this and space X3 like this now let's uh make the P tag over here saying that already already have an account account question mark and over here I'm creating one more ptag inside this I'll just say login and this tag will also have my link okay so let's create a link over here and I'm just keeping this between my link okay and uh this link will redirect us to our login page so my login endpoint was SL login and if you don't remember this you can move to your app.js uh where is my app.js I'll show you see over here I have said SL login for the login SL register for register okay so um use this particular uh points only okay so I'll move back to my register and over here I'll write some class names so let's say class name and first of all I'll make my text as gray text as gray 500 over will'll have text as black fine and I also want my footer over here at the end so I'm also rendering my footer over here I'll import it later footer like this and we will import a footer over here so let's say import and I guess my footer is inside my components okay footer from SL component slooter okay we also have to create a footer so uh let's first complete with our you know register and login page and then we will uh create a footer okay so let's move on to our login page so as I have mentioned login and registered page won't be much different so I'm just copying this particular part from my uh you know registered page and uh let's say I'm just uh copying all the headers first and pasting that to my login page over here like this over here and uh I'm removing this import because react is already imported over here and uh also I'm taking this particular part uh the whole thing this whole thing the function and everything okay so I'm taking this particular part and I'm pasting that over here before my return statement okay all right and after that I'm also copying this particular div and uh pasting that over here I'm just removing this particular part and I'm pasting that over here okay uh so uh we have done our copy pasting but there are few things we need to change first of all let's talk about all the functions and everything okay so uh this part is going to be uh the same but there will be one more uh thing over here uh that is our user so whenever we are logging into our website we also want our user profile over there right so so whenever we were registering we will directly you know uh set our user profile but when we are logging we have to set that particular user profile which matches the whatever the you know user uh logged into our particular website so for that let's say const over here let's set user um user like this and this set user is equal to use context context from uh react and uh inside that we will use user context so if you remember uh in our first or second video we have created our uh user context file right uh I'll show you that particular file inside my contacts I have this user contacts okay so this particular file we will be using inside our login to set the user so my U will be Capital over here okay mhm couldn't find user contact okay uh you cannot find because I haven't imported it so let's say user contacts so and contacts from contact SL user all right you can see this error is gone now now here if you have um like scene we have created one object empty object and inside that we have uh created a variable named as set user okay so now we will work on this particular part first of all I changing my handle register to handle login because this is login page and uh this operation will be same and over here we have to change few things okay so first of all inside my dry block uh we will be fetching the data because we already have this particular data and we don't have to send this data to our back end right so for that we will be uh fetching the data from our back end so over here this operation uh won't be happening uh there will be something else so uh here I'm just uh keeping this as it is but okay let's just write this again okay so I'm just uh removing everything from my tri block make sure you do this exactly uh as I do or else you might get an error over here because we have copy pasted the code from our register page so over here uh let's create uh one consonant as uh Aras and uh we will await this call and we will fetch the data from where we can get this data we can get this data from our API SL o inside my o I had my login for fetching this particular data right so like this you can fetch the data and uh we also have to mention the method the method will be post and and uh there has to be some headers when we are trying to get that data from particular uh back end file so uh we will mention some header so we will say that um content type is equal to application SL Json okay so this is returning the data type so our particular data which we are getting back from our uh this particular API or the data we are sending to this particular API is in the form of adjacent okay and uh credentials we will include the credentials okay so I'll just write include over here so you can omit this credentials credentials is basically that token which is getting generated and you know uh the password we are passing to this particular you know user so we also have to pass that particular credentials so that's why I'm uh writing credentials as included or else what you can do uh there is one more way to do this particular task you can always use uh exil I'm for this one I'm using fetch over here and you can use exhaust as well so whenever you are using the exhaust part uh that will be similar to our register page but just to show you guys how fetch works I'm using uh this particular part okay uh I'm using fetch over here now after that we will also write body inside body we will pass Json do stringify uh and uh inside this we will have our email colon as email comma password is a password and this will be in object formation so like this okay password colon password right now uh let's try to handle this particular errors over here as well now let's say uh if our response is okay in that case what we want to do we want to set this particular data and we want to uh set this particular data inside of keys as well right so uh for that I'm writing this particular uh condition so let's say if response returns okay so when the response returns okay when my um you know URL call is successful or you can say my uh fetch function worked properly so so over there what we will do we will create one constant let's say data is equal to a wait response do Json so uh this function basically extract the Json data now we will create a cookie so let's say constant cese is equal to rest Dot header doget and inside this we will say set cookie okay like this now uh let's also console our uh you know data and cookie so let's say data column command data like this and uh let's also console do one cookies T come on now uh if this much is successful in the that case what we will do we will set the user set user the uh this is a variable which we have just created uh object variable as a data so this data basically returns everything every information about our user okay so we are setting that particular data as set user now we will write one else condition over here and we will console the error so let's say conso dot error so this data will be in yellow color and this if the we get the error it will be in the red color inside our console okay so over here we will uh write request request failed with status status comma rest do status like this so what rest. status return if you remember uh we used to set the uh response. error as a 400 300 right so uh that particular status will be returned over here let's say if the user is not found in that case there will be 44 error if uh you know uh the request was failed in that case there will be 500 error right so like that so it will uh return you based on your request now if the login is successful we also have to navigate right so outside this else block I'm writing navigate where to navigate we have to navigate to homepage because we have already successfully login and in case we get any error uh the statement will remain same so I'm uh keeping this as it is over here uh we will write uh register instead of login so let's just uh change this endpoint as register like this and over here I'm also writing this as register register and uh let's check if we uh need to you know change anything else or not and uh let's keep this as login to your account or okay we can keep that let's say login to your account like this now uh we will remove this username from here we will just keep our set email and set password okay now on click of this particular button there will be handle login not registered because because we removed this so let's say uh handle login and uh over here instead of saying already have an account we will say new here okay you can change this lines according to your needs okay here like this and uh this will redirect you to the register page register and we will also write register over here register like this and our login page is also done now um let's try to check this particular part whether it's running or not okay now uh let's open our terminal so I'm opening a new terminal over here and inside my this terminal if you see I already have my front end open so let's say npm Run start and let's also you know uh run our back end as well back end npm run start and let's move to our output okay it's getting loaded let's wait okay our back end is successfully back end is running fine and over here you can see this error saying that the URL is imported not found in okay okay so over here here the error is uh I forgot to mention this curly braces over here so just mention this curly braces like this and this error will be gone and over here you can see uh in the warning you can see that uh username is defined but never used so inside my login uh we haven't take any username right so I'm just removing this particular part from here you can see uh this is successfully compiled and let's move to the output and let's look at our login page okay you can see I have uh you know uh make mistake in my URL so I'll just move to my homepage app.js and over here okay not in my homepage uh I have made mistake in my my nav bar so if I'll just go to my navigation bar and uh uh let's look for our login over here you can see uh there are no end points like that so let's move I have just corrected this as login and let's move back once and let's click on login so here you can see uh you have this perfect looking login page and uh let's try to login uh using our existing you know account we have created so we had this account as test gmail.com and uh I also have the password for that as 1 2 3 4 5 6 and let's click on register so you can see uh we have redirect to our long homepage now uh one thing uh one more thing we have to do over here is if you look at this login page this button says register but we don't want register right we want it to show as login so I'm just changing this particular part inside my uh login page over here if I'll just move little down over here it will just say not this one this one this button would say log in now let's move back now it's beautiful like it's perfect so if I'll just click on this register I'll be moving to my register page and if I'll click on to login I'll move to my login page so this is working just fine my back end is also uh working with this okay now you see this this is just a tiny footer written over here we don't want that right we want it to look like um you know the actual footer we have Chown whenever we we're creating uh this particular demo and if you noticed over here uh over here there are no nav bar over here is just uh you know logo of our application and the login option or you can say register option if you are in the login page so um now let's just create this particular footer now let's quickly close all of this and uh open our footer so we are inside our footer and over here inside this particular Dev I'm creating one more div like this and U let's start by giving some class names over here okay um class name like this and let's say mt8 then width will be full background let's keep it black like this PX as 8 and MD colum DX for my medium screen my PX will be uh 300 pixel so uh this is what uh fits best in my screen so if you would like to change this you can change this accordingly okay and uh for my medium screen I'm making my Flex as row otherwise my Flex will be colum okay so why I'm making this because in my small screen if my footer is like this it won't be visible right my text will be very small in that case but if my foter is is like this there is like proper you know font size and everything will be uh working in that so that's why I'm making uh flexes Row in medium SC screen and flexes column in my regular screen now let's say space uh Y is six and my medium screen will have space y as zero because otherwise the footer will be very big right so I don't want that either and why I'm writing this over here this will be over here okay now uh now let's also uh make our items as start like this and uh let's also make our Medium as justify between and uh text will be small and for my medium text will be medium and E will be it like this now this is my uh basic outline of my particular footer now we will start by uh writing everything inside my particular footer so I'm creating one more def to keep all the things together and over here let's give some class name so let's say class name uh let's make this place Flex Flex call and text as white uh let's make one e over here and let's say featured featured blogs you can uh if you want you can uh give links over here but I'm not giving any kind of links over here okay most viewed most viewed like this and uh Also let's just make reader Choice as well so I'm just randomly uh writing anything inside my footer if you want you can change this text as well and why my other P tags are not visible over here okay sorry for that uh I'll just write this word again Readers Choice like this okay now uh similarly uh we will do for our other you know tags as well so I'm just copying this particular diff three times so that I have like many more items to put in my footer so I'll just keep this like this so if I'll just show you the output right now you can see this is my particular footer right now but uh we will change this part and we will change this part okay and I guess there are some um less spacing over here we will fix that as well so um first of all let's do that okay so generally I'll have a space as six and then my space will be zero right let's just keep it side by side over here so if you see in my medium screen it is like this and and for my medium screen justifi content will be um let's make it Center I guess okay now change if I just reduce my screen size a bit okay it's uhit in between only so let's fix that let's let's try to fix that just remove this part then okay now all right okay so um let's also you know I messed this up a little I'm just making it control side over here and let's okay uh I guess uh as of now this is fine we will uh make necessary changes later so over here I have also made my py as 10 because I felt that this Gap is very less okay uh you can adjust this things accordingly now let's move ahead and uh change this particular uh text over here and we will also give one all right reserves um uh Trad Mark also okay so over here uh let's change this uh Dev over here inside this particular P tag I write Forum Forum uh or let's also give support support like this and U Also let's make this as a recent recent like this recent post and uh over here let's say privacy policy and okay let's say privacy privacy policy policy like this then they also have about us about us then we'll write over here terms and conditions terms and condition conditions okay now after this particular D what I'll be doing um let's create one P tag over here so here I'm creating P tag and inside this P tag let's first start by giving some class names over here and why this p is removed okay sorry okay now over here let's start by giving some class name so let's say class name like this and U let's start by giving some class names as py as 2 uh PBS 6 and text will be in the center Center like this text will be white and color text will be white background will remain black like this and uh text font will be small like this now uh inside this particular P tag we will write all rights rights reserved reserved at the rate uh in telepath in telepath 20 24 like this so over here you can see this all right Reserve tag all right now uh let's also try to make this text as in Center so let's just say text Center like this let's see if anything changed or not no I don't want the alignment to be in Center I just want the my whole thing to be in Center okay um okay so uh if I just say uh for my I'm just removing this part I don't know why there is some issue with our telin you see I'm just removing the medium screen and it is changing in my big screen and I'm mentioning the small screen as Center so it's giving my small screen and justify between or Justify start I don't know what's wrong with this but uh as of now let's not uh waste our time on this and um let's move ahead so uh in this video we have completed our login page our registered page and our footer part okay so in next video we will be creating another amazing components so make sure you subscribe to IND YouTube channel and keep creating this particular project alongside with me and I'll see you guys in next one just a quick info guys intellipath offers a fullstack developer course which enable you to learn textech from both front end and backend through this course you will gain hands-on experience with the skills and Technologies such as SQL Java data structure JavaScript HTML CSS nodejs and react under the guidance of industrial professionals with this course we have already helped thousands of professional in successful career transition you can check out the testimonial on our Achievers Channel whose link is given in the description below without a doubt this course can set your careers to New Height so visit the course page link given in the description and take the first step towards the career growth with the fullstack developer course

Channel: Intellipaat

Views: 8,026

Keywords: How To Resolve CORS Error In React, React Proxy To Back End, Blog Application MERN, CORS In React JS, CORS Error In React JS Fetch, React Proxy To Backend, React Proxy Error, React Proxy Not Working, React Proxy Server, Footer React JS, Register in React JS, MERN Project For Resume, MERN Stack Project Tutorial, MERN Stack Blog Project, MERN Stack Blog App, MERN Tutorial, MERN Stack App, Blog App, Javascript, Fullstack Javascript, Node, Express, React, MongoDB, Intellipaat

Id: VYq0E3a2H5A

Length: 69min 0sec (4140 seconds)

Published: Tue Feb 20 2024