Hey everybody, so in this video we're going to build a full stack chat application using Node.js on the back end and React.js on the front end. And the good news is that this is realistically the best looking chat app on YouTube, maybe the internet, for this type of tech stack. So let me demo the app to you right now.
So you get brought to this pretty authentication page to start where you can specify a username and sign up or log in as that user. So I'll just write my own name, Adam. Once I click enter, I get brought into the chat app, and I can start talking with any other user within this project. So if I go to create a new chat, and I look for some other users, I see Bill, I see my buddy Cameron, I can set up a chat with both of them right now. And I can start sending messages.
Now this is real time chat, meaning that if I log in as another user on another tab, like Bill here, You can see that chat history gets retrieved and then when I write a message right back you can see that's immediate for Adam, the first person I logged in as. Now there's a whole lot more than just group chat support and one-on-one chat support. You can see if I break up this tab into two different ones, this UI supports mobile apps as well as desktop apps. And not only is it real-time chat as you can see here, but I can also send images and files.
Like this. You can also see the read receipts below. And this is a very feature-rich and scalable application. I've seen use cases where this type of app supports 30,000 to 100,000 users.
So we'll be building this app from scratch, meaning from absolutely no code to the completely finished product. This will take about 30 minutes to do. And again, by the end, you'll have this exact application here.
Furthermore... The code is all online and in the description, so if you want to just pull it down and play around with it, you can do that in a few minutes. But without further ado, let's get started and actually start building this application which I'm demoing to you here. In the first step, let's stand up a new project, put it on VS Code, and in that project stand up a Node.js server, which will be our back end. Let's do that right now.
Open up a terminal. and cd into wherever you want to create this project. In this case, I'll use desktop. Then what I'll do is I'll create a directory and name my project. I'll call mine node.js react.js chat and cd into it.
Now to open up this folder on VS Code, you can do code space period or drag and drop the folder onto your VS Code window. or just go to File, Open Folder. Great. So now we have that Node.js React.js chat project in VS Code. Let's create a folder for our backend.
And this is where our Node.js server will run. So open up a terminal in VS Code and cd into your backend. To initialize a Node.js project, run npm init.
It'll bring you through a few steps. I'm going to click enter for all of them. and we're done.
Now within backend we have a package.json file which will describe our Node.js server with metadata. Now what we need to do is install some npm dependencies to make this Node.js server work. So npm install express which is an HTTP framework for running node servers, cores so that we can call this server from anywhere else on the internet, and axios.
so that we can make API calls to chatengine.io. More on that later. Click enter.
Great. The last thing that we'll need to install is something called nodemon, which runs our Node.js server in development mode. So run npm install dash dash save dash dev and then nodemon. Perfect.
Now to make nodemon run our node server, go to scripts and package.json and add an attribute start and make the script in two quotes nodemon index.js and we'll create that index.js file now. So right click backend, new file, index.js. And we're going to copy and paste some boilerplate node code right now.
So if you go to this blog, post right here. It's the first link in the description of this video and you scroll down you'll see some code for index.js in the first section. Let's copy and paste it and I'll explain it right now.
So to start we import express which runs our HTTP server and we bring in cores so that we can call this server from any other origin and we do that with these lines of code here. We run the port, we run the app on port 3001, and we create a post endpoint for authenticate. And what this does is it takes a username from the request body and returns a fake user with a username and a password. Now, obviously, this isn't real authentication code, so we'll add that in the next section. But to make sure that this app actually runs, in backend, do npm run start, and it looks pretty good.
and we'll add a request.rest file to test this out. Perfect. Now to make this work, I recommend installing the REST client extension on VS Code, which you can find right here. And assuming you have it, you'll actually be able to copy and paste some code that looks like this. So post HTTP localhost 3001 slash authenticate.
and we'll set the content type to JSON. So content-type application slash JSON. And we'll pass in that username in the request body like before.
And when you have this extension you can see the send request button here. When you click it you can see Adam and that fake password get generated. So we're making great progress, however we need to actually add real authentication code. to our node server and we need to give users access to chat APIs and chat backend functionality.
Let's do that right now using chatengine.io. For those who don't know, chatengine.io provides full stack chat tools which makes adding chat into node and react apps very easy. So to leverage this tool we're going to create a chat engine project and store our users in this project. All users in our ChatEngine project can chat with one another through their APIs and platform.
So let's create this project now. If you log in or sign up at chatengine.io, link in the description, you'll be able to create a new project here. Once that's done, ChatEngine gives you essentially your own chat server, which your users can access and use to chat with one another. So you can see in my project here, that I have all of those users that were in the demo at the beginning of my video.
And you can see the chats that I had set up between them. You can also configure settings for webhooks, email notifications, changing the UI, the list goes on and on and on. So once you have this project set up, copy the project ID as well as the private key, because the API keys for your requests are the project ID. and the private key allows you to create and destroy users. So copy and paste this code or this value because we'll use it in our code now.
So what we're going to do is whenever a user hits this authenticate endpoint we're going to get or create a user object for this username in our chat engine database. So if you want to see all the rest API calls that chat engine has, Go to rest.chatengine.io and it's all documented there. So you can see they have API calls for creating users, getting existing users, and we're going to use this get or create user. Again, this fetches the user with the following username or creates one from scratch if they don't exist.
So let's use this now. What we're going to do is put this API call in a try catch block. And then what we're going to do is make a const response is equal to a wait and then axios.put as you can see we need to make a put call and we're going to call that that route right there. Then what we're going to do is we're going to pass in all of the required data that this endpoint needs.
So you can see we need a username and a secret and we're also going to put in the user's first name. So username, username, secret. For now we'll just put in username and then for their first name we'll also put in their username.
We also need to set some headers to authenticate this API call, just the private key. And that's why we copy and pasted the private key from earlier, so that we can actually use that here and make it a string. Now, assuming that this API call goes through, what we want to do is return response.status, and we'll do r.status.
and then we'll do dot json and we'll return r dot data. So what we'll do is the response from this api call will dictate the status of our api call and the data within it. Now if there's an issue what we want to do is return an error dot response dot status and the error dot response dot data if there's an issue.
And we're done. So again, what we're doing is we're taking the username from this request body and we're getting a user in chat engine if they already exist, if not creating one from scratch. The user's name has been specified, we're using that value for their secret and their first name as well. And we're using our project private key which allows us to create and destroy users.
And then depending on that we return their data or we return an error if the Data specified is incorrect. So let's see how this works. Let's create a brand new user.
I'll call him Zach and we'll use this request.rest file to try it out. You can see the user got created with their own ID. If we go down we can see that the first name is Zach. We can see that the username, if I can find it, right here is Zach and that hashed password of Zach is now that SHA-256 fingerprint. Perfect.
And if we go into our chat engine project, as you can guess, Zach now exists. So this is good, right? Now we can sign up new users or fetch their existing data if we call it twice. As you can see here, it's the same ID if you call it a second time or a third time.
And we're going to be able to use this to sign users up for our chat engine project and let them chat with one another through their platform. So now that our Node server is up and running, let's add the front end and really get this chat UI up and alive. For this next section, let's set the Node.js code aside because it's basically done. And we're going to open up a new terminal so that we can set up our front end with React.
So cd out of backend, so cd space dot dot. And that will put you at the Node React root level. and then we'll run this command npm create v at latest to set up a react project. Now I'm going to call this project front end.
I'm going to choose react javascript and we're done and cd into this front end folder. One thing we'll need to do is npm install which will install all of the dependencies because it does not do that by default and that will bring in things like react and other stuff. Now what we want to do is go into the source folder and start editing this code a bit. In main.js, we actually want to disable react-strict mode because it doesn't play well with WebSockets, which are needed for chat apps.
And we'll also remove index.css. And let's remove that file actually from the project. Great. Now let's hop into app.jsx.
Now this main app component should render the authentication page if the user hasn't logged in or signed up, and render the chats page if the user actually has. So what we'll do is we'll actually copy and paste some code from that blog article under step 3. If you scroll down, you can see frontend-source-app.jsx. I would copy and paste this code. It does exactly what I explained earlier, right? We import an auth page, we import a chats page.
If the user does not exist, render the auth page. If the user does exist, render the chats page. pass that data in. Of course we need to create the auth page and the chats page now.
So let's do that under source new file auth page dot jsx and chats page dot jsx. Now the chats page can essentially be empty for now. Just do const chats page is equal to empty brackets.
return div chats like this, export default chats page, and that's all we'll need to do. The auth page is actually going to have quite some code in it, so let's copy and paste it and I'll explain it after. It's not too much code, it's actually really easy to understand, but really all we're doing is setting up an HTML form that takes a user's username as input and a button to submit.
Once this form submits, we trigger the HTML form. an on submit function. And for now, all it does is sets a user in the user state with that on off callback, which lives in our main app component above it here.
Now, to make this app run, the last thing I recommend doing is actually copying and pasting the CSS code that makes this app so pretty right here. So if you go to this link, Command A, Command C to copy and paste it all, and just replace the app.css code with that content. And we should be able to run this app now. Go back into the terminal and do npm run dev.
And now we have the Node.js server running as well as the front-end React app running. And if you go to this host here, let me copy and paste it, you can see that pretty chat app that I showed at the beginning of the video. And right now if you do type in Adam, it renders that chats page which is the empty component I showed you earlier. So we have an off page up and running. Now, we don't actually make an API call to our node server yet to really authenticate these users.
And of course when you go to the chats page we don't have a chat UI yet. That's really the last section of this video and once we do all these things we're fully done. So let's do it now. Let's add the API call to our authentication page so that when a user completes that form, they actually get logged into our Node.js server.
What we're going to have to do is stop running the front-end project in the npm install axios. And what we'll need to do is import this dependency at the top of the off-page file. Once we actually submit this form, what we need to do is make the Axios call a post request to our Node.js server.
So http://localhost3001.authenticate. And of course we need to put in the correct data for our request, which in this case is username colon value. Once that's done, we can trigger.then because it's a promise and we can call that onAuth callback with the response.data.
as our object and we want to override the secret with the value that we passed in. So secret and once we do that we're done. Now if any error occurs let's just take the error and console log it for now. And we're done.
So let's rerun this front-end project and if we go back and click refresh we'll think of another user. So I'll call him Eric and if we call Eric and we go to the chats page we should be able to refresh our users list and see that new Eric user in there and again if we refresh the project and type in Eric a second time it should just fetch that user and not create a second second, Eric, as you can see here. So we're authenticating into this React app now and authenticating into our Node.js server and chat engine.
Last but not least, let's install one of chat engine's pre-built UIs, which will let us... Give that user access to chat with all of the other users So ChatEngine gives us a ton of pre-built components. So you can see this React ChatEngine advanced tool here and when you log in to your project as a user with their secret, out unfolds all their chat histories and they can talk with anybody else. Now if you want the pretty UI which I showed at the beginning of this video, you can actually use the React ChatEngine pretty component and follow the steps right here. Now, for educational purposes, I'm going to use React Chat Engine Advanced.
And then in another video in the description, I'll show you how to customize the UI and make it look like this one here. So let's go ahead with React Chat Engine Advanced. Copy the install command or just run npm i react-chat-engine-advanced and install this dependency now. Once that completes, go into your chats page and start adding the following code. First of all, we'll need to import a few things from React Chat Engine Advanced.
So do import from React Chat Engine Advanced, and we'll use their autocomplete function here. First of all, we're gonna wanna import a multi-chat socket, which is a web socket that lets the user connect to all of their chats that they have. The multi-chat window is gonna be that UI that unfolds and lets the user type messages. see new messages, et cetera.
And the last thing is we'll need to use multi-chat logic, which is all the state management and API calls that makes the chat app work. Perfect. With that in place, let's also import the props, which have the user's username and secret.
First, we'll create a variable called chat props and set it equal to the use multi chat logic function where we set the project ID, the user's username, in this case props.user.username, and their secret, which is props.user.secret. Now let's actually copy and paste our project ID from earlier. Now that we have the chat props up and running, you can see that it has all of the logic for any events that happen in our UI. So when the socket connects, if we fail our authentication, when we get our chats, and 50 other things.
Now let's actually render our chat UI. So I'll create a div and set the style equal to height 100 vh. and within that i'm going to declare first of all the chat socket and pass in chat props and this will allow us to connect to the chat engine web sockets and then we'll use multi-chat window and also pass in the chat props and we'll set the style of height equal to 100 and we're done so let's clean this code up a little bit and let's run it now npm run dev and we should be good to go so if we go back to this project here and we log back in as adam You should be able to see our chat history with Bill and Cameron. And again, we can create new group chats, add people to these group chats, the whole nine yards.
If you want to use React Chat Engine Pretty, again, just install the declare it and use the pretty chat window and pass in these four props and you're done. Now I'm gonna add some extra videos on top of this even though we have the fully working chat app right now. videos I'll show you how to customize the UI, add API calls so you can make this chat your own, or embed it into large-scale projects or even formal company projects. I hope you enjoyed this video. If you have any questions feel free to leave a comment and feel free to watch the next videos too so that you know how to use the chat engine framework as best as possible.
Appreciate it. Let me just do a little piece of bonus content where I actually connect react chat engine. pretty as well. Let's just do it really quick. So stop that server, run npm install react-chat-engine-pretty and let that install.
And we'll replace this UI with the new one. So if you install Pretty Chat Window from React Chat Engine Pretty, and you delete these two components here and the chat logic, and you just use Pretty Chat Window, we'll need to set the project ID, the username, and the secret, and the style, which we will set to height 100%. Now of course we need to copy our project ID and then we need to pass in the user credentials for this project. So props.user.username and we'll do the same thing but for secret.
And then add a close tag to this component. Now of course we have to rerun this in dev mode and we're fully good to go. I remember that I did make the promise that I was going to make the app look the exact same, so this does exactly that.
If you log in as Adam, you can see your chats with Bill and you're able to send those new messages once again. If you have any other questions, feel free to leave them in the comments. The chat engine framework can be used to build any imaginable chat app in any JavaScript framework, front-end and back-end, Python servers, Ruby servers, you name it, it can all be built. If you have any questions, leave a comment and I'll link you to the right documentation to get you going on your way.
Appreciate the time.