• Name: Harshit Swarnkar
• University: Indian Institute of Technology (BHU) Varanasi
• Department: Electronics Engineering
• Roll Number: 21095051

Message Web App build using MERN stack

messageapp-harshit1.onrender.com

---

This is the frontend + backend of MessageApp build with MERN stack and hosted with Render

🧾 Description

MessageApp is a chatting application. Its build using MERN stack and uses socket.io for realtime messaging, online statuses, typing indicators, notifications etc.

✨ Features

1. Authentication of Users: Ensure secure registration and login of users.

2. User Discovery: Enable users to search for other users for communication.

3. Group Chat Creation: Allow users to form group chats.

4. Admin Control in Group Chats: Grant administrative rights exclusively to group-chat admins for editing chat details, such as the chat name or managing members.

5. Voluntary Departure from Group Chats: Permit users to leave group chats at their discretion.

6. Real-time Messaging: Facilitate real-time conversations using Socket.IO for instant message delivery.

7. Online/Offline Status in Private Chats: Display the real-time online/offline status of users during private conversations.

8. Typing Indicators in Real-time: Provide real-time typing indicators in both private and group chats.

9. Real-time Chat Notifications: Offer real-time notifications for private and group chats to keep users updated on new messages and activities.

10. Responsive Design: Ensure the application is optimized for all screen sizes, delivering a user-friendly experience across various devices.

⚙ Tools and Technologies used

Frontend

1. React.js
2. Chakra-ui
3. React-icons

Backend

1. Node.js
2. Express.js
3. MongoDB
4. JWT
5. Socket.io
6. Cloudinary
7. Bcrypt.js

Installation and setup

1. Clone the repo to your local machine.

2. Install the required dependency for server using :

   npm install

3. Install the required dependency for client using :

   cd client
   npm install

4. Create a .env file inside the root folder and provide the following environment variables:

   PORT=5000
   USER_NAME= <mongodb_username>
   USER_PASSWORD=<mongodb_password>
   JWT_SECRET=<your_jwt_secret>
   NODE_ENV=development
   CLOUDINARY_CLOUD_NAME=<your_cloudinary_cloudname>
   CLOUDINARY_API_KEY=<your_cloudinary_api_key>
   CLOUDINARY_API_SECRET=<your_cloudinary_api_secret>

5. Start the express server using :

   npm start

6. Start the react development server using:

   cd client
   npm start
   

🏎 Creating production built

1. Create a production build react app using the command :

   cd client
   npm run build

2. Change the value of following environment variables:

   NODE_ENV=production