Full-stack Real-Time Chat Application

Live

Introduction

The MERN stack (Mongo DB, Express.js, React.js and Node.js) is a popular stack for building full-stack web-based applications because of its simplicity and ease of use. With the explosive popularity and the growing maturity of the JavaScript ecosystem, the MERN stack has been the go-to stack for a large number of web applications. I built this chat application because I wanted to create something people can actually enjoy.

This is a full-stack chat application that can be up and running with just a few steps. Its frontend is built with Bootstrap running on top of React. The backend is built with Express.js and Node.js. Real-time message broadcasting is developed using Socket.IO.

Features

This application provides users with the following features

• Authentication using JWT Tokens
• Public Chat which can be used by anyone using the application to broadcast messages to everyone else.
• Private Chat functionality where users can chat with other users privately.
• Real-time updates to the user list, conversation list, and conversation messages

Screenshots

Chat Room

Choose Public Room

Login

Sign Up

How to use

You can get this application up and running with just a few steps but the frontend and the backend need to run separately. Follow the steps below to do so.

1. Clone this repo ~$ git clone <SSH URL>
2. Once you have the repo, you need to install its dependencies. So using a terminal, move into the root directory of the project and execute npm install to install the dependencies of the Node.js server. As for client (front-end), navigate to client folder and execute yarn to install the dependencies required to run the application
3. This application uses MongoDB as its Database. So make sure you have it installed. You can find detailed guides on how to do so here. Once installed, make sure that your local MongoDB server is not protected by any kind of authentication. If there is authentication involved, make sure you edit the mongoURI in the enviromental variable
4. Finally, all you have to do is simply run npm run start and run yarn start for client

Things to note

• The frontend is created using create-react-app
• Database connections in the backend are handled using the Mongoose ORM
• Code quality is ensured using (ESLint)[https://eslint.org/]

Now, you are ready to chat! 💻 🍺 🔥 🙌