Context & Problem
Educational institutions were running their web and mobile experiences as separate products — a full-featured desktop tool for educators and a stripped-down companion app for students. The split created fragmented data, inconsistent feature availability, and poor adoption on mobile. The client needed a unified platform with a shared API, real-time collaboration, and an offline-first mobile experience that didn't treat mobile as second class.
Educational institutions needed a unified platform that works seamlessly across web and mobile, where the web app provides full administrative and content features while the mobile app focuses on student engagement. Existing solutions forced a choice between a powerful desktop tool and a limited mobile companion, resulting in fragmented data and poor adoption among students. The system had to support real-time video sessions and collaborative tools without sacrificing offline functionality for students in low-connectivity areas. Additionally, educators needed granular analytics to identify at-risk learners early without adding to their administrative burden.
Design Constraints
- teamInherited constraints from legacy project format.
Architecture Overview
Designed a monorepo with a shared RESTful API layer built on Node.js and Express, serving both the React web dashboard and the React Native mobile client from identical data contracts. Implemented WebSocket channels via Socket.IO for real-time video session signaling and live collaboration features like shared whiteboards. Used MongoDB with Redis caching to handle concurrent read-heavy workloads from thousands of active learners, and built an offline-first data layer in the mobile app using WatermelonDB for seamless sync. Developed a configurable analytics pipeline that aggregates engagement metrics and surfaces actionable insights for educators without manual report generation.
Outcomes & Lessons Learned
Active Learners
Served 2,000+ active learners
Student Engagement
Improved student engagement by 35%
Admin Overhead
Reduced administrative overhead by 50%
Retrospective
- WatermelonDB for offline-first sync was the right architectural choice, but its lazy loading model requires careful query design — accessing related records outside of a transaction silently returns stale data. The learning curve cost us a week of debugging before we internalized the pattern.
- The analytics pipeline for identifying at-risk learners worked better than expected, but educators didn't trust automated flags without seeing the underlying data. The adoption breakthrough came from showing the raw engagement metrics alongside the flag rather than just surfacing the conclusion.