Experience the future of communication with ChatVerse — a modern, feature-rich chat application that combines real-time messaging, AI integration, location sharing, voice input, and beautiful animations into one seamless platform.
ChatVerse isn't just another chat application — it's a comprehensive communication platform built with modern technologies and user experience at its core. Whether you're chatting with friends, sharing your location, or using voice input, ChatVerse delivers a smooth, engaging experience.
- Real-Time First: Instant message delivery powered by Socket.IO
- User-Centric Design: Beautiful, intuitive interface with dark/light mode
- Modern Architecture: Built with React, Tailwind CSS, and cutting-edge libraries
- Privacy Focused: Secure authentication and data handling
- Responsive Everywhere: Seamless experience across all devices
- ⚡ Real-Time Messaging: Instant message delivery with Socket.IO
- 🎤 Voice Input: Speak your messages using Web Speech API
- 😊 Emoji Support: Express yourself with a rich emoji picker
- 📍 Location Sharing: Share your real-time location with interactive maps
- 👥 Multi-User Support: Chat with multiple users simultaneously
- 📱 Mobile-Responsive: Optimized mobile menu and touch interactions
- 🌓 Dark/Light Mode: Toggle between themes with persistent preferences
- 🎭 Animated UI: Smooth animations powered by Framer Motion
- 🎯 Custom Cursor: Interactive animated cursor for desktop users
- 🔔 Toast Notifications: Real-time feedback with React Hot Toast
- ⏰ Live Timestamps: Dynamic time display with Moment.js
- 💫 Floating Shapes: Beautiful animated background elements
- 🖼️ User Avatars: Auto-generated avatars for all participants
- 🔒 Private Routes: Protected chat rooms with authentication
- 👤 User Profiles: Personalized user identification
- 🛡️ Context-Based Auth: Secure authentication management
- 🎫 Session Persistence: Stay logged in across sessions
- 🎨 Modern UI: Clean, professional interface
- 📐 Responsive Layout: Adapts beautifully to any screen size
- 🔄 Loading States: Elegant loading animations
- 🎯 Intuitive Navigation: Easy-to-use navbar and footer
- ✨ Smooth Transitions: Polished animations throughout
- 🧠 AI Chat Assistant: Integrated ChatGPT/Claude assistant for smart conversations
- ✍️ Message Enhancer: AI-powered rewrite, summarize, and translate features
- 💡 Smart Replies: Context-aware quick reply suggestions
- 🎨 AI Image Generation: Generate images using DALL·E or Stable Diffusion
- 🗣️ AI Voice Assistant: Text-to-speech responses from AI
- 🛡️ AI Moderation: Automatic content moderation and safety features
- 🧵 Message Threads: Reply to specific messages with threading
- ❤️ Message Reactions: React with emojis to any message
- ✏️ Edit & Delete: Modify or remove your messages
- 📌 Pinned Messages: Pin important messages to the top
- ✅ Read Receipts: See who has read your messages
- 📎 File Sharing: Upload and share images, PDFs, and videos
- 🖼️ Custom Avatars: Upload or generate unique avatars
- 📝 User Bios: Add personal information and status
- 🎨 Theme Customizer: Create custom color schemes and gradients
- 🔊 Sound Themes: Choose from multiple notification sounds
- 💾 Preference Sync: Save settings across devices
- 📈 Chat Analytics: View message frequency and activity trends
- 👥 Active User Stats: Track the most active participants
- 😊 Sentiment Analysis: Analyze conversation mood over time
- 📊 Interactive Charts: Beautiful data visualizations
- 🌍 Real-Time Translation: Auto-translate messages to any language
- 🎙️ Voice Chat Rooms: Switch from text to voice seamlessly
- 🤝 Collaborative Mode: Shared whiteboards and documents
- 🔍 Semantic Search: AI-powered smart message search
- 🔐 End-to-End Encryption: Military-grade message security
- 📱 PWA Support: Install as a native app on any device
- 🔔 Push Notifications: Desktop and mobile notifications
- 🎮 Bot Integration: Add AI bots to any chat room
| Category | Technologies |
|---|---|
| Frontend | React 18, React Router, Framer Motion |
| Styling | Tailwind CSS, CSS3, Tailwind Merge |
| Real-Time | Socket.IO Client, WebSocket |
| UI Components | Lucide React, React Icons, React Avatar |
| Features | Emoji Picker, React Tilt, Animated Cursor |
| Notifications | React Hot Toast, React Toastify, SweetAlert2 |
| Utilities | Moment.js, QS, Mustache |
| File Handling | Multer |
| Development | Concurrently, React Scripts |
Ensure you have the following installed:
- Node.js (v14 or higher)
- npm or yarn
- Git
# 1. Clone the repository
git clone https://github.com/Kartikk-26/ChatVerse.git
# 2. Navigate to project directory
cd ChatVerse
# 3. Install dependencies
npm install
# 4. Configure environment (if needed)
# Create .env file and add necessary configurations
# 5. Start the development server
npm run devThis will start both the client and server concurrently.
# Start client only
npm start
# Start server only
npm run server
# Start both (recommended)
npm run dev
# Build for production
npm run build
# Deploy
# Check DEPLOYMENT.md for deployment instructionsOnce running, open your browser and navigate to:
- Local: http://localhost:3000
- Production: https://ai.kartik.sbs
ChatVerse/
├── public/ # Static files
├── server/ # Backend Socket.IO server
├── src/
│ ├── Components/ # React components
│ │ ├── ChatPage.jsx
│ │ ├── HomePage.jsx
│ │ ├── Navbar.jsx
│ │ ├── Footer.jsx
│ │ ├── MessageTemplate.jsx
│ │ ├── LocationTemplate.jsx
│ │ ├── MicroPhone.jsx
│ │ ├── MapEmbed.jsx
│ │ ├── FloatingShapes.jsx
│ │ ├── MobileMenu.jsx
│ │ ├── ShareBox.jsx
│ │ ├── Loader.jsx
│ │ └── PrivateRoute.jsx
│ ├── Context/ # React Context for state management
│ │ └── UserAuthContext.jsx
│ ├── App.js # Main application component
│ ├── index.js # Application entry point
│ └── index.css # Global styles
├── tailwind.config.js # Tailwind configuration
├── package.json # Project dependencies
└── README.md # You are here!
Users can send messages using voice input through the microphone component. Simply click the microphone icon and speak — your speech is converted to text instantly.
Share your current location with other users. The location is displayed on an interactive map embed, making it easy to coordinate meetups.
Toggle between dark and light themes. Your preference is automatically saved to local storage and persists across sessions.
Built on Socket.IO, all messages are delivered instantly to all connected users with minimal latency.
Every interaction is smooth and delightful, from page transitions to message animations, powered by Framer Motion.
We love contributions! ChatVerse is an open-source project, and we welcome improvements from the community.
- Fork the repository
- Create a feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
- Ensure your code follows the existing style
- Test your changes thoroughly
- Update documentation as needed
- Write clear commit messages
- Add comments for complex logic
- AI Chat Assistant
- Smart Replies
- Message Enhancement Tools
- AI Moderation
- Message Threads & Reactions
- File Sharing
- User Profiles
- Push Notifications
- Real-Time Translation
- Chat Analytics
- Voice Chat Rooms
- Semantic Search
- End-to-End Encryption
- PWA Support
- Collaborative Tools
- Bot Framework
Check our Issues page for known bugs and feature requests.
This project is open source and available under the MIT License.
Kartik Jain - Creator & Developer
- Socket.IO for real-time communication
- React Team for the amazing framework
- Tailwind CSS for utility-first styling
- Framer Motion for beautiful animations
- Open Source Community for inspiration and support
If you find ChatVerse useful, please consider giving it a star! It helps others discover the project.