Posted on Oct 1 • Originally published at deadsimplechat.com The Mern Stack is an acronym for the latest technologies in use today. In this guide we are going to learn about MERN Stack with examplesThese technologies are:MERN stack is very popular in today's environment. One of the best benefits of MERN stack is that it is full stack JavaScript based.For this tutorial you need to have NodeJs installed on your system. If you do not have the node installed, you can go to the website and download the latest version on node and install it on your systemApart from this we assume that you have some knowledge ofcreate a new directory on your computer and name it chat-app then cd in to the directory and type the npm init command to initialize a new project likenext let us install express js to our application. Express Js is a web server that is built on top of NodeJs. Express is a fast, minimalist and opinionated web servertype the below command in your terminal to install express and save it in your package.json filenext open you index.js file and paste the below code there. If you don't have a index.js file create one and open it in your favorite code editor, I recommend vscodenow runand go to localhost:3000 to see the hello world written over thereNow we have installed and started the ExpressJs server. Next we need to install the MongoDB databaseFor this tutorial we will be using the MongoDB atlas. It is a Database-as-a-service platform offering fully functional and infinitely scalable MongoDB database on the cloudstep 1: go to the mongodb atlas website and create a free account there, then create a free mongoDB instancestep 2: copy the connection string which looks something likeand create a user and and strong passwordnext open your terminal and install the mongoose like soedit your index.js code to look like this:Now go to localhost:3000 and refresh the page. you will see something like this in your terminalIt means you have successfully connected to the MongoDB serverNext we need to create a schema for our database.create a new file in the root folder and name it chatSchema.js and write the following code in itHere we are defining what fields we are going to save in our database and what are the typesAs this is a demo application we are saving username, message and timestamp fields in our databaseNext, let us integrate the schema that we just created into our index.js file and install socket.io that we will be using to send message to and fro from our client to our serverfirst let us install the socket.io, type the below code in your terminalthen open your index.js file and add the following codeWhat are we doing here:What will happen when a chat messages hits the serverWe are going to be creating the front end app using React as we are developing the app using the MERN stack that is Mongo Express React and NodeTo create a application using we are going to use the Vite front end toolingcreate a new directory and name it chat-app-frontend and then cd into it then type the below codeThis command scaffolds a new Vite application, thenafter this the Vite will scaffold a new application and then you just cd into the directory and run the below commandsWhen you run the npm run dev command you will see this in the terminalthen you can open the localhost:5173 and see the application runningNext, let us install Socket.io Client to handle real time communication in reactOnce you have installed the socket.io in your application.Create a new file called the chatComponent.js in your /src folder and type the below code in itWhat are we doing here?Now that we have created the chatComponent file we need to add it to our app.js fileOpen the app.js file and delete the vite boilerplate the app.js should look something like thisthen paste this code inside the brackets like soNow we have completed the chat application. we also added the code to randomise the chat username for every user that joins the chatThis is how the completed chat application looks like and the complete code.In this tutorial we learned that how to use the MERN stack to create a chat applicationThis article is brought to you by DeadSimpleChat. I hope you liked the article. Thank you for readingTemplates let you quickly answer FAQs or store snippets for re-use.Thank you for reading. I hope you liked the article Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well Confirm For further actions, you may consider blocking this person and/or reporting abuse Anupam Maurya - Sep 28 Anil K Tiwari - Sep 28 Shameel Uddin - Sep 27 Shivam Singh - Sep 28 Once suspended, alakkadshaw will not be able to comment or publish posts until their suspension is removed. Once unsuspended, alakkadshaw will be able to comment and publish posts again. Once unpublished, all posts by alakkadshaw will become hidden and only accessible to themselves. If alakkadshaw is not suspended, they can still re-publish their posts from their dashboard. Note: Once unpublished, this post will become invisible to the public and only accessible to alakkadshaw. They can still re-publish the post if they are not suspended. Thanks for keeping DEV Community safe. Here is what you can do to flag alakkadshaw: alakkadshaw consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy. Unflagging alakkadshaw will restore default visibility to their posts. DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey. Built on Forem — the open source software that powers DEV and other inclusive communities.Made with love and Ruby on Rails. DEV Community © 2016 - 2023. We're a place where coders share, stay up-to-date and grow their careers.