Building a Group Chat Application: A Comprehensive Guide

hi everyone I am muil welcome to my chat application project explanation video in this video I'm going to talk about the front end and backend Technologies and libraries that I have used in this project and what are the features that I have added in my project and how I implemented that project and also I will discuss about the deployment and how I optimized my application for better performance as well firstly I will give you an overall idea about this project after that we can go a little deeper into that so basically it is a simp simple group chat application where user can create their own account using their email ID and phone number once they logged into their own account they can create groups and they can send messages in between those users those who are available in that group all right so the Technologies and libraries that I have used for the implementation mainly HTML and the CSS framework is bootstrap all right and the node framework is expressjs as a database I used my SQL um the orm that I used is SQL I all right so once I completed my project I deployed that project using AWS uh the major services that I have used is e to instance and for the management of database RDS for the deployment of image sharing I used S3 bucket as well and I have mapped my domain using Route 53 all right so the main features uh actually added as a user have their own profiles and they can create the groups okay as many groups they wanted and uh admin have some privileges over normal users as well and finally I implemented real time messaging using socket IO all right so these are the this is the my front end it's kind of look like this in the homepage I have used three models for sign up sign in and forgot password features uh since I'm using bootstrap I can make sure that the user not need to refresh the page for the sign up sign in and I can toggle in between the model as well so the for the S sign up I used a library called a bcrypt so that I can make sure that the password is actually encrypted every time and also I have added alerts for the successful sign up if the password is incorrect there will be a popup uh there is alert as well okay it is also implemented using bootstrap and I Incorporated JWT once the user logged in there will be a token will be created it will be stored in the uh cookies so that I can authorize that user every time so when it's come to the for good password I used a sendin blue API okay so I can securely share the reset link uh via mail okay so once I shared that you can see over here uh the user will get a mail kind of look like this reset password and there will be a link over there and I attached my mail ID to contactors so once user click into that user ID it will redirected to reset password page us can reset their password and it will be actually valid for 5 minutes so that I made sure that it is required and also it is valid for one time only once it's open it can be used next time okay once they successfully logged in they will redirected to a new page over there in the left side they they can see all the groups uh they presented and there is one common group as well okay the in the common group everyone can access that group and everyone can send the messages over there all right and additionally we can create their own group they can give the group name and they can add the members the members they wanted and there is a search bar is also present using that search bar they can search the members so once that created once the group is created that they can share messages in between that group members only and admin can remove or add the members and even he can change the name as well okay so when it comes to key features and optimization uh majorly I have implemented multimedia capabilities using AWS S3 bucket so here user can send messages as well all right and I have used a socket IO majorly uh it will make sure that it will reduce the server loot it will only uh call when someone send the messages only in that certain groups all right and also uh once the message is shared you can see over here uh it will will show the name of the user those who send that messages and the timestamp as well okay and also I am storing my messages in the local storage the previous messages so that the API Cod load will be lesser so it is also improve the performance of this application and also once in uh once in a 10 day uh using a crown job I'm actually achieved message and storing in a separate table uh so that it is also uh make sure that app is actually performing in a better way when it's come to the deployment I deployed my project using AWS the major services that I have used is E2 instance and RDS I purchased my domain from God add and used a Route 53 service from AWS for the mapping of my domain into the ec2 instant and engine X is employed to optimize my server performance and enhance the security through the reverse proxy settings and https request okay so I implemented cicd pipelines using genkin service the uh M source code manager changes a PO trigger so whenever there is any change happening in my source code uh that PO trigger get activated using a Chown job uh it will automatically get updated in my website as well so this is my live project you can see I served on my domain muah man.com I have added few models over here just like I mentioned earlier for the sign up sign in I can toggle in between that there is a for good password model as well okay so user not need to uh switch between the pages there is no refreshing happening over here even if I switch from one model to another okay so that's the main advantages of implementing models over here so let me create a account so I'm creating a test test user giving test gmail.com I can give a random phone number I created a password as well okay uh I already given a m ID or phone number similar that's why it is showing the user is already exist so let me give test one and let me change the phone number as well 98 yeah so here I'm using a div for to show the notification as well so user is successfully signed in so you can see there is a common group it is always visible so there are few users already signed in earlier they have sent some messages in the common group it is available over here right so if I switch between this text and images you can see I can send messages over here if I want to send let me send some text messages first hi guys I am test user so you can see the time and the name is attached over here along with the messages if I want to send some images I can toggle that switch and I can select the image and I can send when I send the image it will directly go to my back end that form data from there uh that data will be saved into my Amazon S3 bucket and the URL will be saved into my database and it is showing over here so once you click and inspect you can see that URL is getting from that Amazon right so you can see that chat application S3 bucket AP sou the name you can see everything over here all right so this is how I implemented my sharing facility once I go to that group you can see I can create a group over here there are it is showing all the users logged into their own account created their account I can give a name for the group so test group all right so here test group if I want I can search a person so if I want person with name p so you can see prawin and a so a parure so that that P is present so that's why it is showing and if I type AJ entirely a it is showing AJ only okay so I can select AJ and and I can select mu uh I want ashik as well and I want azim as well okay so I'm just creating this group so group is successfully created so you can see that test group is come over here if I click test group the test group will pop up in the right side you can see all the five members okay uh you can see over here there are five members here and since this test user is the admin there is an admin Button as well for the common group if you check there is no button at all okay but when it comes to test group you can see there is a button over here once you click on that button actually if I don't want AJ over here so let me remove that AJ so if I update the details when I click on the test group you can see there are only four members present over here right now at this moment all right so this is how it work when I come to inspect element when I logged in if you go to local storage you can see all all the messages in my common group is actually presented over here in the chat history okay all the messages hi everything all the data so what's happening whenever any messages sent into the common group so let me send some messages as well so here in my network okay so let me send a message hello you can see actually it is sending a message ID along with this AP okay so for the response you can see right now it is not sending any messages because right now you know every messag is actually saved inside that local stor so there is no need of getting messages from my backend okay so the AP should be so whenever I have a th000 messages what will happen it will check what is the last message ID I have in the local storage and it will send that ID into my back end so it will only re return with the messages that after that certain ID okay so right now it is blank but if I send some something else uh there are few messages okay so you can see there is a only messages actually returned to here okay with message ID 10 okay with the message hi Bo okay all other all other data is actually available in the local storage when I go to my local storage you can see all other messages were saved in my local storage okay so it will improve my application performance okay okay and one major thing I have implemented after that is okay let me go to my network again so you can see there is a socket IO is al already implemented okay we will go through that anyway okay so the socket IO is already activ activated so what's the advantage of this whenever someone send messages all the users will get uh refreshed automatically okay there is no need of refreshment uh it will implemented using websocket IO okay and one more security features I want to discuss is authentication using JWT token so when you go to your application and when you go to that cookies you can see the token is actually saved in cookies okay so whenever any request is happening okay from his this main page whenever any request happening it will attach with that token okay so let me try one request so when I click the common group some request is happen okay there is a get user request is happened so when I check that headers you can see I'm actually in the cookies I'm passing this is data this toen okay it will go to my back end and it will uh authenticate first then only I will get the data for that I will show you how this work when I removed my data so let me remove my token from here and Let me refresh my page you can see it will get logged out okay so it will get automatically logged out okay so I need to resign in again so this time let me sign in with my account uh okay password is not correct okay so password is correct at this moment so you can see this is my account I have a few groups I'm present so this familyes group is not my account okay so I don't have any edit button over here if I create my own group so let me create my own group mu's group okay so I can search anyway but I want these four people in my group and if I created my account when I click on muil group you can see there is a edit button present over here okay so when it comes to socket IO uh let me open that admin account socket IO admin account for that you can use soet IO admin okay so when I open this I can give my URL it will get connected okay so when I go to that socket you can see there are so there are sockets available so if I logged in into another account as well so when I go to the clients there are two clients one is my this account okay another is admin account when I click here you can see here you can see this Nam space is SL admin okay so this is a socket IO Implement implemented over here itself so for this admin account that's the one client and another client is my this this account okay if I create let me create create another account as well for you if I open another account over here so let me do that we can use that test user account test gmail.com right okay so once I signed in over here so let me go to my soet iio admin account so here you can see when you click again that sockets is actually two sockets present for my this account and for another account when go to clients you can see there are three clients for the one admin for two accounts as well okay so whenever any messages s so let me send some messages in common group hi T you sir I'm not going to refresh that account okay so even though when I move to that account so let me move to that account so here you can see when yeah it is automatically come up over here right so when I do the same here as well so let me send message uh hi Mill the same thing will happen for my other account as well so let me go to my project you can see I haven't refreshed my account yet but still I'm getting this message so this is how we use that socket IOU to make our website or my chat application real time here I want to show the forgot password facility as well so if I click on that for good password it will open up a model I can give my email ID that I used to create that account let me give a incorrect mail ID okay so what will happen if I give an incorrect email ID it will show that user is not does not exist so if I give the correct mail ID it will send a mail and it will mention that it will only valid for 5 minutes so I can go to my mail so let me do that so I will receive a mail like this all right so when I click on this reset password button I will redirect it to my website again chat application where I can reset my password so let me reset my password if I give both the passwords same let me do a different if I give different it will show that The password should be same so let me make both passwords same I will get a message the password is all successfully reseted and it will redirected to my main page so I can sign in with my new password the one feature I have added uh when I try to open the same link again it will show that the link has been expired okay so that's why that's why I can make sure that it is used only once so the next thing I want to discuss is genkins okay how I implemented cicd pipelines using genkins so for that let me open my Jenkins admin UI so here you can see uh this is my public IP address and on the port 8080 I can access my Jenkins account okay so I already logged in that one okay so you can see I have a project chat application okay so when I open this I can configure that everything so I already created a video regarding this as well so when I go to the configuration the source code is actually GitHub from GitHub actually I created this one I attached my credential as well and the main thing I want to talk about that here using a poll SCM I can schedule when this need to be uh activated okay so when if I give that Cron job it's okay when I give H St uh okay I need to add the space uh this is for 1 hour okay so it will check after 1 hour every hour there is any change in the source code or not and once there is any change in my source code then this code will get activated okay it will check whether any uh project is running or not whether that chat application running or not in the port number 3,000 if there is running it will stop that it will delete that project and after that it will install all the dependencies that I have added to my GitHub then it will restart that project so I don't want to do anything other than changing my code in my git repository all right so this is how I implemented genkin so the source code manager that uh PM is actually based on the source code management okay so these are the main thing I have done and finally I have used cboard in order to download the SSL certificate for making this as a seced connection so right now you can see over here it is a secured connection if I checked in the genkins you can see it is not secured because it is happening on the uh HTTP request so if I paste it over here you can see it is HTTP request but my application is running on https request so I made this uh using cboard as well so here is my source code I don't want to get into each and every code I will show you an overall idea about my source code so this is my folder structure MVC model views and controller all the HTML files we have present in views and public is a static folder okay and when it comes to the app.js file you can see I have apart from all other things I have few Services one is websocket service I implemented websocket iio over here and a crown job using Crown job service okay so and also I have managed my course over here okay I'm allowing my admin socket IO here Orin in order to access that admin socket IO all right and the connection which I have made over here okay the websocket service this is the websocket io connection I have mained over here for accessing my admin panel I have implemented the authentication I have given right now it is a false okay if you give that authentication password and username you can use that password and username for loging into admin account as well all right so when I go to the services you can see there is a AWS service so here I created a function called upload to S3 so using this function I creating a public URL to access that images that shared on the chat application all right so when it's when I use this upload to S3 function I I will share that image and the file name which I wanted and it will create a public URL and it will return that public URL and it will saved over my database all right so when it's come to the crown uh what it is doing it is actually achieving all the datas all right so uh here in order to make sure it is actually performing well I have a few promises present over here it is not related to each other so that's why I'm using promise all so that I can reduce the SI time okay so this is one way to achieve that better performances okay so here I'm getting all the data which is 10 days ago and I'm actually adding this into another table I can increase basically I I can increase the performance all right so when it comes to websocket IO I have a few uh connections over here all right so I managed everything over here I'm actually exporting from here then it will get into my app.js and I'm using over here all right so these are the main things I want to share about my source code so I believe I covered most of the important topics about this chat application project if you still have any query you can reach out to me so thank you so much see you in the next video

Channel: Mufil Rahman A

Views: 517

Keywords: group chat, chat application, AWS deployment, real-time messaging, multimedia features, user authentication, Nginx, Socket.io, web development, database optimization, software tutorial, programming guide, JavaScript, Node.js, Express.js, MySQL, HTML, Bootstrap, Jenkins CI/CD, security measures, JWT tokens, local storage, source code walkthrough, tech tutorial, software development, coding tutorial

Id: 5b8hnAgpqTw

Length: 20min 44sec (1244 seconds)

Published: Tue Dec 19 2023