A Modern Real-Time Chat Application
Experience seamless real-time communication with beautiful glassmorphism design and powerful features.
- MODERN GLASSMORPHISM UI - Beautiful modern design with backdrop blur effects
- REAL-TIME MESSAGING - Instant message delivery with Socket.io
- INTERACTIVE PARTICLES - Mouse-responsive particle background system
- TYPING INDICATORS - See when others are typing in real-time
- SMART NOTIFICATIONS - Desktop notifications and visual alerts
- RESPONSIVE DESIGN - Perfect experience on all devices
- ENHANCED INPUT - Auto-resize textarea with character counter
- CLEAR CHAT - Easy chat management with clear functionality
- SECURE MESSAGING - XSS protection and input validation
- USER PRESENCE - Live user tracking and room statistics
- Instant message delivery with Socket.io
- Real-time typing indicators showing who's typing
- Desktop notifications with sound alerts
- Live user presence and activity tracking
- Connection status monitoring with auto-reconnect
- Stunning glassmorphism design with backdrop blur
- Dynamic gradient backgrounds
- Interactive particle systems that respond to mouse movement
- Smooth animations and micro-interactions
- Fully responsive design for all devices
- Modern color palette with CSS custom properties
- Character counter with visual feedback (500 char limit)
- Auto-resize textarea for better UX
- XSS protection with HTML sanitization
- Duplicate message prevention
- Input validation and rate limiting
- Message timestamps with user avatars
- Clear chat functionality
- Scroll to bottom with smart detection
- Real-time user list updates
- Room statistics and user counts
- Auto-scroll on new messages
- Message state management
- Desktop notifications with custom messages
- Visual notification system with animations
- Browser tab title updates
- In-app notification badges
- Notification permission handling
- XSS protection with HTML sanitization
- Input validation and sanitization
- Rate limiting and spam prevention
- Memory leak prevention
- Connection error handling and recovery
- Automatic reconnection with status updates
- Node.js 16.0 or higher
- npm 8.0 or higher
- Modern browser (Chrome, Firefox, Safari, Edge)
-
Clone the Repository
git clone https://github.com/Khushal-Me/ChatConnect.git cd ChatConnect -
Install Dependencies
npm install
-
Launch the Application
npm start
-
Open Your Browser
http://localhost:3000
- Node.js - Runtime environment
- Express.js - Web framework
- Socket.io - Real-time bidirectional communication
- Moment.js - Date/time manipulation
- Vanilla JavaScript ES6+ - Core functionality
- CSS3 - Glassmorphism design and animations
- HTML5 - Semantic markup
- Particles.js - Interactive particle background system
- Web APIs - Notifications and browser features
- Font Awesome 6 - Icon library
- Bootstrap Icons - Additional icon set
- Google Fonts - Typography (Inter, JetBrains Mono)
- CSS Custom Properties - Dynamic theming
- CSS Animations - Smooth transitions and effects
- Nodemon - Development server with auto-restart
- ESLint - Code quality (configured)
- Prettier - Code formatting (configured)
- Git - Version control
ChatConnect/
├── public/ # Client-side files
│ ├── css/
│ │ └── style.css # Glassmorphism styles and themes
│ ├── js/
│ │ ├── script.js # Core chat functionality
│ │ ├── chat-enhancements.js # Enhanced chat features
│ │ ├── chat-enhancements-simple.js # Fallback enhancements
│ │ ├── landing.js # Landing page interactions
│ │ └── particle-system.js # Interactive particle effects
│ ├── img/
│ │ └── Chatappicon.png # App icon
│ ├── sound/
│ │ └── notification-sound.mp3 # Audio alerts
│ ├── index.html # Landing page
│ ├── chat.html # Main chat interface
│ └── about.html # About page
├── utils/ # Server utilities
│ ├── messages.js # Message formatting
│ └── users.js # User management with statistics
├── server.js # Express server with Socket.io
├── package.json # Dependencies and scripts
├── LICENSE # MIT License
└── README.md # This file
- Enter Username - Choose a unique username (2-20 characters)
- Select Room - Pick from available themed rooms or join a custom one
- Start Chatting - Begin messaging immediately with real-time delivery
- Type Messages - Use the input area with auto-resize functionality
- See Typing - Watch real-time typing indicators from other users
- Clear Chat - Use the clear button to remove all messages
- Scroll Control - Auto-scroll or use the scroll-to-bottom button
- Desktop Alerts - Get notified when receiving messages (with permission)
- Visual Indicators - See connection status and user count updates
- Sound Alerts - Audio notifications for new messages
We welcome contributions! Here's how you can help:
- 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
npm start # Start the production server
npm run dev # Start development server with auto-restart
npm run lint # Run ESLint for code quality
npm run format # Format code with Prettier
npm run clean # Clean install dependencies- Chrome 80+
- Firefox 75+
- Safari 13+
- Edge 80+
This project is licensed under the MIT License - see the LICENSE file for details.
Khushal Mehta
- GitHub: @Khushal-Me
- Socket.io team for real-time communication
- Particles.js for beautiful particle effects
- Font Awesome for amazing icons
- The open-source community for inspiration and support
Star this repo if you find it helpful!
Made with love by Khushal Mehta