Khat: Building a Full-Stack Real-Time Chat Application with the MERN Stack

A project by Aryan Rastogi

Introduction

Messaging apps look simple from the outside — a text box, a send button, a chat bubble. But underneath, they demand real-time communication, secure authentication, media handling, and a database that can keep up with constant updates. I built Khat, a full-stack real-time chat application, to get hands-on with exactly these challenges using the MERN stack (MongoDB, Express.js, React, Node.js).

The goal wasn't just to make messages appear on a screen — it was to build something production-ready: secure login, instant delivery, media sharing, and a UI people would actually enjoy using.

Live Demo: khat-app.onrender.com

Source Code: github.com/aryanvisualize/Khat-App

Why I Built This

Most chat app tutorials stop at "messages appear on the screen." I wanted to go further and solve the problems real chat products deal with:

How do you keep a connection live instead of refreshing the page?
How do you know who's online right now?
How do you let users share images and videos without your server buckling under file uploads?
How do you make authentication secure without writing your own auth system from scratch?

Khat was my answer to all four.

Key Features

💬 Real-time one-to-one messaging — powered by Socket.io for instant delivery
🔐 Secure authentication — handled via Clerk, with protected routes and middleware
🟢 Online presence indicator — see who's active in real time
📩 Recent conversations sidebar — quick access to ongoing chats
🔍 Instant user search
🖼️ Image & video sharing — uploaded and served through ImageKit's CDN
🌙 Light & dark mode, plus 11 color themes and 13 chat wallpapers
🔊 Optional keyboard sound effects
📱 Fully responsive design across devices
⚛️ Global state management with Zustand
📡 Automatic user sync via Clerk webhooks

Tech Stack

Frontend

React · Vite · Tailwind CSS · HeroUI · Zustand · Axios · Socket.io Client · React Router DOM · Lucide React

Backend

Node.js · Express.js · MongoDB · Mongoose · Socket.io · Multer · dotenv

Third-Party Services

Clerk — authentication and user management
ImageKit — media storage and CDN delivery
MongoDB Atlas — cloud database hosting
Render — deployment

System Architecture

Khat follows a clean, decoupled client-server structure:

khat-app/

│

├── frontend/ → React + Vite client

│ ├── src/

│ └── public/

│

├── backend/ → Express REST API + Socket.io server

│ ├── src/

│ │ ├── controllers/

│ │ ├── middleware/

│ │ ├── models/

│ │ ├── routes/

│ │ ├── lib/

│ │ └── server.js

│

└── README.md

The frontend handles UI rendering and state (via Zustand), while the backend exposes a REST API for data operations and runs a Socket.io server for real-time events. Clerk sits in front of both, verifying identity before any protected route or socket connection is allowed through.

How It Works

1. Authentication

Users sign up and log in through Clerk, which manages sessions and issues secure tokens. A webhook automatically syncs new Clerk users into the MongoDB database, so there's no manual user-creation step on the backend — signing up on the frontend is enough to create a fully synced profile.

2. Real-Time Messaging

Once authenticated, the client opens a Socket.io connection. Messages sent by one user are pushed instantly to the recipient without polling or refreshing, and the server tracks which users are currently online to power the presence indicator.

3. Media Sharing

When a user attaches an image or video, Multer handles the file on the backend before it's uploaded to ImageKit. ImageKit then serves the media through its CDN, keeping load times fast regardless of file size.

4. Personalization

State like the selected theme, wallpaper, and sound preferences is managed client-side with Zustand, giving the UI a responsive, native-app feel without unnecessary re-renders.

Challenges I Faced

Keeping Socket.io state in sync with REST data — messages needed to update instantly via sockets while still persisting correctly through the REST API and MongoDB, without duplicating or dropping messages.
Handling media uploads efficiently — routing files through Multer and then to ImageKit required careful error handling so failed uploads didn't break the chat experience.
Designing for both light and dark themes across 11 color variants — this meant building the UI with theme tokens from the start rather than hardcoding colors.

What I Learned

Building Khat pushed me beyond typical CRUD app development into real-time systems design. I got practical experience with:

1. Structuring a scalable MERN backend with clean separation of controllers, middleware, and routes
2. Integrating third-party auth (Clerk) instead of reinventing security-critical systems
3. Working with WebSockets for live, bidirectional communication
4. Managing cloud media storage and CDN delivery with ImageKit
5. Deploying a full-stack app end-to-end using Docker and Render