💬 Zing – Real-Time Chat Application

Zing is a full-stack real-time chat application built with modern technologies. It supports live messaging, typing indicators, online presence tracking, authentication, and multi-platform clients (mobile + web).

🚀 Features

🔐 Authentication

• Secure authentication using Clerk
• JWT-based token verification on backend
• Protected socket connections
• Automatic user sync with database

💬 Real-Time Messaging

• Real-time chat powered by Socket.IO
• Instant message delivery
• Chat room system (chat:{chatId})
• Personal user rooms (user:{userId})
• Message broadcasting to participants
• Live message updates in chat list

🟢 Online Presence System

• In-memory online users tracking using Map<string, string>
• Real-time online/offline events
• Green dot presence indicator
• Automatic disconnect handling
• Full online user list sync

✍️ Typing Indicators

• Real-time typing events
• Typing visibility inside chat
• Typing sync in chat list preview

👥 Chat Management

• Get or create chat dynamically
• Prevent duplicate chats
• Last message tracking
• Last message timestamp
• Participant-based access control

🔎 User Search

• Client-side user search
• Filter by name or email
• Instant search results
• Clean modal-based new chat UI

📱 Cross Platform

• Mobile app built with Expo
• Navigation via Expo Router
• Web support via Vite
• Responsive UI design

💻 Frontend	🖥 Backend
React	Node.js
React Native	Express
Expo	Socket.IO
Zustand	MongoDB
TanStack Query	Mongoose
Socket.IO Client	Clerk

🧠 Architecture Overview

🔹 Real-Time Flow

• User logs in via Clerk
• Token is sent during socket handshake
• Backend verifies token
• User joins:
  • Personal room (user:{id})
  • Chat rooms (chat:{chatId})
• Messages are:
  • Stored in MongoDB
• Emitted to chat room
• Emitted to user rooms

🔹 Online System

• On connection:
  • User ID added to onlineUsers Map
  • Full online list broadcasted
• On disconnect:
  • User removed from Map
  • Updated list broadcasted

📸 UI Highlights

• Clean modern interface
• Online green dot indicator
• Smooth modal transitions
• Scroll-optimized chat view
• Typing status animation

ScreenShots

🏁 Conclusion

Zing is a scalable real-time messaging application built with modern full-stack technologies. It demonstrates:

• Real-time system design
• Authentication integration
• State management
• Cross-platform development
• Backend + socket architecture