Real-Time Chat Application

A full-stack real-time Chat Application built using the MERN Stack and Socket.IO. The application allows users to securely register, log in, find other users, and communicate through instant one-to-one messaging.

Features

• User Registration and Login
• JWT-based Authentication
• Password Hashing using bcrypt
• Secure Authentication using HTTP-only Cookies
• Real-Time One-to-One Messaging
• Online / Offline User Status
• Search Users
• Conversation Management
• Message History
• Message Timestamps
• Real-Time Message Notifications
• Protected Routes
• Responsive Chat Interface
• Logout Functionality

Tech Stack

Frontend

• React.js
• Vite
• Tailwind CSS
• DaisyUI
• Zustand
• Axios
• Socket.IO Client
• React Router DOM
• React Hook Form
• React Hot Toast
• React Icons

Backend

• Node.js
• Express.js
• MongoDB
• Mongoose
• Socket.IO
• JSON Web Token (JWT)
• bcrypt.js
• Cookie Parser
• CORS
• dotenv

Real-Time Communication

The application uses Socket.IO for real-time communication.

When a user connects, the server associates the user's ID with their active Socket.IO connection and broadcasts the updated online-user list.

When a message is sent, it is stored in MongoDB and immediately delivered to the receiver through Socket.IO when the receiver is online.

Authentication

Authentication is implemented using JWT.

Passwords are hashed using bcrypt.js before being stored in MongoDB. The JWT can be retrieved from an HTTP-only cookie, while protected backend endpoints are secured using authentication middleware.

📡 REST API

User

POST /api/user/signup
Register a new user.

POST /api/user/login
Authenticate a user.

POST /api/user/logout
Logout the current user.

GET /api/user/allusers
Retrieve users except the currently authenticated user.

Messages

POST /api/message/send/:id
Send a message to another user.

GET /api/message/get/:id
Retrieve the conversation with another user.

Project Structure

ChatApp/
├── Frontend/
│   ├── src/
│   │   ├── components/
│   │   ├── context/
│   │   ├── home/
│   │   └── zustand/
│   └── package.json
│
└── Backend/
    ├── controller/
    ├── jwt/
    ├── middleware/
    ├── models/
    ├── routes/
    ├── SocketIO/
    ├── index.js
    └── package.json

Environment Variables

Create a .env file inside the Backend directory:

PORT=4002
MONGODB_URI=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret

Do not commit the .env file or real credentials to GitHub.

💻 Run Locally

Backend

cd Backend
npm install
npm start

Backend runs on:

http://localhost:4002

Frontend

cd Frontend
npm install
npm run dev

Application Flow

Register / Login
      ↓
JWT Authentication
      ↓
Select or Search User
      ↓
Load Conversation
      ↓
Send Message
      ↓
Store Message in MongoDB
      ↓
Socket.IO Real-Time Delivery
      ↓
Receiver Gets Message Instantly

Project Purpose

The purpose of this project is to demonstrate the development of a full-stack real-time communication system using the MERN stack, including authentication, database management, REST APIs, state management, and WebSocket-based communication.

Author

Aakash Prasad Chaurasiya

Java Full Stack Developer