ChatSphere – Realtime Messaging App
Full-stack realtime messaging inspired by WhatsApp — auth, sockets, receipts, typing, unread counts, Cloudinary media, responsive UI.
Built a production-style WhatsApp-inspired chat application using React, Node.js, Express, MongoDB, and Socket.IO. The app supports secure JWT-based auth, realtime messaging, online presence, typing indicators, unread badges, message status ticks (sent/delivered/seen), media attachments via Cloudinary, and a responsive UX across desktop and mobile. I focused on both product polish and backend reliability: fixed protected-route/session-refresh behavior, optimized chat and sidebar loading with skeleton screens, improved login/logout transition UX, hardened server auth middleware, and resolved common deployment issues including environment-based API config and CORS allowlists.
Overview
Built a production-style WhatsApp-inspired chat application using React, Node.js, Express, MongoDB, and Socket.IO. The app supports secure JWT-based auth, realtime messaging, online presence, typing indicators, unread badges, message status ticks (sent/delivered/seen), media attachments via Cloudinary, and a responsive UX across desktop and mobile. I focused on both product polish and backend reliability: fixed protected-route/session-refresh behavior, optimized chat and sidebar loading with skeleton screens, improved login/logout transition UX, hardened server auth middleware, and resolved common deployment issues including environment-based API config and CORS allowlists.
Key Features
- Secure login and register with JWT auth
- Protected routes with persistent session on refresh
- Realtime 1-to-1 messaging with Socket.IO
- Message states: sent, delivered, and seen (single/double and blue ticks)
Project Info
Category
Full Stack, Web Apps
Duration
Personal project — Full Stack ownership
Role
Full Stack Developer
Team Size
Solo project
Repository
View on GitHub