Chat Application using React JS - Build and Deploy a Chat App in 1 Hour (Microsoft Teams)

hello everyone and welcome to a project video where you will build a full-fledged chat application with online statuses great design and functionality icons telling you who read the message image support sound notifications the ability to create multiple rooms and much more this chat app is like no other that you can currently find on youtube keep watching and i'll teach you how you can build this in just one video completely for free at the end we're also going to deploy the chat app so that you can share it with your friends or put it in your portfolio enjoy before we dive right into the code please allow me to give you a quick demo of the application we start off with a login screen where you can enter your username and password you have to use the credentials that were given to you by the chat admin once you log in you'll be greeted with this great looking chat application on the left side you can see all the chat rooms that the currently logged in user has access to right now we only have one but we can head down and create a new one immediately let's do something like demo and create it that is it as you can see new chatroom was created immediately on the right side you have a list of all the people available in the chat room i'm logged in as the admin right now so it even allows me to add new people into the chat let's add wendy for example let's login as wendy and let's experience the real-time messaging feel i just split my screen into two parts and open a new window inside of here we'll log in as wendy walker and let's see how does it look like as you can see the online offline status was automatically changed to online for both javascript mastery and wendy wendy also has access to the newly created chat that she has been added to finally let's see how the messaging works you send the message let's do hello and all the other users immediately receive it that's great there's even a sound notification that notifies you when there's a new message after you finish this video you will not only have this project to showcase it you're also going to get a lot of knowledge some of the topics that are going to be covered in this video are sockets hooks props javascript apis and more all of the great features of this application are made possible by chat engine chat engine uses sockets behind the scenes and it allows you to create a simple chat right off the bat as it says here in just 12 lines but it also allows for a complete customization of absolutely any part of the chat application in this video we're going to completely rebuild the chat feed which is the main part of any chat application that was a quick rundown of the app that you are going to build today to support this video leave a like comment and subscribe it shouldn't take more than a few seconds and i really appreciate it without any further ado let's dive right in to start building this application you'll of course need a code editor in this case i'm using visual studio code and what you need to do first is just to create an empty folder so i'm going to minimize this and right in here we're going to create a new folder and we can name it something like chat underscore application after you have that simply drag and drop it right in here now that that is open you can maximize this window go under view and finally terminal this is going to open the visual studio codes built in terminal and the last thing that we have to do is create a new react application to do that you can run the command mpx create dash react dash app and then you say dot slash this is going to make sure to create a new react application right in the current directory this is going to take just a minute and we'll be right back now the react application is initialized as you can see quite a few files and folders have been generated along with this source folder this is our react application in here we have things like setup tests vitals logo index testing and a lot of other stuff we don't need that so what i like to do with every new react application is i like to delete the src folder and create a new one from scratch so i just did that and one file that we absolutely need to have is the index.js file so let's start with creating that inside of here we can do import react from react we are also going to do import react dom from react dash dom then finally you can call react dom dot render and then in here we render our entire application we didn't create that yet but that is going to be our app component finally you choose a document and do get element by id and you specify the name root every react application starts with a simple div that's named root and you can see that right in the public index html inside of here we have a lot of comments and a lot of different things but if you simplify the view remove some comments as i'm doing right now you can see that this is a simple html page that only has one div with an id of root while we're here let's also rename this to chat app inside of the src i'm going to create a file named app.js back in the index we can import it so we can say import app from dot slash app and that's going to be it for our index.js file things that we're going to do next are going to be inside of the app.js inside of here we'll be using quite a few things that we'll have to install so let's open our terminal you can go under view and then terminal and now inside of here let's install all the dependencies that we'll be using for this project we won't have many you can run npm install and then we can start naming dependencies the first one is going to be add and design forward slash icons then we're going to install axios to make requests finally react chat engine this is going to be the main star of the show and that's it with only these three dependencies we have everything that we need you can press enter and this is going to install all the dependencies now that our dependencies are installed we can start using them inside of our app.js we're going to import that's going to be a named import with curly braces and that something is going to be chat engine from react chat engine with that we're also going to import a css file that i'm going to give you the access to so import dot slash app.css you can go ahead and create that new file called app.css and then in there you'll be able to just copy and paste all the styles that we have in here this is an advanced tutorial where you learn about sockets creating chat applications and all the other good stuff i don't want to bore you with the css as you can see it's just mainly changing some colors adding some paddings and so on but keep in mind if you want to you can fully customize this chat so right now you can head down in the description you can find this code and simply copy and paste it right in here with that said let's continue with our application our app component is going to be a simple functional component so go ahead and create a const app is equal to a functional component and then inside of there we're going to have just one return statement inside of there we're going to call that chat engine which actually is a component you can see that because it starts with a capital letter inside of here is where the magic happens you're going to pass different props to it and based on the props that you pass it's going to behave differently the first prop that we're going to use is going to be the height for the height in this case we want the chat app to be our entire project so we're going to set that to 100 vh the next thing that we're going to need is going to be a project id make sure to have both the i and the d with capital letters this is going to be a string that you're going to get once you create your chat application below that we're going to have a username in here goes the username of the currently logged in person for now we're going to leave all of these as empty strings then we also have to have a user secret which is basically a password that's also going to be an empty string for now that is going to be it for now now we have to go to chat engine dashboard and create our project before we do that let's just do export default app just so that we don't forget later to create your instance of the chat application you can go to chatengine.io in there you'll be able to sign up and log in so go ahead and create a new account by signing up just to make sure that we're always on the same page i'm going to create a new account as well once you're signed up you'll be greeted with this dashboard you can go ahead and click on this blue button that says new project in here we can enter our project title let's do something like javascript mastery chat of course you can use absolutely anything that you want now that you're in here you'll get your project id so go ahead and copy this project id go back into your code and simply paste it right in here of course we can save this environmental variables as well but for simplicity purposes let's just leave it right here right now as you can see on the right side the first step is to create a new user in this case let's do something like javascript mastery secret is the password and that's going to be one two three one two three you can confirm it and then in here you can enter your first and last name finally you can also enter your avatar for me i just put my logo if you click create person that's going to create a new person for you and it's going to pop up right in here the second step is to create a new chat room and as you can see you just have to click new chat enter the chat title i'm going to type javascript mastery community down below you have to enter the username of your admin i currently only have one user and that user is going to be the admin now that we have the user created we can use his username and password and input it right in here the username for me is javascript mastery and the user secret is one two three one two three of course this is not my real password but we're using it right now once all of this is ready you should be able to open up your terminal clear your console and run mpm start and would you look at that this is her chat application just with a few lines of code our chat was completely generated we have our javascript mastery community and down below you can start sending messages let's go with hello you even have the typing notifications and that is it you can see that looks great the messages look great and everything feels amazing to add a new person to the chat what you have to do is go back to this dashboard add a new user in this case let's use zack zimmer his password is also going to be the same it's going to be zack zimmer and then you can choose the avatar i chose a zack zimmer avatar photo and i'm going to click create person once you do that and go back to your application if you click right here it should auto populate the existing people that you can add to your chat so if i go ahead and click here you should see that zack is added for now there is no ability for us to log in as zach we're always going to be logged in as the admin user that you have inputted right here so one of the many things that we're going to do in this video is we're going to create a login system so so that different people can log in and communicate together the main goal of this video is to show you how you can customize and improve on this chat of course you have a lot of great features right out of the box but this whole thing that you can see in the middle the whole chat feed we're going to redesign that and we're going to make it our own you'll see how you can use built-in chat engine functions like sending messages receiving messages and so on you can use this as a complete out-of-the-box solution or you can use only the server calls and then make this completely your own with that said let me show you how you can do that inside of here you can enter a new prop called render chat feed if you do this now you can render your own component for the entire chat feed and then in here you get all the props that have something to do with the chat chat app props just like that finally what are we going to render well we're going to create our own component which is going to be called chat feed what we can do is also spread all the props that are coming from the chat engine just like this to spread the props you have to wrap them in curly braces so let's do just that of course our chat fee doesn't exist right now so let's import it import chat feed from dot slash components slash chat feed now you can see that we need to create a components folder and then inside of that components folder we are going to create a chat feed dot jsx inside of here we're going to create a functional component called chat feed and this still feels weird to me but you don't actually have to import react anymore if you're using the version 17 or higher you simply start typing the component and that is it okay so we created a chat feed and we can also call the export default chat feed now instead of here we get props so let's start by console logging and seeing what props are we getting from the chat feed while we're cons logging this let's also return something and that something for now is simply going to be a div that says chat feed okay if we save that let's go back to the browser and see what's happening i just had a weird issue where i had to restart my terminal but after i did that if we go back i can now fully see my chat feed as you can see the left side persisted the right side persisted as well and in the middle we have a clear plate that we can work on so you can make this chat fully your own now let's open the console and see what do we get in here as you can see we get an object and this object contains all the information about our chat we can see all the chat rooms that we have we have all the functions that allow you to do something we have the height all the messages project id and so on we'll be using most of these to interact with our chat while we're here i also want to show you chat engine docs inside of here you can see which parts exactly can you modify and how so if you go to customize ui part in here you can see that absolutely any part of your chat application can be modified the chat list the card chat form chat feed header and so on in this case we'll be modifying the chat feed which is the most important part of any chat application along with that you also have access to a lot of functions and api calls to manage your chat application you can delete the chat edit the chat get the data and so on you also have the event hooks so that you can do some actions once something happens for example you can do something on connect like play a sound or or do an animation also on the fail auth on new chat on new message we're going to use the on new message hook that's going to allow us to put a sound notification once somebody sends a message what you also have is a server rest api this allows you to get specific data from your chat application using server rest api calls you can get a person you can edit the person or delete them and you can also create new people that are going to join your chat all using the server rest api but now let's focus on the important part and that is making our chat feed work the way that we want it to work inside of the chat feed we'll use three different components so let's create them right now we're going to create a new file called message form dot jsx this is the form we'll use for sending messages while we're here let's quickly create a component const message form is equal to a functional component and at the end export default message form we can also just do a return and then inside of there we're gonna have a div and that div is simply going to say message form great now we're going to copy all of this and let's create two different components the second one is going to be called my message and this is basically going to be a chat bubble that we send instead of here you can paste what you copied and let's just change the message form to say something like my message and now let's do this for the third component which is going to be called their message this is going to be for the messages that other people send again create it paste this here and just change the titles to say their message great now we have three different components that we'll be using inside of the chat feed so let's import them right away import message form from dot slash message form i'm going to duplicate this line two times the second thing is going to be my message and the third thing is going to be their message now we have everything that we need to start creating our chat feed let's destructure the props that we'll be using in our chat feed and you can do that by saying const put the curly brace assign equal to and then from where the structuring this is saying we wanted to structure something from props the things that will be the structuring is going to be chats active chat username and messages i didn't destructure it immediately in here at the top because we'll also have to use this generic props with that said let's find our current chat we're going to put it in a new variable cons chat is equal to if chats exist then find chats and then the active chat so we're looking for that specific active chat now let's try to console.log these things instead of here i'm going to console.log the chat we can also console log the username and messages just to see if everything comes up nicely i'm going to save my file and go back to the browser as you can see our current chat is null but then when it gets populated we can see all the chat information we can also see that the currently logged in user is javascript mastery and here the messages that we can use to create those chat bubbles now that we have that we're going to create a new functional component which is going to be used for generating messages so let's call this render messages again that's going to be a component and then inside of there we have to fetch all of our messages we can do so by saying const keys is equal to object dot keys and then in there we have to get our messages this just made sure to take the keys from our messages and then put them right in here let's console log this so that you can be sure to know what these keys are of course to see this being rendered we have to call r render messages so let's do that right below and there we go keys are basically just the ids of specific messages now that we know that let's render our messages you can do so by saying return keys dot map inside of there of course we have a callback function we can do it like this and then as parameters we get the key and the index inside of there one specific message is going to be const message and that is equal to messages and then we dynamically take the message with this specific key we want to loop over them now we need to know two things about the messages const last message key we need to know if this is the last message that was sent and we also need to know if this is my message so is my message in the last message key we're going to simply check if the index is equal to 0 then we're going to return null else we're going to return keys and then index minus 1. we're basically saying if there are messages make sure to find the last message and how are we going to know if the message is ours well we can do if username is triple equal to message.sender.username now we have all the information to create different types of messages still inside of the map we're going to create a return statement and then in that return message we're going to create a div that's going to act as our message since we're mapping through things we need to add a key so the key is going to be something like message so msg and then underscore and we can use the specific index the second thing that we're going to do is add some inline styles where the width is going to be equal to 100 inside of that div we're going to have one more div this div is going to have a class name of message dash block and then inside of that div we're going to render the message so i'm going to put this dynamic block of code and then we're going to say if is my message then ternary if it is my message we're going to render that new component that we created my message so just call it as a component my message great if it is not my message then we're going to render a new component which we also created which is called their message this is going to be it for our message block but below that we're going to create a new div this div is going to have a class name of read receipts it's also going to have some inline styles so you can say style it's going to have a margin right and then this is going to be different based on the fact if it is our message or their message so what we can say is say if is my message using itinerary then that's going to be 18 pixels otherwise it's going to be 0 pixels one more thing that we're going to add is going to be margin left same thing here we're going to check if it is my message in that case this is going to be 0 pixels else this is going to be 68 pixels i found that number to fit the best once we have that inside of here we can render the read receipts right now we don't have the chat bubbles of the people who read the thing but i'm going to simply copy this and later on we're going to implement that that's it when it comes to rendering messages now let's create the structure of our chat feed our chat feed is going to be a div and that viv is going to have a class name of you guessed it chat dash feed inside of this div we're going to have one more div the second one is going to have a class name of chat title container inside of that container we're going to have one more div which is going to have a class name of chat dash title and this is going to be the div where we're going to render our title to do that you can say chat question mark dot title this question mark make sure that we have the chat before we try to access the title variable but now that we think about it we need to have a check right before as well so we can say if there is no chat in that case we can return something like a string of loading considering that we have this here we know that we're always going to have the chat down below down below we're going to render the subtitle of our chat so we can create a new div and say that the class name is going to be equal to chat dash subtitle inside of there we'll use some dynamic logic and we're going to say chat.people.map we're going to map over all the people so we get the specific person and then what we want to return is going to be a template string put a space before and then in there we'll say person dot person dot username this is going to be the subtitle of our chat now that we have our chat title container below that this is the place where we're going to call our render messages so right inside of here dynamic logic and we call our render messages function now we can remove it from here after we render the messages we want to leave some space off so we're going to create a self-closing div like this and give it a style of height is equal to 100 pixels now below that div we can create a form while the users will be able to send the messages that is going to be a div that viv is going to have a class name of message form container finally inside of there we'll render our last and third component and that is message form remember that i told you that we'll need the whole props before so inside of here we're just going to spread all of the props and also we're going to pass in the chat id which is going to be equal to to the active chat this is going to be the structure of our chat feed now that we have this of course we have to create components for our message form but let's start with the my message and their message to have access to the actual message inside of the my message component in there will pass the message as a prop so you can say message is equal to message and remember we are extracting the message from here into their message we're also going to pass in the prop of message but we're also going to pass the last message right here last message and that is going to be equal to messages and then we dynamically take in the last message key great now we're passing two prompts into their message and one prop into my message let's start creating the layout of the message components we can start with the my message as we discussed it's going to accept only one prop and that is going to be the message itself just above this return we're going to add an if check and this this if is going to find out if our message is the actual text message or an image and we can check that by saying if message question mark dot attachments question mark dot length and then if that is greater than zero that means that our message is an image in that case we'll have to return something different the thing that we're going to return is of course going to be an image which is a self-closing tag that image is going to have just a few props and some of them are going to be the source which is the most important one we can get the source by saying message dot attachments and then we take the first attachment and then we go for the file this is the src of the image then we have the alt which is simply going to be something like message attachment then we can have a class name the class name is going to be message image and finally let's do some inline styles where we're going to say that the float is to the right that is it this is going to make sure to render the image if our message is the image what if it's not well in that case we're simply going to render the text and we can put that here class name is going to be equal to message and we're also going to do some inline styles these styles are going to be as follows you can open the style brackets and then say float right we have to do this because this is our own message and our messages appear on the right side then we're going to have a margin right of 18 pixels then we can put a color of white finally we can use a specific background color for the color of the bubble in this case let's use a hexadecimal color of hash 3b2a50 this is going to be a purplish color once we have that it is easy as replacing my message with simplymessage.text now that we created the code for our message let's go to their message the code is going to be similar but it's going to have just a few differences in their message we're going to receive the last message as well as the message itself if you're working with a message that somebody else sent we want to know if it is the first message by that user so we're going to create a variable called is first message by user and how can we know that well we're going to say if it is not the last message because of course the last message going to be the first or if the last message dot sender dot username is not equal to message.sender.username doing this will give us the boolean value which is going to tell us if this is the first message by the user then inside of the return we can create a new class name and that is going to be message row inside of this message row we can do some logic and we can say if is first message by user if it is then you can use the end and operator in that case we're going to render a self closing div so i'm going to remove this and just render a self-closing div that div is going to have a class name of message avatar it's also going to have some inline styles like the background image we're going to get the background image if we create a string a template string in there we can type url and then finally wrap that in parentheses and use some dynamic logic and check if the message question mark dot sender question mark that avatar exists if so we're going to put our background image to be the avatar this is only if we have the first message by the user and what's the case for all the other messages well for all other messages we're going to have something similar to what we have in the my message first of all we have to check if it is an attachment so i'm going to copy this open the block of code and simply paste it right in here this here can be a ternary expression that means that we don't need to have an if so i'm going to remove that and simply put the question mark instead of the return because we're already returning it so if it is an attachment we are going to return an image let's clean this up of course we need an else if it's not an image what are we going to do well we're simply going to render a message we can copy that from there and simply paste it right in here let's fix the indentation like this okay and finally let's see if we have to change any styles for example inside of here for the styles we're going to change the float completely remove that and we're going to add the margin left in here we'll check if it is the first message by the user if that's the case the margin left is going to be 4 pixels else it is going to be equal to 48 pixels again these are just values that i found to be working the best and then for the classes or the styles of the message the float this time is going to be set to left because now the messages are sent by somebody else usually in chat applications the message sent by yourself is on the right side and the other messages are on the left side in this case we don't need the margin right so i'm going to remove that nor the color white we are going to have a background color this one is going to be c a b c d c and the last thing that we're going to have is just going to be a copy of what we have right here margin left and and that's going to depend on if that is the first message by that specific user with this done that is going to be it for our their message now if we go back to the chat feed you can see that we have the code for my message and their message that means that we should be able to see something in our browser and if we go back as you can see that works both the test and hello were sent from javascript mastery if zack sent some messages they would appear on the left side they would be of a different color and they would have a different margin now that the look of our messages is done let's create our message form to do that you can head to our message form component inside of here we'll have all the logic required to write and send messages to start let's create the jsx layout inside of here we'll create the form that form is going to have a class name of message dash form it's also going to have the on submit handler on the submit we can call the handle submit handler we can create that for now we're going to leave it just as the empty arrow function so handle submit great later on we're going to add the logic for this as well but now let's continue adding the things to our form of course every form needs to have an input so inside of here we can create a self-closing input tag it is going to have a class name of message dash input it is also going to have a place holder that can be something like send a message of course we need to have the value of our input and the value can be equal to value then we also need an on change and of course on change we'll hold the handle change function for now both the value and handle change are undefined so let's fix that i'm going to copy this handle submit function and we're going to create a new empty one which is going to be the handle change the value on the other hand is going to be coming from the state so at the start we can import use state as the named import from react and then just at the top we can say use state what is our state the state is the value and the initial value of our message is simply an empty string so we have the value we have the set value and at the start it is equal to an empty string that's great we're also going to add the on submit on our input right in here which is going to be the same handle submit method that we have right there if we want to simply send the message by pressing the enter key let's save it and see how does that look like if we go back in here you can already see that our input looks great we can type into it but right now we are not doing anything with the messages and also we don't have the icons for sending the images so first let's implement the logic for the handle change and the handle submit and then we're going to add the input for the image as well as the send button so how can we handle the change of the value well inside of the handle change of course we have the event whenever you're adding the handle change method to the on change the first thing that you get is going to be the actual click event so we can say set value and that is going to be equal to event dot target dot value this is where the value of the input is stored in after that we're going to use one of the features of the react chat engine so at the top we can also import some more things those things are going to be send message that's a function that we can call once we want to send the message to the chat engine and we're going to also call the is typing these are going to be imported from react dash chat dash engine now that we have that right inside of our handle change we're going to call r is typing and we're going to pass all the props as well as the chat id looking at that we obviously need our props so right inside of here i'm going to pass our props and we're also going to destructure some of the things from the props those things are going to be the chat id as well as the credits great now we're handling the change let's also handle the submit on every handle submit in react you have to add the event dot prevent default this is going to make sure to not do a browser refresh once you submit the form usually that's the default browser behavior but in react applications you don't want that to happen then we're going to trim our text of the message so we're going to say cons text is equal to value dot trim if i hover over it as you can see trim simply removes the leading and trailing white space finally we're gonna check if text.length is greater than zero and if that is the case we can simply send the message send message is the function that is coming from the react chat engine and you have to pass three props the first one are threads the second one is the chat id and then finally we're going to pass an object that includes our message or we can say the text of our message great that by itself should be enough for sending the actual images let's test it out i'm going to say something like hi i pressed enter and our messages appear as you can see we are logged in as javascript mastery so we're seeing our messages on the right side in this purple color that is great as you can see our message persisted here we want to remove that so going back to the code inside of here after we send our message we simply want to reset the value back to an empty string now that we are done with that let's add our image field first we're going to add a label and that label is going to have a prop of html4 and we're simply going to say upload button not button it's going to be a button inside of there we're going to have a span that span is going to have a class name of image button and then inside of there we're going to use some icons to make it look pretty we're going to first import those icons the icons we're going to import are going to be the send outlined as well as the picture outlined these icons are going to be important from add and design icons that is it now that we have the icons imported scrolling down in this pan right here we're simply going to call the picture outlined as a self-closing tag and we're going to pass it a class name that is going to be equal to picture dash icon let's save it and see how does it look like as you can see that is great now we also have to add a picture input field that is going to be an input and the input is a self-closing tag this time the type of our input is going to be a file we also need to pass the prop of multiple which is going to be set to false the id is going to be equal to upload button the style is going to be equal to display of none we don't need it because we already have this label and then finally we're going to call the onchange on change we're going to call our function which is going to be handle upload as you can see we haven't yet created the handle upload so let's do so now const handle upload that is going to be equal to an error function and what do we have to do in there well again we get that event the event in this case is going to contain the image and we do the same thing we simply do send message if remember correctly our message accepts a few props it's going to be credits chat id and then the third thing is the actual message so let's send exactly that creds chat id and finally our message this time we're gonna pass in the files files is going to be equal to event dot target dot value and that's where our message is we are also going to pass in a text attribute text is going to be set to an empty string because we don't have text right there that is simply an image great now we can continue with the layout of our form the last thing that we need is going to be a button most people in chat applications send messages with the enter key and that's what we have implemented but let's also add a button the type of the button is going to be equal to submit and the class name is going to be equal to send dash button inside of that button we're going to have the send outlined icon which is a self-closing tag that has the class name of send dash icon and that is it for our form let's save it and let's see how does it look like take a look at that in here we have our form for entering text i'm going to upload just my logo and let's take a look at that and there is an error i want to let you know that this is a completely normal thing when you're coding you cannot know everything you cannot get everything at start but let's see what's the problem fail to execute append on form data parameter is not a blob blob is usually an image which means that we're not getting the right thing from the event here and i see that i typed in event.target.value but for images or files in here you have to save files event.target.files with that fixed let's go back and see if i can upload the image let's try one more time i'll try to upload the same image and there we go that works perfectly now let's go back to the chat feed and let's focus on these read receipts to implement the receipts just above the render messages function we're going to create a new function which is going to say render read receipts that function is going to take two parameters the message and the is my message property inside of here we're going to map over the people who read the message chat.people.map in there we have of course a callback function first thing that we get is the person and the second thing is the index now that we have that we only want to make sure to render the people who read it so we can see person dot last red just like this and if that is equal to message that means that this person has read this message so we can use the end end operator and open parentheses that means that we're going to render the code in here only if the person has read the message the thing that we're going to render inside of there is going to be a self-closing div inside of there we're going to have a key the key is going to be red and then the index inside of there we're also going to have a class name of read receipt and we're going to do some inline styles so style we're going to add the float if it is my message then it's going to be on the right side else it is going to be on the left side in here make sure to use the ternary operator like this and left and right need to be strings we are also going to add the background image and that background image is going to be the same that we had in their message i think right inside of here this is it background image is going to be the url of the sender so i'm going to copy this entire background url go back into the chat feed and now i'm simply going to paste it here in this case it's not going to be message.sender it is going to be person dot person dot avatar and with that we finally have to return the whole map of all of these people who read the message and that's it we are ready to call our render read receipts so right inside of here i'm going to call our render read receipts of course it has to be inside of a logical block and we have to pass in the message and is my message that's mostly going to be it let's see how does it look like if we go back in here you can see that we have this nice little receipt right there i'm not sure if you can see it if i zoom it real closely it is right here where my mouse is pointing you can see that there's the little icon of javascript mastery now what we're going to do is we're going to change the user to zac zimmer so going back in here going back to our app.js instead of here i'm going to say zack zimmer and one two three one two three this is going to make sure to change the user to zack finally if we go back take a look now all the messages are on the left side with a lighter color of purple and we can actually send messages as zack you can see zach is online javascript mastery is not and there it is zach read the message if we now say something like test there it is zac credit javascript mastery is offline and they still haven't read the message now let's go back to javascript masteries account save it go back and reload and take a look at that zack zimmer sent a message there's his profile photo there's also the people who read that message that is amazing everything seems to be working perfectly now that our chat is fully functional you might be asking yourself how can we switch the users or how can we allow people to join as specific users without having to manually enter our details here we are going to do is create that login form that you saw at the start of this video that way with the form we'll be able to change these values dynamically from the user standpoint to start creating the form i'm going to create a new component called login form dot jsx inside of here we're going to create a new component and we can name it login form it's also going to be a functional component inside of this model we'll have two fields that we have to manage to use states so right here i'm going to create a use state field which is going to be named username and the default value is going to be an empty string this is going to be the value for the username of course the second use date field is going to be a password so right there you can say password set password and the initial value is also going to be an empty string of course we have to import our use state so we're going to import use state from and that's going to be of course react in this file we're also going to make some api calls so we're going to import axios from axios now that we have most of the stuff that we are going to need let's create the return jsx of our login form inside of here we'll have a div and this div is going to have a class name of wrapper inside of that div we're going to have one more div which is going to have a class name of form inside of that form we'll have an h1 tag which is going to have a class name of title the title is simply going to say chat application right below our title we're going to have a form and that form is going to have an on submit property on submit of course we're going to do the handle submit which is at the start going to be just a basic arrow function so we're going to create that error function called handle submit continuing down we're going to have two different input fields these inputs are going to be self-closing tags inside of there the first one is going to be of a type text the value is going to be user name on change what are we going to do on change well in here we get a callback function with the event and then we're going to call the set username and e dot target dot as we learned this event is the actual keypress that you put and the event.target.value contains the value of the input so we're going to store that into our username state after that we're going to add just a few more things right there one of these is going to be a class name of input and we're also going to add a placeholder of username last thing is the property called required that's going to make sure that we need to type in that user now i'm simply going to duplicate this line and we're going to change everything for the password type for the password is going to be password value is going to be password in here on change we're going to set not the username but this time we're going to set the password class name is going to remain the same placeholder is going to be the password and we can keep the required field of course with inputs we also need to have a button so i'm going to create a div that div is going to have a property align of center and then inside of there is where our button is going to be the button is going to be of a type submit which means that it's automatically going to submit the form and it's going to have a class name of button inside of there our button is going to be specifically styled so we're going to have a span and we can simply say something like start chatting great that's going to be it for now now we have to see what are we going to do on the handle submit our handle submit accepts again the event you can name it e or event most people use e for short the first thing that you usually do on every handle submit is add the e dot prevent default again the default behavior of the browser is to refresh so we have to add this because this way it's not going to refresh then what we want to do is we want to try to get the messages once we actually have the user let me explain what i mean so we enter some credentials like username and password and then we want to ask the chat engine to give us back the messages so give messages if that works out so if that works out that means that we're successfully logged in if that doesn't work out we are going to simply give an error and say try with new credentials or new username so this is the process we want to do we want to check if the chat engine finds that this username and password exist and if it gives us back the messages to do that we have to authenticate we can use the const auth object to specify all the data first thing that we need is going to be the project id so inside of here you can say project id just like so and that has to be equal to a specific value because our user needs to belong to a specific project if remember we already use this so if you go back to here you can see that we have our project id right in here the second thing that we need to have is going to be the user name written exactly like this uppercase u and then we have uppercase n in the name in there we have to specify the username and the username is going to be the one that we are getting from the state finally the third thing is going to be the user again uppercase u and then secret uppercase s that secret is basically the password that we're controlling in the state and this is our auth object now we're going to open a try and catch block and we're going to use some asynchronous code once you're using asynchronous code the function above that needs to be async inside of here we'll try to make a request using axios axios dot get we will be making the request to the inner workings of the chat engines api that is going to be https colin forward slash forward slash api dot chat engine dot io for slash chats finally we have to send in some headers how do we send the headers well you put a comma an object and then you say headers is equal to and the headers we'll be sending is the odd object that's it now what you have to do since this is asynchronous request you have to add the await in front of it just like this and how the try and catch works if this is successful then it's going to move to the line below in this case that's going to be this and then the error is going to be this the actual request is the line we've just written so what do we do if the request is successful if we actually are logged in and if the credentials are correct in that case we want to store the username and the password to the local storage that way once you log in once you won't have to log in every time that you come to the page you're already going to be logged in to do that you can say local storage dot set item and we can set the username to be username we can also do the same thing for the password so we're setting the field of username and the password to the local storage finally once we do that we want to reload the page and you can do that by saying window dot location dot reload you might be wondering why are we reloading the page here well we're gonna have this stored in the local storage and then the second time that the page reloads we can render something differently in this case we can add a new if statement inside of the app we don't always want to render the chat engine if we're not logged in we want to show the login form so let's do exactly that if no local storage dot get item and then username this is basically saying if there is no username basically if you're not logged in in that case we're going to return the login form so in here i'm going to say login form and of course i have to import it from the top if i do just that login form and that's it in here we are saying if there is currently no username with local storage render the login form going back and refreshing we'll see that we currently have some problems um we don't have the login form being exported let's see why is that login form is right in here oh but we forgot to export it that's why i always usually export it initially just so i don't forget now if you reload the page you should see that we have this amazing looking form and now we can log in so i'm going to type javascript mastery one two three one two three and it just reloaded the page and logged me in as javascript mastery now you're going to permanently stay logged in as that user and every time that you come back you're simply going to be logged in and you'll be able to start chatting right away for normal users visiting your page that's phenomenal but we want to do some more testing and we want to get back to the login form how can we do that well you can open the console and then you can click those two arrows and go to the application tab inside of here you can open the local storage and you should see local storage belonging to the localhost 3000. in here you can see those values the only thing that you have to do is right click and click clear that way once you reload the page one more time you're going to be right in here so now let's see what else do we need to do what if you enter the wrong credentials something that doesn't exist i click that and nothing happens that is not good because maybe somebody just mistyped something so how can we solve that to solve that we can add one final use state field and that field is going to be called error right there error set error and then finally it is initially going to be an empty string so when do we set this well right in here what we can do is we can simply say something like set error and we can put a string of something like oops incorrect credentials that is it now finally if we remove this indentation our handle submit should be done and we have to display that error so just still inside of the form but below this button div we can put an h2 tag which is going to have a class name of error and then we can in there simply render out the error now if we go back to the site if we enter the wrong credentials you can see oops incorrect credentials and this works perfectly finally let's try to log back in as zac zimmer one two three one two three and take a look there seems to be a bug right you can see that currently javascript mastery is logged in and we are sending the messages as javascript mastery while zac is on the left side that's not good well no there's no bugs here the only thing that we forgot to do is go back to the app.js and then in here take a look as you can see we have our constant data right here we have to update that no more this is going to be static this time we're going to render the username from local storage dot get item and then in here we get the username same thing goes for the password so in here local storage dot get item and then in here we type in the password now if you save that you're going to notice that that works we're logged in as zach and everything works as intended now let me show you the process of what you would need to do if you wanted to add a third person or a fourth or 100th percent to this conversation if you simply want to have a group chat with your friends to do that you can go back to the chat dashboard in the chat engine and in here you can add a new user let's say that you have a friend something like wendy walker we're gonna keep the same password that's going to be wendy walker as the administrator you add there right here this is going to be her image we created and our person is being created as we speak that's it finally you can see that you have your chat right there and you can see here group members the only thing you have to do is go right here and add a new member wendy walker you can also do this from inside of the chat application if you're logged in as the administrator right now we're not but if you were in here you would be able to just simply type that and she would be added but for now let's try to do that through our built-in dashboard if i click save that is great as you can see instantly when the was added now let's say that wendy wants to join your chat you would simply send her a link she would get to the chat application type in her username wendy walker and one two three one two three once we do that she will be able to log in and communicate with zack and javascript mastery not only that you can see that javascript mastery is online as well now so let's say hi hi i'm new here if i do that you can see that the message was sent and if you go to the javascript mastery side you can see that wendy sent a new message everything works flawlessly also did i forget to mention that this is fully mobile responsive if i open this and i open mobile responsiveness view you can see right there that this works perfectly all the messages appear inside of the viewframe for mobile devices with that said if you'd like to see some more advanced things with this chat application like infinite scroll the ability to log out or more customizations and upgrades let me know in the comments and we're going to do a part 2 but please let me know what would you like to see we can maybe do some more things like similar chat applications maybe removing the messages after some period of time like snapchat does or some other specific features that other platforms use just let me know in the comments now that this is done of course i don't want you to have this on localhost 3000 let's deploy it for the deployment as always we're going to use netlify netlife allows you to host and deploy your front-end sites in a matter of seconds let me show you what i mean i'm going to click login right here and then we're going to go to sites this might be empty for you i have quite a few sites but if you scroll down in here you can drag and drop your react application we cannot simply drag and drop all of these folders right there but if you open your terminal stop the application from running and then run mpm run build like this this is going to create a specific production ready deployment for your react application this is the folder that we're going to drag and drop we're going to wait until optimize production build is done and then we're going to drag and drop it that was it you can right click build and then click reveal in file explorer once that is done you'll have to simply drag and drop the build folder right in here and when i said seconds i really meant it our application is already deployed before taking a look at it let's go to site settings change site name we can do something like chat app and then i'm gonna do js mastery you can name this anything you want and i'm gonna save it now if you click this link and there we go our website is deployed you can put it in your portfolio show it to your potential employers you can also send it to your friends in the dashboard add them in your chat applications and then you guys can chat without facebook tracking you that's great so let's try to log in as let's do wendy when the walker and let's see if the deployed version works and there we go it works perfectly i hope this video was helpful to you as i mentioned if you'd like me to add some extra features to this app make sure to like comment and subscribe if this video reaches 5 to 10 000 likes we are recording part 2. that's it for this video comment to this one to let me know what would you like to see next and if you haven't already make sure to subscribe and more importantly turn on all notifications by clicking the bell icon stay safe and see you in the next one [Music] you

Channel: JavaScript Mastery

Views: 408,631

Rating: 4.9633889 out of 5

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, react socket chat, chat application in react, 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

Id: jcOKU9f86XE

Length: 70min 7sec (4207 seconds)

Published: Fri Jan 29 2021