Real-Time Chat System

A fully functional, real-time messaging application with authentication, room-based chats, message history, and live typing indicators. Built from scratch with modern web technologies.

Tech Stack

• Node.js: Backend JavaScript runtime
• Express: Fast, unopinionated web framework for APIs
• Socket.IO: Core library for low-latency, bidirectional real-time event-based communication
• MongoDB: NoSQL database for structured User and Message schema persistence
• Mongoose: Elegant MongoDB object modeling for Node.js
• JWT (JSON Web Tokens): Secure token-based authentication mechanism
• Vanilla HTML/CSS/JS: Clean, dependency-free frontend

Features

• Real-Time Messaging: Instant delivery of messages using WebSockets.
• JWT Authentication: Users securely register and login; passwords hashed using bcryptjs.
• Chat Rooms: Users can dynamically join distinct rooms isolating their conversations.
• Message History: The last 50 messages per room are dynamically fetched from the MongoDB cluster upon joining.
• Typing Indicator: Real-time broadcasts notify room participants when another user is actively typing.

Setup Instructions

1. Clone the repository:

   git clone <your-repo-url>
   cd chat-app

2. Install dependencies:

   npm install

3. Environment Setup (.env): Create a .env file in the root configuration alongside package.json and declare your connection parameters:

   PORT=5000
   MONGO_URI=mongodb://localhost:27017/chatapp
   JWT_SECRET=your_super_secret_key_here

   Note: Make sure your MONGO_URI successfully resolves to an active local or Atlas cluster.

4. Run the Server:

   node server/server.js

   The client can be tested by opening client/index.html in your browser. Since it points its socket instances to http://localhost:5000, the server must be active first.

Folder Structure

chat-app/
├── server/                 # Entire backend configuration
│   ├── server.js           # Server entry point and middleware pipeline
│   ├── socket.js           # Central event listener for Socket.IO actions
│   ├── models/             
│   │   ├── Message.js      # Message Mongoose schema
│   │   └── User.js         # User Mongoose schema (w/ password hashing)
│   ├── routes/             
│   │   └── auth.js         # Auth routes (Register / Login)
│   ├── middleware/         
│   │   └── authMiddleware.js # Route protector validating JWTs
│   └── config/             
│       └── db.js           # MongoDB connection utility
├── client/                 # Frontend UI and layout
│   ├── index.html          # Clean structure with login & chat toggles
│   ├── style.css           # Modern UX design & message bubbles
│   └── script.js           # DOM logic connecting to API & WebSockets
├── package.json            # Node.js dependencies
└── README.md               # Project documentation

API Endpoints

Method	Endpoint	Description	Request Body	Example Response
POST	/api/auth/register	Register a new user	{ "username": "John", "password": "123" }	201 Created: { "username": "John", "token": "ey..." }
POST	/api/auth/login	Authenticate an existing user	{ "username": "John", "password": "123" }	200 OK: { "username": "John", "token": "ey..." }