Fordel StudiosThis case study describes a real engagement. Client identity, proprietary details, and specific metrics are anonymized or approximated under NDA.
School-Specific Exam Prep Platform with AI Engagement Tracking
An edtech startup building school-specific exam preparation needed a React frontend for two applications — a student-facing exam prep app and a parent dashboard. The platform differentiator was curriculum aligned precisely to each partnered school's exam schedule, combined with AI-powered engagement monitoring during live video classes. The existing prototype was not production-ready.
Built the production React frontend for both the student exam app and parent monitoring dashboard, integrating with live video class infrastructure, real-time engagement analytics, and school-specific content delivery APIs.
The engagement covered the frontend layer for two interconnected applications. The student app delivers video lessons, practice questions, mock tests aligned to their specific school's exam pattern, and live revision classes. The parent app provides attendance tracking, practice submission monitoring, subject-wise progress updates, and AI-powered insights on class attention and participation. Both apps needed to work seamlessly with the backend's school-specific content tagging system and the live class infrastructure's real-time data streams.
The Challenge
The primary frontend challenge was the live class experience — rendering video streams while simultaneously displaying real-time engagement analytics, interactive questions, and class participation indicators. The video player needed to handle adaptive bitrate streaming (HLS) with minimal latency while the engagement overlay processed WebSocket events for attention scoring. The parent dashboard required real-time updates during live sessions — parents could see whether their child was attentive, participating, or distracted, with data arriving in sub-second intervals. School-specific content required dynamic UI adaptation — different schools have different board affiliations (CBSE, ICSE, State Board), different exam schedules, and different subject configurations.
How We Built It
Discovery mapped the complete user journey for both student and parent personas across all platform states: pre-class, during-class, post-class, exam prep, and progress review. We documented the real-time data flows between the live class infrastructure and the frontend for engagement scoring.
Architecture used React with a state management layer designed for real-time data — WebSocket connections for live class events, optimistic updates for interaction responses, and incremental data loading for the progress analytics dashboards. Component library was built for reuse across both apps.
The student app was built module by module: video lesson player first, then practice question engine, then mock test framework, then the live class experience with engagement overlay. Each module was tested against the backend APIs with realistic data volumes.
The parent dashboard was built in parallel once the shared component library stabilized. Real-time class monitoring was the critical path — we built a custom visualization for attention scores, participation events, and session summaries that updated live during classes.
What We Delivered
Both applications launched on schedule and handled live class sessions with 30+ concurrent students per session without frontend performance issues. The engagement overlay maintained smooth rendering alongside HLS video playback on mid-range mobile devices.
The school-specific content system successfully adapted the UI for 3 different board affiliations without conditional rendering complexity — the content API drives the structure, and the frontend renders dynamically based on the school's configuration.
Real-time parent dashboard updates achieved sub-500ms latency from engagement event to parent-visible update, meeting the product requirement for live monitoring during classes.
Ready to build something like this?
Tell us what you are building. We will scope it, price it honestly, and give you a clear plan.
Start a ConversationFree 30-minute scoping call. No obligation.