Build and Deploy a Fullstack Next.js 14 App with Shadcn, Tailwind, Zod, Prisma & PostgreSQL

hey interet and welcome so basically this is what we be building today and um yeah I'm just going to take you guys through the entire process and how as well the back end itself was basically integrated we built the landing page we built the login part and as well as the L dashboard we have so now this is what we have this is the um enough session the hero section so we can actually screw down this is the um collaboration section so this is the um supporter section this is the features section this is the benefit section and lastly we have the photo right so nice so now what I want to do is to check the mobile responsive responsiveness so click on inspect you want to click on here you can see that it's extremely very very mobile responsive you can see that the small device it looks great as well so with the fotter right so this is the uger I can click on it to see more options can close close it as well by clicking on there right so what I want to do real quick is to go to the login page so this is going to take you to the actual login right and there's a register part as well going to register so I'm going to demo it by actually creating a very new account going to call this um let me not use James faor rodic okay let's try out and we can just say faic gmail.com we use some sort of random password so I want to register can see that this was created successfully and I was was redirected back to the login page to login so I'm going to save that and try to log in so you can see we have some nice preloader and then we have our information so now on the dashboard we have access to all of the users per se users in the platform we have the to verified so far I have not verified that's why I get to see this verify me button and the total channels right so these are what we will be building and I want to quickly like verify me click on the verify me button you can see that I'm verified now and now this is now seven and you can see me at the bottom verified is now yes so this is something we'll be building out using amness js14 and we want to make sure that we're using both the server side and the client side in this tutorial and we actually UNL every form of validations using Zod right so um enjoy watching all right so um yeah as I said earlier we basically have a startup Branch so you can change it to this so you see that we don't really have much going on so it's just like a set up um you know Branch so what we're going to do is to come in here right so let's see um he's not ahead okay that's good so click come in here click on this little green ey um button so you're going to see the https um cable link so want to grab that real quick right so what we want to do is we want to go to to our um okay so I'm going to go quickly to the U project itself right so here once we're here you can actually open up any terminal of choice right so what we're going to do real quick we're going to run this command so and this is going to you know clone the repository itself right so we can start working on it so we're going to wait for it to clone it's done so basically want to C into that particular repository is because I think full stock okay I think it's [Music] SAS Landing okay good so we see everything within the repository what I want to do at this stage now is to basically install our packages right so we could just do have install so this going to run you know try to install all the different Port packages we have within the system so we give it a moment normally takes a while and um so it really is complete we can actually um there right back in [Music] okay I think definitely I will be okay so it's actually complete now and um yeah so the very next command you run is the dev Command right so make sure it's spells correctly and um it's going to try to boost um um Bo trap the local server all right so basically have this now but it's not compiled yet but you can just quickly go to the link and um while you're doing that just note that is actually trying to compile and it's not done yet so we just wait for a couple of seconds and it should be complete okay so it's compiling and um yeah yeah we should be there should be there in a moment okay he actually done you know compiling so yeah so when you clone that particular repository this is the first one you see right so you get to see the r um page and then you see a couple of other things so I've actually updated you know it to include the login as well as the register right so the way this works is I've actually prebuilt this component you know I'll dive in later on you know to basically show you guys um you know the the actual structure of the entire application so I'll still explain it um in I explain both individually but it just has to be you know me working you guys through the process on how it was basically created all right so basically we want to start up with you know building the actual you know landing page right so um yeah so this is where we start up we try to first of all get the color schem right so when we have that in handy we can actually move on to extracting the assets so um basically this is how we're going to go about it now since we already have the project you can open it open it up and just um you know have it in your you know vs terminal if you're usings code or you can open up in Vim you whatever editor you're using basically right so yeah so basically what we have you can actually see we have some sort of setup already for prism and all right so we have EMV sample as well so we come over this later in the video all right so this is what what what we're going to to do now we're going to like focus on the things that are really relevant right so that has to do with us extracting the color schem right so I think we already have an idea of what the primary color looks like which is 5 54b so we take a look at here we basically have 54b so we don't have to worry about that too too much right so we have a couple of like black um colors all over that's not going to be a problem but then one color that that actually stands out is this color is it's more of you a very dark bluish color so going to grab that and then you know just save it so in it actually appear in a couple of places I think right so let's compare it if is the same as this it's not it's not really the same but it did appear in other places as well this is 1 nine this is one n okay okay so we should basically have our own black color so we just set that out so we can call it not black but dark so it won't conflict with u TS default what we're going to do here is we could just say fotter background so you're going to have that pasted in right and um yeah so there we go we have have the other headers which is what we're going to you know label as dark so here we can actually specify that real quick that's going to be the dark color will be playing with right so yeah handly I I I I really think those are like all the colors you need to worry about the primary color here which is the brown color and a couple of other like black colors and then we have gray right so this gray you can just you know select it and let's switch this to Dev mode and then yeah so this is actually our gray color you can copy that so you can actually just refer to that as custom gray doesn't matter so custom gra right so um yeah so custom Bally takes up other shapes as well like this data braks um chain analysis they are mostly very very related A6 A6 basically so you can see A6 A6 so then I think we're good to go there and um let's see if there are other areas that we might need to adjust yes so basically the font the font is actually inter right so when you take a look at the layout so go to app and go to layout right so I'm going to actually increase the font size real quick seems to be too small okay good all right so basically have the font setup enter and we are actually accepting this wids right so we have 400 500 600 and 700 so this are actually the font with we are supporting for the Intel font right so we've actually done a little setup here by just setting the metadata but that doesn't really count much right so um yeah we we have our setup the very next step is to basically start extracting our asset right it's always the Second Step so come in here um the first thing we want to grab is we can actually grab this as a test or as an actual image right I just like to grab it as an image so you can select it click on this little export icon you have the preview you want to export that real quick so we already have this and um it's actually a rule of th for us here when you have your you know your file exported you want to basically rename it so you can you know play with it much more better so we can actually do this because logo so this will be the logo of you know of our platform basically so here we can actually switch it back to design mode so what we're going to do here is to try to select everything you know you know that we basically need in this case so we're going to select this shape right and always take a note of your your left pin take a look at the panels and the layers right so we have already have this selected hold control on your keyboard and you want to actually you know grab a lot of other stuffs so you can actually right click on this that will select that right click on that one that's you selected as well just right click it until you're done with you know everything you basically need so I think this this makes sense so this control okay are we missing anything okay not control shift you have to hold shift then you click on the ships basically right so it has to be shift so I'll click on that so basically I have a couple of things here right so let's try to group them by using the Control G and Command right so this is actually grouped now but we have some sort of distortions as the test here is missing so I'm going to undo that real quick right and then try to you know basically have that test included so this is it I think right so this is the group okay so we have that okay so let just have start all over so you can hold your shift key and then yeah good basically select this select this select this L your icon just select this one right SEL the card okay so it looks good let's see try to group it oh it's you see whenever we try to group it the test you know on top of the white one just vanishes for some weird reasons so we're going to debug that real quick so I'm going to undo so now let's see where this is a test coming from here I think yeah which is part of this group 138 let me have that selected click on export okay just selecting this group basically select entire thing so this is actually a very good know measure for you guys you know sometimes when you try to you know work on the actual image or asset it might be problematic you just have to like look on your left pin and reevaluate you know what you basically say by clicking on the layer you have access to all the you know Atomic elements and so on all right so um we basically have this now we can just easily export that and we can call this the r Guy R guy or or whatever so we can just have the credit it's more of an overview but it's completely fine so we can call this guy credit if that makes sense all right so yeah so one of the thing that we need to worry about is this L shape so we can just easily grab that as well we have it exported and okay so it's a zip file you basically have to extract that down so if using W or any form of extractor just try to extract it it should give you a folder so this is it I think yeah so this is we just use this one can just cut it by using contr X go to download probably just paste it in here control V and we just want to delete that folder it's completely messy so we can now rename this to stylish underline all right so this is actually our stylish underline and um yeah there we go and then we have this little icon here by the side we still have we need to have this extracted and just export oh there are icons that's crazy so we have to extract it I think okay we go in go in and then we have the place you can cut it out and go to the downloads so paste it in and yeah it's definitely an icon so we could just call it the playcore icon so what we're going to do is to have this folders deleted because it don't really serve much purpose I think okay so the very next step is we want to worry about the our collaborators right so have image of radically all of them I think okay so we have like individual image which is a good thing right so we can actually grab either individual image if it's not much or we can form them into some sort of Charle you know scrollable Charle so um but now what I really think is we can easily just group them together and you know have them pass an actual image you know they don't really have a background so it makes sense to just lay them on top on top of here so okay so but the problem with that approach is you might actually have some issues with responsiveness here and there right so what I would do I would just love us to have the group right we just easily export each of them and then we have proper Clarity of what each of the um each of the logo basically signify right so we basically have this now what we want to do is this is on Splash so you can just come here export this group then just rename so you call that on spash okay so let's just you know suffix it with like logo so we know just when we are playing around with it so we have another one which is notion so we're going to export that real quick and we're going to rename it as usual Okay click on the rename um icon and then we call this notion all right what else do we have we have intercome so click on export export this group on ler icon there and we want to rename this to income I think all right inom oh there's no e in inacom I think there isn't so I'll just take that off real quick so what else we have um descript um this scripts we need to have it selected properly okay so click on the export we have the descript so click on L for the icon and let's rename this okay okay so I think we made a little mistake I think yeah we should had we have to S [Applause] logo mhm so we have the last one grammarly right so we're going to have that selected with sport again all right so we're going to [Applause] rame we always off it okay that's good so now we're basically done with that aspect of it and we have to come in here I think we have a couple of shapes here I think so you can just grab them alongside a shadow yeah so can export ort it so you can see that basically have that and the shadow you can just select it group it out and Export so you can see right here we have the um the the shadow on the background so we going to exp that real quick and what we're going to call this going to just call it publish [Applause] icon okay that's going to be the publication icon we go over to the analytics part so we have them selected we group them and then we have to export it okay it doesn't seem to be you know grouped properly so we have to reselect again I think let's undo okay so we going to do that um okay so let's see so we have that now we group it and let's check the export again okay it's coming out right so this is the analytics icon so we are going to rename that real quick all right so um then after that we basically have the last one this more of a copy icon I think so we have to select the actual stuff then we select the background we group it and we export all right so we're going to rename this to engagement so engagement icon right so basically have all the all the icons well spelled out and um yeah so basically have some you know some star component so ideally what you can do here in this case you can you can always you know use some sorts of you know star rate component to and this right so this that's something you can do and we have couple of them I think I'll show you guys real quick so we have couple of them yeah I think react starting component is one of them so you guys can basically you know check this out as well so they actually work well in for the most part so to the fact that this is just a simple lesson so I would just have to grab the actual image so I'm going to export this group so we can actually call this full star okay so so we have to select the other part I think okay so we are on export and this has to be this is not like a full star we just call it half Stars I think but it's not really half not full so you can just call down not underscore fer right and then yeah so iide those actually make sense and here we're coming to the big part which is our features you can't get so what we're going to do here is that we're going to select the things that are extremely relevant right which is like everything so you can come in here I have it selected and is this like an actual image or just a shape oh it's more of a shape okay so that makes sense so this is what we're interested we can have this selected let's say the export preview okay it's coming out well it's coming out well so you can easily just export that and I just easily rename this to collaboration or collabo right so let's have the other one selected so let's check the preview okay it's coming out well so we could easily just call this I think the cloud cloud and then we have the final one so we can high spot this as well and call this daily okay so basically have a combination of all of those guys and I um close to the bottom right we have um this little check icon right so actually have a component we can use for this we can actually use icon sack it has this little check icon that we can use but you know for the sake of this we don't use any form of you know icon Library whatsoever we can just extract this and rename so this is actually a green check so it's an icon so don't forget to sopic it as such all right so um there we go we basically have this last part so let's have everything selected or just you know try to get your eyes on the in the actual stuff that has everything so let's see this groups so this is it I think that selected Okay no Okay so let's grab that let's grab this let's grab this let's grab this let's try to prove them okay that worked well this time so click on here and you can see that everything is coming in as expected you can export them as a group okay so we have this and then we want need to rename this to okay benefits okay okay let's just call it benefits name that and benefits okay so we have that and we are not done we have the one at the bottom it's very similar with the one at the top let's say this the same Fone size we can just reuse what we already have this semi board 50 30 all right let's check this out as well semi if it's okay we can just use what we have on the actual navigation all right so now we have this little guide to export so we can have it selected have it grouped and then click on export and Export so we going to click on there and this is actually you know something we can call just call Arrow right definitely is an icon so we s it as such okay so now we've come to the end of you know properly setting up our design scheme and the color scheme okay so now what else we may want to do now okay probably I can come in here just grab a little bit of the asset we might be needing right so in this case we need this guy so this for the L dashboard we'll be having so we have that we have the we can group so you can easily export that and want to rename this real quick to use the icon okay so we already have the user will just extract the verified bdge and then want to group that and just a spot so we can just call this stylish check something like thaton and then what else do we have we have in here okay we have that group as well and oh that a mistake so export so this is like little chat or channel icon so we could just uh we could have this named channels okay and uh finally we don't have any other thing except this little Shevon icon down okay sport H lots of spaces in between this an image go over it okay this this is what we need just LA on so export export Vector okay so it's already like um zipped so we're going to extract it here so we have the glyph have the vector just um cut that and then have it paste in here so we remove this and this okay so this Vector can me to Shevon down icon so [Music] Chevon down icon okay so I think with that we are almost done okay we have this L see verified badge so export we have the um guy inside group them and yeah just try to explore real quick okay success verification and success verify all right so now we have like you know an entire Encyclopedia of our assets right so we're good with all of those assets and um what we have to do now is to bring it into you know the code base itself right so now I can actually go to my downloads just copy the entire thing CR C CR a CR C right right that will select all and copy the entire um images and you want to just try to paste it here so I just what you can do is to drag it in here so um user icon already exists okay just to be sure let's check user icon okay so this is the user icon we had before all right let's see one we have now oh user icon just user up icon so let's just try to differentiate it with that okay so now that makes a valid proper point so now we basically have all of our assets and um yeah let's get ready let's build some cool stuffs okay we can easily close out all of this closes out and let's go to the very first let's build out the um the navigation right here right so let's see what our project looks like now okay so let me just restart the server okay going to refresh this so it's compiling okay so basically have a proper view of what to basically expect and now we want to start building off our sections right we go to Sock go to component let's create a new folder here called sections so we'll basically add it um create a new folder as well called cards right so um in our page the TSX we're going to remove a couple of stuffs going to remove everything here so you can easily just come and call it main so this um enough bar we can just um import it we already have it with if you've cloned the product from the start to Brand so Bally have all of this and let's take a look at what we have yeah now as good this the way we normally start all our projects makes perfect sense so now let's fix our okay so there are other assets that we not look or they didn't you know pay attention to and those are like common shapes you know like here and here it's more gradient kind of thing so what we do um normally is that we can actually grab these assets have it selected this way and then position absolutely on the top right so let's do this this is the actual text you can see that what we have here is just the you know the you icon so I will drag this away as well so we have an idea of what to expect here right so we have two so let's put this here okay Meely we have this and then we have this right so we're going to like export both so this one we're going to call it the top um top left gradient so it's definitely a shape so you're going to rename that top left R and then ship right so basically have here it's still more off top right anyways so you click on here and but this has to be top right so I have to rename it accordingly top right gradient shap okay so we're going to since we already have all of this we can just like undo so let let me take this off so you can see that this shape now this is the entire shape we just you know grabbed the same thing as here can just grab it here so let's take that there and let's take a look so you can actually see I'm going to undo the this real quick and paste it here okay you can see these are the two shapes we just you know we just got this and this it looks very similar we could use one in both cases but we can just like position it separately I think yeah they're really huge okay so yeah I think something like that will work so let's see what we already have so we can compare it and properly so go to your download oh this is just like uh one way and no now we can just remove what we already have we can easily just grab these two yeah it looks very similar we can just reposition them terms of size yeah so we can just grab just one and then play around with it okay so click on here and this is going to be our ship called it the gradient shape so we can remove this all right so yeah we've done a lot of destructions so we're just going to undo okay go to undo by e contr z continuously okay that should do it for us all right so we can switch this back to Dev mode so won't break stuffs right so let's let's start working on this so yeah navigation is the first point of contact so let's fix it I have images then slash the actual logo I think okay so I think it's big logo so this is it so you could just like you want to grab the name I think copy that so the same thing is what we should be using is actually P so can be using the same in the mobile view as well so we need some sort of hamburger right and um yeah so before that let's see what we might be needing okay don't worry about that for now so yeah our link is coming up correctly let's check out the other part okay so we need to fix the urer and um yes so obviously what you can do in that case is you can actually check out icon [Music] SX so we just search like that okay paste it in there okay you can just use this right here a couple of others you can use by the way so we going to grab this and going to just name it to urger okay so we'll go here and I think we already have like verifi yeah so something like this so let's just grab all of them the safer side and paste it in here so just try to replace all of them in group so both of already exist so I'm going to like quickly you know click through the replace okay I think that would definitely replace everything just to be on the safe side okay so verify V I think oh not really success verify it's already there and all right let's check it out right so the SVG here can actually be placed in a separate folder right so we just go to folder svj and then we move what we already have in here into the created folder so move it in and yeah that should do it for us Yeah so basically we have that just basically have to change the coloring and other stuff so yeah so the svj itself so I'm going to click on there and the field yeah the truck basically is what we want to change so let go to our T config let's grab primary color and I'm going to replace the field with a primary color right away so you replace that in there probably just refresh it okay can say it's coming out well with the actual color okay so now what I want to do is to focus on this guys here so home fq BL B us so go to n so in here we just add more of the links right so come here and just do home copy it product can put this in an array for convenience I think um fq and I think block so we have one last [Music] one okay that should be [Music] about oh so let's see what we have so far that is it all right so then we basically have to worry about the buttons I think so we have the login and then the sign up very small button I think Bally have this copy and paste it right here in and then let's grab a test and then they sign up so sign basically is located at I think slash [Applause] register similar with the login as well so we'll just grab all of this past it right here make this a d for convenience and pass the app Buton here and we change the path okay all right so one of the thing that might be missing is the fact that we basically have our own button and that is it main main button and it has a text so this text is like sign up so you're going to grab it right there and check what we have basically okay it's too much of a width we don't really have you know but boths that large so what we're going to do going to grab the actual width here which is like five R so go to the core main button and we want to like modify it so go click on here so the height is whatever so the width can actually be five R so the height is 2.5 R so you just copy that and we could use that as our default height right so we use this as the default height okay it's coming out well so the B radius though is actually 0.625 you know you can easily just you know put it around the6 oh it's the same so that's completely fine and um yeah not sure if we stand need anything here we just to take a look at it to see where things are going I me right yes one thing I didn't notice is that the link actually have you know like a very grayish color um I want to check real quick if we already have this in our sty guide we do custom gray so that means what we're going to be doing is when you over is going to have you know the actual block so that's something we need to change real quick go to n so when you over it's not going to be this like this we're going to be test black and then the actual one is they say it's actually test green so about test think custom green custom gray so let's check it out so that's good enough right so this is the way it is if you selected it's going to have you know the actual you know color let's check the mobile part okay that's completely fine but then what we need to update here is that on Mob we need to have the same link but it needs to be in in our B um shape right so we're going to extract everything we have within here copy it from top to bottom I will copyed and then want to bring it into here right and then you just save it so when you shrink your screen size you can see that everything is coming right on top and one thing that doesn't work well is a um sign image I think so that's something we need to fix so we can easily you know grab this and okay and grab the content only come in here and just paste the content in so don't forget let you icon that there okay I think I have to grab the entire thing right so um we can actually grab it from here to the top and we can have it pasted right within online one 125 Okay so so let's check it out all right it's coming out as expected we have the home we have the product and then every other link associated with it all right so very next thing we do is to focus on the Hero part right but though there's a little detail here that we not looking into at the moment but this something we consider when we're done with I think the r section so this is what we're going to do real quick we're going to try to reduce the size of this and then we can proceed right so we go in there and let's see if we can reduce the actual size so with let's do six R okay so that gives like more like a better Clarity of that probably 6.5 would be nice I think right so 6.5 okay uh 6.5 why not why not do 6.8 well this me just balling to make sure we have you know proper flow okay that's good enough all right so now we're done with the first section and we try to move on to the EO part right so let's create the initial skeleton for the Aro section and we can easily proceed so what we're going to do now is to create that section we don't have it but we can definitely create it come in here and create a new file and call it give a section SE so try to export it this is what we have so what I normally do it's more of a custom here is that I actually create all the sections Before Time so here let's create other sections this has to do with the collab section or logo Group whatever you might call it okay so we component export so we have it there and then we have the support or partner so we can just create that into separate section all right so just have to you know prob this show uplet and the next one basically has to deal with features right it's basically the features new file and then call that our [Music] features all right and um yeah so basically I have that so the other one has to do with benefit but I think there's a little typo there but it's completely fine we could just call this the benefit section all right so basically have to populate this real quick right so one of the thing I think was a mistake here support our partner and our features right so this is supposed to be in know sist section so we know what we're dealing with [Applause] feature yeah feature section a little typo I think and then we have the support or partner this is definitely section two so ideally what you do is to grab the name and have it pasted in the right place right and yeah so that gives us you a proper Clarity and then we have the last one so basically have to include that as well for a new file and call it the photo section okay so basically have everything listed all we have to do is to you know try to bring them into the actual component so two we go with hero section so three we go to the collab section all right and um yeah so basically we have the think support H so let's say this support our partner think our partner section and then we have our features I think our feature section and yes for the benefits benefit section and finally we have [Applause] the the pH section so this is like the highlight of the en thir components needed so quickly let's get the ER section um open run it so you have to zoom in a bit and we open up the area section let's close out every other file that that has not of use so we have the Aro and this definitely is a section so Bally have two diffs for either sides of it left side and then the right side so the first one can basically have some text an image text and a diff right text an image text and a div right so the div contains an actual button and the view demo button so we can basically have this into separate divs what I can do I have that so the text is actually guys started G is in capitals right and then we have the so we have the L you play icon and then the view demo okay so this is the structure and let's play with the actual content so we can just you know position this by the side so to be easier to move in so course we are right so what else um the actual image I think so we want to do SL Images slash I stylish underline [Applause] PNG okay so that's actually the styish underline let make sure that we basically have that s check I okay we have it so that's good so the other content is this and grab it and put it right here right and then what do we have we have the get started this play icon so you can just call it the play icon Images slash the play icon okay so we already know that this can actually be it's actually a flex and the Gap is not that much when you look for three right and um yeah so let's look at what we basically have okay this is what we have at the moment and we do item Center to align that vertically so the width here is actually 10 R so over right you see that it's 10 R in width so we can actually add that as part of the butting classes right so that gives the but proper shape I think so the B radius here is a little bit different it's large I think so we just want to do rounded so we'll paste that thing basically in and um let's see what we have so the height might actually be affected as well 3.875 okay so it seems that it's too big for some weird reasons yes but it's okay something that we can obviously like reduce and I do 2.8 okay 3.2 okay so that's that's fine for now that's fine all right so now let's worry about so this actually um the left hand side and then we have the right hand side so let's put that into perspective so I think is more like overview or k credit I think P we have the or so if you take a note look at it basically know that this um guy with credits so this is basically the you know the large guy we saying on this the other side okay so this is what we have now so the very next stage is for us to align it together right and um to align it we basically have to make sure that everything is well positioned right this is an extremely large font so what we can do here to give it a close you know have a selected and you can just do text and P iPhone 10 and we already know the weight here is 700 right so that's 700 and the line I is large we can copy it for you know for medum devices so this will be the llight right so let's see what what we have so the color let's say if we already have this color this could be the dark color we saved exactly so just do text in dark that will give us the actual color okay so now let's worry about the distance between here and here 1.87 okay um so here and here he like [Music] 3.13 mhm so okay 3.1 so what we're going to do here is like you just do my for the top and bottom so that'll give us a proper view so now let's do this this the font size and the font we is like 500 okay so let's check that out okay it's coming out as expected so the very ni thing is is we need to align both the main Buton and the actual stuff so let's say the distance in gap 2.81 okay so basically have the proper G in there and now let's Flex colum cap of eight and the flexible justify between so now this gives us Clarity of what's actually required all right so for some reason we want to make sure that the width of this is not too much so let's use this as the max width the max here is like 34 R so we grab that so you just have paste that in and at the same time always make this glow to grow pass grow so it covers the entire entire SES so our AR session is coming out nice as we always do we always try to give spaces between the top the left and the right right so if it's small we supposed to have it yeah so if actually it's a small screen we're supposed to have maybe text two El 2L something like that right something around there 3 XL okay so we not sa now we have to fix that real quick so we can actually pin this and then yeah we'll go to the page so want to make sure I will group all of this into its own kind of content [Applause] so what we can do so let's do for on both sides okay so um let's make sure that nav by itself is taking for if okay so 41 pixel is that exactly foreign so way to find out is to divide by 16 41 by 16 oh it's like 2.56 so let's try that out first okay okay so let's do this let's undo that real quick all right so now um I will just make this six couple of things I need to take away from there to match the exact same [Music] okay so that looks very matching to me so go back to the hero and um yeah so basically I have this could this be the issue let's it this okay so this we definitely like spin it across Bo which is fine not bad I think okay so the G we have the flex grow so let's take that off as well so one thing we want to check out here is why the ma withd keeps breaking at the stage right and we already know that it's row and justy bit um between so let's give it a full width right so that's really doing much all right so um there we go um the issue was basically setting with here so it was causing some sort of overflow on the side I think so I had to basically like take it off and started working so what I'm going to do now is I'm going to to you know make this EO yeah we need to set some sort of like margin top you know for a small screen so we can do this we just do MD so for a much more small screen MX can just before doesn't really matter right then we want to worry about the actual margin top let go 16 let's start from there Okay small device is 10 so can do this on [Music] medium um so for small devices we can do 32 okay so that makes sense so you can see that it's coming out well as expected Okay so this is good and um yeah there we go here we go so one thing I might need to L be worry about the spacing in between here is too much could be because my screen the same spacing but looks too wide okay so that's it and we need to put in these overlays right it's extremely important to both the right and the top left so how do we do that we're going to start you know by actually putting it around here I think right so we just create the overlay can we created here just create a div and it's going to be an image specify your Source in the out we just say top right grent so just do slash Images slash so we could look for the top of the griding shape we have it in two cases oh that's fine that's the griding shape right there so what we're going to do is to write that same name in here sh the PNG let's see what we have so you can see it's coming out well okay so that's good so we have to absolutely position it so we have a couple of them right so we have two of them we'll past it here so for the first one so we need to make sure that main at least is uh relative related right and this can be absolute top Z left Z so this will actually want to put it you know at the other side so let's comment this out to check if everything is working as expected say absolute um okay so this is relative relative to the actual container okay so top is zero what does bottom zero mean so let's check that out H scary because is in the the the inverse I think all right so we have to like morph it so let's do minus five R let's take it you know to the left part let's refres this okay it's not moving H that's because the size is too large compared to the actual container most likely so it's always very problematic when you want to start dealing with issues like this let's do button eight consist so what I would do is to not use this shape I'll better use the one I exported earlier which is something like this right this is way better uh yeah so let's grab this and use this as like top right G so we name that top uncore right gradient so let's drop it in here okay so this coming from the top right which is way better top right gradient okay you can see this coming from top right we just need to make sure that oh I see I see what's actually affecting it the navigation basically has the background so it's conflicting with what ought to be expected so you're going to go in there select it and zoom in fading bgy so you can obviously remove that yeah it's coming right through so the background really affects it and we want to fix that right now so you can copy that out so we can just remove the background so it can actually be transparent so that we can have our L you know styling coming on from the top right so we might obviously need to position this a little bit I think it's going to be less of a worry sorry about that um this should be in page I think so let's use the Gren shape we used before so this one is moving here so um the bottom [Music] Z left zero not not really not really okay so just do let zero so do the top [Music] right okay so this pushes the good to the top um left is more of the top left gradient actually not the top right that was a mistake so I think I would just have to rename this top left the same apply the pages top left okay so we have the top left radi and the one on the right though is something we have to you know worry about now so select that and Export okay so have this R name it to the top right so delete the top right so rame this to the top right gradient all right so this is it I'm going to make like a replica what we already have we just change the left to right and left to right okay so let's see what we have okay not bad let's push it down I think okay so that just gives it the proper kind of shape we anticipating right so now what we want to take note of is the the um gradient is on top of this guy we don't want that to be so what we do is to make sure that we set a much more proper um Z index to the actual hero image so you can come in here look for Here We just set a very high um Z index so we do Z10 okay which is okay all right so that actually brought it on top of the actual sure um stuff right if you're wondering this didn't work because this is not a valid um you know um Z index value this could be valid if you put it in like x square bracket right so we just use 10 10 is decent enough all right so now we basically have um this flow and let's see the gap between here and the top isn't that much yeah which is okay what we have basically denotes that right okay and then we can actually check it on [Music] mobile okay so everything still works great great great great so what we want to do is to um yeah the the uh what's it called the logo group section so let's have this done right away all right this so nothing much here but what we just have is the the actual section and then we have a couple of this I think just one lat and that contains all our images right so can just grab this name here and we paste it right here so let's give it the actual size so actually for 700 in width and this is the color right so let's see if we already have that in our scheme yeah we do that's definitely test [Applause] dark okay so let's see all right this is it and oh now I see the Le Stu is actually above a couple of other things that we we obviously didn't want it to be so what we are going to do is make sure that this Z session at all times is on top of you know everything that has to do it you know those icons so I could just take this away from here and say Z 10 right there so that should fix it okay so that should have fixed it we didn't so what I would do is to put it here and check it again okay so now it's fixed it as completely you know as expected okay so let's get a list of all the icons so normally what I do in cases like this is to form them into some sorts of array just call them logos all much more explanatory company [Music] lowers so give them some sorts of ID stting from zero downwards and the path Images slash so let's do it from top to bottom from left to right I mean on Splash uncore logo PNG so going to replicate a couple of this the other one is notion so take this off and replace with notion so make sure the ID is actually s increment okay ID 2 the other one is in comp all right I three this is actually [Music] descript okay can moove the X on needed and then the fourth one grammarly so it's actually like five logo out oh start from zero index that makes sense so what we're going to do is to Loop through all of this and just display [Music] [Music] them so I want to display is source so yeah so the source basically has to be the logo dot path right so we basically of all of them here okay so what we're going to do is to yeah we can actually do this put in a g read or some s things but what I normally Love Today is to make sure that they are you know in a div so make sure we are setting the right key right okay so then we can basically as Flex um yeah so we have to position them it Center justify between okay and one other thing that I normally love to do in this case is for smaller screens we want it to wrap right so we just do Flex wrap yeah that should give us much more proper view I think right so we need to add some [Applause] Gap okay so decrypt logo looks a little bit finished oh that's the way it is in the actual design all right so yeah that makes sense on small screens we see that everything still you know coming to the picture which a good thing so we just do four all right so now what is between here and here that's [Music] 3.81 to into one R so let's check it out okay so now what is between here and here I think 8. 10 that's quite a distance okay so what we're going to do is at this section so m y both top and bottom just set them to a Dr okay so make sure that text is position at the middle of it so this will put this middle and now so I actually get this question a lot right so um I think I should remove the um what's it called The Styling in extremely small device yeah to prevent Distortion yeah yeah so they're not really like required streamless small devices so I got to my page and do eing and block so you do this for both of them this to allow mobile to have you know much more consistent flow and no weird stuff going on okay um ideally let me close out the Tes we don't need um so we basically have the logo group now so let's worry about the um support section right so let me close the things we do not need okay right here so this is a collapse section this is the one we just did so close it out okay support apart section okay so here it's actually section so let's fix that real quick this a section and in this section we actually have a couple of things we want to worry about we have the left side and then the right side right so on the left side we have okay let's build the left part first we have a paragraph so grab all the text here and we can just you know paste it in here right and um yeah so this is basically the font size all right so text you paste it right then oh sorry about that so paste it oh I lost track of what I copied so I'm going to grab it again go to the editor once you paste it in right and then the um yeah this the test D test D okay so uh the font with is actually 600 this is 600 and yeah that's very decent so we need the other part which has to do with the other paragraph so grab the text everything basically copy it and have it pasted in there text and custom gr and um yeah so that's pretty much what we want and at the bottom we have other stuffs is morph de right so we have um a div that contains two other divs right it's like a small section of its own just it as a subsection so so it has two diffs so the first one basically ARS um does the image slash images SL fer PNG just call this first and close the tag right and then when we have that image also have other stuffs a little paragraph of this text so you can copy that paste it right here I made this strong but we'll basically have to follow a better semantics right so we just call this span and way to board P right and class fromont board right and what else do we have so basically have theal bricks right so we can actually come in here and group them all together Flex Flex [Applause] column so Gap so gap between here and here is like uh the Gap distance is 1.12 R so we can grab that 1.1 to R so you can easily grab that and um yeah there we go and let's see what we have okay are we missing anything here no no we are not but one issue I'm having here has to do with this I think oh is the mag um the margin top okay so that should be in the Aro yes so I think the um is it the Evo section okay let's check the pages right so all this MX could have easily been you know or so the top has to be padding not margin so this could easily be P sorry not HT right so I think that should fix it um why it doesn't MX H so what's becoming problematic here is the is this leave let's comment it out okay oh we dis playing as block oh we just okay maybe he didn't then absolutely I think um let's see still be eing right okay so absolutely let's check it out so bottom or top there oh exactly exactly this something I wanted I think we are getting this right okay so I think it was just a matter of setting the bottom to top yeah that will fix it okay so let's go back to what we're doing that's the St component here we're building this out and to support our partner yeah we are here right so we have know the Gap we know the image we are passing in there so let's make sure we wrap this in in an actual diff so we not be having um box issues right so yeah that fixed it so what we're going to do is to basically start you know worrying about how they are positioned actually this right so custom Gade but font here is 700 so do font 700 um so text custom gray okay so that gives us much more better Clarity I think so we just have to maybe replicate so everything is like B but different color I think this is like the real B board yeah so fun put 700 so let's put that 700 and see what we have do we have 900 in this font oh not really yeah so I think um this font board May font medium or semi board yeah something like that semi board okay yeah something around that great so we can copy this and paste right in here but this has to be have and 4.8 then CH analysis okay so yes so all the thing we got to do is we need to change the out text I think in the image seem like not full star I think okay yeah something like that so now we can actually group this section into reflex four exactly and we want to give it a proper spacing in between mhm so before we do that we need to worry about the right element yes this guy is on on the right so what we're going to do here is to basically just have an array with the icons all spit out and then we can look through it right so you can come in here and say um this more of a features to support our partner all over the world okay so let's call it features it's fine so we have the ID right we have the title um that's a comma there so we have the title as the publishing right we have the um the actual description so we just grab it from here and we include it within the string so copy it and just duplicate it so the idea has to be one and the title here is analytics so the description here in this case so ID is two so the title is engagement and then we have the description can copy it here and replace it so these are our features this this makes perfect sense one thing we forgot to add is the icons or the icon path so you can come here and say icon path so we can do slash Images slash uh publishing I think publishing icon [Applause] exactly publish icon so where is we have we have the analytics icon all right so we come here and just put Antics icon right so we need the one for engagement as well let's make sure that is sp right so we have the engagement so we have the engagement icon so basically I have all of our features and what I want to quickly do is that on the right hand side we're going to create a very little card you know something very small so we want to look through each of them and include it appropriately so features map feature so we can actually work this into a diff first off let's give it the key feature the ID right so this is the div we working on and then here you basically have another diff that covers the image right so this is the art sorry about that no not all cars o okay or okay so we're can actually call this the uh feature icon and then the um the source has to be from the Icon path so you can go to feature icon path right so this is okay so the other side we have Ed with two [Applause] paragraphs feature do title and and obviously we have description so now the F for this is actually um text custom gray right and the size so 1.12 5 R so why this on the other end is dark with this side okay so yeah so what else do we have in this not much so we just have to position it so the Gap in between very small 0.63 so let's see what we have so far okay so let's refresh [Music] this yeah so FL col that's should position it properly and then the this here and here is just 1.31 R so what we're going to do is to have class here [Applause] Flex 1.01 R okay that's pretty much descent and you can come in here and flex justify between IDE we can just do F go on Small screen so and then we always good to specify some graap right so that's okay all right so um one problem that we might be having here is let's make sure that this component is way above the other components all right so it's still way below the um the actual stuff okay yeah should this should be above it of course right so we can grab that so we're working with the actual stuff yes so because this should have its own background which is different from the rest so grab it here and can addde it real quick okay is okay so I have to make sure that his index is really massive okay so it's still for some weird reason on top of it right so um what I normally do is I can go to the page itself and make sure the Z index here is for some weird reason just reduced right let's see okay it's still right there and we don't want it see it there mhm okay so let's worry about that ohus 10 I think okay yeah that makes perfect sense now we have access to yeah so it's actually way behind the actual sket flow which is okay which is nice so we can grab all this item yeah so the same thing we can do for the other gradients which is three the ones on the left okay so now one problem we might have here is the fact that this one takes the entire width of you know of everything so we first we have to break you know the support and other feature out of here so give it own May section so copy copy that so we'll paste it in here okay so that gives us a better View and yeah yeah so there seems to be some sorts of issue with okay we B have to apply pattering and we check it out okay okay so what we're going to apply here is something similar to what we already have right MX whatever right so I think it will have worked just so you know if we maybe used um PX here let's try that out but that's just pardon I no it doesn't it doesn't still moves it okay so um the previous method we Ed iset really fine okay all right so we can grab all of this section part and everything in a separate subsection right so we cannot worry about the distan right so we can come here can do this let's try that out obviously will work so it has to be done independently inside of the actual component go to support come here we can easily just paste that in there we don't need this guy here I just do a 10 it's fine so the 10 is completely fine and we'll grab what we basically have here so grab this B right in here and we can add it there as well okay so PX PX yes yeah exactly as required this like [Music] 3.75 okay this one between here and here is like 1.88 first one R and this between here and here here and here is 4.56 yeah 4.56 I see that okay so that's going to take get the B first all right so let's check the other D so we can actually give it some sort of width and height so it has much more proper Clarity with limited content so let's give it with 3.75 R5 R and then the same thing okay so if it's not coming up could be the way it's been set up can just do this so you can take this out right so um the width and then the height yeah for some weird reasons it's not really doing well what the other call this place not sure doesn't really play well but I think it has to do with the excessively long content we have here he's pushing it away I [Music] think let's check this out mhm okay so here gives us like better Clarity is like each of them individually so let's make it grow first of all because this gives a better Clarity of where it should stretch to and let's go back to flex h i see it's start having issue we you we want to position it that way to Center okay so let's see give take this off here if we still have a much more coherent um design let's see yeah we do for some weird reason so we can actually give a gap here I think so what we're going to do is already colum and then the Gap is in between I mean everything basically so just the flex five and it has to be Flex column right okay so you take a look at that this one it might not really be an issue right but it becomes more of an issue when we add the image to it okay we had the image comes a b exactly when we add it here it becomes really problematic so one thing I think we can do is to add it by the side of it so let's go a div yes let's look through this separately so let's leave this out okay something seems to be missing okay let's grab it so in here we already know what we want so yeah we just need this guy okay yeah that should work so just wait for it to reload all right so now what we have to do is to give it proper spacing in between right so can mag button can do it right and then I'm top four not sure how that will turn out but let's see okay six almost the same right so we have to worry about responsive angle of it we could as well just remove it for um what's it called for small screen devices becomes a real issue again when the screen strings okay so this will actually call okay this is what we can do for large devices we can display it and add it on smaller devices so we have it so large devices block all right so this should give proper curity I think so yeah and okay so yeah that makes sense do this strings let's see if we can set the the width I doubt I doubt let's see for oh we did we can't okay can set the with that's four R and you pass the for you know into it as well yeah we can actually now makes perfect sense yeah so I think this this just makes sense small devices from medum devic upwards we can always display it all right yeah yeah so yeah so Min devices we might want to like push it you know way to to the bottom a bit because it's not really aligning properly we that's just one weird way where it sure you run it to when using this kind of approach so let's see let's open on the big device oh okay it's like this let's see what we have um okay okay so let's see how this will be on a much more smaller screen not bad not really bad right so I think from um medium screen then where becomes real a little bit of an issue I think but apart from there it was pretty much decent so what do you thing I think another cool way to achieve this is to basically just you know display it absolutely right that would be way better than you know yes that would be way better than having to have a string all the time so we can have it here right and maybe remove all of the Marin bottom stuff so yeah maybe this part okay so let's shrink it oh the stringing has been solved by setting the width of course it was subed without we knowing it okay so now all you have to do is to basically give it a proper margin right so Gap so let's check the Gap in between between in here is like 1.31 yeah this what we had before 1.31 R okay so let's check okay very good very good so you can see that it's coming up where medium devices and large devices perfect perfect so that section is up and running and let's see if we have any other thing missing yeah okay so the other thing we might worry about is the actual spacing all right the spaces here seems to be too much compared to spaces here so let's add more spaces to the right item so let's do for as Gap okay that's that's not bad not bad at all it's publishing so this looks thicker yeah I think the phone size is bigger so let's fix that uh this has to do with the publish the title yeah okay yeah the title wasn't coming through properly okay very good uhhuh exactly exactly right there right there very good very good okay so now we'll move on to the very next section this is the features a features section so we'll just play around with this and we should be good to go okay so let's go to what we have right so we can close this out and we already have this settled feature section so this is section right so um first off we have some weird um the first section I think yeah so just give that a div give a paragraph so we're going to paste it right in there so we have another paragraph I think we extract the content here and we paste it right in and then we have a button main button so the text here like I started so we can actually provide some classes and we can close it off so this is go [Music] radius right and then we have this is the width and then the height okay so let's see what we have not bad not bad so what we can do the is too much here it's completely find the way we did it so let's see um our test dark so we're going to add a couple of things to it okay so I'm going to other class is the font size let make sure I selected this is the font size yeah this is the font size and then the font width is 600 right and um I think T stuck right so that was okay these are the ones do with like is the font size and the WID is 500 okay so what else do we have custom gray okay okay custom gray so then what else do we have we have the get started button so we just have to make sure that they are all positioned on the flight Flex Flex column C four Flex row okay so let's try this out and we have to make sure it is aligned vertically item Center okay so here we can actually play around with The Gap the Gap to r c can be three R right yeah the basically create this kind of you know stuff so you can reduce the leading in the actual big test can be three right so it's 12 okay let's do 10 um 12 seems to be twoo oh 12 doesn't exist okay same all right let's again 10 so 10 exist is 2.25 right so I can just grab that and do 2 point n okay so that is pretty much okay all right so that was decent so small screens you tend to sit this way which is okay right so this text be MD here's your text to excel okay or 3 EXL doesn't really matter two for small screens it comes up a little bit bigger which is okay mhm and then what else do we have what is is missing yeah so we need to worry about the images here it's more like a card so we have kind of you know a group of them so we just have to reuse the cards everywhere so what we want to do is to basically pass in our content in here so we can actually call this features as well right so you can come in here here in [Music] request features passing the ID zero the title and collaboration teams the image PA slash [Music] images right slash collab I think C collabo PNG right and then we have the you [Music] description right so we could just grab this and paste it right here let's update the ID and then the title right here what the title and this has to be the cloud and then the description has to be updated too so we can grab in here and just put it right here oh no oops put right there good and let's grab the last Stu so the ID is two the title here is dat analytics so images is actually images. daily I think so they will put in the description okay so that just sets the ball rolling and and yeah so this will actually T us to take us to the next part right so we've just done the initial div so let's do the other part of it so can create a diff so let's look through all of this features map so we have our features here okay so that was an issue so let's quickly fix it feature open your bracket right and what I want to do it's very simple div so we just do flx FX color 1.88 r a r so yeah don't forget the [Music] key feature the ID and there we go this will be our image sorry about that oh no spell so now basically have to put in the um display images display image right doesn't mean a lot so I could just put in the feature URL part feature. image path and paragraph title and lastly we have feature the description okay so let's fix this so this is the size and the weight is [Applause] 600 so the width is basically 100 and top and bottom 1.88 or 1.8 Remish write a description you can just have text custom grade okay let's check this out all right so the one thing I is with is that the distancing is weigh too much so we have to adjust the distancing so let's do one R so let's just remove that since the image itself basically has some sort of G app by default and um yeah yeah we can we can work with that and one thing I want to do is to make sure that everything is well grouped and positioned right so um what we can do here is that we can display two on a medium device or three on medum device well all three can just fix so let's see Flex right so let's justify between G bit justy bit one okay so all three can basically fit um let's check for medium device there we know okay so that makes sense a lot uh what we can do is actually the column medium flex row so this should position it okay so want to make sure that it's actually at the middle so this is the column item so item Center okay so justify Center okay so um column means it's going to you know render oh separately I was in the wrong P so First Column basically have the items that's for the first one justify between and item Center okay something like that something like that right so maybe the gap um does not have to be yeah just have to be sure that nothing is breaking check it on a larger screen okay so yeah so it can actually spread to the very end okay so this is okay so medium devices still very much fine yeah it could actually be position at the center or position left so this Center is is we up better than left I think so let's make it grow let's see if it's if it can grow okay so it doesn't can't really grow has fixed fixed width Okay so let's give it some Gap s between here and here is 5.7 5 okay and then yeah so here itself here in here is like eight right so here your six it seems to be too much of white spacing okay so this is it basically I have it there and let's sa for small screens okay doing great press it yes we're doing it all right so one thing I've noticed is I not really included two features and I think into here so basically I need to group both of them together so maybe cut this one this stage so our future and benefits oh we've not really done benefits so it's completely fine can grab this okay so that will give you the space in left and right okay so that's pretty decent let's make sure that the mobile is still looking good as always okay good okay all right so what else do we have here we have the what benefit will you get I think I should just F this typo go to design mode and spit out correctly back to Dev mode all right so let's do this right want to position all of this so there's a section mhm so have some title probably we must have used similar title before now yeah the one we used in features I think can just grab it and use it again reusable but it's completely fine right so let's go look for it hero I think it's cab or support partner yeah something like this so we have the D and then we have another d right so that could have our title so in this case this text and within there we have you know couple of stuffs right so we can actually look this in an array just an array of whatever [Music] benefits so benefits what we're going to do here is to grab each of the benefits and just Rend it so paste it in and lastly we have the online transaction we can paste that in as well and this something what that will be making use of [Music] here so we can see say benefit and can just be an actual this with an image source images sources check icon PNG on the out so is actually an image tag right so so the actual benefit so it actually be Flex C of four Flex Flex col let's see what we have Okay so let's chances are we not get the sucess check icon correctly success verify H we me the check icon okay oh s check oh that's this one check icon not sure where that must have gone oh green check oh this one okay so name get that name go back um to our component not sure where we were but I can just like search through it then got a p we here and right here one of thing that changes here is the font size and then the width so the width here is basically 500 price uh test duck mhm so now what I want to do is to make sure that there's a space between each of them and has like two R okay so gra it like equivalent okay impressive so then on the right let's display our actual image so images um okay so not really sure what what our image is this guy credit H this is like the overview we actually exported this not sure the name we give it so let's go through it and user icon on Splash logo okay publish icon notion logo fer May icon engagement oh benefits okay so it was actually called benefit so come here and just change that to benefits all right so what do we have here there we go so so justify between gives us a proper Clarity of what we want so um yeah yeah so what I want to do is to make sure that there's a gap you know on top of it 8.2 right could have easily you know reused this but completely fine it's right so let's check the mobile version okay completely fine okay very good so we have now a perer set up you know with our design right and this is gone mhm so we have to worry about the footer all right so let's quickly work on this okay so what we're going to do is to populate a couple of stuffs right and that has to do with we basically setting up what we want and some of the test raw test we are seeing right there so go to the fotter section definely section right so let's see what we have we have um we have two diffs basically nothing more nothing less so so this is the first and this is the second so in the first it has like a logo because logo right and after that we have only two paragraph so we can easily just grab it and paste it right here yeah I think this is like custom gray as well so text custom gray font is 500 more Bo and text 1.1 so5 R okay so this is actually Now a type of there and then the input so um I think we already have some sort of input but I can just grab it so input from UI input right I think we already have some sort of um common inputs before now yeah yeah but it's more of you know we're trying to go through it yeah so let me check my forms login U yeah this is like an input we have right so you can actually pass your start icon okay that's completely fine so we have the input there you need to specify your placeorder which is this and um what else yeah I think that's completely fine so we will do a couple of other things right relative so we have a div with an [Music] image okay um our right icon okay that's it um this is it so I can just grab the name here it's too long PNG I'm sub Z right Z let's check that [Music] out okay AR right icon yeah is in the right part mhm so the height of this stuff has to be 3.75 R so give a class 375 just Z four push it in and to two Okay so that's almost at the middle so once actually make sure that we are padding away from left it shouldn't get over it like this so we need to add some pad into the inut right so I didn't right let's try for r okay so seven R is mostly for medium devices right so well I think in all devices it doesn't really matter 7 R to much could do six yeah something like that or five all right something around that nature okay so we have lastly I think yeah we can have this here doesn't really matter go grab it and add it to the other div here a [Music] paragraph So This is actually White and F is 500 so this is what 500 text 1 125 r all right so let's check it out so it's going to be there we might not be able to see it that's fine so footer background let's put here P backround okay so top is like 7.69 R doesn't have to be accurate so yes so basically have that and the size as well it's like eight R so we can just like four five right so PX let's try for first okay 1.88 so this is actually 1.88 Rim distance between and this guy from here is massive 4 4.9 just use four say 4 or 4.5 R around that range right so that's pretty decent and here the inputs actually rounded so the B radius for these inputs we have to extract it and then there is some sort of Border too so grab this rounded so B ASP change the background all right so now this gray so custom gray so text custom gr all right so what we're going to do here is the ring Focus right so um it's not going to be like this but it's completely fine I think that's theault one as well right so it's completely fine for us to leave it like that okay so one thing I noticed is that this icon is very close to the bottom but ours is far off so let's fix that um so right can just be two okay something like that okay yeah there we go between here is like 2.5 right5 right all right so this is okay and one of the thing we need to maybe worry about as to do with the right hand side okay so let's fix that so this is the left hand side this is the right hand side so basically has like uh an edor and then some text right so this could potentially build some sort of links right and um go in here grab the account information grab the about then grab be Conta us okay so we have to basically start this and test right font font is like 500 this should have been the default text size right and uh yeah so text that so basically that does it for us so this same way is what we should have done here as well but in here we have to be think careful so this test can just be custom grade [Music] okay so what is the gap in between here and here 1.25 right so we Flex [Applause] just 1 25 right okay so now okay all right so once to replicate this for the others as well all right so basically I have the app solution talk to support support documents system [Music] status okay so let's oh system still here Co response okay and lastly we can grab this paste it here Rock outet security beta test and the prizing product grab put right here now we have the three DS and let's play around with it let foury between all right let's check it out now okay impressive so we have to now position what we basically have the two containers let's give a space in there flex and flex color um let's go on Small squence Flex rowy between position the full with okay so this is something we have and um still SK to the right I think yeah so we have to make sure they grow let's inspect element first let's see what our you know this basically have so when you over here that a lot of Gap in between right so we want support to grow so what we do we can easily add FL grow here ideally I think that should solve it okay so F go didn't do much oh it did it it did did did all right so as you can see we have to make sure the guy between here and here is still very much steady right so yeah yeah we need to Gap here like a minimum think so maybe could do gap of 10 R for from medium devices onwards okay this pretty looking good the mobile is fine let's check other screen sizes okay right there very decent right so we have a much more proper flow of how it's going to be so they are very highly responsive and that's wonderful so quickly we want to give a spacing between here and here 14.8 right so what I would do come here margin to Sy for and for medium devices okay okay so let's check this out okay can see that it's coming out as expected and it's looking very clear okay so that is very okay and this gives us more clarity or wasse to be expected right and yeah we've come to the end of the um L page design right so we already have some if you use the St template we already have some prute um you know template for both the login and log out is basically very easy so I'm going to take you guys through it but what I'm going to do is when you click on login or sign up have to redirect it to the pages we created so let's do that real quick let's go to the navigation let's close out all this you know I'm to close this as well we go to na right so this login takes us to login what about here action router so basically I have to write a function andle sign up navigation right so we could do that go here and just create this L function so we need to bring in our o use r o so use router so want to import this from next so I want to do a router the replace push right who pushing register so when you click on that it's going to perform this action and this should just you know link you out basically right so let me copy this as well and add it to this other one okay so let's go back so we are here click on login we got we taken to this page which is wonderful um go back again and click on sign up okay clicking on sign up doesn't do anything well it does but takes a while that's crazy click on sign up okay yeah this actually happens when the page is loading obviously so yeah basically I have log in sign up and the login sign up so basically we go back to the actual design while walk you guys through the actual code for the um for the off screens so in the off screens we're actually integrating API to communicate accordingly and um yeah we'll try to discuss this in a moment okay so um like I said so we're going to basically look through what we have here and the goal is for us to be able to you know have the all properly designed right and we're going to switch this straight to D mode and um so we can basically start um the flow from there right so first off we need to create a page for it we don't have that yet so app and just call me and call it folder let's group it properly and my rod right so you can as well just come in here and just create right so any SL home will obviously be our R okay so this will be the home page or the dashboard just call it the dashboard so whenever we go to local 3000 SL home so this should actually bring us to the own page actually right so wait for it to compare real quick okay so we are there so it's actually complaining about each child in a list should have a unique key prop so let's check wherever we're making We're looping um there's not a chance that we're not passing in the key prop so you can check that real quick and um let's do anything map oh right here we don't we don't have it so we can specify it key can do sorry about that so benefit do ID I think oh it doesn't really have it's just an array so we can easily use the index here so we can pass in the index as the key right so let's go over to the company logos part we already have a key here the features itself we have a key the other features we have a key the tost oh this is not our function there's a key right so that's not really so this should you know let go of P error so just refresh and obviously the is gone so now we are in here we want to quickly draft e right so let's start it so we can as well have its own um you know it's going to have it own like layout is basically Das so but then this is just a single pager so we can easily just dve them into separate section okay so we can actually call this right so we can put this under I think components and come off put it right here okay so there we go we can easily you know import it in here and there we go should be having that bad guy okay so now the other section we need to worry about is this cards I think but then let's build out what we have here first okay so now what we normally do is we already have an Alor and some sort of sh so we can just create two this for both of them to be more consistent and obviously they both images but then we can actually use the avat component coming from Shard SC so we're going to quickly grab that okay so let's grab the AV so we don't have it installed yet so what we're going to do we're going to quickly install it right going to make a duplicate of this so we still have our server running okay easily just paste it in there hit enter it's going to start downloading theat component okay so since we're there we can easily just Grabel with this take it right in here and um the actual component paste it in the first part okay so this is okay and secondly what we need is this R icon right so nothing much really doesn't really do anything right in this design but we'll just add it so IMG we have the source then we have the sh run down and images then slash check in public images we should be able to have the share icon okay don't forget to add extension all right refresh okay coming right well so let's check the width of this the WD of this is basically this so you could just grab it here right so see that the a image basically should have it own with I think okay let's track of that let's copy it again and have it pasted okay that's not really moving it that's weird let just fresh it okay let's see why that is so let's check the API reference okay so we have a couple of them right we need to focus on the ones that are relevant so let SP codeage source so this is the oh it's taking the class so let's obviously check the class first if that works so you can come in here and specify the width right there so we're going to grab all of this and paste it right in there okay so we can remove this reason is AC started H not really doesn't really work for so let's do a quick search for this ize shot nothing useful honestly um I think this avat component doesn't really expand for some obviously weird reasons let's say we take this and we place it in the actual oh okay see so this taking is we and okay so it doesn't really work well the way I wanted it to right so um what we can do we can just take it off and use the acture image whatever right so we can easily position that to match our use case so grab all of this okay so what we're going to do we're actually using an another component R avat this will allow us passing name and this name will be the actual image of the Avatar it has own numerous props as well so I think should just you know start by installing this so we can actually grab this part okay so we can come in here paste it in so meanwhile we can actually like remove you know we can leave it probably use it later on okay but then let's have it installed okay so now I want to bring this in all right and then we basically have to bring this other one in okay so let's do that let's see what we have here first this okay super expression must either be nor function not sure why we getting that so let's install this as [Music] well no let's run there again for some weird reasons some packages doesn't really work well with next 10 and 14 so let's see if we starting the server helps is more of an extension error an actual error yeah so obviously this this is not good for first you can as well just remove you know BS so M this and this so we remove both of them okay so we have them understood so we can just use you know actual images right obviously don't know why this didn't work out okay so now we basically included the the W and I here the source we don't really have a source so so we can as well just take that off and use the fullback the fback has to be the actual name of the user right so we can use that and um okay so that's completely fine so let's come in here and um yeah let's position that and put it in order so the width here let's grab the width again same thing for the eyes okay it's very small looking at it from a far very tiny stuff okay that's completely fine so what we do is to make sure we display both as flex and another Capt it vertically align it right so here and here all right this one is something we can position at the bottom okay okay so then we're good with that and one other thing I think uh this is not part of navigation it's really part of the page so we can proceed with the other part all right so let's go in here so we can as well just add it here it doesn't really too much right just in here Tex here we have to verine now ver so the text is actually primary right something like that 700 I think okay and the width and the he so the width here is not much 6 point and then we specify the it grab this and come in here and paste it in there okay so it has it own like Shadow so we can get that so box Shadows we can actually grab all of them like they video go to glob [Music] CSS so we can easily you know paste everything in starting from here to the varant so grab that and I not copy this class and includ it in our closes okay so that is coming out well when you override you didn't do much over white okay all right so the rounded nature is this you can grab it come in here and specify the rounded and give it a value okay so it's coming out well so let's make sure that it's positioned end to the end this in here 1.4 okay so let's make sure that we have it so okay we miss that all right okay so that okay for now let's grab this part text part so I think everything everything here I can just put them in one single component so what we're going to do SEC content we're can as well just go to components common sections yeah call it content section canas put it in here a new file put it right in there CSX so all we have to do here is to basically import it right and let's start cooking so section so the first basically has like two these I think two one other and the other so I'm going to copy that paste it in here here as well here then it right in there and this is actually you use it right um code for it right and let's give you the styling wires font is like 3 so let's have that text so the font is 400 so let's the the actual coloring so P that in so we don't really have that just very unique color so we can we have two I think yeah so one is for this part we can wrap it in the SP and put it right there so then we have to you know take everything put right right within it and this first part you know can basically have the other that and put it with SP you see more flexibility like this so you paste it in and we want to click I here right here so um yeah so let's see how that is turning out okay as expected so let's see this guy not sure this colors looks very different it's a different design so it's fine so you can come in here sorry oops text oh so this oneone here is like text is 1.5 right so let's check it out okay Ed good so let's worry about this cards here right so these are like dasboard cards so create a new component for it so you can definitely add it here right but at the same time you know it's already a card right it's something that you look for it's not going to be much of a problem once you have your content C data going to be an AR of object um going to have the icon path right images then slash user icon thing public images user icon not this one US icon just grab that name P right so we have the title here this and count 450 mind you this data you know will actually be extracting from the DB all right so let's go again let Mees um this one is is for to to verified let's look for the verified V not that one okay I think this one okay St check grab it in yeah that's gra it and is text let's make sure this one is capitalized and we have 350 there and lastly we have the channels so this is just the and let's see if we have like Channel Cloud think okay we already CH ion okay so now we already know what we want we just have to make sure on and cator um so could just call this metric so it's like um it's more like user metric yeah so user metric is fine is metric the metric so we have all of this so this has to be a diff and then we might actually have two other diffs within it first one basically has image s and not right so this has to be the metric icon okay so uh resource is very easy metric ion PA and um yeah so on the right we have the title and then we have metric do okay so let's add yeah this is basically the color grab there so it's that one so about count the different gra it and this is the size okay and um how come we're having a splash so let's see not sure why we're having that but let's check it out so I oh I have Splash here okay that has to be user is that what I I think okay right so we need to position this in a rightful Manner and um so before I position let me just grab the actual B Shadow come in here ideally if you have your own um Pitch styling you should use that instead of putting it in the glob CSS so just do dashboard called Shadow as well just grab the first name so let's close the things we don't need okay not there mean the actual card this one not not that one this one so class you P it right okay com so now we have to this here 46 [Applause] right so here we can actually give it so let's check up in 1.6 see else bad this what we expect so it's not left for us to position it you know cross let's make do that a little bit go to the out there fle I'm fle R okay yes so we just make sure that it grows at least so it's not growing now and seem to be some sort of ping so 1.25 okay then last will do is to stretch it the have to grow actually passing it first it's going all the C Bally stretch and then we have to give them some sort of Gap right so just give them gap of two room it's not bad okay so I think eight do better okay oh can use the system all right that should completely come in here small screen we have it start okay good so what else do we have we have to worry about the actual um table so now we can actually get this from sh table so you can just open random just use the basic table code so what we're going to do here that we can just call this to put on copy of own oh so normally you can put a new component folder call it series and add this oh no so now I'm going to import it right in here right and we can actually bring all these guys in not sure they have it installed we can quickly do that go in here and paste it in okay yeah since it's already done completed so what I want to do is to grab everything need so we're going to just paste it in so we can call this table okay this is actually we use more the Fest [Applause] spot all right so let's see how that is coming up expected so we have like three ruls um no we have three columns user join on and verified so we can easily update [Music] this here turn and ver so can remove this part the capture and here we can just go users I think take this off users so you can just have the the name it did the join so can just move them work the B easier take this off you can just use name here G do all right John C so basically we have all of this that's for the name the join done can be 15 09 2024 so and then veried this kind that be true first so make the first one false so this way we can just take in take out the P meod needed so be fine so you can do this so us this and user we already know that the S we having is two of three so user the name okay the actually they normally have like unique identifiers so what we do here is that we can just come here and Z so we grab it go to the next one I one and obviously to the next one I2 so can use that as unique so get a name get the TR and verified so to sure why we need so let's try to refresh this okay what are we missing say check it out room stat oh that's supposed to be so okay so f be true right so is actually true we can render separate component this and if it is FSE right so it's actually be a span as well can make it a SP okay so if it's true you can just say yes so the class name here is that we can basically have this enter so this is the color so we'll grab it so we paste it in we lost track of it we copy it again forget to include your eyes and yeah that's pretty decent not to much but if it is no we grab this color and we just do similar stuff all of this it right in here we change the coloring and then we'll change this to yeah no so the AR let's see what we have Okay so this for some weird reason is incorrect all right I should fix it okay so these are the things will be having and yeah so one of one is oh the class we don't have can position everything the video so yeah this will give us of choice right and um yeah so what's left now is to basically you know give the space in between here and here so go back to the P now the tou content in here I think yeah so the magic basically here so here to the top now is 3.69 get to the bottom is 5.44 okay point for to okay yeah that gives us better perspective okay let's make sure that it still works on small screens as expected so now we need to give some spacing in between space in here um here and here yeah uhhuh so we want to just know the space between here and obviously the end so um it say it's not properly aligned as well but then what we can do is to give it a matching you know pattern on the side so we can go to pit come in here do X X4 mhm okay so could just do M4 M8 both top and bottom let's try 16 out okay that's pretty decent uh so for the top doesn't need to be far far off so this def going to be empty empty um no HX MX for the side and let see can just be something like that yeah something like that okay so going to so we have some spacing in the bottom okay all system okay so that's we've come to the end of the of the dashboard layout and that is one great thing is very nice nice for us to start integrating the ACT apis okay so quite a bit I've added a couple of the things we might been needing in the next section and um yeah of course I've actually going ahead to you know work on the actual dashboard right so but one thing I want to do now is it should be a way for us to to basically look out right I think that one that missing and we can add that real quick right so let's see how how fast we can do that I think sh basically has this own po over component so we're going to go over it to see if it's still there right so P like pop over okay let's check the drop down menu H yeah something like this I think something like this should should do it okay let's see the pop over yeah more so or something like this okay so what we're going to do is to just going know copy it and we're going to install this real quick paste it in here okay it's enter let going to instore the the pop of component and then while is actually install we can actually go ahead to integrate it so now this is going to component you're going to Comm on as n and um yeah right here St in here and what we want to do is this right so it has to be triggered for some we reason um so we can actually um do this in here right so what I can do is to have it PED in there this will actually trigger whatever we have here so the content can just be simple log out so now this will actually be the actual trigger right so we can grab everything here this in here and here p in there so that would be our actual trigger let's see if we're doing the right thing okay so okay you can see the look out is coming up expected but if um the positioning has been distorted have to reposition this to make sure we are on the right track so you can just easily grab this one don't need it here right so we can have class name specified flex and make sure it's positioned the end so you can grab that and have it past it in there okay so we can refresh real quick and okay we should be good to go right we should be good to go so let's let's say we can um play with the width of the content itself I think let's say width 100 Piel okay has 100 Piel okay that's that's good right so log out should basically just take us to the login page it's going to do a lot of stuff but then what I normally do here is that just create the function I post under the log out right so click is going to you know basically you know call that function right so now we can actually bring in the router here router use router and we're going to take it from this navigation and router do push then SL L right so we have to perform all actions here other options before you log in it's sucessful let's Che it out okay what are we having oh wait we basically have to convert it to a client component of course so we can actually specify that on top okay then click on here L out so click on log out and for some weird reason nothing is oh it's actually unless just is very loggy sometimes you know it's very laggy so basically I have to integrate in progress to make it faster so let's go back to that page right so I want to do here is that we want to actually make sure um that once we are actually redirected okay so before that justy of points are here go in here and you can see we have that okay that's good all right so now what I want to focus on is actually go to the ACT Landing let's make sure most of the things are linked right so log takes us to log sign us sign up let's check if I'll get started all right so let's see let's see this I'm going to it in here it yeah that is it and this is the main button oh we didn't have the so iy the action this interactive and undo register okay so um it's you can rock the button in you want but I just prefer to always be this way okay so let's have a raptor so yeah this should be coming from next navigation no router Router the router the push so once to actually push in um the register so yeah this should be our option okay so we click on get started you can just take a while but that's going to get here so one thing I would love us to basically Implement will be the next years in progress you know but I think this will come up you know come later on depending when we are able to you know um finish off what we're doing right so just quickly check make sure that my sound is still on board go to system so sorry I'm just doing some some checks basically um go to home um again sound okay all right so basically this is just me basically increasing the sound of the mic yeah I think I forgot okay so now we here to basically link the apis right so what I've done on the back end I've actually created a couple of API for us to work with right so I'm going to close out anything everything and on your app folder you can proceed by creating the API folder so this would be API route right similarly you know how app everything on the app is basically route when you have an API on the route is definitely an API end point so now we can actually have the login this is the round for the login so when you go to SL API login is going to redirect you here right so this is it so what we doing here is basically very simple we're using Zod to validate our input using the login user input validation so I'm going to open this up a bit and you can see what we're doing with validating the email and we actually validating to check for the main size to make sure that it's actually a valid email and then we're validating the password as well right so we're specifying the minimum amount of characters as well as the maximum right so this is for you know when user tend to basically try to log in we try to make sure that this validation comes into the picture all right so if there's actually an error with the validation it's going to return this so I've created a custom error response this will be responsible in handling all our custom errors right so why this on the other hand will responsible in handling all our sucess response so the data can be anything the message can be anything the user specified right and the code can actually change as well so default is 200 right so you can change this to anything so it's something that you can basically reuse I do this literally in all my project it just makes you to have much more of a consistent flow so now if there's any failure whatsoever so I demonstrate this real quick right so I go to log in user I'll come in here and just put in probably don't put in the email just the password send so this is definitely validation error and let's see what um Zod return back to us you can see what we are getting we are getting name Z error and we say the path email it is actually required right so it didn't actually receive anything but it is required so that makes sense that means our validation is working asess expected so let move the password field and sent so you can see we have similar Stu let remove everything and send it you can actually see that we are not passing in the right thing so thison is actually expected so when I pass in correct values it's going to connect to prisman and so when successful going to give us a token so now I'm going to explain the rest part so now we actually checking if em already exists with Prisma so what we've done is that we've have this I've set up this local DB this is from the documentation of course Prisma documentation right so now you basically use this to it created some sort of single wrapper what this is doing is it creates a very um a single instance right so if there's no instance it creates a new one but if there's an existing instance it uses that instance so instead of creating multiple instances just create one and reuse right so that's good so once we have once we don't don't have an existing user so we just say that oh error response this is the message remember is the message message is user with this email does not exist and then we have to specify the code right so the code is like 400 so that makes sense right so now we move on to once we basically have a user when we get to this stage is actually known that we already have a user so now we need to generate a token so to generate a token it's very easy so first of all we basically just you know find that user so you can actually remove this line or pass in the actual user object but I just like to have it here so we try to get find the user by that email then we use bcrypt to compare the password with the hash the user has already you know with encrypted password they have on the DB all right so when we compare that if the match comes up to not successful or there's no user we return invalid credentials but if it is a valid user in the password matches will definitely you know sign we create a new GWT token so we can actually do this by using the sign method and passing the expires in so it can actually be 1 Hour 2 hours or whatever so ideally you can just put this in in sh LIF span like 15 minutes or 30 minutes right so um this will actually generate our token and meanwhile I will actually explain the validate token part valid token is very straightforward what we are just doing we're trying to verify the token with the with the secret key we have in our process EnV so in our EnV this is the actual EnV in the EnV itself so you can actually see we have the JW SEC you can actually be anything like this right so it doesn't really matter why the database URL is basically what you got from you know prismier um not prismier super base you can actually use super Bas or whatever you know um manage service you want or you can use the local server as well so I'm using um um super based for this so click on here you're going to have databases right in here you can see we have a lot of stues so definitely they should be our user model or whatever we already have all of this is created so now one of the thing I would mention is if you want like to get the actual um what's it called the actual configuration of this database you want to click on Project setting right you want to click on database and then you see that Ur you can see this is the database I'm using right so you need to just specify the password you use probably when creating it out so when you create a new DB they're going to provide you a password you want to copy that down and when you get here go to the URL tab copy everything so this is what you will now paste in here with your actual password right so this is what we're using now you can actually if you have PG admin you can set it up locally and that should work for you too okay so back to where we're explaining that explains the we're trying to verify the token and if it's successful decoded token so now we go back to our DB um sorry I think the token yeah and then the R so this is how we're able to generate the token so once we have a token we just return that token as alongside the user ID so when I try to log in send you can see that we have the user ID and at the same time we have the token so we can now reuse this token to make subsequent requests right so now this is for the login right makes perfect sense so let's talk about the register so I'm going to close out the other tabs yes so basically what we are doing in the user um in the register we're taking the email taking the full name and then the password right from the body so we try to validate this with Zod if you notice we are using one validation for both the the front end and the back end right for both the client side and the server side so we're using the same validation just to have a much more consistent flow so you can see that this is what we are doing taking the full name taking the email very similar to login as well and then the password the only difference is that we have the full name implemented has a minimum length of three in the maximum length of 50 okay we go back to Route so once we're able we can see that we're using absor safe pass this prevents it from throwing error it just gives us you know if it's successful or not so if the validation fails it returns an object if it's successful returns an object but then the only thing that changes most of the time is the state success property if the success is true that means the validation is successful it is if it is false that means it has failed so this is what we doing for the check just similarly what we did in login and then this is what we looking for the user if there an existing user you want to return an error and say with this email already exist I'm going to show you guys that real quick so go to create new user this user with already exist so let's try to send it can say we have the exact error here right so user with email already exist so this is that error and it's actually a 400 error makes perfect sense so now once that is successful we want to make sure that user ashes password so we can get ash from bcrypt right so we're going to Ash our user password with a sort of 10 right and what we normally do is we specify you know um the ash password so once we have this we want to pass this to the password field randomize okay so now the user basically has its own model you can go to prismier go to schema. prismier this is where we've set up our model right so if you want to actually do it for the first time you want to follow this commands right so first off you basically want to install the prismal um the the prismal clent right so you can actually do this by doing this then you can actually install just follow the order the way we have it here you can install PR first then the shet prisia then try to migrate you can actually use this if you're doing it for the first time or for example you've made some changes to this say for example I add a new field so let's call this new field so New Field is an integer right and for us to be able to have this you can just use this to basically migrate your changes or this I use this most of the time right so but if you're doing it for the first time you're trying to initiate your project this is the command you use to run your migrations okay going to undo that real quick and then you use this to basically install the prismier CL the prismier CL is what you be using on your server side to communicate with prismier right so this is what we basically have on our DB you know to you know communicate so this Prisma we using like Prisma user Etc so this is what we'll be using subsequently right so I actually have this follow this flow this will allow you to basically set up your prisoner successfully and then there's the link on how to set up prismier schema and all those stuffs right so now if you if you run this and you initiate your project it's going to autogenerate this part of the file for you so you don't need to Ute it manually it will just autogenerate okay so you can see that the user model we have email field we the full name is verified we have password C randomized Channel created ad and updated so these are the fields we basically have and we actually have email as unique so this will actually help us later in trying to check if um to prevent users from entering in existing email okay so um this makes valid sense so what we want to try doing now is to start integrating the API so I can actually go to the forms I'm going to close everything out go to Source go to um Library not Library go to you know components go to forms go to register form so what I've done um before now is that I've actually integrated the API itself it's very easy the process is very simple so one thing that we are using to um leverage this is that we have a new service called API service so this API service is responsible for making API call so it's basically very simple what we're doing is that we're using fetch using AOS because it's a very much simple project we're using fetch to basically achieve this so we created this service so that we can be reused later on and we have this custom toaster that us to toast you know errors here and there right so I ER making the API Cod the title so we could just call this API service error right so that makes sense so what we're going to do go back to register form we using Zord to validate on the front end as I said earlier so you can see what we basically have here this is where we are set specifying the use form with our default values right so this will be our form and this is what we'll be passing here later on this will allow us link it or properly so now what we have here is that we have the we have three inputs we have the full name we have the email then we have a password right and then this main button will be responsible for you know submitting the form so literally anything that has a type submit be responsible in submitting the forms here so maybe you can just create a button so it can be anything well as far as it has the the type of submit it will be responsible in submitting this actual form right so that is the way it's going to be so I'm going to undo that real quick okay so you can actually see what we're doing here um you can see that on submit we call this function Ando submit then on Sumit this on Sumit is what we have the function we have can see we have some loader so can be able to keep track of the loading spinner and then we actually call the make API cost service with the AP route right with the method and as well as the so if it's actually successful we return a post that shows successful then we return the actual message coming from the AP right and then we route the user to the login page so we want to make sure that we um we disable the loader to stop rolling right so all of this is basically very simple I'm going to demonstrate them how they work on the actual application so what we're going to do here is I can just create name j m email test gmail.com so the password can be anything probably the one I've used before so let me just grab any fake one that's a password and you can click on register so this is we're going to make an API call and yes so we seems we're having some errors so I'm going to check out why this is so and er go by making the API call sported token this is not a valid Json okay so let's see why that is happening and put this to Let's dug this to the side I think all right so how do we do it okay to the left Network okay so register let's see oh yeah that because the end point has changed it's no longer SL register we changed it on the actual like I said when you go to app API everything here is a route so it was used as before but now it's now register so we should be communicating to API SL register right so let's refresh that and I just send it so it's trying to make request to the register API now can see that it's spending can see that it's successful so user created successful canly proceed to log very good you can save that can see the response from from the successful response let do this you can see what we have here so you can see basically have this verified we have the as for randomized channel we just Generate random numbers for the channel doesn't matter right so basically have all of this information coming from the back end you can see that we have a much more consistent kind of data structure here so we have meta we have the data so this is very consistent across all our apis you know that way we don't have to you know worry much so you have a very nice tost here that is responsive for both desktop and some modifies you can close it out as well right so that is it and we just created our new user and one thing you want to do we will directed to the login page what you want to do here is that want to be able to log I not implemented the login functionality yet doesn't work so I'm going to take you guys through the ride of integrating the login part right now okay so we can just pin this but we we're using most of the things there so go to login form right all right so we can just create this loader you add it to the state can add it anywhere doesn't matter and what I want to do is to make sure that we calling the the API itself like this think all of this on the own submit block so we have to import this okay login sucess we D to dashboard I think so we have dashboard or slome so router is not here we have to import and make a b service router on the other end so this need to be in the same function as well so router we'll fix that real quick router is equal so use use rter so want to bring this in from next navigation please be very careful here right there's use router from next router and there use router from this navigation this is the one you always focus on right so this is the one you always focus on not the other way around so you won't have necessary errors okay so we want to make sure we import it so I want to do here R the push so what we want to do here is the actual log so now we're actually using generic here so that anything we pass in here will account for the actual response so what we are going to do is to go into here and this is the great user response we need a similar can take that and paste it at the button the ones that are important okay no I'll leave it there and yeah copy this and let's make something similar meta and this will be loging user response this we creating type for what we are expecting from the actual API so sorry L user response data it's going to be all of this but then how do we get this you can actually go to login right so you can see what you are getting here it's just ID and then user ID and then the token so you can come here and say us ID string and toen so this will be our actual um know response so what's missing there let's see why it's complaining so proper equation have the same time um okay oh no no of course this is I log response yeah I log and response so this is what we'll be passing to the login form uh so we missed an e there so we include it and we come in here paste it and part so this will be what we'll be getting so if it's successful you know do all of this right okay all right so now if everything goes as expected we need to make sure that this button is submittable and at the same time it's loading can actually be this okay submit okay so now I think we should have a much more consistent flow let's check it out so we try to log in let's look for obviously what we have here email and then the password so what we're going to do is to grab the pass we have here and paste is going to load it and try to log into to the server so you can see that it was actually successful and then we get this so let's fix that we don't want it to return return the email and the password let's give it a much more proper message um success message so go to the top and we want to remove all of this so we copy everything we have in the what's it called in the sign up and or just description part and can take it here log in um okay so let's see sure we are not making issues oh yeah of course this is to we waiting for and not this one so you can take that one off we just needed one totic okay supposed to have this when to use Lo in correctly m s so let's try that again answer this so email oh the type here is supposed to be text and not password so let's fix that type text to email doesn't matter and let type here password okay so we're going to refresh that all right so let's try to L okay so us are log successful and everything is coming up as expected all right so you can easily close that out so now we already have a couple of things linked so we have the login and then we have the sign up one thing I want to worry about is the log out want to be able to log out and do all those stuffs but then we need to fix the login when the user logs in it now has a token right we want to save that token to the local storage right so if you check your login data it basically has all of this right so instead of doing log Dom response to sources we can actually do something else here we can save to local storage local stage do s item it's okay and want to set it to whatever we are getting from here the response do not meta now but do data the data and go to the Token okay so this will save our token locally on the DB right so let's test it out and make sure it's working as expected so let's go to inspect um go to application storage and just clear this out right so let's try to log in okay you can see that our JWT Tok is coming in as as expected this is this is wonderful right so now this token is what we now use to make API calls on the actual dashboard right so um let's do that you can close it out so now what we want is okay so before we move on let's worry about the log out the log out basically clears it okay and um yeah so let's let's do that okay so um let's go there let's go to login yeah our sections common so log out and the log out so it's going to go to log out and want to clear the token so your clear so you want to just clear local storage or you can just set the token to null for now for the sake of the tutorial let just clear everything we have on the local storage domain for on local storage for our domain right so that works so you do that it's going to clear everything so let's go to inspect application can see that we don't have the token so it's completely gone so you try to log in again so we have the token we try to log out so the token is gone so very good very good so let's log in again so let's try to link everything here to the actual API so one thing I would love here is my channel let's have this is number of Channel I have listed as well you know I think that would be that be nice so what we're searching yeah [Music] okay a channel 50 so yeah so basically this will at show our Channel count right you can put it here so itn't complete so much it's just 50 okay so this means I actually have like 50 Channel or whatever right so this channel is basically the randomized channel I created way back on our model user model right so let me show you guys the schemer to prism go to SCH prisi see this randomized channel it's just a random thing so if you see where we are creating it when we're creating the user right and I think we're creting the user here we just Generate random number and put it there any random number between one and 100 was to have you know our channel to two channels right so that doesn't matter matter so what I want to do is we can go back to here so we want to try integrating the actual AP high right and the way we do this is always start from the parent component right so if for example we are looking into dashboard sorry this is the API let me close everything out close everything open it up okay so open this up close everything here so go to Source go to um your app go to dashboard go to Pages here so now we notice that we can basically work on all couple of all of this right as well as the dashboard content section so this navigation basically has the user profile that we might be passing way down I think yeah all right so so we can actually go to the navigation and make some API calls I think so we can actually make an API code here and we can make an API code here too so go to the Navar let's get the user profile so now when you're making an actual API call you want to you know you want to actually um use the use effect right so you can actually what normally do and sync function fch right so you can just call that F doesn't really matter so now we can actually use a WID inside of this sync and we can make an actual icon so what we're going to do it's very much easy we're going to grab the exact stuff we have right here so now what I normally do is that I set loaders like preloaders so you can come in here setting some preloaders so by default this should be true so when we are done we can easily just set it [Music] to so try C so set it to forse similarly you can actually copy this paste it there when you don't set it to forse right so now what we're going to do is that when it's actually loading we need to use sh skeleton to denote a loading state so we don't have that now let's actually let's install it so let's look for shot SC skeleton so we have a skeleton here this is what we'll be using it's very handy so we going to copy this and we're going to go in here and install it okay this going to install the skeleton component okay all right so now we're done want to grab this and paste it right here and we want to like try to modify it it doesn't really matter it's very easy so for skelethon one piece of advice is always make sure the skelethon you are displaying matches the actual width and act of the you know the actual component you get it so now this is what we're going to do if it's loading we want to display the skting component s we display the ACT true component right so now let's make sure that everything is in order okay so the width and the height here is basically this so you can just grab something similar and use it right so if you want to test it to make sure it's coming out the way you want it let's make sure that round it is full and let's fely send this to not loading let's see what will come up can see that this is what you be seeing in your actual skele so this will knowe that is actually loading right so you can change the color if you want but I think this color just matches it it's perly fine so you can remove this now just make it go back to the actual color so now what we want to do is to fetch the user information so what we're going to do is to basically use the same service right once to come in here the try block so what we are the API we're using to fetch user profile is this right so API SL dasboard SL user profile so you can have that imputed here and let's import this and then the actual response from the API has to be typed so you can grab this all can copy it and what I normally do I use this I'm quick type to easily generate types so it's very hand so it's going to load up and we're going to paste our JS in here right so we can just call this I user profile response think yeah so you can now copy this can actually see make sure that you have interfaces only and verify Jon our result at from time so we can grab this and go to our type in go to index and paste it here so we are not really exporting this so what we need this is going to be I user profile response data right so you can come in here our user response user profile response and we pass in it this as the actual as the actual datail right so there could be a we can actually like you know extend this to prevent using meta out the time but this is just completely fine for the sake of this lesson so paste this in here and we import it so this is going to be our actual a guest request and we're not passing it anybody whatsoever all right so we'll just try to you know conso this out let's see what we are getting and then we can proceed okay so let's go back let's inspect let's take this here put nwork Tab and refresh Okay so is going to load you can see that the user profile is coming in correctly and then the token is been passed to our headers you know now this is coming through because what we've already set in the API service I think you can see here we are saying that if there is a a token in local storage add this as the be this is what we are seeing here right here right so that makes perfect sense and I want to explain one thing bound Js not just typically on Death Mode um they actually render component twice that's why you see that this API code is been called twice basically so um on the live server you you will not experience it you're going to make just a single API call this why n j basically does this is to basically test for any form of um you know effect side effect right so um this makes your application much more robust than it should it normally will be right so this is the response we getting and this is the actual data this is the full name right so let's pass this to you know as our avat on top so come in here go to the N so we already have our response so what we're going to do is to basically set this at a state con user profile say user profile use itate so it can be null or right or we can actually can this or not right so you want to set that to the response you're getting say copy the rest and past it right here so we it's complaining about some issues for is not to type say deduction it's not oh um it could be you know it's always like this let me just do this so let's try that out not really coming up well let's see let's check the error again 4 this is not responible to give us void oh void not null might not return anything I just throw an actual [Music] error okay so let's do this um so let's do we can actually typ cast it as this okay that should do it for us so that way we are setting that the response always going to before it gets here is always going to be of this particular type okay so now you can as well just specify n here so we already have some data within here and we have to pass it in here I think so let's do this optional chain the response the dat okay so we can actually see all the type coming in which is very handy the full name so let's do that now and we try to refresh it so it's loading can actually see that the full name is coming in and um yeah it's actually displaying the full name here we just need the first and the last so ideally you can just like split it split by the space and get the first index I think so let's see how that comes up okay so the first basically has its own his own name by what I was actually anticipating is that we have first letter and then the last later right so um so we can do that I think can use a substring at index zero let's see how that plays out okay let refresh okay so we split and then we're trying to get the sub string doesn't really work um okay I will just try to investigate this and write an actual function for it okay so not that long so I just um come up with this future um function to get the initials so you can easily use that to grab the initial from you know what we have have so we pass that in and we don't need to split right it's completely fine I'm passing the full name and then we going call it so let's see string yeah so I will make it even if it's empty which they have some vales okay it's coming out well JM JM actually for James Martini that's good as expected and um yeah let's worry about this refine me real quick okay I think it's not here it's not yet by the way right so the me part is in oh it was actually in the um in the other page H so that's why I was looking at it could have easily put it here since it's basically um here so I'm going to do is to you know put in all of the stuffs that's so we've done here so log icept to log out I think so everything here okay so we going to just grab it and we take it to the register not very FR page so the idea is to allow us call an API once not multiple times right so we import all of this guys okay so including the use effect as well so now this loading stuff we can as well just pass it as a prop so if it's loading and then the user profile itself okay so these are the things we're passing in here our profile is actually [Music] bulling and user profile is this so you can easily just try to um import it I think so uh let's see in here we basically have this so this is the user profile there we can just place it in there so I user go here again yeah so let's fix this supposed to be I C to letter U let's replace it across okay so go back to your here so let's import it it's already imported good enough and what else do we have okay so we have the loading in get initials as well okay so it's actually complaining about something going wrong so let's moove the types here okay come in here and [Applause] dos okay so oh I see is's like this the other way around this is actually generic type um type okay so that's this just this is okay so going just pass okay so this will actually you know call the API once remove let's pin this this is going to actually call the API want and then we have the actual response so what we're going to do here is it's going to be a little bit tricky right so let's make sure that is actually a client component refresh this so it's loading this is loading and then we have the value good first right so this is the user profile we call it one one want to pass it now is the verify me so if it's verified right if it's actually Force they want to display this so let's check that out so if is our profile response no data do is verified so if it's verified so let's passing the same something so in the design we have this so verified you can come in here and you know if it's we pass it in here action does not do anything and we should be able to add some sort of Icon um to this button right let's see if our buttons really taking in some some icons so main button okay so right icon route right right okay we don't there's no left icon oh okay I think the left one is icon route okay so let's try that out and Images slash check out images public images so what we basically have here is the um is the icon sucess check I think go check I okay like check sucess okay this one so let's grab it PNG so we try that out and this one we basically have to call an API to verify that user click and verify you that we don't have that API yet but we'll create it right so we can just come in here it's going to be in a sync function right so yeah so click is going to render this okay so this def is the action not un click okay and the verify user wor but later let's go in here and let's refresh okay as user has not verified can be able to verify perfect so let's fill in on this API and lastly we'll come back to verify the user okay so what we're going to do is to go to page right so can actually pass in the user profile okay we passing the same thing right and as well as the same props so we just grab this so you can remove this I'm making of the API so you can grab your um prop go in here and pass it in here you could have just reused this well it's completely fine and um so here we have the loading we have the user profer as well so pass in the prop and yes this is fantastic so what you want to do here is to just come here do user response for data do oh we don't really have um you know user list for now right so this is not coming from the actual apepi but for other ones so we can actually leave that so create that in a moment so what we're going to do is to change the name right so um what we can have a skeleton here if you want right so let's quickly have that so the width is not really that much so the width can just [Music] be 10 R and the can be two right so but then what want to passing is the actual user full name I think so click on there let's just close this out okay we have okay is this too big I don't you guys can pretty much see this completely fine right so let's see is I profile the response data do full name right so we need to put in the total um Channel as well so you can grab this and paste it in here so if it's loading will give maybe five and randomized channel so let's so it's actually loading you can see that um we're seeing quite a lot since actually using use effect in this component we have to mark it as a client component sorry about that okay scroll all the way up use CL okay so one of the thing we want to do with this Loadout is that we have to make sure is um hydration field that's supposed to be so but we'll fix it fix it later on fix is there let's see supposed to have it on the Rope so let's let's look at that so got four okay so the same Center we apply for here I that oh okay first our right hand enter okay good good enough is something we expect all right so let's make sure it's coming in as expected so item s to flex Gap okay so let's see why this is complaining so expected server contain a marching D in P okay right this is something that we always you know fight get so skelan normally has a d wrapper it needs to be placed in anything not a P tag so the same thing we do here anywh you use skele probably where you've used it where we've used it in na bar let's check it and make sure that it's the required okay it was used correctly there so when we refresh now that eror should be gone so you can actually see our loaders so our loader is coming in nice and clean right so good good all right so now we have to basically link all of this you know API to the dashboard so now if you check the actual API we have so let me just remove all this on Imports and what else do we have here nothing much and closes out cles out and this is what you do go to this go to the app and you see under the API there is I think dashboard folder so this is like SL API SL dashboard then we have the users metric so then there's the route for it so this is like a GU request so what we are doing here it's a very simple form of logic what we're doing here we are getting the token from the other right yes so we're getting the token and the token will actually be something of this nature be so this is going to be yeah it's going to be of this nature so it's not still have the be alongside the actual stuff which is okay so then once we pass this to the validate token logic it's going to split it and get the just the token part stripping off the be so this is something we use to basically Val our token I explained earlier so if you come here if it actually validated successfully it's going to return the decoded token but if not just going to through an error so basically you can see we have this TR catch which we used to you know to basically um check it out so if the token is not valid going to through this or if it is valid it's just going to return the actual decoded token so go to our route and you can see what we're doing we're checking for the validity of the token and then we want to count all the users in the platform this the total users this just do DB user count this will counts entire users and to verified users is similarly the same thing you using count but here you actually specifying a um search query so make sure that it's verified is true these are the verified ones and the ones that we want to sum all the channels basically together so you can just aggregate you know with this particular sum then passing the randomized channel is going to sum all the randomized channel basically together can see um let me close that in the Prisma schma Prisma you can actually see that the randomized Chann is actually an integer so we can definitely aggregate it so this is what we're doing here so to Chan is going to give us the total count of the randomized channel and then when we try to call it so let's go to here user metric right so BR we already passing in one user token then send this going to try to e the DB in oh JT has expired as obviously over one hour so let's just try to log in again let's get a new token okay so it's try to log in and um let's copy this copy go to user metric paste it in here send oh invalid token so there's actually um a quote there let's check the let's go again okay you can see that in the platform we have toal of three users none is verified yet and the toal channels is like 1 2 3 this is the will be calling here you know to basically display all this information so let's go right in and then let's go those API let's link that you go to page go to this dashboard yeah so this is something that want you be calling right here right so there a couple of ways we can actually do this we can can choose to do it here or call it here we can use to call it on the actual page right so it's just is up to us one thing that is very steady or common is the fact that they all have data so what I will do is to grab the data that they have and just let's Crea into some sort of types it will make our life way much more easier later on export interface I user users metric response so response I call M and data is equal to and you can just pass it in so they have numbers so I a number number number so that's completely fine and then what other thing do we have so for the users listing part right so let me yeah so basically listing basically the data is an array of all of this right so is an array of user perhaps what you'll do it's still very easy we already have the user type which is this I think so we just have to you know form an array of this should be good to go so we don't need to worry about this much okay so yeah so basically I have those out of the way and go back to here and here we can actually call this comp was used once which makes sense we can actually call the API now right so let's go to here let's gra loading status so we have to change this to um fetch loading D content so come in here and so load it so we have to import the use it and it's can be first good so and then the same thing we want to make sure that we can actually call the actual so now what we want to do here is that if it's actually loaded or mounted you know you want to like fetch the to fetch the API so once you come here have that imported same way have this imported okay so what I want to do on the on the other end is we want to do a couple of other things right we'll fit two API simultaneously this will be for the user metric so this will be the user metric response right so let's remove that and so we need to have that imported user okay I use as matric ismetric so the other thing we be having so we fetch the other one as well I users listing response so we can actually go to the um API to grab the actual API for each of them Das SL okay track of that contr c contr v so the listing part I think is just is as listing okay so this will give us an idea of what is required right so but then we can create separate states for each of them and we can actually grab a state um a mo set here and can paste it here so this one will be us as metric set us as matric so going to ideally be users message for response so the other one has to do with the users list set users list so now this where becomes interesting you know what I said before is that we can actually have this you know this response data so but then want is I user listing response so it's going to be an array of this data right so we can easily use that and it right in here so we can definitely import that and yeah so that just makes sense you can now set the state see this for the first one and for the second one set isers listing okay set it to this right so want to make sure that this listing is coming up as expected okay so let's see what we have here and don't always forget R this what's this all right so now we have those but just for to clarify that if it's working let's restart the server okay okay fantastic right so let's see the metric metric is coming up successfully listing the listing is coming up successfully as well so basically I have three users these are the it is and this is all the information um right so let's worry about users metric it uses to fill our actual data so this is particularly straightforward you can just do users metric right so we basically have to mimic this so what we'll do is to just come in here okay so uses metric well is actually not a map object but then we actually create a map for it right so um yes so basically can do metric response data that's oh so oh want to do sorry I just copy this so I don't have to retype it twice so we UND [Music] too okay so I'll basically pass in here tot users so the same thing will upen here toi and lastly we have 4 channels so this will give us an idea of everything right so Das content so users listing so users listing on the other end has to be for the actual table right so yeah we can easily just pass it in is just listing so now we can actually do a couple of things if the table is loading want to actually pass a sort of preloader right so let's use n content right so pass it in there so if it's not loading you want to just pass it in on alongside passing the users listing object right so so here we have to specify our skeleton and we have to specify the classes for it so now we can actually give it a very big light he can be 20 r or we can do a couple of them right and just have a [Music] div and can paste it in here and the height does not have to be that much can just be 10 R and the width let's do with full let's do a couple of them so do 200 pixel can do 200 pel and lastly we can just do like 4 pel you know something like that but I think the entire width is almost very much the same so they may be no need for that so the height is something we can just make sure that it's as small as possible and probably give it some sort of Gap so it be Flex make sure it's actually Flex column and give it a gap of save it right so one other thing we want to do is to make sure that the user listing type is passed to the actual to be this so once open is up and yeah there we go we can just have the user listing so user listing tically is actually taken from this type right so it activate this type all null so go in there and want to paste that in so you know much you can actually get that from the types so let's remove the table fter it wasn't used right so we have all of this okay so we can just come here doesn't really matter come in here and we can just remodify all this information right so us this is definitely an array so you want to return an array that does return this object so what we'll do is a user list thing map right user so return this so it's going to be an array that returns an object of this nature so we can easily just grab this take this off of it and have it pasted right in here okay so let's make sure we're doing the right thing right so user okay that seems pretty decent to me not sure if we need this guy since we do let's say this this and this is the closing one yeah supposed to work I think okay so this um not I users metric it's actually I users [Music] listing response right so user listing dot thing response data yeah so that definitely is an ARR so we can actually get it Tye from there so you can us ID the full name um you did The Joint but then we can actually use some sort of format here but we will just put it this first they verified or not okay so that gives us aity so use this undefine so Mak sense so use this done not sure this all that working that is verified or not oh these are this object we just put this string first okay so let's refresh this okay so we are not seeing our skeleton which is bad let's quickly fix that okay so has the in here I think yeah here okay I and then the width yeah maybe give it some sort of PG red just for emphasis let's see if it's coming up oh okay I can actually see them oh they're very small use the with f option okay exactly exactly like that that's was expected so P custom gray let's check that out okay so we can actually use that prob we need it to be a little bit um a less of [Music] isue so let's leave this so need to make sure that this thing actually works at any point mhm okay so we can just do true and then we set it to First yes I think that should fix it refresh H this okay it's actually loading makes perfect sense when we have all the data is going to list them exactly exactly so that's what expected there and um yeah all our users are coming into the picture and this compl very straightforward um yeah just to show you guys the AP we're using to list all the users is very straightforward so very similar what we've done before but then we're just finding many so then we are selecting all of this this to prevent us from selecting the um the password fi we don't want to be displaying that doesn't really make much sense right so this is how we are listing all the users one other thing we need to quickly work on is an API to basically verify a user right so um yeah so let's quickly work on that come in here you go to your um user metric we have the user profile so I think we can reuse this same API but then what we just want to do is going to be a post most likely post right so P the user and just update that user so going to copy this here and change this to post so we're not um expecting anything we just get the token and we already know the the user from the token what I want to do here is to update this user so just want to do user isal to a wait d. user update right so let's see what update basically takes in so update Tes in the we close and then the data you want to you update it's very similar to every horm using squiz before it works similar so we have the work close and at the same time we have the data close right so I think this is it so let's make sure that we in the right track the we right and data so we needs to be filled yeah so where um the ID is equal to this so this is verifi a true so we don't really need to do that so this is the user just give us back user response user appication stat this AIT successfully right and okay that this makes sense what I want to do now is we can go to our code to our um HTP C to basically test it out so you can do this just duplicate fire user then create this soy user now is actually first so user profile post right it's just post okay so this is it and let's try this out oh just expired can use this oh this expired as well there's one we used before that wasn't expired I think it's this one okay it's this one so we can just copy it go to verify user paste it in there send okay you verification status all successfully you can see that it's verified status is now true fantastic right so now that we already know how to do this we can as well you know just make sure um so if a user is already verified we will not allow the user to verify again right so it doesn't make sense if we are doing that we need to bring in back the user model so we need to bring this guy in and we can bring it in can bring it in here right so if user so you just do isied is true with the same user ID so yeah user already verified so you can easily come here and say if is already verified what I want to throw here it's just like a simple error let's say the way we are already trowing it in the you know login and log out and all those stuff so this is the way we are returning error response so you can go in here copy that take it to user profile and P this right in here right so you okay this user has already been verified this user has already been verified right so this just a check for us to prevent doing this extra work so let's test it out this has already verified so but let's try to try let's try to rify this user this user has already been verified okay profer check perect check so now that we already have this it's now left for us to link it right so this one is available in the I'm going to close all this out going to go to close this out s up dashboard I'm sorry P okay so this is under verify user this is where we call the actual API to verify the user so now when we verify the user I want to like refresh this entire component so we have up toate information so what I normally do here is that I can normally like set a key to it so I'll just come in here and call it refresh key set refresh key you state is actually equal to maybe zero doesn't matter so you can come in here and what you want to do is to call the actual API to do it if it's successful then you're good to go right so um normally if it's actually successful gives us back the profile information I think yeah it did he did so what we're going to do is to make sure we do it very similar to user response so we are getting the same thing so here is going to be a post it doesn't take in anybody body can just be this right so yeah so we have to check if this is successful so put try and don't worry we need to set our own loading verify loading set verify load so let's make sure the same one a veryy loading so by default it's false right and then so this is try always includ the C block CAD to first so whenever you're done you set it to f as well at the same time we want to make use of our refresh key set refresh key to mandom right so this is what we'll do we just just have to make sure successful before we do all of this right so we do if response dot so response sorry so response response I think might be having multiple responses so let's call this verify response so refer response that we're not getting Auto compete for some weird reasons we supposed to okay yeah okay the data the data I think sources then you want to do all of this so either way is sucessful not we still have to set the load out to first so this gives us proper clarity of what be expected so you can actually pass the refresh key here whenever I changes you should be able to render the default component okay so what I want to do is to make sure that my file loading is passed into this [Applause] button right so this action is going to perform this action and um yeah let's check it out so it's actually loading trying to F our information expired oh I see basically expired in all of this and let's check the response so the message is this uh our front P should be able to redirect back to the login so let's fix that real quick going to copy all of this and I'll just for some weird reason paste it in here just in case we lose track so we go back to our API service and yeah so this is the response okay response of Json yeah so if the response of message it responds the message is equal to this okay so quickly we want to fix this so if the message is JT expired we should be routed to the um the login so window the location the replace so login so I think this should work right so yeah that makes perfect sense okay so let's fix the Frei BGE seems not to be getting what's needed come in here okay right so go to the main button come on and just go to main button so here the icon I think you have to make it way smaller probably remove the classes okay so yeah that gives it a much more better shape right and so one thing I want to do is I to change if it's verified cross a pointer should be disallowed Crosser sure let's go to here yeah just to check my sound sorry about this guys go the system yeah want to make sure you guys are actually hearing me properly okay so that okay so we just do cursor wi not allowed yeah something like that so you can grab that and put it in here yeah so it's already verified I can click it again so that makes sense okay so um we've really come very close to running this off right so we can just go here try to log out let's register instead let's go a new user we can Tom Jerry right so Tom gmail.com and let's give Tom some sort of random password so let ready start some Okay so Tom res successfully so let's try to loging with Tom's account so Tom by default says all of this preloader and it's not verified yet some J is coming up correctly so we can actually turn to verify thumbnail by click on this verify button so verify me is verified so one other thing we forgot to add there is the I think the oh it might actually be coming up but due to the white nature of the um of the background when not really seeing it so that makes sense so one it's actually verified um that will make it like two users that are verified I think yeah so from here you can see that this and this are verified and Tom is actually verified really um okay so it's supposed to be three so let's refresh this to be sure okay three right so this is what what we're going to do here we need to like um when you verify want to refresh you know the entire thing as well as this component too so you can pass in this refresh key pass it in here as well refresh key is definitely a number right so pass it in there pass it in there and can pass it to the actual use effect so let's try this out with a new user I think and before that um for here we need to add some sorts of preloaders you know they were actually missing um let's let's check that out and go to p P go to dash content right and this is it right okay this is what we basically are so if it's actually loading we need some sort of value here I think so we can actually make all of these DS so if it's loading we want something similar so we don't need the class name remove this so what is loading is more of yeah when that is loading we need that okay so they loading content I think mhm yeah similarly we can do similar Stu here put it has to be instead take that out and we also to check if it's working as required let's nullify this okay so this is like we having yes okay so that makes valid sense so let's L out cre it let try to log in again so you can see we have our preloaders coming right up perfectly well so let's go to log out so log out should obviously take us to the landing page I think what do you guys think right so when the US logs out it should be taken to you know the actual landing page so let me see I think we can do that so um go to common and just go here can take this off and we should be good so refresh this try to log it in okay we have the praders commun and claim and the log out so it takes us back to the learning page that makes sense go to login login again and you already verified which is a good thing so let's see if we create a new user get started phix Johnson okay so let's do random email Johnson gmail.com so and me why if you we know we using super base um you can actually check your super base table collection to see the list of all these users we've created so far so we're going to wait for it to load so I'll just show you guys quickly before we move on so you click on there and go to your database come in here and click on the I think this database table editor Okay click on the user here okay so this these are all the users we have in the platform right here which is a good thing and then we can actually add new password let's use the same pass we be using so register so we rest start this user I save it log in it's going to log Us in and we can see that is able to view every person within the pathom this is phix Johnson this is the user this this is us right so let's try to verify me so this verify you can see that this yes basically just changed to yes right from not to years immedately and this was updated to four that just makes sense and one of the thing I would have loved would do here is if it's loading we can just make sure you can show the loading cursor instead right instead of just having some some some lame stuff so you go to page and we go to here I think so if it's loading do this right so what we're going to do is we can come here right button Shadow come here so yeah let's put the brackets right in there and what I want to do now is that if it's actually fory loading c not allowed I think I always L one to be sure yes copy it from here and paste it right in here so if it's loading make the cursor not allowed so you can click again right so if it's loading you don't want to you know be clicking again so um it is loading just return okay so that makes sense so let's refer this okay um what I wanted to do is not csor not allowed but is actually csor um yeah was actually crer loading I think or weight yes cursor weight this something that we basically want not the other way around is actually loading want to have cursor weight yeah good so let's log out and let's just log in in fresh user let's also generate this and register okay save again okay so basically I have all of this this is the guy here is z Wells so let's verify okay so it was very quick and I didn't actually see that yeah it was very quick I think right so yeah so let's make sure that oh the space in between think that could be why didn't work all right so B have to like test a new user let's get started formulate any random I'm using a station called fake filler can have it in Chrome if you're interested right so come in here and was the one I just created not sure oh not the one I just created the one I just created is this guy I don't have his email so it's difficult to even track it so I log out get started again so let me grab this person's email camaso so log in so this camaso right this guy can see that status is like no let's click on verify me okay change to years okay so that's pretty much decent and you guys can see that everything is updated in time so let's check it for a much more smaller device so it's very responsive and we click on log out we're able to see everything as expected and now we've come to the end of this Lon what you're going to do is that you want to make sure that your package of Json you have this MPX Prisma generate this will generate the Cent during the build process right so basically before you do this um way before you build so when you have your Prisma generated can be able to build you know successfully on verell right so you can come in here it's very simple it won't take more than a minute so go to your project right then you want to select the project you want to create so this is the project I'm interested in click on import right go to environment variables if you have any you want to paste them in there so I go to my EnV so this is database Ur I'm using from super base so pass it in there then the value copy that and pass the value in so once you done with it click on ADD so just secret and paste it in here and secret can just be anything right it doesn't really matter secret but make sure you using the very strong secret so you can just generate anyone online so it's very pretty much easy to do so when you're done imputing your G secret and then your environment variables you want to just click on deploy so this is going to deploy your project meanwhile this is actually deploying you can actually keep track of it right here can see the building can click on here to keep track of building process it's currently trying to inser dependencies and it's going to move on to the next stage subsequently so you want to basically OD done for it to you know take the time to process right so um yeah trying to install dependencies and then you can see it's trying to run our Prisma generate command and it was able to generate our Prisma client successfully and here you go right and then now it's going to run our build for us and it's going to take a couple of times and the build is going to be successful and we're going to proceed okay so the bu seems to be very successful now right so it's going to like try to do other stuffs and when it's done you're going to just see the success response and you be able to check out the actual route so it's done now and we've redirected to this page I think so what we're going to do is to just continue to dashboard I'm a little bit Network issue yeah but yeah when we get to dashboard we have the link for it so you click on there okay either click on here or you click on here so you can click on here and this going to open up the deploy link you can see that everything is coming out nice and clean right so you can click on the login and you can actually log I don't know if I already have this user yeah is a very star user so you can be able to log in successfully you can view everything so I'm going to log out now can see that this is the deploy link and this is the one that we adding to the actual route thank you

Channel: NewAwesomeTech

Views: 8,611

Keywords:

Id: sNwj99OXino

Length: 331min 48sec (19908 seconds)

Published: Wed Jan 03 2024