A modern, real-time chat application built with Next.js, Convex, and Clerk authentication. Connect with friends, create groups, and enjoy AI-powered conversations.
- Instant Messaging with Rich Media Support
- File Uploads (images, videos, PDFs, audio)
- Image Preview with full-screen view
- Video Playback with controls
- File Download capabilities
- Drag & Drop file uploads
- Clerk Authentication - Secure sign-in/sign-up with multiple providers
- Role-based Access - Protected routes and conversation membership validation
- Session Management - Persistent authentication across browser sessions
- Instant Messaging - Real-time message delivery with Convex
- Group Conversations - Create and manage group chats
- Direct Messages - One-on-one conversations
- Message Status - Delivery and read receipts
- Reply System - Reply to specific messages with context
- AI Reply Assistant - Generate AI-powered responses to messages
- Smart Suggestions - Context-aware reply suggestions
- Google Gemini Integration - Advanced AI capabilities for natural conversations
- Animated Gemini Icon - Beautiful animated SVG icon with gradient effects and smooth animations
- In-Message AI Access - AI suggestion button directly in message interface for instant assistance
- Dark/Light Theme - System-aware theme switching
- Progressive Web App - Install as native app experience
- Responsive Design - Optimized for mobile and desktop
- Beautiful Animations - Smooth transitions and micro-interactions
- Emoji Support - Rich emoji picker and reactions
- WhatsApp-Style Mobile Layout - Optimized mobile experience with proper space utilization
- Edge-to-Edge Design - Full-width mobile interface without wasted space
- Compact Message Layout - Efficient use of screen real estate on mobile devices
- UploadThing Integration - Secure file uploads and sharing
- Image Preview - In-chat image previews
- File Management - Organized file handling
- Conversation Search - Find conversations and members quickly
- Smart Filtering - Real-time search results
- Keyboard Shortcuts - Efficient navigation
- Enhanced Info Dialog - Shows meaningful read status instead of technical IDs
- AI Reply Integration - Easy access to AI-powered responses with animated Gemini icon
- Clean Interface - Focused on essential messaging features
- In-Message AI Button - Direct access to AI suggestions from message interface
- WhatsApp-Style Layout - Optimized mobile layout similar to WhatsApp/Instagram
- Full Space Utilization - Messages now use 85% width on mobile vs 75% on desktop
- Compact Design - Reduced gaps and padding for better mobile experience
- Edge-to-Edge Interface - Removed unnecessary borders and margins on mobile
- Touch-Optimized Controls - Smaller avatars and buttons for better mobile interaction
- Responsive Typography - Appropriate text sizing for mobile screens
- Gemini Icon Integration - Beautiful animated SVG icon with gradient effects
- Multi-Color Animation - Google-style gradient animations with pulse effects
- Improved AI Access - AI suggestion button positioned alongside message actions
- Enhanced Visual Feedback - Smooth hover effects and scaling animations
- Mobile-First AI UX - Always visible on mobile, hover-visible on desktop
- TypeScript Optimization - Improved type safety and error handling
- Component Cleanup - Removed unused features and code
- Error Resolution - Fixed reply functionality and validation errors
- Mobile Optimization - Better performance on mobile devices
- Build Optimization - Successful compilation with zero errors
- Intuitive Message Actions - Reply, Copy, Share, Info, AI Reply, Delete
- Real-time Status Updates - Live delivery and read receipts
- Better Error Handling - User-friendly error messages and feedback
- Smooth Reply System - Fixed reply validation and message sending
- Friend System with request/accept flow
- User Discovery by email address
- Friend Management (add, remove, block)
- Group Creation with friend selection
- Conversation Management (leave, delete groups)
- Fully Responsive Design optimized for mobile and desktop
- Dark/Light Theme with system preference detection
- PWA Support for native app-like experience
- Offline Capability with service worker
- Toast Notifications for user feedback
- Smooth Scrolling conversation lists with proper mobile navigation handling
- Mobile-First Layout with touch-friendly interfaces
- File Uploads (images, videos, PDFs, audio)
- Image Preview with full-screen view
- Video Playback with controls
- File Download capabilities
- Drag & Drop file uploads
- Voice Calls with LiveKit integration
- Video Calls with screen sharing support
- Call Room management
- Real-time Audio/Video streaming
- AI Chat Assistant powered by Google Gemini
- Natural Language Processing for intelligent conversations
- Real-time AI Responses with typing indicators
- Mobile-Optimized AI Interface - Perfect layout on all devices
- Seamless Integration with existing chat interface
- Auto-scroll for smooth conversation flow
- Loading Indicators for AI thinking states
- Error Handling with user-friendly messages
- Added Google Gemini-powered AI Assistant accessible from the sidebar
- Bot icon in navigation for easy access to AI chat
- Mobile-responsive AI interface with proper spacing and layout
- Real-time AI responses with typing indicators and error handling
- Member search bar above conversations list
- Real-time filtering as you type usernames or group names
- Keyboard shortcuts (Ctrl+K/Cmd+K) for quick search access
- Search results counter showing number of matches
- Mobile-optimized search with touch-friendly interface
- Fixed mobile navigation overlap issues
- Proper spacing for AI chat on mobile devices
- Smooth scrolling conversation lists
- Touch-optimized search and chat interfaces
- Responsive layout improvements across all components
- Error handling improvements for AI chat
- Loading states for better user feedback
- Auto-scroll functionality for chat messages
- Type-safe search implementation with robust error handling
- Landing Page Redesign with stunning hero section and feature showcase
- Custom Sign-In Page with rotating testimonials and interactive elements
- Custom Sign-Up Page with animated stats and quick setup steps
- Enhanced CSS with mobile-first responsive design
- Gradient Themes and smooth animations throughout
- Accessibility Improvements with proper focus states and keyboard navigation
- Performance Optimizations including will-change properties and smooth transitions
- Next.js 14.2.3 - React framework with App Router
- TypeScript - Type-safe development
- Tailwind CSS - Utility-first styling
- Radix UI - Accessible component primitives
- Lucide React - Beautiful icon library
- Sonner - Toast notifications
- Convex - Real-time backend with type safety
- Clerk - Authentication and user management
- UploadThing - File upload handling
- Google Generative AI - Gemini model integration
- Vercel Analytics - Performance monitoring
- React Hook Form - Form state management
- Zod - Schema validation
- ESLint - Code linting
- Next PWA - Progressive Web App features
Connect is a full-featured PWA that can be installed on any device:
- Offline Capability - Limited functionality when offline
- App-like Experience - Native app feel in the browser
- Push Notifications - Stay updated with new messages
- Fast Loading - Optimized performance and caching
- ✅ Real-time Messaging - Instant message delivery
- ✅ Reply to Messages - Context-aware reply system
- ✅ Message Info - Read receipts and delivery status
- ✅ Copy & Share - Easy message sharing
- ✅ Delete Messages - Remove unwanted messages
- ✅ AI-Powered Replies - Generate smart responses with animated Gemini icon
- ✅ Mobile-Optimized Layout - WhatsApp-style mobile message interface
- ✅ Streamlined Actions - Clean, focused message action menu
- ✅ Create Groups - Start group conversations
- ✅ Direct Messages - One-on-one chats
- ✅ Search Conversations - Find chats quickly
- ✅ Member Management - Add/remove group members
- ✅ Theme Switching - Dark/light mode
- ✅ Responsive Design - Works on all devices
- ✅ Keyboard Shortcuts - Efficient navigation
- ✅ Loading States - Smooth user feedback
- ✅ Mobile-First Layout - Optimized for mobile devices with WhatsApp-like interface
- ✅ Animated Icons - Beautiful Gemini AI icon with gradient animations
- ✅ Touch-Friendly Interface - Optimized buttons and controls for mobile interaction
- Node.js 18+
- npm or yarn package manager
- Clerk account for authentication
- Convex account for backend
- UploadThing account for file uploads
-
Clone the repository
git clone <repository-url> cd connect-app
-
Install dependencies
npm install
-
Environment Setup Create
.env.localfile:# Clerk Authentication NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key CLERK_SECRET_KEY=your_clerk_secret_key # Convex Backend NEXT_PUBLIC_CONVEX_URL=your_convex_url # UploadThing UPLOADTHING_SECRET=your_uploadthing_secret UPLOADTHING_APP_ID=your_uploadthing_app_id # Google AI GOOGLE_GENERATIVE_AI_API_KEY=your_gemini_api_key
-
Setup Convex
npx convex dev
-
Run Development Server
npm run dev
-
Open Application Navigate to
http://localhost:3000
connect-app/
├── app/ # Next.js App Router
│ ├── (root)/ # Main application routes
│ │ ├── conversations/ # Chat interface
│ │ ├── friends/ # Friends management
│ │ └── ai-chat/ # AI chat interface
│ ├── api/ # API routes
│ ├── sign-in/ # Authentication pages
│ └── sign-up/
├── components/ # Reusable components
│ ├── shared/ # Shared components
│ │ ├── conversation/ # Chat-related components
│ │ ├── item-list/ # List components
│ │ └── sidebar/ # Navigation components
│ └── ui/ # UI primitives
├── convex/ # Backend schema and functions
├── hooks/ # Custom React hooks
├── lib/ # Utilities and helpers
├── providers/ # Context providers
├── public/ # Static assets
└── types/ # TypeScript type definitions
The app supports automatic theme switching based on system preference. Customize themes in:
app/globals.css- Global stylestailwind.config.ts- Tailwind configurationcomponents/ui/theme/- Theme components
Customize AI responses by modifying:
app/api/ai-chat/route.ts- AI endpoint logic- Message prompt templates and response handling
Define your data models in convex/schema.ts:
- Users and authentication
- Conversations and messages
- File uploads and metadata
Configure authentication flows in convex/auth.config.ts
- Lighthouse Score: 95+ across all metrics
- First Contentful Paint: < 1.5s
- Time to Interactive: < 3s
- Bundle Size: Optimized with Next.js automatic splitting
- Authentication: Secure Clerk integration
- Data Validation: Zod schema validation
- File Uploads: Secure UploadThing handling
- API Protection: Route protection and validation
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is private and proprietary. All rights reserved.
For support and questions:
- Check the documentation in
/ReadME/folder - Review implementation guides
- Contact the development team
- ✅ Message Actions Optimized - Streamlined interface with essential features
- ✅ AI Reply Integration - Smart response generation with animated Gemini icon
- ✅ Enhanced Info Dialog - Meaningful read status and timing
- ✅ Mobile Layout Revolution - WhatsApp/Instagram-style mobile experience
- ✅ Advanced AI Features - Beautiful animated SVG icons with gradient effects
- ✅ Performance Improvements - Faster loading and better UX
- ✅ Mobile Space Optimization - Improved space utilization for better mobile experience
- ✅ Bug Fixes - Resolved reply validation and error handling
- ✅ Code Cleanup - Removed unused features and optimized codebase
- ✅ Responsive Design Enhancement - Edge-to-edge mobile interface design
Built with ❤️ using Next.js, Convex, and modern web technologies