Building AetherTutor: From Frustration to Intelligent Mastery
The Spark
As a student in Cairo, I’ve seen firsthand how traditional STEM education often fails to keep up with individual learning paces. Many bright students struggle with abstract concepts like projectile motion, chemical bonding, or quadratic equations because explanations are one-size-fits-all. I wanted to create something that feels like having a full team of expert tutors available 24/7 — especially for students in under-resourced schools across Egypt and beyond.
The Vision
AetherTutor is a multi-agent AI-powered adaptive STEM learning platform. Instead of a single chatbot, four specialized agents (Pedagogy, Lab, Visual, and Accessibility) collaborate in real-time to deliver personalized explanations, interactive virtual labs, adaptive quizzes, and a living knowledge graph.
What I Built
- Multi-Agent Chat System — Agents visibly activate and contribute different perspectives.
- Interactive Virtual Labs — Real physics simulation (projectile motion), circuit builder, and chemistry reaction mixer.
- Adaptive Knowledge Graph — Visual prerequisite mapping with click interactions.
- Real-time Adaptive Quiz — Difficulty adjusts based on performance with mastery prediction.
- Progress Analytics — Mastery rings, trajectory charts, and teacher export.
- Accessibility Features — Arabic/English toggle, text-to-speech, and high-contrast mode.
How I Built It
I built the entire project as a single self-contained HTML file (with Tailwind CSS via CDN) to make it instantly shareable and easy to demo. The design follows a premium minimalist-modern system with electric blue gradients, dual typography (Calistoga + Inter), subtle animations, and thoughtful asymmetry. All logic — including physics engine, graph rendering, adaptive algorithms, and multi-agent simulation — runs in vanilla JavaScript with Canvas visualizations.
I heavily leveraged AI tools (as encouraged by the organizers) for code generation, debugging complex Canvas animations, and refining pedagogical explanations.
Challenges & Learnings
- Biggest Challenge: Creating convincing physics simulation and synchronized multi-agent responses within a single file without backend.
Solution: Implemented real kinematic equations for projectile motion and careful state management + timing for agent collaboration.
Technical Hurdles: Making the knowledge graph interactive and ensuring everything stayed responsive while keeping the file size reasonable.
Learned: Canvas rendering optimization, advanced state management in vanilla JS, and how to make complex systems feel intuitive and beautiful.
This project pushed me far beyond my previous skill level. I’m proud that AetherTutor isn’t just another chatbot — it’s a genuine prototype of what the future of personalized STEM education can look like.
Log in or sign up for Devpost to join the conversation.