Next.js 13 Course | Build a Blog Website with Next-Auth, MongoDB and others...

welcome guys it is web dev money again and today we're going to build a next JS 13 website a Blog website so you see here the catalog here I can click let's say on this block here I can comment something here I can then click on delete because I have commented and yes here I can like and right now let me create one so here new block one two three here let's pick that category and let's pick this image exactly here and right now I clicked on create so it's a success and it will be a success as you see we are redirected to The Details page and right now we see here the image category I can like it you see when it was posted I can comment as much as I want here and when I comment a lot you see here it overflows successfully okay I can click to delete I will surely want to delete it right now I'm not going to but let's try the edit so here you see the title is new block one two three let me remove the numbers here just new block right now I click on edit and you see here it is persisted I can finish the page and everything is here I can even change the image so here let me pick the image of this burger I know it's not a mountain but just to see the functionality okay so you see it welcome again guys let's start developing so the first part for our application is to install the nexjs app so here let's go to your browser of choice and let's type here next dot JS installation so here you see this link here just click on it and you see here the line of code to install our next.js application so here let's go to our vs code and let's paste it here in pix create next up so here just click on it and here we will get some questions so the name of the app is isn't that important I'm just going to name it let's say block up would you like to start script no yes and yes no SRC directory yes user browser yes would you like to customize the default in Portillo snow and it will be installed soon okay we successfully have initialized our next.js application the next part is to install our dependencies so here while we are in the the terminal let's type here npm I and let's install the dependencies that we're going to need so let's start the first one is decrypt then cloudinary we are going to use it for image uploading a little bit later than Json web token for authentication Mongoose then next out for Authentication react icons for icons React tostify 2 for notifications and the last dependency that we're going to install this time ago which is used for formatting date so actually it's more than less than half of the dependency are let's say more you need to know them the other one like react icons if I didn't you don't need to read anything they are just used for one thing and while it's installing let's make our folder structure here so here we have the air air SRC folder and here the app folder so as you may know nexgs Nexus 13 came out with a 13.4 version entity of some new things rather than Nike js12 so here the routing is different the API fetching is different enter of this stuff so while I'm building the application I'm going to explain the things so here the app folder is our main folder in inside our source folder actually I'm going to make here a components folder for our components I'm going to have here a lip and I'm going to have a models folder so our Loop you have some helper functions and the models will be for our Mongoose so I have uh four components so let me make them so here I'm going to make four folders so here block cart then I'm going to make comment then I'm going to have here footer and lastly I'm going to have enough bar so here I'm just I'm just going to close the app so you don't get confused here inside the old of shoulders so here inside every single folder inside our components I'm going to create here a jsx file so here jsx file and to see here this area of CE is an extension is vs code so here es7 you are going to see it so es7 not this one actually this one yes with 8 million downloads Plus okay so just let me go here let me close the terminal and here I'm going to make a CSS module file a lot of people I see you still win but I prefer to use CSS modules because still want to know we will write a lot of CSS inside your HTML it just it doesn't look right at least in my eyes that's my opinion then here I'm going to make a jsx file and again on CSS file for the comment component so here oops import classes from dot slash then I'm going to scare the footer.jcxrfc footer.morro.css import classes from here to slash and lastly is the nav bar so here number j6 navbar Dot module.css and of course we import The Styling sheets so we have successfully done this part and while we are at it let's look at our app directory here so you see here the page the page.jso let's start our application so here let's run in payment and if of course I need to be here in CD block up and then npm on a div and it will start our application so we can see what is happening in two hours loading here I want to explain here this is the main the main page here the page.js and the laid out.js is the layout that we're going to have for our application so here of course I want every single page in our application to have here an off bar on the top and the footer of the on the bottom just like this end remember to put it inside the body if you put it let's say like this you are going to have error or something I'm going to even show you okay you see here some mirrors you see here the hydration Fields so right now move it like this and you're not going to have any errors you see here no error okay and here inside the page.js I want to remove all of these things here so just like this move it in here I'm going to have a diff in here I usually like to name that object instead of styles classes but that's not important and here I see we have a globals.css so inside our global.css you see this is found I want to write my default stylings before continuing so they are just a few so here box size border box zero margin and zero padding this is it and just for the anchor attack text decoration none to remove that underwind that is by default which I remove every single time and here cover inherit to get rid of the blue cover of links which are again default so this is for globals.css okay here we have written our components let me see how it's looking you see just enough bar and footer so my friends the next part is to actually make the nav bar so this is the first part of every single application that I write I think okay so here we have the number and actually I'm just going to first write the j6 and let's start so here I'm going to have class name is going to be here classes dot container then I'm going to have classes dot wrapper and here I'm going to give glasses dot left which is going to be not a diff actually but an H2 in here of course I need to change the closing tag and inside I'm going to give link and here link come on link and you see here from next layer from next link so when you write just react JS you need to install another dependencies rear dependency react router Dom to be able to use this link but here in next.js you just come out of the framework so this is very nice in my opinion and here instead of the two attribute which we use in react router Doms link here it is href just like in a regular anchor tank and here is just the slash to Navigators to the home page and here web div Mania my channel name then here I'm going to give a right side which is going to be UL so if you want to write G you can just write deflect this but if you want to explicitly write something else rather than if you need to write it before the dot so here uao so here under list dot classes dot right and this will make a UA with the class name off you guessed it right and inside here I'm going to have uh first is going to be displayed different depending on if the user is locked in or not so here we we don't have authentication yet we just started making our application I'm just going to name some variable let's say locked in is going to be set to true of course later we are going to do this programmatically with authentication and stuff but right now we are in the start of development process right now we're going to do it just like this here so if logged in is true we are going to display something else again we're going to display something so let's make this on several lines and let's start writing our condition so here if we are logged in we are going to show here a diff just like this in here an image and here we don't write image like this like the default HTML image stack we do it like this image like this and we again import it from next but this time slash image so this is another thing that is different from react and vanilla Js in here I'm going to have a SRC of person in here with 445 and height of 45 and when you write the string number the string number here inside this means that it's pixels you don't write explicit pixels just leave it just the number and here I'm going to have on click I'm going to have some function which is handle show drop down this is just for toggling the drop down in here it's going to be a state here so just to not get you confused the state is going to be called show drop down set show drop down in here oops use state is going to be equal by default to false and to see right now the server components by default inside nextges server components so just let me declare the function to get rid of that specific error and I'm going to show you another error that I want to show you right now so here it says show drop down is going to be set to true but the thing that I wanted to point out is here okay I'm just going to write something to get rid of an error you see I have no error okay so the thing that I wanted to show here when I go you see you are importing a component that needs you state it only works in a cloud component but none of its parents are marked with use command so there are server components by default so I told you a little bit earlier that by default their server components and in order to use if you want to use state or you want to attach some on click event or some or something like this you need to write use client explicitly above everything so here if I write use client just like this in a string right now the error is no more and here the other person is not defined this is because I have nothing inside my public folder no images or anything so right now I'm going to go to my GitHub to install my images so let's go so here GitHub mobile repositories let me go here SRC then I'm going to go to the public and here I'm just going to get this URL and I'm going to go to this website which I use for downloading images so just paste the link here and they're going to be downloaded so right now come on okay and here I'm going to name it so I'm just going to leave that default name and I have moved the team just to my folder and you see here inside our public folder I have all of the images that I want my application to have so here let me import the person image specifically so here import person from dodo slash dot slash dot slash public slash in here person.jpg so here when we go to our application just let me close this thing here you see we have just the image here so we have no error or something and here while we are at it I want to make a function just handle height drop down and it's going to be said show drop down to fourths of course I can just use in an unclinked the the state directly the setter function but I prefer this way because it's a little bit cleaner and here let's make the condition is going to be show drop down in here to Ampersand so if that is true we are going to show here classes dot drop down and inside I'm going to have ai outline close which is just for closing the drop down if you don't want to see it anymore so let me import that icon here from icon slash AI and here I'm going to give it a class name of classes Dot close icon in here on click is going to be of course handle height drop down then below that icon here I'm going to have a button with a class name of logout and you guessed the text logout and I'm going to have here a link come on link here Capital first letter N is going to be for create and it's going to navigate us to the hrefs of create hyphen host and here is going to be class name is going to be classes dot create and of course I'm going to attach to both of these elements I'm going to attach the handle height come on handle height drop down and let me see the drop down right now of course we cannot see it but if I click on the image you see it of course we are going to make it a lot more beautiful we're going to style it and stuff but for now this is it and here I want to make the EOS here so here we are ready with this part after the question mark But after the column here let me see what we have so this will be shown for users that are not logged in so for guests in here button is going to be for log in and it's going to have again class name of login and then I'm going to give here link which is going to navigate us so here text of register and it's going to navigate us to register and we have here an error because we must give a parent element a wrapping those child element and right now the error is no more okay we're ready with the j6 or the nav bar but of course we need to go to our CSS to make it look nice so here and let's start typing our CSS so just if you make some space here let's go so here dot container is going to be position of sticky then the index of 999 then height is of 6 pixel width of 100 background cover is going to be white then box Shadow is going to be here 2 pixel 5 pixel 27 pixel minus 8 pixel and here RGB a 0 0 0 0.1 then we're going to hit the display of flex justify content of Center Online items of Center top of 0 and left of zero then our wrapper is going to have here a width of 85 percent margin of zero to center it display of flex justify contents space between online terms of Center and position of relative so let me see right now how it's looking okay it's looking a little bit better right now but still we have a lot more styles to write uh okay after the wrapper here we have the dot lift which is a font size of 36 pixel and cover of RGB 286 108 26. then dot write is going to have this prooflex online items of Center instead of writing a line item Center like this you can just write the shortcut a i c and you see I just click it in alignment of Center I don't try super fast I just use this short of uh how to write it shorter in here DF for display of flex then justify content of space between is J J CSP and so on and so on so let me get back to the my styling so here this will Flex all items of Center and gap of 1.25 then dot write then the div and then the Imaging side is going to give an object fit of cover border radius of 50 percent to make it a circle and cursor of pointer to indicate that it's applicable then I'm going to start the dot logout which is going to have margin left of one item Panic of 0.4 on top and bottom and one on left and right border none core of FFF then border radius of 8 pixel front weight of both font size of 17 pixel and background color is going to be 1 0 c 1 4 2. then the dot create is going to give a cover of 444 font size of 18 pixel front weight of 300 and this is for the crate then we have the login so let's go Dot Login is going to be outline of none border none padding of 0.5 on top and bottom and 1.25 on left and tonight font size oops font size of 17 pixel and here this is the shortcut this is the word I forgot earlier so this is the shorter way so the shortcut to write CSS so you see oops f f z 17 and you see how it is then we have a background color of again 10 c 1 4 2. white color then core white I mean and Border radius is going to be 12 pixel then dot drop down is going to be positioned absolute background color is going to be here e f e f e f Flex direction is going to be common on an items of Center gap of 1.25 RM top of 2.5 irm a write of minus 3 RM in Border radius is going to be 8 pixel so let me see right now how everything is looking into see here we can already see the top round when I click on it I just want to make this position absolute so we're going to do it just soon don't worry okay after the drop down here I want to Target the second child so here drop down and child two and oops this is going to be here margin top of one RM then I want to Target here dot drop down in here cursor pointer so everything is going to be clickable and then the close icon finally close icon here position absolute then it's going to have top of 0.3 RM and try to 0.3 mm so when I click here you see how it is so it is looking very nice and let me change here that variable to false so we see the other side so here you see login and register and here I'm going to just apply to it cursor pointer because it's a clickable of course so you see okay and I'm going to leave it just like this okay we are ready with enough bar and the next part is to here I want to show you the block I have some data here not from the server or something just some Demi data so here inside the loop I want to make several files but right now I'm just going to make one so here data.js in here I'm going to go to my GitHub so to my GitHub and I'm going to copy that dummy data inside my lip so you don't need to write it again by hand so here SRC up or not up it's just here inside the loop my butt and here let me just copy it okay in here I'm just pasting it nice then let me go here uh not let me cross-scale the components and let me go here to my app and then let me go here to page.js here so right now I'm just going to space some blocks as a demi data and after this we're going to write here the API then authentication and then we're going to programmatically publish some blocks so right now even we are going to display some dummy data so here class name is going to be classes dot container then I'm going to have classes dot an upper and here it is and here I cannot use uh the I'm not sure the shortcut inside the j6 because here it's not a j6 file so let me change it and right now you see I'm able to use it and here blocks so here blocks dot map in here block and on instant return and here we're going to import the block card from our component we're going to have here do I have an ID here I'm just going to use let's say the title was on key so of course you don't you do that but right now it's a limitator we don't care and here we pass the block so here we get it back so here oops block and then we're going to structure the block so right now let me see what we are going to structure okay so here the title description image uh author wait just this what we have here actually so here title description image and total ID we're just going to need those three things here so here image okay and then for our block card here I'm going to give glass name is going to be classes dot container then I'm going to share classes the trapper and the inside native here I'm going to keep here a link which is going to show which is going to be have a class name of classes dot image container and the hrf is going to be here right now like this so here href block to ID but right now as you know we're using Demi data as I told you earlier we don't have the ID from our database or something so right now I'm just going to leave the href to our home page later we're going to change it and here we are going to show the image URL oops so let me just import it and here source is going to be just image and then width is going to be 350 and height is going to be 350 just like this here then below that link I'm going to have classes dot block data and here classes dot left is going to have here an H3 which is just the block.title and Below we're going to have just the description so actually why I'm writing block dot we can just do it like this and uh let me see how it's looking I think this is for now here I have another thing actually so here below the dot left of course we have a daughter right and here is going to be just here some numbers so here let's put 12 and here space and here is going to be is Select and here we're going to show different things and write down this variable I'm just going to write it like this so here it's right it's set to true but later of course we are going to check it from the from the data from our database and so on and so on but just for now to write our UI AI view like and let me import it so here import yeah if you like from react icons AI and here AI outline close to outline the like not close but just like like this and let me import this thing as well and let me put here size of 20 of both of them so oops not two but 20 and let me see right now how it's looking okay it's looking like this because we have not started first let me go here not to the blockart.css but to our page dot module.css let me delete everything here which is you that thing that you see and here let me start so here dot container is height of 100 VH minus 6 pixel and in order to see what I'm selling I'm just going to split the screen like this then after the height I am just applying the width of 100 then dot an upper is going to the height of 100 width of 85 percent margin of zero Auto then margin top of 2.5 irm display of flex flexor offer up seven seven point five item and this is actually so right now you see how we're test out and spaced out and here actually are inside the page.j6 icon right here on H2 so here an H2 between the container and the wrapper which is going to be web div Mania oops just like this weblift manius blog website in here the H2 so let me go here dot container in the H2 inside it's going to have text align of Center core of 333 and margin top of 1.5 irm so right now you see how it is and I can even make it a little bigger so font size of 32 pixel right now let me see okay it looks better okay and let me start the block card so right now let me go here so you see what I am styling so like this and let's start siling so here dot container is going to have a width of 30 uh 23 percent then height of 540 pixel box Shadow is going to be 2 pixel 5 pixel 27 pixel and minus 8 pixel rgba zero zero zero 0.15 and click make like this internalization of 1350 milliseconds and Border radius of 12 pixels then dot container is on Hover effect of course so here dot cover and I'm just going to copy this box Shadow and change here the opacity so it's going to be 0.4 here the opacity so when when I hover you see how it is getting darker behind with from the shadow nice then this for the cover then no Trapper is going to have Panic of 1.25 irm so right now you see again another shortcut then width of 100 another shortcut height of 100 it's blue flex and flex Direction here of car one so right now you see how it's looking but we still have to style it a little bit more then dot a wrapper and the image container inside so here dot image container and the image is going to have here object fit of cover then border radius of 20 pixel with a 500 percent and margin of zero autumn then dot block data is going to have margin left of 0.75 RM display of flex justify content of space between and align items of Center then dot block data dot lift and here the H3 inside which is this thing here is going to have the following Styles so font size of 28 pixel front weight of both margin top of 1.55 mm and margin bottom of 1.25 RM then oops 10 dot block data dot left and the P inside which is the description you see here is going to have just a core of 666 so it's a little bit grayish color then dot block data inside the dot left inside the spawn but this is the thing that they have not yet built on let me just see for a second this is the created by okay I'm just going to write it right now so here created by in here under spawn and let me write 1st of January this of course is going to be we're going to get the data from the server programmatically and all this stuff but right now I'm just going to write some Demi data just for the to make it to make it look good with the CSS and here read write margin top of two irm display of flex online items of Center gap of 0.5 irm and font size of 15 pixel then dot blog data dot left the span enter again is going to have a cover of 777 and lastly dot right so here block data dot right is going to have font size of 24 pixel cursor of pointer display of flicks and in terms of Center and gap of 0.5 mm so right now you see how they're looking they look quite beautiful to me so you when I cover of course you see how are they looking very nice in here for the UI the next part is just to make the footer guys just let's try the footer and then we're going to start writing the API logic so the footer is very simple uh let me go it is just let me close here please be open the footer here and let's start so here I'm going to care for semantic footer so here you see the footer attack and here class name is going to be classes dot footer then I'm going to have classes dot wrapper and inside I'm going to have three columns so here glasses dot Co and here Asterix 3. so right now we're going to have three divs with the class name of cone so right now you see how it is here H2 is going to be about the app and below here I'm going to have a paragraph with just some dummy text so here just let me write warm just it split it on several nice because to see how long it is come on okay nice then for the next column here I'm going to have contacts then I'm looking for a span phone one two three four five six seven eight nine of course this is not my this is not my real phone number then span another spawn with the YouTube of web dev Mario so here my YouTube channel and then GitHub again GitHub web dev Mania nice and here the last column is location so application and here I have spawn continent of Europe below it I'm going to have country of Bulgaria which is my home country and Below I'm going to give again current location into probably guessed right again Bulgaria okay let me start writing the thesis for our footer it's going to be very we're going to write it very fast so don't worry dot footer is going to give a width of 100 height of 400 pixel and margin top of 5 irm then dot Trapper is with width of 85 percent height of 100 margin of zero Auto so zero Auto to center it display of flex just five quarters space between Interline in terms of Center then.com is going to be display of flex Flex direction of common n gap of 0.5 irm then dot Co and here the H2 inside is going to be with the following Styles so margin bottom of 15 pixel justify itself or Flex start and margin left of you heard me right minus five pixel I just want to space the little bit and then the paragraph inside the column is Max with Max width of 425 pixel core of 555 font size of 15 pixels so right now you see how the footer looks like and I'm not sure why it is spaced out like this probably I forgot to write here inside the page dot model here right so dot container let me see just a little bit just going to fix it just now and here it's not just height but it's minimum height just like this here and when you go back to our application you see how it is spaced out as we intended to be so we are already here with the UI part of the home page but I want right now to go into our API into it and to write it because we're going to need it of course so let me close everything here that we have and right now you see here we are into the app folder and right now you probably wonder okay with that money how we are going to write our API in Nick js13 so inside our app directory here we are going to make an API folder so usually you can write your API routes everywhere but don't do it write it inside the API because you want to have a clear separation of code technically it's possible practically don't do it so here just make an API folder inside your app so app and here API and then here let's say that you want to have let's say here block so here block folder and let's say you want to go to the index so here just route.js and it must be named throughout.js so here is going to be localhost your port in our case it's 3000 slash API slash block and here it must be named route so here files inside must be named out.js and let's say then that we want to access some let's see I'm just going to copy the link and then here some ID so if you want to do it like this then here we make a new folder with with square brackets and then we make again here how to do JS here so you see how it is nested here so here API block the ID and then the router.js here inside the ID here so this is how we're going to access it okay enough talking here let me make the other folders inside our API so here I'm going to hit alt I'm going to have a comment and I'm going to have here register so which with with which one should I start first I think it should be wise to start with the register here so inside our register as I told you it must be here in the interaction route dot Js and here it's going to be accessed I'm going to show you if you don't if you still don't get the concept so it is file based routing so here API so here because we are inside the API folder and you go to the register so here register and this is the URL to access our register okay so here of course in order to be able to write our code we need to connect to our database so this is the and the part that we must do here so here mongodbit.com and here let me click on sign in into probably normal DB if you can watch my videos and if not a lot you probably know it is very famous inside the web dev uh sphere okay so let me write here my password and let me log in here okay it's loading loading come on okay so here let me click on the the settings icon so here settings icon then projects you see here then new project and here just let me name my application so block up next 13 next create project again loading then uh build a database here click this the the free one at least I have no intentions to pay for this project uh create and hear the username and password for your database I'm just going to name the username one two three just for team purposes to not forget them here create user and here I'm going to make here like this is the API address to be able to be accessed from everywhere go to databases and here connect drivers and here let me copy this here okay and here I want to make an EnV file inside my blog app so here like this dot TMV and we make the Envy file because this data is a secretive information you don't want to share your URL to anyone you you need to keep it for yourself only for only for yourself so that's why we use environmental variables in here username one two three for the password and here we are radio actually with the with the and Mongoose with the with making the database but we need to make here DB dot connect oops uh just DB dot JS not connect and here let me just copy this code here inside you see here db.js because this code here is just a specific way of connecting to the database using nexjs you know in node.js is different but here I just don't want to write the entire code and you don't need to know how it works you just need to know that it works here okay so you see here we have a connect and disconnect so we are ready with this part I just don't just want to lose your time of course you can view it for yourself you are interested here inside the GitHub okay and uh of course let me start making here the release the let me start here writing the code inside our outdoor JS so here import GB like this then import decrypt from decrypt and then import user from models like this or models user and they see that we haven't done this thing here I forgot somehow to write the models so at least they're going to be very fast to write so here let me go to the you to the model so here modules user .js blog.js and then comment.js and this is actually the last part before we start writing our API I just somehow forgot to write the models I don't know how okay let's write here first the user so import Mongoose from Mongoose then cons users schema is equal to new Mongoose dots Hima and here we have three Fields username which is going to be a type of a string is going to be required of course and let me set it to Unique as well then we're going to give an email which I'm going to write it by hand it's going to have the same properties here so again type of string required true and you need to true and you probably don't need and you probably get the point why it's required and unique every single application that I have been to have this almost almost every single application I have this feature you cannot have two accounts with the same email it doesn't make sense okay and then the last part is password so here it's type string and of course required to true but I'm going to see the tube too you need and here I'm going to apply the timestamps to true so this will have so this will give us two additional Fields when it was last updated and when it was created the timestamp set through okay and then here export default mongoose dot modules dot user in here Mongoose dot model user user schemat I know the syntax as I told you earlier it's a little bit different than the syntax in node.js this is another difference that I have noticed myself as well okay this for the user then the next one is to write the block so here blog.js import Mongoose from Mongoose then const block schema is equal to New Moon goes dots Hema and here title is going to be type of string required set to true and minimum is going to be set to 4 characters so the title cannot be shorter than four characters then dot description I mean not DOT description but just description is a type of a string required true and minimum of six it's of course the description is usually longer than the title then image URL is going to be type of a string and required is going to be set to true then I'm going to have category which is again a type of a string required command string required true and here enum so before typing the enum and if you don't know I want to explain to you my friend so you know means that the category can only be certain strings so here I'm going to write an array of five elements so here I have nature and here I'm just going to copy paste it and then write it here so Mountain to get Mountain ocean well Wild Life and then Forest so the category must be one of those five strings it cannot be something else it cannot be the something whatever it must be only those see uh five things that they have written here this is what innum means and then uh let me write here comma and let me write here the author ID which means the person who created that block and it's going to be a type of rules dots Hima dot types dot object IG and here the Riff is going to be to user then I'm going to have here likes which is going to be the same here so type is going to be Mongoose oops dots Hima dot types dot object ID like this in here again if it to user in here time stamps is set to true and let me export it so export default Mongoose question mark dot modules question mark dot block and if you don't have it we are going to create it so here block and here block schema okay we are ready with the block schema the last uh schema that we have to write the last module is the comment so let me go here just to the comment.js and let's go so here import Mongoose from Mongoose then cons comment is equal to New Moon goes dots Hima and here it is block ID so here the ID of the block of course every single comment is connected to its block I know guys it's quite LinkedIn and here the ref is this time to block node to the user and of course required is set to true then here author ID is going to be just the same I'm just going to copy it this time and here the ref is just to the user it's not to the Block it's to the user this is the only difference and the last part is the text of the comment itself so here text oops common text a type of string and the required is said to Trump and here I'm going to write the object which is with the timestamps key value pair times time set to true and again export default Mongols question mark dot models question mark dot comment and here again if we have no if we don't haven't created it we are going to create some Mongoose dot model is going to be comment and then comment Sima okay guys so we are ready with the models let's go again to the register finally we can start typing the code here okay so uh wait just a second and let's go so here you remember before next 13 how we have written the API so it was X export async default come on default function Handler request response and here just let me move the async like this and here it will switch request dot method in here you write for case post and you remember you remember remember but forget everything it's a little bit different this time here so and another thing I just wanted to show that it's different before you remember we just did the third response status of 200 or whatever it is and here Json and something but right now we don't get the response like this we return it with the new response like this and here you write json.stringify something and let's say you want status you have an object here status and here let's see 200 so this is a little bit different I know okay and let me show you a concrete example of everything that they talk right now so here it is export async function and if you want it to be let's say a get request here it must be capital letters yet the same applies for post put and delete but item we're creating a register so it's a post request as you may know and here we take the request as I told you just like this here and here a track age so here a try catch and here let me just write the code for the cash block first return new response error Dot message and here status of 500 and here for the time I first want to connect to our database so here gb.connect then const username email password and here the password I want to rename it to pass this is what the syntax means and here a wait request.json this is something different here I I don't remember using it prior to next 13. I may use it I'm not exactly sure but this is you know this is not node.js for sure okay then after this cost is existing is going to be equal to 08 user dot find one in here email in here if if that is true this means that we need to return or just throw new error so here throw new error and it's going to be here user already exists then cost harsh password is equal to 08bcrypt dot hash and here the first value as you know is the password it's also just pass and then here I pass the sold to 10. okay in here const new user is equal to awaituser.create here and we have the username email and password is set to harsh password okay and then we return the user like this so here we get the password away from the object and we return everything here so here just user like this and it's from user dot underscore doc so dot underscore Doc is literally getting the values of the user if we don't have the dot underscore dock you can just console lock it yourself to see it have a lot of things that are from Mongoose themselves and I just want to have the values that's why you need to right click this and it is new user actually so new user dot underscore doc this comment here and let me continue so we just return new response Json Dot stringify and here user alien status of 2 1 which means successfully created so I can go to my Postman and then let me try the register so it's come on Postman so here it is API register a post request here as I told you let me delete all this you can just use this so here just test user one two three in the same for the email and let me click on send so right now sending requests nothing happens let me see what is the problem so here let me see and here we encounter one mirror that uh is very easy to fix so here error the top level await experiment is not enabled so in order to fix this error I have encountered that error previously so here let me go just just go to next dot config.js or here this file here and just let me copy everything here so let me copy it and let it paste it again inside the next dot config so just like this oops let me go back to the Latin alphabet and let me try it right now so right now it should work why is the white is not working here next dot config ah uh yes here I had a typo entry to stop the server right now it's going to work so let's make it consent if we click again come on why it's not working ah user already exist now it's just let me make a new user for you to show that it or that it works yes so you see here the username the email the user ID and we don't get the password back and we have that created add and updated that which I told you we are going to give because of the times terms set to throw this object here so we know the register is working as you probably saw it okay and I suggest you that we go then to the block here to the block folder and here I'm going to leave the out for last because here we're going to use one library and here for the block let me just start with the normal URL so the not the dynamic one but the normal one okay and here import GB from libdb then import verify token from outside JWT and we are going to get the function we are going to create just in a second and here import block from Models Block in here we're going to have a get Interpol so here export async function get with the request inside and then let me just copy it because we are going to have as I told you a post so here this is going to be for getting all the post the block I mean so here just let me again write the code for the cage block so here return new response not with without a DOT so here parenthesis Json Dot stringify no in here again an object with the status key and here 500. okay and here for that right it's super simple literally two lines of code blocks are equal to a weight block dot find and here I'm going to just set a limit of 16 if we have a lot of blocks and then dot populate is going to populate the author ID instead of an ID it's going to show the actual user and then return new response json.stringify blocks in here status of 200 very easy and for the post this is for creating it let me show you how we're going to do it so here oh wait tp.connect and before continuing continue Inc I want to go to my again to my GitHub and here to the JWT I'm going to copy those functions but I'm going to explain to you how they are going to work so here inside the leap jwt.js and here let me paste it so here this is the function for I'm going to even write in the comments here for creating JWT or signing it's more of an accurate term and here the refine verify verify come on verifying token Jayla what's talking okay so here we get the secret from our environmental variable which we are going to create just now and here this is the payload and then we return the payload so here let me go to my EMV and here let's say GWT underscore Secret in here I'm going to add some easy secret of course in a Rio application in production you want a super complex secret that is almost impossible or impossible practically to guess and here uh you see I mean they are not hard functions here we will get the secret we sign it we return it here we hit the secret we verified and we returned the payload which we have put here so you see it's not something hard with a science about talking and verify JWT token okay and here uh const access token is going to be equal to request.headers dot kit authorization and as you remember I'm going to show in node.js it was request.headers dot authorization but here you see how it's a little bit different then uh cons token is going to be equal to access token dot split we're going to split it by a space and we get the first why we do it because it's a better space and the token itself here so we we split it by a space and to get an array of two elements and when we go for the first Index this means the second element so we get the token itself without the better and without the space so this is what it does and then we do the const we do the functions so here decoded come on decoder token is equal to verify JWT and here we have the token so right now if the access token is a false value this means that it doesn't exist it's an empty or something and then if the decoded token is false value as well we return new response in here Json dot stringify command json.stingify an object with the error here and unauthorized wrong or expired token and then we return we have here the status which is going to be 403. nice and here if we have passed this condition this means that our token is perfectly valid we have a try catch here and then return new response json.stringify no and here status of 500. and here inside the try we get the body which is just a weight request.json then const new block is equal to await block dot create just the body and then we return new response of json.stringify new block and here status of 201 this is for our broker out you see and here for the ID of course we are going to have the for the ID here just let me close it here in here inside the ID let me create it so here again I'm going to import the GB then I'm going to import again the verify JWT token import block from Models block and here import user like this in here we're going to have a get put and delete so here export async function get in here with the request I'm just going to paste it two more times so here it is but and here it is delete as I told you so here for the get again ohdb dot connect in here oops come on a try cage in here it is return new response json.stringify no then status of 500 and here for the try Block it's going to be const block is equal to await dot block dot find by ID here we use the ID and right now we probably wonder how do we get the ID it's going to be like this so here it's an object so we're going to structure it and it's having params and then inside it is going to have an ID but if you find this syntax too confusing we can just do it like this or here is equal to ctx.params dot ID and here I'm just going to name this CTX it's basically the same guys I'm just going to make it like this so you don't get confused if you don't know the syntax and then dot populate is going to be here author ID in here dot select with minus password and then return new response is going to be json.stringify condition.stringify block and here status of 200. and this is for the get then for the put request is going to be for when we want to update it so it's going to be interesting so uh away DB dot connect then const access token we do the same thing we get the token into verified request.headers dot get authorization and here comes token is equal to access token dot split again we split it to make an array and to get the first element the first index which is the second element and here comes the code that token is equal to verify jettable token and here we have the token and here we make a condition if this if access token is a false value or the decoded token is a false value here we return new response of I'm just going to copy this specific response because I don't want to write it again so here this thing here with a status of 403 okay and then let's make the track edge here so here try catch just the code for the cash block is the same as the the get request here so you can just copy it freely and here const body is equal to O to a weight request.json and here const block is equal to a weight block dot find by ID so here the ID and Dot populate is going to be here author ID and of course the ID we're going to get it the same as the the same so here ctx.parents.ij and here we get the CTX and then if block dot author IG dot underscore ID to Strings because it can be on object ID and it's not as thinking it's going to just write two string them this method and if it's not you go to the encoded token dot IG again to string then this means that it's not the author that is wanting to update the block so we are going to return new response of Json Dot stringify and here message is going to be only author can update his block and here we have the status again 403 oops 403. otherwise this means the person that wants to update the block is actually the author of this block so here we do const updated block is equal to a weight block dot find by IG and update in here the first parameter as you know is the ID then set in the the just the buttons on the request.body and here new is set to true because if you don't have this neutral we are still going to update it but it's going to return the version before it was updated that's why I write it every single time with the new set to true and then return new response json.stringify here updated Block in here the status of 200 okay we are ready with the update then we have the delete so here again a weight gb.connect then I have const access token is equal to request.headers dot get here authorization so here optimization then cons token is is equal to access token dot split again we split it by the space like the previous times we get the second element or the first index then cons the code token is equal to token the token and here again we make the condition here I can just copy paste it here you know to avoid writing it again then if you have passed this condition this means that we are actually the owner of the poster here try catch again I'm going to copy the code for the cache block and here for the try it's going to be a little bit different so cons block is equal to a weight block dot find find by ID in here don't populate author dot ID in here we still check the we still make the same condition so again I'm going to copy paste it and here the message different can delete his block so if we just check if the user is actually the author of the block and if it is not of course we return new response this thing here otherwise it is we do the same the following code block dot find by by ID and delete we write the ID just like this and of course the ID just let me get the ID so here CTX and then const ID is equal to 6.0 and then we return new response come on new response json.stringify here message success fully deleted Block in here status of 200 okay we are ready with this part and for the block we have one last thing to do which is when we like the block so here inside right you are going to Nest it a little bit more we have to like folder so inside block inside ID inside like so here I'm just going to even write it at the bottom here of the file block IG like and then an outdoor.js this is how we're going to do it so I don't get confused and the URL is going to be as you probably get so here HTTP localhost 300 3000 slash API slash block slash sum ID slash like this is the URL I know it's kind it it is kind of confusing if you if you're new to Nexus 13 but yeah just I'm going to leave it actually just make the comment here and here let me go to the this route.js here so inside the like so here now.js and here let me start typing here the code okay so here import DB again then import verify token GW token and then import the block model and let's continue here we are going to have only one function which is a put request so here is export async function but we get the request response of let's say json.35 again no and here status 200. and before the try block here I want to connect to our database then const access token is equal to request.headers dot out to easy dot get actually authorization cons token is equal to access token dot split again we split by the spacing to get the second element or the first index is the same const decoded and again we made we write the same condition I can just copy paste it because I don't want to write it for the fifth time probably not this condition but actually yes this condition my bad like this nice and then I want to get the ID of course before continuing because we are going to need it so here const IG is equal to ctx.parents.id here it's CTX actually let's go so here inside the try block here const block is equal to wait block dot find by ID here and to pass the ID then if if block dot likes dot includes decoded token dot underscore ID here we make the if and then the also for the if oops I want to do it like this so here blog dot likes if you go to blog dot likes dot filter here we get the the ID like this and then on the Arrow function so if I did two string it's not equal to the recorded token dot ID to string so this means that if our ID inside is inside the likes array we are going to remove it otherwise we're going to add it if it's not there so we basically toggle the like and here decoded token.ig and the last part here is to write the block save and then to return the response here return new response Json dot come on Json dot stringify here the message successfully interacted with the block I can write here I can write here like in dislike but I just I don't know I just want to leave it like this and here's how to solve 200. okay so we are ready with uh this like functionality then let me head into the comments so here inside the comment just let me delete those files and here inside the comment I'm going to have here around.js here so inside our router.js let's start so here import DB from libdb and here import verify data board token and here import comment model from Models comment here and let's start so here export async function Post in here request inside and here await DB dot connect again const access token is called I'm just going to copy paste it again this time because I don't want to write four if I don't remember which time already so here I can just copy and paste like this okay and then after this we're going to have a track Edge in here Inside the Cage return new response of json.stringify no and again status of 500 inside the time block Here Comes body is equal to await request.json here let new comment is going to be equal to await comment dot create in here body and then new comment is equal to await new comment dot populate Authority because I want to populate it and then return new response is going to be json.stringify new comment and here status is 201 because you know successfully created is 201 and that's it for creating a comment is particularly easy if you ask me then the next part is to make a here a nested route with a dynamic ID which is for getting which don't forget actually so in delete of course uh here you see again inside the comment we have the IG and again here we make our route.js here again import DB from libdb then import verify Jada watch token and again import comment from comment we have the same Imports as the other route and here export async function get with a request here and then let me copy it paste here we have it for the delete so for the git just let me get here the CTX come on CTX and here awaitdb dot connect const ID is equal to ctx.params.id and here follow crackage just let me here copy the code from the cache block you know return response of Json thing if I know and status of 500 okay and here const comments is equal to and this is here block IG this ID specifically and here await comment dot find in here block ID with the ID like this and then dot populate author ID in here return new response of json.stringify comments and then status of 200 just like this and here we have the last function for our comments here which is the delete one so here again I'm just going to copy and to go to my file here and copy this logically because I seriously don't want to write it for every single function you see just to verify the token itself nice and here of course I want to get the CTX for the ID here and let's continue here so here try catch just say copy the code from the cache block like this and here for the try inside let me write it so here const comment is go to wait comment dot find my ID here idea and then of course populate outer dot ID then if comment dot author ID Dot underscore ID dot to string it's not equal to the recorded token dot ID Dot tostring and this means that it's not the author of that token so uh not talking about comment so he cannot delete it so here return new response is going to be json.stringify here object with a message inside only author can delete his block and here status of 401 and I'll wait comment dot find by ID and delete so it is here it will pass the ID and here return new response of json.3 if I hear message successfully deleted comment in here status of 200 okay so we are ready with every single API route except one which is the old which is arguably in the most important because we cannot use the all the routes without the alt here so for those it's going to be a little bit different because we are going to use the next old library so here let's make a new folder inside the alt which is with the following syntax write it like I do so here dot dot dot next out so here next out dot dot next out inside square brackets like this any side of course you make the route so here inside this route dot JS here and this basically okay I'm going to write it by hand here so basically for you it's going to be quite long so here import next thought from next thought like this and here it's not for me it's just like this then import credentials create then choose provider from next alt slash provider slash credentials credentials import user from modules user import sign JWT token from live JWT and here import bcrypt decrypt from come on from be Crypt in here we're going to have cons hinder which is going to be next dot here and here we are going to you have an object inside so here providers we're going to write like this so he's it's only in here credential credentials provider I'm going to try to explain this part here as I could so here we're going to write Creations provider in here again parenthesis an object inside and here it's a type of credentials and later I'm going to to tell you why it's like this the type of connection specifically in here we have created shows which is our inputs so here it's username which is a label of username it is a type of a type of type of a text and then it's placeholder is not that important the placeholder but we're going to write let's say John Smith or John Doe okay and then we have a password which is the password and label is going to be labeled password come on password it's a type of a password just like this here okay then we have the async authorized function which is taking the credentials in the request so this is the functions the function that we are going to call when you want to sign this to login that's why I have a different API route for register this is for specifically for login so here we get the email and the password and it's here label email not username is equal to credential so here we just the structured the object and we get the email and the password and here comes user is equal to weight user dot find one and here we search it by the email so if there is not a Chooser this means that he had not logged in he had not registered previously so we just throw new error invalid input then cons compare pass is equal to await bcrypt dot compare password the first value which is the normal password so we have two parameters that we need to to pass here so two parameters the first one so here first one is normal password so let's say one two three one two three and then the second is Harsh password which is from the database which is that word password that you have probably seen the hard version it's very weird looking and then uh as I told the second is user.password which is the hashed version of the password and here if compare password is a false value we're going to draw a new error invalid input otherwise here what I'm going to have a Nails condition it's going to be again we are going to password dot current user is equal to user dot underscore Doc and then const access token is equal to sign JWT token current user expires in six days and then we turn here we must return an object so here we're going to take this so here current user and the access token like this here okay so this is let's say this here authorizes the login function this here specifies what field and this is when we're going to call it so here I'm going to show when we make the login this for this thing specifically okay so here this is the providers then here I have Pages which is the sign in so when we want to login we're going to call one specific function from our library uh yes from our library and it's going to navigate us to the login page this is it just for the pages and here we have call box so here for the call box async jwg here token user and here if we have a user token dot access token is equal to user dot access token and I probably didn't make I didn't explain the next thought that grade so I suggest to you that if you don't understand it if you have not read the documentation go read the documentation of the documentation is going to explain the next out the best at least in my opinion I have read a documentation it is very clear okay let me continue so here token dot ID is equal to user.id so here we do it and then we return the token and here I'm going to give another function which is async session which is going to be called when we hear when we call the U session cook so here what we're going to have inside the eustachian hook so here if the token is True Value station.user dot underscore IDs code token dot underscore ID and session dot user.access token is equal to user.access token and here it's talking not using my butt and of course here we return the session and here export export Handler as get Handler as post so I suggest to my friends that you read the documentation if you want to understand this everything here inside this file as best as you can possibly okay so we are ready with the with the login with the register and top of this API stuff so let's create the login page so here I'm going to show you how you can create a page so just take a close here that route.js in here inside the app folder make a new folder and it's going to be called to login right now and you see here just let me close the API folder and inside you need you must write it with the page.j6 so this is how you write pages in uh next.js13 you must write here a folder and inside the page.jsx it must be like this I repeat for the third time so here we have lfce and here I want to rename it to login and here let me start with the jsx4 so here it's class name is going to be La says dot container whoops I have not created the CSS so here login dot mojo.css let me import it again so import classes from here dot slash oops not the so here like this in here dot container then I'm going to have glasses dot wrapper and then I'm going to have an H2 with login text inside below the H2 I'm going to give a form and here just a normal jsx form and it's going to give here input with a type of an email uh place call come on placeholder is going to be email dot dot change is going to be here set email to e.target.valo and then I'm just going to copy this input here it's password set password this is the only difference so here we are ready with the inputs then we have button dot classes dot here is submit button the class name in here it's log in and then below that button here I'm going to give a link here so again from next link and it's going to have a class name of classes Dot Login now in the hrf is going to be here come on href is going to be to the our register page so here we can toggle between the register and the login and here don't have an account question mark and here which we make it on a new line register now with a DOT here and below this diff here I want to have here a toast container so this for from our library to have notifications so here from toast container and just let me right here we need to import the CSS from this Library this is just the library for notifications don't worry uh react toast come on react okay and let me start typing here the state and the function so here is going to be email said email is equal to use State and empty string initially then cons password set password is again an empty string initially so here like this and then const router is going to use a router and here it must be not from next router but from next navigation change it here next navigation okay and here we need to have on some on submit here so here on submit handle submit and let me declare this function here it's a typical login page it has nothing special so here handle submit is equal to async we take the event so here event dot prevent default to prevent the default behavior of form submitting which is refreshing the page uh okay so let me go here the top level wait what I think we can fix that thing uh earlier so just let me Define ah here okay here we have nothing so it was just a note uh bug let me click on the login here ah right now I'm I'm sure I I know that it doesn't work and I can show you why and we can fix it instantly why we cannot navigate so here it's inside the nav bar and here uh let me go here in here to inside the nav bar here this button here where I'm going to show you how you can learn two functions inside this button so here we have a narrow function and we wrap this function here with curly bases like this if we call it with the parenthesis like this but of course I want to call another function that's why I've done all of this thing here is the sign out function in this function comes I'm just going to import it here so the sign out function it's assigning my butt so here import sign in which is from common sign in from next out react this from that Library here it's a space it's a function that is from the library I have not written it it's from the library I repeat so here is sign in and recorder function so right now it's going to navigate us whoops come on sign in and it's not going to navigate us to that login page when I click here just let me refresh and here why it's not working if you are here it's on the log out my butt just let me copy it and paste it here on the you know and paste it here just let me remove this because I don't need it inside the login in here it's sign out for the logout it's a different function so let me again import it so if I confuse you so here is the sign out and here the sign in so right now I want to show you how how it's working so here when I click again I need to refresh what's happening ah you are important component uh that you stage it only works in ground components uh I think I have marked it and the login page doesn't have the use command that's why I get an error so right now if I write it okay let me go back here let me click on login and right now we need to be redirected so you see right now we are on the login page and you will redirected to the login page from this function because here inside the where it is the API all here I have specified the sign in to be to be to the login page that's how it works so this is so this is one of the things that I can explain you right away so this is why here we are on the login page let me close this here and let's finish our handle submit here so for the handle submit I'm going to uh have a try catch here so here and actually before doing the dry cage here I can just do the if the password is empty or the email is empty here icon toast dot error few all Fields it's going to give us notification and here I need to import that toast and here of course we're going to stop the execution of the function here I am going to give another if so here if the password.linked is less than six I'm going to again do this so here fewer Fields but instead of actually instead of your Fields uh pass word must be at least six characters long okay and right now let me just write the cage here so console.log error Dot message or just error and Titan let me write finally the logic here so here cons response is equal to weight sign in so let me again import this function so here import sign in from next out reacts in here important here credentials and here we're going to pass email password entry direct false just like this and then if response Dot error is equal to no okay let's just import a question mark here so if this equal to no this means that our login has been successful so I want to go to my home page of course we want to go to the home page back when we have a successful login else here I'm going to give those dot error error occurred wow low Ging okay so here I meet one user earlier which is the test user I'm just going to copy him like this and one two three one two three and try to log in right now to see what is going to show okay so I'm this is the correct functionality I want to show you the other scenario let's say the password is wrong so instead of one two three one two three I put a bonus character so another one and when I click on login error occurred while working so okay the login functionality works exactly as I want it to work but I want to change here the URL with a login so here oops I'm going to go to my uh nav bar again and here how we're going to do it I'm going to show The Following way so here we get the use session so just let me see from where I need to import it so import your session it's from this again so here your session and here we get the data but I'm going to name it position so here we get the session constant and here instead of here having this login I'm going to have session question mark dot user so right now let me see uh must be wrapped ah I forgot this thing here so this is under the hood react context so of course we need to wrap our whole application with it so let me go here to the layout.js so here layout.js and let me do it so here session provider and we're going to wrap our application with the session in here session and to get this session just from here directly and let's be imported so here import session Provider from next out react like this here so right now Vision providers will Define ah because of course we need to use client here to write it and right now okay you see everything is working and let me get back to this condition so this is if it's a success this means that if you are logged in this means that we are not logged in so right now Let me refresh the page and right now let me try to log in here so again test user1234 gmail.com one two three one two three let me click login and you see here the this image here and when I click here you see the drop down and when I click on logout I need to be logged out and you see here it works because of this function here just let me show you this here sign out so we know that this here is working as we wanted here the login let me go just to write the CSS for our login because of course we want to make our page look nice so here where it was here the login.mode.css let me split the screen and let me start typing it so here dot container just let me move it to C so I think like this nice okay load container margin top of five item height calc 100 VH minus 6 pixel and Twitter 500 then dot wrapper is going to be here width of 85 percent margin of zero Auto then display Flex Flex direction of carbon and align items of Center then Dr wrapper in the H2 the title inside the dot wrapper is going to have font size of 32 pixel cover of two two and later spacing of one pixels then dot an upper Ender form inside is going to have margin top of two iron then width of 20. 20 percentage padding of 1.5 irm then border is one pixel solid 666 then border radius of 8 8 pixel this pair of flex Flex direction of carbon justify content of Center and items of Center and gap of two are M then dot an upper in the form in the input the site is going to have outline of none border of none border bottom of one pixel solid 666 and particle 0.5 RM then dot submit button is going to have outline none pan equals 0.55 multiple bottom and one item on left and right then border is one pixel solid transparent come on transparent font size of 17 pixel front weight of both background color is going to be ef ef ef then cover is going to be 2 2 A B22 which is a green green color cursor is going to be pointer transition is 150 milliseconds and here later spacing of 0.5 pixel just let me see how it's looking login in here white why don't see anything here it I think I have imported it guys don't touch anything I just restarted the server and it works it was just some book just restarted and it works and I saw here a warning here we have no secret for the next thought so here I'm just going to go to my GitHub and here I'm just going to copy those two environmental variables and paste them come on here just like this we have we need an extra secret and next load URL like this let me close the TMV and let me continue with the CSS so here I want to write the cover effect for the submit button so here hover and then border core of two two a b to 2 background code is the same greenish cover and then core of e f e f e f then Dot Login now is going to background core of transparent then outline is going to be here none border is going to be done font size of 18 pixel margin top of 1.75 firem cursor is going to be pointer text align is going to be Center and transition is going to be 150 milliseconds and here just for the hover effect so here login now hover I'm going to change the color to color 555 just a little slight color change so let me close my GitHub here and let me again try to login so here and again I'm going to try with the wrong credential so here we need to see an error what is happening here why don't wait I'm just going to refresh the page to see right now to login so here test user1234 gmail.com one two three one two three okay why this doesn't work again I didn't change anything and it's working so here I clicked several times login and here the notification is going to show off just in a second here let me see on the console what I have some classroom okay you see here error record while working is just delayed it's working I didn't change anything let me again try to log in with my correct credential so here you can log in and again it's going to take several seconds to process here the API code and if it's a success we are redirected to the home page so let me wait error occurred while walking what is the error I try to login with correct credentials here operations users find one buffer time out my friends the error is just something that I forgot to write one line of code await to be dot connect of course we need to be connected to the database when we make a requests to database like it makes sense so I just forgot it somehow just let me try again to login so here it is user1234 gmail.com so let me try again a wrong password so click login and here you see instantly notification let me try with the correct password Here you see here I am logged in so this is working successfully okay we are ready here with the login page then while we're at authentication stuff let me make the register page so here let me go uh to my here to the just letting close the API and here let me register and again page.j6 and here register Dot moto.css so let me close it here again NFC register and it's going to be quite similar to our login I'm going to write it again from the zero to not confuse you with any copy and stuff so let me write it right now okay so here last name is going to be Justin import the classes from dot slash and here classes dot container then here I have classes dot wrapper and here again I have an H2 with register text inside here a form with a text here of type of text placeholder is going to be here username dot dot and here on change is going to be here again we track the state so here set username of e Dot Target dot value let me copy paste it two more times so here it's an email Place caller email and set email here here it is password and set password and below here we have of course the submit button so here button.classes dot submit button and here it is register and below here I have another button so here it's class name of classes dot register register now and here on click is going to be this function so this sign in function come on I need to import it so here import sign in from next out come on next out slash react so here this function and here don't have an account question mark here BR tack to make it on two lines on the new line here so here register now Dot and below here of course I want the toast container so I can copy this toasting here from login page so here the CSS in the top container just to not forget something and we are ready with the G6 but of course we need to track the state here so here comes username set username is equal to use State here interesting then cons email said email is equal to use State and M string and here comes password set password is again equal to an empty string as you've probably guessed then I want to write this as a use Grant because of course we have state and stuff so here choose client and here let me make the own submit here so it is handle submit error in here we have event.prevent default then if come on what is this thing that I have imported uh if username if you go to an empty string or email is equal to an interesting or password is go to an empty string come what is done here come on so here password and string we have the toes dot error field or fields and then we of course return then I check if password dot linked is less than six characters come on less than six characters those dot error password must be at least six characters and then return okay and here inside the try block right now we are going to write the important code so here const response is equal to weight fetch here HTTP command HTTP localhost 3000 slash API slash register and here headers is going to be content type application slash Json then it's going to be a method of post method and then the board is going to be json.stringify here username email and password so then we make If request.okay this means that it's a success we have toss dot success here successfully registered the user set timeout and here's a timeout is going to be here to redirect us back to the signing page so here after a second and a half just for you to see the message and read it and here return we stop the function we are done else error occurred wow regi stirring and here return so we can go to our register page just let me log out here register and let me make your new user new user gmail.com in here one to one two three one come on one two three one two three and here I can even console log the response for you to see what is happening here so await response.json console here just let me remove all the messages enter click on register so here you see it's simply registered the user we are redirected so it's a success right uh okay and let me try to register again with the same user so I want to have the error displayed in my face to know that I'm wrong so here register end let me see error occurred while registering so it is working as I want it to work and let me just go and try the CSS I can actually copy the CSS from our login so here just go to login.photo.ccss and paste it inside the register it is basically the same thing so you see how it is working here this is the only difference here so right now we are going to right here for the button uh so instead of login now it is register now so right now you see how it's working so here icon toggle in and out from login to register and you see how it is working okay so let me right now login again with the new user gmail.com one two three one two three so I want to be logged in right now okay so we are ready with the apis we are ready with the login and the register page so we are getting into the interesting part the next page that we are going to create is for creating the block so here again just let me close everything let me close here the terminal here let me close this in here inside the app folder let me create let me create create block and here again page Dot j6 nfce and then okay just create block dot mojo.css like this and here let me import the CSS The Styling sheets like oops not the page like this okay and here it's going to be create block so right now we can start creating it nice okay let me first actually write the jsx so here is going to be class name is going to be classes dot container and here classes dot wrapper then here I'm going here from H2 with the create post and Below I'm going to have here a form which is going to have here an input first with a type of a text Place code that is going to be here title dot dot on change is going to be here we take the event in here set title to the event.target.valo then text area here it's for the for the description so here please hold the description dot dot and here it's a self closing tag so here I can just delete it like this and make the silver closing tack as you see in here on change again it's taking the event here and here said description is going to be e.target.valo after a text area here we have the select so we have a value of category so I want here to have a default value of category and her own change is going to be don't take the event here take the event said category is Target dot value okay and here inside the select here I'm going to have five options so here option multiplied by five and here nature nature then here it's going to be mountain and here it's going to Mountain as well then ocean come on Ocean then loud life wildlife and here forest forest so here this is for the select and options below with the html4 of image and here I'm going to have the text of upload image AI outline file image so here import AI outline file image from react icons AI and below it I'm going to give an input with the type of file this time the type of a file IG is going to be image they must be the same I repeat this the value inside the html4 must be the same as the ID here they must be the same because I'm going to make this display none I don't want to see it but I want to use its functionality how we're going to use it because of this html4 when you click this it's going to be clicked like this I'm going to show you right now and here on change is going to take the event in here Set photo e dot Target dot files and we get the first element so we just get damaged that's how we get the image and here below I want of course the toast container again so I'm just going for the toast container I just want to copy the toss container and it says just we don't forget anything here you see just a toss container in the CCS nothing else I have copied okay so let me make it a used Clan because we're going to use some states use client and let me write the state and we're going to see how it looks so here comes title set title is equal to use State here come on you state here and name String then comes description say description is equal to your state come on tell me in the comments if I write too fast guys I write on the keyboard Pro for probably 15 years so that's why I type so fast is equal to use State again an empty this time it's not an instinct actually it's nature like this I wanted to have a default something as a default value and then the next state come on the next state here is called photo Set photo is equal to use State again an empty string and let me see do I have other states that I need to declare I don't okay and then here I want to get the the station so I want to to know if I'm logged in or not here use session I'm just going to import right now we get the status as well so we know with your authenticator node and here Constructor is equal to use a router so again from next navigation this time it's Auto imported from next navigation you don't need to change anything uh so here I need to import the use session from next alt react like this here and here if status if you go to loading come on return loading dot dot dot then if status is equal to unauthenticated return access denied so we must be locked in in order to access this page quite logically because we are going to create some data and here RSS the night and then here I'm just going to create the on submit which is hand the submit so let me create the handle submit is equal to async function like this event dot prevent default and I have another function inside this file which I'm going to create which is const upload image you know we are going to have images so we need to upload and it's just an async function without any parameters so as I told you earlier we are going to use cloudinary for image uploading so let's go to Cloud native and show you how you can configure it I'm going to spoil it to you right now it's going to be very easy it's going to take us probably five minutes at most so here my friends you see we're inside cloudinary.com Here sign up for free if you have a signed up previously but I have so here I'm going to click on login here I'm going to login with my Google account so here let me click let me click here and here we have getting started I want to click to go here to the dashboard and from those values of the values here I'm going to need here just this viral so here let me go to my vs code and here let me make here at the constant secure cost underscore name and here let's paste it the other value that you're going to need because we need two values this is the first one the other value is a little bit more interesting so here it was here inside settings here upload and here wherever you add upload preset here this thing here and here you need to make the sign in mode unsigned this is a very important part and here let me make the my underscore blog project web dev Mania and here let me save it so here it is saved and here I have a previous my upload so I'm just going to delete this one this is for the previous thing that I have done and right now this thing here we need to get that value here so here my blog project webdefmania so here it's going to be a const upload preset and let me paste the value here as it is okay then let me start typing the upload image so here first we check if we have the photo so here if the photo it doesn't exist we just return what we just have done what we need what else we are going to do then transform data we must have a forum data here so here comes new form data and here form data dot append is going to be file and here we paste the photo itself just direct the photo and here form data dot append here we're going to have upload underscore preset and here it is the upload underscore preset dot constant that we have declared then a try cache block here with a console error console error and here for the type block I'm going to write the following code so response await Fetch and here just watch what I tab here you can copy inside the GitHub if you feel confused so here https colon slash slash API dot cloudinery cloudinery.com slash V1 underscore one slash dollar sign in curly places name then slash image slash upload and here it is and here we provide the object so here method is going to be of course a post request and here the body is just the form data we pass it like this and then cons data is equal to weight response.json and then const image URL is equal to data secure underscore URL and then return image URL this is the function so we run the function and we get back the image URL which we are going to save inside the database so inside our database we don't save the image directly we save the link dot that is uh connected to our image and I'm not sure if the connected is the right term but you get the point we don't save the image itself we save the link that points to the image I wanted to use that word points to that those words I mean okay so we are ready with this let me go back to the handle submit and that we make here a try catch store here actually before that I catch I can just do it like this so here if the photo is a false value or the title is a false value you or you can do to check if they are MP it's basically empty or this is the same thing and here for the description as well so those dot error here all fields are required then written and here we have the we get the immature area because we are going to run the upload image function just like this here then const response is equal to weight fetch here http localhost 3000 slash API block block then headers in here inside the headers what we are going to have here content type application slash Json come on Json and here authorization is going to be better session question mark dot user question mark dot access token I just want to login this station variable to to show you what it is composed of what things it have inside so here I'm going to console log it go to the create here this page cannot be found ah because here I have name it create block not post my but I'm just going to name it to create wherever you create block so right now I'm just going to go back here come on like this and here create okay so right now we are here and I want to see the console log what is this session object composed of so this is it so here it have expires and user inside this user it has the ID the email and the access token so this is the access token this is the data watch token you see how long it is this is basically for and then as you remember inside our API we verify the token if it's actually valid and if it's equal to our user and that's how we do all of this stuff here okay let me go back here uh not enough bar but here page.j6 so here let me delete this control lock and here if response is not okay so here if we have an error through new error error occurred otherwise we get the block from the response of weight response.json and here router dot push here so here block slash blog question mark dot underscore IG in here console log error so ah here I forgot to write the methods so it's here it's a post method and here of course we need to write the body I almost forgot the most important part so here json.stringify title description category immature and here author ID is on session question mark dot user question mark dot ID okay so right now we can try to create a new block here even though we have not written the CSS it's still functional so we have no worry so here new block one two three new block one two three here let's say wildlife and upload image I'm just going to pick this burger I know it has nothing to do with the wildlife and stuff but here I just don't see the button just let me create the button uh and we are going to submit it so here after this forum here we have the button with great here and here last name is going to be classes dot create post or block actually okay so right now if I click here we are going to be related to a page that doesn't exist okay it's a successful the page doesn't exist but you see here the block and the ID here in to even verify it because you know you can trust but you need to verify uh you need to you are we are going to see here you see here the block here the description and here I'm going to copy this URL here so I just want to see the entire URL copy it paste it and to see the image of this beautiful delicious Burger so you know that everything works from the first try I am very glad that I have no errors okay so let me go back to the create block and right now I just want to create here uh to write the CSS here okay so let me go back let me open the CSS let me split the screen and we know that it is functional and we can successfully create new blocks so here dot container is going to be margin top of 5 irm then height is going to be 100 VH minus 6 pixel is going to be a width of 85 percent margin of zero Auto zero Auto then Flex Flex direction of carbon then align types of Center then I'm going to again Target the H2 so here they create post font size of 32 pixel cover is of 222 and letters basic is one pixel then the dot wrapper in the form inside the Trapper is going to be a margin top of two irm width of 20 percent padding of 0.1.5 not 0 but 1.5 irm border is one pixel solid 666 border radius is 8 pixel display of flex Flex direction is going to be column uh justify content of flex staff and items of Center and gap of two area then dot a wrapper in the form in the input inside so here comma and Dot an upper the form and the text come on text area inside are going to have the following Styles so here outline is going to be none border is going to be known border bottom is going to be one pixel solid 666. particle 0.4 RM entry size is going to be none nice then though trapper in the form and selecting site is going to be outlined none then border bottom of one pixel solid 666 pounding of 0.4 irm resize is going to be known here for on size of 18 pixel width of 180 pixel background color is going to be EF e f e f and Border radius of 8 pixel before continuing come on to see how we are right now okay it's almost ready we just need to write the button here okay this for the select then actually we need to write here the labels form and the label inside which is this thing here so here it is width of one width of 175 pixel display of flex online in terms of Center gap of 1.25 item font size of 18 pixel front weight of both and cursor is going to be pointer okay and here don't create block is going to be here margin top of 2.5 RM outline is going to be known border is one pixel solid transparent bottom and 1.25 on left and right font size of 18 pixel border radius of 12 pixel background color is 2 2 A B two two core is e f e f e f cursor is going to be pointer and transition is 150 milliseconds then we apply the hour effect of this same button so here create block cover background cover is border core is again this 22 ab22 and the same as the text cover so two two ab22 and the last star that I want to apply here is for juicing here for the access denied here so I can just make that on like this so know what I'm doing so here access the Knight is going to be with a 500 percent text align is going to be Center margin top of 5 irm font size of 32 pixel and font weight is going to be bought here like this here so you see right now how it is uh what I want to do here we already actually with the create block the next page which is a very important page is the block page itself so the block details so here again inside our app I want to create here a new folder block in here page.j6 LFC blog dot Mojo dot cnss import classes classes from block module.css okay in here actually wait wait wait wait wait wait guys I'm going to read those two files sorry for this here inside the block folder I want to create another folder which is for the ID and then I want to create the page.jsx here in the block dot module.css just like this here and here uh I want to make its blog details and here let me import classes from here dot slash blog.motor.css nice and here let me first start with the j6 so here it is class name is going to be go to classes dot container then classes dot wrapper and here we have an image so here image from next image is going to be with the source here of blog details question mark block details question mark dot image URL but as you see here we need to First fetch the block details and then I'm going to write the jsx so for this specific component I'm going to first fetch the data so here use client of course because I'm going to need some your state and stuff okay so here comes block details set block details is equal to use State and MTI I'm not an entry array button name just think initially and here let me make it so here use effect is going to be here like this and here async function fetch block in here const response is equal to a weight fetch HTTP Local Host 3000 slash API block and here's the ID how we're going to get the ID very easily here we can just get it again like a CTX so here CTX and here context.pals.id this is how we get is the same as in the back end and here I don't want to store it so here Cache no store then uh cons block is equal to weight response.json and then here said block details to block and then I have to do some things because we need to do for the likes and stuff to do likes but first I want just to fetch or actually I'm going to do it so here said is liked is going to blog dot likes dot includes block likes to block dot likes dot link so this is basically here just I want to have some question mark here so this is basically to check if we have liked that block or if we haven't actually liked that block and of course in order to get access to this so here data session is equal to your session and I need to import it so import use session from next out slash a react like this here okay enter to in order to run this function I need to of course we have the session so here session and here fetch block like this here okay and I want to control lock the block details just to see here that everything is okay so here block details let me check here uh those posts here are not Dynamic here I'm just going to make the to make them Dynamic those adjustment data I just want to create some new parts here again with that burger picture and when I click here or something oh no here I don't have any error or actually I do image with SRC I forgot here the width so for the image here the image inside the j6 it's with here it's going to be 750 pixel and height is going to be 610 50 pixel like this so right now come on loading what is the problem right now here I have an error set is like this one defined ah see it is like okay so here is liked said is light is equal to use State here false value okay so this car will fetch a block let me see here inside the inspect console and here object and you see here the author category created a description Mutual title update that and it's ID we have we have everything here and I have no more errors I think Let me refresh the page I do have uh it includes undefined so maybe probably I should do it like this and I have no more errors or do I it's the problem here said block life is undefined ah ghost block likes set block likes is equal to use State let's say zero engine so right now okay we have no more errors let's continue here I can fetch the data so here let's continue below the image here I'm going to have classes dot row and inside the draw first is an H3 with a class name of title so here block details question mark dot title and here it's a question mark dot because initially this is going to be uh it's not going to exist time in the block details it's not going to be fetched instantly from the database it's going to take some milliseconds or a second or two seconds but it's not going to be instant instant so that's why you need to do this otherwise you are going to get an error okay in here if the block details question mark dot outer ID question mark dot underscore to string if it's equal to the session question mark user question mark dot ID again two string here we're going to show something so here like this and here like this song If this means that if we are the author of that block so if you are the author of The Block here I'm going to show here controls which means editing delete so here controls and here link of course to navigate us to the here it is going to be to block slash edit slash CTX params.ig and here is going to be edit with a BS fuel pencil fuel this is the icon here so let me import it so import PS few pencil fuel from react icon slash PS and here I am going to have class names going to be classes dot edit button then below this link here I'm going to have a button with the class name here of delete button in here I'm going to have the text of delete and here oops Yeah I feel delete I need to get this icon as well so import AI fill delete from react icons AI just like this here and here I'm going to apply an on click which is handle delete I'm just going to declare it so that I don't have any errors so handle delete async like this here oops I forgot the arrow like this okay this means that we are the author of the page so we can edit and delete otherwise we're going to show just the name of the author so here it's going to be a diff with a class name here of classes dot author and here author is going to have a span here with the block details question mark dot author ID question mark dot username so right now field href ah here it must be href not tools because I use track router Doms link more often than the next one and I am a custom tonight with the two property so right now you see here the title and here because we are actually the the author of this block we see the edit and delete here which is great let me continue here so this was for this row here then another row which is classes dot row again and here I'm going to have category so here classes dot category category two dots and here a span which is going to have here blog details question mark dot category and here below I'm going to have classes dot right and this is going to be the block likes again here some space and here is liked and here we're going to show different things from depending on the condition so here AI View like and AI outline like oops here like and both of them are going to have here a size of 20. and turn on click off just let me show you handle come on handle like I'm going to again declare this function beforehand to have no error so here comes kind of like async like this here okay and below this I'm going to have another row here below those two divs here so here classes dot Pro and here it's going to be first step paragraph here so here paragraph with the block details question mark.description and below a span with posted in here format which is a function that is from time ago I just out imported it as you see here format in here block details question mark.created at this is it for that row and then below below this last row here I'm going to have classes dot comment section and here I'm going to save classes dot comment input and actually I want to write the the CSS and functions for everything and then we are going to hit on the comment section it's like a bonus part like the comment section let's first write the logic for the block itself then we're going to uh make the comment section so here right now I just see that I need to declare the router here so here cons use router delete it here and let me see how it's looking AI outline like it's not defined of course it's not defined let me import it here AI outline like in here you see it did delete category ocean here we have the like because the AI outline like because we have not yet enacted here we have the description and here posted eight minutes ago okay I suggest you that we write first thesis because I want to make it look nice and then we are going to make the functionality of liking and the other stuff so here dot container is mean height of one of car 100 VH minus 6 pixel and here width of 100 then dot wrapper and of course I need to split the screen so you see what I'm exactly doing Trapper is Suite of 85 percent height of 100 margin of zero Auto margin top of five item display of flex Flex direction of carbon and then align items of Center then dot wrapper and the Imaging side is object fit of cover margin bottom of 2.5 firem wrapper is going to be dot row here we target the rows so padding of zero top and bottom and one or left and right width of 750 pixel display of flex justify content of space between align items of Center and margin bottom of 3.75 area then dot Row in the title inside which is that HD here that you see it's going to receive font size of 36 pixel core of 333 and text transform of capitalize so it's always with starting with a capital letter then don't throw in the spanning side is going to give a font weight of both don't throw in the span inside the span inside the span front weight of 500 core of 666 and font size of 15 pixels then.com throws I'm going to have display of flex and items of Center and gap of two irm and here dot edit button is going to be have here outline of none border of one pixel solid transparent background color of 3 e g a two two core is going to be white particle 0.5 on top and bottom and 1.25 on left and right display of flex gap of 0.75 RM and items of Center border radius of 12 pixel cursor pointer font size of 18 pixel front weight of both in transition of 150 Milli seconds then edit button and cover is going to have here a background color of FFF border core of 3 a g a to two three and core of again the same chord so three e d a two two then the dot delete button but before continuing I want to see the results currently so it looks very nice compared to one minute ago it's centered and stuff here you see and why this is not capitalized I want to see here it is weight so here the ah I forgot here the dots okay dot title and right now it's going to look different okay right now you see how it looks a lot bigger in its capital with a capital letter starting here nice let's continue here so delete button is going to have outline of none then border is one pixel solid transparent then come on because only transparent background cover is f zero zero then core of FFF bottom and 1.25 on left hand right display of flex gap of 0.75 RM online in terms of center for the areas of 12 pixel cursor of pointer font size of 18 pixel front weight of both and transition of 150 milliseconds then dot delete button here is going to be cover so here background color of FFF then border core of fret cover of f zero zero then I'm On Target here the dot author is going to have display of flex online items of central gap of 0.75 irm font size of 20 pixel and core of 444 after the dot autonomy Target the dot category so it have a width of 350 pixel display of flex let's find content of flex start online items of Center gap of 1.25 RM font size of 18 pixel infant weight of both so let me see how it's looking might not targeted here it's dot category so here the spanning site is going to give a panic of 0.5 on top and bottom and 1.25 on left and right then the background core is again this 3 e d a t e d a to two core is going to be white color border radius is 12 pixel font size of 16 pixel and front weight of 500. so right now you see how it is and here I don't need the two bit actually I think yes it doesn't change anything I don't know why I had it earlier uh in here dot right is going to be display of flex and in terms of Center gap of one item and cursor is going to be pointer so this is for the dot right this here and here if the block likes why it's not showing me zero here I'm going to make it if it's a false value it's going to be zero here okay right now you see the zero because here it defaults to undefined I think I think it still works like this yes right now it's showing at zero okay we have no problem so we're already here with the CSS nice it looks very nice in my opinion let's make it functional so let me see which is the first function that I want to write here okay I'm going to write here first the delete so here for a dry cage here console lock the error in here const can confirm model is equal to confirm are you sure you want to delete your block question mark So if this is true so confirm model is true cost response is equal to a weight fetch come on HTTP localhost 3000 slash API slash Block in here CTX params ID and here headers is going to have out to authorization common authorization column error and session question mark to Chooser question mark dot access token and here method is going to be delete okay and here if response dot response dot OK here router dot push here like this in here said timeout come on set timeout and here uh I'm going to make the arrow here and it's going to be after 500 milliseconds so it's a half a second window dot location Dot playing what nice and let me try to delete it so here I'm just going to copy the ID so we can check in the database that's deleted so here I click on delete I usually want to delete your block yes I am sure I want to delete my blog and here I see something loading I think I have deleted it probably I forgot to push it or what wait I'm going to delete this set timeout so let me check in the database if it's deleted I'm sure it's delivered because we have nothing here but so let me see find no this is a different uh pause here it ends with 988 here it is it ends with nine eight a so it's a different okay nice and here when I go on to the home page why it's you like this here I assume get the permi data which is something that we need to change it's going to be very simple don't worry so right now I'm going to make the like but before making the like I want to see the dynamic post so I forgot this somehow so here I'm going to make export async function fetch blocks is going to be like this so because the response is equal to await fetch HP localhost 3000 slash API slash log in here Cache no store in here return response.json and here just leave me right here async and here const blocks are equal to a weight response.json it's a fetish blocks like this and here if the logs dot length is more than zero we're going to show this and here I'm going to make a condition if blocks question mark dot length it's more than zero in here two dots H3 no blocks are currently in the database and here I'm going to apply of course a classy glasses dot no blocks and here the key is going to be make like this wait like this and here is going to be underscore ID and here we pass the block but inside the block cart we're going to get some other data as well here I want to get inside the instead of images image URL so this is just straight away change here then likes Auto ID and here the underscore ID here and here I'm going to write it data session you use is equal to you session and here I need to import this thing so import your session from next from next alt slash react then again cons is like set is like here is equal to use State four essentially and then block likes come on set block likes is equal to your state zero in here use effect we're going to here for use effect here so just let me change it before doing anything to a use client so use current use client in here if session ain't likes exist set is like to likes dot includes session question mark dot user question mark dot ID like this information likes set block likes to likes dot links in here likes session okay and here let me make the like functionality so here comes handle like we're going to make it here and inside the blog details here so we're going to have that function on two different places so don't get confused fetch HTTP logo holds 3000 shape and slash block slash idea and here the method is a put is a bot method just like this and of course I need to provide headers I forgot so here headers and they're going to have Auto realization colon better session question mark dot user question mark dot access token like this and here if response dot ok else so here if response.okay Actually I don't even need an also if respond to okay we check if it's liked else so here said block likes is previous previous minus one otherwise it's going to be plus oops plus like this here so when this changes then we'll go when these changes is going to run this thing here and it's going to to change the icon again so you are going to see what do I mean here and of course I need to make it here as a known click to those icons here come on nice so right now you see how it is oops and these two displaying 12 ah because it's it needs to be block likes like this in this place zero so right now when I click here you should show us right now one do I have a mirror or something ID is not defined let me see ah it's an underscore ID my Bots okay let me refresh the page here in C student doesn't do anything let me see what is there right now uh fails to respond the server respond to the status of 500. nice let me see what is the problem so here let me go to API block ID here ah because here it should be underscore like so right now I don't think I have any mistake probably I hope so right now if I click on like it should like it of course it like it but it doesn't change the icon why it don't change it let me see here it should be here block likes here so right now if I if I refresh the page right now if I click what is doing here wait I'm going to fix it I forgot to write this in here to change that's why it was behaving like this right now if I refresh and I click here you see right now it is one like and change the icon if I refresh the page again why it's not showing me wait click here I don't get any error if I click again it works like this but it says is this running quick let me check here so response rate me like it and you see here everything Force 403 session dot access token let me check what is the problem here inside likes and here around so here it checks it gives us 403 because of this thing here so let me log the access token in the decoder token here and let me run this function again what is the problem here g double Chima formed as verified okay when I try to if I try to log this here so here token what is the problem here I'm going to check and I found the error instantly it was wait I just want to show you I forgot to call this method those small errors sometimes take a lot of time to fix but luckily I took me 30 seconds to notice it so right now if I click here you see the response status 200 if I refresh the page here you should persist here you should show me one and the like into why it's not showing me I want to check here probably something in the ground maybe let me check here so block card here and here I get the likes right so here if I get the likes here it's on the find how it's on the find weight I want to console log the block itself rock is not defined how it's not defined here wait I just want to do it like this and then return here just I want to console off the block here so here author ID created that author ID did they did they forgot it here so block no it is here ah here I forgot it in need guys it need to be an array so likes are going to be again this same thing object uh schema dot types dot object ID but it must be an array this was the other mistake so right now I want to delete this block here so delete I'm going to create another block right now so here just let me create one very fast here let me use this image here create and right now if it's a successor I don't okay this is working right now okay if I go back to my home page here you see right now I didn't provide it or what it should be here so here likes I don't see it I want to make it a default of an empty array and I'm going to refresh my server right now I think that may be another problem so here I refresh my server okay let me again delete the last block previously loading loading right now deleted and let me okay so let me create here something one here okay uh Mountain here let me pick that I don't know this image click on create let me see right now okay it has been created nice and let me check inside the mongodb if you have that field likes I mean probably won't have it okay right now we have the likes nice with it we I think we can fix it this thing here so right now let me remove it and let me return it to what it was previously okay like this here and when I go here Brock is not defined okay I'm going to delete it here we have no more errors okay in here when I try to like it I cut against something response 200 Subs okay basic I mean do they actually run this function let me check here okay it is working so it is working something is something in the UI we're going to fix it right now but you see here we have our ID here this means that it is working this is the important stuff but I really wonder why right now we're seeing it wait if I click again here I've noticed some book here I think it is because of uh it should be I'm not sure I think it should be likes Maybe right now let me refresh here we have nothing when I click here okay right now it's working it was this problem the last part here so just change change this here to likes and hear likes just like this here okay nice so right now I refresh the page it is here let me see into database if it's here so here loading likes and we are here right now if I click again I refresh nothing is here if I refresh here and if our ID is not here it means that is 100 successful working okay we have nothing here okay this means that this functionality is working okay and we little need to copy paste this function why I'm going to show you because we are going to write this function just now in our blog Details page here I have even declared it so we need to do we don't need to do anything besides copy pasting it and here uh I forgot to copy it in order to paste it so here it was inside the the block card so here I'm just going to copy it and paste language skill right now if I click here I don't get redirected okay I need to fix this thing here it's at least very simple thing here it should be Dash blocks slash here underscore IG just like this here and right now when I click here you see I'm very different and this is the same thing I mean this is dynamic so you see here how it's working let me like it here I want to see if it's here okay this is working here nice nice if I click here the UI doesn't change probably I have not written the uh I have not written it correctly or what let me check here I just don't defined ah this is a problem seriously CTX or balance.id let me see if I have something like this I don't think so let me again refresh the page okay data has been fetched in here when I click ID is not defined obviously I did not Define here uh ah my butter here I'm changing the block card not the wait just don't do anything let me go back to the details page and here it should be cdx.com so that was the mistake so right now if I refresh the page let me see here refresh I click here successful you see start 200 from here I can refresh again the page here I have nothing I mean no likes here I click again and to see it has been reflected so we know that this is working so we fetch the data here we have the details page we can delete we can like what is left here I think the delete it okay so let me create here inside just let me close here this the console so here inside the block again let me create here on edit so here we are going to hit it and right now you see here the hierarchy block ID edit and right now I want to create here another folder inside the edit so here here I have an ID and here page.jsx NFC edit in here edit dot module.css here import classes from dot slash dot slash edit.modu.css and here let's start uh writing the code so here from now I'm just going to write here the use Grant because I know that it's going to be used client we're going to use we are going to use use state enter here I suggest to you that we write here the the state for so here title set title is equal to use State here then cons description set description is equal to use State then const category set category is equal to your state here nature const photo Set photo is equal to use State again an empty string initially const data and we rename that data to session conversation we need to get the status as well your session let me just import it so here come on import curly braces from next out session and here the last thing is here the router so here use router and here it's from navigation okay right now if status is equal to loading I'm just going to copy paste this logic here but where it was inside the create block yes which is going to copy paste it here let me close the details just let me paste here for the status and here let me make a use effect so here come on use effect here so here the juice effect is going to be for fetching the block so here async fetch block is going to come on cons response is equal to weight fetch HTTP localhost 3000 slash API slash block slash CTX params.id and here we have the CTX then const log is equal to weight response.json and then set title is going to block the title then set description blog.description and here set category block dot category nice and here we instantaneously call the fetch block here I'm going to have the those same functions that I have in create block here those to here I'm just going to no I'm not going to copy paste it I'm going to write them again from scratch because there are some little differences okay so herefore they did let me start typing it so here class name is going to be classes dot container classes dot wrapper and after the edit we need to write a comment section don't forget uh then I H2 what they did post here then form in here if I'm going to go to my create blog and just copy the form here because I don't want I'm just going to copy here everything because it's going to be quite similar the only difference here that is is going to be here it's going to be did the text is going to be just different and here the other difference let me check is here I need to provide here value property so here it's going to be title I want to make them controlled here is description and here I have already provided the category so let me see right now when I click on edit what I'm going to be shown package station is not exported wait ah it's from react not session for right now when I refresh the page loading rendered more hooks than the previous render ah I know why uh because this need to be above the those conditions here handle submit is not defined okay handle submit is equal to async at event dot prevent default like this okay right now what is the next error please okay we have to define the images I mean that's not a big problem so here let me here we have not imported the toast so we can go here to import the the CSS from the toast in the toast container just like this here okay right now I don't think I give any other errors at least I can think of okay you see here they're instantly populated here everything here the title the description in here the category nice so we're ready with the JS jsx and I want to import just one of those two functions here so I want to import the approach image because it's going to be literally the same but the handle submit is going to have one difference here I have both condition and let me import here the cloud name in the upload preset that we are going to need so here the cloud name in the approach preset from the create block this thing that we need to have again and here we have the upload image okay right now let me start typing here the handle submit so here we check if title is empty or category is same to you or description is empty here those dot error all fields are required and here return then we continue in here we have a dry cage of course so here for the care block console error error and for the try block here let usual is equal to no if photo so initially the photo is going to be an empty but if I want to have another photo here I'm going to do this condition here so here new await upload image and here I'm going to no I don't need to console log it actually and here against body is equal to title description category then if image URL is not immature and here const response is equal to await fetch HTTP localhost 3000 slash API slash block slash params.id or ctx.palms.id cx.com and here headers and object here so here content type application slash Json and here go on auto authorization better session question mark user question mark Dot access token method but in here body json.stringify body Okay then if error error has occurred and here comes broke is equal to away transpose.json and here router dot push foreign [Music] so this is for that it is basically almost the same function but but those conditions you know we didn't have it previously so right now okay I just want to write the CSS because it doesn't look beautiful at least in my eyes without CSS the internet access and then we are going to continue and actually the CSS I'm not going to lose your time it's basically the same as here inside the create block so we can just copy and paste it with the create Block it's the same as I told you yeah you see it's the same so let me change the title to let's say one two three three to one description to just nice description bro let's upload the image of this burger here and let's click on edit so right now let me see if it's a success okay you see right now one two three three two one category ocean and here the new image let me just make a new image here let me pick this image of the nature here let me click on edit which has been updated you see everything works here it's still light and it here you see posit 13 minutes ago so we know the edit is working as we wanted it to work which is great we have no errors and here as I told you we are going to write the comment section so let me go back to my details wait just a second to look at my screen where it was so here here it is okay let me go back here and here let me go to that page so here we are again inside the blog details so here I know we change a lot of pages don't get confused my friends we are inside the block details and we are going to write the comment section so here for the comment section I'm going to give here an image just an image and here source is going to be person with a width of 45 pixel enter height of 45 pixel and here I'm going to just leave an empty old attack input is going to be here a type of a text value is going to be comment text we are going to make this state just in a second Place holder is going to be type message dot dot and then on change come on change is going to be here set comment text to even though Target dot value nice then button is going to be here post and here I'm going to give a known click which is going to be handle comment and below this comment input GIF So Below this div here I'm going to give Crossing dot comments and here if comments question mark dot length is more than zero again I'm going to have some condition in here if it's if it's zero I'm going to display here no comments be the first one to leave a comment exclamation mark and here class name is going to be classes dot no comments and here otherwise we're going to comments.map comment and here I'm going to have an instant return so here comment comment from the components and here key is going to be comment question mark dot ID in here comment is going to be just comment and here set comments is going to be here set comments okay so right now we just written a lot of things but we have not imported we have not fetched data so we need to change some things here I instantly find this typo so here it's width like this okay so right now it's time to declare another several other states so here we have just let me make some space here so here comes comment text said comment text is equal to you state and if you think initially and here comes comment set comment is equal to your state and empty array usually and here we fix the blocks which is great but we need to finish the comments as well so here use effect here like this and here uh let me fetch them so here again session uh async function fetch comments and let's fetch them so here comes response is equal to O is equal to our weight fetch HTTP localhost 3000 slash API slash comment and here ctx.panance.ig and here Cache no store so it doesn't store until comments are equal to weight response dot Json and then set comments two the comments here that we get from our server and of course we run the function oops fetch comments nice here let me see if I have something move the person is not defined okay let me Define it here so import person from the dosage public or here just wait public slash person.jpg Let me refresh so here .com is not defined we are going to define it come on right now do we have any other error no we don't uh here is the comment section I know it doesn't look right because we have no CS is applied but before applying this is actually I'm going to apply the CSS first yes I prefer to have some CSS Okay so here let me go to the let's go so here comments in here oops dot comment section just let me scroll down here so you see what I'm styling is going to have margin of zero Auto then margin top of five item with a 50 percent display of flex Flex direction of column specify content of Center Online items of Center border of one pixel solid 555 and Border radius of 20 pixels then dot comment input is going to be a panic of one item with a 100 percent explore Flex align items of sand align items of Center gap of 1.55 am and Border bottom of 1 pixel solid 555. then Dot comment input in the in which inside is going to be object fit of cover and Border radius of 50 and do I have filter on weight I want to see I can fit on the width and height okay so I don't need to write them then dot comment input in the input site is going to have Flex of one so it takes the every the whole remaining space then outside none border none bottom of 1 pixel solid 555. then comment input is going to have uh to Target the button so outline is known uh then border is known background cover is going to be zero seven zero seven b five core is going to be FFF equals 0.25 5 m and 0.75 item is 8 pixel font size of 17 pixel and cursor of pointer nice and then dot comments are going to have here Max height of 300 pixel over for auto so if it's more than 300 pixel is going to make it scrollable 1.25 item for the margin top with a 500 percent planning of one item display of flex Flex direction of column alignment of Center a gap of two item here then don't dots no comments is going to have here panic of 1.25 IM font size of 24 pixel and color of 222 and then dot access the Knight is going to have width of 100 text sign of Center margin top of 55 item font size of 32 pixel and front weight of both and this is the CSS so right now you see it looks quite well I mean it looks like a normal comment section but we need to make it functional and to display the comments and just one last thing here I want to make it here I knew you see here we don't give any space and I was like okay how I have not driven margin top and here I have written a margin top of 5 ir and here I forgot the m so here M and right now is going to be spaced out nice I can even make it 7.5 actually okay so right now it looks great okay uh let me go to the to the do I need to go to the one component which is the comment component so here let me go here so here components where are you comment nice here I get the comment in the set comments and here I'm again going to fetch uh not to Facebook to get the session here so here you session again import use session from next out react okay then cons token is equal to session question mark dot user question mark dot access token this time in this component I have got it out instead of writing all of this and here let me first write the j6 so here class name is going to be equal to classes dot container then class name is going to be classes or trapper and here classes dot left and then classes dot right so first let me write the left side so again image with a source of person width of 45 pixel and height of 45 pixels again an empty old dark then classes dot user data is going to behave here H4 of session of comment question comment question mark dot author ID question mark dot username and below that H4 I'm going to give a span with the class name here of time ago and here format so here format comment question mark dot created at end here I'm going to import the format from time ago.js below that difficult user data I'm going to display inside a spanner comment the text comment itself so here comment dot text and here inside the right side I'm going to check if session question mark user question mark is equal to comments Dot underscore this means that we are the author of the comment so we have the access to delete it so here B is trash in here class name is going to be classes dot trash icon and then on click is going to be handle delete comment okay so let me declare this function async and then in here a weight fetch http localhost 3000 slash API slash comment yes slash dollar sign curly braces comment question mark dot underscore ID in here headers is going to be authorization authorization with a better and the token here and Below I'm going to get some method delete this time we're going to use the delete one and here set comments we take the previous comments into the we filter them so here previous dot filter comment and here comment question mark dot ID so we basically delete the comment from the state as well as the deleting it from the database so let me check here let me try to comment does it work wait did I made a functionality to comment I'm not sure I haven't okay so we need to make the front to comment and then we are going to try to delete the comment itself here okay at least the functionality comment it's not so hard so here first if comment text question mark dot linked is less than two this means that it's very small comment like what we are going to type so here those dot come on or just I'm just going to return it wait okay I'm going to use the toast so here toast dot error comment must be at least two characters one and here I'm going to go to the here to copy just the toast file just to notify those that he cannot leave short comments and here I'm going to come on toast container like this okay then uh try cash block here again lock error and here let's go so const body is equal to block IG params dot IG and here is ctx.com then author ID is going to be session question mark dot user question mark dot IG and here text is comment text nice bin cons response is equal to a weight fetch http localhost 3000 slash API slash comment and here headers is going to be in the following so here content type application slash Json and then uh what is it is the authorization authorization better and here the session question mark dot user question mark dot access token then oops uh it is method of pause so here we create a command and here the body is Json those signify the body itself in here comment or new comment actually so new comment is equal to awaitresponse dot Json here and here we we add it to the state so here previous come on previous return new comment dot dot previous and here set comment text to an interesting so have I made it to track the state here yes I have so right now when I I want to refresh the page and right now I want to try to comment so here my comment click on post there is something here uh the error what is the error let me check here I just want to refresh the state then I'm going to comment and try the error person is on the fight is it this thing here wait import person from dot slash dot slash dot slash public slash person .jpg okay right now if I refresh the page what we are going to see icons PS if I again refresh the page otherwise failed to construct image please use the new operator wait I probably forgot to import it yes I forgot to import it so right now we are going to import it do I have another error here let me again refresh and right now I don't see together okay we don't have the uh the CSS so let's write the CSS right now and we're going to try again to comment I just want to see the comments beautifully okay so here dot container height of 150 represent and Twitter represent then dot wrapper is going to be here width of 85 percent right percent margin of 0 Auto display of flex justify content of space between internal items of Center the dot left is going to be display of flex and gap of 1.25 irm then dot left in the Imaging side so here with the fourth pixel height of 40 pixel object feet of cover and Border radius of each person then dot left and here the user data is going to be display Flex Flex direction of carbon then align items of flex start and gap of 0.25 IM then I want to Target a time ago so here time I'll go font size of 14 15 pixel and call of 555 and then trash icon cursor of pointer to indicate that it is clickable so right now you see the comment looks very nice for such a few Styles so right now if I try to okay you see it's working okay it's working Let me refresh the page to see that they are fetched okay they are here and I want to leave to delete every single comment except the Mind comment this is the first one okay and here you see new user two minutes ago so to delete functionality works as expected so I think we are ready with everything the last part of our journey is to deploy our application so let's deploy it okay so my friends in order to deploy the application we need to do several things the first one is I have noticed that when I either brought my application earlier without filming the video and there was an error which was pretty interesting at least to me here we need to go to login and to see here we have this sign and the set of this I we need to write it like this like a special character and I'm just just let me see how I need to write it I have posted it where it was here we're going to see what they mean by this special sign here so here source up login and pages.jsx and here yes so it was here like this and I need to do it on the register as well so here the login I need to do it on the register as well and there was one more place which I had to do it which was inside the page.js here in the literally home page here we have a written the web deaf Mania blog website here I need to do it like this here nice so it's like this then I have to do um wait do I need to do another thing let me see here so here uh CD so here I can just do git out at git commit commit git push origin mean here should we get Branch M mean it push origin mean okay we're going to push the changes and right now I'm going to try to deploy the application so here repositories here let me copy the URL and here okay this was the before filming the video where I deployed the application I want to show you right now how we can do it from scratch so here you just need to login to make an account or something okay then you are into the dashboard here while you are at the dashboard you see here add new click on add new and here project then uh you need to import it let's say can I just paste the link if I paste the link would it show okay so it is block iPhone 13.js here he I think I have yes I can pause the changes okay I'm going to import it and here I just need to place my environmental variables which are those here okay let me paste them deploy n is going to take several or at least one or two minutes to see if it's going to be successfully deployed and here you see the other error because here I'm going to show directly here into the layout here I use use current but you cannot use it alongside with the metadata and I did choose use Grant because of this session provider so it's a very easy fix don't worry here inside the app folder I'm going to make provider .js here not that folder wait I want it to be in the source folder I'm watching that but the source folder okay here inside the source for the provider.js and here I want to literally just copy this here I don't want this and I don't want this so here x const export cost provider is equal to it gives the children like this and here return of course here I need to have some curly braces and here it is being returned and of course it is getting like this so right now let me try to just wrap it with that provider like this okay so right now I want to test if it's going to run just with npm left if it's going to have no errors or something here CD wait why it's because I need to write npmi that's why okay and right now Am Pm run def I'm going to type it while it's installing so is going to show us in a second okay and right now let me see if I have any error I think I need to remove I think yes it's not I think I need to remove it this thing here they use current directive anything right now it's loading into we're going to see if we actually have an error or something session provider is not defined or of course I forgot to import it so here let me import it import session two session Provider from next object I have some error yes himac hasn't been registered for model uh yes I got the problem so here I need to use to write use client let me see okay right now I have no errors okay it's working which is great so right now I'm again going to add the changes and then purge them so here git push origin Main and right now I am again going to try to deploy it I forgot about this error there were two errors though this was the second one so right now I'm just going to again import copy and paste in environmental variables just like this and right now I'm again going to deploy it finally friends our application has been deployed but but there is a one big problem as you see here we have that error and don't worry it is something that is expected and right now we are going to finally fix it it is going to be deployed so here copy this URL here that you see and then go here to the search and write HTTP localhost 3000 so everywhere that you have made an API call with this URL you need to change it to this thing here so you see right now it's joints you see here slash Indian API whatever it was but change the localhost 3000. into that for literally every single one so I'm going to do it here here then here and here and let's go let's go I know it can be quite annoying to do that for everyone but this is the last part of our application so we need to do it here nice and we have several more left so here and one more left nice finally so here git add dot git commit commit git Posh origin mean to push the changes back to our repository and right now let me go back here and it will be ready in two or three minutes so here we are let me try to login here I click on login new user gmail.com one two three one two three and let me see if I may related back to the home page and you see so guys this was for this video and see you next time bye

Channel: WebDevMania

Views: 21,465

Keywords: next.js 13, next.js, react.js, javascript, web development, coding, html, css, full stack

Id: DWSmrdwyoN8

Length: 193min 20sec (11600 seconds)

Published: Fri May 12 2023