A real-time chat application built with the MERN stack, featuring one-on-one and group messaging with live updates.
Chatify is a full-stack messaging platform that enables users to communicate in real-time through both individual and group chats. The application provides a seamless chat experience with features like user search, typing indicators, instant message delivery, and group management capabilities.
- User Authentication: Secure registration and login with JWT-based authentication
- User Search: Find and connect with other users on the platform
- One-on-One Chat: Private messaging between two users
- Group Chat: Create and participate in group conversations
- Group Management: Add or remove users from groups, rename groups
- Real-Time Messaging: Instant message delivery using Socket.io
- Typing Indicators: See when other users are typing
- Profile Management: User profile with picture support
- Responsive Design: Mobile-friendly interface built with Chakra UI
┌─────────────────────────────────────────────────────────────┐
│ Client (React) │
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │
│ │ Auth │ │ Chat │ │ Group │ │
│ │ Pages │ │ Pages │ │ Pages │ │
│ └──────────────┘ └──────────────┘ └──────────────┘ │
│ │ │ │ │
│ └─────────────────┼─────────────────┘ │
│ │ │
│ ┌──────▼──────┐ │
│ │ Redux Store │ │
│ └──────┬──────┘ │
│ │ │
│ ┌──────▼──────┐ │
│ │ Socket.io │ │
│ │ Client │ │
│ └──────┬──────┘ │
└───────────────────────────┼──────────────────────────────────┘
│ HTTP/WebSocket
┌───────────────────────────▼──────────────────────────────────┐
│ Server (Express/Node) │
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │
│ │ Auth │ │ Chat │ │ Message │ │
│ │ Routes │ │ Routes │ │ Routes │ │
│ └──────┬───────┘ └──────┬───────┘ └──────┬───────┘ │
│ │ │ │ │
│ ┌──────▼───────┐ ┌──────▼───────┐ ┌──────▼───────┐ │
│ │ Auth │ │ Chat │ │ Message │ │
│ │ Controllers │ │ Controllers │ │ Controllers │ │
│ └──────┬───────┘ └──────┬───────┘ └──────┬───────┘ │
│ │ │ │ │
│ └─────────────────┼─────────────────┘ │
│ │ │
│ ┌──────▼──────┐ │
│ │ Mongoose │ │
│ │ Models │ │
│ └──────┬──────┘ │
│ │ │
│ ┌──────▼──────┐ │
│ │ MongoDB │ │
│ │ Atlas │ │
│ └─────────────┘ │
│ │
│ ┌──────┐ │
│ │Socket│ │
│ │ .io │ │
│ └──────┘ │
└─────────────────────────────────────────────────────────────┘
- React 18 - UI library
- Chakra UI - Component library for styling
- Redux Toolkit - State management
- React Router DOM v6 - Client-side routing
- Socket.io Client - Real-time communication
- Axios - HTTP client for API requests
- Framer Motion - Animation library
- React Icons - Icon library
- Node.js - JavaScript runtime
- Express.js - Web framework
- MongoDB - NoSQL database (hosted on MongoDB Atlas)
- Mongoose - ODM for MongoDB
- Socket.io - Real-time bidirectional communication
- JWT - Authentication tokens
- bcryptjs - Password hashing
- Helmet - Security headers
- express-mongo-sanitize - NoSQL injection protection
- xss-clean - XSS protection
- express-rate-limit - Rate limiting
- Morgan - HTTP request logger
- Node.js (v16.x or higher)
- npm or yarn
- MongoDB Atlas account (or local MongoDB installation)
-
Clone the repository
git clone https://github.com/ajith73/chatify-app.git cd chatify-app -
Install server dependencies
cd server npm install -
Install client dependencies
cd ../client npm install -
Set up environment variables
Create a
.envfile in theserverdirectory with the following variables:PORT=8000 MONGO_URL=mongodb+srv://username:password@cluster0.gukoo.mongodb.net/dbname?retryWrites=true&w=majority JWT_SECRET=your_secret_key_here JWT_LIFETIME=60 * 60 NODE_ENV=development
Replace the values with your actual MongoDB connection string and a secure JWT secret.
-
Start the development servers
Terminal 1 - Backend:
cd server npm startThe backend server will run on
http://localhost:8000Terminal 2 - Frontend:
cd client npm startThe frontend will run on
http://localhost:3000
-
Build the React app
cd client npm run build -
Deploy to hosting platform
- Backend: Deploy to Heroku, Railway, or any Node.js hosting
- Frontend: Deploy the
buildfolder to Netlify, Vercel, or serve statically - Database: Ensure MongoDB Atlas whitelist includes your deployment domain
-
Set production environment variables
NODE_ENV=production PORT=process.env.PORT MONGO_URL=your_production_mongodb_url JWT_SECRET=your_production_secret JWT_LIFETIME=60 * 60
http://localhost:8000/api/v1
POST /auth/register
Content-Type: application/json
{
"name": "John Doe",
"email": "john@example.com",
"password": "securepassword",
"pic": "base64_encoded_image_string"
}Response:
{
"token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
"user": {
"_id": "user_id",
"name": "John Doe",
"email": "john@example.com",
"pic": "image_url",
"createdAt": "2024-01-01T00:00:00.000Z"
}
}POST /auth/login
Content-Type: application/json
{
"email": "john@example.com",
"password": "securepassword"
}Response:
{
"token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
"user": {
"_id": "user_id",
"name": "John Doe",
"email": "john@example.com",
"pic": "image_url"
}
}GET /auth/users?search=john
Authorization: Bearer <jwt_token>Response:
[
{
"_id": "user_id",
"name": "John Doe",
"email": "john@example.com",
"pic": "image_url"
}
]POST /chat
Authorization: Bearer <jwt_token>
Content-Type: application/json
{
"userId": "other_user_id"
}Response:
{
"_id": "chat_id",
"users": [
{
"_id": "user_id_1",
"name": "John Doe",
"email": "john@example.com"
},
{
"_id": "user_id_2",
"name": "Jane Smith",
"email": "jane@example.com"
}
],
"isGroupChat": false,
"createdAt": "2024-01-01T00:00:00.000Z"
}GET /chat
Authorization: Bearer <jwt_token>Response:
[
{
"_id": "chat_id",
"users": [...],
"isGroupChat": false,
"latestMessage": {
"content": "Hello!",
"sender": {...},
"createdAt": "2024-01-01T00:00:00.000Z"
}
}
]POST /chat/createGroup
Authorization: Bearer <jwt_token>
Content-Type: application/json
{
"name": "Development Team",
"users": ["user_id_1", "user_id_2", "user_id_3"]
}PATCH /chat/renameGroup
Authorization: Bearer <jwt_token>
Content-Type: application/json
{
"chatId": "group_chat_id",
"chatName": "New Group Name"
}PATCH /chat/addUserToGroup
Authorization: Bearer <jwt_token>
Content-Type: application/json
{
"chatId": "group_chat_id",
"userId": "user_to_add_id"
}PATCH /chat/removeFromGroup
Authorization: Bearer <jwt_token>
Content-Type: application/json
{
"chatId": "group_chat_id",
"userId": "user_to_remove_id"
}POST /message
Authorization: Bearer <jwt_token>
Content-Type: application/json
{
"chatId": "chat_id",
"content": "Hello, how are you?"
}Response:
{
"_id": "message_id",
"sender": {
"_id": "user_id",
"name": "John Doe",
"pic": "image_url"
},
"content": "Hello, how are you?",
"chat": {
"_id": "chat_id",
"users": [...]
},
"createdAt": "2024-01-01T00:00:00.000Z"
}GET /message/:chatId
Authorization: Bearer <jwt_token>Response:
[
{
"_id": "message_id",
"sender": {...},
"content": "Hello!",
"chat": {...},
"createdAt": "2024-01-01T00:00:00.000Z"
}
]setup- Initialize socket connection with user datajoin-chat- Join a specific chat roomtyping- Emit typing indicatorstop-typing- Stop typing indicatornew-message- Send new message
connected- Confirmation of socket connectiontyping- Receive typing indicatorstop-typing- Receive stop typing indicatormessage-received- Receive new message in real-time
chatify-app/
├── client/
│ ├── public/
│ ├── src/
│ │ ├── components/ # Reusable UI components
│ │ ├── context/ # React context providers
│ │ ├── pages/ # Page components
│ │ ├── config/ # Configuration files
│ │ ├── utils/ # Utility functions
│ │ ├── App.js
│ │ └── index.js
│ └── package.json
├── server/
│ ├── controllers/ # Route controllers
│ ├── models/ # Mongoose models
│ ├── routes/ # API routes
│ ├── middleware/ # Custom middleware
│ ├── errors/ # Error handling
│ ├── db/ # Database connection
│ ├── server.js # Entry point
│ └── package.json
└── README.md