This real-time chat application delivers a modern, seamless messaging experience. Packed with features like real-time communication, secure authentication, media sharing, and dynamic themes, it’s designed to provide both functionality and aesthetics.
🌟 Live Demo: Check it out here
- Powered by Socket.IO,, ensuring instant message delivery between users.
- Efficient handling of user connections and disconnections.
io.on("connection", (socket) => {
console.log("A user connected", socket.id);
io.emit("getOnlineUsers", Object.keys(userSocketMap));
socket.on("disconnect", () => {
console.log("A user disconnected", socket.id);
delete userSocketMap[userId];
io.emit("getOnlineUsers", Object.keys(userSocketMap));
});
- Password hashing with bcrypt ensures data safety.
- JWT (JSON Web Tokens) for secure session management.
import jwt from "jsonwebtoken";
export const generateToken = (userId, res) => {
const token = jwt.sign({ userId }, process.env.JWT_SECRET, {
expiresIn: "7d",
});
res.cookie("jwt", token, {
maxAge: 7 * 24 * 60 * 60 * 1000, //Millisecond
httpOnly: true, //prevent XSS attacks croos-site scripting attacks
sameSite: "strict", // CSRF attacks cross-site request forgery attacks
secure: process.env.NODE_ENV !== "development",
});
return token;
};
- Supports 26 customizable themes using Tailwind CSS and DaisyUI.
- Fully responsive UI for desktops, tablets, and mobile devices.
- Built with Tailwind CSS and DaisyUI, the application is fully responsive, providing a smooth experience across all devices, from desktops to mobile phones.
<div
data-theme={theme}
className="h-screen container mx-auto px-4 pt-20 max-w-5xl"
>
<div className="space-y-6">
<div className="flex flex-col gap-1">
<h2 className="text-lg font-semibold">Theme</h2>
<p className="text-sm text-base-content/70">
Choose a theme for your chat interface
</p>
</div>
</div>
- Upload and share images/files seamlessly through Cloudinary integration.
cloudinary.config({
cloud_name: process.env.CLOUDINARY_CLOUD_NAME,
api_key: process.env.CLOUDINARY_API_KEY,
api_secret: process.env.CLOUDINARY_API_SECRET,
});
- React with JSX for UI development.
- Tailwind CSS and DaisyUI for styling and themes
- Node.js with Express for the server.
- MongoDB for database management.
- Socket.IO for real-time messaging
- bcrypt for password hashing
- JWT for authentication
- Cloudinary for media storage
- dotenv for environment configuration
- cookie-parser for handling cookies
- CORS for managing cross-origin requests
MONGODB_URI=...
PORT=5001
JWT_SECRET=...
CLOUDINARY_CLOUD_NAME=...
CLOUDINARY_API_KEY=...
CLOUDINARY_API_SECRET=...
NODE_ENV=development
📁 Project-Directory/
├── 📁 frontend/ # Front-end application
│ ├── 📁 public/ # Public folder for static assets
│ │ ├── avatar.png # default profile picture
│ │ └── vite.png
│ │
│ ├── 📁 src/ # Source files for React app
│ │ ├── 📁 components/ # Reusable UI components
│ │ │ ├── AuthImagePattern.jsx
│ │ │ ├── ChatContainer.jsx
│ │ │ ├── ChatHeader.jsx
│ │ │ ├── MessageInput.jsx
│ │ │ ├── Navbar.jsx
│ │ │ ├── NoChatSelected.jsx
│ │ │ ├── Sidebar.jsx
│ │ │ └── 📁 skeletons/ # Placeholder skeleton components
│ │ │ ├── MessageSkeleton.jsx
│ │ │ └── SidebarSkeleton.jsx
| | |
│ │ ├── 📁 constant/ # Context for global state management
│ │ │ └── index.js
| | |
│ │ ├── 📁 lib/ # Api calls
│ │ │ ├── axios.js
│ │ │ └── utils.js
| | |
│ │ ├── 📁 pages/ # Page-level components
│ │ │ ├── Homepage.jsx
│ │ │ ├── LoginPage.jsx
│ │ │ ├── SettingsPage.jsx
│ │ │ └── ProfilePage.jsx
| | |
│ │ ├── 📁 store/ # State Managment Files
│ │ │ ├── useAuthStore.js
│ │ │ ├── useChatStore.js
│ │ │ └── useThemeStore.js
| | |
│ │ ├── App.js # Main app component
│ │ ├── main.jsx # Entry point for React app
│ │ └── index.css # CSS or Tailwind configuration files
| |
| ├── favicon-32x32.png # App icon
| ├── Readme.md # Installed md file
| ├── index.html # Main HTML file
| ├── package-lock.json # Detailed description of dependencies and core materials
│ ├── eslint.config.js.json # ESLint configuration
│ ├── postcss.config.js # PostCSS configuration
│ ├── tailwind.config.js # Tailwind CSS configuration
│ ├── vite.config.js # Vite configuration
│ └── package.json # Dependencies for front-end
|
| ├── 📁 backend/ # Back-end application
| ├── 📂 src/ # Source folder for the backend
| │ ├── 📂 controllers/ # Business logic for routes
| │ │ ├── authController.js # Authentication-related logic
| │ │ └── messageController.js # Message-related logic
| | |
| │ ├── 📂 lib/ # Configuration files
| │ │ ├── db.js # MongoDB connection
| │ │ ├── cloudinary.js # Cloudinary configuration
| │ │ ├── socket.js # Socket configuration
| │ │ └── utils.js
| | |
| │ ├── 📂 middleware/ # Custom middleware (e.g., authentication)
| │ │ └── authMiddelware.js # Error handling middleware
| | |
| │ ├── 📂 models/ # Mongoose schemas
| │ │ ├── usersmodel.js # User schema
| │ │ └── messagemodel.js # Message schema
| | |
| │ ├── 📂 routes/ # API routes
| │ │ ├── authRoutes.js # Auth-related routes
| │ │ └── messageRoutes.js # Message-related routes
| | |
| │ ├── 📂 seeds/ # Seeds as a test users
| │ │ └── user.seeds.js # list of test users
| |
| │ ├── 📂 utils/ # Utility functions
| │ │ ├── generateToken.js # JWT token generator
| │ │ └── validateInputs.js # Input validation helpers
| │ └── index.js # Main server file
| ├── package.json # Dependencies for back-end
| ├── package-lock.json # Lock file for dependencies
| └──.env # Environment variables
├── .gitignore # Files and directories to ignore in Git
├── README.md # Project documentation
└── package.json # Dependencies for the entire project
| Endpoint | Method | Description | Authentication |
|---|---|---|---|
/api/auth/signup |
POST | Registers a new user | No |
/api/auth/login |
POST | Logs in a user | No |
/api/auth/logout |
POST | Logs out the user | Yes (JWT) |
/api/auth/check |
GET | Checks if the user is authenticated | Yes (JWT) |
/api/users |
GET | Fetches all users for the sidebar | Yes (JWT) |
/api/messages/:id |
GET | Fetches all messages between the current user and another user | Yes (JWT) |
/api/messages/send/:id |
POST | Sends a new message to a specific user | Yes (JWT) |
/api/upload/image |
POST | Uploads an image via Cloudinary | Yes (JWT) |
/api/profile/update-profile |
PUT | Updates user profile information | Yes (JWT) |
| Feature | Description | Dependencies |
|---|---|---|
| Authentication | Handles user login, registration, and logout | Axios, JWT cookies |
| User Management | Fetches and displays the list of all users | Axios, Socket.IO |
| Real-Time Messaging | Enables chat functionality between users | Socket.IO for WebSocket comm |
| Media Sharing | Allows users to upload and share files/images | Axios, Cloudinary API |
| Theme Switching | Lets users toggle between 26 themes | DaisyUI |
- Node.js must be installed.
// Initialize package.json
npm init -y
// Install required dependencies
npm install express socket.io mongoose bcrypt jsonwebtoken cors cookie-parser dotenv multer cloudinary multer-storage-cloudinary
-
User Authentication: Users register or log in securely using hashed passwords and JWT.
-
Real-Time Communication: Messages are exchanged instantly using Socket.IO.
-
Database Storage: MongoDB stores user data, messages, and media links.
-
Dynamic Themes: Users can switch between 26 available themes.
-
Responsive UI: Tailored for desktops and mobile devices with responsive design.
npm run build
npm run start
-
AI-Based Message Filtering: Detect and block spam messages in real time.
-
End-to-End Encryption: Improve privacy and data security.
-
Voice & Video Calling: Add support for multimedia communication.