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

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

Test users