Chat App - Live Link - Demo Link - Blog Post

A Chatting Web Application similar to WhatsApp where users can share messages, images, videos, and any other files with a single (or) multiple recipients and make calls (Audio/Video) with P2P WebRTC Connection.

Features

• Unique Chat room for every pair of users. (End-to-End)
• Unique Chat room for a selected set of users. (Groups)
• Sharing Image, Video, and any other File.
• Realtime Messaging with Status Indicators:
  • Waiting -
  • Sent -
  • Seen -
• One-to-One Audio/Video Calling (Peer-to-Peer WebRTC)
• User Online/Offline Status Indicator:
  • 🟢 - Online
  • NA - Offline
• Last-Updated-Time and Last-Message on every Chat Opening Bar.
• Usage of Queue Data Structure to Synchronize Messages and avoid Race Condition.
• Ordering the Chats (Groups and Profiles) based on Last-Updated-Time.
• New-unseen-message Indicator. (Notification)
• Responsive Design - Split Pages View for Large (and) Single Page View for Small Screen Sizes.

Tech Stack Used

• ReactJS Framework
• RecoilJS - For Global State Management
• TypeScript - For Custom Types
• Firestore DB (and) Firestore Storage
• TailwindCSS
• WebRTC - For P2P Audio/Video Calling
• Heroicons

Pages / Views

1. Welcome Screen

2. Personal Chat Screen

3. Group Chat Screen

4. Add-Group Screen

5. Video Call Screens

6. Audio Call Screens

7. Mobile View Chat Screen

8. Mobile View Chats List Screen

9. Mobile View Voice Call