Messenger Clone

Overview

A full-stack, real-time communication platform engineered with Next.js and TypeScript, replicating the core architecture and user experience of modern messaging applications. The platform enables low-latency 1-on-1 and group chats, media sharing, active status tracking, and instant read receipts.

Key Features

• Real-Time Messaging: Event-driven architecture powered by WebSockets (Pusher) for sub-second message delivery without polling.
• 1-on-1 & Group Chats: Dynamic conversation creation with multi-user participant management, custom group naming, and member controls.
• Read Receipts & Active State: Live visual indicators showing message delivery, unread counts, and participant read receipts in real time.
• Rich Media Sharing: Drag-and-drop media upload support integrated with Cloudinary for fast CDN image delivery and previews.
• Authentication & Profiles: Secure credential and OAuth authentication via NextAuth, complete with editable user profiles and avatars.
• Responsive Layout: Responsive dual-panel desktop view with collapsible mobile conversation drawers built using Tailwind CSS.

Tech Stack & Architecture

• Frontend: Next.js (App Router), TypeScript, Tailwind CSS, Headless UI
• Backend & Real-Time: Next.js Route Handlers / Server Actions, Pusher Channels (WebSockets)
• Database & ORM: MongoDB, Prisma ORM
• Auth & Cloud Services: NextAuth.js, Cloudinary API
• State & Data Fetching: React Hooks, Axios, Zustand

Technical Challenges & Solutions

1. Real-Time State Consistency Across Multi-User Sessions

• Challenge: Preventing UI race conditions, duplicate message rendering, and out-of-order delivery across active browser sessions.
• Solution: Structured distinct Pusher presence and private channels (conversation:[id] and user:[email]). Client-side state merges incoming WebSocket payloads with optimistic updates to deliver instant perceived performance while ensuring backend data integrity.

2. Scalable Read Receipt Propagation

• Challenge: Updating read status across multiple recipients in high-activity group conversations without triggering excessive database writes.
• Solution: Modeled message-level seenBy relation sets in Prisma, batching read-state updates when a user focuses the active thread and broadcasting single diff events to room participants.

Key Takeaways

Demonstrates hands-on proficiency in building reactive distributed UI systems, managing bidirectional real-time communication protocols, and handling relational schemas within document databases.