CLGSphere - Smart Campus Management Platform

An AI-powered Web App that transforms education through intelligent attendance management, personalized learning tasks, and real-time campus engagement for students, teachers, and administrators.

Comment

Inspiration

We were inspired by the fragmented digital experience in educational institutions. Students juggle multiple apps for attendance, schedules, notices, and assignments, while teachers struggle with manual attendance tracking. We envisioned a unified, intelligent platform that not only centralizes these functions but actively helps students optimize their learning during free periods through AI-powered task recommendations.

What it does

CLGSphere is a comprehensive smart campus management platform with three core innovations:

  1. Intelligent Attendance System: Features QR code scanning with real-time updates, PIN-based marking, and offline support. Teachers see instant visual feedback with flash animations when students mark attendance, eliminating the need for manual roll calls.

  2. AI-Powered Learning Assistant: Analyzes student profiles, schedules, and free time to generate personalized micro-tasks using Groq API (Llama 3.1/3.3 models). During breaks between classes, students receive tailored study suggestions matching their interests, strengths, and learning preferences.

  3. Real-Time Campus Hub: Centralizes notices, events, schedules, and communications with role-based dashboards for students, teachers, and administrators, all synced in real-time using Supabase.

How we built it

Architecture & Stack:

  • Frontend: Next.js 15 (App Router) with React, TypeScript, Tailwind CSS, and Shadcn UI components
  • Backend: Supabase (PostgreSQL) with Row Level Security, real-time subscriptions, and custom RPC functions
  • AI Integration: Groq API for ultra-fast LLM inference with prompt caching and fallback systems
  • PWA Features: Service workers, offline support with IndexedDB (Dexie), background sync
  • Mobile: Capacitor for native Android app with camera access and device integration
  • Deployment: Vercel for automatic scaling with serverless functions

Key Implementation Details:

  1. Advanced Attendance System:

    • QR codes generated with embedded session metadata (sessionId, PIN, qrToken, expiry)
    • Server-side validation via validate_and_mark_attendance RPC function
    • Supabase Realtime subscriptions for instant teacher dashboard updates
    • Flash animations (CSS keyframes) provide visual feedback when students check in
    • Dual-mode marking: QR scanner (using qr-scanner library) or 6-digit PIN entry

  2. AI Task Generation:

    • Student profiles captured through interactive aptitude quiz
    • Prompts engineered to generate relevant, time-appropriate tasks
    • Prompt hashing system caches results to minimize API costs
    • Template-based fallback ensures reliability when AI services are unavailable
    • Tasks stored in ai_task_sets table with 14-day TTL and reuse logic

  3. Database Design:

    • 12+ interconnected tables with foreign key relationships
    • Optimized indexes on frequently queried columns
    • Row Level Security policies ensure students only see their own data
    • Complex joins handled through materialized views and stored procedures

  4. Progressive Web App:

    • Custom service worker with cache-first strategies
    • Offline queue for attendance submissions
    • Background sync when connection restored
    • Install prompts for home screen addition
    • Works seamlessly on mobile, tablet, and desktop

Challenges we ran into

  1. Real-Time Synchronization: Implementing Supabase Realtime subscriptions to update the teacher's attendance list instantly without page reloads required careful state management and animation timing to prevent race conditions.

  2. Offline-First Architecture: Designing a system where attendance could be marked offline (via cached QR data) but PIN entry required connectivity was technically complex. We had to implement sophisticated queue management and conflict resolution.

  3. AI Prompt Engineering: Crafting prompts that consistently generate high-quality, diverse, and contextually appropriate tasks took extensive iteration. We implemented validation layers and fallback templates to ensure reliability.

  4. Cross-Platform Camera Access: Getting the QR scanner to work reliably across different browsers and within the Capacitor mobile app required extensive testing and fallback mechanisms (manual input when camera unavailable).

  5. Performance at Scale: Optimizing database queries with proper indexing and implementing caching strategies to ensure the app remains fast even with hundreds of concurrent users.

Accomplishments that we're proud of

  • Seamless Real-Time Experience: The instant flash animations when students mark attendance create a "wow moment" that makes the technology feel magical and responsive.

  • Intelligent AI Integration: Our prompt hashing and caching system makes AI task generation both cost-effective and reliable at scale.

  • Polished UX: From the onboarding flow to the animated dashboards, every interaction feels smooth and intentional. The PWA works offline and installs like a native app.

  • Production-Ready Code: Comprehensive TypeScript types, proper error handling, security via RLS policies, and extensive documentation make this genuinely deployable.

  • Multi-Platform Support: Built once, runs everywhere - web browsers, Progressive Web App, and native Android via Capacitor.

What we learned

  • Real-time architecture patterns: How to design systems where multiple users interact with shared data simultaneously without conflicts.

  • AI API economics: Strategies for managing costs and ensuring reliability when integrating third-party AI services.

  • Progressive enhancement: Building features that work offline first, then enhance when connectivity is available.

  • Database optimization: The massive impact of proper indexing, query optimization, and strategic use of database functions.

  • User-centric design: The importance of instant visual feedback (like our flash animations) in creating delightful user experiences.

What's next for CLGSphere

Short-term (3-6 months):

  • Conduct pilot program with partner colleges
  • Add gamification (achievements, leaderboards) to boost engagement
  • Build advanced analytics dashboards for administrators
  • Implement parent portal for progress monitoring
  • Add push notifications for important announcements

Long-term (1-2 years):

  • Multi-institution deployment with institution-specific branding
  • Integration with payment gateways for fee management
  • Alumni networking and career services module
  • Marketplace for educational content and third-party integrations
  • Advanced ML models for predicting student performance and at-risk identification

Vision: Transform CLGSphere into the comprehensive operating system for modern colleges - where every academic interaction, from admission to graduation, flows through one intelligent, integrated platform.

Built With

Share this project:

Updates