{"id":21117730,"url":"https://github.com/ashwani2529/chatverse","last_synced_at":"2026-04-28T00:32:45.430Z","repository":{"id":183078390,"uuid":"669571338","full_name":"Ashwani2529/ChatVerse","owner":"Ashwani2529","description":"ChatVerse: Real-time group chatting web app with React.js \u0026 Socket.io. Sleek UI, lightning-fast response time. Connect, share, and express with ease. Join now and experience the magic of live chat!","archived":false,"fork":false,"pushed_at":"2025-08-02T05:47:24.000Z","size":9830,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-02T08:22:55.696Z","etag":null,"topics":["chat-application","chatroom","open-source","socket-io"],"latest_commit_sha":null,"homepage":"https://chatverxe.netlify.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Ashwani2529.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2023-07-22T17:55:30.000Z","updated_at":"2025-08-02T05:47:27.000Z","dependencies_parsed_at":null,"dependency_job_id":"7f745f20-6904-4819-b917-4732c26a0ad4","html_url":"https://github.com/Ashwani2529/ChatVerse","commit_stats":null,"previous_names":["ashwani2529/chatverse"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Ashwani2529/ChatVerse","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ashwani2529%2FChatVerse","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ashwani2529%2FChatVerse/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ashwani2529%2FChatVerse/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ashwani2529%2FChatVerse/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Ashwani2529","download_url":"https://codeload.github.com/Ashwani2529/ChatVerse/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ashwani2529%2FChatVerse/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32361477,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-27T20:07:02.737Z","status":"ssl_error","status_checked_at":"2026-04-27T20:07:00.910Z","response_time":128,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chat-application","chatroom","open-source","socket-io"],"created_at":"2024-11-20T02:46:59.728Z","updated_at":"2026-04-28T00:32:45.424Z","avatar_url":"https://github.com/Ashwani2529.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ChatVerse - Real-Time Chat Application\n\nWelcome to ChatVerse, a modern real-time chat application built with React.js and Socket.IO. Experience seamless group chatting with advanced features and a beautiful, responsive interface.\n\n## ✨ Features\n\n### Backend Features\n\n#### 🔧 **Core Infrastructure**\n- **Environment Configuration**: Flexible environment variable handling with fallbacks\n- **CORS Support**: Comprehensive CORS configuration for both Express and Socket.IO\n- **Error Handling**: Robust error handling with global exception management\n- **User Management**: Efficient user storage using Map for optimal performance\n- **Memory Management**: Automatic cleanup of user data on disconnect\n\n#### 🛡️ **Security \u0026 Validation**\n- **Input Validation**: Server-side validation for usernames and messages\n- **Sanitization**: XSS protection through input sanitization\n- **Rate Limiting**: Message length limits (500 characters) and username constraints\n- **Type Safety**: Strict type checking for all inputs\n\n#### 📊 **Monitoring \u0026 Logging**\n- **Health Check Endpoint**: Status endpoint with connection metrics\n- **Comprehensive Logging**: Detailed logging for connections, disconnections, and errors\n- **Connection Tracking**: Real-time user count and connection monitoring\n\n### Frontend Features\n\n#### 🎨 **User Experience**\n- **Connection Status**: Real-time connection indicator (🟢 Connected / 🔴 Disconnected)\n- **Error Handling**: User-friendly error messages and connection alerts\n- **Loading States**: Visual feedback during message sending and connection establishment\n- **Input Validation**: Client-side validation with real-time feedback\n- **Responsive Design**: Mobile-friendly interface with responsive breakpoints\n\n#### ⚡ **Performance \u0026 Reliability**\n- **Socket Management**: Proper socket cleanup and reconnection handling\n- **State Management**: React state and sessionStorage for data persistence\n- **Memory Optimization**: Optimized React hooks and socket listeners\n- **Efficient Rendering**: Optimized message rendering with proper keys and timestamps\n\n#### ♿ **Accessibility**\n- **ARIA Labels**: Comprehensive screen reader support\n- **Semantic HTML**: Proper semantic structure for better navigation\n- **Keyboard Navigation**: Full keyboard accessibility support\n- **Focus Management**: Proper focus indicators and management\n\n#### 🎯 **Advanced Features**\n- **Message Timestamps**: Display send time for all messages\n- **System Messages**: Styled system notifications for user join/leave events\n- **Message Types**: Distinguished styling for user messages vs system messages\n- **Auto-reconnection**: Automatic reconnection with user state restoration\n- **Session Persistence**: Username persistence across page refreshes\n\n## 🛠️ Technical Specifications\n\n### Code Quality\n- **React Best Practices**: Proper use of hooks, useCallback, useRef\n- **Error Boundaries**: Comprehensive error handling throughout the application\n- **Type Safety**: Robust prop validation and type checking\n- **Code Organization**: Clean component structure and separation of concerns\n\n### Performance Optimizations\n- **Efficient Re-renders**: Optimized React rendering with proper dependencies\n- **Socket Optimization**: Advanced socket connection management\n- **CSS Architecture**: Modern styling with responsive design principles\n- **Bundle Optimization**: Clean imports and optimized code structure\n\n## 📱 Installation \u0026 Setup\n\n### Prerequisites\n- Node.js (v14 or higher)\n- npm or yarn\n\n### Backend Setup\n```bash\ncd backend\nnpm install\n```\n\nCreate a `.env` file in the backend directory:\n```env\nPORT=4501\nFRONTEND_URL=https://chatverxe.netlify.app\n```\n\nStart the backend server:\n```bash\nnpm start\n```\n\n### Frontend Setup\n```bash\ncd frontend\nnpm install\n```\n\nCreate a `.env` file in the frontend directory:\n```env\nREACT_APP_BACKEND_URL=https://chatverse-xl8a.onrender.com\n```\n\nStart the frontend application:\n```bash\nnpm start\n```\n\n## 🌐 Live Demo\n\n**Frontend**: [https://chatverxe.netlify.app](https://chatverxe.netlify.app)\n\n## 🌐 Deployment\n\n### Backend Deployment (Heroku/Railway/Render)\n1. Set environment variables:\n   - `PORT` (will be set automatically by hosting provider)\n   - `FRONTEND_URL=https://chatverxe.netlify.app`\n\n### Frontend Deployment (Netlify/Vercel)\n1. Set environment variables:\n   - `REACT_APP_BACKEND_URL` (your backend domain)\n\n## 🔧 Configuration Options\n\n### Environment Variables\n\n#### Backend\n- `PORT`: Server port (default: 4501)\n- `FRONTEND_URL`: Frontend URL for CORS (default: https://chatverxe.netlify.app)\n- `TOXICITY_API_URL`: Optional toxicity detection API endpoint\n\n#### Frontend\n- `REACT_APP_BACKEND_URL`: Backend API URL (default: https://chatverse-xl8a.onrender.com)\n\n## 🚦 Application Features\n\n### Core Chat Features\n- ✅ Real-time messaging with Socket.IO\n- ✅ User join/leave notifications\n- ✅ Connection status indicators\n- ✅ Message timestamps\n- ✅ Auto-reconnection on connection loss\n- ✅ Mobile-responsive design\n\n### Advanced Features\n- ✅ Input validation and sanitization\n- ✅ Error handling and user feedback\n- ✅ Accessibility compliance\n- ✅ System message differentiation\n- ✅ Session persistence\n- ✅ Connection health monitoring\n\n### Future Features (Ready for Implementation)\n- 🔄 Toxicity detection integration\n- 🔄 Message history persistence\n- 🔄 User avatars\n- 🔄 Private messaging\n- 🔄 Room-based chat\n\n## 🧪 Testing\n\nRun tests for both frontend and backend:\n\n```bash\n# Backend\ncd backend\nnpm test\n\n# Frontend\ncd frontend\nnpm test\n```\n\n## 📚 API Documentation\n\n### Socket Events\n\n#### Client to Server\n- `joined`: User joins the chat\n- `message`: Send a message\n- `disconnect`: User leaves the chat\n\n#### Server to Client\n- `welcome`: Welcome message for new users\n- `userJoined`: Notification when user joins\n- `leave`: Notification when user leaves\n- `sendMessage`: Broadcast message to all users\n- `error`: Error notifications\n\n## 🤝 Contributing\n\n1. Fork the repository\n2. Create a feature branch\n3. Make your changes with proper testing\n4. Submit a pull request with detailed description\n\n## 📄 License\n\nThis project is open source and available under the [MIT License](LICENSE).\n\n## 🆘 Support\n\nIf you encounter any issues:\n\n1. Check the browser console for error messages\n2. Verify environment variables are set correctly\n3. Ensure both backend and frontend are running\n4. Check network connectivity for real-time features\n\n## 🎯 About ChatVerse\n\nChatVerse is a powerful real-time chat application that combines the best of modern web technologies. Built with React.js for a dynamic frontend experience and Socket.IO for real-time communication, it offers a seamless and engaging chat environment.\n\nThe application features comprehensive error handling, input validation, accessibility compliance, and mobile responsiveness, making it suitable for users across all devices and platforms. Whether you're connecting with friends, family, or colleagues, ChatVerse provides a reliable and feature-rich chatting experience.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fashwani2529%2Fchatverse","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fashwani2529%2Fchatverse","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fashwani2529%2Fchatverse/lists"}