
ChatApp is a **web application** created using **Express.js**, **React.js**, and **MongoDB** that allows users to log in and engage in real-time messaging. This project aims to expand knowledge in React, MongoDB, and additional tools like **Tailwind CSS**, **DaisyUI**, and **Socket.io** for live updates.

**[Live Demo: Visit ChatApp](https://chatappproject-fjq6.onrender.com)**

## Key Features

### Real-Time Messaging
- **Send and receive messages instantly**: Users can communicate in real-time using Socket.io for live updates.
  
### Authentication
- **User login and registration**: Secure login and signup functionality.

### Notifications
- **Sound alerts**: Users receive audio alerts when a message arrives in an active conversation.

### User Presence
- **Online status**: Displays online status indicators for users.

### Responsive Design
- The application is responsive, working smoothly on both desktop and mobile devices.

## Tech Stack
- **React**: Used for creating the dynamic user interface.
- **Express.js** and **MongoDB**: Serve as the backend and database for handling user data and messages.
- **Socket.io**: Provides real-time messaging capabilities.
- **Tailwind CSS** and **DaisyUI**: Style the interface for a modern look and feel.

## Screenshots:

- **Login Page** ![LoginPage](https://github.com/user-attachments/assets/c76b805e-eeee-4884-9a89-d79e3381d52d)
- **SignUp Page** ![SignUpPage](https://github.com/user-attachments/assets/695b397f-970a-48ec-8593-20f4c9919f87)
- **Home Page (No Chat Selected)** ![HomePageNoChatSelected](https://github.com/user-attachments/assets/264f7e6b-ba15-4137-9f1d-4c0d9a16a455)
- **Home Page (With Chat Selected)** ![HomePageWithChatSelected](https://github.com/user-attachments/assets/134e5036-3299-4993-ae76-1b88de8ee9a3)

## Installation

1. **Install Dependencies**:
   ```bash
   npm install
2. **Start the backend server**:
   ```bash
    npm run server
3. **Start the frontend development server**:
   ```bash
   npm run server

  