Verbalize - Real-time MERN Chat Application

Welcome to the Real-time MERN Chat Application! This is a fully-featured chat platform built using the MERN stack (MongoDB, Express.js, React.js, Node.js) with WebSocket-based real-time communication. The application includes user authentication, image storage, and more.

Features

• Real-time Chat: Messages are sent and received instantly using WebSockets.
• Private and Group Chats: Supports both private conversations (one-on-one) and group chats, allowing users to interact in real-time in both settings.
• User Authentication: Secure login and registration via email/password or Google sign-in via Firebase Authentication.
• Profile Picture Upload: Users can upload and resize their profile pictures.
• Responsive Design: Optimized for different screen sizes.
• Typing Indicators: Shows when another user is typing a message.
• Chat Notifications: Notification indicators for unread messages.

Try It!

App Link: https://realtime-chat-application-1-t24r.onrender.com/

You may either register your account or log in with the following credentials.

Email: [email protected]

Password: explorewithaman

Screenshots

Login Page

Chat Interface

Realtime Messaging and Typing Indicator

Demo Video

Collapsed View on Smaller Screen (Responsiveness)

Create Group, Group Details, and Account Details Modals

Notification Indicator

Technologies Used

Backend:

• Node.js with Express.js for the server
• Firebase for authentication
• MongoDB for data persistence
• Socket.io for real-time messaging (WebSockets)
• Cloudinary for image storage

Frontend

• React.js for building dynamic user interfaces
• Firebase Authentication for secure user login and registration (supports email/password and Google sign-in)
• CSS Flexbox for layout management with Bootstrap and custom CSS
• Responsive Design: Media queries to support various screen sizes
• Keyframe animations for interactive elements (typing, loading indicators)

Setup and Installation

Clone the repository:

git clone https://github.com/aman-saraiya/realtime-chat-application.git

Install backend dependencies:

cd server
npm install

Install frontend dependencies:

cd client
npm install

Setup environment variables:

• Create a .env file in the root of both server and client directories.

• Add your MongoDB URI, Firebase credentials, and Cloudinary API keys.

Start the server:

In the server directory:

cd server
npm start

In the client directory:

cd client
npm start

Now, the application should be running on http://localhost:3000