
2024 · Solo
rchat
A full-stack real-time chat app — presence, unread counts, and image sharing over Socket.IO.
A MERN + Socket.IO chat app where the Express API and the Socket.IO server share one HTTP server instance. On connect, the client passes its userId as a handshake query param; the server keeps an in-memory userSocketMap (userId → socketId) and broadcasts getOnlineUsers to every connected client whenever someone joins or leaves. REST handles persistence (auth, message history) while sending a message also emits a newMessage event straight to the recipient's socket for instant delivery — the JWT lives in localStorage and rides along as a token header on every request.
Features
- JWT-based authentication — email/password signup and login
- Real-time messaging — instant text and image delivery over Socket.IO
- Live online/offline presence, broadcast to every connected client
- Per-conversation unread badges in the sidebar, cleared on open
- Image sharing in chat — uploaded to Cloudinary and sent as message attachments
- Profile management — display name, bio, and profile picture (also via Cloudinary)
- User search — filter the conversation list by name
- Responsive UI built with Tailwind CSS, down to mobile widths
Tech stack
Client
- React 19
- Vite 7
- React Router 7
- Tailwind CSS 4
- Axios
- Socket.IO client
Server
- Node.js
- Express 5
- MongoDB + Mongoose 8
- Socket.IO
- JWT
- bcryptjs
- Cloudinary