Real-Time E-Learning Platform
2–4s teacher-to-student latency → <100ms. 18K lines refactored, zero regressions.
ReactWebSocketsReduxFirebase
Rebuilt the real-time interaction layer using Socket.io with Redis pub/sub for horizontal scaling across 3 Node.js instances. Optimistic UI on the client reduced perceived latency from 2–4s to near-instant. Migrated 18,000 lines of legacy class components to Hooks + Context without a single production regression.
teacher actions took 2–4s to reflect for students — classrooms felt broken
Highlights
- Socket.io client with exponential backoff reconnection and event queue: events emitted while disconnected are replayed on reconnect — students don't miss actions during WiFi drops.
- Optimistic UI state machine: student clicks 'raise hand' → local state updates immediately → server ACK arrives in ~80ms → reconcile. Mismatch triggers a subtle correction animation, never a jarring reset.
- Redis pub/sub across 3 Socket.io server instances: teacher broadcasts to Room X → Redis channel → all servers subscribed to that room deliver to connected students regardless of which instance they hit.
- Legacy refactor strategy: strangler fig pattern — new Hooks implementation behind a feature flag, run in parallel with old class component, compare output, then cut over one component at a time.
- useReducer + Context replaced a 12-reducer Redux store for session state — bundle shrank by 28KB, state transitions became auditable with a single dispatch log.
See full portfolio: https://portfolio.kunal-gautam-570.workers.dev