Building a High-Performance Real-Time Virtual Classroom for HeyLangu

HeyLangu (Langu) is an online language learning platform that connects students with professional language teachers worldwide for live one-to-one and small group lessons. The platform integrates a teacher marketplace, lesson scheduling, internal messaging, and a real-time virtual classroom.

Unlike generic video conferencing tools, HeyLangu’s focus is on delivering an education-first experience where live collaboration, instant feedback, and teacher-led instruction are central to the learning process. As the platform scaled, limitations in its real-time classroom architecture began to negatively affect lesson quality, reliability, and overall user satisfaction.

Client's Objective

The primary objective of HeyLangu was to build a real-time virtual classroom experience comparable to Zoom or Google Meet in terms of reliability and performance, while offering advanced collaboration tools specifically designed for language learning. The client wanted teachers and students to interact seamlessly in real time, with instant text updates, accurate cursor synchronization, and consistent classroom layouts. From a business perspective, the objective also included reducing infrastructure costs, eliminating dependency on a single video provider, and ensuring the platform could scale reliably as user demand increased. The solution needed to support low-latency collaboration, teacher-controlled classroom flows, and flexible video infrastructure without compromising the existing user experience.

Client’s Core Challenges

1Real-Time Collaboration and Synchronization Issues

The biggest challenge for HeyLangu was unreliable real-time collaboration during live classes. The platform used TinyMCE with WebSocket-based synchronization on a Vue.js frontend. This setup worked for basic editing but fell short in real classroom situations where teachers and students edited at the same time. The system faced issues like typing delays, cursor mismatches, updates arriving late or in the wrong order, and content being overwritten during concurrent edits. As a result, teachers couldn’t offer instant corrections, students had trouble keeping up with changes in real time, and the overall classroom experience seemed unreliable and unprofessional for a language-learning environment.

2High Video Costs and Infrastructure Inflexibility

HeyLangu initially relied solely on Whereby for live video sessions. While functional, this created several business and technical constraints. The cost of Whereby became increasingly expensive as usage grew, and the platform had no fallback or alternative video provider. This resulted in vendor lock-in, limited flexibility, and higher operational risk if performance issues occurred. From a scalability and cost-management perspective, this setup was not sustainable. Additionally, the lack of provider choice limited the platform’s ability to optimize video quality based on different network conditions, and any provider-level issue directly impacted the live classroom experience with no immediate recovery option.

Solution Strategy

Re-Architecting the Real-Time Collaborative Editor

The most critical step was replacing the TinyMCE-based editor and manual WebSocket synchronization with a modern real-time collaboration stack built on Tiptap, Yjs, and Hocuspocus as the backend collaboration server, while retaining Vue.js for frontend continuity. TinyMCE’s manual sync approach could not reliably handle concurrent edits, whereas Yjs’s CRDT-based model automatically resolves conflicts and maintains a consistent document state. This migration reduced latency to near zero, ensured accurate cursor synchronization, and enabled stable multi-user editing.

Implementing Fully Synchronized Classroom Layouts

To resolve layout inconsistencies, a real-time classroom layout synchronization system was implemented using WebSockets. All classroom assets, including video, collaborative editors, PDFs, images, and learning materials, are now synchronized across participants. Every layout change is instantly broadcast and saved at the session level, allowing new participants to load the current layout automatically.

Introducing Role-Based Classroom Control

A role-based control system was implemented to support a teacher-led classroom model. Teachers gained control over layout management, collaborative editing, screen sharing, and video provider selection, while students automatically followed these configurations in real time. This reduced confusion, improved session flow, and created a structured, classroom-like learning experience.

Optimizing Video Infrastructure with Provider Flexibility

To address video cost and scalability challenges, Twilio was added as the primary video provider while retaining Whereby as a secondary option. A provider-switching system allows teachers to select the preferred provider, with students switching automatically. This provider-agnostic setup reduced costs, removed vendor lock-in, improved reliability, and delivered a Zoom-level video experience.

Performance and Stability Improvements

Following these architectural changes, the platform experienced a significant improvement in overall performance and stability. Collaboration latency was drastically reduced, video and collaborative editing coexisted smoothly, and screen sharing no longer caused freezing or performance drops. The classroom performed consistently across operating systems and screen sizes, including Windows, macOS, and tablets.

Final Outcome and Business Impact

As a result of this transformation, HeyLangu evolved from a basic online lesson platform into a fully synchronized, real-time virtual learning environment. The platform now combines enterprise-grade video conferencing, true real-time collaboration, persistent session state, and teacher-controlled classroom layouts within a scalable and cost-efficient architecture. Students benefit from instant feedback, smooth interaction, and distraction-free lessons. Teachers gain full control over the classroom and can teach more effectively without technical barriers. From a business perspective, HeyLangu achieved improved scalability, reduced infrastructure costs, and a strong competitive advantage in the online language learning market.