A modern real-time messaging platform built with Next.js and TypeScript, featuring secure communication, file sharing, comprehensive chat management, and native WebRTC-powered audio/video calls.
- Features
- Demo
- Screenshots
- Routes
- Tech Stack
- System Requirements
- Installation
- Development
- Deployment
- Build
- WebRTC Implementation Details
- State Management
- Performance Optimization
- Security Measures
- Contributing
- License
- Support
- Chat Features
- Real-time messaging using Socket.IO
- Support for both private and group chats
- Real-time online status tracking for users
- Custom profile picture upload
- File sharing (images, videos, PDFs, documents)
- Interactive image viewer with pan and zoom functionality
- Encrypted messages and files with chunk-by-chunk decryption
- Audio/Video Calls
- Native WebRTC implementation for high-quality calls
- Support for both audio and video calls
- Custom STUN/TURN server implementation for reliable connectivity
- Maximum 4 participants per call room
- Auto-reconnection on network issues
- Join ongoing calls feature
- Missed call notifications
- Multiple authentication methods:
- Traditional email/password login with OTP verification
- OAuth integration (Google, Facebook, GitHub)
- Secure password reset functionality via email
- Runtime validation using Zod
- End-to-end message encryption
- Encrypted file storage and streaming
- Advanced admin controls
- User management (add/remove members)
- Admin promotion capabilities
- Shared media gallery in chat description
- Comprehensive media viewing section
- Four customizable color themes
- Intuitive settings panel
- Responsive design
- Persistent state management using Redux
- Seamless call management and notifications
Experience the application live at: Live Demo
Clean, modern landing page showcasing key features and user benefits
Secure login interface with multiple authentication options and OTP verification
Feature-rich chat interface with intuitive navigation and real-time status updates
High-quality video conferencing with up to 4 participants and easy-to-use controls
Comprehensive file sharing interface with image preview, shared media gallery, and chat room details panel
Advanced group management interface with member controls and admin privileges
Real-time group chat interface with member list and shared media gallery
Four distinct theme options for personalized user experience
/- Landing page/login- User login/signup- New user registration/forgotpassword- Password recovery/chat- Main chat interface
- Framework: Next.js
- Language: TypeScript
- State Management: Redux
- Real-time Communication:
- Socket.IO for chat
- WebRTC for audio/video calls
- Form Validation: Zod
- Authentication: Custom email/password + OAuth
- Server Infrastructure:
- Custom STUN/TURN servers
- WebRTC signaling server
Node.js >= 14.0.0
npm >= 6.14.0- Modern web browser with WebRTC support
- Webcam and microphone for video calls
- Stable internet connection (recommended: 1Mbps+ upload/download)
- Clone the repository:
git clone https://github.com/kr-ashwani/msgbits_frontend.git
cd chat-app-frontend- Install dependencies:
npm install- Create a
.env.localfile in the root directory and add necessary environment variables:
NEXT_PUBLIC_SERVER_URL = server_url
NEXT_PUBLIC_SELF_URL = frontend_url
NEXT_PUBLIC_OAUTH_GOOGLE_CLIENT_ID = google_client_id
NEXT_PUBLIC_OAUTH_GITHUB_CLIENT_ID = github_client_id
NEXT_PUBLIC_OAUTH_FACEBOOK_APP_ID = facebook_app_id
NEXT_PUBLIC_MAX_FILE_SIZE_MB = max_file_upload_size- Run the development server:
npm run devYour app should now be running on http://localhost:3000
- We use ESLint for code linting
- Prettier for code formatting
- TypeScript strict mode enabled
- Keep components small and focused
- Use TypeScript interfaces for props
- Implement proper error handling
- Write meaningful commit messages
- Follow the project's file/folder structure
The application uses GitHub Actions for automated deployment to EC2:
-
On push to main branch:
- Build is triggered
- Tests are run
- Docker image is created and pushed to registry
- New image is deployed to EC2
-
Production Environment:
- Running on EC2 instance
- Redis container for caching and session management
- Environment variables loaded from production config
- Automated SSL certificate renewal
-
Monitoring:
- Application logs stored on EC2 and database
- Error tracking and alerting
- Resource utilization monitoring
- Horizontal scaling using Node.js cluster
- Redis for session storage across instances
- Load balancer distribution
- Auto-scaling based on metrics
To create a production build:
npm run buildTo run the production build:
npm startThe application implements a custom WebRTC solution for audio/video calls with the following features:
- Direct peer-to-peer connections using native WebRTC API
- Fallback to TURN server when direct connection fails
- Automatic connection recovery on network issues
- Support for late-joining participants
- Room-based call management
- Call state persistence across page refreshes
- Ensure your browser allows camera/microphone access
- Check if you're behind a restrictive firewall
- Verify STUN/TURN server configurations
- Monitor browser console for connection errors
- Check network connectivity and stability
Redux is used to manage complex client-side state, handling:
- User authentication state
- Chat room data
- Active calls information
- Theme preferences
- File transfer status
- Connection states
- Lazy loading of components
- Image optimization
- Chunk-based file transfer
- Efficient WebRTC connection handling
- Redux state optimization
- End-to-end encryption for messages
- Secure file transfer
- JWT authentication
- OAuth2.0 implementation
- Rate limiting
- Input sanitization
- Fork the repository
- Create your 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
For support, email support@msgbits.com or join our Discord community.