A modern, hyper-responsive, and beautifully animated real-time chat application.
Pranverse is a fully-featured, production-ready real-time chat application. Designed with a focus on stunning UI/UX, fluid animations, and absolute reliability. It supports direct messaging, group chats, typing indicators, read receipts, and much more, all wrapped in a sleek Light and Dark mode interface.
- ⚡ Real-Time Messaging: Instant message delivery powered by Convex backend.
- 👥 Group Chats: Create groups, add multiple members, and chat seamlessly.
- 👀 Read Receipts: WhatsApp-style double-tick read receipts to know exactly when your messages are seen.
- 💬 Typing Indicators: See who is typing in real-time with beautiful animated bouncing dots.
- ❤️ Live Reactions: React to messages with emojis. Strictly one reaction per user.
- 🔔 Global Notifications: In-app toast notifications, browser push notifications, and satisfying custom audio beeps for new messages.
- 🔐 Secure Authentication: Handled seamlessly by Clerk (Google, Email, etc.) including profile picture management.
- 🎨 Premium UI/UX: Built with Tailwind CSS and Shadcn UI. Features glassmorphism, animated ambient background orbs, and pixel-perfect layouts.
- 📱 Fully Responsive: Flawless experience across desktop, tablet, and mobile devices (with dynamic sliding sidebars on mobile).
- 🌗 Dark / Light Mode: Total theme support with Next-Themes.
Pranverse leverages a modern, serverless architecture to ensure high performance and zero maintenance:
| Technology | Role | Description |
|---|---|---|
| Next.js 15 | Frontend Framework | React Server Components, App Router, optimized rendering. |
| Convex | Backend As A Service | Real-time database, automatic reactive state, serverless functions. |
| Clerk | Authentication | Comprehensive user management and secure authentication flows. |
| Tailwind CSS 4 | Styling | Utility-first CSS framework for rapid UI development. |
| Shadcn UI | Components | Beautifully designed, accessible, and customizable React components. |
📁 tars-chat/
├── 📁 convex/ # Convex Backend (Database schemas, Queries, Mutations)
│ ├── auth.config.ts # Clerk integration mapping
│ ├── schema.ts # Database Schema Definition
│ ├── users.ts # User Sync & Presence Logic
│ ├── conversations.ts # Conversation & Group Chat Logic
│ └── messages.ts # Messaging, Reactions, & Typing Indicators
├── 📁 src/
│ ├── 📁 app/ # Next.js 14 App Router
│ │ ├── 📁 chat/ # Main Chat UI Layout & Routing
│ │ ├── layout.tsx # Root layout (Providers, Notifications)
│ │ └── page.tsx # Landing / Sign-in Page
│ └── 📁 components/ # React Components
│ ├── ChatArea.tsx # Core Messaging Component
│ ├── Sidebar.tsx # Conversation List & User Search
│ ├── PushNotifications.tsx # Global Notification Listener
│ └── 📁 ui/ # Shadcn UI primitives
└── 📄 package.json # Dependencies
git clone https://github.com/Pranav-Harad/tars-chat.git
cd tars-chatnpm installCreate a .env.local file in the root directory and add your keys:
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_key
CLERK_SECRET_KEY=your_clerk_secret
# Convex Deployment
CONVEX_DEPLOYMENT=your_convex_deployment
NEXT_PUBLIC_CONVEX_URL=your_convex_urlYou need to run both the Next.js frontend and the Convex backend simultaneously:
Open Terminal 1 (Frontend):
npm run devOpen Terminal 2 (Backend):
npx convex devVisit http://localhost:3000 in your browser.
Made with ❤️ by Pranav
📧 Email: pranavharad64@gmail.com
🔗 LinkedIn: www.linkedin.com/in/pranav-harad-667070268