AetherLearn

💡 The Inspiration

Traditional online learning is flat, static, and isolating. Students read passive textbooks, scroll through endless PDFs, and take repetitive text-based quizzes. We wanted to build an immersive "learning universe" where concepts are represented as glowing stars in a 3D gravity-based constellation (cosmic subject maps). By bringing subjects into an interactive 3D canvas, we aim to make learning feel like a space exploration game, driving retention, curiosity, and engagement.

🚀 What it does

AetherLearn is an offline-first, cosmic learning platform that helps students master complex subjects:

Multimodal Textbook/Diagram Scanner: Scan any physical textbook page, chart, slide, or diagram. Gemini Vision parses the visual content and constructs a customized 4-module interactive learning constellation.
Interactive 3D Subject Roadmaps: Enter any topic (e.g., "Quantum Physics", "Photosynthesis", or "Blockchain"), and the app generates a curated set of learning modules represented as cosmic orbits.
Interactive Concept Constellations: Clicking a module generates a 3D nodes-and-edges graph of concepts on an adaptive canvas. Each node is a sub-subject you can click to explore.
Feynman Concept Gap Analyzer: Explain concepts in your own words. Gemini acts as an active-recall validator, scoring your conceptual mastery (0-100%), highlighting what you got right, mapping exactly what critical details you missed (gaps), and providing encouraging coaching feedback.
AI Cognitive Study Coach: A dynamic diagnostic dashboard analyzing study session telemetry (XP, streaks, weak areas, and chosen learning goals). Gemini generates your custom learning archetype (e.g., "Analytical Neural Architect"), a diagnostic cognitive profile, tailored recommendations, and a weekly strategy schedule.
Dynamic AI Study Mascot Companion ("Cosmo"): An interactive, CSS-animated floating robot who lives next to the AI Tutor chat. Cosmo reacts to your actions, chat messages, and learning milestones with dynamic expressions, keyframe animations, and procedurally synthesized sound sweeps (cheers when happy, sweeps when surprised, beeps when thinking, chimes when waking up, and whirrs on clicks).
Deep Study Panels: Generates simple-term explanations, creative real-world analogies, core key terms, and active learning projects for any selected concept.
Interactive Stepper Quizzes: Provides multiple-choice quizzes for any concept with letter badges, stepper progress bars, and emerald/rose-red high-contrast option feedback.
Adaptive 3D Flashcards: Study cafe style binder cards (for standard view) or rounded lavender claymorphic cards (for dark mode Galaxy Space) that flip in 3D.
Double-Theme Spaces: Toggle between Study Space (a warm, cozy cream-colored aesthetic for daytime study) and Galaxy Space (a dark, cosmic ambient mode with floating stars and pulsing moons).
Failsafe Offline Mode: Built-in mock data engine that immediately catches API errors (such as blocked keys or network drops) and serves rich fallback structures so the learning experience never breaks.

🛠️ Tech Stack & How we built it

Frontend: React, TypeScript, Vite, TailwindCSS, Framer Motion, and Lucide React.
3D Visualizations: Three.js, React-Three-Fiber, and @react-three/drei (glowing canvas orbits, interactive connections, and 3D card flips).
Backend: Node.js, Express (hosting the client static bundle and serving API requests with base64 multimodal image support up to 10MB).
GenAI Engine: Google Gemini 3.1 Flash-Lite API via native fetch requests, generating structured JSON templates for roadmaps, concepts, explanations, quizzes, Feynman gap analysis, and cognitive profiles on demand.
Hosting / Cloud: Containerized with Docker and deployed on Render.

🚧 Challenges we ran into

API Availability & Authentication: Encountered 403 Google API Permission Denied issues due to region/abuse restrictions on dev accounts. We solved this by developing a robust Failsafe offline engine that intercepts failures and gracefully serves structured content without crashing the client interface.
3D Canvas Contrast: Ensuring that connection lines and stars were visible across both a bright cream theme (Study Space) and a dark cosmic theme (Galaxy Space). We addressed this by dynamically adjusting connection colors to gold, dark lavender, and sage green based on the active theme.
TypeScript Strict Compilation: Encountered strict compiler flags during production build due to unused variables left behind during UI cleanups. We refactored imports and state structures to ensure 100% clean builds.

Accomplishments that I am proud of

Creating a truly premium, state-of-the-art UI with double theme switching that runs smoothly at 60 FPS in 3D.
Implementing high-impact, multimodal inputs and active recall tools like the Feynman analyzer, Cognitive coach, and our CSS-animated mascot Cosmo with integrated real-time Web Audio sound synthesis.
A robust server-side setup that parses raw Gemini markdown blocks and converts them into structured JSON schemas for interactive quizzes.
Seamless environment deployment scripts ready for Docker hosting.

🔮 What's next for AetherLearn

Multi-User Constellations: Synchronized study lobbies where multiple students can navigate the 3D space together.
Vector Embeddings Search: Expanding cognitive recommendations to pull from open educational resource (OER) libraries.