This is a Progressive Web App built using
MERN Stack
, which is primarily used forReal-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 π
chat-zoned-demo.mp4
- 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
ofindependent 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
andCircular 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 arePERSISTED
(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.
- 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
- 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
#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 infrontend
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 |
# 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
# 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.
MIT Β© Abhishek Sawant