CogniPath

Adaptive AI micro-learning engine turning complex topics into interactive visual roadmaps, 3D flashcards, active recall quizzes & study copilots.

Comment

Inspiration

In an era of information overload, learners, software engineers, and researchers face severe cognitive fatigue when trying to master complex, dense topics like Transformers & LLMs, Distributed Systems, or Quantum Computing. Traditional video lectures and lengthy documentation suffer from passive consumption, leading to poor retention and high dropout rates.

CogniPath was inspired by three foundational cognitive science principles:

  1. Cognitive Load Theory: Breaking down intimidating subjects into structured, sequential micro-bites.
  2. Active Recall (The Testing Effect): Reinforcing memory pathways through targeted quiz checkpoints rather than passive re-reading.
  3. Ebbinghaus Spaced Repetition: Using tiered recall ratings to review concepts at optimal intervals.

Our goal was simple: What if any topic, textbook chapter, or raw notes could be instantly transformed into an interactive, gamified visual knowledge roadmap tailored to your specific mastery level?

What It Does

CogniPath is an adaptive micro-learning engine and interactive study studio:

  • 🗺️ Visual Knowledge Roadmap: Generates an interconnected milestone dependency graph for any topic with progress and streak tracking.
  • 💡 Dual-Mode Concept Explanations (ELI5 Switch): One-click toggle between intuitive, everyday analogies ("Explain Like I'm 5") and deep architectural breakdowns with runnable code blueprints.
  • 🎴 3D Spaced-Repetition Flashcard Deck: Interactive 3D CSS perspective card flips with recall ratings (Hard, Good, Easy) that reward XP.
  • 🎯 Active Recall Quiz Arena: Dynamic multiple-choice questions with instant feedback, detailed logic explanations, and confetti milestones.
  • 🤖 Context-Aware AI Study Copilot: An embedded assistant with active module context providing interview prep, real-world analogies, and executive summaries.
  • 📥 1-Click Markdown Exporter: Compiles complete study guides and code snippets into downloadable notes.

How We Built It

  • Frontend Architecture: Built with React 18 using concurrent rendering, modular state hooks, and responsive container layouts.
  • Design System & Aesthetics: Styled with Tailwind CSS, featuring dark/light glassmorphic themes, vibrant glowing gradients, and 3D CSS perspective transformations for tactile card flipping.
  • Visuals & Gamification: Integrated Lucide Icons and Canvas Confetti for delightful micro-interactions and level progression.
  • Data & Semantic Synthesis: Engineered a client-side procedural synthesis engine that constructs structured milestones, analogies, code samples, and quiz questions dynamically.
  • Deployment: Deployed on Vercel's Global Edge Network for sub-second load times worldwide.

Challenges We Ran Into

  • Balancing Depth vs. Simplicity: Making technical concepts (like self-attention mathematical projections or CAP theorem partitions) understandable to complete beginners without stripping away technical rigor for advanced engineers. We solved this with the ELI5 Mode Toggle.
  • Interactive 3D Card Physics: Creating fluid 60fps 3D flip card animations across both desktop and mobile viewports using pure CSS transform-style: preserve-3d and backface visibility.
  • State Synchronization: Seamlessly coordinating real-time user progress, XP rewards, quiz completion states, and streak counters without latency.

Accomplishments That We're Proud Of

  • ⚡ Zero-Friction Experience: Deployed a fully functional, self-contained interactive web app that requires zero setup, logins, or installation.
  • 🎨 Sleek, Modern UI/UX: Crafted a high-polish dark-mode interface that makes studying feel engaging rather than burdensome.
  • 🧠 Proven Pedagogical Mechanics: Successfully combined visual roadmapping, ELI5 analogies, active recall testing, and spaced repetition in a unified interface.

What We Learned

  • How combining micro-learning with immediate active recall dramatically improves comprehension speed compared to linear reading.
  • Designing accessible, high-performance UI components with modern React 18 hooks and CSS 3D transforms.

What's Next for CogniPath

  • PDF & Document Upload: Direct PDF parsing for textbook chapters and research papers.
  • Multiplayer Knowledge Battles: Real-time active recall competitions between study groups and classmates.
  • Anki & Notion Two-Way Sync: Automatic export of flashcard decks directly into Anki and Notion workspaces.

Built With

Share this project:

Updates

Submission history