Chat-Zoned MERN-Chat-App

This is a Progressive Web App built using MERN Stack, which is primarily used for Real-time Online Chatting (similar to Whatsapp or MS Teams). Being a PWA, this app can be installed natively on mobile and desktop devices🔥. It allows a user to perform the following major operations:-

• Register/Login/Logout/search registered users
• Create one-to-one chats, group chats
• Send/edit/delete text messages
• Add/Edit/Delete/Download files (document/image/gif/audio/video) in messages
• Group Chat features (for all group members)
  • View group members
  • Edit group display pic/group name
  • Exit group
• Group Chat features (only for group admins)
  • Add/remove members
  • Make/dismiss group admin
  • Delete group
• Edit profile pic/profile name
• Change profile password

Deployed to Render.com 👉 https://chat-zoned-gl2x.onrender.com 🚀

Working Demo 👇

chat-zoned-demo.mp4

Cool Features 😎

• All frequently used pure functions are memoized to improve app performance.
• Debouncing has been implemented for every search box in the app to improve app performance.
• Event Delegation has been implemented for every parent element containing an item list (messages list, user list, group member list, chat list, notification list etc.) to improve app performance.
• Promise.all() has been used for concurrent execution of independent async operations wherever necessary (eg. concurrently deleting all group chat messages upon group chat delete), to improve app performance.
• Code splitting (lazy loading) has been implemented to load either homepage or chatpage based on user logged-in status.
• Loading Skeletons and Circular Spinners are displayed for all async (time consuming) API calls, for better UX.
• Sockets have been used not just for real-time messaging, but also for real-time message updates (editing/deleting message), real-time group updates like creating a new group, updating group name/display pic, adding/ removing members, making/dismissing group admins, exiting/deleting group etc.
• Typing Indicators (similar to MS Teams app) have also been implemented using sockets.
• Real-time notifications also implemented using sockets. Most important, all the notifications are PERSISTED (saved) in MongoDB, so even if a user is offline/logged out, he/she will see all the notifications after logging in.
• All new message notifications are grouped by chat in the UI, and the respective chat specific notification counts are displayed on each chat (similar to Whatsapp).
• The notification count after every new message delete, is updated in real-time for ALL OTHER USERS of that chat.
• Emoji picker has been added to new message input box, to conveniently allow the user to select all native emojis of his/her device.
• Enter key can be used for submitting udpated profile name/group name, or for sending a new message.
• Shift + Enter key can be used for adding a new line in message text content.
• The sent/updated message PRESERVES the formatting of the message text content.
• Edit message feature is similar to 'MS Teams edit message feature', where you can modify text content, add/remove/change attached files of that message, discard updated draft etc.
• File preview is displayed whenever you add/change an attachment, before sending and updating a message.
• User Passwords are encrypted before storing/updating them in MongoDB, using bcryptjs, to improve security.
• User Authorization is carried out by an express middleware using JWT package, before performing ANY chatpage specific operation.
• Every user login session expires after 15 days.

Tools Used 🛠️

Frontend :-

• React for reusable, stateful UI components
• Redux Toolkit for Global State Management
• Sass for custom styling, responsive design
• Bootstrap5 for quick styling, responsive design
• Material UI for dialogs, menus, alerts, toasts, tooltips, drawers, circular spinners, skeletons, chips, icons etc.
• Lottie Files for Animations
• Emoji Picker for adding emojis to text messages
• Socket.io-client for client-side socket setup and event handling
• Axios as an HTTP client for API calls

Backend :-

• Nodejs as Backend JS Runtime
• Express as Backend Nodejs Framework
• MongoDB as Database
• Mongoose for Object Data Modeling Tool for MongoDB
• Json Web Token for User Authorization
• Bcryptjs for User Password Encryption and verification
• Cloudinary package for uploading/deleting images to cloudinary
• AWS SDK Package for downloading/deleting non-image files to AWS S3
• Multer for uploading images temporarily to server for uploading to cloudinary
• Multer S3 for uploading non-image files to AWS S3
• Socket.io for server-side socket setup and event handling

Steps to Run Project Locally 💻

#Clone this repo to your local machine
git clone https://github.com/Abhishek-Sawant-98/Chat-Zoned.git

# Go to project root folder
cd Chat-Zoned

• Create .env file in root project folder and add the following environment variables (KEY = VALUE)

KEY	VALUE
PORT	YOUR_PREFERRED_PORT_NUMBER
MONGODB_URI	YOUR_MONGODB_URI
CLOUDINARY_CLOUD_NAME	YOUR_CLOUDINARY_CLOUD_NAME
CLOUDINARY_API_KEY	YOUR_CLOUDINARY_API_KEY
CLOUDINARY_API_SECRET	YOUR_CLOUDINARY_API_SECRET
DEFAULT_GROUP_DP	YOUR_PREFERRED_IMAGE_URL
DEFAULT_USER_DP	YOUR_PREFERRED_IMAGE_URL
JWT_SECRET	YOUR_PREFERRED_JWT_SECRET
NODE_ENV	'development' (While Developing) or 'production' (While Deploying)
S3_ACCESS_KEY_ID	YOUR_AWS_S3_ACCESS_KEY_ID
S3_SECRET_ACCESS_KEY	YOUR_AWS_S3_SECRET_ACCESS_KEY
S3_REGION	YOUR_AWS_S3_BUCKET_REGION
S3_BUCKET	YOUR_AWS_S3_BUCKET_NAME

• Get MongoDB URI by creating a MongoDB cluster from here
• Get cloudinary related secret keys from here
• Get AWS S3 related secret keys from here
• Next, create another .env file in frontend folder and add the following environment variables (KEY = VALUE)

KEY	VALUE
REACT_APP_SERVER_BASE_URL	http://localhost:YOUR_PORT_NUMBER (Local Development) or https://YOUR_DEPLOYED_SERVER_URL (During Deployment)
REACT_APP_DEFAULT_USER_DP	YOUR_PREFERRED_IMAGE_URL
REACT_APP_DEFAULT_GROUP_DP	YOUR_PREFERRED_IMAGE_URL
REACT_APP_PLACEHOLDER_IMG_URL	YOUR_PREFERRED_IMAGE_URL
REACT_APP_CLOUDINARY_BASE_URL	https://res.cloudinary.com

Run backend

# install dependencies (in root project folder)
npm install
# serve at localhost:YOUR_PORT_NUMBER
npm start
# serve with hot reload at localhost:YOUR_PORT_NUMBER
npm run dev

Run frontend

# Go to 'frontend' folder
cd frontend
# install dependencies
npm install
# serve at localhost:3000 with hot reload
npm start
# build for production
npm run build

• Finally, deploy it using Render.com. Don't forget to add all the above mentioned environment variables (both backend and frontend) while deploying.

License

MIT © Abhishek Sawant

---

If you liked this app, show some ❤️ by starring 🌟 the repository 🙂