Synapse Educate

• 

  home page

• 

  logo

• 

  map learning example

Synapse — AI-Powered Adaptive Learning

Inspiration

i've been a CS student for a while now and honestly the way we learn stuff hasn't changed much. you get a textbook or a video playlist and you're expected to just grind through it linearly. but that's not how anyone actually learns — you jump between concepts, you go back when something doesn't click, and you need to see how ideas connect to each other.

i kept thinking about how much better it would be if you could just type in any topic and get a full map of everything you need to learn, with the concepts linked together by prerequisites, and then have something that actually adapts to what you know and don't know. so i built that.

the other thing that bugged me was how most ed-tech just gives you answers. you watch a video, you memorize, you forget. the Socratic method — where a tutor asks you the right questions instead of just telling you — is way more effective for actual understanding. so Synapse's AI tutor does exactly that.

What it does

Synapse takes any topic you want to learn and generates an interactive knowledge map — a visual graph of interconnected concepts powered by AI. each node represents a concept with its own difficulty level and prerequisite relationships.

from there you can:

• click any node to see what it covers and how hard it is
• take a lesson that uses the Socratic method — explanations, examples, thought-provoking questions, and key takeaways
• take an adaptive quiz that updates your mastery score per concept. as you improve, the nodes on your graph change color from blue (not started) to amber (in progress) to green (mastered)
• chat with a Socratic tutor that guides you with questions instead of just handing you answers
• track your stats — topics explored, lessons completed, quiz scores, streaks

it also has accessibility modes built in: dyslexia-friendly fonts, large text, and high contrast. because if you're building something for "all learners" it should actually work for all learners.

How I built it

the stack is React 18 with Vite for the frontend and D3.js for the force-directed knowledge graph visualization. the AI layer runs on the Google Gemini API (gemini-2.0-flash) which handles content generation, quiz creation, lesson building, and the Socratic tutor chat.

the knowledge graph uses D3's force simulation with custom charge, collision, and link forces to keep nodes spaced well without overlapping. nodes are draggable and clickable, and the graph re-renders when mastery scores update.

for the adaptive learning piece, quiz scores feed into a weighted mastery algorithm — 60% new score, 40% previous mastery — so recent performance matters more but you can't game it with one lucky quiz. the mastery data flows back into the graph visualization in real-time.

all AI calls use Gemini's responseMimeType: "application/json" to force structured JSON output, plus a retry wrapper for reliability. the Socratic chat uses freeform text mode since it needs natural conversation.

Challenges

getting Gemini to reliably return valid JSON was the biggest headache. even with structured output mode, sometimes the response would come back weird or the node prerequisite references wouldn't match up. i added validation to filter out edges that reference non-existent nodes, retry logic for failed API calls, and clear error states with retry buttons so the user isn't stuck on a blank screen.

the D3 knowledge graph was also tricky to get right inside React. D3 wants to own the DOM and React also wants to own the DOM, so i had to be careful about when the simulation runs and how it cleans up between re-renders. ended up using a ref-based approach with cleanup on unmount.

the sidebar panel for concept details was originally a flex child that would squeeze the graph on smaller screens and push content offscreen. switched it to an absolute-positioned overlay with a close button which fixed the layout issues.

What I learned

building this taught me a lot about how to work with LLMs in production-ish apps. you can't just fire off a prompt and hope — you need structured output modes, retry logic, input validation, and graceful error states. the AI is powerful but it's not reliable enough to trust blindly.

i also got way more comfortable with D3.js and force-directed graphs. the physics simulation stuff is really cool once you understand the forces at play.

What's next for Synapse

there's a lot of directions this could go:

• spaced repetition — schedule reviews based on mastery decay over time
• collaborative maps — let students share and explore each other's knowledge graphs
• teacher dashboard — aggregate class-wide mastery data so teachers can see where students are struggling
• LMS integration — export progress data to Canvas, Blackboard, etc.
• voice tutoring — hands-free Socratic sessions using speech-to-text

Built With

• css
• d3.js
• google-gemini-api
• html
• javascript
• react
• vite