STEMGenie AOI

Inspiration STEM concepts can be incredibly abstract and intimidating for many students. We noticed that traditional learning methods often lack personalization and real-time visualization. We wanted to build a "genie" for education—an AI-driven companion that makes STEM accessible, interactive, and deeply intuitive by utilizing dynamic visual overlays and smart guidance (Area of Interest / AOI tracking).

What it does STEMGenie AOI is an interactive educational platform that leverages AI to break down complex science, tech, engineering, and math concepts. By highlighting key "Areas of Interest" (AOI) on diagrams, equations, and 3D models, the app guides students visually through tough material, answers questions contextually, and generates real-time practice problems tailored to what the user is struggling with.

How we built it We rapidly developed the entire application using Lovable for frontend architecture and prompt-driven iteration.

Frontend: React, Tailwind CSS, and Lucide Icons for a clean, modern UI.

AI Logic & Reasoning: Integrated edge API models to handle prompt engineering and breakdown algorithms.

Interactivity: Component structures that map user coordinates to specific diagram zones (AOI tracking).

Challenges we ran into The biggest hurdle was getting the visual AOI tracking to feel seamless. Since we were generating explanations dynamically, syncing the text definitions with exact highlighted hotspots on different screen sizes required complex responsive design math. We also had to heavily optimize our AI prompts to ensure responses remained strictly educational, accurate, and completely kid-friendly.

Accomplishments that we're proud of Building a fully functional, highly interactive ed-tech prototype in record time using Lovable.

Implementing a smooth, intuitive visual-spatial learning UI that transforms static text into dynamic elements.

Creating an adaptive difficulty engine that shifts explaining styles depending on the user's age or background knowledge.

What we learned We learned that prompt-driven development tools like Lovable are insanely powerful for rapid prototyping, allowing us to pivot design ideas in minutes. We also realized how much a student's retention improves when explanations are anchored to direct visual targets rather than walls of text.

What's next for STEMGenie AOI We want to take the app beyond the browser. Our next steps include integrating full WebGL/Three.js support for interactive 3D physics modules, adding multiplayer collaborative study rooms, and exploring an AR (Augmented Reality) mobile version so students can project STEMGenie overlays directly onto their physical textbooks.

Built With

• git
• lovable
• lucide
• openai
• react.js
• shadcn-ui
• tailwind-css
• typescript
• vite