A modern, feature-rich WhatsApp-like chat application built with Next.js, featuring AI chat integration, real-time messaging, video calling, and a beautiful, responsive UI.

• Next.js 15 (App Router) + React 19
• TypeScript for type safety
• Tailwind CSS 3 for styling
• shadcn + Radix UI for accessible components
• Lucide React for beautiful icons

• Convex for real-time backend and database
• Real-time Queries for live updates
• File Storage for media uploads
• User Authentication with Clerk integration

• WebRTC for peer-to-peer video calls
• ZegoCloud API for scalable video infrastructure
• Real-time messaging with Convex
• Live user presence and typing indicators

• OpenAI GPT-4 for intelligent chat responses
• Multi-modal AI understanding (text, images, videos)
• Context-aware conversations with memory
• Smart message processing and routing

• Yarn package manager
• Vitest + Testing Library for testing
• ESLint + prettier for code quality
• Docker for containerization

This project follows a modern, scalable architecture with clear separation of concerns, real-time capabilities, AI integration, and video calling infrastructure.

┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
│   Frontend      │    │   Backend       │    │   External      │
│   (Next.js)     │◄──►│   (Convex)      │◄──►│   Services      │
│                 │    │                 │    │                 │
│ • React 19      │    │ • Real-time DB  │    │ • Clerk Auth    │
│ • TypeScript    │    │ • File Storage  │    │ • OpenAI API    │
│ • Tailwind CSS  │    │ • Webhooks      │    │ • ZegoCloud     │
│ • PWA Support   │    │ • HTTP Routes   │    │ • WebRTC       │
└─────────────────┘    └─────────────────┘    └─────────────────┘

src/
├── app/                          # Next.js App Router
│   ├── api/                     # API Routes
│   │   ├── video-proxy/         # Video CORS proxy
│   │   └── zego-cloud/          # ZegoCloud integration
│   ├── globals.css              # Global styles
│   ├── layout.tsx               # Root layout
│   ├── page.tsx                 # Home page
│   ├── sign-in/                 # Authentication pages
│   └── video-call/              # Video calling interface
├── components/                   # Reusable UI components
│   ├── home/                    # Main chat components
│   ├── providers/               # Context providers
│   │   ├── convex/              # Convex client provider
│   │   └── theme/               # Theme provider
│   ├── ui/                      # Base UI components
│   ├── video-call/              # Video calling components
│   └── types.ts                 # TypeScript definitions
├── hooks/                       # Custom React hooks
├── lib/                         # Utility functions
├── store/                       # State management
└── test/                        # Test configuration

src/components/home/
├── chat-bubble/                 # Chat message system
│   ├── components/              # Message components
│   │   ├── chat-bubble.tsx     # Main message component
│   │   ├── video-message.tsx   # Video handling with proxy
│   │   ├── image-message.tsx   # Image display
│   │   ├── text-message.tsx    # Text messages
│   │   ├── message-time.tsx    # Timestamps
│   │   ├── chat-avatar-action.tsx # Message actions
│   │   └── date-indicator.tsx  # Date separators
│   ├── api/                    # Message utilities
│   │   ├── message-utils.ts    # Formatting & styling
│   │   └── video-utils.ts      # Video processing
│   └── index.tsx               # Feature exports
├── conversation/                # Conversation management
├── message-input/               # Message composition
├── media-dropdown/              # File upload system
├── left-panel/                  # Navigation sidebar
├── right-panel/                 # Chat interface
├── message-container/            # Message display area
├── user-list-dialog/            # User management
├── group-members-dialog/        # Group administration
└── index.tsx                    # Main exports

src/components/video-call/
├── api/
│   └── zegoc-cloud-assistant.ts # ZegoCloud integration
└── components/
    └── video-ui-kit.tsx        # Video calling interface

// Core entities
users: {
  _id: Id<"users">
  tokenIdentifier: string
  name: string
  email: string
  image: string
  isOnline: boolean
  lastSeen: number
}

conversations: {
  _id: Id<"conversations">
  name: string
  participants: Id<"users">[]
  isGroup: boolean
  admin?: Id<"users">
  lastMessage?: Id<"messages">
  createdAt: number
}

messages: {
  _id: Id<"messages">
  conversationId: Id<"conversations">
  sender: Id<"users">
  content: string
  messageType: "text" | "image" | "video"
  _creationTime: number
}

• Live Queries: Automatic UI updates when data changes
• Mutations: Server-side data modifications with validation
• Actions: Complex operations with external API calls
• Webhooks: Integration with Clerk authentication
• File Storage: Secure media file handling

convex/http.ts
├── /clerk                      # Clerk webhook handler
│   ├── user.created           # User registration
│   ├── user.updated           # Profile updates
│   ├── session.created        # User login
│   └── session.ended          # User logout
└── /video-proxy               # Video CORS proxy

// Video calling infrastructure
src/components/video-call/
├── api/
│   └── zegoc-cloud-assistant.ts # ZegoCloud API integration
└── components/
    └── video-ui-kit.tsx        # Video calling interface

// Key features:
- Peer-to-peer video calls
- Group video conferencing
- Screen sharing capabilities
- High-quality video streaming
- Cross-platform compatibility

• Real-time Communication: Low-latency video/audio
• Peer-to-Peer: Direct user connections
• Fallback Support: ZegoCloud infrastructure backup
• Quality Optimization: Adaptive bitrate and resolution

// Chat Store (Zustand)
useConversationStore: {
  selectedConversation: Conversation | null
  setSelectedConversation: (conv: Conversation) => void
  // ... other state and actions
}

// Theme Store
useThemeStore: {
  theme: "light" | "dark" | "system"
  setTheme: (theme: Theme) => void
}

• Convex Queries: Real-time data subscriptions
• Optimistic Updates: Immediate UI feedback
• Conflict Resolution: Automatic merge strategies
• Offline Support: Local-first architecture

User Input → Message Input → Convex Mutation → Database Update →
Real-time Query → UI Update → Other Users Receive

File Upload → Convex Storage → Generate URL → Store Reference →
Message Creation → Real-time Delivery → Proxy Loading (if needed)

User Message → AI Processing → OpenAI API → Response Generation →
Message Creation → Real-time Delivery → Context Preservation

Call Initiation → ZegoCloud Setup → WebRTC Connection →
Peer Connection → Video/Audio Stream → Real-time Communication

• Clerk Integration: Secure user authentication
• JWT Tokens: Stateless authentication
• Role-based Access: User permissions and admin controls
• Session Management: Secure session handling

• Input Validation: Server-side validation
• SQL Injection Protection: Parameterized queries
• XSS Prevention: Content sanitization
• CORS Management: Controlled cross-origin access

• Code Splitting: Lazy-loaded components
• Image Optimization: Next.js image optimization
• Bundle Analysis: Webpack bundle optimization
• PWA Support: Offline capabilities

• Real-time Queries: Efficient data subscriptions
• Indexing: Optimized database queries
• Caching: Strategic data caching
• CDN Integration: Global content delivery

• Feature-based Structure: Logical component grouping
• API Separation: Clear separation of concerns
• Type Safety: Full TypeScript coverage
• Testing Strategy: Comprehensive test coverage

• Multi-stage Docker: Optimized container builds
• CI/CD Pipeline: Automated testing and deployment
• Environment Management: Configurable deployments

• Clerk: Authentication and user management
• OpenAI: AI chat capabilities
• Convex: Backend-as-a-Service
• ZegoCloud: Video calling infrastructure
• Vercel: Hosting and deployment (optional)

• RESTful Endpoints: Standard HTTP methods
• WebSocket Support: Real-time communication (convex)
• Webhook Integration: Event-driven architecture (convex)

• Node.js 22+
• Yarn package manager
• Convex account (for backend)
• Clerk account (for authentication)
• ZegoCloud account (for video calls)
• OpenAI API key (for AI features)

1. Clone the repository

   git clone <your-repo-url>
   cd whatsapp-clone

2. Install dependencies

   yarn install

3. Set up environment variables

   cp .env.example .env.local
   # Fill in your Convex, Clerk, ZegoCloud, and OpenAI credentials

4. Start development server

   yarn dev

5. Visit http://localhost:3000

1. Click on a user or group from the left panel
2. Type your message in the input field
3. Send text, images, or videos
4. Use AI chat by selecting ChatGPT from the conversation list
5. Send message to chatgpt by starting the text message with @gpt your-message

1. Start a Call: Click the camera icon in any conversation
2. Group Calls: Invite multiple participants for group video chats
3. Screen Sharing: Share your screen during calls
4. Quality Control: Adjust video/audio settings in real-time

• Chat with AI: Start conversations with ChatGPT
• Smart Responses: Get intelligent, context-aware replies
• Media Understanding: AI can process and respond to images/videos
• Conversation Memory: AI remembers conversation context

• Create Groups: Start group conversations
• Add Members: Invite users to groups
• Admin Controls: Manage group settings and members
• Group Chat: Collaborate with multiple users

Run the test suite:

# Run tests once
yarn test

# Run tests in watch mode
yarn test:watch

# Run tests with coverage
yarn test:coverage

yarn build
yarn start

docker build -t whatsapp-clone .
docker run -p 3000:3000 whatsapp-clone

# Convex Configuration
NEXT_PUBLIC_CONVEX_URL=your_convex_url

# Clerk Authentication
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_key
CLERK_SECRET_KEY=your_clerk_secret

# ZegoCloud Video Calling
ZEGOCLOUD_APP_ID=your_zegocloud_app_id
ZEGOCLOUD_SERVER_SECRET=your_zegocloud_secret

# AI Integration
OPENAI_API_KEY=your_openai_key

• yarn dev - Start development server
• yarn build - Build for production
• yarn start - Start production server
• yarn lint - Run ESLint
• yarn test - Run unit tests
• yarn ci - Full CI pipeline (lint, test, build)

• ESLint: Code linting and formatting
• TypeScript: Static type checking
• Prettier: Code formatting
• Husky: Git hooks for quality checks
• CodeRabbit: AI-powered code review and suggestions
  • Automatic PR Reviews: AI analyzes code for performance, errors, and maintainability
  • Code Quality Insights: Identifies potential issues and suggests improvements
  • Test Coverage Analysis: Ensures comprehensive testing coverage
  • Performance Optimization: Suggests performance improvements
  • Security Scanning: Detects potential security vulnerabilities

• Instant message delivery
• Live typing indicators
• Real-time user presence
• Live conversation updates

• High-quality video calls with WebRTC
• Group video conferencing support
• Screen sharing capabilities
• Cross-platform compatibility
• ZegoCloud infrastructure for scalability

• ChatGPT integration
• Intelligent responses
• Context awareness
• Multi-modal understanding

• Responsive design
• Dark/light themes
• Smooth animations
• Professional styling

• Optimized video loading
• CORS proxy support
• Offline capabilities
• Progressive Web App

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

This project is licensed under the MIT License.

For support and questions:

• Create an issue in the repository
• Check the documentation
• Review the component README files

Built with ❤️ using Next.js, React, and modern web technologies