Screenshot of rchat

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