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

Key Takeaways

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. [Music] 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 greatl 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 chat room 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. Now, let's log in 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 a 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 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-react 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 from react-dom. Then finally you can call react. 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 slashapp. 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 mpm install and then we can start naming dependencies. The first one is going to be add 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 slashapp.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 con 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 chat engine.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 are 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 1 2 3 1 2 3. 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 the console, and run mpm start. And would you look at that? This is our 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 Zach Zimmer. His password is also going to be the same. It's going to be Zach Zimmer. And then you can choose the avatar. I chose a Zach 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 autopop populate the existing people that you can add to your chat. So, if I go ahead and click here, you should see that Zach 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 inputed 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 feed doesn't exist right now. So, let's import it. Import chat feed from slashcomponents 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.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, inside 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 console 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 off, 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 the 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.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 going to 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. Inside 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 sent. 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 slashssage 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 braces sign equal to and then from where the structuring this is saying we want to dstructure something from props. The things that we'll be destructuring 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. const 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 inside 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 are 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.keys. And then in there, we have to get our messages. This just makes 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 our 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 do 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 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 zero. Then we're going to return null. Else we're going to return keys and then index minus one. 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 dashblock. 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 and then turnary 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. uh 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 a turnary then that's going to be 18 pixels otherwise it's going to be zero 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 zero 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 div 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- 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 title. This question mark makes 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 do 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 do 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 where users will be able to send the messages. that is going to be a div. That div 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, we'll pass the message as a prop. So you can say message is equal to message and remember we're 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 props 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 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 hexadimal color of # 3B 2 A50. This is going to be a purplish color. Once we have that, it is easy as replacing my message with simply message.ext. 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 we'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 sender do username is not equal to message.ername. 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 end 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 parenthesis and use some dynamic logic and check if the message question mark sender question mark.vatar 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 turnary 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 four 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 CA B CDC. 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 Zach 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 onsubmit 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 dashinput. It is also going to have a placeholder 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 onchange. And of course onchange will 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 onsubmit 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 a 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 onchange 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.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- chat-ine. Now that we have that, right inside of our handle change, we're going to call our 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 creds. 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.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 con text is equal to value.trim. If I hover over it, as you can see, trim simply removes the leading and trailing white space. Finally, we're going to 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 creds. 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 textual images. Let's test it out. I'm going to say something like, "Hi." I pressed enter and our message appear. As you can see, we're 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're 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 HTML 4. 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 at design icons. That is it. Now that we have the icons imported, scrolling down in this span 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 an event. The event in this case is going to contain the image and we do the same thing. We simply do send message. If you remember correctly, our message accepts a few props. It's going to be creds 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 going to pass in the files. files is going to be equal to event.target 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 dashton. 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 the 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 say files. Event.target.files. 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 do 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 say person.last read just like this and if that is equal to message id that means that this person has read this message. So we can use the end end operator and open parenthesis. That means that we're going to render the code in here only if the person has read the message. The thing that we are 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 turnary 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. It is going to be person.person.avvatar. 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 Zach Zimmer. So, going back in here, going back to our app.js. Instead of here, I'm going to say Zach Zimmer and 1 2 3 1 2 3. This is going to make sure to change the user to Zach. 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 Zach. 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. Zach read it. JavaScript Mastery is offline. And they still haven't read the message. Now, let's go back to JavaScript Mastery's account. Save it. Go back and reload. And take a look at that. Zach Zemer 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're 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.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, two 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 state 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're 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 onsubmit 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 arrow 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 username. on change. What are we going to do on change? Well, in here we get the callback function with the event and then we're going to call the set username and e.target value. As we learned this event is the actual key press 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.prevent default. Again the default behavior of the browser is 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 O 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 used 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. And 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 O 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.get. We will be making the request to the inner workings of the chat engines API. That is going to be https colon slapi. Chaten engine.io io/hats. 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 o 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.location.reload. You might be wondering, why are we reloading the page here? Well, we're going to 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 you're not logged in, we want to show the login form. So, let's do exactly that. If no local storage 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. So I do just that login form. And that's it. In here we are saying if there is currently no username in 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 1 2 3 1 2 3. 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 local host 3000. In here, you can see those values. The only thing that you have to do is rightclick 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 you 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 Zach 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 Zach is on the left side. That's not good. Well, no, there is 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.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 aund person 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 going to keep the same password. That's going to be Wendy Walker. As as the administrator, you add their 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 Wendy 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 Zach and JavaScript Mastery. Not only that, you can see that JavaScript Master 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 two. 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 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 Netlifi. Netlifi 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 productionready 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 rightclick 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 going to do JS mastery. You can name this anything you want. And I'm going to 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 Wendy 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 two. That's it for this video. Comment on 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]