MERN Stack Real-Time Chat Application

Welcome to the MERN Stack Real-Time Chat Application, a real-time chat application that's designed to enhance your communication experience, using the MERN stack (MongoDB, Express.js, React, and Node.js) and integrated WebSocket technology for instantaneous message delivery. This chat application enables users to seamlessly connect, chat, and exchange messages in real-time. Our user interface is designed with interactivity in mind, leveraging React, while the backend server infrastructure, built with Express.js and Node.js, ensures a user-friendly and engaging experience.

This app provides a platform for users to engage in conversations with friends and colleagues with the following key features:

Features

User Authentication (Login/Register)

• Securely log in or register to start chatting.
• User authentication keeps your conversations private.

Auto Avatar Generation

• Automatically generate avatars for users.
• Add a personal touch to your profile with unique avatars.

Auto-Scroll Chats

• Enjoy a smooth chat experience with automatic scrolling.
• Stay up to date with the latest messages without manually scrolling.

Online/Offline Status

• Easily identify the online or offline status of your contacts in real-time.
• A green dot indicates online, while a gray dot represents offline.

Logout Button

• Log out securely when you're done chatting.
• Ensure your account remains private and secure.

Chat User Interface

Getting Started

To get started with the MERN Chat App, follow these steps:

1. Clone the repository:

   git clone https://github.com/raychiu99/MERN-Stack-Real-Time-Chat-Application.git

2. Navigate to the project directory:

   cd mern-chat

3. Install dependencies:

   npm install

4. Set up the environment variables: Create a .env file in the root directory with the necessary configuration (e.g., database connection details, authentication keys).

5. Start the app:

   npm start

Now you're ready to chat with your friends and colleagues in real time!