React Node.js MySQL Full Stack Blog App Tutorial

Hello friends today we are gonna create a blog application using react node.js and MySQL on the home page we are gonna fetch all posts from our MySQL DB when we click it's gonna get a single post but we are not gonna fetch only post details we will also fetch the user information so you are gonna learn how to join different tables in mys graph by the way we can log in or register as you can see we cannot edit or delete this post because we are not the owner but if I open a different post that belongs to me you will see that there are two buttons so I can delete this post or I can edit let's update our post and here we are using a rich text editor so we can give any style to our text I can upload an image change here and update as you can see the post has been updated and every file that we upload is being stored on our server and there is a sidebar here and it recommends only similar posts I can create a new post I can log out and many other functionalities it's a great project to understand react and MySQL Basics you will learn database relationships user authentication Json web token to provide the security cookies to hide sensitive information Advanced CSS tips and more I hope you will like it if you want to see more projects like this you can like the video if you are ready let's get started okay let's open an empty folder and inside create two folders first one will be our backend server so I will say API and the second folder will be our react application so I will say client site let's create our react app to do that we are going to be using La model kitak report story if you open up this repository you are gonna see that there is a react midi Branch here and we are going to install this Branch we are doing this that because I don't want to clear all those unnecessary files to save a little bit time we are going to be using this repository so I'm going to come here and copy this URL so I'm going to open up client folder and I will say git clone we are going to be using only one branch and Branch name will be react Mini I'm going to paste my link and I'm going to install everything in this client folder so I will say dot and enter as you can see they are here but we don't have our libraries I will just say yarn or if you are using npm you can say npm install and it's going to install our libraries okay it's ready I'll say yeah start and it's here we have only this text here we have only app.js and we don't have to delete any unnecessary files okay so what I'm gonna do I want to create our Pages first we are gonna need a login page a register page a home page and to create any post or update any post we are going to create another page finally to show a single post we are gonna have a single page let's create them I'm going to come here Pages folder and inside let's say login another one our home page I'll say right and finally a single post page like that let's create our functions quickly okay but we are gonna reach those pages it should be our home page and when we change the url we shall see other Pages according to this URL to do that we are going to be using react router Dom it allows us to navigate between our Pages it's really easy to use let's come here as you can see we have to install this Library I'm going to open up new terminal and yarn at react rather and after that as you can see this is how we can create our router we can give any path here and we can provide any page here you are going to understand better right now by the way this is the latest version of the react rather than if you are using the previous one you are probably not familiar with this structure but don't worry I'm gonna explain let's copy this components I'm gonna close everything and open up my app.js and I will import here let me show you this okay as you can see we are going to create a rather and using this rather provider yeah I'm gonna pass our router here router equals our router that we have created here and it says if you visit the home page right here for example oh let's say this is home let's check as you can see this is home if I create any other path here let's say test this is test and if I go to localhost and test and as you can see it's here basically it works like that so what we are going to need we are gonna need a register page and when we visit this page I'm gonna call to register page let's import I will say register pages and register page so I can do the same thing for login page actually let's import others a single page okay let's see by the way by default react rather Dom shows this error when you visit non-existing page as you can see we don't have any tests anymore and of course you can customize this page but we don't need that let's test our login page okay perfect it's safe of course I can do the same thing for right home page and single page but there is something that we need to consider for the register and the login page we don't need any nail bar or footer but for the home page for the right page and for the single page we are going to show here a navbar and a footer basically they are going to be our common components let's create here and I'll say router and never okay so instead of coming here and writing now bar and after show here the home page and finally show footer of course we can do this let's go to home page as you can see they are here but it's not a good idea for this application it's not a big deal that because we have only three pages but imagine you have tens of pages and writing them one by one is basically it's a wasting time instead what we are gonna do is to use react router Dom Outlet let's search for it okay it's here as you can see it allows us to render child element with the parent basically we can create here a component and we can say use here neighbor right here Outlet basically it's going to be our children it can be any component and after that write here footage let me show you and you will understand better I'm gonna come here and create a function I'll say post let's say layout and I'm going to return My Nail Bar and I'm gonna write here all that and footer I'm writing here react fragments that because we cannot use multiple components like that without any parent and I'm gonna use this layout here to do that I will say elements will be my layout component and I'm gonna write here children it's going to be an array and we are going to provide here our child Pages first one will be home page so I'm gonna say path is gonna be the main URL and the element will be home page I'm going to duplicate this and I will say single page and it's going to be single page finally write and write I'm going to come here as you can see our home page oops there is something wrong of course I've created this layout here it should be before our router here let's see again okay perfect it's here let's visit right okay it's here a single page okay by the way let's make this pause page and we are gonna write here a specific post ID so basically I will say column ID so if I say post and an ID here it's gonna show this page perfect so what I'm going to do is to give here a class name it's going to be app and inside one more view class name will be container I'm doing this that because I'm going to give a specific width for this container it's going to be in the center of the our active so I'm gonna wrap this rather provider and that's all but how we are going to give our styles of course you can create individual CSS files for each component and each page but I'm not going to do this I'm gonna create only one CSS file and I'm gonna write everything inside that because it's a really simple application we don't have many components and pages and actually I don't want to spend that much time for styling so I'm gonna come here and create a style file but I want to use SAS so I'm going to open up my terminal again and I will say gun add SAS and I will come here create new file and I will say style Dot scss and as I said you can separate your style files it's not that important so I'm going to come here and say app and inside our app we have a container and inside this container firstly we are going to have a login page and register page let's say login and register they are going to have common elements let's open up login page I'm going to give here a common name let's say authentication for example and inside I'm going to create H1 tag and I will say login and let's create a form and it's going to include two inputs first one will be username and second one will be password type will be passwords uh finally I'm going to create a button let's say let's open up our login page okay firstly I'm gonna Center everything to do that I'm gonna be using flexbox I'll say alt it's our container remember I will say display Flex align item Center and justify content Center and nothing happened that because we didn't import our CSS file here I will say import style dot as CSS okay it's centered horizontally but it's not centered vertically that because we don't have any height here if I say background color as you can see it hides ending here to prevent this I will say height 100 VH so it's gonna be full height and I want to give here a background color actually it's going to be a common color so I'm gonna create here a variable that's a light green and it's going to be this color so I can use this variable anywhere in my app so I'll say background color and light green like that but I don't want to make them horizontal the login title should be here so I will say Flex Direction not row it's gonna be column like that let's take care of this H1 size will be 20 pixels I'll say color will be teal and I'm going to give some margin between this title and these four okay what about this form again it's going to be vertical so I will say display Flex Flex Direction cool and I want to give some padding inside of course we cannot see that because we don't have any background let's say white like that but it's really small let's say 200 pixels I want to give some space between my elements so I will say cap 20. like that let's take care of those inputs inside form padding will be 10 I'm going to delete those borders and I'm going to give Porter for only bottom pixel solid and gray like that actually let's increase this padding here it's still too small okay it's better and what about this button again inside form I will say button padding time boiler known and background color will be teal font color will be white and cursor will be pointer like that okay so I can create here a link if you don't have any account we can go to register page so I will say span don't you have an account and I'm going to create here we are graddled on link and I'll say register now we are going to go to register page like that let's give some stuff here it's gonna be a little bit smaller and I will say text align Center like that by the way if there's an error here we can show it I will say p this is an error of course we are going to change this error message according to our error I will say P tag again small and font color will be red text align Center again okay so I will do the same thing for the register page so basically I'm gonna copy here and paste for register page and I'm going to change my login text here it's going to be register and do you have an account if you have go to login page not like that and more input we are gonna need and it's going to be email and they are going to be required okay it's that easy let's open up our homepage and let's create our navbar and footer I'm going to open up nail bar and that's a class name now bar and inside this Nail Bar firstly we are going to have a logo here and in the end of the screen we are going to have our categories and some links let's do that firstly I'm going to create a container because I'm going to give some padding and firstly we are going to have a logo and other site will be our links like that we'll go links okay let's make this horizontal I'm going to open up style actually let's open this here I'm gonna close everything and okay I'm gonna come here and say never container inside and logo and links let's give here a padding I will say padding 10 pixels from top and bottom 0 pixels from left and right and I'm gonna make this horizontal okay but as you can see it starts from here as I said I'm gonna give some specific width for this container I will say with it's going to be 10 24. and of course I'm going to Center this container so I will say display Flex justify content sector like that as you can see it starts from here and and somewhere here so what I want to do is to separate this logo and this link we are already using display Flex so if I say justify content space between as you can see they are separated so let's create our logo to do that I'm gonna come here and create a folder images and I'm gonna move my images here now we are going to be using this logo inside this div I'm gonna say image and it's going to be our logo let's import image folder local.png I'm gonna use it here like that so what about our links I'm going to come here and create rear cradle.link let's import like that of course it should be like this because I'm gonna write my category name like this and as you realize there is a default style here to prevent this I'm going to give here a class name and let's say I think we are going to be using this class name everywhere so I can use it somewhere here let's say I think I will say text decoration no we are going to delete this underline and color will be inherit so it's not going to give any default style or color okay actually I can write here H6 and when we click on this link we are going to go to home page but we are going to write here a query and category will be art let's see I'm going to click as you can see it's here but it's still home page let's create others actually I will just copy paste it's exactly the same thing I don't want to write the same thing again and again like that and of course it's going to be horizontal it's flex and gap between our items like this of course we are going to increase the size but before I want to create something as if after this link I'm gonna say span and show basically it's going to be our username and one more span it's gonna be log out and one more span and we are going to create here a link again and I will say right now we click on this link we are going to go to right page let's give different class name here it's going to be a little bit different okay firstly I'm gonna decrease this image size I'm going to come here logo image and it will be 120 pixels like this let's Center those items display Flex align item Center like that I can do the same thing for this black box also remember it's flexbox here and align item Center and they are centers let's give style for this H6 stack inside link font size will be a little bit bigger pump weight will be 300. like that what about this pen it's going to be just cursor pointer so we can click here and finally this right as you can see we have a style here that because I forgot giving my class name it's going to be link and I'm gonna write it here firstly I will give background color it's going to be our variable here light green like that I want to give some width height and I want to make this background Circle let's say 50 pixels if I say border radius 50 is going to be a circle like that let's enter this text you already know how to do this display Flags align item Center justify content Center like this I will change this font weight it's going to be lighter and let's see how we can give a hover effect when I hover over I'm gonna change its Style to do that I will say however like that and text color will be teal background color will be white like that maybe border here so we can see our Circle okay but as you can see there is a problem here and I hover over all those elements are moving that because we are adding here two more pixels because of this border to prevent this you can say 46 pixels height 46 pixels that's because we are adding two more pixels here or if you don't want to calculate anything you can give here a border like we did here but this time it's going to be just right we are not gonna see it like this it's that easy so let's take care about this footer quickly is going to be a footer tag again I'm gonna add here my image my logo and a simple text here I will just copy paste let's import our image like that I know for some of you this text is a little bit cringe but I just wanted to do this because it's really popular maybe some of you really like this kind of texts so it will stay like that after this I will say footage footer attack firstly I'm gonna take care of this image let's say 50 pixels like that and what about this container firstly let's give here a huge space between this footer and this element whatever one page single page or right page and after that some padding I will give background color it's going to be our green color I will say display Flags align item Center and justify content space between I'm gonna decrease font size like that it's that simple what about this home page I'm gonna open home page here let's say class name home and here we are going to add some posts of course we are going to fetch our posts from our API but for now I will just paste here a dummy data as you can see we have posts ID title description and image we are going to use them just for checking how our design is let's say posts it's going to be our posts container and inside I will say posts and for each post I'm gonna return a positive and if you are using map of course you should give here a unique key and it's going to be post dot ID that because all IDs are different we can use it and inside this div we are going to have image container is going to include our image pause dot image and we are going to have content and it's going to include this title and description let's say link I'm going to create here H1 tag it's going to be post title and when we click on this button we are going to go to post page but as you remember we have to specify our post ID so I will say post page and here our post ID like that and finally A P tag and it's going to be post description and finally a button read more okay it's really big and this P tag inside our link I think and our button it should be here and let's give here our class name okay perfect and that's all I think after this footer I will say one page and inside this homepage we have posts firstly I'm going to give a margin between this and this now bar and I will say display Flex Flex Direction column and gap between each item each post will be 150 pixels like this and for each post I will say display Flex they are going to be horizontal like that let's decrease this image size I will say in which be careful here it's a class name that because we have a container here I will say Flex one and for the contact View I will say Flags too oops like that of course it's too same that because we didn't give any height for wheat for our image I will just say with a hundred percent so its width will be its parent here like that as you realize our content size is two units and input size is one unit you can change here and make whatever you want you can say image size two units and content size three units like that right now in which is bigger actually it looks better than other I think so it can stay like that I want to give space here cap 100 pixels like that let's give height for this image it's too big I will say maximum height is going to be 400 pixels of course I will say object fit and color so it's going to crop our image properly okay awesome but I want to make here something different we have four elements here and I will say if the item number is odd number put this image here on the right and content on the left and if the item number is an even number just leave it like that image on the left content on the right to do that I will come here and say and child and I'm gonna write here a condition if it's 2N plus 1 which means if it's an odd number and I will say Flex Direction again it's going to be row but this time it's going to be row of reverse like that it's that easy as you can see first element third element it's that easy let me show you one more effect here basically we are going to create another cut like this image but we are going to give only background color to do that I will come here and I will say after we shall give here a content and basically you can write here any text and it's going to add this text after this image but I don't want to add any text instead I will just create a div and its size will be exactly the same size with this image but instead of an image I'm gonna just give a background color let's say create a hundred percent height 100 percent and background color will be our light green and I'm gonna use some position for this card basically its initial point will be this point to do that I have to come here and say position relative and for this one I will say position absolute and that can give any position here let's say talk to any pixels and left will be minus 20 pixels and as you can see 20 pixels from top and minus 20 pixels from left if I don't write this relative as you can see it contains all screen that because its parent is our app container instead of this in which this is why we are writing here relative but there's a problem here this deal should be under this image it's really easy to handle that I will just give set index and it's going to be let's say -1 as you can see it's much better of course it's not only way to do this you can basically create here another div and you can do exactly the same thing but I just wanted to show you how you can use after here so I will play this and what about this content I'll say display Flags Flex direction will be column and justify contents will be space between basically I'm gonna separate them like that of course it looks strange for now let's change our H1 tag like this and P tag like that what about this button it will be maximum content let's give some padding delete this border and give some color it's going to be 10 to 20 motor will be known of course cursor pointer I'm gonna give background color it's going to be white and I will give Porter well pixel solid and our color by the way let's change this text color it's going to be t maybe this one too because it's really light okay it's much better let's use a horror effect again I will say power border one pixel solid and white you know why I'm doing this it's exactly the same reason and background color will be our light color and color will be let's say black like that perfect it's really simple but it looks really nice and minimal perfect let's take care about this single page I'm gonna click here as you can see this is our post number let's create our items by the way I can close them and open up a single page I'll say class name single page and we are going to have two items first one will be our content which includes post image title and description and second item will be a menu here let's do that I will say content and menu C and M I will say single page again display flex and I'm gonna give gap between them um content will be Flex 5. and menu will be likes to like that as you can see it looks really nice or maybe it will start from here and content will be here let's see what we can add here firstly of course we are going to have our image I will just paste here any image we are going to change those later and after this in which before writing our post title I just want to create here a user div and it's going to include user image username and under this name post date let's do that I'll just say user div another image and next to this image I'll say infodiv and it's going to include username John and a P tag and it's going to be posted two days ago okay our images are really big let's come here we have a user do and inside there is an image with 50 pixels right 50 pixels is going to be a circle and object fits okay and before this user div of course we have post image I will say with a hundred percent right will be let's say 300 and object it will be go like this perfect let's make this deal horizontal user display Flags align item Center and cap between them like that and I'm gonna decrease font size and for span which is username probably it will be bought like that okay maybe I can add here something else if we are the owner of this post we will be able to delete or edit this post let's add our buttons so after this info div I'm gonna create one model and it's going to be let's say edit we are gonna have two images let's import them edit.png play dot PNG and it's going to be here and the second one like that's for this edit button I'm gonna add a link and when we click on this button we are going to go to right page but a query here okay that will be our post number of course we don't have any post number for now let's say just two we are going to change those later and let's come here and create our edit to I'm gonna give five Pixar space for each image it's going to be 20 pixels cursor pointer like that perfect if I click here we are going to right page and when we click here we are going to delete this post okay let's take care about this title and description quickly this user review here and I will say H1 attack is gonna be this text and finally P tag I will just paste this text like that I will say font size 42 pixels and color will be this dark colors like that and for this P tag our description text align and it's going to be justify as you can see it ends in the same line and it looks better and I'm going to increase this line height so I will say Knight height 30 pixels and as you can see it's much better and those elements are to close each other our content here I will say display Flex Flex Direction column and cap 30 pixels and it's much better okay what about this menu actually let's create another component for this I will say menu.jsx and I'm going to call this component here like that class name and inside I'm gonna give a title other posts you may like and again we are going to have some posts I can use this one and I'll say posts map for each post return a positive key will be called start ID and inside post image post title and a button here that says read more let's add here post title post image let's come here and I will say display Flex is going to be vertical again and cap between each post will be 25 pixels for this title for each post again vertical and between image title and button will be 10 pixels and let's write here our image and see how it looks I will say a hundred percent High probably 200. an object that will be covered no it is perfect let's change this color it's going to be exactly the same color here H2 like that and this button actually I'm gonna use exactly the same button here so I will just paste like that only difference is this padding I think like that perfect and it looks really nice basically it's going to recommend some posts according to the category of this main post so if the category is designed for example it's going to show only design posts okay perfect so finally writing page I will come here and say right and again it's going to be two pieces our content which includes our inputs and there will be two menu here first one will include our publish button and upload image button and second one includes our categories that we can choose let's do that I'm gonna open right let's give our class name quickly and inside again I will say content and menu and inside this menu we are going to have two items item one item two contents I will give some much in between Nail Bar and this page is going to be display flex and gap between this content and menu will be 20 pixels I will say content again Flex 5. and menu will be Flex 2 and I'm gonna separate those images display Flags Flags Direction column and cap between them will be 20 pixels like that by the way there is something wrong here that because its class name is exactly the same name with our component let's change this it's going to be at okay perfect so let's create our inputs inside this content I'll say input placeholder will be title and we are going to have a text area for our description that I want to use here a rich text to do that we are going to be using this library and it allows us to add some spaces let's check here as you can see there are some spaces or we can make them bolt for example we can increase font size we can give some links and it's going to be much more effective instead of writing a plain text here so let's import this Library I'm going to open my terminal yarn at react Queen and let's see as you can see we are going to have a use State here and when will we change anything inside this editor it's going to change our value let's import them I will come here and import and after title I'm going to create my container and I'm going to add this editor like that of course I shall create this State here like that and let's see how it works I will say console log and value I'm going to open my app right and as you can see it's here and I'm gonna write here something and as you can see it's here and inside P tag I can make only here bold as you can see or underscore italic or I can give some space as you can see it adds automatically all those spaces it works perfectly so I'm going to play this and what about this menu for the first menu I will say H1 tag and publish I'm gonna create two span status let's say draft and one more usability new scrubby public of course we are not going to create those functions but maybe for the feature we can update our app and not else we are going to add here an input and it's going to take care of our post image we can choose here any image but it doesn't look good what I want to do is to add here a label and html4 will be this input ID let's say file and here file oops it already has here ID I forgot I didn't see it and let's write here upload file or image so if I come here and say Style display known as you can see that button is not here anymore but if I click on this text it still opens my folder basically this label represents our input okay and after this I'm gonna create buttons and it's going to include two button first one will be save as a draft and one more it's going to be update like that and what about second one I will say H1 category and let's say input is going to be radio and name will be category our group name is category and value will be let's say art this is our first category here that's showing this a little bit and I'm going to give you here ID is going to be art again I'm giving ID because we are going to do exactly the same thing we are going to give a label here and it's going to represent these input and I will say art like that let's do the same thing for others like that okay let's take care of this site it'll come back here inside content I'll say display Flags column and space between them and we have an input here I'm going to give some padding I'm going to change the Border it's going to be one pixel solid and light gray like that what about this side as you can see its height is really small here to prevent this I will just come here and write editor container and height will be 300 pixels and I will say overflow screw this container and if I give here a class name let's say editor and if I say height 100 and I'm gonna delete its border as you can see it ends here but we don't have any border here let's say border one pixel solids and light gray and perfect I want to give same border for those menu items I will just copy this and I will say item and make some padding inside like that what I want to do is to give same height for this first item and second item we already set for the Xbox so if I come here and say Flex one their size will be the same okay let's make those items vertical you already know how we do this and I will say justify content space between so I'm gonna separate those items like that we are going to handle this input and this label but before I will just say font size 12 pixels and color will be this color okay what about H1 tag font size will be 20 pixels and for this label I will say text decoration underline actually I shouldn't say label because they are labeled also let's come here and give different class name and it's going to be 5. and I will say cursive pointer like that now for those buttons buttons to you is going to be horizontal and justify content will be space between so they are going to be separated what I want to do is to give different style for this button and for this button how we can do this we can basically give here different class names but I want to show you how you can use first child and last child I will say first child we choose our first button it's gonna be cursor pointer color will be teal background color will be White Porter one pixel solid and teal and I'm going to give some padding three pixels and five pixels and I will duplicate this but this time it's going to be last child or you can use here ADD child and you can say tool which is second element it's exactly the same thing so background color will be teal font color will be white like that perfect let's take care of those categories actually I should come here and wrap each elements with category due like that and I will say category display Flags align item Center and cap will be two pixels and text color will be teal like that as you can see right now it looks pretty nice and we can choose any category here okay perfect so we have login page register page right page any category here it's the home page at the same time and we can see any individual post here if I missed something I'm gonna update but right now let's create our backend server to do that I will close everything here and this client side and I'm going to open my terminal let's close here for now and open up API folder and I'm going to initialize my not application I'll say npm init Dash y as you can see we have package Json here we are going to have index file let's create and we are going to add some libraries right now firstly we are going to need Express server npm install or yarn add Express we are going to be using MySQL and not mode I will enter I'm going to pass here a little bit faster that because I've already explained in the previous video if you didn't watch that video I highly recommend you to watch it because I just recapped how to create an Express server and how to connect to a MySQL DB how to create new schema how to create new table how to get update and delete items if you watch that video everything will be much easier it's around 40 minutes but if you skip to react design Parts it's going to be just 20 minutes or something like that so it's not that long you can watch it and come back so I will say start and we are going to start our app using mode index.js and of course type will be es6 modules so we can import our libraries like that Express Chrome Express let's create our app Express function and add Dot listen I'm gonna listen this port number when we connect to rtb I'm just going to write here connected and if you remember we should use express Json function here otherwise we won't be able to send any data to our DB and that's all I think let's run our app I will say yeah I'll start start and as you can see connected so let's create our MySQL connection to do that I'm going to create here a new file let's say DB of course you can create your connection here but I want to separate this connection that because we are going to use this everywhere when we create our route you are going to understand better so I will say import MySQL from MySQL I will say export cons DB and MySQL create connection and I'm gonna write my configuration we are using local machine to run our MySQL DB so host will be localhost my user is root as I said all those informations in the previous video password will be my password number one two three and we are going to create our DB and it's going to be block let's do that I'm gonna come here and I'm gonna create a new schema and it's going to be block I will apply it's successful and let's create our first table I will click here tables and create a table and first table will be user firstly we are going to have an ID is going to be primary key and I'm going to also increment this number and it's going to have username not null it cannot be null and email again but I want to increase this limit 255. and we are going to have password again it cannot be null and others it can have image for example not like that and I'm going to leave this empty what else we can need it's enough I think let's create I will apply let's see user select all rows and as you can see they are here of course we don't have any user yet so I'm gonna create second table and it's going to be posts by the way it's going to be users not user so I will say alter table and name will be users okay so I will come here it's going to be ID again primary key also increment and it's going to have a title not now we are gonna have post description let's make this thousand for example not now and image image URL by the way guys in my videos time to time I see this comment how we can upload our images to mongodb mySQL DB and the answer is we are not uploading any image or any file into database we are uploading into our server or any Cloud Server and we are taking the URL and pasting inside this table row so it's gonna be string and others we are going to have a date when we create any post it's going to have a date and one more thing we are gonna need here we are gonna have here a user ID it's going to be an integer so it's going to be our foreign key I'm going to come here it's going to be uid reference table will be our users table and I'm going to choose uid here and there are some options here basically we can choose the option that when we delete any user delete all posts of this user or if you want to you can just delete user and post scan and stay I want to delete its posts also so I will say Cascade let's apply okay it's ready let's choose our users and I'm gonna add a new user here let's say test I will apply okay let's create a post but remember user ID is one oops select rows it's going to be one title description image it can be any date here and user ID will be 1. I will apply okay it's ready and what I want to do is to delete this user I will come here and delete row I will apply as you can see we don't have any user anymore and if I come here and refresh my posts as you can see it has been deleted it works like that okay after this quick recap let's create Our Roots I will come here and roots and firstly we are going to have authentication root that we can log in and register and after that we are going to have users root and posts if you remember from the previous lesson we can make API requests using App get and any endpoint here test and we were taking request response we were sending a response to user let's see it works so if we go to localhost an API port number and endpoint which is test and as you can see it works so instead of writing all routes here we are going to separate them using this folder and when we try to reach our posts we are going to use this route so basically I will wait here and let's open for example this one I'm gonna import Express and I will say cost router and express router function and using this Rudder we can make any request for example for the main URL we are going to take request response and we are going to send this is post and of course we should export our router here and I want to use this router inside my index page let's say import post roots and I will come here and I'm gonna say app.use and we are going to write here any endpoint let's say API and posts and I'm gonna use my roots here so basically if I go to localhost 8800 API posts and for the home page of these posts we are gonna see this message actually that's right here test so I'm gonna come here and say API posts and test and as you can see this is post it works like that but I don't want to write all those operations here I want to separate them also so I'm going to create one more folder here and it's going to be controllers oh pause controller and user controller so basically we are going to make all crude operations inside those controllers for example then we want to add any post I will say post for example and we are going to take request response response dot Json from controller so instead of writing my operations here I'm just gonna call this function add post that's all of course it's gonna be dot jazz okay let's try again I will refresh and as you can see from controller it works basically folder structure will be like that our routes and controllers and we are going to manage them using index file let's do the same thing for others authentication roots user and post let's write down here like that of course there is an error because we don't have them yet I'm gonna come here and let's delete this and I'm gonna copy here and paste for others okay perfect so what I'm gonna do firstly I want to be able to register to our app so let's come here and create our first suit I will say rather it's going to be post method that because we are going to send our user information and endpoint will be registered and let's open up our controller export const register request response and one more and it's going to be login and also we will be able to log out we are going to make this operation in the backend server that because we are going to be using cookies and that's all I think so I'll say register function login function and log out .js don't forget this register login and log out they all are post methods okay let's close everything here and open up our controller what I'm gonna do let me try to register firstly we are gonna check whether we have the user with the same email or username check existing users to do that let's create our first query I will save const query select items from users table and my condition here email equals question mark or username equals question mark and let's create our query we are going to call our DB let's import this import TV from DB okay I will say query and we are going to pass here our query and we are going to add here our values our email and username and how we are taking them remember we are using request body email request body and name basically we should pass here whatever we signed with question mark and after that it's going to return us and error or data if there is no error it's going to return us a result and we are gonna check if there's an error just return response Json and this error if everything is okay it means we already have this user inside our DB so we will not be allowed to create a new one so I will say if data dot length it means if there is a data return response we are going to assign a status 409 if I remember correctly it means data is already exist so I will say Json user already exist okay and if there is no user in RDP we can create our user but there is one more thing we should consider and it's our password if user sends password as test we shouldn't write here test directly we shouldn't store this as a plain text so what we are going to do is to encrypt our password to do that we are going to be using a library called the creep.js let's see as you can see this is how we can encrypt our passwords we are passing what we are taking from user and it returns us a hash password let's do that I'll say hash to password and create a user I will paste of course I will make the const and this is going to be request body and password let's import pcrypt by the way okay oops okay I forgot again this Js if you are importing your modules don't forget this extension it's really important and after that we are gonna insert our user to our DB let's create another query and it's gonna be insert into our users table and what we are going to insert it's username it's email its password values will be question mark let's say const values our username will be request by the board username is going to be email but we are not going to use this password we are gonna use this hash password let's call our DB and query we are going to pass our query and our values and it's going to return us either an error or data if there's an error just return this if there is no error return response status is going to be 200 which is successful and Json and let's send our message it's going to be user has been created let's try we can try this using Postman or I don't know let's create our register function quickly we don't need to waste time I'm gonna come here and what I want to do is to create my input here const inputs set inputs and we are going to be using use straight hook and we are going to store our user information here username is going to be empty email password at the beginning they are going to be empty but whenever we change our inputs here we are going to set our states again to do that let's create here a function closed handle change and it's going to be our common function so I will say on change methods and handle change for other inputs I'm going to paste so how we are going to set our inputs I will say set inputs and remember to use State video it's a really important video guys if you didn't watch it you should definitely check it includes everything you need to know about use statehook and in this video I've showed how to set multiple inputs in one function so I will say previous and we are going to return everything inside our state but we are going to change event Target and name and it's going to be your end Target and value of course we should give here input names so it's going to be username email and password let's see I will say console log our inputs and I'm going to open my client site and yeah start let's close here and I'm going to open up register page oops by the way something is wrong with this background we are gonna handle this later but for now let's see how it works as you can see it's empty for now I'm Gonna Change here and as you can see it's here foreign it works like that so we have our inputs and we are ready to send to our endpoint so I will come here for this register button I'm going to create on click event and it's going to be handle submit const handle subnet I will say to end prevent default otherwise when we click on this button it's going to refresh our page to prevent this we are using this function and of course it's going to be an async function not because we are making an API request and to make this request we are going to need one more Library CD client and it's going to be axios it allows us to make our API requests it's a really useful Library probably you already know so I will say because response await we are going to await this operation I will say axios post methods and I'm gonna write here my API URL by the way let's import this axios and I'm going to write here localhost 8800 authentication endpoint but writing this long URL again and again is not a good idea so I will come here inside package.json and here I'm gonna say proxy and my URL localhost port number API and that's all of course after doing this you should restart your application I'm gonna trade this again and we have URL right now I'm gonna specify my endpoint and it's gonna be false and register oops like that and I'm gonna pass my inputs of course you can use here try catch block and if there is an error let's show it here first and let's show our response I'm going to open my console let me make this bigger and here and I'm gonna write let's say test test and test I'm gonna register and as you can see we have a data here and it says user has been created let's check our DB I'm gonna refresh here and as you can see it's here and our password is not test it's this encrypted password perfect what if I try to register with this same username I will register and as you can see it returns us this error and insight response and data it says user already exists so we can use this data instead of console log I'm going to create here error state error at the beginning is going to be null and if there's an error is going to be error.response dot data this path and after that I'm going to write here a condition and I will say if there's an error show this error here I will register and as you can see it's here perfect and if everything is okay I want to be redirected to login page so I can delete this response and I'm gonna use react rather Dom use navigate hook so I will say const navigate use navigate and I will say navigate to login page let's see test two I will register and as you can see we are in the login page perfect so I'm gonna do the same thing for login page I will copy here and open up my login page here this time we are not gonna need email I will delete I'm going to import new state use navigate and if there's an error show it here and on click event handle submit quickly let's give username and password name and on change metal tissue it's going to be handle change let's import axios and that point will be login this time we are going to pass our inputs it's exactly the same thing and if everything is okay we are going to be navigated to home page and that's all it's ready let's take care of our controller here and again firstly we are going to check if our user exists or not I will say const query select from users table where username equals question mark I'm going to use DB query and I'm gonna pass here request body and username error data if there is an error we are going to return it and we are going to check one more thing it's gonna be if data dot length equals zero it means we don't have any user with this username in RGB so we are going to return another error so I will say return response status 404 and we are going to say user not found and after that if there is no error and if our user exists we are going to check our password that because in our app again we are going to send here a plain text and we are going to compare this text with this password let's see how we can compare as you can see we are going to use this comparing function and we are going to pass our password here and we are going to compare this with the password in our DB let's do that I will say cross this password correct and it's going to be this function request body and password and this is going to be the password in rdb if you remember we have a data here but by default it returns us an array not only our user object so we are going to use the first item of this array which is our user and its password and I'm gonna write here my condition if our password is not correct return another error response status let's say 400 and I'm gonna say wrong username or password okay and after that if everything is okay finally we are going to be logged in but we are not going to send our user information and support this in our local storage or something if you watch my JWT video you are gonna understand why you should use Json web token it's really important that because after this authentication we are gonna try to update our posts or delete our posts but before updating and deleting our application has to be sure that that post belonged to us we are not supposed to delete or update any other users posts to provide this security we are going to be using Json web token I'm gonna come here I will say yarn at Json web token let's start again let's import this import JWT from Json web token and let's create our token here I will say const token equals JWT DOT sign and here we should send a user information that identifies us once we have unique here we have user ID we can use it so I'm gonna send here ID and it's going to be user dot ID basically we are going to store this token in our cookie here and then we try to delete any post our application is going to check our Json web token and since it includes our user ID our application is going to say okay this token user ID is exactly the same ID in the post we don't have any postpart when we add here we are going to add our user ID and if they match it means we are the author of this post so we are allowed to delete it it works like that okay and also we should provide here any secret key I will just say JWT key of course you can generate a random secret key and you can store it in your Emmy file but for now it can stay like that and after that let's return our user information and send this token as a cookie so I will say response Cookie by the way to use cookies we are going to need one more Library so I will say yeah add cookie parser I'm going to start my app again and I'm going to open index file and right here one more middleware and it's going to be cookie parser of course I should import this import cookie parser from cookie passer like that okay response cookie and cookie name will be access token now we are going to set our token here for the extra security I'm going to say HTTP only and it means any script in this browser and this application cannot reach this cookie directly we are gonna use it when we make only API requests okay I will say status 200 and Json will be our data but if you do that it's gonna send all information of our user including this password it's a hashed password but even if it's hashed we shouldn't send our password like that so what I'm gonna do is coming here and taking only specific information from our data so I'm going to separate this password and other information and I'm gonna send only this information not password I hope everything is okay Oops why there are commas here it's going to be request by the username return let's try actually I will say test test I'm gonna log in okay user not found oh it's test two and as you can see we are in the home page and if we check our cookies you are gonna see that our access token is here and this hashed token includes our user ID okay perfect but also we should store our user information into local storage that's because we are going to use it in our Network or if we check any post here we are going to check our user ID to show those buttons and when we write any of new post we are going to use our user ID so basically we are gonna need our user information in any component so we have to store this in a common place to do that you can use any State Management tools like Redux but we don't need it here I think because we are not changing our user State all the time we will just log in and log out it's better to use here react contacts API let's create here new folder is going to be context and auth context so I will say export const context I will say create context from react and after that we are going to create our context provider while we are doing this that because as I said we are going to need our user information in multiple components in this now bar in this right page in this post page so we are going to store our information in this context so if we create here a context provider and wrap our application with this provider we will be able to use our user State anywhere in our application so I'll say export const context provider and we are going to pass here children it represents our components that we want to wrap with this context provider in our case it's going to be our app component and inside let's create a state I'll say const current user Set current user and it's going to use State hook and what I'm gonna do is to check my local storage first if there is a user inside this local storage we are going to use it if there is no user it means we are not logged in so it's going to be no to do that we are going to use localhost.get item but everything we store inside this local storage is a string but I want to transform this into an object to do this I'm going to use Json parse um local storage get item and item name will be user and if there is no User it's going to be no so instead of this API request in our login page I will just cut this and create here a login function cost login async function we are going to take inputs like that and it's going to return us the response like that and after that we are gonna set our current user man it's going to be response dot beta something is wrong here I forgot this bracket okay let's import axios and one more function we can write and it can be log out we don't have any endpoint yet but let's write it in advance and our user will be now okay so we have current user here but how we can update this local storage each time we change this user basically we can use use effect here use effect hook and whenever we change current user yeah I'm gonna update our local storage so I will say local storage set item and item name is user and this time we are going to transform our object to string a current user like that and finally yeah I'm gonna return our provider all the contacts dot provider like that and we are going to pass here our children which is going to be fjs and we can pass any state here we are going to pass our current user we can pass here any function like login and logout by the way double curly brackets it's a prop so basically we can use these functions and this state in everywhere in our app of course we have to wrap our application auth context provider I'm gonna wrap my app let's try I will come here and say const let's try to get our current user I'll say use context and our auth context let's see console log current user and as you can see it's now by the way if you are wondering why it rides here double null you can watch my use effect video I explained how these strict mode works and you can learn how to use use effect properly but anyway as you can see it's now right now I will say test two I will login and if I go to login page again foreign of course we didn't call our login function here let's delete here and I'm gonna say login function and we are going to pass our inputs remember in login function we are taking inputs and making these API requests and of course it should be the weight I'm gonna login again pass to test and this time we have this user perfect so using this current user we can update this now bar let's open up never and we are going to be using this context again let's import them and we are going to call current user and I will say instead of John if there is current user write its username like that perfect and we can write here a condition if there is a user we can show this logout button and then we click on this button we can call logout function and if there is no user we can just write here a link so I'm gonna come here and say condition if there's a current user show this span if there is no write here a link class name link and it's going to be plugin now we are going to go to login page like that so when we click on this logout button we are going to call logout function and it's going to make our current user null and at the same time we are going to be logged out in our backend server let's do that I will just say response clear cookies sorry cookie and my cookie name is going to be access token and I'm going to write here some configurations it's gonna be same site and none and I will say secure true and after that let's say status 200 successful Json user has been locked out let's try I'll log out as you can see it's null let's check our cookie and it's gone let's login and access token is here and user is here perfect it works properly so we have finished our authentication let's take care of our posts let's close everything and open up our posts root let's use our router get method and we are going to fetch all posts and we are going to add here our controller function but before let's create others we are going to get a single post using its ID we will be able to create a new post delete a specific post using ID and update like that let's create our controllers we have ADD post here I will say get posts get a single post add post to a post and update post okay let's call them here get all posts single post add post delete and update okay I can close here and let's create our query here con query select all from Posts but there is one more thing we should consider and it's our categories if you remember when we click any category here it shows us this query and using this query we can make any other API request so basically we are going to check if there is a category query here or not if there is they are gonna fetch all posts that includes this category by the way we didn't create any category here let's alter table and I will say category and it can be now I will apply okay if you want to you can create categories table but we don't need here in our application we can just write directly as a string okay so how we can reach this category query it's really easy we can reach it using request query and the query name basically query is everything after this question mark and we can specify which query we want to take and it's going to be this category and I'll say if there is a category select posts but right here aware condition and its category will be question mark and if there is no query just choose all posts without any condition let's write our DB here we have to import db.js foreign for this question mark we are going to write request query dot category error or data if error just return it respawn send or response Json doesn't matter and if everything is okay status will be 200. um yeah let's add this data let's use this I'm gonna go to home page and if you remember we were using this dummy data I will just comment this out and I'm gonna create Post State I will say const posts set posts use statehook and empty array and I'm going to use use effect and let's say const fetch data casing function and let's say try catch block that'll just console lock this error if you want to you can create a review state and write it somewhere here and const response we are going to await our API request and get methods and the endpoint will be posts and after that if there's a response we are going to set our posts it's going to be responsible data and finally we are going to fetch our data like that we are creating here a function that because by default we cannot Create a Sim function using use effect as you can see so you have to create a function and call it like that okay I will save and let's see I will go to home page by the way we can add here a link where is our logo here I'll say link and one page okay as you can see we don't have any data yet let's copy this image URL and let's create a post here but we have to give a proper date here because it's not null I will just delete this for now that because it's hard to write by hand so let's create our first post first post hello this image URL I'm Gonna Leave This date empty and user ID will be four and category will be let's say art I will apply okay let's see I'm gonna refresh the page and it's not here let's see our error here okay it says there is no posts okay the error is here oh because of this extension again our app was crashed and one more there is no router update of course it's gonna be put methods there is nothing like update methods I'm sorry let's check okay it's connected let's try again I will refresh and it's here perfect it works so if I come here for science we still see this post that because we didn't send our category let's see home page as you can see but how we can reach this URL here it's really easy we are going to be using Create router Dom const location use location hook and let's see what we have we have a path name we are in the home page but we have a search property here and it includes our query so basically we are going to send this search property so let's say actually category use location dot search and we are going to use this category here let's use it like that category let's see right now as you can see it's empty but if I click on art okay it's still empty that because we didn't provide here our category so it means whenever we change our category it's gonna fire this function again and again let's see right now science is empty and art is disposed perfect so what else we can do when we click on this post we should fetch this post and also those recommended posts but there is something important here we should also fetch this username but it's not in our post table here how we are going to do this to do that we are going to use MySQL features let's open up single page actually we are going to do exactly the same thing I will just copy here and paste here and it's going to be post new state at the beginning add the object and instead of category I will just say location like that use effects axios okay it's gonna be posts but remember we are sending our ID here post ID but how we are going to reach this ID of course using use location hook we have already seen it we have a path name let's delete this but this location shows post and its number but we are going to need only this number to reach this number basically we are going to use JavaScript split I will say post ID location path name a split method we are going to split this text using this slash but we have two slashes it means we are going to have three items this localhost this post and this number so we are going to take the third item it means it's gonna be index 2. that because in Array it starts from zero zero one and two okay we have post ID right now we can pass it here post ID and it should be our dependency of course and right now instead of this image is going to be passport image let's give here question mark So if it's loading it's not going to give us any error I'm going to say pause dot username of course as I said we don't have any username here but we are going to join this user table into post table and we are going to show our username and it's going to be our post date but how we are going to show it like that two days ago one week ago basically we are going to use moment Library let's come here yarn at moment let's import this and I will say moment and I'm gonna pass here post or date and from now so it's going to show us the difference between these dates and the current date and what else of course you should see those buttons only if you are the owner of this post so we can use our current user here I will say come current user use context or context and I'm gonna write here a condition I will say if current user dot username equals post dot username show me this div and as you can see it's gone that because we don't have any post yet but let me show you are going to see that our buttons are here okay and what else is going to be passport title description post dot description but if you remember we are using a reach editor and it already has a P tag so we don't have to use it here like that and that's all I think let's come here and fetch our data let's give some space between them so I'm gonna write my query and it's going to be select what I want to return here I want to return username post title description image it's category and date and I want to use here two different database so I will say from users and I'm gonna give here a shortcut it's going to be you it represents these users and I'm gonna join here our posts and it's going to be p and I'm gonna write here my condition I will say on users dot ID equals P dot user ID and one more condition here post dot ID will be question mark basically we are gonna find our posts using this ID which is one and after that we are gonna look inside this post and using this user ID we are going to find our user and we are gonna take its username it works like that let's create our query DB dot query and we should pass here our post ID and it's going to be request params.id what's these params basically this ID in our URL and after that as always give error return response status 200 and Json these data but we are fetching only single item as I said it returns an array so we are going to return on the first item which is our post let's see I will refresh okay it's still same oh of course it's not JavaScript it's gonna be equal and by the way there will be a problem here that because we have image here but we have image in our users also so we have to specify which image we want to take so I will just write here post dot image and as you can see it's here at the same time we are able to see our buttons here U dot image but since the their names are same I want to specify here different name as user image so if I come here and say post dot user image okay like that and perfect it's now so we can write here a condition if there's a postdoor user image okay awesome so right now we can delete our post so I will come here and on click and handle delete let's create this function handled weight async function I'm gonna copy here and delete methods and it's going to be posts and our post ID and after that we don't need response here we are going to be navigated to home page of course we are going to use use Navigator hook let's create this I'm going to come here and delete my post but before as I said we have to check our Json web token if we don't have any Json web token here in our cookie it means we are not authenticated so we are not allowed to delete this post and also even if we have a token we have to check if this post blocks us or not let's do that firstly I'm going to take my token request cookies access token and I will say if there is no token return response status 401 and Json not authenticated authenticated okay by the way for other errors we are not returning any status let's turn 500. okay and after that we are gonna verify our Json web token if it's a valid token or not I'm gonna import Json map token using JWT and its verify function we are going to send our token here and our script key remember JWT key and it's going to return as an error or our data remember when we log in we are sending this user information which is our user ID so we are going to take this here let's say user info and that's right here error condition if there is an error response status this time it's going to be 403 and it's going to say okay you have a token but it's not wallet and if it's valid finally we are going to delete our posts to do that I'm gonna take my post ID first it's going to be request params dot ID and that's right our query I will say too late from posts where ID equals question mark but also user ID should be our ID which is inside this Json web token and it means if user ID is not our ID we are not allowed to delete this post so I will say DB dot query I'll pass it here and I'm gonna send firstly this post ID secondly our user ID let's say post ID and user info dot ID again user info is this object if I say user info dot ID it's going to give our user ID here and after that hello data if there is an error I will say response status Row 3 and I'm gonna send a message and I will say you can delete only your post it doesn't block you and finally if everything is okay Json post has been deleted I hope I didn't make any mistake let's try I will refresh I'm gonna delete and we are here perfect let's create other post here I will refresh first user ID will be 5 for example of course it's going to give an error that because we don't have any user like that let's create five other user any number here doesn't matter foreign right now let's create okay it's here and as you can see we cannot see those buttons but even if we see let's come here and open up those buttons single page okay here I'm gonna comment this out for now they are here I will delete as you can see it's still here by the way it says there is no image we didn't add any image okay let's take this back um yeah I'm gonna fetch those items but as I said it's going to recommend those posts according to our main post category so basically we are gonna send here our category so it's going to be post dot category of course we don't have yet let's say art again and another one four and let's say food and one more test three and it's going to be art again I will apply sorry I forgot this okay so its category is Art right now let's click as you can see two items so we should see all art posts here so I'm gonna go to menu here and I'm gonna take this category let's comment this out and we are going to do exactly the same thing I will copy here and paste here we don't need this use location we already have our category here let's import them axios and the category name will be this category and as you can see it's here perfect test and test three if I come here about that foot as you can see only this item perfect and let's take care of this right page we are going to create a post let's close everything and open up right page okay this is our description we are gonna need a title and also we will be able to add any image so it's going to be which of course we don't have yet and one more is going to be our category of course you can create only one inputs here and you can set them in one function but let's create like that I'm going to show you different methods so I'm gonna set my title it's going to be event Target and value for our file here on change again I'll say set file where is our file okay I said in which let's say file or image doesn't matter actually and it's not going to be value here is going to be files of course we are going to upload only one file so it's going to be first file and for those categories actually we can create different components for these categories to prevent writing on change method again and again but anyway let's write it set category it's not that important for now we just focus on how to communicate with mySQL and that's all I think we have all our items right now so let's create on submit method by the way it says update it's going to be publish and we are going to write here a condition when we try to update any post it's going to be update but then we write a new post it's going to be publish we are going to write it later let's create here on click methods and I'll click or handle submit prevalent default is going to be an async function foreign we are going to upload our image to do that you can use fire storage cloudinery or any other cloud service but for this tutorial let me show you how you can upload your files inside your server I'm gonna go to index file and here we are going to create one more root and it's going to be upload and to upload our files we are going to be using malter let's install this and let's see how we can use it I will come here again at malter and start again and let's import this like that and let's see as you can see we can create any destination and basically it creates here a folder which is upload and it uploads all files inside that folder we are going to make something different but let me show you how we can do this I will come here and destination will be uploads folder and we are going to add here our endpoint let's say upload and we are going to be using this upload here and it's going to be a single file and its name will be file which we are going to send here right now and after that it's going to take request response and return response status 200 image has been uploaded let's see let's create here upload image function upload is going to be async and try catch block and to upload any file firstly we should create here F1 data so I will say closed form data new form data and inside this data we are going to pass our file to do that we are going to use append methods and it's going to be a file and we are going to send our file here and this name is exactly the same name here so basically we are going to pass our file and after that let's make our request const response weight axios post method is going to be uploads by the way I forgot here API I have to write this that because in our proxy remember we are using this endpoint import axios from axis and let's see what we have response data and we are gonna call this function here of course we should pass here our form data let's see I'm gonna choose any image here and publish and there is an error here okay it says there is no folder like that it should be like this I think let's try again image has been uploaded and uploads as you can see our file is here but as you realize it doesn't include our extension it's not an image but if I change this to PNG for example as you can see it's here but how we are gonna add our image name to do that we are not going to use destination instead we are going to be using multi storage as you can see it allows us to give any specific name and instead of destination we are going to be using this storage let's do that I will copy here and paste like that and it's going to be storage and our storage actually they are same name so we can leave it like that as you can see it gives this strange name but we are not going to do this we are gonna take file dot its original name but if we do that then we upload the same image with the same name it's gonna overwrite our image to prevent this it should be unique to do that we can use date dot now so it's going to give us a unique name and what about our folder again we can make this uploads folder or even you can say go to client site public and upload so it's going to upload everything here and finally of course we are not going to send this message that because we are gonna need our URL image URL so instead of this message we are gonna send our file dot file name I will publish file is not defined of course we didn't take our file request.file by the way let's create our folder here let's see I'm going to choose my image publish and as you can see this is our path and let's check and it's here perfect it's exactly the same name so we can add this URL to our DB okay so what I'm gonna do is to take this title description and category and send them to rdb I will come here and I'm gonna say const image URL equals upload of course it should return us our URL like that and I will say try catch block so what I'm gonna do as I said we are able to write any new post and also and also when we try to edit any post we are gonna see this page also but with this edit query so using this query we can decide whether it's a new post page or updating post page basically if we are in the single page when we click on this button we can also send this post to our edit page how we can do this let's open up single page and as you remember we have a link here and also we can send any state here and this is going to be our post to reach this data we are going to come here and say const state use location hook and State and I can write here a condition if there's a state use its title if it's not it means it's a new post page so it's going to be an empty string so I can do the same thing for others or empty stay Dot category or empty I'm not writing anything here that because state DOT image is a string but it should be fine okay let's see I will come here and say value is going to be title we already have here value and for those categories again it's a good idea to separate this component but anyway I just regret but I'm too lazy to change it so basically we are gonna check our category and if it equals our category name it's going to be checked so let's change those names I'm gonna come here edit and as you can see it's here and its category but if you try to write knee post as you can see it's empty perfect so what I'm gonna do basically I'm gonna write here a condition I will say if there is a state it means it's an update page so we are gonna call axios dots put methods posts and I'm gonna add here my post ID which is State DOT ID I want to check something here single post okay we are not sending here post ID let's send it pause dot ID otherwise we won't be able to use this ID okay and after that we are going to pass here our title description will be our value category and image will be if there's a file image URL if there is no it's going to be an empty string and I'm gonna do the same thing for other condition if there is no state is going to be post methods posts we don't have to specify any ID here title description category and image and also we are going to add here a date we cannot directly use date dot now that because in MySQL it should be a certain date to do that again we can use moment I will say date dot now and its format will be year month day of course inside code hour minute and second I couldn't import this okay and if everything is okay we are going to be navigated to home page but for now it can stay and we can check whether there is an error or not and let's come here and create new post again I'm gonna check this token if you are not logged in of course we cannot add any post if everything is okay I can create my query here and it's going to be insert into posts we are going to have title description image category date and uid and values will be question mark let's write our values we are going to be using request body and our items and also for our ID we are going to be using our token if you remember it returns our user info which includes our user ID let's run this query DB dot query values error or later if there is an error we will send it if there is no return response Json post has been created what about update post actually I will copy here and paste like that this time we are not going to need any date and I will say by the way I said inset it should be insert okay I'm too tired to continue I think after this I'm gonna take a break I will say update posts and we are gonna use here set key actually let's do it here and what we are gonna set our title description image and category let's write here our condition where we are going to provide our post ID and also uid and it allows us to verify our identity so we are gonna set those items update them and also we are going to pass here our post ID that's right here post ID request params dot ID like that and also user info dot ID and post has been updated I hope everything is okay let's try I'm gonna write from react new test I'm going to choose this image design I will publish let's see okay it's here but we don't have this image that because let's open home page as you realize we directly give our image property like that we should try it here uploads pause image sorry like that okay it's still not here that because it returns objects oh I forgot here writing await let's try again last test I hope let's choose this cat picture art and publish let's see and it's here Perfect by the way one more thing here as you can see it shows those P tags also to prevent this you can use dangerously set inner HTML but I recommend you to prevent this it can cause some security problems instead I'm gonna create here a function post get text and we are going to pass here our html text we are going to take our documents new Dom parser it's not that important you don't have to worry about this part I'm just showing you how to show this HTML texts without causing any security problems so I will say pass from string and we are going to pass here our html text and it's going to be text HTML and finally okay I'm gonna return document body and text contact let's take this function and paste here and I'm going to pass my HTML tags like that as you can see perfect and I will click here we have exactly the same problem here that because we don't have our image path here I'm going to say upload and this image perfect and for this menu foreign let's take this function and paste here our description like that okay perfect what about editing I will say updated updated tests and it was Art it's going to be science let's change this image I will publish let's see and as you can see it has changed perfect it works after those operations we can go to home page navigate and home page cones navigate to and that's all I think we can log in register fetch our posts we can add new one we can update and delete if we are the owner of the post we can log out we can fetch data according to category and that's all I think if I forget something please let me know in the comments and don't forget that I just prepared those applications in just couple hours so I'm not providing you any complete application I'm giving you only the tutorial so if there is any error don't worry don't get crazy just share in our Discord or Facebook groups in my social media accounts and it's a good challenge for you to debug all those bugs and you can add new features for example we can upload file here but when we register we cannot upload any image we can now see our image here what you can do you can create here new file new upload file and you can export this and when you register you can do exactly the same thing you can add any image and what else you can maybe add different categories you can create here different table and as we did here for the user you can say category ID and you can separate your categories and your posts and there are many things that enhance for example we don't have any update user page we didn't create any crude operations we can only log in and register but we cannot delete or update our users you can do exactly the same thing for users seriously there is nothing different just try to handle that and share with us in our social media groups and that's all I hope you liked it if you learned something new today please like the video you can support lamade by joining to Channel or using the link in the description below I hope I will see you in the next tutorial goodbye

Channel: Lama Dev

Views: 203,107

Keywords: react, react app, react project, react blog, react website, react blog app, react mysql, react full stack, full stack app, mysql node.js app, real world project, blog application, jwt, cookies, rest api, node mysql rest api, mvc

Id: 0aPLk2e2Z3g

Length: 143min 18sec (8598 seconds)

Published: Mon Sep 26 2022