Inspiration
India has 1.5 million schools, 250 million students, and some of the most dedicated teachers in the world — yet the system is built around uniformity in classrooms that are anything but uniform. A single Grade 7 classroom in rural Maharashtra might have 60 students spanning 4 grade levels of ability, a teacher managing three subjects, no teaching assistant, and zero real-time feedback on who is drowning.
We were moved by three specific truths:
Students who fall behind do so silently. In a crowded classroom, raising your hand to say "I'm lost" carries social risk. Many students simply stop trying. Teachers are burning out invisibly. Behavioral signals — shrinking lesson variety, recycled assessments, late-night logins — emerge weeks before a teacher disengages, but no one is watching for them. The digital tools that exist are built for well-resourced schools in cities. Vidya Setu is built for the other 90%.
What it does
Vidya Setu (विद्या सेतु — "Bridge of Knowledge") is a full-stack classroom intelligence platform with eight interconnected modules:
🎯 Learning Gap Heatmap — A student × topic proficiency matrix that surfaces exactly which students are struggling with which concepts. Teachers launch quick assessments, students join with a 4-digit code, and within minutes the teacher sees a ranked list of gaps with ready-made intervention recipes.
🧠 Thinking Labs — Structured critical thinking challenges (Socratic debates, logical fallacy hunts, ethical dilemma frameworks, real-world problem deconstructions) to build the future-ready skills that rote curricula skip.
📡 WebRTC Peer Study Rooms — Serverless video/audio study rooms running entirely in-browser via the BroadcastChannel API. Students get synchronized Pomodoro timers, a collaborative canvas whiteboard, screen sharing, and a silent ambient-sound mode — no infrastructure required.
🆘 Silent Help Signal — A persistent floating button (always on screen, above every other UI layer) that students hold for 2 seconds to silently signal their teacher: "I'm confused", "I need help", or "I need support." Zero social cost. Immediate teacher notification.
📊 Teacher Burnout Early Warning — Mirrors the student dropout predictor but tracks six behavioral indicators for teachers: session duration decline, assessment reuse rate, late-night logins, professional development gap, feature diversity drop, and absences. School leadership sees a privacy-protected team overview with a care message capability — framed as support, not surveillance.
🥽 VR Classroom — Immersive 3D science, math, and history scenes with an AI tutor, voice and gesture controls, built on Three.js and React Three Fiber.
🔊 Oral Assessment — Voice-based reading fluency and comprehension checks, surfacing learning levels that written tests miss.
🚨 Dropout Early Warning — ML-style risk scoring from attendance, engagement, and assessment patterns, with intervention triggers before a student is lost.
How we built it
Frontend: React 18 with hooks throughout — useState, useEffect, useRef, useCallback, useMemo, custom hooks for auth, language, notifications, theme, offline state, bionic reading, wellbeing signals, and WebRTC peer state.
Build: Vite 8 with lightningcss. Full production build in under 2 seconds, 1,252 modules.
Routing: React Router v6 with HashRouter (GitHub Pages / static host compatible).
Real-time — no backend:
WebRTC via RTCPeerConnection + getUserMedia/getDisplayMedia for peer video BroadcastChannel API as the signalling layer (same-browser tabs / LAN demo, zero server cost) Synchronized Pomodoro state pushed from host peer via data channels every 15 seconds Whiteboard batches draw events at 40ms intervals to avoid flooding the channel Wellbeing signals cross tabs via a named BroadcastChannel('vidya-wellbeing-v1') Audio: Web Audio API with synthesized noise buffers (white / pink / brown / mid-frequency) for ambient sound modes — no audio files, no CDN dependencies.
Animations: requestAnimationFrame loop for the Silent Help Button's 2-second SVG progress ring (smooth, battery-friendly, no CSS animation timing drift).
Charts: Recharts LineChart / BarChart with ResponsiveContainer for learning gap reports, burnout trend lines, and teacher session sparklines.
3D: Three.js + React Three Fiber for VR classroom scenes.
Design system: Shared Features.css with Aurora Glass design language — glassmorphism, backdrop-filter, CSS custom properties (--wc, --tc, --sc, --rc) enabling per-component color theming without prop drilling.
i18n: Custom useLanguage hook with a translation map covering English, Hindi, Tamil, Telugu, Marathi, Kannada, and Bengali.
Challenges we ran into
WebRTC without a signalling server. Standard WebRTC requires an external signalling layer. We used the BroadcastChannel API — which works across tabs in the same browser — as a zero-infrastructure signalling channel. This makes the demo fully self-contained and keeps the architecture viable for offline-first school networks.
Stale closures in synchronized timers. The SharedTimer's setInterval callback captured stale sessions and phase values on mount. Solved with a stateRef pattern — a ref that mirrors state and is read inside the interval rather than closed over.
Touch + canvas conflict. The collaborative whiteboard's touchstart/touchmove listeners triggered browser scroll. Fixed by registering them with { passive: false } and calling preventDefault() — not possible with React's synthetic event system, so we used imperative addEventListener in useEffect.
Always-on safety layer. The Silent Help Button needs to be accessible even inside the fullscreen WebRTC study room. The study room renders at z-index: 200. SilentHelpButton renders in the root layout at z-index: 500 — always reachable regardless of what modal or fullscreen feature is active.
BroadcastChannel same-tab blindspot. BroadcastChannel does not deliver messages to the tab that sent them. For wellbeing signals, the sending student's local state would not update if we only relied on the channel. Fixed by immediately updating local state AND broadcasting — same-tab updates are synchronous, cross-tab updates come via the channel.
CSS @extend in plain CSS. Accidentally used a Sass-only @extend directive in a .css file, causing lightningcss to throw Unknown at rule: @extend at build time. Resolved by extracting shared rules into a single combined selector.
Accomplishments that we're proud of
Zero backend, fully real-time. Study rooms with video, audio, whiteboard sync, and shared timers — in-browser, no server, no TURN relay, works on a school LAN. A student safety feature with no friction. The Silent Help Button requires a 2-second hold (prevents accidental fires), lives at a fixed z-index above every other UI layer, and delivers a signal in under 3 seconds with zero social visibility to peers. Teacher wellbeing framed correctly. Every burnout indicator is scored as a support trigger, never a performance metric. The privacy notice is permanent and the care message UI defaults to warmth, not correction. Serving mixed-ability classrooms. The Learning Gap Heatmap + Intervention Engine combination means a single teacher with 60 students can, in under 10 minutes, identify the three highest-priority gaps and have a ready-made peer-teaching activity to address them. Indigenous language support from day one. Seven languages at launch, not bolted on after — because a platform for India that only works in English isn't a platform for India. Production-grade build in a hackathon window. 1,252 modules, clean build, no warnings, under 2 seconds — shipped in a single sprint.
What we learned
The most important signal is the one students can't give aloud. Designing the Silent Help Button forced us to think about the difference between UX and safety UX — every millisecond of friction in a safety feature is a student who doesn't use it.
Browser APIs have caught up with backend services. WebRTC, BroadcastChannel, Web Audio API, and the Canvas API together deliver features that would have required three microservices five years ago. For resource-constrained deployment contexts, this matters enormously.
Burnout is behavioral before it's visible. The six indicators we chose are all computable from usage logs without any subjective evaluation — and they manifest 4–8 weeks before a teacher starts actively disengaging. Early warning works only if you measure early enough.
Design systems pay back immediately. Building the Aurora Glass token system and Features.css upfront meant every new module had a visual language to plug into — no style debt, no inconsistency, no per-feature CSS wars.
What's next for Vidya Setu (विद्या सेतु)
Morning Readiness Check — A 60-second check-in at the day's start: mood, sleep, hunger, focus. Aggregated anonymously so teachers see "today 18 students are low-energy" before planning a demanding lesson.
Misconception Radar — Live multiple-choice polling during a lesson with distractor analysis. Wrong answers are not random — they cluster around predictable misconceptions. The radar identifies the misconception, not just the error rate.
Live Adaptive Quiz — Questions that branch in real time based on the last answer. A student who answers correctly gets a harder question; one who answers incorrectly gets a scaffolded hint question. No two students see the same quiz path.
Language Bridge — Real-time transliteration and vocabulary scaffolding for students whose home language differs from the medium of instruction — the single largest hidden barrier to comprehension in multilingual classrooms.
Inter-School Live Challenge — Synchronous academic competitions between classrooms in different schools, with live leaderboards, team strategy channels, and post-match performance breakdowns. Peer accountability at scale.
Live Lesson Co-Pilot — An AI assistant that listens to the lesson flow (via concept tagging, not audio recording) and surfaces relevant examples, common questions, and pacing suggestions without interrupting the teacher.
Offline-first PWA with sync — Package Vidya Setu as a Progressive Web App with IndexedDB-backed offline state and differential sync when connectivity returns — for the 34% of Indian schools with unreliable internet.
State education board API integration — Pull curriculum standards and assessment frameworks directly from NCERT/state board APIs so the Learning Gap Heatmap aligns automatically with official grade-level benchmarks.
Log in or sign up for Devpost to join the conversation.