JSocial
System Architecture
JSocial's architecture is explicitly designed around real-time data flow. Unlike standard stateless API backends, JSocial is deployed to Render specifically to maintain persistent WebSocket connections—a requirement that serverless platforms cannot fulfill. The frontend consumes these socket events through a React Context provider, ensuring a single source of truth for presence, typing indicators, and notifications across the entire application.
Technical Challenges & Solutions
Socket Race Conditions
Faced intermittent notification failures because multiple components were opening independent socket connections, overwriting the user's socket ID on the server. Fixed this by lifting the Socket.IO instance into a top-level React Context, ensuring a single shared connection per user.
Cross-Domain Cookie Authentication
With a Netlify frontend and Render backend, standard cookies were being dropped by the browser. Configured the Express backend to issue httpOnly JWT cookies with strict cross-origin policies (sameSite: 'none' + secure: true), securing the app against XSS while allowing decoupled hosting.
Split-Brain Unread Counters
The unread message badge was initially driven by raw DOM events and local socket state, leading to out-of-sync counters. Refactored the notification pipeline to funnel all socket events into a centralized Redux store, establishing a strict one-way data flow.