ChatNova
A real-time chat platform built with modern technologies featuring instant messaging, smooth infinite scrolling, and scalable backend architecture.
Features
Offline Push Notification
Real-time push notification using Firebase cloud Messaging(FCM)
Virtualized List Rendering
Efficient rendering of large message lists using virtualization for smooth performance.
Optimistic UI Updates
Messages appear instantly using React Query’s optimistic updates before server confirmation.
Media Sharing with Cloudinary
Upload and share images/Video with cloud storage integration for scalability and speed.
Typing Indicator & Online Presence
Event driven websocket updates with debounced typing signal and live presence traking
Private & Group Chat with Status
Supports one-to-one and group chats with message status indicators like sent, delivered, and seen with reaction and reply function
Tech Stack
Frontend
Backend
Database
Realtime & Performance
Cloud & Media
Security & Auth
Challenges & Solutions
🔴 Real-time Online User Status Sync Issue
Users appeared online/offline inconsistently due to multiple socket connections and refresh events.
Solution
Used Map-based socket tracking + emit only after stable connect/disconnect state.
🔴 Excessive Refetch on Every Chat Open
Chat data was being refetched on every chat open causing unnecessary API calls and UI flicker.
Solution
Fixed using React Query caching with proper query keys and staleTime to reuse existing data instead of refetching
🔴 Token Expiry Causing Forced Logout
Users were logged out immediately when access token expired.
Solution
Implemented refresh token flow for silent re-authentication without interrupting session.
🔴 Back Button Redirecting to Login on Mobile
On mobile back navigation, users were incorrectly redirected to login due to auth state mismatch.
Solution
Fixed using persistent JWT auth check with protected routes and synced global auth state (React Context/React Query).
🔴 Socket Disconnect Not Triggering Properly
Users remained online after tab close due to unstable disconnect events.
Solution
Added debounce (setTimeout) + proper cleanup of socket IDs in Map.
🔴 Slow Loading of Chatted Users List
Chatted users list API was slow due to inefficient queries and multiple database lookups on each request.
Solution
Optimized using MongoDB aggregation pipeline to reduce joins and fetch required data in a single query, significantly improving response time.
System Architecture
Frontend
React + Context API
Backend
Node.js + Express + JWT
Database
MongoDB + Mongoose
MongoDB Atlas
Users + Messages + Conversations
Message Flow
Frontend
Send + Optimistic UI
Backend
JWT + Express API
Database
MongoDB Atlas Save
Online
Socket.IO
Offline
FCM Push
UI Sync
React Query Update
Auth Flow
User
ChatNova
API Request
Access Token used
Backend
JWT + bycrpyt
401 Error
Access Token Expired
Refresh API
Send Refresh Token
New Access Token
Auto regenerated
Retry Request
Request succeeds
ChatNova
Api Succeed
Entity Relationship Design
ChatNova Demo
ChatNova Real-Time Chat App
Socket.IO • JWT Auth • MongoDB • React
ChatNova Screenshots
Real-time Chat UI
Socket powered messaging
Message Status
Message Status, Message Reactions
JWT Auth Flow
Secure login system
Group Chats
Multi-user conversations
Online Presence
Live User Tracking
Responsive UI
Mobile optimized design
Future Goals
⚡ Redis Scaling for Real-Time System
Integrating Redis Pub/Sub to scale Socket.IO across multiple servers, enabling seamless real-time messaging, presence sync, and low-latency communication even under high traffic load.
📞 Audio & Video Calling (WebRTC)
Implementing peer-to-peer audio and video calling using WebRTC with secure signaling via Socket.IO for low-latency one-to-one and group communication.
👥 Role-Based Group Management
Implementing role-based access control in group chats to support Admin, Moderator, and Member roles for better control and moderation.
🔐 End-to-End Message Encryption
Implementing asynchronous end-to-end encryption to ensure only sender and receiver can read messages, improving chat security.
🤖 AI-Powered Chat Suggestions
Integrating AI-based suggestion system to recommend smart replies, message completions, and contextual responses in real time.
🗑️ Message Deletion (Delete for Me & Everyone)
Adding advanced message deletion allowing users to remove messages locally or for all participants in a conversation.