This is a real-time chat application created with NodeJS, Express, and Socket-IO on the backend and React on the frontend.
Users have the option of joining groups and instant messaging one another.
- Use of Chakra-UI for Modern UI Development.
- React JS Hooks are used with Functional components.
- ES8 async/await functions used for more readability of code.
- All the user details, group chats and conversations are stored in the MongoDB Atlas.
- Login/Signup as well as Logout feature using jwt and bycrpt for hashing the password to be saved in MongoDB Atlas.
- There will be an error message if the credentials are incorrect and even after a successful request.
- Suports Real-time One-on-One and Group-Chat communication & notification is supported using Socket-io.
- Search for chats, create a group, and add or remove participants.
-
Just go on official Node.js website and download the installer. Also, be sure to have
gitavailable in your PATH,npmmight need it (You can find git here). -
You can install nodejs and npm easily with apt install, just run the following commands.
$ sudo apt install nodejs $ sudo apt install npm -
You can find more information about the installation on the official Node.js website and the official NPM website.
If the installation was successful, you should be able to run the following command.
$ node --version
v8.11.3
$ npm --version
6.1.0
If you need to update npm, you can make it using npm! Cool right? After running the following command, just open again the command line and be happy.
$ npm install npm -g
Firstly, we need to install all the dependencies in the backend and frontend folders
For Frontend
cd frontend
yarn
For Backend
yarn
Secondly, we need add .env file in root folder in below format
NODE_ENV = development
PORT = 5000
MONGO_URI = <Your-Mongo-URI>
JWT_SECRET = SuperSecret-Key
Thirdly, run in local environment
For Frontend
yarn start
For Backend
yarn start
Runs the app in the development mode.\
- Open http://localhost:3000 to view it in your browser.
- Backend running at http://localhost:5000 to test apis.
The page will reload when you make changes.
You may also see any lint errors in the console.
OR,
This video shows this project live.
- Better UI for Login/Signup, Alert-Popups, and Chat Window need to be updated to support more and feature like have profile photo, status with more modern look and feel.
- Better Folder Arrangement for more robust and scalable code.
This project is licensed under the MIT License - see the LICENSE file for details.
I am a passionate programmer with a keen interest in Full Stack Web Development, Cloud and DevOps Emerging Technologies, and attempting to solve problems with software.
