A beautiful, privacy-focused real-time chat application inspired by Instagram's design language. Built with vanilla JavaScript and modern web technologies.
- End-to-end encrypted real-time messaging
- No persistent data storage - session-based only
- Secure WebSocket connections (WSS protocol)
- Private room-based conversations
- Instagram-inspired design with gradient color scheme
- Fully responsive layout for all devices
- Smooth animations and micro-interactions
- Glassmorphism effects and modern shadows
- Dark mode support (automatic system preference detection)
- Lightweight (~18 files total, no heavy frameworks)
- Progressive Web App (PWA) support
- Service Worker for offline capabilities
- Optimized assets and fast loading times
- Mobile-first design approach
- Touch-friendly interfaces
- Installable web application
- Works on all modern browsers
- Modern web browser (Chrome, Firefox, Safari, Edge)
- Python 3.x (for local development server)
- Clone the repository:
git clone https://github.com/ismailkkaaa/whisper-chat.git
cd whisper-chat- Start the development server:
python3 -m http.server 8080- Open your browser:
Navigate to
http://localhost:8080
- Enter your name and room code on the landing page
- Click "Start Chatting" to join the room
- Begin chatting in real-time with others in the same room
- HTML5 - Semantic markup structure
- CSS3 - Modern styling with variables and animations
- Vanilla JavaScript - ES6+ features without frameworks
- WebSocket API - Real-time bidirectional communication
- Service Worker - Offline caching and PWA functionality
- Web App Manifest - Installable application support
- CSS Custom Properties - Dynamic theming capabilities
- Flexbox/Grid - Modern layout systems
- Backend Endpoint:
wss://whisper-chat.albasith399.workers.dev - Protocol: Custom JSON messaging protocol
- Features:
- Real-time message broadcasting
- Typing indicators
- User presence detection
- Room-based isolation
whisper-chat/
├── index.html # Landing page
├── chat.html # Main chat interface
├── manifest.json # PWA configuration
├── service-worker.js # Client-side caching
├── css/
│ ├── base.css # Global styles and variables
│ ├── landing.css # Landing page styling
│ └── chat.css # Chat interface styling
├── js/
│ ├── landing.js # Landing page functionality
│ └── chat.js # Chat client logic
├── public/
│ ├── icons/ # PWA app icons
│ ├── favicon.ico # Website favicon
│ └── apple-touch-icon.png
└── README.md # This file
--ig-primary: #405de6 /* Primary brand color */
--ig-secondary: #5851db /* Secondary accent */
--ig-accent: #833ab4 /* Gradient accent */
--ig-background: #fafafa /* Page background */
--ig-card-bg: #ffffff /* Card backgrounds */
--ig-text: #262626 /* Primary text */
--ig-text-secondary: #8e8e8e /* Secondary text */
--ig-border: #dbdbdb /* Border colors */- Font Family:
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto - Font Sizes: Responsive scaling from 14px to 24px
- Line Height: 1.5 for optimal readability
- Border Radius: 4px, 8px, 12px, 16px, 18px, 24px
- Shadows: Light, medium, and heavy elevation levels
- Transitions: 0.2s, 0.3s, 0.5s easing durations
# Start development server
python3 -m http.server 8080
# Or with Node.js
npx serve .
# Build and test
npm run build # (if package.json exists)
npm run test # (if test scripts exist)- CSS: BEM methodology for class naming
- JavaScript: ES6+ features with modern best practices
- HTML: Semantic markup with proper accessibility attributes
- Performance: Optimized assets and minimal dependencies
- Chrome 60+
- Firefox 55+
- Safari 12+
- Edge 79+
The application can be installed as a standalone app:
- Visit the site in a supported browser
- Look for the install prompt or use browser menu
- Click "Install" to add to home screen
- Static assets cached via Service Worker
- Basic functionality available offline
- Automatic reconnection when online
- No server-side data persistence
- Client-side session storage only
- Messages are not stored permanently
- Room-based message isolation
- Secure WebSocket connections (WSS)
- No sensitive data in URLs
- Proper input sanitization
- CSRF protection considerations
- 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
- Follow existing code style and conventions
- Write clean, documented code
- Test changes thoroughly
- Update documentation as needed
WebSocket Connection Failed:
- Check internet connectivity
- Verify WebSocket endpoint availability
- Clear browser cache and try again
Messages Not Sending:
- Ensure you're connected to a room
- Check browser console for errors
- Verify WebSocket connection status
UI Display Issues:
- Try refreshing the page
- Clear browser cache
- Check browser compatibility
// Enable debugging in console
localStorage.debug = 'whisper:*';
// Check WebSocket status
console.log('WebSocket readyState:', socket.readyState);
// Monitor network activity
// Use browser developer tools Network tab- First Contentful Paint: < 1.5 seconds
- Time to Interactive: < 2.5 seconds
- Bundle Size: < 100KB total
- Asset compression and minification
- Lazy loading for non-critical resources
- Efficient CSS and JavaScript
- Service Worker caching strategies
- Static hosting: Netlify, Vercel, GitHub Pages
- Traditional servers: Apache, Nginx
- Cloud platforms: AWS, Google Cloud, Azure
# WebSocket endpoint configuration
WEBSOCKET_URL=wss://your-websocket-endpoint.com
# Analytics (optional)
GA_TRACKING_ID=UA-XXXXXXXX-XThis project is licensed under the MIT License - see the LICENSE file for details.
- Inspired by modern messaging applications
- Instagram design language influence
- Open source community contributions
- Cloudflare Workers for WebSocket infrastructure
We're constantly working to improve Whisper Chat! Here are the exciting features planned for future releases:
- Dark/Light Theme Toggle - Manual theme switching capability
- Custom Emoji Picker - Integrated emoji support in messages
- User Avatars - Profile picture support (Gravatar/custom uploads)
- Enhanced Animations - Advanced micro-interactions and transitions
- File Sharing - Image and document sharing capabilities
- Voice Messages - Audio recording and playback features
- Message Search - Chat history search functionality
- Message Editing/Deleting - User message management
- User Mentions - @username tagging system
- End-to-End Encryption - Enhanced client-side encryption
- Push Notifications - Browser notifications for new messages
- Enhanced Offline Support - Improved offline message queuing
- Rate Limiting - Advanced spam prevention mechanisms
- Native Mobile Apps - iOS and Android applications
- Haptic Feedback - Tactile response integration
- Biometric Authentication - Face/Fingerprint login options
- User Profiles - Detailed profile pages with status/bio
- Friend System - Add/block contacts functionality
- Group Chats - Multi-user rooms with admin controls
- Presence Indicators - Online/away/busy status system
- Message Translation - Real-time language translation
- Scheduled Messages - Time-based message sending
- Chat Bots - Automated responses and moderation
- Custom Themes - User-defined color schemes
- Two-Factor Authentication - Enhanced account security
- Message Expiration - Self-destructing messages
- Privacy Controls - Granular permission settings
Have a feature suggestion? We'd love to hear from you! Open an issue or submit a pull request.
For support, email support@whisper-chat.app or join our Discord community.
⭐ Star this repository if you find it useful!
Made with ❤️ by the Whisper Chat team