SynapseStudy: Socratic AI Concept Graph

Interactive physics-based knowledge graph & voice Socratic AI tutor turning STEM notes into visual concept webs with 3D KaTeX recall flashcards.

Comment

💡 Inspiration

When studying complex subjects like machine learning, quantum physics, or biology, students are repeatedly told to "memorize the notes." But real science isn't an isolated list of trivia cards—it is an interconnected web of cause and effect.

Existing study tools like Quizlet present static, flat text flashcards that promote passive recognition rather than true deep comprehension. Students think they know the material until exam day, when problems require synthesizing concepts across multiple chapters.

We built SynapseStudy to bridge the gap between passive memorization and active conceptual mastery. By combining dynamic force-directed graph physics, KaTeX mathematical typesetting, and a voice-guided Socratic AI tutor, SynapseStudy transforms textbook reading into an interactive, tactile laboratory.

⚡ What SynapseStudy Does

SynapseStudy is an interactive STEM learning workstation designed for students and educators:

  1. Physics-Based Knowledge Graph Canvas: Every curriculum is represented as a live spring-mass network. Students can drag nodes, zoom, pan, and visually follow directional prerequisite pathways (e.g. Perceptron → Activation Functions → Gradient Descent → Backpropagation).
  2. Real-Time Mastery Halos: Nodes feature ambient color halos reflecting student retention in real-time (Emerald = Mastered, Amber = Practicing, Rose = Needs Review).
  3. Voice-Guided Socratic AI Tutor: Instead of providing spoon-fed answers, the built-in Socratic AI mentor asks scaffolded guiding questions with integrated Web Speech audio synthesis.
  4. 3-Stage Scaffolded Hint Ladder: Students can climb from Level 1 intuitive everyday metaphors, to Level 2 mathematical constraints, to Level 3 derivations.
  5. 3D Flip Active Recall Cards & KaTeX Formulas: Seamlessly flip between intuitive mental models and rigorous mathematical formulas rendered with high-definition KaTeX.
  6. Active Recall Diagnostic Quizzes: Each concept features a diagnostic challenge with immediate feedback, Web Audio victory chimes, and confetti celebration.
  7. Custom Notes Ingestion Engine: Students can paste any raw textbook excerpt, outline, or markdown notes to synthesize a brand-new 5-node interactive graph in seconds.

🛠️ How We Built It

  • Frontend Architecture: React 18.3, TypeScript 5.7, Vite 6.2, Tailwind CSS 3.4.
  • Graph Simulation Engine: Custom spring-mass physics simulation with Coulomb repulsion, Hooke's edge tension, and Euler numerical integration.
  • Mathematical Rendering: KaTeX scientific typesetting for complex calculus, quantum equations, and bioenergetics formulas.
  • Audio & Haptics: Zero-asset procedural sound synthesis via Web Audio API (soft clicks, curriculum chimes, victory fanfare) and Web Speech API for voice narration.
  • Dual-Mode AI Reliability: Integrated Google Gemini 2.0 Flash REST API with an intelligent, zero-latency deterministic offline Socratic reasoning engine ensuring 100% fail-safe evaluation for hackathon judges.
  • Celebrations & Visuals: Canvas Confetti and Framer Motion spring transitions.

🏆 Accomplishments That We're Proud Of

  • Built a completely responsive, 60fps physics-driven concept map with zero external heavyweight graph libraries.
  • Implemented 4 complete STEM curriculum banks out-of-the-box (Machine Learning, Quantum Mechanics, Cellular Biology, Computer Science Algorithms).
  • Engineered a zero-config offline fallback so judges can experience the full platform with zero latency and zero API key requirements.

Built With

Share this project:

Updates

Submission history