ClassBridge

Thumbnail

💡 Inspiration

Every student knows the chaos: critical school announcements, project guidelines, and exam schedules are scattered across unread WhatsApp parent groups, crumpled paper circulars handed out in class, and fragmented school portals. While Google Classroom handles formal teacher-posted assignments, it completely misses the 80% of informal, daily school communication. In fact, our student survey revealed that 82% of students have missed at least one crucial deadline simply because it was buried in 200+ unread WhatsApp messages. We built ClassBridge to bridge physical school circulars directly to student action plans.

🚀 What It Does

ClassBridge is a dual-portal academic management web app powered by Google Gemini 2.5 Flash:

📷 Multimodal Circular Scanner: Students or teachers can paste notice text or drag-and-drop a photo/screenshot of a physical circular. Gemini's Vision AI performs OCR and structured extraction to identify the deadline, room, materials needed, required action, and urgency level.
⚡ Dynamic Deadline Conflict Detection: A rolling 7-day clustering algorithm analyzes pending assignments and warns students proactively before submission bottlenecks happen.
⏱️ Online Quizzes with Celebration: Timed quizzes (10–60 min) with live countdown timers, auto-grading, and celebratory HTML5 Canvas Confetti when scoring 80%+.
🏆 Academic Leaderboard: Class-wise and school-wide rankings featuring a 🥇🥈🥉 podium across School Toppers, Highest Attendance, Quiz Champions, and Project Stars.
👩‍🏫 Teacher Command Suite: Batch 1-click attendance marking, timed quiz creator, assignment submission grading, and class notes publishing.

🛠️ How We Built It

Frontend: Built with React 19, TypeScript, and Tailwind CSS v4 for clean glassmorphism UI, coupled with Lucide React icons and custom HTML5 Canvas physics for confetti micro-interactions.
Backend: Node.js and Express server with tsx and esbuild for fast production builds.
AI Vision Pipeline: Leveraged @google/genai (Gemini 2.5 Flash) with native base64 inlineData image inputs and strict type enforcement using responseSchema to guarantee JSON matching our TypeScript interfaces.
Reliability & Persistence: Full client-side localStorage persistence across all 10 data stores, paired with a deterministic heuristic fallback engine ensuring 100% demo uptime.

🚧 Challenges We Faced

Multimodal OCR on Crumpled Notices: Real circular photos often have poor lighting or folds. Structuring the Gemini prompt with explicit extraction schemas ensured clean date and location parsing without hallucinations.
Dynamic Conflict Logic: Replacing hardcoded dates with a rolling 7-day clustering algorithm that works across both preloaded demo schedules and newly created student tasks.
Dual-Role Navigation: Seamlessly separating student and teacher command views while sharing core modules like the calendar and leaderboard.

🎓 What We Learned

How to implement Gemini 2.5 Flash multimodal vision payloads and enforce strict JSON schemas (responseSchema).
The importance of defensive programming and zero-downtime fallback architectures for hackathon presentations.
How micro-interactions like celebratory confetti and interactive podiums drastically increase student engagement.

🔮 What's Next for ClassBridge

Direct WhatsApp Bot Integration: Forwarding a circular photo directly to a WhatsApp bot number to automatically populate your school calendar.
Parent Portal: Weekly SMS/WhatsApp summary digests of upcoming deadlines for parents.
LMS Sync: Two-way synchronization with Google Classroom and Canvas.