Chat now: Mern-stack Chat Application

View Demo

Introduction

The MERN stack which consists of Mongo DB, Express.js, Node.js, and React.js is a popular stack for building full-stack web-based applications because of its simplicity and ease of use. In recent years, with the explosive popularity and the growing maturity of the JavaScript ecosystem, the MERN stack has been the goto stack for a large number of web applications. This stack is also highly popular among newcomers to the JS field because of how easy it is to get started with this stack.

This repo consists of a Chat Application built with the MERN stack. I built this sometime back when I was trying to learn the stack and I have left it here for anyone new to the stack so that they can use this repo as a guide.

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
• A Private Chat functionality where users can chat with other users privately.
• A Group Chat functionality where users can chat with group friend users.
• Real-time updates to the user list, conversation list, and conversation messages.
• Real-time notification to add friend, remove friend.
• Search and add friend with other users.
• Send mail to verify user.
• Change infomation user and password.

Screenshots

Private Chat

Group Chat

Login

Register

Search

List contact

List waiting to accept

List notification

Infomation user

Change password user

How to use

You can have this application up and running with just a few steps because it has both the frontend and the backend in a single repository. Follow the steps below to do so.

1. Clone this repo
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 and then run npm run client-install to install the dependencies of the frontend. The second command is a custom command that I wrote to simplify the installation process.
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 config/keys.js file.
4. Finally, all you have to do is simply run npm run dev. If this command fails, try installing the package concurrently globally by running npm install -g concurrently and then running the dev command.
5. The frontend of the application will be automatically opened in your web browser and you can test it away.

Things to note

• The frontend is created using create-react-app
• Database connections in the backend are handled using the Mongoose ORM