Building a full-stack real-time messaging, voice/video calling, and file-sharing app using React, Socket.IO, WebRTC, Capacitor, and Electron from a single codebase.
Most messaging projects stay stuck as browser-only demos. When I set out to build NexChat
(also known as NexxChat), my goal was to ship a single unified codebase that runs smoothly across Web, Android (native APK), and Windows Desktop (.exe).
👉 Try the Live Web App: https://nexxchat-zeta.vercel.app/
👉 Source Code & Releases: github.com/ritik46te45-debug/nexxchat
Why Build a Cross-Platform Messenger?
Modern users expect messages and calls to sync everywhere without compromising native features like system tray notifications on PC or gallery saving on Android. Instead of maintaining three separate apps, NexChat shares one core React 18 + Vite frontend across all three targets:
Web App: Deployed on Vercel at nexxchat-zeta.vercel.app
with PWA manifest support.
Android App: Packaged natively using Capacitor 8 (Android SDK 35) with local notification channels, Firebase push notifications, and native MediaStore / DownloadManager gallery saving.
Windows Desktop App: Wrapped with Electron featuring Windows Action Center toast notifications, optional auto-launch on startup, and system-tray background keepalive.
Tech Stack Breakdown
Frontend (Web / Android / Windows)
UI: React 18, Vite 5, Tailwind CSS 3, Lucide Icons
State: Zustand 5
Real-Time & Calls: Socket.IO Client & Peer-to-Peer WebRTC
Media & Docs: Built-in PDF viewer (pdfjs-dist), voice note waveform recording, and media lightbox
Backend (API & WebSockets)
Runtime: Node.js + Express.js (ES Modules)
Database: MongoDB with Mongoose ODM
Real-Time Engine: Socket.IO for presence tracking, typing/recording indicators, read receipts, and WebRTC signaling
Storage & Auth: Cloudinary CDN for media, JWT access/refresh token rotation, Google OAuth, and TOTP Two-Factor Authentication (2FA)
Key Features Implemented
- Instant Messaging & Rich Interactions
Messages flow over Socket.IO with live delivery and read receipt states (Pending, Sent, Delivered, Read), quoted replies, message reactions, inline editing, forwarding, and group chat management with custom avatars and admin controls.
- Peer-to-Peer WebRTC Voice & Video Calls
NexChat includes 1-on-1 audio and video calling with camera switching, audio/video toggles, speaker selection, screen sharing, incoming call ringtones, and persistent call history logs.
- Security & Account Protection
Users can sign in with email/password or Google OAuth, enable Two-Factor Authentication (2FA) compatible with Google Authenticator/Authy, set a PIN App Lock, and inspect or revoke active device sessions remotely.
- Automated CI/CD Binary Builds
Every push to main triggers GitHub Actions workflows (.github/workflows/build-apk.yml and build-exe.yml) to compile fresh Android .apk and Windows Setup .exe releases automatically:
Launch Web App: https://nexxchat-zeta.vercel.app/
Download Android APK: NexChat.apk
Download Windows Installer: NexChat-Setup.exe
Lessons Learned Shipping to 3 Platforms
Router Strategy Matters: Browser SPAs work best with BrowserRouter for clean URLs and SEO, while Electron (file://) and Capacitor native shells need HashRouter so deep paths never break on reload.
Code-Splitting Boosts Startup & SEO: Separating heavy modules (MainLayout, pdfjs-dist, @emoji-mart) from the entry bundle keeps the public landing page lightweight (~86 kB main entry) while loading full chat capabilities immediately after sign-in.
Background Keepalive on Desktop & Mobile: Minimizing to the Windows system tray and configuring dedicated Android notification channels make a web-powered app feel truly native.
If you want to test it out or explore the code:
Web App: https://nexxchat-zeta.vercel.app/
GitHub Repository: ritik46te45-debug/nexxchat
Feedback, stars, and suggestions are always welcome in the comments!
