AuraStudy

• 

  Visual Mockup

Inspiration

AI is advancing rapidly, but learning it remains passive. When students read textbooks or tutorials, they often skim and memorize definitions without building an intuitive understanding. We wanted to build a workspace that forces active learning. AuraStudy translates static ML courses into an interactive dashboard, combining a Socratic mentor with memory retention checkpoints.

What it does

AuraStudy is an active learning suite containing four modules:

• Socratic Mentor: An AI chatbot that guides comprehension by asking questions, prompting students to deduce machine learning principles themselves.
• AI Curriculum Reader: A side-by-side split screen rendering lessons and launching interactive checkpoint quizzes with detailed answer explanations.
• Active Recall Arena: A 3D-flipping flashcard deck tracking memory recall levels.
• Learning Dashboard: An interactive hub displaying active study time, quiz averages, weekly study graphs, and learning milestones.

How we built it

AuraStudy is built as a React Single Page Application powered by Vite. The design incorporates frosted-glass elements (glassmorphism) set over a custom Three.js WebGL canvas that renders 1,200 drift-rotating background particles. The particle canvas dynamically responds to mouse movement and shifts colors depending on light/dark mode choices.

Challenges we faced

Structuring a WebGL canvas to render smoothly behind transparent React grid components without absorbing click events was challenging. We solved this by using CSS pointer-events: none on the canvas layer and managing container index depths (z-index) explicitly.

What we learned

We learned to optimize WebGL rendering performance, set up responsive HSL color variable themes, and construct an interactive Socratic prompt-mapping system.

Built With

• css
• github
• html
• javascript
• react
• three.js
• vite