Live messaging • Online presence • Unread badges • Read receipts — no refresh needed.
Made by: Atiba Dar Instructor: Kamran Ahsan , University of Gujrat, Hayyatian Computing Society
Made by: Atiba Dar
Instructor: Kamran Ahsan — University of Gujrat, Hayyatian Computing Society
- 🔐 JWT auth (httpOnly cookie) — register, login, logout
- 🟢 Live online user count
- 💚 Real-time green "online" dot per user
- ⚡ Instant messaging via Socket.IO — no refresh needed
- 🗂️ Full chat history loaded from MongoDB
- 🔴 Unread message badges that clear on open
- ✓✓ Blue double-tick read receipts
- 📱 Fully responsive (mobile-friendly)
- ⌨️ Bonus: live "typing…" indicator
| Layer | Tech |
|---|---|
| Frontend | React (Vite) |
| Backend | Node.js + Express |
| Database | MongoDB + Mongoose |
| Real-time | Socket.IO |
| Auth | JWT in httpOnly cookie |
1. Clone the repo
git clone https://github.com/Atibayounus/chat-app-assignment.git
cd chat-app-assignment2. Setup the server
cd server
npm install
cp .env.example .env # fill in MONGO_URI, JWT_SECRET
npm run dev3. Setup the client (in a new terminal)
cd client
npm install
cp .env.example .env
npm run dev4. Open the app http://localhost:5173
Open it in two browser windows (e.g. normal + incognito) to test real-time chat between two users.
| Event | Direction | Payload | Purpose |
|---|---|---|---|
connection |
client → server (auto) | — | Marks user online via JWT cookie |
disconnect |
client → server (auto) | — | Removes user from online list |
online:count |
server → all | number |
Live online user count |
chat:history |
client → server | otherUserId |
Fetches full message history |
chat:send |
client → server | { to, text } |
Sends and saves a new message |
chat:message |
server → both | message |
Delivers message instantly |
chat:unread |
client → server | — | Gets unread count per user on load |
chat:read |
client → server | otherUserId |
Marks messages as read |
chat:unread:update |
server → one | { userId, count } |
Live badge update |
chat:read:ack |
server → sender | { by } |
Turns ticks blue on read |
chat:typing (bonus) |
client → server → client | { to } |
Live typing indicator |