A Simple Chat Application using MERN stack (MongoDB, Express JS, React JS, Node JS) and Socket.io for real time chatting
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 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.
Babel is used to transpile all JSX code to vanilla JavaScript. For UI creation HTML5 and CSS3 are used.
This is a responsive web application for viewing in both Mobile and Desktop.
Back end is implemented using Node JS, Express JS and MongoDB Atlas. Real time communication is done using Socket.io
<-
icon at the end of the screen.Ctrl + ENTER
.ENTER
key.Clone the repository:
git clone https://github.com/anijitsao/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
2
web browser and typehttp://localhost:3000
in the address bar to load the application in each of them.Test users
Username | Password |
---|---|
anijit | anijit123 |
jeetm | jeetm76 |
tested with latest version of Google Chrome and Mozilla Firefox
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