A full-featured real-time chat application built with the MERN stack (MongoDB, Express, React, Node.js), powered by Socket.IO for instant messaging and Zustand for efficient global state management.
- User Authentication & Registration
Secure sign-up and login with JWT & bcryptjs. - Real-Time 1:1 Messaging
Instant WebSocket messaging with Socket.IO. - Global State Management
Lightweight state handling using Zustand. - RESTful API
Robust backend with Express & MongoDB (Mongoose). - Online/Offline User Indicators
See who’s available in real-time. - Live Typing Status
Know when someone is typing. - Responsive UI
Modern, mobile-friendly interface with React & Tailwind CSS. - Timestamps on Messages
Each message displays when it was sent. - Deployment Ready
Easily deployable to cloud platforms.
Server Directory Structure
Client Directory Structure
Frontend
- React.js (Vite)
- Zustand
- Axios
- Tailwind CSS
Backend
- Node.js
- Express.js
- Socket.IO
- MongoDB (Mongoose)
- JWT
- bcryptjs
-
Clone the repository
git clone https://github.com/AvatarN03/ChatRom.git -
Install dependencies
# Client cd client npm install # Server cd ../server npm install -
Configure Environment Variables
- Create a
.envfile in theserver/directory. - Use the template in
server/sample-env.txtfor required variables.
- Create a
-
Run the application
# Start backend cd server npm run dev # In a new terminal, start frontend cd ../client npm run dev
- Register or log in to start chatting.
- View online users and their statuses.
- Send and receive real-time messages and typing indicators.
- Enjoy a seamless chat experience across devices.
This project is licensed under the MIT License.
Prashanth Naidu
LinkedIn
Last updated: May 23, 2025