A minimal, real-time 1-on-1 messaging web application. Designed with a focus on speed, functional aesthetics, and real-time data synchronization.
- Framework: Next.js 16 (App Router) & React 19
- Language: TypeScript
- Backend & Database: Convex (Real-time WebSocket subscriptions)
- Authentication: Clerk (with custom JWT integration)
- Styling: Tailwind CSS v4 & DaisyUI
- Utilities:
date-fns(Timestamp formatting)
- Secure Authentication: User signup and login handled via Clerk, with automatic profile synchronization to the Convex database.
- User Discovery & Previews: Real-time client-side filtering to search for other registered users. The sidebar dynamically displays the most recent message and its timestamp for every conversation.
- Live Messaging: Instantaneous 1-on-1 chat routing utilizing Convex real-time subscriptions.
- Real-Time Presence (Heartbeat): A background interval pings the database every 30 seconds, providing a live green status indicator for online users.
- Ephemeral Typing Indicators: Text inputs trigger a database patch that displays a pulsing typing indicator to the recipient, which automatically garbage-collects after 2 seconds of inactivity.
- Read Receipts & Unread Badges: Incoming messages are flagged as unread, generating a notification badge in the sidebar that instantly clears when the conversation is brought into focus.
- Soft Message Deletion: Users can revoke messages they have sent. The database record is retained for integrity (
isDeleted: true), while the UI dynamically replaces the payload with a redaction notice. - Smart Auto-Scroll: Chat intelligently scrolls to the bottom on new messages, or displays a floating action button if the user is reading history.
- Responsive Layout: A fluid dual-pane interface on desktop that collapses into a focused, navigable stack on mobile devices.
- Graceful Handling: Strict loading states (DaisyUI skeletons/spinners) and structural empty states to prevent layout shifts and application crashes during data hydration.