Chat App Client

This is the frontend client for the real-time chat application. It provides a modern, responsive, and soft user interface for seamless communication.

🚀 Deployed Application

Live URL: https://fastidious-shortbread-79399d.netlify.app

💻 Tech Stack

• React: UI Library for building components and managing application state.
• Vite: Next Generation Frontend Tooling for fast development and optimized builds.
• Socket.io-client: Enables real-time, bi-directional communication with the backend websocket server.
• Axios: Promise-based HTTP client for making API requests.
• React Hot Toast: Lightweight library for elegant and responsive toast notifications.
• Lucide React: Beautiful and consistent iconography.
• Date-fns: Modern JavaScript date utility library.

🛠️ Process & Setup Instructions

Follow these steps to set up and run the client locally.

1. Installation

Ensure you have Node.js installed. In the client directory, run:

npm install

2. Environment Configuration

Create a .env file in the root of the client directory to store your environment variables (e.g., API URL, Socket URL). Example:

VITE_API_URL=http://localhost:5000/api
VITE_SOCKET_URL=http://localhost:5000

3. Development Server

To start the local development server with hot-module replacement (HMR), run:

npm run dev

4. Build for Production

To create an optimized production build, run:

npm run build

The output will be placed in the dist directory, ready to be deployed.

5. Preview Production Build

To preview the production build locally before deployment, run:

npm run preview

🏗️ Server Architecture

The backend of this application is built with scalability and real-time performance in mind. Here is an overview of the server-side architecture and technology stack:

Core Technologies

• Node.js: JavaScript runtime built on Chrome's V8 JavaScript engine.
• Express.js: Fast, unopinionated, minimalist web framework for building the REST API.
• MongoDB & Mongoose: NoSQL database for persistent data storage (users, chats, messages) and ODM for elegant data modeling.

Real-Time Communication

• Socket.io: Enables robust, bi-directional, real-time event-based communication between the server and connected clients.
• Redis (via ioredis): Used primarily as a Pub/Sub adapter for Socket.io. This is a critical component for horizontal scalability, ensuring that when the application runs on multiple instances, messages broadcasted from one instance reach clients connected to a different instance.

Security & Authentication

• JSON Web Tokens (JWT): Used for stateless, secure user authentication and authorization.
• Bcrypt.js: Library used for hashing passwords before storing them in the database.
• CORS: Cross-Origin Resource Sharing middleware for restricting API access to authorized domains.
• Cookie Parser: Middleware to parse cookies attached to the client request object.

Architecture Flow

1. REST API (Express): Handles standard CRUD operations such as user registration, login (JWT issuing), fetching historical messages, and retrieving the list of available rooms/users.
2. WebSocket Layer (Socket.io): Handles real-time events. When a user connects, they authenticate and join specific Socket rooms corresponding to their chats.
3. Message Broadcast (Redis): When a user sends a message, it is emitted to the server. The server saves it to MongoDB and then broadcasts it to the relevant Socket room. If the server is scaled horizontally, Redis Pub/Sub ensures the message is propagated to all instances so all users in the room receive the update instantly.