LearnLens AI

Inspiration

Most learning platforms give everyone the same content at the same difficulty. Students memorize answers without truly understanding concepts. I wanted to build something that sees how you actually think — not just whether you clicked the right option. The key insight: when a student gets a question wrong, the real question isn't "what's the correct answer?" — it's "what misconception caused this error?"

What it does

LearnLens AI is an adaptive learning platform with 3 core innovations:

• AI Misconception Detection — When you answer incorrectly, the AI identifies the exact belief causing the error, explains why you're confused, and gives a targeted corrective exercise. Instead of "Wrong answer," it says "You're confusing X with Y. Here's why."

• Mastery Lens Algorithm — Multi-dimensional scoring that goes beyond accuracy: $$\text{Mastery} = 0.40 \times \text{Accuracy} + 0.20 \times \text{Confidence} + 0.15 \times \text{Speed} + 0.15 \times \text{Consistency} + 0.10 \times \text{Improvement}$$

• Knowledge Galaxy — Interactive SVG visualization where every concept is a node. Node size = mastery level, color = progress, connections = related concepts. Students literally see their knowledge gaps.

• Adaptive AI Tutor — Chat interface that changes explanations based on your detected skill level and learning patterns.

• Spaced Repetition — Smart review scheduling that reminds you before concepts fade from memory.

How we built it

Frontend: React 19, TypeScript, Vite, Tailwind CSS v4, Framer Motion, Lucide Icons. Custom glassmorphism dark UI with animated knowledge graph.

Backend: FastAPI (Python) with 5 API endpoints. Structured prompts for misconception detection, quiz generation, tutoring, and learning path creation.

AI: Google Gemini 2.5 Flash Lite — used for misconception analysis, adaptive tutoring, quiz generation, and personalized learning paths. All AI responses are parsed into structured JSON for the frontend to render.

Architecture: React SPA with global state via Context API. Backend proxies through Vite dev server. Demo data fallback when AI rate limits hit.

Challenges we ran into

• Gemini SDK deprecation — The google-generativeai package was deprecated mid-build. Migrated to the new google-genai SDK with a different API surface.

• API rate limits — Free tier caps at 20 requests/day. Built retry logic with exponential backoff and graceful degradation to demo data so the app always works.

• TypeScript type conflicts — Framer Motion's motion.button had incompatible event handler types with standard HTML button props. Solved with a custom interface.

• Structured AI output — Getting the AI to return parseable JSON consistently required careful prompt design and multiple fallback parsing strategies.

Accomplishments that we're proud of

• The misconception detection flow — the emotional centerpiece where AI says "You're not bad at this. LearnLens detected the exact misconception blocking your progress." This feels genuinely personal.

• Knowledge Galaxy — A beautiful, interactive SVG visualization that makes abstract knowledge feel tangible. Students can see their learning as a living constellation.

• Mastery Lens — The 5-dimension scoring algorithm that considers not just accuracy but confidence, speed, consistency, and improvement over time.

• Full-stack working app — 10 polished pages, 5 API endpoints, real AI integration, and a complete demo flow that works end-to-end.

What we learned

• Designing AI prompts that return structured, parseable JSON output
• Building adaptive algorithms that track learning across multiple dimensions
• The importance of graceful degradation when external services fail
• Creating a strong visual identity (glassmorphism, animated gradients) that serves both aesthetics and education
• How misconception detection can be more impactful than simple right/wrong scoring

What's next for LearnLens AI

• PDF/image analysis — Upload textbooks or screenshots for AI-powered content extraction
• Speech recognition — Students explain concepts verbally, AI analyzes understanding
• Multi-language support — Full Bangla language support for broader accessibility
• Collaborative learning — Study groups where AI compares knowledge gaps across students
• Teacher dashboard — Educators see class-wide misconception patterns
• Mobile app — Native iOS/Android for learning on the go

Built With

• adaptive
• artificial
• css
• edtech
• education
• fastapi
• framer
• gemini
• google
• intelligence
• learning
• machine
• motion
• node.js
• python
• react
• svg
• tailwind
• typescript
• vite