Full Stack MERN Social Media App Tutorial | React Node.js full Course for Beginners JWT, React Redux

foreign [Music] so [Music] um [Music] so [Music] um [Music] hello awesome developers today we are going to complete our social media application by using full stack approach previously we have made the design and rest api for this attractive platform today we are going to integrate both server and client side so you will learn how to perform routing on client side using react router version 6. how to do global state management using react redux store and for bonus how to persist the store state even after you refresh the page how to authenticate with jwt authentication tokens how to use redux thunk middleware in our actions for asynchronous performance and still there is many more to learn in this project this course is going to be the best men's stack course over the youtube let's get started so in the previous part we have made this server folder and initialized our rest api completely and the first part was this design part so i am opening my vs code here in the parent directory and first of all i will change the name of our starter pack as client so now we can easily see that this is our server side belongs rest api and this is our front end part okay now in the previous part i just found that we have messed up our login and sign up page so i am going to initialize my client side so cd client and here write yarn start also i am running my server side by side so making an other terminal and cd server and here write npm start so our server is running and here our client side is also running successfully now let's just close the terminal and inside the client side i am going to the pages and then inside the or dot jsx so here i am first of all going to make some changes instead of making this login component i am just deleting this and i am going to my sign up this and just copy the entire div copy this and paste this just below the web name so here it is and i should make a comment so we can easily find out here this will be the right side and this is going to be the left side with the logo just like this okay now i can easily just remove this login function i am just going to delete this so let's just delete this like this okay as you remember we have to render both the login and the sign up page so for this season here i am going to make a you state const is sign up is sign up and their set is sign up and this is going to be the use state so inside the use state at the start it will be false okay so this means if is sign up is false then we are rendering our login page so here i am going to declare a condition i will say is sign up is true then render sign up text like this and if it is false then render login like this okay so now let's save this and have a look okay so i should also change inside the app.js here inside the app.js instead of this i should delete this of course okay so just delete this and make this out of command let's save and here see we have the login text because our condition is according to is sign up variable the first name and last name fields are required when we have to render the sign up form so in the login form it is not required so i will say is sign up true so just make to ampersand sign and i am just copying this div completely ctrl x and then here ctrl v and of course i have to make this div inside the condition let's format the code okay now let's save and see so we have no first name and last name inside our login form similarly we don't want this confirm password field so i will go to the confirm password field and again just make a condition is sign up true then ampersand and this will lie inside the condition let's save this and see here we don't have our confirm password field now though our last task is to change the text of this sign up button because there should be now login so again here there will be a condition which is saying is sign up then there will be the text of sign up and if it is not then there will be a text of login let's save and see so now there is login button it's working fine but we forget to change this text so in the login form it should say about the sign up so i am searching for the sign up text okay here i am making again a condition everything will lie inside the condition is sign up and if it is true then i am rendering this text for the login and if it is not don't have an account sign up so just like this let's save and see so it's saying don't have an account sign up let's say i change my variable of is signup to the true so true and now i have this sign up form okay this change of form should be done on clicking this text so here i will say on click on click there should be an function executed and inside the function i will say set is sign up first of all it will take the previous value as the parameter and change it into the negation of previous value so now let's try i am clicking this and now it is login form and now it is sign up form moreover for the styling here i will write the style and the cursor will be like the pointer like this so it is giving an error i think okay it is giving error because i have already declared the styling before so just copy this here and paste it by placing a comma let's save and just delete this now see the results if i click this and then so yeah this is looking really nice it's time to handle the inputs inside our form let's go to the vs code and i should format the code okay first we should check that either we have the names of our input properly or not so first name last name this is correct and similarly username and the password the confirm path so i think our all the inputs are having the correct name so to ch so to handle our input i will also handle this according to a use date so here i am making form data or you can simply just say the data and then say the set data okay so at the start this data is going to be a null object basically instead of null object what i will do i will give it some key values and these key values will be the names of our inputs as i have mentioned here so this is a kind of initial state for our use state okay here i will say it will have a first name and the value of first name will be nothing then the last name with nothing and the password all the possible input i am writing here and confirm pause again it will have nothing okay i think i have forgot one input which is the username so username just like this now i have to write a function to handle the change in our inputs and put the values of our inputs inside this object here i will write const handle change and it will be a function and first of all it will take an event as a parameter as we know that all of our form lies inside this form okay and this form should be submitted on clicking our last button here because this has the type submit okay but this is not our concern right now our concern right now is with the input fields that how to reflect the change in our inputs to our use state hook here so therefore i am writing a function handle change which is taking the event as a parameter and i'll say set data first of all i will destructure my previous data like this and then inside scale brackets write e dot target dot name and the value will be e dot target dot value like this okay so the reason why i am setting data like this is because if i don't use this convention then we have to make handle change for every input separately but by doing the e dot target dot name now we can use a single function for all of our inputs okay so now in each input right on change so on change there will be executed handle change let's copy this paste it here and similarly now below the password and also below the confirm password okay now let's check if we are having the correct value inside our use state hook so there i am using a extension named as react developer tool you can easily found it on the google store so by the way i will remove all these warnings by giving a key prop to our iterating components but now let's ignore this and here inside the component which is the extension and auth here i have a state and now let's write something in our input let's say zen and rk than android gmail.com let's have a look and here we have our password password confirm password first name okay so why this first name is not working correctly because here we have forget to write the r let's see okay so yeah there should be an r now let's save and try again so here i'm refreshing my page let's write then okay our k then at the gmail.com then then let's have a look and here we have all the fields filled properly now to hide this password field there is a very simple trick to make this hide here instead of writing text write the type as password and similarly here write that text as password let's save this and now you can see they are just the dots we are unable to see them which is abnormal behavior of password fields so our next task is when we hit the sign up button here then our program should check whether our password and set password fields are same or not and if they are not same then we should see an error bill below the confirmed password field so let's go to the vs code and here below our use it i am again making an other use date with the name confirm okay confirm pass and with the set confirm pass and by default it will have a use state true because by default we don't want to see any kind of error okay let's save this and here just below this div i am going to make an other span pan and inside this pen it will say confirm password is not same mean there is an error okay so now i have to render it upon checking the condition of our use state hook so there can be two types of method the first method is that i can place this kind of condition here also and the second method if i change its styling okay so here i am making its display according to our confirm password state that if it is true then there will be nothing and if it is fast then the display will be like the block so as you can see now we are seeing nothing and if i just make it false like this so here our text confirmed password is not same give it some kind of styling here inside its style i will give it a color of red means it is a warning and a font size of 12 pixels which will be enough align itself and i think so flags end because it was in the center and also there should be a margin from the right so i am giving a margin of 5 pixels so it will be aligned properly let's format the code and let's save this here we have our confirm password same and it's looking very pretty now but still we have not made the functionality of checking it on hitting the sign up button as we know that the button has type submit and if it had type submit then form should have a prop which is on submit so on submit i will call a function handle submit which will submit our form towards the backend server but before it we have to check our password validity so const handle submit uh function and inside this function first of all i am making an event as prop and e dot prevent default so our page will not redirect it to an other page which is a default behavior and we have to prevent this after this i will check if the is sign up okay if the is signup form is rendering then check the password from our data is same to the confirm password state from our data so this all should be in a check therefore i am giving it an if condition then do nothing and if it is false means the password and the confirmed password state is not same then the set confirm pass as the false okay so and by default it should be true so let's save and see okay there is an error okay because it is expecting a type of functionality here so i am just removing this whole thing and here i will say if it is not same like this then execute set confirm pass as the false now let's save this and here let's write anything and sign up so this is our confirmed password is not same okay let's login so there is an error while we are switching our mode from login to sign up and sign up to login the text fields are not clearing by themselves and this confirm password state is also here and this is not a default behavior therefore i am making an other function here and the function is reset form okay so an arrow function and i love error function i don't know why but i just love the syntax of arrow function okay when this function is executed first of all it will set our set confirm password state as true and our data will be just like the initial state so our initial state was this one so just copy this and paste it here so let's save and we also have to call this function while switching so i am going to so here on this condition of on click method i am saying after doing this work i should also have to do and other things so just make it a proper function because otherwise we'll give an error and here say reset form now let's save and see there is an error if i log in then everything is clear okay but still i have these values in my inputs so what can i do for each input here i will say the value of each input will be equal to data dot the name of input so password and okay that was confirmed path so confirm and then the pass now i have set all the value as our u state values so let's save this and now i'm refreshing the page here i have these things and let's say password is not correct i am trying to make the password as confirmed password not same go to the login and fields are clear and fields are clear so that is the behavior that we are expecting is time to connect our sign up and log into our back end and for this we have to make a complete setup of our redux store and don't panic i am going to guide you step by step of redux stored setup let's get start so basically in redux state management we have all our states basically the global states in a store these states are stored by the reducers means the state of type 1 will be stored in reducer 1 the type 2 will be in reducer 2 and so goes on the next question is how these reducers get the state these reducers seek for a specific action to change or to make a new global state and following this pipeline the action can receive a state from two sides either from a react component or from an api so overall let's device the api is sending a new state towards the action and action is sending this request to the reducer if we talk about our react component so our react component received thus global states from the store and now if any component wants to manipulate any type of global state then it will call a specific type of action so this is the total setup of redux store this is my advice for you guys if you are feeling yourself too much confused then don't be panic just take a screenshot of this image and take it side by side during the tutorial if any step you find yourself lost then just visit this picture and clear your thoughts let's move on so now to set up the redux store in my application i have to install some packages so these packages are first of all i am going into the client folder and here install npm redux redux thunk and react redux like this i have already installed this therefore i am not pressing the enter button but you can simply install them by writing npmi redux redux thunk react redux and so on so after installing them here i have to import a dispatch hook which is from the react redux so i am saying dispatch use dispatch like this i think i have to import it manually import use dispatch from redux okay so here i have imported the hook and there is the instance of our hook now how i am going to use this while submitting the form now i can change these conditions as i predicted here i will say if data dot password is equal equal to data dot confirm pass okay then dispatch our action as i have declared you in the visual of our react redux i mean in the image of our react redux that our component is interacting with the actions so here i am going to interact with the action of our react redux i know we have not set up any type of actions and reducers and store but let's follow me and see how i am going to make all of them step by step so here i i am going to dispatch an action of sign up that we are going to make and i am sending the data of my form as a parameter now if the password and confirm password is not same then i will say set the confirm password as false so let's format the code and here you can see of course there is an error because we have no action of sign up but before making the sign up action let's first clear this logic and else there is no sign up means our form is a login form then dispatch an action and inside this action i am calling the login action and here i am also sending the data this is as simple as that now let's make our actions so i'm closing all the directory inside the client inside the src make a folder with the name actions inside the action here i am making another file or action.js inside the auth action i will say export const login let's first make the functionality of login and the form data is as a parameter that i have received from our auth dot gsx component and this will be an async call to our redux thunk so therefore here i am writing dispatch and then this is again a fat arrow function i know this convention is little bit crazy but you have to remember this every time making actions so here we have to interact with our api which will call an end point to our server for the login so basically here if i write const and i will receive data from my end point and i will say await auth api that we have not made yet and inside api call the login function and pass is the form data so now we have no api to make this request let's make an api folder inside the src and i'm just saying it as api and inside the api i am making a file or request dot js to work with the request we have to install a package so just here right npm i exist this is a this package is basically used to make requests to our server side before using the axios we have to make some changes in our package.json otherwise our application will show errors so i will go to my package.json and here we have to declare a proxy for our server side so i am saying the proxy means proxy is a type of url that is accepted by our application to interact because if we allow all the urls to interact with our application then there will be a lot of vulnerabilities so to avoid this problem here we have to declare a proxy inside the package.json and our proxy is http and localhost 5000 just as this so it's very simple to add a proxy let's save the pack.json now inside my auth request here i am importing a package xeos from axios like this now i have to make a file for our api and inside api i will say axios dot create with the base url of our proxy which is the so here i have given a base url for our api means every time we make a request then it will call our 5000 port number okay now let's make a function for login so here i will say export cons login is equal to form data which we will receive from our action and api will make a post request as we have made in our controller and our path was the authentication part with the login endpoint and here the data is as the request dot body data till now our api request is completed for the login now i have to import this login inside my action let's save this and inside the actions now inside the authentication action i am importing these auth request as an api so i will say import all as of api from i should go outside and then inside the api and then auth request just simple as that okay so now we have this function as we are interacting with the database so here we should write a try catch block so this is a try catch block and i am making this request inside the try block and of course as we have for the error the error will be console log error but still there is something missing that still now we have not interacted with our global state management means the state that are in our store as we know that to store the states in our store we have to interact with the reducers so to interact with the reducer before calling my api endpoint here i will say dispatch or reducer with the type of authentication start start this means we are telling our reducer that authentication has been started and after this here i will tell my reducer that the authentication has been completed so authentication complete or you can simply say as which is a more general convention authentication success like this and with the authentication success i will also pass the data of successfully authenticated and in case of any error here i will again call my authentication reducer and i will say as type authentication and fail so this is a very simple scenario of our action that first of all we are telling our reducer that authentication has been started after receiving data from server side i am telling my reducer that authentication has been successful and then i am telling if there is an error that authentication has been failed it's time to make a reducer to handle these dispatch functionalities but before making those reducers first of all let's fix our authentication.jsx as there is an error so i am removing these two to three words and calling again sign up so it should auto import and there is an error that it is not auto importing sign up because we have not made sign up in our authentication actions okay so this is natural so login should work fine so if i again write login so here it is saying that login is available in authentication request and authentication action and we have to call it from authentication actions so let's save this of course there will be an error for the sign up so let's make an api request for the sign up function so here i am just copying this and just pasting this and here right sign up like this and all the data should be same and there i am just writing register because that was our end point by the way you can visit your end points again by going to thunder client and here we have our all the request inside the auth request this is our register request so as you can see that this is auth register so similarly here i have pasted the url now let's make an action for the sign up so i am just copying our login and here paste it like this and now here instead of login i will say sign up like this because here i am exporting all of my functions in the auth api as the star so they all are available now here instead of login i will write as sign up so this is also going to be let's save it and here i am just auto importing it by writing sign up for the authentication actions so now it's time to make our reduces that will be connected as here we are interacting with our reducers by dispatching a specific type of actions and we don't have any reduces yet so inside the src i'm making an other folder with the name reducer inside the reducers i am making a file with the auth reducer.js in the auth reducer.js we will contain every data related to a user information so here i will say auth reducer and it will be a function that will carry a state and inside the state first of all we have some authentication data and by default it will be null means at the start of application the loading of the data will be false at the start and error will be also false just like this so now we with the state there will be also an action this action basically will be telling us that which type of reducer we have called from the actions and inside the users which type of action is called so here i am making it an arrow function as we always do in our javascript so just format the code okay so here it is an error of the auth data because here i have put an equal sign so now let's format the code again okay now you can see it betterly now inside the function first of all i will make a switch statement and this switch statement will be depend on action dot type okay so inside the switch first of all i will make a case for authentication start so here inside authenticate start i am just copying this string authentication start and pasting it here like this so when authentication start action will start then it will return our previous state so i am just spreading it making loading as true and error as false and we should also make a default case otherwise it will continue to give this yellow line so by default it will return our state as it is inside our parameters this one okay so our second case was authentication successful so i am again going to just copy this from here authentication success just copy this and paste it here and it will return the previous state and our off data will be changed on success our odd data will be the new data that is carried in our action so inside the action it is carried inside the data key because inside the out section we can see that we are sending our authenticated data as the data key member so here i am receiving it from my action as action dot data now loading will be false because we have successfully retrieved the data and error will be also false let's format it again and it's time to make our last state of reducer which is the authentication field so to make this last state here i will say case authentication fail inside the actions i am just copying this copy this and paste it here like this and in this case i will simply return my previous state by spreading it and the loading will be false because we have reached some end point and error will be true because at this state we will only reach when there is an error from our server side so error will be true let's save this so now we have successfully made our authentication reducer but there is one thing that we should do while making our authentication success that as we are saving our data inside our authentication data key of our authentication reducer state i will also save our authenticated data in my local storage so for storing the data in local storage i will say local storage dot set item and item will be set with the key value of profile and then json dot stringify our action dot data as this is the data that is sended by our authentication action after a successful endpoint we can also apply here a chain operator because we are not always sure that we have received a data so therefore if the data is available then it will be stored in our local storage so i should make a text small so it will be visible yeah okay so it is just enough now let's format the code again here you can see i am storing the data in my local storage but the reduces are not just enough the files of different type means authentication reduces post reducer there is a common file of all the reducers from which the reducers are accessible inside the actions so let's make it inside the reducers i should again follow the directory here inside the reducers we have to make an index.js okay and this index.js is specified for all the users in our application here i am importing a package called combine reduces from redux okay this will combine all the reduces we have made in our project now i have to import my auth reducer so i am auth reducer from i think so yes like that i just think that we are not exporting our authentication reducer for mouse reducer.js export default auth reducer this is our basically the main function of authentication reducer and let's save this and now inside the index dot gs after this i am making a common file for all the reducers and telling it that reduces simply and then combine reduces inside the combined reducer let's include our authentication reducer now let's save this okay it's time to make a store basically inside the store we will hold all our states so here i'm just closing src and i'm making a new folder inside the store i'm going to make a file which is the redux store.js so inside the duckstore.js i am just simply pasting some code okay so what is the purpose of this code and why i am not explaining this code line by line to you because every time you are going to make a redux store in your application the code is going to be the same for every project you may see many other type of methods to make redux store on youtube and in many more blogs but why i am using this such a long method because the bonus part of this desk with making the store available for our reducer it is also making our reducer persisted mean whenever you refresh the page your state will not be lost they will be in your local storage so i am going to give you an overview of this code that first of all here i am importing some important packages from the redux to make a store and inside these packages there is an apply middleware package also because we have to apply our redux thunk middleware okay so here i have imported my redux middleware for the asynchronous performance and here all over reduces let's i double check that it is in the same directory reducers and inside the reducer indexed yes so yeah this is all the way correct okay after this here we have function to save our states inside the local storage so it is just serializing all of our data available in the store as we are passing it in a parameter and giving it to all local storage and in the loop and in the load from local storage as it is obvious from the name we are retrieving our data from the local storage so now there is our enhancer that is a method to make the store available for our redux dev tools and inside this line of code i am making my store as this is a very common function to make a redux store here i have given by all the reducers where the states lie and there is a persistent state of our local storage and here i have applied my thunk middleware okay now our store is subscribing to our local storage means every time there is a change in our store states then the change will be reflected in our local storage and finally i am exporting my store now we have to make this store available for our application inside the project so to make this available i am opening my index.js of client side okay there are two method to open these long directories by going manually and there is an other method to search for the same file index.js okay so let's close this and just enter control p and write index.js so here you can see i have found three index.js files one from the server side other from reducers and this is from our client side which is required file so i am opening this now just remove this coma and here write a provider and this is a method of our react redux and here it is providing a store which is coming from our redux store file so just close this component and here i have to wrap all of my app inside this okay let's format it now let's save and see if our app is crashed or working fine so let's try to make a request for the server for registrar a new user let's say john and here the user name is john gmail.com password simply john and then the password john let's sign up and see our network tab so okay this is an error already the excuse error let's see in the network and i am going to send the request again sign up and here is the our request why it is filled so it is saying strict origin when cross origin so the solution of this problem i am going to index.js of my server side here i am going to install a package so i am opening a new terminal and going to server side here right npm i course codes basically allow us to send requests through the cross origins means we are sending requests from the port 3000 to the port 5000 let's wait till it installs so here it is installed now here just below the dot env i am importing the course from the course so just like this and now i am configuring my app to use this code so i will say app dot use the course policy so let's save this and our server should restart to restart my server here i am deciding rs it will restart my server so let's just wait okay so it now it is listening let's try to send our request again and i will clear all of my network request now let's send it again sign up and here you can see our request has been successfully delivered to our server and the response is and the response can be seen in the final request inside the preview here you can see a new user has been returned from the server and here you can see the password is now manipulated by our bcrypt library that we have made in our rest api part now let's try our login functionality so i am going to for the login as i have made a john so let's make a john and password was simply the john let's login and the request is again successful here so inside the preview here you can see we have returned successfully uh john user from our database so both our functionalities are running successfully now it's time to see some changes on our ui so here i want when my request is pending then there should be a text saying loading instead of this login button and same for the sign up button so i will go to the authentication dot gsx and here i will retrieve the loading state from the redux store so i am going to retrieve the first of all i am make a dispatch okay so this patch will be equal to use dispatch hook from our react redux now i will say cons to loading which is of which is the part of our state and i i will say use selector which is also a hook of our react redux to fetch the global state and here i will say from all state just fetch the state dot auth reducer so reducer as was our function and from this function just such the loading variable so let's save this and here i am again saying two errors because there are two times you dispatch i have already met made it so let's just delete it okay now before using this in our ui i should just console log my loading variable so here i am saying loading let's see in the ui what will be changed uh during the login i will say joe john at the gmail.com with the password john now log in and see our console so here it is false false and true means it is working fine okay so from where we are getting this loading as we have made in our redux store and for more specific in our authentication reducer so i should just open the authentication reducer so here's our authentication here you can see inside our auth reducer function we have our loading key so i am just fetching it by the u selector hook and you should also know that on our authentication success we are also storing the retrieved data in our local storage so let's double check our local storage i will go to the application inside the local storage here you can see first i have a profile because i have set up it here the profile key and i also have a store okay so let's forget about store for now just focus on the profile that we have made manually in our reducer and in our reduces we have successfully stored the data of our user that has been retrieved and same process will be repeated for the sign up function now to see the changes in the ui i will go to the authentication.jsx here and for our login and sign up button i have here so uh i'll just say the condition will depend upon loading and if the loading is true then just return the value of loading string like this and if it is not then check the second condition so if i watch it on my login page here if i log in then you can say it is saying login and then it becomes again the login button and i also want when there is something loading and pending then button should not be clickable so to make it clickable i am making a class in my app.css so here inside app.css i have my button hover so now i am making a button disabled so on button disabled i will simply make the background as silver and my pointer events will be null because uh by saying the pointer events none the area becomes unclickable so if i save this and now i have to apply this class on my button here for the button i'll say disabled property will depend upon loading so if loading is true then disabled is true otherwise button will be clickable now let's test it here if i log in so now you can see how beautiful it goes into the loading and then it comes back and similarly there will be for the sign up so let's try it and i think so i already have a user with the name then but you can see that here it is signing up successfully now it's time to implement our json web tokens on our server side and it is a very important and critical topic to understand so i am opening my vs code and just simply go to our auth controller in the server okay so now while registering a user i was just receiving the username password and some also field from the request.body so now what i am going to do i am just deleting this line of code okay and why i have just deleted this because i can simply use the request dot body because uh now i assume you have a clear idea understanding by watching the previous part of our social media application that how the rest api works so now we can take some kind of shortcuts so inside the body i just simply write request dot body and to remove this error we should remove the curly braces from both sides okay now you will think how we can implement the hash password so to implement the hash password i will say request dot body dot password will be now equal to hash password as simple as that after this i will fetch the username from the body so user name will be equal to request dot body and i just noticed that we are missing a functionality that we are not checking if the username is already registered on the same username or not so to make this possible before saving the new user i will say const old user will be equal to await user model dot find by id or you can just simply say find one and find one where user name is equal to that one we have exported from our request dot body after this i will make a condition that if old user is true means if old user exists then return from our controller with the response of status 4 400 like this and inside the body let's the user name is already registered so the new user cannot be registered on our platform let's save this and let's hope there should not be any kind of error okay there is an error that okay inside the json i should make an object by a key value pair so now the error should be removed our server is starting again and now it is successfully started on the port 5000 let's try to register the zone user again so here's an rk and let's say john gmail.com sign and before signing up let's clear our network tab and here i am sending request and inside network tab okay it is pending now and here we have the error and inside the error there should be a preview so there i am not noticing any type of response let's see why okay inside the server there is an error that we are using password and we have no kind of password in our controller so yeah here we cannot simply use password now we should write request dot body dot password let's save it again and let's see our server should run properly okay now it is running properly and i am going to send the request again before i should clear that network tab let's sign up okay so here it is saying username is already registered means our endpoint is working very fine it's time to implement our jwt means json web token authentication so for to implement json web token authentication i am installing a package inside my server directory here so i will install npm i json web token so it will take some time let's wait okay here it is installed now now i should import the jwt from the json web token import jwt from json web token and it's time to make a token after saving a new user here i am making a token and for the token i'll say jwt dot sign and for the signature it will use the user name of the newly registered user so it will be available in the user dot username and from where we can get this new user so i should have a response by saving and let's say it is then it is the user so after saving the news user it will also return us that user and inside the token i am using that user for the signature okay beside the username i should also use the id of that specific user and now it's time to pass some more parameter for our token the second parameter is the secret key of our signature as you can see it is saying secret or private key and for now i'm just using trigger key as mud okay and the third parameter is the time limit of our tokens i am saying expires in and let's say one hour means after one hour our token will be expired the same user cannot use the same session after one or he or she should have to login again okay we cannot simply just use this string as openly in our controller we should store it in our dot env file so inside the server inside dot env and i should go to the next line and here i will say jwt and key will be equal to one and just copy the name from here let's save this and now here we can see process dot let's save this and we know after making changes in our dot again we have to restart the server so there is a server decide rs and it will restart our index okay so i should send the response as something like this the new user and the token okay so now the user and the token will be stored in our local storage and in our redux store let's try to do this so here i am going to make a new email let's say eric at the rate gmail.com and eric okay and then eric let's sign up here okay so there should be a response okay so it is returned correctly and in the response we have also our token that is expected and now inside the application for the profile we have a token and a user data and same for our authentication store inside the authentication reducer authentication data has two values this means we have made a successful deployment of our token generation at the server side let's move on for the login site so for the login here it was controller to handle all the login requests and let's make this situation more simple for you guys okay in simple terms i am saying if there is no validity means the means the decryption of our password as stored in the database with the password that has been received from the user is not valid then simply send a response of status 400 and inside the json let's simply say wrong password and if it is not then we have to do a lot of work because in this case we have to implement all our jwt authentication so instead of writing it again i am just copying this token from here copy this and i am pasting it here okay because i also have user and i should yeah there is the user because i also have user here so our authentication token can take the username and the user id now in the response i will send response dot status with the 200 code means the ok and in the json i am sending the user and my token now let's test this and first of all let's see our server status is it running fine so it is running fine here let's go to our ui inside the login and again test for the john and the password was john let's login and inside the network tab now we have the profile with a new token and i am confirming the new token because now we have a username john gmail.com for more confirmation let's go to network tab inside the login and this request was accepted okay so here the user and with the new token and that was our payload with only username and the password so now our jwt token generation has been deployed and our controller has been changed our next task is to implement routing on our client side because we want whenever user successfully logged in or sign up he or she should go to the home page of our social media application so to do this here i am going to the index file of my client side here now first of all let's install the packages for the routing so here i am going to the client side okay and before going to client side i should go outside and then click like this now here write yarn add react router dom and press the enter button so here my react router dome package has been installed successfully so now let's go into the index.js of our client side and here below the provider i am routing browser router and i have to import this from the react redux from the react router dom so let's say browser router from react router dom okay with the browser router i have to import the routes i think and the route so we are going to practically make this social media application according to the react router version 6. and inside the version 6 we are using these routes and route mechanism of routing because switches are no more available in react router latest version so let's format the code and now simply remove this app component and make it inside the route so routes now contain a route like this and the path will be the most banned path and we are delaying this as a star and on the most parent first of all let's simply render the app component okay i have to also close this route so let's save this now go to the app.js our all the routing mechanism or the logic is basically held in the app.js so now simply remove this authentication element because now we are not rendering just by writing manually we have to render them according to the routes first of all import all the important classes routes route and i think the last class should be done navigate because we have to navigate from one page to another from the react router dom now let's save this and here start to make the logic first of all there will be a parent class which will contain all the routes and our first route is going to be the part with just a slash and when someone hits only a slash on our social media application then element will be rendered according to the availability of user in our react redux store so i am going to fetch the user from the use selector and from the state let's go to the state dot auth reducer dot auth data so now i am saying if the user is available me the authentication data is available and there is a problem i have written it inside return it should be above the return okay so if it is available then navigate to the home page so i will say navigate to the home directory okay and if it is not available then navigate to the authentication site so navigate authentication route can be simply declared like this now i have to close the parent route component okay after this the second route is going to be the path element with simply home if someone wants to go to the home page then again we have to check the availability of the user if user is available then navigate or instead of navigating we just simply return the element home which is the home page inside our client side directory and if it is not then navigate towards the authentication site so navigate to remove the previous path and append the authentication let's close navigate and close this route the last out is going for the authentication page okay so if someone is trying to go authentication on authentication i am again going to check the availability of user and if user is available then navigate towards the home route so navigate towards the home and if it is not available then simply return the auth element like this so i should close the parent route let's save and i have made a general formatting so now you can see our complete logic let's try this so here now we are on the homepage it has detected the logic that uses available in the application memory tab but i want to give a practical view of login system so i'll go to the application side and i'm deleting all the local storing key values and let's refresh the page in our authentication site let's login with the john okay so john and the password will be simply john like this now login and here we are on the home page you can also try this for the sign up but i am not going to again check it for the side note because the tutorial is already very long it's time to implement our share component logic because i want when a user is logging and he or she tries to share some kind of photo like this and press the share button then the photo will be added to its timeline and then we further move on so i am going to the vs code and here open the share okay so the post here dot jsx here first of all uh just go to the image section where we are setting our image inside the state hook so where this image okay this uh the image that we are setting in our you state hook image so i am just removing this url dot create object from there and let's remove the braces and i am making this url object image directly on the image of the preview so here i will simply say the url and then as we know that there is no image dot image so yes basically uh i should remove this object type scenario okay because i found a little handy that set image directly to the image and here i am converting this image into the you state create object url so it will be visible let's check this by selecting a photo and here it is okay so after this we should make a functionality for us uploading a new post okay so this is our button of share on click let's handle the submit okay so let's make a handle submit here let's make const handle submit and the arrowhead function means the fat arrow function and i am receiving even parameter here and prevent default because i do not want to redirect to an other page on clicking this button and after this i am going to make a type of post that will be acceptable on the server side so if i go to the post model okay so that was all small the server you can see we have a user id or description some likes and an image so by following this type of convention here i am making a new post to upload on the server and it will contain a user id the user id is going to be the id of user that is logged in so to fetch the user i will say const just pick up the user and again use the use selector hook and then from the state fetch the state of our authentication reducer okay so authentication reducer dot auth data as we are destructing our user so we can simply use here user dot id okay why it is user ref i don't know okay and that description because the exception necessity for making a post but still we have no use state hook for fetching the description let's i am using the use ref of our react so hi so how i am going to use this here i will make a cons description and it is using a use ref so yes use ref now i will give its reference to our input where is our input this is our input here i am going to give a reference which is of description and to ensure its availability i am going to make it required necessary let's format our poll code okay so let's see here now we can use description dot current dot value okay like this now i should check if the user also want to upload an image okay so i am saying if image contains some type of data or simply the image is true then make a constant data which is going to use the form data function it is a very common function you can see its documentation on the internet okay after this let's make the file name of that image according to the current date plus the image dot name so basically why i am doing all this stuff as you know in the documentation of mongodb they say themselves that storing the images or any kind of media in the mongodb database is not a good choice you have to make a separate strategy to you know store the images and any kind of media so in such scenario we generally use a third-party cloud-based service like the aws and there is also firebase a very popular but for this tutorial we are going to make it simple i will store all of the multimedia in my server local storage and then when someone wants to fetch the data i will just simply call the name of that image from the local storage and display it on the ui so for that stuff here i am making all this code that if the image is in the user's post then make the file name of that image according to the current date and the image name and this date basically store the time and the date and the time is even precise to the second so there will be no two images having the same name okay after i will say data dot append and the name uh will be according to the file name that we have made and data dot append file will be the image that we have selected and new post dot image okay so why i'm saying here the image because inside the model we have the name image the image will be the file name i'm just storing the file name because here you can see i have only the string type okay let's say console dot log new post at this point i want to console log my new post let's save this and try to refresh i know it's hot reload but still let's see our console inside the console [Music] now i put the share button and here is our new post which is having a description image user id okay let's make some kind of description let's here again and now there is a description image and the user id time to make the functionality for uploading both the image and the post data so first of all let's just consider the image so here i am making a try catch blog because now the calls will be interacting with the server directly so dispatch and event off so this dispatch and why the auto suggestion is always teasing me okay dispatch the upload image action which will contain this data okay because now the data have a file name and the image and if there is an error then simply just control log the error it's time to make the action for upload image so inside the client side let's first close all thing and src there is our actions i am going to make upload action dot gs inside upload actions.js export cons upload image which will receive the data and again for the redux thunk make it async dispatch and again the arrow head let's try and catch block in case of any type of error simply i want to see the details of errors so there is an error and inside the try i will say await there should be an upload api inside which there should be a function of upload image which will carry the data of our image now it's time to make an api for upload image function so let's close inside srs inside api here i am saying upload request dot js here i have to just copy this thing uh like axios and the base url so let's close this now and so now i'm in upload request paste it here and i'm going to make const upload image will be equal to data and api dot post to the upload path in our server with the data it's time to make an end point in our server to upload an image but let's fix the previous files so inside the upload actions import the upload image as impose steric as upload api from api and then the upload request okay now let's save this and import this here so okay let's see from where it is imported yeah from the action it's okay let's see there is an error okay there is still an error that upload image was not found inside the upload request let's see why inside upload request okay i have to export it okay so export cons now let's see okay dispatch is not defined so because i have not made the dispatch hook available so cons to this patch will be equal to use dispatch like this let's save okay now there is no error we can simply move to our server side so now i am going to the index.js of our server side so here inside the index.js okay here i will make a route for uploading the image but before importing the route here first i have to define the route so inside the routes i am making and other file with the name upload route.js okay so here first of all import the express from the express server and then make a instance of router so express dot router now we have to install a package to make the image uploading on the server so here i am in the server directory and here right npm i melted so multi is basically a package that makes us a very easy and handy to upload the multimedia on the server side let's wait for its installation here it is installed okay so now here i am importing the multi import multi from multi like this i am going to paste some code like this so why i have just pasted this code because the code that is going to remain always same in your project i just copy and pasting them there is no use to explain them one by one or you can say word by word so basically i am going to give you an overview that first of all it is subscribing over this storage with the destination of public images so let's make this destination inside the server i am making a folder the name public public is basically a folder that is openly available for the public to use or for the users you can also understand it as a cdn we can store here videos images and we can use it for our local storage purpose and inside this i'm making so the folder is going to be the images so we can use it to upload our images and here is our destination and the file name will be the request.body.name because we are sending it as if we remember here inside the where is our action let's make it by control p upload actions here we are sending the data and inside the api let's so you can see we are sending the data as a post method in our http request so so we are using the same method for receiving in our melter let's go again to the route upload route yeah here okay let's define the route here i will say router dot post means it is receiving by the post method upload dot single it is a middleware provided by the builder and the file then the request and response the arrowhead function and here right inside a try catch block if there is any type of error then log the error otherwise send the response so return response dots status with the status code off and inside the message i will say file uploaded successfully like this okay it's time to make this router available inside our index server so here i will say import let's see if i have exported okay first of all here export default router okay now inside the index is import upload route from the routes folder and then the upload route dot js and then at the end we should say app.used when someone is calling the upload route then go for our upload route so upload route here okay so all the configuration is completed now it's time to test it okay so here is our application i am selecting an image let's say this and send this now i should see in my images here we have an image okay inside the server means our motor is working very fine it's time to upload the post data with the images so let's close these upload routes here and go to our share post okay she post here.jsx so here i am inside the post here.jsx and we have made our image uploading successful by using this dispatch okay and this condition of image uploading was started here and ended here after this i have to dispatch an action for upload the post data and post data will contain basically the description image name and the user id and so let's upload the data like this and basically this data is lying inside the new post so here i can write new post because a new post is a user id description and the image name okay it's time to make an action so i will go to the upload action there are upload action and here i am making export cons upload post and then upload course will contain some kind of data async dispatch and then after dispatching there should be a try catch block because we have to check with our database inside error there will be console.log error okay the new post will be returned from our controller which should be upload api dot upload post and it is containing basically the data basically it is not a controller it is our request and controller on the server side let's double check if our controller is returning the newly made post so post controller and here we are creating new posts and it is only returning the string created and post created so instead of just returning this string here i should write new post like this let's save it and our server is starting let's hope okay so now it is restarted after i am just closing this and here the new post will be returned after successful and we have to dispatch our reducer the type of this user will be upload successful so just upload success and similarly i also have to make a dispatch here and here i will say upload start like this and similarly uh upload and upload this reducer should also be dispatched here and here i should say just the upload fill like this it's time to make the reducer for our post so inside the reducers here i will make a new file which will say as post reducer dot js inside post user dot js cons post reducer and it will carry the state inside the parameters so by default the state will contain posts as null and loading as false and similarly error also false and uploading will be also an other key at the start it will be also false after this there will be our second parameter action okay it's time to define the function so for the function here i will make a switch as we have also made in our authentication reducer it will depend upon action dot type so in this switch i will say case if the case is upload successful so just copy this so just copy this string paste it here and i'll say in this case return our previous state by spreading it and loading as true and let's say it's not loading it's uploading true so uploading as true and error as false now there should also be a default case so i will say by default it should return the previous state like this okay the second case when the upload is successful so upload success should also be copied i'm just copying pasting string so we can avoid any type of typo so return state and here i have to manipulate my post so i will say the post okay so the post will be an array and the first member of this array will be our newly made post will which will be available inside the action dot data and then separate the previous post so state dot post the uploading [Music] should be false because no action is completed and error should also be false okay let's turn on the word rep it's time to make our last case which is the upload field so again go to the action here we have upload fill and just paste this here now return the previous state and in this case our uploading should also be false and errors should be true okay let's say this is time to include this post reducer inside our index.js of reducers here i'm importing and let's say if i am exporting it no i am not exporting it export default post reducer yes let's save this and say index.js import this as import post reducer and add it into our reducers because it is used for combining all the reducers in our global state so post reducer let's save it okay so basically our action is completed but let's see if we have our upload post api because we have not made it yet and here make an end point okay so export forms upload post with the data and it will be api dot post and it will be directed towards the post because inside the index.js of our server okay index.js on the server side have a route of post and there's a post route so i am declaring the post string which will carry our data let's save this and there is no error on the server side our client is also running fine and it's time to test okay so there is an error basically on the server that cannot read properties of undefined state inside the post reducer so basically there is an error with our state let's see why this is happening okay inside the post user okay this should not be inside an object okay they are the independent parameter now let's see again okay let's clear all the errors from the console and i am trying to upload a photo and let's say new glasses let's upload this and okay state dot post is not iterate table let's see why if i have received a network inside network okay a post has been returned successfully then why it is saying the post state dot post is not iterable let's see why it's happening so error was inside the fluid action that while dispatching our upload success reducer i was not sending the new data so here i should say the new postdate dot data should be send it to our post reducer and here are all the logic same so and basically i have changed it to an array instead of the null because it's making more sense okay so now what i'm going to i'm just deleting all the memory applique all the application clear the console and let's try to login again so let's go to login and here john gmail.com john let's sign in and i'm going to upload this new image and let's say okay let's close this never okay let's say this as hat and share this now inside the console there is no error and inside our application post reducers have a post okay and now let's try to make an other post so it's just like profile let's share this and here inside the post reduces i have two posts now so that means this is working very fine it's time to make some changes that after uploading a post this section should be clear and this input field should be cleared and our share button should also behave according to our server response so what i am going to do first of all inside the post here i am going to say const loading is equal to use selector so you selected the stage dot post reducer basically and then dot uploading that was a key inside the post user here you can see uploading and we are changing it during the post upload so okay it's true false and now false okay so here i'm retrieving it and now inside my button this is my button here i will say the button should behave according to the loading if it is true then it should say uploading and if it is not then it simply say the share now let's try again here if i share it like this so okay it's working fine and i also make it disable while uploading so here i will say disabled should be equal to okay simply loading let's see again okay it's working fine now time to reset our share component so here i am going to make a function with the name const reset and then inside the recent i will say set image as null that is our use statehook and description dot current dot value should also be equal to null so as i have to also call this function after successfully submitting our new post so yeah just at the very end of our all the procedure here i am calling the reset okay so let's see this how it's going to happen here i am uploading a new image new image let's share this and here it's working very fine and we should also have this in our application so post reducer inside the post we have after is our next task is to get the timeline post and our timeline should be according to the followers that we have followed and in timeline we should also see our own post so now i am closing all the files that has been opened and now open the post component from our client side okay inside the post component here first of all i am making our dispatch hook instance from dispatch so use this patch let's import it sometimes that intelligence doesn't work so import use dispatch okay it's even not working here from react and i also have to import the use selector so you selector just like this so first of all i will fetch the user from our global state from the redux store and here i will say you select carry a state and from the state dot auth reducer and here you can simply say the auth data so from our data we will fetch our user after this i also have to fetch the post from our global state let's say the post and similarly the loading variable should also be fetched from the use selector state and the android function state dot post reducer just like this okay now we have to render the post according to the posts available in our global state there is no use of the data that we have made for the front end purpose here just delete this okay so now our project is undefined here which is a normal behavior here i should write the post that i have received from our redux store now to fetch the post at the start of our application here i will use the use effect okay so inside the use effect let's make a arrowhead function and here i will dispatch the action of get timeline pose and i will give the user dot id as the parameter and user is fetched from our global state now let's save this and it should depend upon nothing so i am giving the dependency array as nothing it's time to make an action for the port so inside the actions i am making a new file and saying it as post action dot js let's export cons get timeline post as i have mentioned get timeline post let's double check get line line post here paste it here and it is only carrying an id let's make it an async with dispatch okay after this it will dispatch the reducer of type which will say retrieving like this retrieving start okay and then it will make a dry catch block inside try catlock it will carry the data from our server side by await post api dot get timeline post and it will also send the id as a parameter and then we'll dispatch the reducer of type the retrieving successful okay so retrieving success like this and it will also send the data in the action so the data will be data that we have fetched from the post api after this there will be a last dispatching of fail so here i will say retrieving fail just like this and we should also console log the error so console log error let's save this and it's time to make a post api so inside the api i am making a new request the post request dot gs inside the post request left first of all copy and paste this okay because this is going to the same in each file and then write export cons get timeline post and it is carrying an id as a parameter then api dot get as we have inside the server the post and then there should be an id so we have to use javascript inside a string so i will make it in a backticks like this now here a dollar sign inside those and there's an id and timeline okay let's double check it by going to our route so route post route and this id with the timeline okay save this inside the action i have to import it import steric as post api from the okay api and then the post request let's save this and now we have our action completed inside post we are getting so just import it manually from the actions and now it's also working fine so let's see what happens here we have all the post that we have made here but we have no images inside our post because we have made no logic inside our post component to show the images that we have stored in our server side so what i am going to do first of all i am opening the chrome terminal and here inside the application tab i am just removing this user and i am going to make a new user okay so here i am making a user let's say mark and zuckerberg okay and here mark at the rate gmail.com password mark confirm password mark let's sign up so basically the benefit of doing this is now we don't have to mess up with our old created post because there are some messed up with the images in the server directory okay so let's make it from the very start and here as i have fetched inside the post the loading variable so i will make this post.map which will depend on this loading so i will say if the loading is true then write the fetching post and if it is not then we can do the following work let's try again okay i am making a new post so keep smiling faces and let's hear this okay so this is our first post and we don't have its image so it's time to fix our post.jsx what i will do i will go to the post.jsx simple so okay this is the post and here first of all i have to fetch our user from the global state so i will say you selector the state and then state dot auth reducer dot auth data okay after this here as i am fetching the data dot image so now i have to implement a different type of logic for fetching the images from our server here i will say if the data dot image is present then go to an env file okay process dot env and now i should remove this space because i did this this the auto suggestion okay after this i will say react and public folders so this is like public folder as we don't have any type of this content in our process dot env so let's first make an env file here inside the src and yeah here inside the src i am making our dot env inside dot env just copy and paste this constant name so just i have pasted it okay let's remember one thing if you are going to use the process variables or you can say the environment variables for the client side mean for the react side then you have to start the name with the react app it will only work when the name starts with the react app further i will specify the destination on our server side which is localhost and 500 5000 sorry and then the images folder where we have stored all our images as you remember here inside the server we have this public and images section okay now to make this section available for the public to use i will go to the index.js for our server okay here just go to the upside and okay after making an app i will making a comment to serve images for public and then i am making some more configuration app dot use express dot static the public folder and then write app dot use images directory like this and express dot static again and call it as just simple images so this is a very simple configuration to make the route of images available for the public to use now let's go to our post.jsx okay so here it is still giving me an error and the error is unexpected token so where is that okay because i have not made the else part first of all if image is present then go to this directory on the server side and also see for the data dot image and if it is not then just return nothing now let's see our posts so we are seeing nothing on our client side related to images and if i open my console so basically here you can see that it is not acquiring our destination of server side so why this happening because we have to restart our client side because we have made a new type of environment variable so okay also my mongodb is not connected let's clear this and again start the client side by writing yarn start let's wait and close this okay still it's not fetching anything let's see why this is happening right now it is saying failed to load the resource server responded path is still not defined so the main problem is that of process dot environment variable is still not working so i have just debugged and i found that our dot env file was inside the src folder and i just moved it outside the src in the parent client directory and i don't know is this is the real reason of why it is not working and the other thing i have did i have just restarted my client side so these are only the two things that i have did as you can see here i restarted the server and here i have restarted my client side and everything is now working fine as you can see and if you are also facing same type of issue then you can also do these tips as i have mentioned you let's first try it one more time by making an other post like this one and i am saying it glasses now let's share this and it's uploading okay now we have an other post at the top of our previous post me it's working fine with the description it's time to handle the number of likes and how to like and unlike the post so for this i will go to the post dot gsx and here i am going to make a used hook which is the like and set like let us make the functionality of liking so use it and inside the use state i am using the data dot likes dot includes the current user id okay so if inside the likes array of post if the current user id is included then the liked variable or the val or the like you state will be true and similarly i am also making an other use date which is the number of likes to simply say the likes so i will say set likes with the use state of data dot likes dot length so why i am using this because i have to declare them inside the post and here i have messed something i have just removed the return statement so okay now i also have to import this you state hook from react after this here in the data dot liked instead of doing like this i am just saying it has our use state like okay now let's see and nothing will be light because we have not liked any post i also want whenever someone is trying to like then the cursor should be like the pointer so i will say style and on styling cursor will be like pointer let's save it and now you can see how beautiful it's working now let's go further down and here instead of saying data dot likes i will say likes let's save this and now as you can see we have the zero like because none of our post is like till now after this first of all let's make the functionality of liking a post so where is our like button here yeah i am saying on click uh post make the handle like functionality in execution so on the upper side just below these use states i am making a function handle like and [Music] okay so first of all on clicking the heart button it will set the post as like so we'll say preview will take the previous value and set the negation of previous value as this so okay this is an error you are attempted for the post controller so why i have did this where i have post controller okay nothing like this let's save again now you can see we can like and unlike but there is no back end for doing this okay to connect it with our database i have to make our request on the server for like a post and there i'm just sending the data dot id which is basically the id of our post and the user dot id basically the id of the user who have liked the post and after doing this i also want if the post disliked then set likes okay the previous value is taken as and previous value minus 1 will be returned because if the user again touches the like button then the post will be unliked and if it is not unlike then set likes take the previous value and set the previous plus one like this one so okay again this is an error because it is always auto importing let's just comment out this for now and let's see here you can see this is one like now zero likes so this is the magic of react okay now it's time to make a request on the server so inside the api inside the post request here i will say export const and like post which will contain the id and the user id as the parameter and api dot put request as we have made in our rest api part okay after this visit to the post route and give the post route the id of our current user like this and call the like so then user id and the user id that we have received from here okay there should not be a comma okay so this will be sent in the body the user id and the post id id will be sent in the parameter so i think it should work fine now let's import this in our post.jsx let's comment out this and here okay from the post request let's see if it's working or not so now these are post let's like a post and let's see here this is our like post and it is saying post like means our functionality of liking our post is working fine now okay and if i again click this then i should receive a response from the server that post is unlike so if i again click this and so this is the response from the server post unlike so means the total mechanism of liking and unliking a post is complete now it's time to further move on let's just like these two posts because these are our own post it's time to fix this profile card for the home page so now i am going to the profile card section so profile card dot gsx okay so here we are on the home page and therefore i am just making the profile page very constant as false so it will render its home page version okay because we have here made some conditions to render differently on the profile page and the home page and of course we are going to make it dynamic by routing and logics but first let's make it false and this is our page version of card so let's fix this for the home page so first of all we have here cover image and profile image but we have to extract our user information from the redux store so again i will say const user is equal to the i think so now you are used of this logic that how we are going to fetch the data from the redux store and how we are using in different components and how it is making our life very easy okay so inside the state let's make the state dot auth reducer dot or data okay like this and now inside the src i will say if the user dot cover picture like this if it is available then what to do then again just to make the similar logic have to fetch from the server side and instead of writing the whole process dot env again again and again and again what i will do here i am just making a constant with the name server public folder okay the server public will be enough and it will be process dot env dot react uh just simply copy the name instead of writing this so copy this from here and i'm pasting it here let's save and now i'm saying user dot cover picture is available then use the server public plus user dot cover picture which is the name of cover picture and if it is not then i have pasted two images inside the images folder of server this is the default profile picture and this is the default cover picture so i am going to use them okay if it is not available the covered picture then use the default picture so i will say server public default and cover let's save this and now okay we are not printing our default cover let's say see the name again here if i mistaken it okay default cover dot jpg let's see dot jpeg now save and here we have our default cover picture rendering successfully similar type of logic i have to apply for the profile picture so i'm just copying this from here and pasting it like this and instead of our picture now it should be the profile picture so profile picture and there is also default profile so default profile now let's save this okay again it's not rendering because let's see the name again this is the default profile dot png this is only a typo in the names of our images so let's save this and i'm closing this and here we have our default profile i should also apply this logic on our share section for this image so i am going to the share post here.jsx and that was our profile image so i am just removing this and copying the same logic from here okay so just copy this and pasting it here and making the same variable inside the post share section so let's make it on the top okay let's save this and here we have our default profile picture it's time to set up this number for the following and for the followers so let's close this and okay so before following follow we also have the name that i was missing so i will say the user dot first name and also the user dot last name it will be combined let's save and here we have mark zuckerberg and for this thing i will say user dot works at if it is available then see the user dot works at and if it is not available then simply write write about yourself okay so write about yourself let's try it okay there is an error and the error is because i have forget it to close this so it is saying right about yourself now it's time to solve this number problem here i will say user dot following dot length okay length like this so this is the zero now and okay it should be only calling not following okay and for the followers i should apply the same type of logic user dot followers dot length let's save this and both are now zero it's time to fix this my profile button that whenever i click on this my profile button then i should be redirected towards my profile page let's do this so to do this here i am going to this section of my profile and i am going to wrap it inside a link so okay just make a link inside the span link first of all i have to import it from the react router dom okay so okay here i am importing it as import link and from react router dom just like this and now i can use this link link towards the profile page so as i have declared inside the main routing and let's see if i have declared or not i am not very sure basically i don't remember such things okay so inside the back takes it should be also inside the backtick now let's close this and okay there is some kind of error because the link should be inside the span let's format this okay so okay this is a very odd type of styling applied so i have to fix this where is okay so on this link here i am going to apply some styling i will say the okay first of all let's close this i will say the text decoration should be none and the color of our span should be inherited that we have made in our main styling so yeah now it's all the way correct and we are rendering nothing on going this path because we have not set up the logic for the profile page let's go back okay so so i am going to the app.js okay and at the end i am making an other route and this route have the path for a profile and after profile there will be an id of the user and it will render the element again on the basis of user if user is available then render the profile page and if it is not then navigate towards the authentication side so then navigate to the auth let's close this and also let's close our route format the code okay let's try again so now i am successfully going to my profile page and if i click on home then i should navigate towards my home page so for this i should go to the main pages because i have to follow the complete path okay inside the pages i have the home page inside the home video i have a right side okay so let's go to its implementation okay it's not going by itself right side so right side.jsx and this is our home image this image should be wrapped inside the link so just make a link and what i am going to do i am just making this image inside the link now i will say link towards the home and i have to import the link from react router dom so let's say from react router dom now let's save okay the styling is now broken but it's working fine now okay so this is basically my internet connection is becoming very very slow now therefore here we are seeing the fetch post for a long while but it's just a matter of seconds to fetch the post from a fast mongodb connection okay so first of all let's fix this styling i am going to the right side dot css right side dot css and here uh i have the nav icons which are directing towards the images i am just copying this styling and pasting it below and now i said if there is also a link then also apply the same styling so now it's working fine okay it's time to manage the profile card on this profile page let's get start so inside the vs code here to fix to fix the profile card i have to make some changes with this variable profile page files i have to make this according to some logic and this logic will depend upon the location of our profile card so first of all let's talk about this profile site profile card so i am just going to the profile page so inside pages this profile page okay here i am calling the profile card here so i am giving it a prop of location and i will say it as profile page and even you can just neglect this just like this and inside my profile card i will receive this as the location okay now i am just deleting this and there i have two conditions so instead of this i will say if location is equal equal to profile page okay then render this post section and similarly for the second condition i am just copying the location one so just copy and paste it here now let's save this okay now you can see we are rendering the correct version of a profile card so similar thing i am going to do for the home side so inside the home page so here i have the profile side let's go to its implementation okay i have to go manually profile site.jsx here i am calling profile card so here i will give it the location of home page like this now on the home page it is rendering the correct version of our profile card okay let's go back to the profile page now i have to fix this number of posts because i literally have only two posts and it is showing the hard coded value of three posts so what i will do inside the okay let's just save this home and just close the profile card and here inside the profile card instead of writing it by hardwood i will say post dot filter but let's wait till now we have no post extracted from our redux store so first of all i have to extract the post i will say const post will be equal to use selector and from the state state dot post reducers only producer dot post now here inside the logic of number of posts so here first of all to make this a logic i am making it under a curly braces and now i will say post dot filter and for each post make a arrow head function and i am going to filter the number of posts according to the post dot user id should be equal to our user dot id that has been extracted also from the state and after filtering all such kind of post just find the length of this course so now we have the correct version 2 let's update the number of posts by making a new post let's say this is the rest api tutorial so i say rest api tutorial let's share this and here i have my new post and there is the number of post is equal to three so now it's time to fix this info card of our user so to fix this here i am going to the info card file so infocard.jsx as we have made in our front end part and let's start do some logical programming here first of all i am here making a dispatch hook instance like dispatch so i also have to import it manually from our react redux so import use dispatch so okay so here you dispatch is imported after i also have to import one more react hook which is the used parameter so to import it i will say use patterns okay after importing it i have to declare the profile user id so i will say const profile user id is equal to because in the parameter we have the id of the user as you can see here so i am fetching it inside the constant profile user id now i am going to make a use date of profile user like this and also set profile user and i am going to make a use state with a null object after this i am going to fetch the global state of user from our you selector or you can say from our react redux with the state state dot auth reducer dot or data i know now you are very used to it of the same line of code let's move on we have to make a use factor because we want to render this info card correctly whenever someone calls the profile page of a user so inside the use effect as we normally make an arrowhead function just profile user and it is going to be an async call so as it is an asynchronous call after this i will say if the profile user id okay if the profile user id is equal to the user dot underscore id that is our global user but still there is an error and i have to first find out what why they this is giving an error it should not be an arrow okay now it's working fine so i am saying if the profile is righty is same our current user data is stored in a react redux then set the profile user as the our global user and if this not the case means if we are seeing the profile of an other person then make a profile user and to make this profile user i have to fetch some data from our api so i will say user api dot get user and i will give the profile user id as the parameter of course we have to make this user api file but for now let's move on after getting that specific user from the database i will say set profile user according to the fetched user from the database and now let's save this and of course we are going to have a lot of errors the first that i am saying that i have not imported the use effect from the react so now it is imported and i also have to call this fetch profile user after making the function so here i am saying set profile user and if i just leave this as it is so it will render for the infinite number of times so to prevent this condition here i am going to give an dependency array and this dependency array will have the user as a dependency means if the user is changed in our react readers then the only time it will re-render this use effect now it's time to make this user api i will go to the api and here i'm making a new file user request.js okay first of all let's again just copy this same thing that we are just have to copy and paste in each file here i am making a function okay there should be a i like this now here i am going to make a function export cons get user and this get user will have a user id with an arrow head and it will call the api get inside the backtick first of all call the user and then dollar sign to enable the variable with the user id let's double check by going to our routes okay let's first go to index of our server okay yeah this is only the user it will work fine okay where is our request here it is now let's just save this and inside my this is my info card here i have to import the user api so as we are doing with every request file so similar stuff we will do for this i will say import steric as user api from just go outside again outside and from api then from the user request dot js let's see what happens here if i just refresh the page our app is not crashed and to see the information that has been fetching i just simply say console log okay so console log profile user let's say here also and here i'm also saying just the user let's try again if i refresh the page now open the console and here i have an object which is having the first name mark and last name zuckerberg okay it's working very fine now first of all let's delete these consoles from here and now further instead of writing this your info i will say profile info because we can check our own profile and the profile of an other user therefore here we should see say the profile user and this url pen here if we look in the ui this pen icon is used to open the model and this will make no sense when we are going to see the profile of another user on our social media application so therefore i have to hide this so do i have this here i am making a logic if user dot id is equal to the profile user id then render this all stuff so i am just copying this whole div let's see where it's ending okay this div is ending here just control x and ctrl v and now this case is not then simply render nothing now let's see if this our app is again not crashed means everything is working fine now let's move on to all these fields so first of all this is the status and this is the answer of the status information so now the answer should be according to the profile user dot relationship status like this okay let's check our user model also for double check everything here we should have okay relationship is same so here this is all same now for the leaves in there also should be profile user dot lives in let's double check again because i don't remember whether they are same okay this is lives in all is in small letters like this and then for the info here works at should also be profile user dot works at inside the user model it is the work set and at the last we have this button of logout so first of all let's complete the functionality of log out here i will say on click let's handle log out okay handle logout will be a function so just copy the name from here completely and on the upper side here i am making constant log out as a fat arrow function like this and it will do simply one thing it will dispatch an action of log out of course we have no action of log out so let's go to auth action.js and here i am making an other action export const logout this will carry no data and it will be an async call to our redux tank like this and again here it will do a very simple thing it will dispatch the reducer with the type of logout i mean it is saying each and every component now remove all the data existed related to a user so of course we have no logout reducer so let's go to the auth reducer.js inside the authreducer.js after authentication fail here i am making another case and which is the log out so let's see again log out just copy this and paste it here and on log or first of all clear the local storage by setting local storage dot clear it's simply a function to clear all the local storage and then return the previous state with the auth data as null and loading as false error as false i just think that it's enough for the number of state keys let's save this now inside the info card we have to import this so inside the actions now let's save this and try to log out so if i log out now we are on the authentication page let's try to login again by writing mark at the gmail.com password was the simply mark let's login again and here we are with our post let's go to the profile page again and we have to make this profile model functional to write over or submit our information on our platform and to reflect the relevant changes on our ui means the name change the profile image cover image let's do this here just below the url pen icon where i have my profile model so in the profile model along with the model open and set model open parameters i am also sending another parameter of data and inside the data i am sending all the information regarding to the user which is stored in our react redux okay so it's time to go for the model so i will go to the profile model dot gsx here i have to receive the data regarding to a user so i will say data simply and now it's time to import all the important things here first of all i will separate the password from the data because this is no use that even accidentally and other person is in able to watch the manipulated password of another person so just simply first separate it by the data and then make a form data used it as we have also did in the sign up and login set form data like this and it is a use state which is equal to the others by default after this i am making a use state of profile image and set profile image like this it is also i use state and by default it is null okay so our next use state is going to be the cover image and then like this and it's again on start will be equal to null like this now let's import the dispatch hook from the react redux and it is equal to the used dispatch like this and our last book is going to be the use patterns look i am doing all this stuff at the start because then by fixing over all the form we don't need to import the hooks or anything more so parents okay so yeah now it's also imported now our last thing is to import the user from the now first of all let's check the name of all the fields if they are corresponded according to the names in our database so here f should be short l should also be short means the small and works at it should be as like this and then this is the leaves in so it simply lives in and after this decent country and i don't have this field inside my model so inside the user model i am going to make a contrary field and its type is also string okay so its name should be small and after this for the relationship status the name should be relationship like this now we have the name profile image and the cover image it's also be changed like profile image cover image and it's time to make a handle change function for handling the change in our input so i will say handle change and it's equal to something like this and it will carry event as the parameter form data and first of all let's separate our previous state hook of form data and then according to the e dot target dot name of the field main make e dot target dot value of the field now i have to copy this and paste input here i will say on change and on change just make the handle change now copy this and paste it here for the last name and then for the work set for the lives in the country relationship and we will make a separate type of handlers for the profile image and the cover image the last thing is to handle the values so the value is going to be now let's see if it is working as as as expected or not so okay it's already working that we have mark and zuckerberg let's see here zan keeps institute and let's say new york america so usa and married let's open the extension by going to the component okay what was the error okay the error was just a warning not a error so i am in the components and here for the model this is the profile model and here i have a state and state have a username last name and work set lives in all the fields are correctly it's time to make the handler for the profile image and the cover image so let's go to the vs code and here so here is our profile in which cover image for both i am going to make a common function it will say on change let's say on image change and i'm going to define this function now like this and here i will receive an event and inside this function here i am going to do the same stuff as we have did in the share post section okay so first of all i am saying if the even target or file is true and then check for the index 0 where our file live means the multimedia lie and then i am making a variable of name image with this file and then if the name is equal to profile image then set the profile image to according to that variable that we have made by the multimedia from our event and it's basically the this set profile image and if it is not then set the cover image so it is a very easy functionality to understand let's close the function and format the code okay it's time to make the last task for our profile model and which is the update and here i will say on click make the handle submit like this now control c and constant paste the name let's here define this function where handle submit is receiving the event as parameter now let's make this e dot prevent default so our page will not redirect it to an other page after this i am making a user data as the form data that we have a use state here okay after this i am saying if the profile image is also included in the model to update then make a form data function instance the data and again i am just applying the same logic as we have applied while sharing a post i will take all the images and the cover images inside the server storage so the code is going to be the same therefore i am just giving you an overview of this code because we have did this before in this same tutorial okay after this i will append the name and the name will be the file name so yeah there will be also file which will be equal to the profile image that we are storing in a use state hook and then for the user data i am making a key value profile picture which will have the name after there will be a try catch block and i will dispatch the action of upload image and of course inside the cache blog the error will be cached and if the cover image is also true then do all the same stuff as this okay after the doing all this stuff we have to update the user so therefore i am dispatching a update user function and after this i am setting the model closed now it's time to first of all let's import this okay so from the upload action i am importing the upload image function and the last thing is to make a update user so now i have to make this update user action basically so what i will do here inside the here inside the actions i am going to make a new file with the name user action dot js inside the user option action.js make export const update user as i have made inside the model how it will receive an id with some form data like this and let's make it dispatch now i am really thinking that the ongoing stuff is really just similar as we are making for a long time so we are just make it a real quick first of all here i will make a reducer with the type updating start and then i make a try catch block and inside the try block i am calling the user api with update user request and here i am sending the id and the form data and from the server response i am just retrieving the data because when a server is responding then the original response is stored inside the data key okay after this i will dispatch the updating success as the login success sign up success to similar the updating success and then the updating fail in case of any type of error okay so it is giving me an error because here i just forget to write s now let's save this it's time to make user api so inside the api inside the user's request let's make a request for update the user export const update user and it is carrying the id with the form data like this and then the api dot put and inside the back takes the user with the user id and here put the form data like this now let's save it so inside my model first of all i should remove these extra files okay so here i have to import it again from the actions these are the actions let's save this so our user model is completed at this basically all the things are completed the only thing remaining is to make a reducer for these types of actions updating start and updating field okay we also have to import user api so here i will say import static as user api from let's go outside from the api and then the user request yeah just like this now let's save this okay now i am going to auth reducer so this is authored user dot gs and here i am going to make all the cases for the updating of user because our user data lies inside the authentication reducer therefore i have to put the relating to updating inside this same reducer after this in the case update is success so make the updating success just copy this from here and i am pasting it here like this okay return the previous state and the r data will be updated as the action dot data with the update loading as false now error is also false now okay the last case is updating fails so to make this case and updating fails so like this and it will return the previous state with the update loading as false and error as true now let's save this so our reducer is completed now when the update is successful we also have to store the new user inside the local storage manually so local storage dot set item and i am again setting the profile item as json.stringify and action dot databas3 and here i should apply the chain operator okay so now let's save this and hope that our connection with api will work fine but first of all let's check our controller user controller for double checking its functionality that it will be capable for our form data acceptance or not so here inside the data user i am receiving the id from parameter it is correct and inside the request.body i don't think so we have current user id it is just simply an id okay so now here we should also have to change it as id and let's remove this for now okay as we further move on here everything is fine now after updating we have to update the json token so i will say token is equal to jwt dot sign like this and it is equal to the username as user dot username and id as user dot id again there is an error let's see why the error because there should be the round brace is not the curly braces like this okay our second parameter is process dot env dot jw t yeah that we have made let's see again inside our env here okay so yeah and our last and third parameter is expires ins which is going to remain same and i'm keeping it as one or let's format the code and save this now in the response i am sending a object with the user and a token so that our local storage will work fine because in the reducer okay the auction dot data inside the action okay so now it should work fine so if i here right that then keeps constitute lives in let's say multan country pakistan and relationship status unmerit let's choose a profile picture let's say this is my profile picture and for the cover picture this micro picture update okay so nothing happening let's see why inside the console there is an error okay so i should open the network tab so guys i have spent a lot of time of debugging that what is the adder and how can i solve this and at one point i was just enable and blank to solve the error and you can only imagine how small was the error and even the vs code is not identifying me the error the main reason that there is no highlighting of any red line yellow line that there is an error in the code the error is the jwt is not imported okay so here if i import the jwt from json web token now let's save it and here i have just for the testing change so now you are seeing it as a change version but i am going to give you the view of this practically guys here if i say okay so on change it's not working okay the n is capital you can see how small are the errors how small these are the errors now let's refresh and try to change it again let's say mark and zuckerberg like this now everything will be same now let's say married one day okay so now i want to change the profile picture let's say my new profile picture this this is a cool one and i have to change the background so i am just giving this background now update and boom guys everything is changed and working perfectly in our profile info card and inside our main profile card and you can see the change is also reflected here and inside our application tab inside the authentication data here also so guys you can see how react is also painful and how it is also beautiful that even a small error has wasted almost one or so for further i have to change this followers card okay so let's try to manipulate it according to our platform here i will say followers card.jsx first of all i am changing this line who is following you and i am saying it as people you may know like this okay now i have to refactor it how i am going to refactor it i am just making a new component inside the component with the name let's say user okay inside the user there will be a file as user dot jsx just the gsx not the css okay now it's followers card i am just copying this basically i am just cutting this from here and rfce now i am pasting it here like this okay so i have to import the user here so i will say user and i will send the data as the person data and it will be equal to the person like this and he will be equal to the id okay so now here i will say as person let's save this and i have to here receive this as person and change every follower with the person here like this let's save this so there is no crash in our app means it is working fine now now inside the followers card here i am making a use effect okay so use effect and just make an arrowhead function inside use fact i am saying const fetch persons and the fetch persons will be equal to an async call basically like this inside this let's make the data which will be equal to a weight get all user like this i will make this function inside the user request and then i am also making a use date okay so const persons and set persons like this so this is a you state and at the start it will be a null array okay now i have to extract the user so just copy this from here and i am pasting it basically here let's format the code and i also have to call this function in the use effect and the dependency i am making a blank array like this after getting all the data let's make the set persons equal to the data that we have received from the server it's time to make a user request with the name export const get all user and basically there will be nothing inside the parameters and for the api it will just say the get and user and this will be the path in our server so i am opening my index.js server and now go to the user route okay so [Music] okay let's go to the user route here so let's make a router dot get is just simply a slash then execute get all users now i have to implement this in user controller so inside the user controller here i am making get all users okay so i will say x4 const get all users and just copy this sign text from here and i'm pasting it like this now try catch block inside the try cat blocks let the users are equal to await user model dot find and you will be panic by observing that if i just run the user modeler find then it will cause an array that will contain all the users from our social media platform but this is not true it just only give us the results of first 20 documents which is manageable and then i will say users is equal to users dot map and for each user i don't want to give the password even the manipulated password i don't want to give it so i will say cost password and then the other details like this it will be equal to the user dot dot because it is stored in this and then return only the other details and in case of any errors simply response dot status dot 500 with json error and if it is successful then send response dot status of 200 with the json of users like this so i have to import it in my route so where is my user routes okay so user routes and get all users so here the update user and get all users basically it should work now okay there is an error you selected not defined get all users not defined inside the followers card followers card and i have to import the you selector okay so use selector from react redux now the get all user from the user request and i will also say just console log the data now let's see what happens inside the console there is an error basically let's refresh so there is basically an error and this error is saying network error if i see the configuration okay let's see oh basically our server has been crashed inside the user controller because it is saying export const unexpected export okay so go to the user controller here it is saying export const get all users okay i have closed this function of that all users now our server should work fine okay it is listening let's try again close all the things here and now it has given us an array of eight people so it is working very fine now the next task i am going to my database here and i am deleting all the users basically first of all i am deleting all the posts because it is too much mess up now so i'm deleting the post and i am also deleting the users so here i have deleted all the users and the posts so now inside my application i am also deleting all these things let's refresh again and i am going to make some new account first account with the name zen rks and at the gmail.com password simply dance and let's sign up okay let's uh give some information as works at the end gift institute lives in shujabad or you can say multan this from pakistan and relationship status is unmarried and now i have to choose a profile picture let's say this is the profile picture and cover picture now update this okay now i am going to make some posts this is the new design and now just share this so it is my first post i am liking this and also make another post like a good design like this now save this and here it is an other post okay now i'm logged out and making another account with the name javad and let's say rao here now the name javad gmail.com jawad javad let's sign up again and here i am again making some changes as soft software engineer lives in multan from canada let's say and relationship status is married now the profile image will be okay like this and the cover image like this one let's update so now this is the second member on our social media application let's log out and i'm making the third one as umass like umaradrivegmail.com and umar confirm password let's sign up now i am going to vs code and hey this is our followers card inside the followers card now let's get rid of this hard coded followers because now they make no sense as we have the people extracted from our database so i can also delete it from here and here i will say the persons but there is a problem with this logic that it will return the list of all the persons included in our database means the first 20 and these first 20 can include the user who has been logged in currently and this will make no sense if the users also included here in the card okay it should not be included so to fix this here i am going to make a condition i will say if person dot id is not equal equal to the user dot id then return the user okay so only then return the user let's format the code let's save it and now it should have only two people in the card here you can see the zen and the java of course we have to fix this so to fix this component i am going to the user.jsx here first of all let's fix the person dot image okay we have to use the same criteria as we have used in the share component so i'm just opening the post here dot jsx and here i have the server public so just copy this and paste this it basically stores the url of our server side and now for the image section here that was also an image section so where is this let's okay that was our image so i'm just copying this whole thing from here and paste it inside the src okay we also have to extract the user dot cover picture but here we have no user so i can say it as just the person dot cover picture okay because the person is coming from the parameter let's paste it here okay now let's save this and here we have the profile images of the people on our platform okay it's time to fix the name because in the database we have the first name store so let's save this okay and here we have the names and it's time to fix this they should not be at now it's looking very fine it's time to make the logic for follow and unfollow so on this follow button here i am making a function on click and it will handle our follow okay handle for let's make this function so on the upper side const handle follow and will be an arrowhead function again now to make this functionality first of all i have to make a action so i will go to user action.js and after updating a user and you export cons follow user and again just a little bit of science text is async and dispatch this okay and here i will dispatch the reducer with that type as follow user so let's say follow user like this and after this i will call my user api dot follow user and i will send id and the data okay i also have to receive the id and data so id and data now let's fix this here so handle flow follow and handle follow now calling the let's save this and now inside user.json i have to call dispatch so let's first import it from react redux import use dispatch okay from react redux now make an instance this patch is equal to use dispatch now here i am going to use this to call our action and action is the follow user from the actions and in the data i am sending the person dot id which i have to follow and the complete user so where i will get this complete user okay so let's just simply copy this and paste it here so to extract from the our redux store now okay i have it extra space okay again this is not imported let's see why from the actions now it's completed so here i have to make an api to follow the user so i will just request dot js and here export forms follow user and it will get the id and the data now this is just a put request means an http method of put and towards the user here i have to put the id to follow and then i will say follow and here i am making the data as a parameter or you can say the body okay there should be an arrowhead now let's save this and i have to import it in my user action so yeah this is already imported as we have did for the update or user let's save this and hope that everything will work fine so if i refresh my page and let's follow the zen and see the console okay inside network tab let's try again to follow the jawad and his request and there is an again error okay so the error is basically the internal server error let's see why it's happening our server is running fine let's go to the user controller.js and here's how to follow a user first of all i'm getting an id okay so because i have no current user id there should be only id let's try again here i am following jawad let's see okay so again there is an error basically nothing there is an error my server is crashed or not let's see okay so it is saying current desired not defined in a condition so let's see in the condition there should also be id let's save and try again i follow the javad and this is a correct request and our user should be followed now but i am not seeing any type of response okay so okay so here it is saying user followed means our functionality of following a user is working fine now we just have to change our controller so i think i also have to change the controller for unfollower user yeah so i just selecting all the current user ids okay not from here let's remove this from here and instead of all this let's just simply say the id let's save and try to unfollow a user so inside the user actions here i am making an other action and inside the gsx here if i make it unfollow okay unfollow let's see is it auto imported or not okay there should be unfollow user from the action let's save this and here if i unfollow the jawad so yeah it is saying user unfollowed means over following and unfollowing a user functionality is working fine it's time to make changes in our ui so to make this condition here i am making another use state which is saying following and set following this is basically a check to see whether we are following a person or not so you state and its initial state will depends upon person dot following okay following dot include the current user id or you can just say the user dot id so if the person has the current user id inside its following array that's mean we are already following this so okay let's fix this from react and now here the button will be rendered according to this condition so just remove this and make a condition upon following following is true then write unfollow on the button and if it is not then simply say follow okay so let's see basically we are seeing no type of difference and why we are not seeing this because we are not changing our global state or you can say we are not changing our redux so to change the deducts here i am dispatching the two type of action follow user unfollower user let's make the corresponding reducer inside the authentication reducer.js and after updating fail and now we are going to make a very logical thing the authentication data because authentication data includes the array of following okay so state dot or data and here the user will be equal to the state i will give you the explanation of this logic but first let's follow me auth data dot user and the following will include the previous state in dot auth data dot user dot following and action dot data okay so what is this stuff this is really a huge line of code basically we are doing a lot of thing in parallel so here i have restructured the authentication data which is included the user so now we can manipulate individual the user and now i have to change the following array so i am again destructing the user and now i can manipulate the following so to manipulate the following first of all i am just spreading the previous following array here and then i am adding the action dot data and in our action dot data it will include the new user id which we have followed okay after this let's make the second scenario equal to the previous state dot auth data and then the user will be equal to state dot or data dot user and following array will be changed according to the polling and state dot auth data dot user dot following dot now i have to filter according to the person id that i want to remove from following array and if person id is not equal to the action dot data means what i have did in this line of code as you remember this is a very simple stuff as we did before and now inside the user i am again spreading the user object and then i am spreading the following array and here i am saying the following array should be updated and it should not include the user id on which we have clicked to unfollow basically this filter is just removing that specific person now let's save this and inside the user.jsx inside the handle follow i have to do everything according to a condition i will say if following is true then dispatch the unfollow user action and if it is not then dispatch the follow user okay follow user from the action okay so why i'm not seeing the follow user action because here i have already imported it and then again just send these two things let's now and now it should render according to our needs here if i refresh and try to follow zen now our card is updating fine and it's again updating okay let's see why this is happening this is happening because we are not changing our following state after doing this i will say set following according to the previous negation okay now let's save this and first of all i am just log out and then log in again with the umar account like this let's login and here i am again following one person and it's not showing correctly okay so now everything is clear this is just because of our previous local storage now i follow following one again follow following two and if i unfollow so this is happening very fine it's time to change the styling for the unfollow button so here i will say the class name is according to some condition okay i will say if following is true then return button fc button means the previous class and add one new class unfollow button i will make it shortly and if this is not a case then simply return button fc button now let's to make the unfollow button class i am going to the followers card.css and here at the very end i have this fc button first of all let's paste the name and i am saying it will have the color of our variable of our variable we have orange and the border should be 2 pixels solid as we have the general styling if you remember in our design part and cursor like the pointer the main difference is of the background so background will be transparent like this let's fix this here now save this and you can see how beautiful this is working now and our requests are also very finely working okay so user is not followed by you okay let's make one thing if i follow the zen then i should see the post from the zen and if i follow jiva then i also see the post from the java let's go to the home page and here i have the post from zen and java so let's first make some post from myself as i have zero post and still i am seeing these two posts from zen jawad then this is a bug inside the profile page i should only see the post of myself so what i will do i am going to the post i think suppose dot gsx and here before returning these post dot maps i am going to make a condition first of all i will make it let instead of const because i have to manipulate it if i and i am saying if there are no post then return the text simply no post okay so nothing will be rendered like this it will only return no post condition is the param dot id exist then the post should be equal to the post dot filter and for each post let's check the user id against each post like post dot user id as we have inside our post model and and it's again should be only params it will be fixed when i just import the use parametric is equal to use parents okay it's not auto importing let's see why use param and if it is a profile page then we should render only post that are posted by that specific person therefore i am filtering from all the posts and returning only the post who have the same user id now if i save this okay there is an error and it's saying use params was not found inside the react router dom so why it's not because there is not the user param okay let's save this so now you can see here we are not seeing any kind of pose if i make a new one like this one how i am looking how i am looking like this now let's hear this here i have one post and here i have the post on the home page i have many more posts let's like them and if i just log out and log in with the zen let's say then then like then now login again here i follow if just um i am following so so here basically my live number of likes is updated and there is some kind of ambiguity that this is not happening as we expected and seeing failure in our promises and it's forbidden on the unfollow let's see on the network tab on the unfollow okay so why this is all happening i am unable to understand right now here guys i have debugged it a lot even i have just deleted all the accounts and then make the new accounts and it was just a hell of job and you know what was the error the error was the too much small inside the users here instead of following i should write followers and i know you probably noticed that that i am making a mistake but yeah that was the only mistake now here you can see it is rendering as expected i am following zen and let's make a post from the umar account so here i am saying okay going to learn more and inside the braces say the uml let's hear this okay now i am logging out and from the zen account here i will see janet gmail.com let's login let's these this post is from the zen on account now i am following this now go to the profile here i have on this and now i'm go to the home page so also i have the post from dumber's account i can like it and i can also like my own post yeah here our following and unfollowing functionality is working fine now so our last task is to implement the authentication middleware of our jwt so to make this i am again just closing all of my files here and now inside the index.js and basically i am just closing all my directory inside the server i am going to make a new folder with the name middleware like this inside the middle where i am making the auth middleware dot gs so inside the authentication middleware.js first of all i am putting the jwt from json web token now also we have to require the dot env now put the dot env dot config to use the processed environmental variables and here i am fetching my jwt key and after this here i am going to make my authentication middleware and first of all the authentication middleware should also acquire this third parameter of next it is always necessary to make a middleware and now and now here first of all i will take the token from the authorization header of our request and let's see what is the token and if the token is present then i will verify it from my json web token that i have already make an algorithm while generating the token so basically this algorithm depends upon our secret key and over all the token will be verified against this secret key and then the decoded data i will also console logit and the request dot body dot id means the user id will be replaced from our decoded id so our request will only work fine if the id is same as we have requested from the client side and the id will remain safe if the jwt verification is successful if we decode the say if it declared the same data after this here i'm just simply placing the next means after doing all this work correspond to the required route and inside the cache block of course i am just console log the error and at last just export default the middleware okay let's save this and also index.js go to the user route dot gs here i am importing the here i am importing the authentication middleware from the technician middleware and to update the user it should it should pass through the middleware if the middleware is successful then our updates update user will be successful similar for delete user and follow user and at last for the unfollowing user let's save this now as you remember inside middleware i am requiring the authorization headers and splitting it for the second member of authorization array so i have to make it inside my client side authorization so i will go to the user request dot js api dot interceptors dot request dot use first of all the request because we have to make authorization inside the request and if the local storage dot get item profile is true okay so if this condition is true then make the headers authorization request dot headers dot authorization like this one and this will be equal to the first word should be barrier there is basically a strict part to make this string as the array of two elements okay and then for the second i will say json dot stringy file local storage dot get item and from the get item let's say the profile and from the profile get the token okay so whenever the authorization is needed i will put inside the request or the api and the corresponding part will use the authentication middleware inside the route here i was not returning the request it's a very important part you should never forget it let's refresh again this should be json.parse if you write this then it will work and it's authentication middleware here we are making jwt key and inside our environment variable as you can see here we have a underscore so i should add an underscore here now let's try again let's clear the console and i'm refreshing the page let's say here in relationship now and i also want to change the profile picture let's say this update and here you can see it's working fine so basically our total social media application is completed now so guys if you really have learned something new from this whole tutorial series and also enjoyed this then please press the subscribe button also don't forget to press the bell and the share button let's give a thumbs up for this video and put your thoughts in the comment section that what should we build next and the next project is also be an awesome project see you next time with a new tutorial with a new development project till then goodbye take care you

Channel: ZAINKEEPSCODE

Views: 93,265

Keywords: zainkeepscode, reactjs, react, website, react website 2022, react social media, react social media website, react social media app, react design, react project, mern stack tutorial, mern stack tutorial 2022, mern tutorial, mern stack project, mern stack project with redux toolkit, mern application, full stack mern application, mern stack social media, full stack mern, mongodb, express, nodejs, css, Matnine, for beginners, react js full course, jsonwebtoken, react redux, jwt, redux thunk

Id: VQCeu2mq8wE

Length: 196min 46sec (11806 seconds)

Published: Fri Jun 10 2022