Inspiration

Education today often feels static—textbooks are one-size-fits-all, and online videos lack interactivity. We realized that while students have access to information, they lack a personalized guide that adapts to their specific curriculum and learning style.

We wanted to bridge the gap between rigid syllabi (like CBSE/School Boards/Engineering) and dynamic AI learning. Our goal was to create not just a learning app, but a "Companion" that rewards consistency, provides instant help, and gamifies the struggle of studying complex topics. We were inspired to build a platform where a student studying "Thermodynamics" or "Data Structures" can instantly get a personalized tutor, a quiz master, and a real-world simulator all in one tab.

What it does

EdVibe is a comprehensive, AI-powered learning ecosystem designed for students from Grade 6 to Engineering.

  • ⚡ AI-Generated Study Material: Instantly converts any syllabus topic into structured Study Notes, interactive Flashcards, and Quizzes using the Gemini API.
  • 🧪 AI Sandbox: A unique feature where students apply concepts to real-world scenarios. The AI generates a practical problem (e.g., "Design a bridge using these stress values") and grades the student's typed solution on Accuracy, Creativity, and Clarity.
  • 🎮 Deep Gamification: Keeps students addicted to learning with a robust XP system, Daily Streaks, tiered Badges (e.g., "Night Owl", "Speedster"), and a real-time Global Leaderboard.
  • 📺 Curated Video Content: Automatically fetches the best YouTube lectures for the specific topic selected, filtering by duration (Short/Long/Full Course).
  • 🤖 24/7 Doubt Engine: A dedicated "Clear Doubt" chat that acts as a context-aware tutor for the specific lesson currently open.
  • 📄 PDF Export: Students can export their AI-generated notes into professional, formatted PDFs for offline study.
  • 🤝 Social Learning: Features a "Class Chat" and "Peer Connect" system to discuss topics with other students in the same standard.

How we built it

We prioritized performance and accessibility, building EdVibe as a lightweight Single Page Application (SPA).

  • Frontend: Built with Vanilla JavaScript and HTML5. We avoided heavy frameworks to ensure the app loads instantly on any device.
  • Styling: We used Tailwind CSS to create a modern "Glassmorphism" aesthetic (translucent panels, gradients) that feels futuristic and engaging.
  • AI Core: We integrated Google's Gemini API (gemini-1.5-flash and gemini-pro) to handle all generative tasks—from creating JSON-formatted quizzes to analyzing student answers in the Sandbox.
  • Backend & Real-time: Firebase Firestore handles the database (users, chats, leaderboards), while Firebase Auth manages secure login/signup. We used Firestore listeners for real-time chat and leaderboard updates.
  • Utilities: Used Chart.js for the visualization of learning velocity and html2pdf.js for the note export feature.

Challenges we ran into

  • AI Hallucinations & Formatting: Getting the AI to consistently return valid JSON for quizzes and flashcards was difficult. We had to implement robust error handling and "clean-up" functions to parse the AI's response even if it included markdown or extra text.
  • State Management: Managing complex user states (Current Topic, XP, Badges, Chat History) without a framework like Redux was tricky. We built a custom central store object to manage the application state globally.
  • Real-time Leaderboard: Calculating ranks and percentiles for the "Global AI Test" in real-time without overloading the database required careful structuring of Firestore collections.
  • CSS Glassmorphism: Achieving the "frosted glass" look that works consistently across different browsers and dark/light backgrounds required fine-tuning backdrop-filters and opacity layers.

Accomplishments that we're proud of

  • The AI Sandbox: We are particularly proud of the prompt engineering behind the Sandbox. It doesn't just say "Correct/Incorrect"—it acts like a human teacher, giving nuanced feedback on how the student explained their answer.
  • Zero-Lag Interface: Despite being rich in features, the app feels incredibly snappy because we optimized the DOM manipulation manually.
  • The Badge System: Implementing the logic to award badges (e.g., "Award 'Night Owl' if studying after 10 PM") makes the platform feel alive and responsive to user behavior.
  • Seamless Syllabus Navigation: Creating a nested data structure that handles everything from "6th Grade Science" to "Engineering Web Development" within a single UI.

What we learned

  • Prompt Engineering is Key: The quality of the app depends entirely on how well we instruct the AI. We learned to treat prompts as code—modular, specific, and robust.
  • Gamification Works: During testing, we found that seeing the "XP" bar go up genuinely motivated us to test more features.
  • Firebase Capabilities: We gained a deep understanding of Firestore security rules and efficient querying to minimize read/write costs.

What's next for EdVibe, AI companion for students

  • Voice-Activated Tutor: Adding Speech-to-Text so students can verbally ask doubts and hear explanations while solving math problems.
  • Image Recognition: allowing students to upload a photo of a math problem for the AI to solve and explain.
  • Teacher Dashboard: A tailored view for educators to monitor class progress, assign specific AI tests, and view analytics.
  • Mobile App: Porting the logic to React Native for a dedicated mobile experience with push notifications for study reminders.

Built With

Share this project:

Updates