Build a Modern UI/UX Marvel App w/ Next.js 14 || Part 2: Frontend Auth & Canva-Designed Banner

[Music] hey there guys welcome back to part two of our application uh in part one we went over o and O contact so both the back end and the front end in this one part two we're going to be working on login log out registration and we're also going to be starting with the hero section so with that said don't forget to like comment and subscribe if you do enjoy this video and let's get right into it so what we want to do is we want to create create our nav so we want to create uh three things we want to create our navigation our login and our register so how do we do that we can come into our components here new file and this is just going to be nav jsx great uh ra fce and then uh we can create something else within our component called login. jsx R afce and then we can create our register. jsx and this is RF C cool now we're going to use this page.js within our uh um uh our app route well within our app folder so this uh page.js we're going to come in here and for uh uh we're going to make this our login so this route is going to pertain to our login so let's go ahead and import that I don't know why it didn't Auto Import so let's say import import login there we go and then we want to create a register route So within app not API let's close out API within app we want to open up a new file and this file well new file actually it's going to be new folder and this is going to be called register and we're going to say new file within register and this is just going to be page.js so what we can do is we can just copy this go to page and then we can change this to register cool and just take out the login so now if we open up our application um we can go over to npm run Dev when we open this up let's see um the initial page should give us a login so at model user is not being okay so that was a problem let's see why um and this is within SL API user and for some reason this is not being exported um first of all they should be model not models so let's see if that works no that gives us another error so let's see why next response is not defined and this is route number 37 uh how is it not defin let's see why okay all right all right just quick debug in there there we go so now Local Host when you open it up should say login and when you go to the register route it should say register so there's a problem there let's see when we go to register it should say register so let's look at that register compon component um did we save it okay let's try that again so with components we have register we exported it um now if we come over to app we have this register page page.js show there we go so now if we come over to register we see register I think we just didn't save things properly so let's quickly run over and do our uh nav so if we come over to nav uh to components we can go to navigation uh so nav and let's close out of all of this so we're all everything works fine so with nav what we're doing is we're simply just creating our nav bar and we're giving it some functions to state that if the user is available then show this if not show that that's pretty much it so let's go ahead and do that so within navigation what we want to do first is we want to come in here and uh we want to go to our layout so when we go to layout we want to come over to auth provider and we want to plug in that nav here and that's because we want the nav to be above everything uh within every route and every page we do so uh that's why we do this so now if we come over here as you can see that nav is instituted above our register so that's where the it it's serving this nav right here the text is serving as a placeholder so when we go back what we want to say is import react and we're going to just passing a couple of things we're going to import uh use State uh use effect um and we're going to be using use ref cool uh when we do that uh what we want to do now let's see what's going on okay it doesn't like use ref for some reason okay so it's giving us an error right now and that's because we need to put use client here there we go so let's go ahead and save that and now down here we want to open another one and here we want to say mpm install and here we're going to be installing material UI so let's go on Google real quick and here we're going to say material UI and um let's go ahead and click get getting started and all you want to do is go to installation you're going to copy this and that's it we can come back down here and install that and then while that's installing we need one more thing so let's go over to Google and then we're just going to uh uh search for material UI icons and then we're going to go to the first one here and for the installation you can see it right here we're just going to go and copy that close out of this again and paste that in there so as that's done let's go ahead and clay out of that we can close this and now we can import a couple of things from uh material UI so we're going to say import and this is going to be menu icon uh from this is going to be um at Material UI icons um material so here we're going to have menu / menu cool uh we're going to do this for a couple of them so actually just one more not a couple so this is going to be menu icon this is going to be close icon and here we're going to have close cool uh now we're going to say input uh we're going to use use off there we go so we're going to not input import use off and here we're going to be importing axios as well uh we're also going to be importing uh use router and make sure we're using next navigation and then lastly we're going to be importing uh use param not use param use path name there we go and that's it that's all those are all the things we're going to be importing so for nav what I'm going to do is I'm going to write out the function however when it comes to actually building out the the navigation I'm just going to speedrun through that because that's mostly CSS uh but I will be working with the working out the function logic with you guys so here what we want to do first is we going to say const and since we're getting this from okay let's make sure this is cool cool so uh since we're getting um this state hooks from uh use off we're going to put this within um curly Braes so user set user is equal to use off awesome and now this we're going to say const open set open is equal to you state and this is going to be false and and here we're going to say cons menu ref is equal to use ref null and this is going to say cons router is equal to use router awesome and we're going to say con path name is equal to use path name and this is going to be used to get the current path so now for the logic what we want to say is we want to create a handle open for our uh uh for our um menu bar so we're going to say const handle open is equal to I'm going to use a arrow function set open and we're going to set it to true so this is going to open up our um it's going to open up our uh uh menu bar so here we're going to say const handle close and here we're going to stay it's also going to be an arrow function we're going to State um set open and here's going to be false cool uh now we want to create our uh logout function so we're going to say handle logout is equal to a sync Arrow function and here we're going to State try catch and for try we're going to say cons response is equal to await axios.com slash well it should be slash API SL logout and here we should say if response. status is equal to 200 then we want to set the user to null and then we want to router. push to the login page now for catch error we're going to say console. error error login out and then we want to say [Music] error cool and that's pretty much it now we just want to invoke the use effect so we're going to say use effect cool and then here we want to say const handle click outside and this is for when you have the side menu so handle click outside is equal to event and for this event we're going to say if menu ref do current and there's no menu ref [Music] current. contains um event.target then what we want to do is set open to false so what this is saying is if you click anywhere outside of the menu so let's show you an example really quickly so if I go to my application here and I sign in so if I sign in here and I go over to the menu here if I click anywhere outside of that menu it closes so that's all it's stating right now so uh we'll see it in action when we build it out um but that's that's what this uh use effect is doing so we also want to have a document. add event listener and this is going to be for um different Mouse uh events so Mouse down we're going to say handle click outside and here we want to return um document. remove event listener Mouse down handle click outside so actually all this should be within my use effect there we go can now State cons handle item click is equal to um set open to false there we go so we have this now we're just going to build out our navigation so let's close this out let's minimize this a bit let's do this and let's do this so now we can see what we build um now like I said I'm not really going to build it uh and explain every single step of the way I'm just going to build it and let you guys see how it's getting built out [Music] a [Music] o [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] all right guys so we're pretty much done with the whole thingin um all we have left now is when we come over to the button class name here uh we can just add in this which is just text white padn y of 2 padn x of5 rounded and transition and that's pretty much it so this is the whole code here um and now we can head over uh to our register uh component So within our register component we're going to go ahead and do the same thing we did for the nav so I'm going to show you the logic and how it works and then I'm going to just speed run through building out the register form so what we want to do first here is we want to make sure that this States well let's go back so we want to make sure that this state um use client let's go ahead and save that now we can come over and click this register button and it's going to take us right to register we can't see it right now because this nav is blocking it but we're going to go ahead and fix that when we work on our CSS so what we want to do first here is um we're going to import axios from axios uh we're going to be using um uh the the use effect so we're going to come over here and we're going to State use effect uh we're also going to be using um uh actually we're going to be using use State not use effect so use State awesome so we're going to be using use State and then we're going to be using next navigation for uh for use router so import um use router and it's going to be next navigation and then lastly we're going to be using import use off there we go awesome so now we we can come over here and we can just start writing stuff out we can start writing logic out so here we want to say const uh username set username is equal to use State and here's this and then it's going to be const password set password is equal to use State and here it's going to be const email and it's going to be set email is equal to use State null lastly we're going to have con error set error is equal to use State and this is going to be null so this is actually going to be a string not null and here here we're going to have cons router is equal to use [Music] router and as we go on we're going to see how this works so now we want to write our handle submit function so cons handle submit is equal to a sync and this is going to be e. prevent default then we're going to say try catch and for try we're going to say const remember we're destructuring it so status here is going to be registration status registration status um and this is going to equal await ao. get SL API SL register here we're going to say email so we're sending back the email the password and the username so after we do that we want to set email to an empty string uh set password to an empty string and we want to set um username to an empty string great and now we also want to set error to null great so the now we want to give it another function we want to say if we want to give it some other logic so here we're going to say if register status is equal to 200 meaning it's successful then we want to say const status login status is equal to await axos API login username password and if login status is equal to 200 then we want to State await fetch data and this is going to be router. push slh hero so what does this mean so all we're doing here is basically we're creating this handle submit function where we're going to be passing in the the email password and username to the back end and then we're going to be uh we're going to have this two-part logic saying if register uh if register is successful like registration is successful then we want to log in automatically so so um we want to push the we want to post to API login the username and the password that we have in here and then if the login status is 200 then we just automatically push to the hero page so that way if you register you don't have to register and then go to the login page and log in once you register it logs you right in um that's that's exactly what this function is is stating so now with the catch so let's do this now with the catch we can now State um if error. response and error. response. status is equal to 409 because that's where we set it in the back end then we want to set error to user already exists um please log in else we want to State set error to an error occurred please try again there you go and now we can State um where is this there we go console error and we can say error and error let's fix this really quickly there we go so now we can go on to our return here so for this I'm going to speed run through it in fact not even speedrun through it I am just going to create I'm just going to copy and paste from my own project into here because we should already know how to create a register uh register and login page so it's nothing new that I'm adding I'm just going to create it using CSS and add in the functions we have here into it and that's it so I'm going to copy and paste it right now great so here's our register for form so as you can see this just has the typical handle submit we have an error here uh a error message that inputs here if there's an error uh user name uh uh the email and the password input fields and then we have a register button so you can go ahead and configure this however you want I can slow scroll through this in case you guys want to just uh pause it and see what's going on in every line so we have the return here and then we have this and then we have this and I'm just going to keep scrolling down slowly so you guys could see [Music] it awesome so if you were able to uh to uh pause that you would be able to see the whole thing however you guys don't really have to do that because uh uh the repo link is going to be posted to it at the end of this uh project so not necessarily this part but the end of the whole project I'm always going to post the repo uh the the the uh repository link so you guys can go ahead and clone it or just view it whatever you want to do um so yeah that's that's that's pretty much how you do the the register so let's create our login first and then um we're going to create our login input field so that way we can also have a login input then we can create our hero page and then we can test everything at the same time so let's go ahead and do that so here we are in our login component so in order to go to our login route we just have to go to this or we can go register and then go back to login and we're right back here so for login it's going to be similar to what I just did in register I'm going to show you how the function works I mean how the logic Works to login and now I'm just going to copy and paste the field for the login so for login it's going to be something similar to register here we're just going to have the import we're going to be use using use uh router and this is for navigation let's go ahead and wrap that and then here we're going to say import use off there we go and then we're going to State import axios there we go so let's see uh fail to compile blah blah blah oh so we forgot to use use client up here so that's important awesome so there we go now uh for login what we're going to state is const so we're going to be using our state hooks so use um username set username is equal to use State we can say const um password set password is equal to um use State same thing and since we're only going to be using username and password to log in we can just go straight to our error set error is equal to use use off I mean use State and this use state is going to be the same thing there we go now we're going to say const fetch data and we're grabbing this from use o cool and here we're going to say cons router is equal to use router cool so it says use state is not Define so we forgot to import it here so we're going to say use state there we go so we're good there so now as usual we're going to now create our con uh our handle uh submit so con handle submit is equal to a sync E I'm going to say e. prevent default and here we're going to say try catch for try we're going to say const status login status is equal to await axios dopost slap SL login and here it's going to be password and username that's being passed to the back end and here we're going to say await fetch data so we're running that um that fetch data function from our uh Au Conta text and then we're going to State set username to an empty string and set password to an empty string now the logic is going to be if let's come up here if um login status is equal to 200 then we want to State await fetch data and we want to router. push to SL hero awesome so it's pretty much the same idea um that we're using so that's what we're doing here the same one we did in um in um register so we're doing the same thing here similarly so um it's it's it's a pretty easy uh easy logic to understand so here we're going to say console.log error and we're going to State console. error error login in and here it's going to be error so here we want to State uh set error and this is going to be um error. response. dat. message awesome uh uh this how we want to spell login in uh it should be a g here there we go awesome so that's pretty much the idea so we're saying if there's logest status of 200 then a weit fetched data and then we're just going to push to uh um to the hero page here we're passing things down to the back end uh it's pretty much it so for the return statement I'm going to go ahead and copy and paste my login form as well so it's going to be look very similar to that of register it's just not going to have the email component the email input field I mean so this this is what the login page looks like when you uh return this uh input field so it looks like this this is the code for it like I said I'm going to be posting the the repo link so you guys can look at that later on uh but I'm just going to scroll down so you guys can see what I have so far so you guys could see that part and then we're just going to go down as you can see we have the username there um this is the input for that and then we're going to go all the way down to password so for password it's all the way down here here um and then we're going to have our login button so we're going to scroll all the way down and we're going to see um our submit button which is going to be our login button so this is going to be all the way down here so that's pretty much it so that's all that is for login so now if you do anything it's not really going to work because we don't have a hero page that it's being pushed to so let's go ahead and create our hero page and then we'll be able to see what goes on with our hero page so in order to build our our hero section what we want to do is we want to come back here and for components we're just going to have a new file and that file is going to be called hero. jsx and we're going to do our afce as usual great so let's actually open this up all the way so let's save that and then what we want to do is we want to come over to our uh Source folder our source uh yeah to our app folder and here we're going to create a new folder and this is going to be called hero and for hero we're just going to make a new file and this is going to call P.J yes then we'll go ahead and save that so now we can come over to register and we're just going to copy all this and go back to Hero So within the past. JS we're going to paste that in there except we're just going to take out register and we're going to call this um hero awesome so here we have our hero uh our hero uh uh component within the within the route so um in within this route we're going to have things like the comics and the characters and things like that but for right now let's just go ahead and create that hero page um because the hero page right now is uh if you go to middleware it's one of the pages that you need to be registered to go into um so we're not going to be able to view anything within the hero page until we log in so let's go ahead and create um the the hero page uh the hero let's go ahead and create the everything for the hero component and then we're going to be able to go log in and go to that hero section so in order to build out this component what I need to do is leverage canva so uh I'm going to be using the the the website canva to build out my hero Banner so the way I go about that is first this is what I mean by the by the hero Banner so I want to create this portion so what I need to do is I need to go over to canva and I have a premium account but you guys can use uh a free account for this so I want to go over to customize size or custom size and I'm going to be using 1920x 800 pixels so it's going to come up with this uh design template here and then I want to go over to Google and I'm going to type in top five Marvel characters and I'm going to find an image so as you can see we have this so this is the image that I used so I can go ahead and just copy this image so copy image uh close that out and then come right here and just paste this image here so what I'm trying to do now is I'm just going to make all of my uh background black uh black not brown there we go and then for the image I can go ahead and just remove the background so as you can see the background's been removed so all I have to do now is just pull this this way so so the image I found was a bit more clear than this so because of time I couldn't really find the exact image that I used but if you go and search like Marvel characters wallpaper 4K or something along that line uh it's going to show you something like this so I can go ahead and use the same image that I already found that I used so I'm just going to go over to my uploads and just paste that in there so this was the exact image that I used so if you guys don't want to use this exact image like I'm saying you can use whatever image you want and then all you have to do is just make it big enough for it to look good as your uh Banner so here I just want to make sure it's centered and when you do this you're also going to realize that when you upload it um or use it as your banner you can come back and make changes maybe it's not centered well enough or this or that you can do that so we're just going to call this um YouTube uh Marvel banner and another trick is when you want to save it just go ahead and hit share and then you want to hit download and when you hit download make sure you share it uh you the file type is jpg and then you want to make sure the quality is 100% And then you can go ahead and download that so remember we're saving it as YouTube Marvel banner. jpeg um so I mean. JP G so what we can do is close out of all of this so now we can come back to our project let's close out of that and let's minimize this so now we can come to our project and we can go over to public over here and we just want to drag and drop what we have within our downloads so as you can see we've gone ahead and uh dragged the the downloaded uh file into the public folder so this is what we have it's the same thing we saved now we can go ahead and just rename it and we're just going to call this uh Marvel home or something yeah so we can name it this so now we have what we need for our Banner we can come down here uh we can close out of that and come right into hero and here we're just going to be importing that and using CSS to change things so here for our uh hero component what we're going to state is within this return we're just going to say div um and we're going to go straight to class name and for class name we're going to say relative uh we're going to say width is full height is full we're going to have an overflow of hidden and paddent top of seven view height awesome and now within this div we're going to have the image so let's do this and this image source is going to be um let's just say slash and it's going to be SL SL whatever we named it uh within the public folder so it's going to be/ Marvel uh home.jpg now the alt is going to be so we're going to say alt is equal to and this is just going to be called Marvel Banner um and then we're going to have um width and width is going to be 1920 because that's what we have it as when we saved it and for height we're just going to go with 700 and then for style we're going to State let's do this is equal to and here we're going to say object uh is going to be this should be lowercase is going to be um fit actually it's going to be object fit is going to be cover and then we're going to have priority is going to be true now we can go ahead and close this out so let's see so this is what we have so far so let's see if it works and the way we see if this works works we have to do a couple of things so let's go over to register so the component so uh for those of you who already try to register you probably are encountering an error that's because of at least three things so uh when I wrote this I remember I think um this should have said set this said set password but I believe it was in lowercase so I went ahead and changed it post um post edit but I forgot to uh save it and then show you guys what the change was I mean I forgot to comment out what the what the wrong one was and then show you what the right one was so I'm going off of memory here so here it says set password but I believe it was in lowercase rather than in um in camel case like this so this has to be in camel case for set password at the top here this should have been a post request not a get request and then for status status should be the same thing as register status here so this should not have been registration status it should just been register status and register status so this two should be the same thing uh status here should be register status and if register status is 200 so these should been the same and then at the bottom here I just went ahead and changed this um catch error so I have this uh as a brand new uh catch error so I have if error. response uh and error. response to status is 409 then set the error to user already exist please log in else set error to an error occurred please try again and then uh lastly we can just console. error error error well console. error error and then error so that's that was pretty much it um I don't think there was anything I have to change here um all this was fine um so for the most part it was just uh I think here also we had to change this to cam case for set password and that was pretty much it so um that should work if it doesn't leave a comment in the comment section uh because I think those are the only three things that needed to to be changed uh I forgot to just comment out what wasn't working and show you guys the difference but I'm pretty sure it was just those I'm pretty sure it was just those three things so you should be all set once you make that change uh for login that were Works um I didn't I don't remember seeing any um any uh syntax error there so with that said now let's go over and minimize this and now we can go over to register so when we go to register um now if we go to username we can just say test one uh uh email will be test1 test.com and then password will be test one so if we go ahead and hit register it takes us right to that hero page as you can see it says High test one and when we click this um it covers the whole page because right now it's in sort of a mobile view and then if you click this x it closes right out of it and this is our uh Banner that we just created so it works perfectly fine um also if we hit log out we're completely good so right now it just takes us to the login screen um remember you can hit register to take you to register and then hit login and take you back to login and for the username since we already register let's see if it works so test one well it should be test one and then password test one so if we log in there we go so we're back logged in so as you can see our hero Banner worked perfectly and our login and register uh and registration uh form works as well so with that said now if we look at the actual project we're trying to build you can see that what comes next is this discover comic section so this is what we're going to be build building out so first we're going to start with the back end uh to push the information to the front end uh so this is the next step what we're going to quickly do is we're going to create the comic modal uh not modal the comic model for saving our comics in our database so let's go ahead and do that so what we want to do is close out of this and close out of this and then we can come straight to model right here so let's if we if we close out of um everything else you're going to see that it's with within um let's just close out of all of this it's within our source folder and you'll see model the same place we have the user.js instead this is going to be a new file and this is just going to be called comics. UJS so or you can let's call it let's rename it as comic. JS there we go so now within this we can now import uh Mongoose from mongus and then we can come over and just create the schema so it'll be comic schema um and it's going to equal and this is going to be new mongus not Mongoose and do schema and now we're going to create our schema for this so the schema is going to be written the same way uh the API data is being fetched so the same structure that uh Marvel API sends the data in uh the same Json uh structure is the same way we're going to write out our comic uh schema uh is the same way we're going to save our schema within the database so here we're going to say comic ID and this is going to be your string so what this comic ID does is it it's used to um uh to uniquely identify each comic so for example if we're trying to get saved Comics or specific comic we can refer to that comic ID so now we can also have title and all this is going to be in lowercase so title and this is also going to be a string uh we're going to have [Music] description and this is going to be a string now for thumbnail thumbnail this is going to be an object and it's going to have the path which is going to be a string so string and we're going to have um the extension which is also going to be a string so uh for Marvel API the way we get the thumbnail is we have to have the path and the extension so now we're going to have the URLs and this is just going to be a string it's an array of strings [Music] um okay what's wrong here let's see oh we didn't put a comma here there we go and if anyone knows how to take out that uh suggestion so like all this like when I'm typing and that suggestion like blows up uh let me know in the comment section cuz I don't want to Google it so uh but if you guys don't know then I guess I'll Google it but yeah so for example let's see if it pops up again but for user what we're going to say is type and the type here is going to be mongus do schema. types Doob ID um and we're going to say oh this is what I mean so you see how this comes up do do you guys know how to like just not have that pop up so if you guys do let me know in the comment section um so here we're going to say uh reference to user so it's going to basically when we save something we want it to be saved to a particular user so this is going to be a reference to a user and then we're going to say required is true got it so here it's going to be user um type is m. schema. types. object ID comma uh reference to user comma uh required is true and then lastly we're going to have something called saved and this is going to let the user know um if the item has been saved in a database so when we call um items from the database that's saved um for our saved page we need the items that's within our saved page to have the saved uh uh field as true so here we're going to say type is bullan we're going to say um default is going to be true and all this is going to make sense once we actually let's do this there we go so all this is going to make sense once we actually start implementing this in our front end you're going to see what we mean or when we start writing the logic uh in our back end you're going to see how all this is going to come together um now we can input time stamps so time stamps and this is going to be true awesome now we can export it so we're going to say export default do models plural. comic or uh mongus do model um and then we're just going to say comic and this is going to be um comic schema there we go so just like that we have everything um what's it called just like that we have everything um um uh set up for our schema so this is what it's going to look like for our schema um and lastly all we're doing is exporting it so just just like that we're pretty much done with this part in our next part we actually start building the back end and seeing things come to fruition when it comes to our data so we're going to see our data uh get get um used in the front end to display things such as um the comics the the characters and the titles for right now we're taking a step by step just so it's not overwhelming so in this one what we did was we created our login uh functionality our login our um uh login our register and our log out so what we need to and we we started with our hero page so we created the banner for it so what we're doing next is finishing up that hero route so everything we're going to see on our hero page we're finishing it up on the next one or at least we're going to attempt to finish it up on the next one so um thanks for watching don't forget to like comment and subscribe if you do enjoy the series and I'll see you guys on the next one peace [Music] y

Channel: Akin

Views: 266

Keywords:

Id: Z43sIuW-Mm0

Length: 50min 29sec (3029 seconds)

Published: Sat Jul 13 2024