react-app-simple-chat-app

A Simple Chat Application using React JS, a JavaScript library to make awesome UI by Facebook, Node JS, Express JS and MongoDB.

This application uses React JS component oriented UI creation paradigm. All components are written in JSX and ES6 style and are combined to get a single build for production purpose using Webpack 5.

ES6 module creation along with import /export is used. Babel is used to transpile all JSX code to vanilla JavaScript code. To install all the dependecies npm is used.

Back end is implemented using Node JS, Express JS and MongoDB. Atlas, the Cloud version of MongoDB is used. Real time communication is done using Socket.io

For UI creation HTML5 and CSS3 are used. Grid, the new feature of CSS3 is used for layout creation purpose.

This is a responsive web application for viewing in both Mobile and Desktop.

Features

• Code is rewritten with React JS 17 and Node JS 17
• Latest features of JavaScript i.e. ES6, ES7, ES8 is used
• React JS Hooks are used with Functional components
• ES8 async/await is used

• This is Simple Chat Application
• It is a Full Stack Application

• All the user details, rooms and conversations are stored in the MongoDB Atlas. This is a free/ shared account on Atlas. So Please use it wisely

• Login as well as Logout feature is added
• Error will be shown if the credentials are not correct

• for simplicity passwords are not encrypted

• Real time communication is supported using Socket.io
• Rooms with users are supported
• Conversation of a specific rooms will be shown on clicking the corresponding room

• for mobile screen user can go to the rooms page by clicking the <- icon at the end of the screen
• Multiline message can be send by hitting Ctrl + ENTER
• To send a message hit ENTER key

• Online / Offline status are shown by the violet dot
• Read / Unread status of conversation is supported
• All the conversation are stored in the database i.e. persistant
• All the timestamps are shown in UTC format to taken into cross browser differences

Installation

Clone the repository:

git clone https://github.com/anijitsahu/react-app-simple-chat-app.git

Navigate inside the directory:

cd react-app-simple-chat-app

Install all the necessary dependecies

npm install

Now run the server:

npm run server

Login to chat

1. Open 2 web browser and typehttp://localhost:3000 in the address bar to load the application in each of them
2. In one browser login with username anijit and password anijit123
3. In another one login with username jeetm and password jeetm76 and enjoy chatting

Test users

tested with Google Chrome 89 and Mozilla Firefox 86

Screenshots

Some screens of the application is given below for better understanding.

Desktop as well as Mobile version of the screenshots are given side by side.

Login Screen

Entering credentials

After submitting credentials

If credentials are not correct

After a successful login

When a new user joins

When a new user joins (2nd browser)

Sender type some message

Receiver's room is updated

Logout functionality