Master MERN Stack with BLOG App | Build a Full-Stack Blog App using MERN (Mongo, React JS, Node JS)

hello everyone this video is about black app so we will Implement a lot of functionalities in this app and it will help help you this is AI value I used the modern stack okay mongodb react.js expressed in node.js so first of all let's this is the demo that we will perform in this video These are the functionalities okay so first of all we will create a memory card let's log out from the system so first of all we will create a new record okay using registration okay we will register a new record after that we will use login to the login logout log into the system whenever we logged into this to the system for example let's login also I used to Hash the password in also token generation I performed all these so let's login whenever I logged in so we see the registration login has changed to logout and also the create button has added for that okay the one who is not logging he cannot create a post so for example I would like to edit or delete this post I will present this one okay this post I cannot edit and delete because this post is not done by me okay this post is done by another user user this post is done by me okay let's move to it see I can edit and delete this post because this postage was done by me I created this post so if I want to edit it so let's press the edit I would like to edit updation I will just add this one okay I added these two a few things let's update you see that has updated if I want to delete it I can delete it see that has deleted and this post is not done by me I cannot edit and delete this one so let's log out now from the system if when I log out now I will log in as a second user user ID Gmail .com five let's login so if I move to this post so now can I edit and delete this post because this post was done by user so it is all about this um black up that we will upload files we will register accounts and we will log in and we will perform uh password hashing in the token generation and also different users and to post to post a record edit that delete that we will perform all these functionalities in this one video so let's get started before starting if you are new don't forget to subscribe it and like this video and support me so let's get started so for this blog post so first of all I will create react in server app so I have created an empty folder by the name of black app so now let's create one another app for our server side okay so let's create name it server opened created server and let's open the terminal and let's move to the CD server inside that let's install npm init type and Y so it will just initialize it and it will just create a package.json file inside this and after that let's install a few packages in PM install Express which is the framework of node.js Mongoose which will be used for the mongod database course which will be used to access our API in a front-end nerdmont which is used to refresh our server side app automatically whenever we make some changes and also something what else we need Big Crypt to use it is used to just a hash our password in Json web token it is used to for authentication purpose for the security and another packages would be that is Cookie parser which will be used for the cookie handling and motor and part these two are used for the file uploading so let's install now for now these okay let's press enter so these will be installed right now yeah the packages has installed successfully okay so now let's create one another file inside this folder that would be like index.js in this file we will like our backend our server-side code so it was all about creating our server side app so now let's create our front end app so for the front end let's come here back CD yeah we came to the black app folder so here I will write npm in it uh wait okay if it is used to create react app this is the new method we don't use create active but we are using which instead of that because it is passed so let's assign a project name let's sign client and let's select framework react and let's select JavaScript and after that let's move CD to the client folder and after that light NVM install it will install the dependencies let's wait for it yeah the packages has installed so let's install two more packages npm install axis which is HTTP request and response library and also the react router which is used for routing turn down let's install these two also so the front end in the server side offers created solution to run the brow our react server npm run due so it will run our react up yeah let's move to this URL so it is but okay it is our react app that we have created right now so it was all about creating server side and react app so now we will move into create to write our code so now we will create just first of all on the now bar okay we will start our coding let's go to our front-end react app okay this is our client app let's come here to the update j6 let's create a new uh component by the name of now bar j6 and here we will just write the react functional company to export and here I will write the code of now bar so in the now bar let's assign a class name here and also let's create 3D inside this and in the first one let's write first one is the for example blog up and the second one is the menu that we have I will just try it here instead of this let's write a tag is this is for the home and this is for create post and this is for contact so after this let's write here this would be like register or login uh now I will just add CSS code to this to design it to make an over okay I will just add some CSS design for this so I I have added some CSS design to the snow bar it looks like this okay let's see the code this is the styles that we have added okay just these two a few lines of code and I imported that inside the now bar so right now um whenever we click on this register and again we should move to the registration page so let's create that the registration page so for that we need a react router down to create routing so whenever we click on that so we should move to that page that component so let's come here to the app.j6 first of all I will import the react auto Dom browse the router routes and that's route from reactive to them and after that let's use them so to use them let's write browser router and inside that we will like routes inside that route and here we will just specify the path which will be for the registration login that would be registered and the element would be yeah the no bar should be at the top always so for that let's import that here and element would be here is equal to it let's create the registration page so for that let's create a new component register .j6 opening export and let's import it here in the app.j6 that has imported let's save it so now let's move to um The Nail Bar just come here to the no bar and just make it as a link okay create a link from this so to create link from this let's write this is react router down link whenever we press this we should move to the register page 2 is equal to to the register it will move to the register route and in the register it'll move to the register component and one thing else let's add a class name here class name is equal to with the link now just come here and see it where is the error we need we didn't import the link so let's import it let's yeah let's import it from react auto Dom that has imported so now let's move back yeah let's press this button so when you replace the switch remote to the registration page okay see we came to the register and this is register component which has imported so now let's write code for this registration page just come here and here we will just have um sign up for or I will just add one another deal here and let's add sign a form or just sign up and after that let's add in forum and in the Forum we should have first of all a label let's create a new view inside that label that is for name input is safe text and this is for name okay let's say add to more copy this this is username username paste it here and this is our email change it to the email and one another for the password let's create a button for sign up and here down let's under the down that's how a break if you are not registered so then we will create one another button for our login if he already have account sorry login let's make it already our account if already have accounts so then he you should move to the login page now I will just add some CSS code to this to design it so this is the registration company that we have designed so this is the CSS score that I have added so let's see it yeah from this place it has started from the first component the second view this is for the input fields for the buttons and also these are for button in separately different colors so it is all about the registration phasing fetch that we have designed so now whenever we click on this login page so we should move to the login company login page so let's design it so instead of button we will just write a link because we would like to move to the link or I can just write something like this let's link from react Auto down and it's wrap plugin inside link and after that it will be let's check it save it and it is just the color has changed let's change the color of it so I have wrapped the button inside this link and the path is lagging we should move to this route now let's create this route first of all just come here they will create a login route and after that let's create a component by the name of login the j6 let's import it inside after G6 so now let's move here okay let's press the login button so we came to the login button see it is the login so now let's design the login page yeah that is easy to design the liking page just come here to the register page and copy this code copy the code and come to the login page and just paste it here there and now just change this to 50 things let's come here make it login and we will remove just the username we will just leave the email and password and just change this not registered so the initial it should move to the register let's make it register or sign up yeah I think everything is okay let's just import styles style.css yeah let's check it now so I think we missed something yeah we yeah link is not imported here yeah it is gate is the login page that we have designed so now let's move to the sign up page so here whenever we register an account we should insert that to the database mongodb database before that we should set up the bile update code for our server side and also mongodb database for mongodb database I am using mongodb Compass which is a GUI mode to manage the data and I have installed the mongodb a locally yeah let's connect with it I uh connected with it so now let's move to the server side code we will just write the code for our server side just come here to the server folder into the file that we has created index.js here we will write our boilerplate code which is necessary for every app so we will use all these packages okay Express the this is for to access our API in front-end big clip for password hashing jwt5 token cookie faster for Cookie Monster and part these two packages are used to upload the file and also this is we created an App then this extra star Json this means to parse the data to the Json permit when you first from front end and this is that we have written in inside the cars this means that we will access our server side from this URL okay our this is the part of our front end and we will use git and post and also other methods that we want to use like put and delete and credentials is equal to which rule this is for the cookie and this is here we run our server option now let's run our server up so to run that let's create a new terminal and let's move to the servers folder and let's try and fame um one thing else that I should mention that is the package.json here to the script we should add start node mount uh then the file name file name is index.js after adding it so it will automatically refresh our server setup whenever we make any changes and frame start so it will start our server yeah the server is running so server is running okay so now we will just write our apis and to write apis and then we will register our record first of all we will just sign up to the database so before let's create a database a new database here the database let's come here to the database and we can create a new database by the name of block and collection name if you want to for example The Collection name is users let's create this database blog database and users collection so now we will use it to register the user inside it so before writing an API for registration for support we will just create connection with the database so let's write mongos dot connect and we will just assign the string okay the string we will copy that from mongoda DB Compass okay let's come here and just press this copy connection string after connecting that just come here and paste that here yeah here we after that we will just specify our database name the database name is blog our connection has created so now let's move and just create the API for registration up that uh for registration we will just use post method in the route would be registered here we will create a function you will get request and response and after that we the data that we pass that is inside this request so to store it inside the user's collection or table so we need a model to create so let's create first of all a model for users and it's just close this front end up and just come here inside the server I will create a new folder models and inside that let's create user model is okay and inside it let's import const mongos is equal to require Mongols now let's create the schema for our user table so the schema is const user schema is equal to new Mongoose dot schema let's specify the fields for our table those are like first of all username type is string and then we will specify email type is string and password type string if you specify just these three Fields so now let's create model comes to user model is equal to Mongoose dot model here first of all we will specify the collection name or the table name which is users and the second one is the schema user schema now let's export it export module.export is equal to user model now let's import it inside the index can't user model is equal to require model slash user model so now let's create a user inside our table so for that we will use user model dot create and let's specify our Fields here our fields are request dot body or filter inside um requested body dot then we will just get a user's user record instead of that and let's return it result.json user dot cage there was any error so result.json return that error and let's just specify remove this so now let's move to the front end whenever we press that sign up button so we should register anybody card okay let's come here Yeah by placing this sign up button so we should call a function let's come here to The Forum and we will call on submit event here handle submit this function let's create this function const handle submit is equal to we'll get an event here e dot prevent default it means prevent the default submission and after that we will use axis library to just call our API before that we will just store the data that we are entering inside this username email and password so to store that we just need a three state variables const names it or username username sit user name is equal to use statehook eight and let's name it email and set email it to email and the third one is the password and set password so now let's just assign the values to them for the that we will use and change event and we will just create an arrow function and we will call sit username here we will assign it.target dot value same to this we will write for email but here we will use it email method and also for the password so it was all about to store the value inside those variables so now let's pass them to the server side so it's called axis first let's import it Cs and now let's use it access.post and we will call the API okay so to call that for that we need http localhost and our port number our port number is this three double zero one okay this one is our fourth number three double zero one and then the route the route is register we would like to call this API okay register so after that we will pass our data so to pass data we will just write username email and password so after that let's start then we will get a result let's cancel the result k h we will get an error so now let's stick it okay let's apply it and we will just test it yeah this is our registration page so let's create a user near assign an image Yusuf .com and password let's assign password but one thing else that before passing the password we should hash our password so to Hash the password let's come here to the index.js and here I will just restart first of all the the fields const name username email and password is equal to requested body after extracting them so now let's first of all hash the password let's write bcrypt we have imported it that hash so it will just change our password to Hash see this is the bakecraft library that has so we will pass to parameter to this method the first one is the password the second one is the salt that we should Define the salt is just uh a number that we will say for example 10 okay it will generate since unique character with every password so it will generate the hash password to us let's now cut this code and paste it inside this dot cage error and just come here to instead of user body I will just Define now the fields like a username email and password is equal to with hash so it will just now store the hash password so we did it okay so now let's check it let's come here and just assign fields five let's press sign up button yeah let's press the sign up button so let's check it let's move to the castle what we got in the result we return the user it means access error access error so it has returned axis here so let's check it where is the error and let's move to the register page and here axis dot post it will be localhost it is okay and register that is also okay and we passed with the name email and password everything is okay here but let's move to the mendix touches register yeah so let's change this localhost to one to seven sometime it gives the error 0.0.1 to change it to the localhost IP address yeah let's come here and let's press enter button so data has successfully entered okay so now let's check our database yeah let's come to the user and just let's replace it see we got this record okay this is the password email and username so we successfully inserted a record so now let's move to the login page let's come here to the login page I will just copy the same code that I wrote I as I wrote here because we need these things in login page also but instead I will just remove this username we will just log in as email and password and also let's import use State hook and use effect talk and also access CS has imported yeah we imported all packages but let's remove this username here and here we will call the method on submit and submit handle submit yeah so it will just pass yeah it is okay so now whenever we come here so we should move to the login here you are a login route yeah let's come here and we will create now the login route up dot post let's create login request and response yeah we never we come here so let's just check first of all a million password cast email and password is equal to requested body and after that first we will just check the email as this email registered with us or not so let's use our user model to find the record dot find one okay it will just find one and we will just pass email okay based on this email it will find our record so whenever it find the record so then it will get our the user to us it will return that user to us now we will check if the user was available if that user was available so now we will just run our code to other code here but if that was not available so let's result response.json we will later on that the user not exist okay it means a user based on this email is not available in the database so if the user was available so now we will compare our password first so be Crypt dot compare and here we will pass our password first of all that we passed from from front end and the second parameter would be user dot for printing user.password this is from the database okay the database password and let's create a callback function now error and response now let's check if response it means if the response if the response was true it means that password can pay um checked okay it is okay the password is okay it matched so then we will return that login successfully else we will just return result.json password is incorrect so if that was okay if the password match then we will generate a token first token is equal to we will use a Json web token for the GWT we have imported it okay Json JWT dot signed so it will generate a token for us first of all we will just specify the payload in the we will specify the key after that we have the third part which is optional so let's first of all Define the payload the payload first we will just store our email the email is equal to u0. email we will store our email in this and also user name user name user dot user name this was the payload section and the second parameter the second parameter is the second key this should be a secret key no one should know about this this should be in a separate pile that EnV but we will just specify here like JWT Secret key and the third parameter is the optional which we will specify expires in for example one day will expire in one day so now we will store this token in cookies so to store it inside the cookies we will just use response dot cookie here the name that is token and the second parameter is the village that is token that we have generated so it will be stored in the cookies and the last let's return response.json uh just return success okay so now let's check it okay let's move to the login page so whenever we login successfully we should just yeah we will just print the result first of all let's check it okay just come here to the login and let's depreciate and let's move to the login page and let's login as yourself gmail.com and here's the password let's press the login page see data user not exist it means that this email user user.gmail.com not exist so let's check where is the error just come here to the index so our code is okay we don't have any email we just start email and password from request.body so let's move to the login access dot post you can login email and password everything is okay so let's appreciate here is the error Etc gmail.com let's Press login button user not exist so what is the error so the problem is that we didn't store the data in this variable State variables in email end password so let's just come here to the register and we should copy this line copy this one copy it and just paste it in the email section and also this was for the email and for the password we will just change this to the sit password so now we will check it okay just come here and we have written it so let's write the password let's Press login button so let's refresh it won't gmail.com and so success C it means that the day the email matched and the passwords are also okay in our login API we also generated the token and we store that in the cookie so let's check the cookies let's come here to the application and we will check the cookies they see we have this token okay this is the token research generated and this is the key of token so we store the cookie inside cookies and also we liked it successfully so now let's come here to the login uh first come to the register whenever we register successfully so we should move directly to the login page and just come here when we login successfully then let's move to the directly to the login page so for that we need to use navigate Hook from react router Dom yeah that has imported from reactive to Dom and now let's create an instance of that const navigate is equal to use navigate and now just let's use the navigate so here I will write navigate should move to the legend route we need to move to the login and hit in the login whenever we login successfully we should move to the um the home page here we will just write a result dot data dot success data was equal to equal to with success we will return success okay if the result the data was success so then we will just move to the home page so let's create the home component and just come here and we will create a new component by the name of home.jsx and just come here to the login and in the login we will use navigate now we didn't export it the navigate here in the login section so let's first of all import it use navigator that has imported from react auto Dom and let's create an instance of that navigate is equal to use navigate and let's use it now let's move to the home page our our home route would be just simple slash okay that would be our home component let's create one for that would be home yeah the home was imported just a simple slash so let's login now to the system gmail.com and one two three four five let's face login so we came to the home component okay see it is the home component so now we will Design the home component before designing the home component whenever we log into the system so we should see here just the logout button okay instead of register login so we should see just the lag out button here then we can log out successfully so for this logic I need to implement this functionality inside the now bar okay just come here to the now bar so here I will check if the user was likely so then we will create a print display the button of logout instead of register login so for that I needed to create a can use context API for to create a global State and to access the user data in all components so just come here to the app.j6 I will create context API create context yeah I got context API has imported from react so now let's create it first user context is equal to create context and also let's export it export it user context yes so now let's use it we will use provider with this user context just come here and let's write a user context dot provider and then let's cut it in to wrap all the components inside this and here we will pass the video value is equal to so here I will just use the user information the user data and pass to this video so to pass the user information we need to just fix the information from our server side if the user was light in it we will check that inside our server so let's use use effect hook dependency and here I will just call the axis imported dot git so we just get a user information okay that Within we will get user here dot cage we will get an error console.log here so we will get the user information okay right now I didn't store them inside the user context but I will store them later so let's first of all move to our server side up in here I will Implement that API so to implement that API that was the app.get and here the this is the route for that request and response and after that let's so here I will Implement one another API one another middleware so to check that okay so let's Implement that can't verify user is equal to request response and also next next is used to call whenever we it means if everything was okay so then we will call next and next will move just here come back here so to call this middleware we will just come here verify a user okay so whenever I come to this route so first of all it will call this middleware so whenever it ensured from that side so then it will come to this party so let's come here to implement our user authentication here is the user logged in or not so here for example we will leave the token from cookie so to read the token let's write count token is equal to request start cookies Dot and the token okay this was the name of the token if the token was available so then we will just let's come here but to read the token we should write cookies dot token token and now let's check it if the token was not available if not token so then we will just return response.json return the token the token is missing else if the token was available so then we will check it and we will verify it so for that we will again use JWT jwt.wordify and here we will pass our token and here we will just write our secret key okay this key our secret key was JWT secretly okay let's copy this one and we will write it here and after that the third parameter is the function we will get an error and also response are decoded values the payload the data that we have passed decoded so now let's check it if there was error if the error was available so then we will later on raise a response to adjacent the token the token is wrong else there was no error so then we will just first of all we will write request dot email is equal to decoded decoded sorry decoded that email we have decoded before the email and the user name let's come here to the see this was the our payload email and username and now just come here and request dot username is equal to decoded data username and after that we will call next so it will move back to this route and this API so now we will just return here let's write const email or let's simply return and return response.json it will return email which is a request dot email before we attached and also the username decoder a request dot username um yes I think yeah it is okay so after returning them let's come here back to object G6 so here inside it we will just return an object so let's first of all cancel it okay console.log user so just come here to the Chrome browser so we got an error that is video yeah the video is missing so let's write here something like okay just empty hurry yeah so let's move to the console what we get in the result we are logged in or not it means the token is stored in console is token is stored or not appeal to load the server localhost response with status it means you faced within error so just come here to them user impact oh sorry we should write http [Music] localhost 3001 and this is our route so let's go now back see we got this request field with Siri score again we failed we faced within here so let's check it where is the here yeah there is an error in our route let's save it and let's come here back see the token is missing it means that we are not login there is no token inside so data the token is missing so let's check is the token available or not application so I think we have the token yeah the token is stored but let's check out our server side where is the error but one thing else I should note that let's write here axis axis.default start with credentials is equal to true this is important okay whenever we are writing accessing the cookies yeah now we got this data see the data we got a email and username that is okay so we got our data so now let's store the data inside an object so let's create that const uh user sit user is equal to use State hook and this is an object with us so now let's store the user inside our user so let's store set user and we will stock pass gesture or user.data yeah I think we will just try it like this that is okay so user.data it will be stored inside the user so now let's pass to the value user so to read now this user information so we just need let's come here to the login and to the now bar so here to read the data from Context API first of all we will import that we will import use context yeah that has imported so now let's just create a import this user context that we have created before yeah this user can take so to import it let's write import user and text from update j6 after that now let's read the data accounts the user is equal to a use context and we will pass the user context to that so it will just read our data from user so now let's check it okay here we will just just come here if uh user dot username username was existed so if username was existed so then we will just print this data else so we should change it to the question mark else we will just print this data okay let's cut it and we will paste it here come here that is okay so here we will just printer a button or it will be just an input type and the type would be button and value is equal to here we should now print the log out so now let's check it see right now we printed the log out but we should make it we should design it a little bit yeah I have added some CSS code some CCS design for that okay this is background transparent border color and font weight I avoided this to that let's come here to the now bar so it was it is our input field now so now let's add log out functionality whenever we slide out button so we should log out from the system so let's come here so this is the log out button okay so let's whenever we click on this let's add unclick event handle lockout let's create this method now handle log out const handle log out is equal to create an arrow function and here we will just use axis and we will call our server side to remove the cookies that we have stored so now let's just I will use axis Library dot git and we will call http localhost then the port number after that log out and then we will just get a result and what we want to do when we get the result dot cage console.log here so whenever we get the results so we should move back to them that means we never we press the logout button so we should reload the page from scratch super that I will just write window Dot we will use use navigate hook for that to reload the page so you use navigate is already imported let's just try it const navigate is equal to use navigate and let's now use that come here and navigate and just assign 0 it means it will refresh the same page and let's now create this API inside our server app so just come here up dot get the route name is log out and we'll get to request and response so let's clear the cookies to clear that let's write result dot clear cookie and let's assign the name of the cookie which was token after that we will just return response.json for example success okay a letter and success so whenever we come here so here when we get the result we will just write people result that data was equal to equal to with success so then um no so yeah here so then we will reload the page okay so let's check it okay let's come here to the crew let's refresh our page like right now we are logged in so let's press log out say we logged out from the system and we came back to the login in register let's login back it's right here sub gmail.com let's press the login say V login but this didn't update it so for that let's come here to the library instead of navigate we will just write window dot location slash will get will move to the home router because the US navigate will not navigate and reload the page so for that purpose I just use this JavaScript so now let's again try that okay let's log out let's log in again [Music] five minutes please like login see we logged into the system here we just saw the logout button so we just perform the functionalities of login registration and logout functionalities now the third functionality in this functionality would be like whenever we press this create button so we should create a new post and also we should display all the blog posts here on the screen so let's first of all when you are wicked this whenever we click this create button so we should move to create a new post blog post okay so let's come here to the now bar in The Note bar just come here to the create and we will just change it to the link Also let's copy link Ctrl C and just paste it here and just add in instead of picture if you will add 2 is equal to we will move to the create it means that we will create a new post so after that let's move to Opera G6 and add that route so to add that route let's copy this paste it here and let's just cut it a little bit yeah I will just change it to the create and now let's create a new component and we will add that here come here and let's create post.j6 let's import it inside of the j6 state of this create post so now let's click on that and this create so we came to the create Post in this component so now let's add the design of create post first of all we will select an image the title and also the description so let's just come here to the create Post company and here we will add another view and inside this tube we will just add a form The Forum will contain first of all for the title and input field for the title and also text area for the description and that would be for the description yeah that is okay and the second one would be power file input for file okay to update to upload a file and the last one would be a button for submit or just post so these are the input fields in this form so now let's check them so these are the input Fields okay so I will just design it I will add some CSS design for this so it will looks like better so now I will just pause the video to add the design so I have added the CSS design to this it looks like this okay now so now let's store the wheel this is the CSS code that we have added okay this is a few lines of code so now whenever we write something in this input field so we should store them somewhere in a variable let's create State variables for that cons first of all the title sit title go to use state in const description set description is equal to use state const file set file go to use state it is all about this so now let's store the values inside him so whenever we are writing something here so let's call unchange event we will get in Arrow function and call seed title call Ada Target dot value same to this do with the description also copy this and just paste it here instead of see title just call sit description after that just come here to the file and paste that here instead of see title the right seat file eat a Target dot files zero okay just take the zero on the first file install that inside the file so now whenever we press this post button so we should submit this post and we should store that inside the database so let's first of all just call a function let's call it on submit just call handle submit this function just come here const three handle submit is equal to we'll hit an event e dot free event fault I will just come here to the here to the login and I will copy this code copy the code and just come here and because to not waste the time okay we we want to write the same code okay let's just import the axis and the axis has imported and also you we should import yeah that is okay here we should just call now create instead of plugin and also we will pass the title then we will pass the description I can just name it description describe Channel key that is okay copy this name and just paste it here and after that call the file pass the point so now first of all we will just create the database bar our post and after that we will write the API for that so first of all we will create the table of posts just come here to our server site and we will create a model okay we will create a new model let's come here wrap it and come here to the models create a new one that would be postmodel.js and inside post model let's copy this all code Ctrl a Ctrl C and just come here to the post and paste it here instead of username now we have the our title and description description and also the file so the file name that is also string we will just store the name of the file okay other file will be stored inside here in the server so let's change the collection name that would be posts and user schema it should be post schema post schema and also post model and Export it Ctrl C TRL V Let's import it inside index so to import it let's just come here and here we will write const model is equal to require add slash models slash post model so after importing the post model let's come here so first we need to when we are writing the API for our post to be inserted to the database first we should verify is this user login or not and the second one is to upload first the file then we will insert the record in the database so for that let's first of all light up dot post that is create and here's the first middle way that would be him to verify user okay verify user we have already created this one let's check this verify middleware yeah this is the Wi-Fi meter where let's come here this one okay first it will check the token then if that was okay again it will check the token if that was valid if everything was okay so then it will come back here okay so then it it means that it it returned to true so we need to return into we will call the second middleware which is file uploading I will um upload that I will just call that later so first let's create the Callback method request and response so let's now first of all we should upload the file whenever we get data from our front end so we should first upload the file to our server side here we will create a folder for that and then we will insert the data in the database so to upload the file first let's specify the storage for that we will want to store storage is equal to motor that storage inside it we will Define just the file name and the destination first of all destination create a file request file and callback method but this is disk storage okay so here we will call the Callback method and particularly personal that is the error we will not handle that in the second one is we will just specify where we want to store our image we will store in the public images in this folder we will store our image let's start here so let's create that fabric for example public folder and inside look like we will create one another folder by the name of sorry we will create a folder by the name of images we have created these two folders so our image will be stored here in the second parameter is the file name again a request file and callback method here again we will call callback method first we will pass null and for the second we will just specify now the file name how to store which name we should assign to our file name for the image that we are uploading from front end we will just change the name of that so we will write file dot field name field name okay field name this is the name that we passed from Front End what was the name of that that was file okay we have assigned then we will just attach and underscore with that after that we will just attach date that now with that this method okay it will change the date to the millisecond and it will attached with that and after that extension name extension name path that extension name after that we will assign file.original name what it will do so first of all it will take file that fill name fill name is for example you assigned and the front end file okay file plus underscore plus the date after that it will attach extension for example that is PNG gpg what type of extension is that it will attach that with it so it was all about that so now let's create the storage let's let's just come here under this we will just write const upload for example we will limit upload is equal to motor and we will assign this to the storage parameter the storage that we have created okay so now we will call this upload here upload dot single okay we can pass multiple files but we want to pass just a single what is the name the field name the field name is for example we assigned file this is the field name that we have assigned so an object is first of all we will print okay whenever we press the post button we will print all the things console.log request start file so it will print as the file just come here to the terminal to the server side yeah here again we got in here a user schema is not defiled let's see the schema is not defined let's close this and where is the error so yeah post schema post schema do you know yeah yeah this is post schema so now let's move back to the terminal and here we will just now let's press the submit button let's select the file for example we selected this file let's press post button and let's come here to determine undefined it means we didn't get the file we didn't title description and file just come here to the index.js here we've upload that single file Trace that file so to pass the file we need Forum data object to use that let's come here to the create post and here we will create a forum data object just come here const Forum data is equal to new Forum data after creating the object let's use that Forum data data paint and we will name it for example title title and the data is the title after that we will just use description and description after that file we will add file to that now let's Pass forum data object forum data yeah we will check it now for file uploading we need Forum data object let's refresh our page and let's select an image and let's come here to the terminal let's press post button just come here see we printed all the data related to that this is the field name file name okay meme type that is PNG destination Biblical images file name path and this is the size okay let's check the images folder right now we have them see this image has uploaded here so now let's store that inside the table the table okay to store that just come here and here we will use so to store the record we will use post model dot create it will create that and first we will assign the title the title is equal to request.body dot title and second is the description and that is a requested body that description third one is the file file is equal to with the request dot file dot file name let's now make it enter here just and just press enter here and here we will just write that in it will give us a response or result let's result the Json we will later on that result that cage if there was any error response.json return the error so let's try it what happened okay let's come here and just write a title um this is the first blog post and this is our first blog post and let's select an image the image is already selected and let's press the post button and let's uncheck it yeah we will check the console what is the response that we got sorry we should move back to I just let's close it and just move to inspect to the console uh it means we paste it in axial access error so let's check it let's move to the database yeah the database yeah we have the posts table and also the record that we have inserted okay there is no error it has okay let's insert the second one this is the second blog post second blog post okay let's select another one I uh for example let's select this and it's press post button and let's come here to the table and it's replicate see this is the secondary card this is the second blog post so now the third step is now we will move whenever we create a post so just come here to the Chrome whenever we create a post we should move directly to the home page and we see all the posts on our home page so for that just come here to the create post whenever we create a post successfully and HTTP create a result editor success so then we should move to the home page so let's check what we return from create okay we will return result digestion we will return we will leave a result we will just return success so now whenever we create a new post so we will directly move to the home page and also let's whenever we please send this home we should move to the home page let's come here to the now bar now border G6 and to this home and this should be linked copy this paste it here and one thing else whenever we are not logged into the system we should not see this create button okay it means that we cannot create a post so for that let's implement the same logic as we have implemented here FB user dot user name was existed so then we will just print this one else we cannot print that okay we will use that empty so let's go to now let's press home page so we came to the home page so now here we will pitch all the records and we will display them on the screen just come here and um more to the home page home.j6 so to fix the record we will use use effect hook let's just come here and we will use use effect talk and try to read dependency here we will pitch all the records using axis let's import access.get slash for example git array cards get records or git posts get posts and yeah here we should write http localhost localhost 3001 and in kit posts you will move to this URL and get all the posts that then we will just get posts and let's console them all console .log posts and if there was any error so we should print that on the console cage console.log error so let's first of all um create this git posts API so to create it let's move to the index sorry yeah just come here and we will create that get posts API app dot git the route is git posts okay allocator request and response create this method and we will pitch all the records so for that we will use post model dot find okay we will use find it will fetch all the records that theme we will get a posts posts and just result.json there is a return the posts dot KH if there was any error so just print result.json error so now let's move to the home page here we are on the home page right now let's move to the console and we will see all the records all the posts and the console we paste within axis air solicitor Christie's page see we got this data okay let's see it this is the data C this is these are two records that we paste okay title and ID file and we have everything so now let's display these records so to display these records we will use create a variable first of all for that state variable let's create that const it posts is equal to U state and this is an object with us okay we will create an object and this is the object will have the title which is an empty string description the description also in empty string and file which is an empty string and after that we will just update this object based on this data that we got but this that we have returned that is in Array but instead of object we will create array yeah this is in Ari with us so here we will just write now sit posts posts dot data we will pass the them posters data as you see here post that data it will just pass it and store them in the posts so now let's print them so to print them for that we will just come here let's create another domain inside we will just spend now our data so to print that let's create first of all posts that map you will use map function post and here we will first let's first of all just print the um title and the description for example H3 just I will print the titles post dot title let's save it and let's check it see we just printed the titles so we would like to picture and this left side the image and in the title and down the description so for that I will just write the code so this is the HTML code that I wrote for displaying the posts first you okay then I displayed the image then I display the title and the description how I display the image first of all I wrote the URL the path to the server side okay to this folder that we have okay come here to the server side to this folder okay HTTP localhost to the images okay we can access directly the images folder from our server side okay this image is then the poster file the image name okay we stored just these names okay in the database then first this route then the name of the image so how I access this so for the server side we need to write this okay this one line of code okay up that use express.static.wuplicate means that public we can access our public folder wherever we want so we can access that so by writing that so we accessed our image like this okay this is the route to this image okay that we have to this image okay this is the route after that we just erode the name of these this okay this is the first name that we wrote the second and the third one okay we wrote this name these num are these names are stored in the database will feature theme param database so we displayed them they looks like this okay so these are the black holes that we have we have to posts and now in our uh database okay these two posts so now let's whenever we want to click on this we should read this post okay after reading this post uh we will just edit or delete this post the one who is the owner the one who wrote this post he can update or delete this post so whenever we click on this post we should move to display all these components in a separate component okay so for that let's come here to the where I displayed those Post Yeah I displayed them here so instead of this view I will just drop this all in Link in react rotor Dom link let's cut it and just come here and down and paste it here and here I will just assign two uh it goes to post okay to post um route so let's come here to the apple j6 and we will add a post route and we will just pass the ID also so just come here to the home and pass the ID to this with this link so to pass the ID we will just try it here instead of this I will write directly and here I will write post slashes the ID post dot ID because the ID is saved like this with underscore in the database so now let's create post component and we will display the post inside that poster j6 react functional component export and here first I will get the ID so to get the idea we like const ID is equal to use power arms this forums will just paste the ID from URL and now I will pitch the car based on this ID and display that so let's write use effect here let's just write CS dot git http localhost 3001 slash we will get by ID this would be our route and get by ID or git post I get to post by ID and after that 13 we will get a result we can store the result somewhere so to store the result we will just let's create const it post is equal to use State hook so it is an object so let's store that inside an object and here we will just call sit post we will write result Dot data after storing that so now let's print that data so to print the data we will just try it so here we will write first let's print the image and the image to display the image that would be like http localhost 3001 slash Images slash we will just write the path pause dot um and after that we will just display the title to post that title and also let's display post dot description so now let's just create this route okay git post by ID so let's come here to the intake searches so we should also pass the ID so just come here to the pro to the Post yeah here and we should pass ID so to pass the ID we will just try it plus ID and just come here and here we will grab the ID once the idea is equal to request Start programs dot ID so after grabbing the ID now we will just use post model dot find by ID and here we will just pass the ID is equal to with the ID that we have that then we will get the post result.json return the post in that case and so DOT log here so let's check it now so let's move to the console so it says the link is not defined yeah in home.j6 let's come here to the home yeah we didn't import it the link from reactive data check it now yeah that is okay but we should remove all these things from this so let's just come here um I will yeah it looks like this but I will remove the uh this underline and also they will design it okay we'll add the CSS design to this it is the reason it's just that we have added this and link to this post so to add the CSS design let's just we'll just cut it and add it here and remove this tube and also this one after removing this so after removing that let's add some design to this post here to the style to the Post text decoration none and color black yeah it looks like this whenever we press this we should move to yeah we should move to the post just come here to the home and link to post slash ID okay we should move to this route post and slash post dot ID come here to the after G6 and commit to the Post yeah here we should write the post yeah that has imported so now let's move back to our home page refresh our page and let's press this one so we paste within here it means we didn't pitch the record successfully let's compare it to the console paid to load sources server responded it means the route didn't find there so let's check it here we should add the ID slash ID let's save it and let's come here back and we will it means request here failed with status 404 you know error in the server side yeah const ID forums dot ID find by ID result Json post come here to the Post so the problem is that we should add a slash before this route okay in the server pipe let's add this slash and let's replace it so we got the data that required okay and we stored that in the user and we read that so now let's I will add some CSS design to this so what is some CSS design it looks like this okay I will not add more design because we will not focus on the design so now the last functionality is that the one who is for example I posted this post so I should be able to edit and delete this post we will add two two buttons here at the bottom and we can edit and delete this post so for that let's come here and we will move to the post here at the bottom we will add just two buttons let's add button and this one is for the edit and the second one is for the delete I will just remove them let's cut this one and I will post it here and one another button did it so let's check them yeah it looks like this but I will just add something paste them here they are here David tab name is full but so let's wrap these two buttons inside audio the looks like this okay so now let's whenever we press edit we should update we should be able to update this post so let's come here and click so for the edit paper first I will just change this button to the link react auto Dom length yeah and also let's change it and we should move to the another component 2 is equal to and we will move to the edit section our post edit post he did slash we will pass the ID to this route so to pass the ID for that we will just try it simply edit a post edit post slash we will pass the ID we will just try something like um post Dot underscore ID so whenever we pass this ID to this route so now let's create this route up.j6 and let's change it to the edit post slash ID and here we will go let's create another component edit post.j6 react function component export and let's import it inside this database edit post so let's now check it okay whenever we press this edit so we should come to the edit post we came to the edit post it means edit post yeah that is okay just come here to the come here to the Post and we should move to the enter the Slash let's press this one let's move here and let's press this item so we came here to the editor post component so here we will just create a new um component a new Forum same tool as we have created a new post so I will just move to the create post and I will just copy all of this code and paste it inside control a control V just I will change these names because we would like to perform the same functionality paste it here so now we want to update the title description and also the file these three are okay and here we need the Forum data okay to first name again and here we need the post and also if we will just change this edit post edit post and we will post edit it based on the ID so let's first of all grab the ID so to grab the ID we will just write here const ant ID is equal to Muse for ohms use Firearms hook so it will drop the ID from URL and after that we will just create use effect and we will fetch the record let's use use effect first we will fix the record and we will store them in the Forum that we want to edit and to pitch the record so we will come here to the post and we will do something as we did before because we will call the same route we would like to pitch a record based on the ID paste it here so after so let's create now a new state variable as we had here copy this and just come here to the edit post and paste it here so here we will just update our post and here we will just write so instead of writing this post I will remove first of all the file also we want to edit the description in the title and also let's remove this one and whenever we pitch the record we will just update these two Fields Title and also the description so how to update them because we want to first of all see the view is here okay whenever we want to edit the a record you should see the previous title in description so for that we will do whenever we fix the record we will just update our title result dot data data um title same to this I will just update seat description and instead of this I will just write description so after updating them and whenever we update these two so now let's just come here and here I in these two input Fields first I will remove this file and after that here I will write in this title one value is equal to with the Titan that we have updated right now yeah now leave it yeah title in description and also here I will light value is equal to with description so let's check it now see we have the previous title in description so whenever we update them by pressing this button so let's just change it to the update and also this one to the update post so in update when we update the data so we should call this handle submit button handle submit button so here we will just pass our let's remove this forum data object was just for the file purpose so here I will pass title and description control set description after passing them so now let's we will move to the edit post I will just change it to the yeah edit post edit post with the ID I will pass ID also plus ID okay that ID that we have grabbed from a use param hook so now let's move to create this edit post API just come here to the index.js yeah just come here up dot get that yeah that is update not post we should change that to the put method access that port and just come here CS dot put and that is edit post with ID and here we will get request and response so here we will just update now our data so first we will just grab the ID const ID is equal to request start ROMs dot ID and after that we will use post model dot point and find by ID and update let's find a passwords of all the data the ID equal to with ID and the title is equal to with the request start body title and the description is equal to and assign the request dot Rd dot description so after writing this so now we will get that thing we will get a result just result.json return result dot cage easel digestion response to adjacent error so this was update API so now let's see that okay so to check it let's come here we will just update this is our first uh blog post with the updation for example okay I have added this so let's press update button so whenever we update so let's check what what will happen in the update section here here whenever we update that we should just directly move to the home page it means that we should return yeah we should determine the success so let's press update so this is our first blog post it means that that has not updated ticket no error and also let's check it in the console we didn't face with any error but let's check where is the error that the post has not updated let's check our database let's appreciate yeah this is our first Vlog that has not updated yeah the problem is that whenever we want to update our record so we should like the right like this okay first of all we should specify the ID then you should specify other fields okay first we specify the ID the another fields are titled in description so now let's check it what happened let's press this one and let's press the edit button and let's press with update function ality for example okay let's press the update button so again that has not updated let's check our database that has not updated in we specified the ID so one problem is that that I have missed spilled this title I was Mr T just so let's check it now again update let's press update see that has updated okay so we successfully update our post one thing else that it should not load whenever we update that so instead of this window dot location we will use use navigate hook use Navigator okay let's use this now create an instance of that const navigate is equal to use navigate and here I will use navigate and move to the home page let's save it and now let's check the second one and let's press the update by edit button and let's switch with the update functionality for example okay let's press update now see that has updated successfully so now let's perform the deletion whenever we press the delete button so we should successfully delete that record that post so just come here to the Post and on click just come here and click we will call handle delete and just come here const handle delete is equal to we will just get the ID also here so to pass the ID we will just create an arrow function he will just pass post that ID so after passing the ID just let's sketch that here now we will use just access that access dot delete and we will use this route Ctrl C TRL V set quotation and here I will just change it to the delete post after that we will get this response Ctrl C and here we will just use now instead of this window dot location a tree load so just come here to move to the delete post API and come here and we will create that app.delete our route is delete post and we will get an ID request and response so to delete ID card we will just use post model dot find and delete or find and remove so let's specify the ID the ID is request start for ROMs dot ID that thing we will get a response result and that would be response.json for example success cage let's save it and just come here and let's press this delete button uh we paste with any error so let's check it where is the error let's write yeah it means the pile and ready to point to reading the file in the post component okay instead of that whenever we reload we should move to the just come here instead of reload we should move to the home okay we will use use navigate instead of this let's import use navigate let's create an instance of that const navigate is equal to those navigate and here we will just use Advocate and we will move to the home page it means that now I reload the same page again slippery sheet and let's create a new one let's add it this is third blog post yeah it is blah blah let's select an image with that for example what is react hooks and let's press the post button so we came here so let's now delete it for example so let's press delete button so we came back here so that has deleted so the last functionality is that for example um I have posted this okay so I should be able to edit and delete this so no one else should delete and edit edit so these two buttons should be showed for the one who is to whom it belongs so for that for some purpose we need to just whenever we are creating so we should pass by username the one who is logged in so we should pass for example the email or the username with that post whenever we are creating a new post just come here first of all available to the database so to add to the database we will come here and to the server side in the server side come here to the post model I will add a username or email to this because the email is unique after adding the email so we should just come here again let's remove all these things so whenever we are creating a new post so we should yeah let's come here to the create post we should pass the email also how to pass the email we already performed the context API whenever we want to read the user information so we can just access them using context API so to read those data so we will just come here to the no bar as we did in the number we will perform the same functionality we use the use context hook okay let's just come here to the create post yeah create post and let's close it first I will import use context from react after that user context user context from app.j6 so let's import user context from that slash approaches jsx okay let's go to the app.j6 say this is the um context okay a user context after importing that so now we will use it so to use it again come to the no bar we did that we implemented that here we will do like this okay something like this let's copy it and paste it here after pasting it so now we have the user information here so whenever we are posting the data we will pass email also to that forum data dot a paint email user dot email so when we pass the email to the index okay let's close it let's continue to the index to the server side up and just come here to the create so here we will store in the email also file is equal to with this and also we should store the email email is equal to with the request dot body dot email so let me store the email so now let's try it what happened so let's create a new one this is our test block let's select an image let's post it so after posting so now let's move to the database let's refresh it so we added the email okay we have this email right now so now let's come here to the Post again we will leave the information here the user information so so how to read the user information first we will do as we did in here we will just import the user context use context from react and also user context from up.j6 after that we will just do as we did here let's copy this Ctrl C8 and just paste it here yeah we did the information from Context API after reading that so now let's check we fit the you the posts from our server side based on the ID okay whenever we repeat that here um under these two buttons I will write if the user dot email was equal to equal to with post dot email if these two are equal okay I pitch the user information here I have the user information here in the post data that I pitched from my server side that is here in inside this post if these two were equal it means that the the record which is in the database in the record which we have stored the one who is logged in if these two are equal so then he will be able just to do it to update the data else nothing will be displayed to him so let's save it now let's move to the Chrome right now those two are equal okay I would like to register um let's like log out from the system whenever we log out from the system so right now we see we are not able to um see that black post because okay let's come here let's move to this we don't we can't say those two okay those two buttons and also we can't create a new um array card so let's register as a memory card .com so that is the username let's sign up we sign up so let's login as arip gmail.com five and let's log into the system so we log in see we cannot update and delete because this post was done by usep so let's again log out and log into the system five and let's log into the system so let's move now here see we can we can edit and delete this post so it was all about our black app that you saw I use everything about blog up how to create a new record how to create a new login how to sign up how to Hash the password how to use tokens and also role based you did we did a lot of things okay I hope this video was helpful for you you learned something from this video so if you like this video don't forget to subscribe our YouTube channel and thanks for watching

Channel: Code With Yousaf

Views: 9,060

Keywords: mern stack, mern stack project with redux, blog using mern stack, mern stack project, react full stack, blog application using mern stack, clone using mern stack, mern stack tutorial, react, full stack, blog app using mern stack, mern stack code for interview, mern stack projects for resume, blog app using react js, crud app using react, mern stack projects, mern stack course with project, mern stack project with redux toolkit, mern stack clever programmer, blog app

Id: cJ_JRFD9uyg

Length: 119min 7sec (7147 seconds)

Published: Thu Jun 22 2023