🔴 Realtime Chat App with React, Node.js, Socket.io and MongoDB

[Music] hey youtube i am keshan and in this video we are going to create this amazing chat application so the chat application is developed using react node.js and socket so we have designed this chat application by style components so let me give you a demo of it so this is the login page and we have this register page now i'll register a new user i'm gonna use admin admin gmail.com and i'll write some incorrect password here and create the user so we have this custom notifications that password and confirm password should be same now let's have the same password and i'll remove the username from here so we have all the validations that are required for the form then i'll create the user now we have this loader and we have to set an avatar from here so we'll set an editor this images are all generated dynamically from the multi a vector api and this would be changed every time we refresh the page so i'll refresh it again [Music] and now we have some different avatars so i'll select this avatar and set as our profile picture so this is set and this is our chat application this is the welcome screen and this has the contacts so our application name is snappy so i'll select any of the chat from here and we'll send the message for example i'll select this cool question and i'll send an hi message to him and i'll also send an emoji to him hi and currently we don't have any other session open so what i'll do is i'll shrink this this is also responsive by the way and i'll login another user which is collocation here and i'll write the password now our current user is the admin so you can see that the message is received so message is also being stored in the database using the mongodb now will send a message from the admin to cool kitchen so we'll write hey and as you can see that as soon as we wrote the message it has been received to the communication and we have used socket for this we'll send the message from kishan hi admin so as you can see that it is blazing fast we are not calling any api it is being handled by the sockets so without wasting any further time let's get started and create this beautiful chat application so before moving further please like this video and subscribe to the channel so now we'll set up our application first we'll create a public directory and we'll also create an server directory now i will open a new terminal i'll cd inside the public directory and i will write npx create react app and the name of our react app which is chat app and now i will write i will click this plus button okay there was some issue no it's okay and now we will move into the server and we will write npm init hit enter in all of these to set the default now we'll install some dependencies so first we will need a express then we will need mongoose we'll use node mode then we will use socket socket.io [Music] and use bcrypt then we will use course and yeah we also need dot env hit enter to install these dependencies now inside this server will create a new file index.js index.js and inside the package.json we will create a start script write start and the command for the start would be nodemon index dot gs so what will what nodemon does is whenever you save any of the file it will automatically restart your node.js server so that is very useful if you are not using this then you have to manually stop the server and restart the server to make the changes happen okay so this is still installing now let's move on to index.js of the server and set up our server so first we will need the express you require it from the express let's close this for the time being and we also need the course [Applause] after this we also need the mongoose mongoose is used to interact with the mongodb server now we'll create a app by calling the express function we will also require dot env dot config [Applause] um so let's create the env file also dot enb this should be inside the server now here first we will write the port equals to 5000 this could be anything you can change it according to your need then we will write url we'll write this as mongodb colon slash localhost colon27017 slash chat so this is the localist url of your mongodb make sure that mongodb is installed successfully on your pc and if there is another port of the mongodb you have to change this and if you want to change the database of the mongodb you have to change this chat so if you want the database to have chat app then you have to just add chat dash app so that's it save this and now moving to index.js and after this we will use first app.use middleware and call the course here then we will use app.use express.json now we'll create our server conserver is equals to app.listen we'll use the process dot env dot port we'll pass a callback function here and if it is connected we will console solver started on put and we'll write process dot enb dot port save it and now let's write npm start okay so our server has started successfully now i'll show you this and before this server what we will do is we'll write mongoose dot connect and will pass the process dot enb dot url and we'll pass use new url parser to true and we'll write use unified topology to true okay we have an error here what's that invalid scheme connection stream to start with mongodb let's check if it's correct yeah you are okay we need to close this this should be string okay this is connected successfully so we'll pass and uh will not pass in callback function we'll chain it with promise so after it is connected successfully we have our callback function and we'll write console.log db connection successful yeah that's it and if there is any error we'll write catch and we have our error here with console.log that error error dot message okay that's it that's all for now we have set up our server successfully we will set up our sockets afterwards now let's move on to the public and will cd into the public okay we are inside the public and now okay we still have to move inside the chat app let's do one thing will move all of this from the chat app to the public we cut it and we will paste it inside public i think it didn't work we'll reveal this in file explorer now we'll cut this all and paste it here we remove this chat app let's close this no we don't want this also close this files now let's start our react app by jansstart okay so it has been installed correctly now let's close this and first we will need some dependencies so we'll install that i'll write yarn add first we'll need xcos for api calling then we will use style components for styling then we will use react router dom for routing okay that's it for now uh with install more dependencies when we need it i'll hit enter and now inside the app.js i'm gonna remove all of this code and write rfc save it will remove this app.css we also don't need this this and this inside the index.css will remove all of this code will remove the import from here and remove this function call save it let's wait for this to install while this is being installed let's create a directory named as pages we will also create another directory named as components and another directory named as utils now inside the pages will create our react components so this would be register dot another would be login.jsx and another would be chat dot jsx i'll create the react component by this then we'll write rfc here rfce so create the component and now inside this app instead of returning this div will have the browser router we need to import the browser router so we'll write import from create router down i'll write browser router then we'll require the routes and in the end we'll have the route now inside this browser router will define the routes component and inside the routes we'll have our individual route so first we have path equals to [Music] slash register and the element would be register component let's start our application by yarn start you will go to register and yes it is working perfectly so now we'll define another routes we'll copy this route and paste it make sure the sequence is followed so after register will have the login after login we will have the slash doon need this the slash would be for the chat and the login will be for the login page see what let's check those routes okay chat pages working on the slash directory then login is working for the login route that's it so our base setup is complete now we'll uh create the register functionality we'll first create the register component and then we will connect it with the server and we'll create the api so now we'll create our register function id so i have already com copied this assets directory and pasted inside the public directory you can find this from the github link given in the description so this is the loader then this is the logo and the robot.jeff file now let's head over to register.jsx and here we'll first create some style components so we will write const form container is equals to style dot uh this should be form i think no this is div save it will also import style from style components save it now after the form container will move inside this and replace this div with react fragments and inside this we'll write our form container now inside the form container we will have our form we'll remove this action and write on submit equals to will capture the event passed into our custom function which is handle submit let's write handle submit here handle submit as request to event will first have the event dot prevent default and we will alert form that's it now inside the form we will have an div with the brand inside the brand we will have our image tag for logo and we'll write the name of our application which is snappy now after this step we will have an input input type would be text please folder would be username name would be username and will have an onchange equals to e and we'll write handle change now we are gonna copy this paste it uh three times i think yeah and we change the type to email you'll write email as the placeholder name would be email unchanged would be same this should be password placeholder would be password username no name would be password pass word this should also be password placeholder would be confirm password and the name would be confirm password that's it after this we will have an button the button type would be submit and the text would be create user after this we will have a span will write will write already have an account and if yes we'll use the login no not the login you will use the link from react router dom and we'll write login here and inside the link will pass in prop of two to login okay we have missed things here so yeah that's it this e should be capital and we also need to create the handle change function so that const handle change [Music] event let's head over to register okay it is here we need to style this before styling let's uh use the fonts so we will use two sephins from google font joseph in sense we'll copy this thin style then we'll need extra light light regular medium semi bold and extra bold that's it we'll use the import from here copy this and we'll paste it inside the index.css now let's copy this font family we'll write body button and input to have this font family while we are here we'll also have the star selector have margin of 0 padding of 0 and the box sizing of border box also the body would have a max height of 100 v put height max width of 100 viewport width and overflow of hidden save this close this file and close this so now the fonts have been applied now let's child this so before styling this we need to import the image so you will import it import logo from assets logo dot svg let's check the name its logo.svg l should be small we'll use this as the source source of this image logo and the alternate text would be logo okay okay so the logo is here now we have to style everything inside the form container so first we'll have the height of 100 keyboard height width of 100 viewport width then we'll give it a display of flex flex direction of column justify content of center then we'll have gap of one drum we'll give it a align items of center we'll give it a background color of one three one three two four then we'll select the brand container we'll give it a display of legs align items of center gap of one gram justify content of center will select the image and give it a height of 5 save it ok the styles have been applied let me shrink this so you can see the styling so after this means we will have an h1 we'll give it a color of white then we'll give it a text transform of upper case okay it has been applied now after this h1 we will have a form you give it a display of flex flex direction of column and you give a gap of 2 run we'll give it a background color of zero zero zero zero so the color would be zero zero zero zero zero zero seven six now we'll give it a quarter radius of 2 ram and the padding of 3m and 5m then after this we will select the input inside it will give it a background color of transparent we'll select padding and give it one rev give it a border of 0.1 jam solid and the color would be 4 e 4 e 0 e f f now we'll also give it a border radius of 0.4 ram this should be 0.4 now we'll give it a color of white we'll select the width as 100 and we'll give it a font size font size of one ram and whenever we focus on this we want the border to 0.1 solid and the color would be 997 af0 let's remove this and the outline would be outline of none let's select this okay it is being applied now after the input will style the button button color would be the this one will give it a color of white padding of one gram to run on the weight of bold cursor of pointer border radius would be 0.4 length this is 0.4 m we'll give it a font size of one ram and the text transform of upper case after this when we over open this we'll change the background color to [Music] for this one we will also give it a transition of 0.5 seconds easy now remove this okay it's working now after this we'll have our span we'll give the color of white then we'll give it a text transform text transform of upper case then [Music] we'll select the e inside this and give it a color of this after we will go to text transform of none and we'll get a font weight of bold so the styles are not applied inside these span we have a let's reload this let's inspect this inside this pan we have the a okay so the styles are applied we have to write text decoration here the correlation of none okay so it's working let's correct the spelling yeah that's it so the styling of this form is complete now we'll create the functionalities so first we will have the uh handle change then we will have handle submit and after the handle submit we will have the handle validation we will have various validation in the form and we will also have the toast notification here so let's do that and after that is done we will connect this with the server so now [Music] also we have to create this functionality okay it's working so now first we'll use the use date book use state and we will also need the use callback now to use callback we'll need use effect now let's create a state of const values and set values equals to u state and this would be an object which should have our field names so the username would be blank email would be blank string we'll have the password will have the confirm password and yeah that's it now inside the handle change function what we'll do is we'll have these set of values here we'll destructure the current values and we'll write event dot target dot name and we'll write event dot target dot value sieve okay so that's it let's check if it's working i'll open my console and we'll do one thing we'll install an extension named as react chrome extension we need this react developer tools offered by facebook add we need to reload our chrome okay we have the components here now we'll select our register here and we have the state here let's change the values and check if it's working yeah you can see that this cheat is changing accordingly see that's it now now let's check the law uh create user button okay so it is working now we'll create the handle submit function id so before uh doing the handle submit we'll create a handle validation handle validation so inside the handle validation [Music] will restructure all our values so we have the password we need the confirm password we need the username and we will need our email now if the password not equals to pass confirm password we'll have the tools dot error we need to install that first so i'll stop it and what was the name of the package it was react 265 so right react iphone 25 can add react to c5 to install this dependency hit enter okay it is installed now let's start our application again on start let's close this and here we'll again write toast dot error to start error password and conform password should be seen okay so first we'll input the toast from reactostify const const we'll write input boost container and toast from react 265 and we'll write the toast container after this form container toast container now [Music] we passed some options here so the options would be position and this would be bottom right then we'll pass auto close this would be 8 000 milliseconds which is eight seconds then we'll write pause on over that would be true [Music] and draggable would be also true theme would be dark that's it let's test the functionality okay dark is not defined this is a string let's have the correct value question kitchen21 gmail.com one one one one one one and create the user okay the form alert is working we will also need to call this handle validation inside here we'll remove this and we'll write handle variation i think we need to refresh this admin demo one one one one letting me how to alert this okay this is working but the toast is not working why is that so toast dot error pass the toast container what is left let me check in the console if we have any error and we submit [Applause] now it's working correctly you don't have any error let's console here console.log in validation [Music] and also pass the dose here everything is working why is toast not coming then so we have an error here not error we forgot to import the css file for the toast so we'll write react dash 25 slash dist slash react toasty file okay the css file is not visible so we'll write here to st5 dot css and let's test it now okay these are visible now now let's create a variable named as tools options options equals to the object and we'll have the object here post options this will be multiple times so we have created an object of it and we'll reuse it so after this we will return false then we have else if if the username dot length is less than three then we will have and post notification of error this would be username should be [Music] greater than three characters this is username now let's copy this paste it and we'll just have this as email and this would be email okay we don't need this for email let's remove this and we'll just write a condition of password dot length less than eight so minimum password would be of eighth length and the message would be password password should be equal or greater than 8 characters password should be equal or greater than 8 characters and copy this written false and east here both and now we'll also return true here also we have the email validation so lsf email triple equals to blank we'll pass tools dot error email is required and the toast options return false that's it let's use the same password okay okay so the validations are working perfectly now we'll grab this inside an if condition and here we have uh written false if there is any error and if there are not any error then we have written true if it returns true then we will call our api and if it doesn't return true we will call we will not call the api so that's it now okay so now let's call the api const email just copy this paste it and we will have data equal to await axios dot post and we'll have this function as async also we will import xcos import xcos from excels and now inside the utils will create a new file which would be epi routes dot gs and inside here we'll define all of our api routes so first we'll have export const host we don't need to export this equals to http slash localhost and 5000 then we'll export const login route login register route this should be in cameron case request you first will pass the host and then we'll pass api slash auth slash login save it and now inside the register we'll use this inside the excuse dot host we'll have the register route then we'll pass our data here so the data would be username password or password email and then we'll pass the password okay that's it and according to the data returned we'll have our validations here so we'll do that afterward now let's move on to the server and create this so now let's move to index.js first we'll create some folders here create model then we'll write controllers we'll have the routes we'll create user model dot js then we'll write userscontroller.js [Music] and we'll define user routes dot yes now first let's move on to our user routes now let's move on to user controller we'll write module dot exports dot login this would be request response next now inside the user routes so inside the user routes we'll first create a router equals to require express and call the router method it should be capital and write router.post register and will pass the register here okay what did we write inside the user controller this should be register not login that's it now we'll write module dot exports equal to router now we will uh call this router inside here we'll just write app.use we'll write app.use and we'll write the uh starting url which would be slash api slash auth and every right every route of this would be inside the [Music] user routes so we'll write user routes here and we'll import the user out const user routes equals your require dosh slash routes and these are that's it now inside the user controller i'll just write console.log request dot body and i'll open the node terminal and now let's call the api let's check in the register.json unisex if the api is being called we are inside the console.log in validation and we'll write registered route here let's open the console okay we have error here api slash auth login not found you closed 5000 slash api and login okay so we have an error here which is this is register not login okay so that is working now we have to write our register code inside this user control uh inside the user controller so that is user's controller so let's do that now we'll remove this console and we'll write cons username email and password we will restructure this from request.body and we'll first have username check equals to await okay we forgot to create the user model so we'll create the user model first so that is first will require mongoose equals to require mongoose after this we will create an user schema equals to new mongoose dot schema will pass an object which would have username of type string it is required then minimum length would be of 3 and max would be 20 will also pass unique to true now we'll have the email type would be string we'll copy this required we'll copy the unique and we'll also copy the max property and max would be 50 now let's copy this also copy paste and this would be password okay so the password type would be string we need the require and unique would be [Music] removed and the main property would be eight so we'll write min remove the space and now we'll write is avatar niche set this is for the avatar image this would be used after the login we'll write type boolean and default would be false so initially when the user is created no avatar image is set and we will set it afterwards right type as string and default this so we'll store the base64 image inside the mongodb now we'll write modules dot exports equals to mongoose dot model we'll write users and we'll write user schema okay that's it so schema is created and now we'll import this inside the user's controller so we'll write cons user is required to require model user model also will require the bcrypt from bcrypt library bcrypt is used for encryption of the password so we'll encrypt our password using the decrypt library now let's check if the uh username is present so we'll write await user dot find one and will pass username so if the username is present in the database it will return if it is not present then it will return uh false so you write if username check if there is a username then will return response response.json as message username already used and will also pass a status of false now we'll proceed further if there is no username with the username passed by the user so we'll write cos const email check equals to await user dot find one email will repeat the process if the email is present in the database we [Music] want to tell the user email already used and now if everything is perfect then we'll uh hash our password hash password is equals to wait decrypt dot hash here we'll pass the password and we'll pass the salt value the salt value is nothing but the type of encryption so we'll use the 10. and after the password is encrypted what we'll do is we will use the user.create method to insert the items into the database so we'll write email username and password would be hashed password now this returns the user id and all the information of the user that has been created into the database so from here we are gonna delete user dot password so we don't need the password from here and we will return the user object to the user by response.json status would be true and pass the user now this all should be wrapped inside a try and catch block so we'll cut this try paste it and if there is any mistake here or error here we'll catch it and pass it to the next we'll check if there is any error okay a weight is only valid inside a sink will write a sink here and yeah that's it so our register function id is almost complete let's move on to register.jsx now register.jsx and we have already structured the data and will check if data dot status triple equals to false then we need to pass post dot error with data dot message and post options that's it and we'll again check if data dot status triple equals to true then we will create a local storage dot set item so before doing this we'll create an env file for this let's keep the env file we don't need that so we'll just write your chat app user and we'll pass json dot stringify data dot user so what we'll do is we'll pass the user information to local storage in json format not json format we'll just stringify this and whenever we need this we'll use the json.pass method and from here we'll remove this confirm password we do need that then we'll use the uh navigate method navigate okay we need to import okay the user navigator is imported and we'll call it navigate equals to use navigate now let's navigate to slash so what this will do is if everything is correct we'll set the user to local storage and navigate to the chat container so let's test everything i'll refresh this page and i have already set up a mongodb compass you can install this so this is a data visualization tool for our mongodb database so here as you can see that we have this chat inside the chat we have the users and this doesn't have any users here as of now let's add a user first i'll write communication here 21 gmail.com i'll write password1111 [Music] confirm the password i'll create the user okay i think everything is working perfect refresh it and yeah it is working perfectly and we are navi navigated to the chat page let's remove the console right console okay so that's it so our register functionality is completed now we'll do the uh login functionality we'll create the login functionality so we will just copy this all the register component and paste all of that code here and we will change this function name to login this also would be login now inside the utils we'll create our new api route so that would be login route we'll copy this paste it and this would be login here name would be login route save it and inside the login.jsx now we'll make some changes first instead of this register route we'll change this to login route i'll press ctrl d to select all the instances of this control plus d okay it's been selected and now i'll change this to login route yeah that's it so it's completed now we only have username and password here in the state so we'll remove email and confirm password the tools options would be same then we have the handle submit so inside the handle submit we will remove this email from here from here too this would be same this all code would be same and now inside this handle validation will make some changes here so instead of length less than 3 will have this username dot length triple equals to blank string the right email and password is required email and password is required we will remove this else if and this condition would be changed this would be a password triple equals to blank we'll remove this confirm password and email import will copy this tools dot error and we'll replace it with this that's it now inside the markup we'll have this as the same this would be username we'll add min equals to three username would be same we don't need this input we'll remove the confirm password also this would be login and we'll write don't have an account then you should register let's test that let's head over to login yeah that's it so login form is ready now let's head over to the backend and create the controller for that so inside the auth controller or what it was server controllers yeah uses controller so what we'll do is copy this paste it and this would be instead of register this would be login and we need username password from request.body now we have user is equals to await user.find one with the username now we'll write if not user write incorrect username or password incorrect username user name or password save it and instead of this we'll remove this and we'll write const is password valid equals to a weight decrypt dot compare so what we'll do is we'll compare the password which was sent from the front end and the password which is inside the database so we'll write password and user.password this compare method is given by bcrypt now it would return a boolean so we'll check if the password is not valid will return incorrect username of password this should be username let's select all the instances by control d and we'll write user name now what we'll do is we'll delete password from the user object then we'll remove this email check hash password and all of this and we will response uh give the response as decent as status as true and the user that's it and now inside the routes will create and route it would be a boost route and this would be login and this would be login as well that's it let's test this i'll write communication yeah that's working let's do one thing i'll just write the incorrect username and incorrect password okay so it is giving incorrect username or password so our validations are working let's check the frontend validations email and password are required [Music] email and password are required so yeah that's working let's head over to register login register login register now what we'll do is if there is a current uh user logged in we will redirect them to the chat page so i'll show you that inside the local storage we have saved our user so if there is a user currently in the local storage then we will be redirected to the chat page so let's accomplish that so let's head over to login.jsx dot jsx and we have the use effect hook after all of this we'll write use effect it will pass in a callback function and this has to run only the first time the component is loaded so we will pass empty brackets and inside here we'll write if local storage dot get item get item and the key would be the chat app user [Music] if this is present in the local storage then what we'll do is we'll just navigate to slash which is the chat page and i think we have an error here okay we need to close this this bracket this bracket where did we go wrong okay i think we also need a bracket here yeah that's it let's check login okay we have been redirected to the chat page let's go manually to login okay it's working it's being redirected to the chat page now let's do that for the register as well i'll copy this and head over to register and i'll paste it here and we will try to hit the register route and yeah it's not working so that's it so our register and login functionality has been completed now we will have the chat function id and the out house setting first we'll set the avatar i will create the uh avatar functionality so we'll add in page here that would be set avatar dot gsx i'll write rfc to create the component and inside the app.js let's define the route before this i'll copy this paste it and this would be set avatar the component would be set avatar okay let's test it set avatar okay it's there now let's head over to set avatar and we have to do many things here let's go to register.jsx and we are going to copy all of this imports so we need this this i'll just do one thing i'll copy all of this i go to set avatar paste it and we'll change according so we won't be needing link but we would be needing the use navigate we need the style we don't need the logo and i think we don't need the toast let me check yeah we need the toast so it's correct now we also need exeus and let's have this logo and inside instead of this logo we'll write loader here and this would be loader as well loader dot svg then this would be set avatar route set avatar route let's copy this and make the route first copy paste we will copy this we'll paste it here and this would be set avatar now ins inside the set avatar what should be done next okay so we will have the api route for the images so this is api is equals to https columns slash epi dot multi avatar dot com slash four five six seven eight nine one four five that's it so this is multi-avatar api it's open source and uh it's free and you just have to pass any random numbers here and it will generate random avatars so that's very useful now we'll write const navigate equals to use navigate we'll do one thing we'll create the component first so the markup for the component write container is equals to style dot dev let's replace this with the container and we will have the fragments after this we have the toast container and we'll wrap this inside and parentheses yeah that's it okay it's still not working cannot resolve a loader.svg let's check okay it is in jeff file so this is in jeff now that's it now we need to install and dependency named as buffer for the images so we'll install it we'll stop the react application and write yarn add buffer that has been installed we will start the application by onstart now instead of this set avatar will have the uh title container first this would have an h1 pick an avatar as your profile picture after this step we have avatars diff and this would have avatars dot map so before doing that we need to fetch the avatars so let's do that so here we'll create and state avatars and set avatars is equals to u-state this would be a blank array initially then we'll copy this paste it and we'll replace this with true and this would be is loading and this would be set is loading so while the uh avatars are loading we want to display the loader so it's for that now we'll again copy this paste it and we'll write selected avatar we'll write set selected avatar and initially this would be undefined that's it now let's uh copy the toast options from here paste it and now we'll have an set profile picture equals to async leave this function for now then we will have and use effect this would run only once now we'll define and data error here we'll have in loop this should be for loop because we are calling an api inside of this so forage doesn't work with apis we need to uh loop this four times then we'll write const image equals to await xcos dot get and this would be our api the multi avatar api we'll write math dot round math dot random and we'll multiply this by thousand [Music] so what this will do is uh this will generate multiple random numbers and we will get different image every time so that's for that now we'll define and buffer this would be new buffer and the buffer would be the image dot data now we'll push the data and we'll write buffer dot to string and we'll convert this buffer to base 64 string now after the loop is completed we'll set the avatars as the data array and will set is loading to false now inside here we'll just map the avatars avatars dot map we need the avatar and the index will return the markup this will be avatar this would be wrapped okay this is avatar what is open here okay we need to close this avatar and just compare it with the selected avatar equals to index then we'll pass the selected class selected or else we don't want to pass any class now inside of this we'll have our image image source would be this is gonna be a bit tricky the right data column image then we'll write svg plus xml semicolon base 64 the right comma and we'll write the avatar here so this would read the base 64 string as image we'll write avatar as the alternate text now what should be done next okay the l okay held has been given and we'll give it a on click on click set selected avatar to the index we also need to give it a key so we'll give it a key here is the index that's it okay we have an error here what's that is this wrapped inside a sink okay this should be grabbed inside a sink i think the images should appear okay we haven't set any height and width for the image i think because of that it is not appearing let's inspect it root we need to refresh this page okay it should be now working we have an error inside the console buffer is not defined okay we need to import the buffer import buffer from buffer and this should work now yeah the image is here you can see that we'll just style this now let me shrink this [Applause] you give it a display of flex justify content of center align items of center a flex direction of column [Music] will provided a gap of theorem will also supply a background color of hash one three one three two four okay it's working let's provided a height so now after this we'll also provide a width of 100 viewport width then we'll select the loader this is not in the dom yet we'll place this but and then we'll just style this then we'll select the title container and select the h1 give it a color of white then we will select the avatars give it a display of legs gap of two ram then we'll select the avatar give it a border of 0.4 length solid and transparent then let's select the image first and give it a height of six ram okay now you can see that properly now let's give it a padding of zero point four ram this should be zero point four not zero percent four will give it a border radius of five m it a display of legs justify content of center align items of center and a transition of 0.5 seconds is in out that's it now after this we have the selected we'll copy this border and just apply a color into this this should be 4 e 0 e f f ok the transition is also working now we need to have the button we forgot that let's create that button here so after this div this one will have the button set as profile picture will also provide a class name of submit btn i provided an on click listener this should be set profile picture yeah that's it now let's head over to login.gsx and copy the styles of the button we'll use the same here copy inside the set avatar after this selected yeah after this selected will write the submit btn paste it and yeah perfect now we need to integrate this let me resize this and what's left is the set profile picture functionality this function here first we will check if selected avatar equals to undefined undefined let's apply twos dot error and we'll write please select an avatar will provide the post options here okay let's reload the page and see if it's working the images will load wait for a minute okay the toast is working also we haven't placed the gif here the loader jeff let's do that so after this we will check if is loading if it's loading then we have the container and inside the container will write image the source would be the loader or it would be loader and last name would be loader as well and if is loading as false we need the container there this one let's include this okay it's here as soon as the images would be loaded they should disappear okay why is this not working let me load this [Applause] i think we have crossed the limitation for this api we'll just wait for a minute let's do some other tasks by then okay after this we have an else block here in the else what we will do is we'll call the api now first we will get the user from the uh local host we'll write json.parse localstorage.get item key would be let me check the key from login chat app user chat app user we have the user now and we will have the data restructured from the xcos api await json uh no excuse dot post will have the set avatar route and will pass the user id as the query param user dot underscore id and the payload would be image avatars of selected avatar it let's reload this i think we cross the limitation again let's read while it is happening we will check if data dot is set then we'll have user dot is avatar image set equals to true we'll write user dot avatar image equals to data dot image and we'll set the local storage dot set item [Music] to this key chat app user and the data would be in the stringified format the user we will not save this because we need to test our loader we'll write navigate and okay let's reload this now wait for a few seconds and yeah the loop loader has disappeared and the avatars are here we can save it now i will also write else post dot error error setting avatar please try again and we'll pass the toast options save it now let's head over to the back end and do this stuff so first we'll head over to the routes user routes and here we'll define the route of set emitter this would be router dot post set avatar fa star and we have the id here we will pass this set avatar dv will create uh this inside the user's controller first copy this paste it change the name to set avatar avatar set avatar yeah that's it now let's head over to users controller and we'll do a magic here so what should be done okay first we'll wrap our code in dry catch please do not forget to wrap all the uh all this code inside try catch will pass the exception to the next express will automatically handle that now we need the user id from request dot parents dot id then we need the avatar image from request dot body dot image now we'll have the user data is equals to a weight user dot find by id and update so we'll pass the user id first then we'll pass the uh object which would be is avatar is avatar image set and this would be true and will pass the avatar image that's it and after this we'll return response dot json so now we'll send response.json set to user data dot is available and will send the image as well this would be user data dot avatar niche save it now let's test this before testing this i'll just refresh this and show you that our current uh database entry is is avatar image set false and avatar image is empty now let's test this i'm gonna use this set as profile picture here error setting avatar please try again let's refresh this okay it has been set but why did it send an error is avatar image set was any error in the control node there wasn't any error let's head over to the react component and resolve the issue if theta dot is set let's console the data here console.log data and open the console and again such as profile picture cannot perform a react update on an unmounted component okay it just uh okay yeah the uh image was set and here's our console yeah it's working why did it give error the first time i don't know about that okay so is anything left yeah that's it okay we need to do one more thing before this we'll have an use effect hook here we'll write the sink this will be callback function and this would be run only once we'll copy this from the register or login anything is fine copy this and we'll paste it here okay didn't get copied now we'll invert this condition so if there is no uh user in the local storage we'll navigate to the uh slash so that's it not slash i think we should navigate to login i'll head over to set avatar now set avatar open the console let's see if there are any errors we'll set this okay it has been set and we have been redirected to the chat now what i will do is i'll remove this uh local storage key and now we'll go to set avatar see if it's working yeah we have been redirected to the login page and that is working and we have successfully completed setting our avatar and the component so now we'll design the chat container and the chats so let's proceed further so now we'll begin our chat section so let me go to the vh code and we'll move over to the chat.jsx and now here we will do our changes so the first thing we are going to do is import style from style components and we are going to write on uh i think we'll write a container is equals to style dot dev it's in dev then we'll replace this with fragments yeah first we need the fragments and inside the fragments i think fragment is not required we can skip that and we'll just write container and inside the container we have another div we just give it a class glassing of container then we'll create our components here which are the contacts and the chat container so we'll do that afterwards let's style this container first so what i'll do is i'll screen shrink my screen and you're gonna give it a height of 100 viewport height a width of 100 viewport width then you give it a display of flex flex direction of column and a justify content of center will also give it a gap of one ram and we will give it a line items or center a background color of hyphen one three one three two four okay we'll select the container we'll give it a height of 85 viewport height a width of 85 you put with and the background color for this would be iphone 0 0 0 0 0 0 and 7 6 yeah so the chat container is here now let's give it a display of grid grid template columns grid template columns okay it's not coming let's read this and we'll add great template columns of 25 and 75 percent so what this is that our chat section uh is this 75 percent and this is our contact section 25 and we'll also write a media query to make this responsive screen and min width of 720 pixels and max width of 1080 pixels we'll give it a grid template columns of 35 and 65 we are making this responsive for tablet mode only for mobile phones if you want to do it you can just copy the media queries you can change this to 360 to 480 and change the values accordingly then it would be responsive for the mobile devices also now we'll design our yeah we should design our contacts first so let's create a component we'll create contacts dot jsx and inside contacts what should we do i think we should get all the contacts from the database first so let's make an api for that so first we'll create an api route inside the utils we will create export const all users route is equals to dollar host dollar post slash api slash auth slash on on users that's it now let me maximize this and let's head over to user routes here we'll first add a route for the contacts so we'll write and router dot get make sure this isn't get request this is not a post request because we are not sending any data we just want the data okay so make sure of that now this would be all users and we are sending an id of the current user in the uh url itself so we want all the users uh not including our user id so that's all now let's create a controller copy this paste it will rename this to uh get all users and in the route we are gonna import this get all users now let's head over to users controller and we will write our logic here so this is gonna be very simple we'll first wrap it inside a try catch block make sure all the crude is wrapped inside try catch because in the server side there are sometimes unexpected errors and if you are not handling it your server might crash and we don't want our server to crash so we'll write const users is equals to await user dot find so we'll write a query we'll find all the id but we are gonna not select the current id so we'll write n e and request dot params dot id so this will select all the users but not including our user id then we'll select certain values from it so we'll use the select function and we'll pass an error so we need the email we need the username then we will need an avatar image [Applause] and we also need the id of the user so that's it we are just going to select all of these things uh we are doing this because this also contains the password and other fields we uh we don't want the password to be sended to the user so we'll do this and the unused values now we'll write return response.json and we'll write just users that's it yeah that's it now inside the chat.jsx we are going to call this api where should we do it first i think we need to create a state so we are gonna import use state and use effect we will also import xcos for api calling if you don't want to use xcos you can also use the fetch api provided by script then you will create and const contacts set contacts is equals to you state and initially this would be an empty array and now what we'll do is we will call our api so we need use effect we'll just call this once when the component is created okay we have to make this function a sink and if okay let's do one thing we'll just call this after our current user is loaded so current user would be get it from the local storage so we'll write current user will create a state set current user is equal to you state and this would be an empty no we'll just make it undefined now we'll again use the use effect you can use an uh as much of use effect as you want this would be uh this would get executed in the sequence you have written it so make sure you follow a correct sequence of the use effects we'll write a sync here and we'll just copy the code for this from set avatar copy and first of all if there is no chat app user in the local storage we are gonna navigate so let's import the use navigate hook using navigate from react router down and let's create a navigate from fuse navigate okay and this should work now what is this could not find name navigate did you mean navigate yeah we meant navigate okay we have a spelling mistake navigate that's it now the if continue if condition is there now else what we'll do is let's set the current user wait json.parse google storage dot get item chat app user will set the current user from the local storage and now we want to run this hook whenever we set the current user and if there is a current user we want to call the api so current user then we will also check if current user dot is avatar image set avatar image set then we will write cons theta is equals to await i'll just explain this code in a minute let me write it first excuse.get all uses route and we write current let me remove this current user dot underscore id that's it and we'll set contacts to data.data data dot data and we'll write an else condition here we should navigate to set avatar so what this will do is first we'll check if there is a current user and if there is a current user it will again check if the current user has set its avatar image so if it hasn't been set then we will navigate to the set avatar so whenever we create a new user we haven't set any uh avatar image so we will be navigated to the set avatar and then after we set we can come here and we will get all the contacts from here and set the contacts to here that's it now what we will do is we will create the component by rfc and inside here we are going to call that contacts contacts and we are gonna pass that contacts here now let's restructure that here in the props on that and what should we do next okay we need the use state and use effect use state use effect um i think we don't need and use effect then just pass the current user current user is equals to current user from here we copy this and we restructure it along the contacts now we will need these styled and we are gonna import logo from assets and logo dot svg now let me showing this again so you can see the markup is the contacts visible yeah we have the contacts here you can see that now let's have it so what should we do first um we need the use effect hook here for the image and all so write use effect we want to run this function whenever the current user is changed and will make some state so first is current user name and set current user name is equals to you state and this would be undefined as at first then we have current user image set current user image this will also be undefined first and then we'll also create and current selected so whenever we select on any chat it will be selected so we'll write current selected set current selected is equal to u state undefined so initially uh there won't be selected any of the chat now we'll use the use effect we have already returned it and inside here we'll have the first will check the current user if there is a current user well set current user image as current user dot avatar image then we'll also set current user name as current user dot user name that's it so after the use effect we will also create a change current chat equals to index and contact we will leave this function for now i'll explain you this afterwards why have we written this and now we'll create a container const container is equals to styled dot dev now what should we do next okay we are gonna write a fragment here first after that will conditionally render our component first we will check if that is current user image and and current user current user name and then if this criteria is met we want to render our container first we have the brand in that we have our image this would be logo alternate text would be logo we'll write the name of our application which is snappy and after this we'll have our contacts so we'll use contacts dot map we need the contact and we need the index we'll write an arrow function we'll return the psx markup first this is a div with a contact then let's give it a key first key would be index and let's convert the class name to dynamic this would be contact and we will also pass and selected if the current index triple equals to current selected then we need to pass this selected or we don't want to pass anything that's it now inside this div we have an avatar inside avatar we have an rmg source we are going to copy this source from set avatar we have already written this here this one just copy this and paste inside here this would be contact dot avatar image that's it contact dot avatar image yeah that's it now after this we have an username we'll write h3 inside here contact dot username so our map method is complete now and after this map method we have the current user so we'll write current user inside current user we have the avatar every star will paste the image first we need to write let's copy it from here these both are seamless we just need to change this to h2 and this would be current username current user name and here we'll just change this to current user image current user image okay that's it let's reload this okay our content is not coming we need to style this i think let's style this we will first write display after a grid template columns of 10 percent 75 percent and of 15 percent and we are going to give it a overflow of hidden and will provide a background color of zero eight zero four two zero this isn't coming what is that let me see if there are any errors no there aren't any errors our container is empty here is that okay let's see this yeah we have our content here let's try this first we'll select the brand give it a display of flex align items of center justify content of center and the gap of one gram will select the image and give it the height of two ram and we'll select the h3 we'll give it a color of white okay and the text transform of uppercase where did the image go i think we need to style this first so it would appear properly then we have the contacts we give it a display of flex flex direction of column align items of not align content align items of center and an overflow of auto we want the contacts to be scrollable then we'll give it a gap of 0.8 why it's not here let's select the contact we'll go to background color of hash ffff and 39 let's check if there are any contacts let's install the [Music] react developer tools okay i cannot add extensions in incognito i'll copy this and let's not do that and we'll just console the contacts in the use effect control dot log contacts okay we are getting an empty array why is that don't we have any other user in the database let's uh create a user we'll open localhost column 3000 and yeah we need to open this in any other browser so i have created more users here as you can see and now we have some issues first we wrote here grid template columns instead of columns we will write great template rows okay and we are not getting any images back from the user's controller so here yeah we made a mistake avatar user image let's reload this okay the images are here that's it now let's style this further again contacts let me shrink this background color and we will give it a min height of 0 5 m and will give the width of 90 now we need to fix the image will select avatar we'll select image and we'll give it the height of either yeah it's fixed now inside the avatar again not inside the avatar inside the contact will give it a cursor of pointer we'll get a border radius of 0.2 ram i'll give it a padding of 0.4 ram 0.4 ram they will also give it a gap of one drum and will align items of center did we give it a display of flex move we have to give it a display flex yeah it's working now and we will also give it a transition of 0.5 seconds easing out so whenever we select any other contact we will have a smooth transition now after the avatar we have the username dot user name and we'll select the h3 and give it a color of white that's it and now after leaving the brackets here we'll write this selected and give it a background color of 9 e 8 6 f 3 and after leaving 2 packets again we'll write current user we'll give it a background color of zero d0 d30 and we'll give it a list of flex justify content of center align items of center cap of to run and we'll select the avatar select the image give it a height of 4 ram and we'll also give it a max inline size of 100 [Music] after avatar we'll select the user name select h2 and give it a color of y there should be color while it is not working user name h2 color let's go to display of none okay it's working and [Music] we don't have an h2 inside we have an h1 this needs to be h2 h2 yeah that's all so this is also style but we are gonna make it responsive also so we'll write media let's copy the media query from chat.jsx and copy this media query paste it and we'll give it a gap of 0.5 m and we'll select the user name select the h2 and give it a font size of one ram that's it so this is also responsive now now we have to style here the scroll bar because there are no more users we don't have the scroll bar let's do one thing i'll just copy this contacts here paste it again so we have the scroll bar now and we are going to style the scroll bar it doesn't looks good here so inside the contacts will write pseudo selector webkit scroll bar and here we'll give it a width of 0.2 run this is 0.2 ram and there are only two columns here then we'll select conversion sound then we'll give it a background color of this one and we'll give it a width of 0.1 gram also we'll give it a border radius of one drum and that's it so it's looking good now we want to implement uh when we select that functionality so we'll head over to chat.jsx first and inside here we'll create a function handle chat change here we'll write construct handle chat change equals to chat and we'll write set current chat for that we need to meet and hook a few state so we'll write current chat and set current chat is equals to use date and this would be undefined first and after that if we have in chat we write set current chat equals to chat that's it and we are going to pass this function as a proc to this contacts component so we'll write change chat equals to handle chat change and copy this and save this and go to contacts we will destructure this here at the top in the props now we had written this function chat change current chat so we are gonna use that now so whenever we click on any chat we will uh have this function and we'll change the current chart so we'll write set current selected as the index and change chat to contact that's it now let's select any of this okay it's not working why is that let's see if the classes are applied properly for the selected now when we click over this there are no classes being applied so did we pass the function no we didn't pass the function here so on click error function and we'll call the change current chat will pass index and contact that's it now let's select yeah the animation is also working and it is being selected now we are going to remove the other map method we used this one and we are gonna remove a console that we wrote this one that's it so our contact section is ready now we'll create a welcome screen here if there are no contacts selected and if there are contacts selected then we'll show the chat container so let's do that so now we'll create a new component named as welcome.gsx we'll write welcome.jsx and we'll write rfc here we will restructure the user will pass this from the chat so let's first input the welcome.jsx and now here we'll pass the current user let's copy this this would be current user copy this and inside here we'll change this to current user now we'll import styled we'll just write style now we'll import the robot chef so we'll write proport from assets and robot.gif now you will create const container is equals to style dot div will replace this with the container and here first we'll have the image source as the robot will just give the alternate text to robot and after this image we'll write an h1 which will have welcome and then we'll write span and this would have the jsx as the [Music] current user.username user name and we'll write an exclamation mark then after this h1 will write h3 and we'll write please select a chat to start messaging now let me shrink this so you can see that is the content here this is the container then we have this first dip yeah we have the first step but not the second okay we forgot to save it and yeah it's here now let's close this let me shrink this again and let's head over to welcome.jsx and inside here welcome we'll now style this so first we'll give it a display of flex and justify content of cinder align items of center not align content align items of let me remove this and write it again why is this happening right align items of center flex direction of column and a gap of no gap is not needed we'll just give it a color of white and after this we will select the image we'll give it the height of 20 ram and we'll select the span and give it a color of hash for e0 eff that's it and yeah it's looking beautiful now whenever we select any of the chat this is gonna be hidden and the other component would load the chat component let's do that functionality now so let's create a new component named as chat container chat container write rfc and now inside the chat.jsx will conditionally render both of this component so the condition would be the current chat triple equals to undefined if it is undefined we want to render the welcome or if not undefined we'll have the chat container will also pass the current user inside the chat container okay let me refresh this so after refreshing we have an error let's solve that cannot read properties of undefined username welcome.jsx username so i think this is being loaded before our use effect hook so let's do one thing we'll just create and is loaded const is loaded the right set is loaded is equals to use state and this would be false and after our current user is set we'll also set current uh set is loaded to true and we'll use this here first we'll check if is loaded and end okay that's it okay the error is gone and it is working again so whenever we select this chat we have this chat container now let's style that so what should be done here we will have three sections here first is the header then we have the chat container itself and we have the chat input at the end so the main logic of our chat application will come here so let's import style import style let's create a container is equals to style dot div this would be container and inside here we'll write chat header inside the chat header we will have user details inside the user details we will have the avatar inside the editor we will have the image and then we will have the username which would be and h3 so i think we forgot to uh send our these structure yeah we have sent the current user let's restructure that current user we need to restructure this current user and we will write current user dot username and for the image first we are going to copy that from contacts.jsx current user image let's head over to here you replace this with current user dot avatar image okay this doesn't has to be current user we have to send this selected chat so what okay current chat current chat and this would be current chat copy this and inside the chat container will select all the instances and replace it with current chat now after this username this yeah so the chat header is complete we will also add and log out component here we'll do that afterwards we'll first create the chat messages this would be empty as of now and after that we'll have in chat input so let's write chat input we'll replace this with the custom components are just using this for styling as of now and now i'll just shrink the screen this is not coming okay undefined of avatar image let's go to chat.jsx and we'll check we'll first check that if current chat is selected we only want to render this after the current chat this has to work because we have written the undefined here so let's remove this cannot read properties undefined reading avatar image so what props are being sent let's go to chat container and console current chat current chat we are getting undefined because not any of the chat is selected let's write a condition here if there is a current chart current chat and then this will be there we'll wrap this component inside of fragment let's wrap it inside the fragment we missed something so this is this okay the bracket should come before this that's it and this is working again now when we select this yeah it is working perfectly let's remove these console and let's style this so let's head over to chat container and this container would have the padding top of one ram then let's select the chat header first chat header display of legs justify content of space between then we will give it a line items of center a padding of zero and two done after that we'll select the user details and give it a display of flex align items of center a gap of one drum we'll select avatar select the image inside it we'll give it a height of 3 then okay this is that and now we'll select the username [Applause] h3 and we'll give it a color of white there should be color yeah it is here okay so to see without proceeding further we'll just complete complete this chat header we'll have the logout button here now so for logout we'll create another component and that would be logout.jsx so let's create new component logout.jsx and write rfc here head over to chat container and we'll import this after this username not username user details i'll write log out save it and inside the log out what we will do is let's uh install react icons for this we'll need an icon so i'll write yarn add fiat icons now let's start our application again one chart let's close this and we are gonna import the use navigate hook then we are gonna import style we will need excuse um [Music] we will import bi bi power off from react icons this is import this is react icons and this will be from bi now everything is here so first we will create const navigate is equals to use navigate and we'll create a function const handle click is equals to a sink and this would be okay we'll just uh have local storage plot clear here and we'll navigate to login that's it and this would be here and bi power off they would be replaced by up button so we'll write const button is equal to style dot button let's replace this tab with a button and now we have the button here let's style the button so first we'll give it a display of legs justify content of center align items of center not align content align items of center padding of 0.5 ram this should be 0.5 m will also provide the border radius of 0.5 m will provided a background color of 9a 86f3 we'll give it a border of none we'll give it a cursor of pointer then we'll select the svg inside it and we'll give it a font size of 1.3 ram and we'll select the color and select ebe 7 double f yeah that's it so it is styled and now let's click this and the log out will work it's not working okay we need to pass the on click method here on click will handle the click this should work now yeah it's working now let's go to chat page let's go to set avatar okay we have not returned the condition of of if the user is set then only proceed further in the chat page we have to do that but in the set editor it is working so let's do that for the chat let's copy that from the set avatar the use effect hook copy this and inside the chat.gsx this would be executed okay we have written this local storage dot get item chat app user then why it is not working this should work let's alert here if alert else let's head over to chat okay so we haven't returned this chat route this is slash route the functionality is working but i made a mistake for the route sorry for that okay so one one one one one one okay so this is working now now we will design the chat container and chat input so now uh we'll design the chat input first before designing the chat section so let's create a new component this would be chat input dot jsx okay chat input dot jsx all right rfc here let's head over to the chat container and import the chat input here so chat container this chat input would be replaced by chat input this would be self-closing you will write handle send message equals to and will send message equals to handle send message we are gonna create this method here const handle send message this would be message and do we need any other parameters here i'm not sure about that so let me check that no this is enough and this the async function so let's head over to chat input and design this chat input will import the uh style from style components and we are going to install a new component not a component a library which is emoji react emoji picker react so i'll write yarn add emoji picker react let's wait for this to install okay so we'll now start the application we unstart we have imported the style and now we'll also input the picker to the right import pickup from emoji picker react i will also import some icons which are import from react icons i o and this should be i o m d send will copy this paste it and this would be from b f package and this would be bs emoji smile bs emoji smile fill now that's it so everything is imported we also need the use state use state that's it now let's create a container is equals to styled dot dev replace this with container and inside here we'll have the button container this would be emoji this would be the s emoji smile fill and that's it we'll place the emoji afterwards now let's have the form we don't need any action we'll give it a class name as input container so what we'll do is we'll first tile this and then after styling we will uh have the functionality so we'll first tell this type your message here [Applause] after the input we have an button with a class of submit and inside that we'll write the iond send that's it so this is here yeah this is here so let's style this so before doing that we'll create a new component message is dot jsx and will place this messages inside the chat container we remove this and we'll write chat messages we need to create the component rfc chat container messages let's head over to messages that's it we'll include styled and write const container is equals to style dot there will replace the container now let's give it the height of hundred percent we place this container so now chat input is not here where did it go let's give it a height of 80 percent that's it for now let's style the chat input now so first we'll give it a display of grid uh we get template column of five percent and a 95 this would be red template columns then we'll write align items of center [Music] we'll give it a background color of hash 080420 and we'll give it a padding of 0 and do them we'll also give it a padding bottom of 0.3 ram [Applause] now we will do the button container we will select the button container give it a display of legs align items of center we'll get a color of white we'll give it a gap of one gram we'll select the emoji [Music] we'll give it a position you know position is not needed i think we'll give it sod a position of relative as needed i'll explain this afterwards we'll write font size of 1.5 m we'll give it a color of f f f 0 0 c 8 and c 7 c 8 we'll also give it a cursor of pointer okay so the emoji is here so after this we will write the input container will give it a width of 100 100 will give it a 90 width will give it a height of 60 percent will give it a background color of transparent okay so this is for the input let's remove all of this this will be 100 only remove the height we'll get a border radius 2 ram display of flex align items center and we'll give it a gap of 2 ram and we'll give it a background color of ffff and three four it is here we'll select the input now give it a width of 90 percent 90 and a height of 60 percent now give it a background color of transparent you get a color of white give it a border of none this is right what a nun padding left of one ramp will give it a font size of 1.2 run then we will select the pseudo select selection and background color would be 9 a 8 6 f 3 and whenever we focus upon this we don't want any outline now this is done now we'll select the button first we will get a padding of zero point three m and two run then we will give it a border radius of 2 ram give it a display of okay need some mistakes display of legs justify content of center and align items of center we'll give it a background color of 9 a h6 f3 and after that we will also give it a border of none now let's select the svg inside and give it a font size of 2 run and a color of white okay that is perfect now there is something wrong with this the height is not perfect why is that let's give it a height of hundred percent to check height 100 it has exceeded let's give it a height of 20 percent okay let's leave this for now we'll fix it afterwards i think it will be fixed when we have this chat messages because it's working on the grid template rules okay so let's remove this height and this would work surely now let's have the emoji pickup so for that i think we have to create a state for showing and watching yeah we will create a state const so emoji picker and set show emoji picker is equal to you state initially it would be false why there are errors here const expression okay this is inside return which will be here now we'll also create const message is equals and set message is equals to use state this would be an empty string now we need two methods we'll first have const handle emoji picker hide show equals to arrow function and we'll set show emoji picker set emoji picker to true not true we'll just uh revert the condition so emoji picker so it will hide and show so on click of this on click we will call handle emoji picker hydro and will conditionally render if it is true then we will also render the picker yeah it is here now we need to style this and make it to the top here but it is working as of now let's also add an on click listener to this on emoji click we will have the handle emoji click we will copy this and create const handle emoji click is equals to we will have the event and emoji here now we will have relat message equals to message from the state and we'll have message plus equals to emoji dot emoji and we'll set message as message that's it and now [Music] let's set message also so this text the value would be message and on change we need event arrow function and we'll write set message e dot target dot value so that's it that should work what's the error unexpected an assignment or function called line number 16 okay there should be plus equals to we need to make this appear at first here so let's do that inside the emoji after this svg will write emoji picker react will give it a position of absolute will give it a top of minus 350 pixels it should be visible now yeah this is visible and emerges are being added but not shown here why is that let's check the state what is inside this components chat input let's select this only chart input dividend form what instead did we need let's console the emoji console dot log emoji and where is this error coming from let's reload it [Music] we'll click an emoji so image is working now okay we need to refresh the page for the library is to load it's working perfectly you can see that now let's remove this console.log and we will style this as our theme so [Music] let's move on to here emoji picker react will give it a background color let me shrink this so you can see it background color of hash 0 8 0 4 2 0 then we'll give it a box shadow not box sizing box shadow of 0 5 pixels and 10 pixels and we'll provide the color as 9a 86f3 now we will also give it a border color of 86 f3 then we will select the emoji scroll wrapper let's first select the emoji categories emoji categories select the button will give it a filter of contrast 0 then after this categories will select emoji search background color would be transparent and border color would be the purple color then after the emoji search we have emoji group and there is a pseudo selector before here we'll give it a background color of 8 0 8 4 0 that's it so this is almost all we just have to style the scroll bar now let's style the scroll bar that should be inside here and we'll write emoji scroll wrapper webcam scroll bar will remove the extra columns from here we just need two columns and here we'll give it a background color of yes and width of 5 pixels we'll select the thumb you'll get a background color of 9a crisp purple yeah it is visible and this is looking great let's close this and now [Music] we'll have this send chat button so first we will have const send chat let me maximize this send chat is equals to event event dot prevent default so after this prevent default will select if message dot length greater than zero then we'll have handle send message this would be a prop that would be passed from the parent component and will set message as an empty string let's go to the chat container and we have created handle send message we also had sent that we just need to destructure that here and send chat would be here in the input container on submit is this on submit i'm not sure yeah on submit on submit we will have an event and we will send chat and pass that event that's it also i think yeah we have given this a submit let's test it yeah the component is not reloading now and this is completed so now let's head over to this chat container and use this handle send message first we'll just alert this alert message okay it is coming here now we will integrate this message with back end whenever we hit enter we will send this message to the user so we will store this in the back end we are not implementing sockets now we'll implement the socket and the end so now we will send this chat to the database so before doing that we will uh create the models and routes and api so let's create the model first so let's head over to this backend and we'll create a new model which is message model dot gs and inside the message model will just copy this let's copy all of this inside message model save it we change this to message schema message schema and we'll just change this to message schema and this would be messages now we'll remove all of this and here first will pass and message that would be in text and that will be type of string will have required as true after this text we have an user's array after that we will have the sender this would be type of mongoose dot schema dot types dot object id and the reference would be the users users not users user will required will have this required as true and after this sender and this message i think we have to write the timestamps and create another object and write time stamps to true i think we have an error here and what is that wrap this do an object why did we go wrong this message and this is the parentheses okay this parentheses should be here [Music] then we have the users this is correct okay we'll close this here and we don't want this yeah that's correct so our message schema is ready now let's head over to the uh no we have to create a new route file which is messages route dot js and we'll just copy all of this paste it will remove this and remove no we're not gonna remove just create the messages controller messages controller dot js go to users controller we will copy this and go to messages controller and this would be module dot export dot send message is this send message okay not send message you will write add message add a message because we are adding it to the database and we'll also write and get message here get all message now let's head over to messages routes and here we'll add both the route this would be from the messages controller and this would be add message and this would be get messages get all message this would be add message add message and this would be get message that's it and now we are gonna import this router into the index.js file as we did here we are gonna have the name as api slash messages instead of our message api slash messages and instead of user routes we'll write message route okay we need to input it it will not auto code this would be message route and rename this to message route this would be here the message route okay so this is set up now let's have the controller will have the add message here so we'll add the message into the database so for that we will drag this into try catch as usual next will pass so this is not next this is exception will pass the exception to the next inside the try will have the const from to and message from request dot body this is request.body and we'll just create messages dot create messages message model dot create will pass message as text then we will have the users array from and to the sequence is not important but we'll write the sender from this is important so it is created now if it is created will return response.json as message message added successfully if not will return [Music] fail to add message to the database fail to add message to the database that's it so our add message api is complete now let's integrate this inside the chat container yeah inside the chat container so first we'll create an api route so let's head over to api routes and here we'll export const send message route equals to host slash messages so this would be first api api messages and the right message that's it now let's head over to chat container and we'll do a magic here so first we'll import excuse import excuse and will have the send message route that's it now inside the handle send message remove this alert and will also pass inside from the chat.jsx will pass the current user so we are passing the current chart and will pass the current user is equals to current user copy this save it and inside the chat container will destructure the current user current user now what we will do is we'll await excuse dot post send message route sound would be current user dot underscore id and two would be current chat dot underscore id and the message would be the message received from the input container message would be message that's it let's check the database i'll refresh this so this is the message model and we don't have any message here currently i hope it works all right hello harvey send refresh and yeah it is here so let's check the text hello hobby so this has been added to the database so our message sending functionality is complete this is not the socket socket would be implemented at the end now we will have the message container and get all the messages so let's do that so now we are inside the chat input and first we will create the api to uh get all the messages from the current user and the current chat user so we'll head over to the messages controller and we'll fetch all the messages from the database so we have get all messages and we'll grab it and try catch exception next exception and inside the try we'll just restructure from and to from request dot body and now we will write const messages messy chess equals to await messages not messages message model dot find and will pass the users and will pass the all operator will pass from and to here so it will get all the messages from these both user and we'll sort them with the updated at property updated at one okay that's done now we'll create and projected messages projected messages is equal to messages dot map will get all the message return if it's from self so we'll write from self is equal to message draw message dot sender dot 2 string so this uh sender is id so we'll convert it to the id on the string format and compare it from compare it with from and if it is from the current user then we'll will write from self is equal to true and will give the message as message dot message dot text if you are unable to understand this this would be understood when we are creating the front end then we'll return response.json projected messages that said so let's check if we have written the route user message route here we have written get message route so let's head over to api routes and export construct get all message route messages route is equals to dollar host slash apis last messages slash get message okay that's it now let's head over to chat container and inside the chat container we have created this messages component so we are gonna delete this for now and we are gonna write chat messages here chat messages and here first what should we do um yeah whenever we write and use effect here x use you state and use effect so here we'll write and use effect use effect and this would be an async function we want this to run whenever the current chat is changed so whenever the current chat has changed we want to fetch the chat of the current user and the current chat user so what we'll do is we'll write const response is equals to await excuse dot post right receive now we'll let get all message route and will write from as current user dot underscore id and we'll write 2 as current chat dot the score id and we'll set this messages so we have to create the state for that messages and set messages is equals to you state initially this would be an empty array and will write set messages as response dot data that's it so our use effect is ready now we'll map this chat inside the chat messages here where did it go yeah here so we'll write messages dot map we will have the message and we will return the gsx markup so first we will have and div inside that we have div with class name this would be dynamic so we'll write this and class name would be message now this would be if the message dot message dot from self is true then we will add the class send it or you will add the class receive that's it i think we have some error yeah we [Music] have the error here now after this inside the dev we'll write content and we'll use b as message dot message this should be inside the curly braces okay i think we have an error here where is this error coming from and this is dead this is hundred okay let's correct now now after this it is complete i think we would have the message yeah we have all the messages you can see that we have all the chat message here now we have to style this so here at the end what we will do is we'll write chat messages we'll give it a padding of one rim and do them let me shrink this so you can see that we'll give it a display of legs flex direction of column and the gap of one ram will also provide overflow of auto then we'll select the message and we'll give it a display of flex and an align items of center now let's select the content inside it will give it a max width of 40 and an overflow wrap of greek word we'll give it a padding of 1 gram also we'll give it a font size of 1.1 gram we'll give it a border radius of one rem we'll give it a border no not the border will just provide a color of hash d1 b1 d1 so the chat is visible now after this we'll select the sended you know inside this will select the send it and we'll write justify content flex end and we'll select the content and give it a background color of 4 f 0 4 ff 2 1 and for the received our ecid justify contact flex start we'll select the content give it a background color of 9900 ff20 and yeah it's visible let's write some chat what about you i am good to [Music] let's write an emoji here and send it and let's close this and refresh this so we would have the chat here yeah we have this chat now let's fix this fix this so i don't know why it is coming let's check that okay so i have found the issue we'll give it a display of grid a grid template columns no grid template rows of 10 percent 78 percent and a 12 percent okay that's fixed now we'll also give it a gap of 0.1 gram and will supply overflow gap overflow of hidden that's it now let's grab the media query from the chat let's grab this case chat and we'll write grid template rows of 15 percent seventy percent and fifteen percent again now all that is left to fix is this we have to fix this chat input let's see what's the issue there so for that we need to go into the chat input and where was the input okay wait let's remove this height okay that's fixed let's send any message hello send refresh select hobby yeah the message is sent so all of the ui is ready we just have to implement the sockets now for the one to one chat so we don't have to refresh the page and as soon as we send the chat it will be received here so let's do that now let's head over to the back end and set up the sockets so let's head over to index.js and here first we'll install the socket.io so let's stop the backend and install yarn add socket dot io now let's start the server again yarn start close this and inside the index.js first will require the socket above here const socket is equals to required socket.io and now what we will do is at the end of our page sorry i changed the page here at the end after we have created the server we write const io is equals to socket we'll pass the server object here and we'll write course and will write our origin so in our case our origin is http localhost column 3000 and this is a single column and two double slash so we have to provide an origin if you have any different origin you have to provide it here then we will write credentials credentials c r e d e n t i a else credentials true so our i o is ready now we will create a node.js global object global.online users is equals to new map will store all of our online users inside this map and i will write i o dot on connection will get the socket inside the callback function and now we'll write global dot chat socket equals to socket now we'll write socket dot on add user will require the user id from it and will set onlineusers.set the user id and the socket id socket dot id that's it and now whenever we have the socket dot on send message we'll grab the data we'll write const send user socket is equals to online users dot get and we'll write data.2 and if the user is online if send user socket if the user is online we'll write socket.2 send user socket dot emit message receive r e c i e b e and write data dot message so what we have written here is first we had the connection and whenever there is a connection will store the chat socket inside the global chat socket and now whenever we emit add user from the front end whenever the user is logged in we'll establish a socket connection by add user so we'll grab the user id and the current socket id and will set it inside the map now whenever there is an uh send message socket event emitted so what we'll do is whenever it is emitted we have passed data so this data would have the two and the message so first we'll check if the uh message that has to be sent to the user is online from the online users will check it if it is online then we will us emit the message to that user by the message receive event so if the user won't be online then it would be stored in the database and if he is online that would be stored in the database plus it he will receive the uh message at the at that moment only so that is done so our server side is complete now let's head over to chat.jsx and will establish a new socket connection there for every user who has been logged in so for this we need to uh install the socket io client library so i'll write yarn add socket dot io slash client circuit i o not slash we'll write socket i o hyphen client hit enter wait for the package to be installed okay it's installed we'll start the server by onstart let's close this and we are gonna import the i o from socket import io from socket io client that's it now what we will do is we'll use the user f hook use ref and will create a const socket is equals to use ref and what we will do is as soon as we have the current user we'll have the use effect after this as soon as the current user is changed we want this to be run so we'll check if there is a current user if there is a current user we'll write socket dot current equals to io and we'll pass the host here we need to import the host i think [Music] yeah we need to import the host from the route right here host and we also need to export it so we'll write export const host let's head over to chat.jsx and we have established the connection now now what we will do is we'll write socket dot current dot emit add user and will provide the current user dot underscore id so we'll pass the current user id whenever the current user is logged in so we'll add it to the global map that we set up in the backend so that's it now what we will do is we'll pass this socket rev to the chat container here socket socket okay we have passed that now let's de-structure that in chat container right socket here and inside the chat container what we will do is first of all whenever we send the message we'll also emit an event which is socket dot current dot emit send message and this would be to current chat dot underscore id then from would be current user dot underscore id and will set the message as message also we'll do one thing we'll have const messages is equals to these structures the current messages array and now what we'll do is we'll push the message which has sent by the current user to the messages array like this from self as true and message as message and we'll set this to the current state as set messages messages that said now we will also create an another use effect this would be run at the first time whenever the component is loaded and if we have socket dot current if it's not undefined we'll write socket dot current dot on message receive so we'll write the message receive event here message receive let's copy this event from the backend so we don't make any mistakes inside the end [Applause] that's the scene now let's head over to chat container uh message receive event and we need the message here will write set arrival message so i think we haven't created an arrival message book we need to create that state so we will write const arrival message arrival message is equal to set arrival message is equals to use date and will pass it as i think we should pass this as null now at the end here we will use that set arrival message and we will write what should we write we write from self as false because it isn't received message and we give it a message of message that's it now we'll use another use effect use effect this will this would run every time when there is a new arrival message and what we'll do is we'll grab the arrival message and set messages will grab the previous messages so now we'll have this array we'll restructure the not d structure we'll spread it and we'll have the arrival message here okay that's it and will also have an use effect here this would be scroll ref we haven't set up this scroll ref we'll setup it scroll ref of current dot scroll into view scroll into view and we'll write behavior give you a smooth i'll explain this what it is so let us set up the scroll ref so we write scroll ref is equals to use ref and yeah this should be run every time there are changes in the messages so we'll pass the dependency as messages so what this ref will do is it will scroll into the view the new messages so it will have that animation effect let's test it okay scroll ref is not defined we did write it scrolled f okay this should be const hi it's not working okay it's here hello it's still not working let's do one thing all right hello again [Music] hello let's refresh this it is working but i think socket events are not working we have multiple errors here websocket connection to ws localhost 300 field let's reload it cannot read properties of undefined let me fix this error okay so i have found this error this should be solved by here we'll write an if condition here we'll write current chat and if there is current chat then only do this let's refresh it and yeah it's okay now we will remove this import and we are gonna import a new package which is uuid so i'll write yarn add uuid this will generate unique ids for the messages let's wait for it to install it installed now onstar let's close this we'll import it here import v4 as uuid v4 from uuid and what we will do is here on this div first we will give it a ref of school ref and we'll give it a key of uuid v4 we'll call that function let's refresh it okay what error do we have now scroll ref dot scroll into view is not a function scroll into view okay scroll into view that's correct now let's write any message so we have this error message.push is not message.push so that should be from here handle send message this should be messages dot push now will write either again and yeah it is here now let's see if it has arrived here okay it is here now let's write something here hey there hello hey the message is here blood it is blank so what is the issue here we need to solve it let's see if there are any errors in the console no there aren't any errors in the console so we have this message receive message message and i think we should console the message from here we'll write console.log message and let's send a message hey kitchen okay so we received a null message why is that message is a null message message received and we sent a message let's head over to server to check if everything is working here we have the send message so first we'll write console.log send message and we will write this data and here we will write console no we don't need to write this just write this open the console and we'll send any message hello okay send message to from and message so i think we have to write here data dot m-e-s-s-a-g-e message let's remove this console and now check if it's work avi hello harvey we didn't receive the message okay so we have fixed the issue there wasn't any issue by the way as the as we have restarted the server the socket was inconsistent so we just had to refresh the page as uh the server was reset so i'll test it now write hello harvey and i'll send an emoji and yes it is being received in the real time okay so our chat application is completed now let's uh style the scroll bar and fix this input in the responsive mode so let's head over to this chat messages here and here we'll write ampersand webkit scroll bar and we'll remove this two will give it a width of 0.2 ram we'll write thumb we'll give it a background color of fff 39 then we'll give it a width of 0.1 gram and we'll give it a border radius of one run okay so the scroll bar is styled now let's do this so we have a media query here yes now let's head over to chat input chat input and what should we do here first we'll have the button here we'll paste the media query select the padding as 0.3 ram and one ram then we'll select the svg and give it a font size of one drum not font weight font size one run after this at the top here we'll paste the media query and we'll write padding 0 1 ram and a gap of one rim that's it so it is styled and it is looking great so yeah that's it so our chat application is ready i'll test it again if it works hello [Music] okay we have a bug here why did we receive so many messages [Music] we'll write hello again hello hi hello hi okay so there wasn't any bug actually what was happening is as we uh uh saved the component and the component reloaded so the socket was not maintained by the back end so we had to refresh it now it will work perfectly as the development is complete and the socket is fixed now so whatever will right now it will work perfectly will send emojis send close it select any other chat send yeah it is working as you can see that okay so that's it so our chat application is complete now if you have any doubts you can ask me in the comment section and please don't forget to give a like to this video see you next time [Applause] [Music] you

Channel: Kishan Sheth

Views: 242,982

Keywords: reactjs tutorial, react js, socket io, react chat app, chat app, microsoft teams, react js project, react tutorial for beginners, whatsapp clone, socket.io react, react chat application, react chat app tutorial, react socket.io, react socket.io chat, chat application in javascript, chat application react, chat application using react js, react chat app socket io, react chat app ui, react chat app with socket.io, kishan sheth, nodejs tutorial, mern stack projects, nodejs

Id: otaQKODEUFs

Length: 252min 36sec (15156 seconds)

Published: Wed Mar 02 2022