this is probably the best way to learn socket IO and not just the basics of socket dial because I already have a video on this channel about socket IO posted a way earlier because before that the socket i o was so cool I posted a video earlier so wrong timing there should have posted that with the breeze is going high which is right now so in this video I'll first show you what we are about to learn and what the application looks like and then I'll walk you through what is the best way of learning the socket IO you might find that it's really complex but it is not and one thing you need to understand is Socket eye is not something that the backend developers can learn or the front-end developers can learn they both have some things and some contribution to make in order to make an application friendly with the socket ion socket IO is really an amazing Tech it works on the pub sub model basically like that so there is constant publishing of the events and you need somebody who can constantly monitor for taking those events with us so that's how it works now you might have seen basic applications which works on dot on.com actions and whatnot but the whole idea of learning the socket IO is to just go through with some kind of a complex App application process which includes a lot of things so what we are going to see here is we have a lot of things being included in that for example we have one-to-one chat user can send the messages user can receive the messages user can even send images can receive the images can get the notification that hey there's something new that has happened so events capturing that is pretty cool in this one even user can create groups can leave the groups and can interact with the group so there is pretty much every scenario that we have covered here and the best thing is this is not a boring old tutorial where you watch the video we can create that if you wish in the comment section we can do that but this is more for focused on self learner so obviously in the world of internet right now there is a lot of rising people who says I'm a self-taught developer so this is the exact video for you if you're a self-taught developer you will absolutely love this learning process because this is where you you majorly does the active so let me walk you through what this is so first of all let me walk you through how to set up this application and we'll give you a demo of the application and then I'll walk you through the superpower of Open Source and how you can actually go through with the Journey of learning on your own with the open source all right cool okay so first of all let me share my screen so this is where you have to go free API dot app and this is from from this is from where we are going to do the setup so just click on this one which says get project this is where you want to go and this will take you on to the GitHub repository of the open API that we have created we call this as API Hub internally in the world it is known as free api.app so this is the app that you want to have just click on the code and click on the download zip or if you wish you can do the git clone as well so whatever you do however you do let me walk you through with the setup process of this as well because that's also pretty important so let me fire up my vs code this is my vs code here and I'll just drag and drop the application that I have so this is the zipped version of it so pretty easy so this is the zipped version and we don't want to have any dependencies or something like that so let's just go ahead and remove everything all right so when you will open this application this is how you are going to see this a lot of things going on a lot of things we don't understand but I'll walk you through with that as well the first thing that you have to do is just create one more file let me go ahead and move this a little bit here so that you can see it better there we go first of all double click anywhere here and create a DOT EnV file most important thing without this application is not going to run we're also giving you a DOT EnV sample file you can just literally copy everything from here and paste it here and it works majorly out of the box except one thing which is mongodb URL if your url is directly there if you have mongodb installed that's great if you don't have go on to mongodb Atlas and just sign up there and what we want is one database link so if you don't know how to set that up I have a separate video already searched on my channel basically what we need is a connection string so just click on the connect and if you have already created the network correct network setting and have created a correct login credential just click on Compass and click on copy that is it that is the string that we need now you can come back here and we can actually just paste this up so if I go back here and search for mongodb URI this is exactly where you need to don't change these hashes and stuff this is just for the demo purpose just paste your url here remove the trailing slash we will automatically create a new database known as free API for you just change your username and password for me it's a free API and the password that I created with a very secure strong password you'll be laughing on that too as well is free API one two three but no worries the moment I create these videos I actually delete these passwords so I don't have to worry that is it that is all you need we'll come back onto this file in a minute but this is all what you need once you have this we can go and open up our sidebar and open up the terminals and what I will do is first of all do a quick LS so that I know that my package.json file is here once you have this then go ahead and install all the dependencies we don't have tons of them it's very easy to understand application entirely written in JavaScript yes it could have been done in golang it could have been done in typescript as well I'll talk about that in a separate video that why we made the choice of having the JavaScript in this it's a very crucial Choice yes I know we might get some backlist that hey the world is moving towards typescript why not to just build everything in typescript I agree on that but we'll do that in a separate video now in the meantime this is doing all the things I want to bring your attention to this one thing we are now uh probably starting to ship some application so that you can see how the front end even looks like with the bare minimum necessities of it so in the examples you can see right now we have just one inside the chat app we have web so chat app could also be done in the mobile applications as well probably will ship that code very soon and we need some help in the open source as well so we'll come back on to this one the first thing that you need to do is just say npm start and npm Run start or npm start both of them are Same by the way you can check this into the repository as well it's running on localhost 8080 so that's where our application is running you can by the way watch this entire documentation of this application we have cooked up the documentation here I can zoom this out too much zoomed in and there we go and what you'll notice that inside the chat app this is where all the API connections are there so these are well nicely documented how you can grab all the chats this will be helpful for you in the front end part what all you can do get all available users get chat lists groups and whatnot so everything is here inside the database seeding we have the seeding portion of the chat app here as well you can just click that and fill this up as well let's just try this out let's try this so that we have some of the data already there so in case you want to directly play with the apis just click on that and this will give you a there we go so status code 201 database populated for apps successfully everything works out of the box in this one okay moving back on to the code part let's keep it running I want a new terminal so just give me a new terminal and I'll right click and rename this one as front end okay so in the front end I will go into CD examples chat app web this is where uh oops my bad control C one more time let's go there in the web do a quick LS I can see my package.json here as well this application is being built in the wheat so let's go ahead and say Hey I want to do npm install to install the very basic bare minimum we can check out the how the application is being built in the package.json very bare minimum things uh so we have in the dependencies uh some of the fancy stuff for just the UI purpose nothing too much axios and movement uh for handling the dates and excuse for firing the apis and basically this is it react react Dom react router Dom basic co-react app and we have the socket i o client to handle the sockets to constantly take the information that we should be taking so this is how it works basic 101 now if I close this one what you'll notice here is there is also an environment variable inside the example app chat web because the outer EnV is for the server but the inside this is the environment variable for the application all you have to do is in this web just right click and create a new file call this one as dot EnV this is how it should be but we are giving you just the example apps so all you have to do is copy all of this and paste it here it will work out of the box why so because our application is running on localhost 8080 I didn't change that if you change that in the environment variable change it here as well this is where our application apis are relying so this is where it goes now here you might find yourself in some trouble will will troubleshoot that as well so I'll just say npm run Dev by the way in case you are confused with that always go into package.json and see how the file needs to be run so this is a vtap so npn run Dev this is how it should be and now let's go and open this application here and we can now register by the way right click and check out inspect and see the console if you see this kind of nonsense errors all the way uh this is nothing this is just a course error so you know that sometimes course if you put up asterisk it's too much allowed So based on your browser to browser this might change this is a quick fix since we are in the world of Open Source this is pretty easy fix we know that we have the entire source code access everybody has the access so I can go in the dot EnV and can see that do I have a course origin so here we have mentioned the course origin to asterisk that means allow everything but sometimes the browser is much more stricter than that and doesn't allow everybody to have an access of that the easy fix is just allow your url wherever your front end is running so HTTP colon slash my application is running on localhost colon 3000 that's it once you save this the most important thing is to actually restart your server and no matter what you're using change in the environment variable that needs server needs to be restarted so close this start this there we go now probably a front end don't need a restart but let's just check this out right click inspect console pretty clean pretty clean this time I can visit register pretty clean nothing to be valid so really minor fix nothing to be worried let's see how the application looks like although we have pre-populated data you can always go into the database and check out how much the database is being populated and in the database let me just check that browse collections and hopefully there we go free API if I go ahead and look on to the chat here to test chats all the common chats are there so that you can try this out that how one to one and all these charts data populated but uh no such worries I can always go ahead and create my own chats and everything as well so I'll close this one let's register a user I'll register the user with the name of one at the rate one.com username will be one the password will be very secure one two three four let me just write that again one two come on one two three four five six seven eight very secure password let's register the user one okay successfully registered great now we can login so let's login the first user which is one enter the password one two three four five six seven eight uh login into the app and this is how the default app looks like pretty cool we can actually add this chat and can talk to some other people but I would love to go into the incognito mode localhost 3000 and we'll just register another user with the name of uh to add the rate to.com and we'll have the username of two password one two three four five six seven eight the most secure password uh register that yep created successfully now let's try to log in with the same username to password is one two three four five six seven eight and login now once I log in I can actually talk to any people so let's add one chat you can make a group chat we will do that I'll just go ahead and say I want to talk to one I'll create this chat and I'll send a message to one and how does one looks like by the way you can send attachment we have already taken care of that and I'll just say hey one once I send this not only this we can just push it here you what you'll notice here is that one actually gets a green notification that hey uh there might be some notification here there might be notification from other people as well but we are actually pulling the data that if there is a new chat we are constantly pulling and monitoring via the sockets if I click on this this is where we can see hey but now since we have checked this we are actually going through that now we can say hey to and immediately two sees that because pulling data from the socket so this is how basically it works by the way you can add a group chat and if it is a group chat obviously it needs a name group so let's call this one as YouTube and participants you can add the participants which are pre there so that's why the seeding of the data is really nice and I can just go ahead and have another one which is uh two so S2 is also in my group uh so we can create this immediately we create that we get the name of it my screen is short that's why it's not pulling it but we can see who is there now let's move on to this guy so this guy can send message to the chat and it says hey he whatever that is and he sends it to time and I can see there are two messages so this also gets it clean so by the way if you don't see this and here also if I zoom this oh man come on I need to just move it yeah here you can see the two messages okay two zoomed in two zoomed in okay let's go back so we can see now if I click on this I get a lot more things here that what I can do and what is there I can see all the things which are happening there three dots actually allows me to check out about the groups and I can individually remove each user I'm admin so obviously admin will show here I can remove myself and I can remove other people I can add part spin or I can delete the group on the other hand if we move up here since I'm in the group I check this out about the group I don't see that I'm not admin so I cannot have the Privileges or permission to have these things I see that hey there are other peoples here's the admin pretty basic so what I want to show with this you is that this is a pretty complex application this is not a to-do application and the best part about this is this is not a tutorial where I walk you through entire thing this is a self-paced learning based on the open source so we can guarantee from our side that this application works all those people who are above the the level one or fresher level who wants to see that how can I just look at the code base and learn from it because you are not sure that the code base will always work but when you move into the corporate or companies they just give you the code base that he learned from it we have actually done a pretty good good job into this one first let's talk about the back end you can directly jump into the source and can check out that hey inside the controllers we are very well organized inside the apps you'll see that we have this chat app and this has this don't have ton of things it has just a message controller you this is what you have to study probably what 150 lines of code and chat controller this is where everything in the chat lives so anything and everything that happens and this whole thing happens at the back end and we have nicely commented out everything so that each portion of the code is there by the way you can also copy and paste this code into chargpt and can understand more of the things if you wish if you want to take and help from the AI if you want to take help from me just let me know in the comments I'll create a fresh tutorial explaining line by line obviously this will take ton of time but I am ready to do that also if you are more interested in the front-end part if you are more of a back-end developer go through with this code if you are more of a front-end developer and want to build some killer project you are just bored to create the to-do apps and something go on to the examples and check out the front-end part of it how this application is built we've already seen it's a pretty basic vtap nothing too much is being done and not tons of things are included in this one so you can see there is not even any Redux toolkit or something absolute basic and if I open the source we have the components here this is how we are making the apis and everything so how the API clients and everything is being fired up in just one file long but just one file so notice here how the API functionality is there and this is all the apis that we are handling which I just showed you in the API documentation as well a basic component don't need to go too much in depth of that then we have the context and the interface to help you to understand the code more and after that we have just the pages a chat login and register three pages that's all what we have in this one a chat this is where majority of the things goes in a bit of a complex code but take help from the chart GPT if you wish and this is something where I always say and again open source so everything is available for you right at this moment this is where I say that a lot of people who says that I am a self-taught developer this is your time to try this out that are you really a self-taught developer or do you take some help from chart GPT or tutorial or need something like that this is what we really wanted to build for years that people who want to take things on from Level 2 to level three or little bit above the level one this is what you need to have so if you think that you are a great front-end developer I think this is your time to build an application uh with just the backend and handle everything in the socket dial if you do this that means that is it you will never have to visit socket eye again and you can proudly present this in your resume that hey this is my Peak project in which I showcase all of my skills if you are a beginner just try to understand the code if you understand 20 of the code which we have written here I think that would be a great great achievement and if you are a back-end developer this is a great way to understand how the code is being written in the production level for the sockets so I think this is probably the best contribution we have done for the society and entire coding Community if you understand this whole thing great if you don't understand it at least share it in your network and social media LinkedIn and whatnot so that people who wants to take the things on to the next level your seniors and some tech leads and all of that they can take advantage of this open source Library so yeah super excited to present this all of you a different approach than the regular old tutorial I wanted to do something new and crazy and this is where we are a little bit about the head for most people but I think that's great let's go ahead and catch up in our such video I'll be watching out the comments to see that what's your feedback and do you want me to create a tutorial on this one we want to understand absolutely from scratch uh just let me know I will try to do that that's it for this video and let's catch up in the next one