conceptlens-ai

ConceptLens AI turns a hard topic into an explanation, a concept map, and a quiz. Answer wrong and the matching concept lights up on the map, so students know exactly what to review.

Comment

Inspiration

Many students get stuck on a hard topic because textbook explanations are long and linear. Even after reading, it's hard to tell which concept they actually misunderstood. I wanted a learning tool where the explanation, the visual map, and the quiz are one connected loop, not three separate AI outputs.

What it does

ConceptLens AI is a single-page web app for school and college students.

  1. Enter a topic (for example, "Neural Networks") at Beginner level.
  2. Get a short explanation with a real-world example, plus an interactive concept map.
  3. Click any map node to see a short explanation of that sub-concept.
  4. Take a 3-question quiz with immediate feedback. If you answer wrong, the app explains why your choice is wrong and why the correct answer is right.
  5. The concept that question tests lights up in amber on the map with a "Review this" tag, and the map pans to it. The final summary lists the same nodes.

That wrong-answer-to-map link is the core idea: the quiz tells you where to go back to on the map.

How I built it

  • Frontend: React, Vite, TypeScript, Tailwind CSS, and React Flow for the concept map.
  • Backend: a small local Node/Express API with one endpoint, POST /api/generate.
  • AI: one Gemini call per topic that returns the explanation, map, and quiz as a single structured JSON result.
  • Validation: a shared Zod schema defines the response. The server also checks that every quiz question's nodeId exists in the map, that there are exactly 3 questions, and that answer indexes are valid. Bad output gets one retry, then a friendly error. No partial results are ever shown.
  • Key safety: the Gemini key lives only in a gitignored server/.env. The browser never sees it.

I built it with the Devpost Learn Skill Pack, writing scope.md, prd.md, and spec.md before any code.

Challenges

  • Rate limits: Gemini returned HTTP 429 mid-build. The app maps it to a friendly "busy" message with a cooldown. I also added a dev-only fixture, enabled by an explicit flag and never used as a fallback, so I could keep building the UI while quota was blocked.
  • Valid is not the same as correct: Zod proved a quiz nodeId existed, but not that it pointed to the concept the question actually tested. Running the live flow showed some questions pointed at the root topic. I tightened the prompt so each question targets the most specific concept.
  • Shallow feedback: my first quiz feedback gave the right answer without the reason. I extended the schema to include explanations for each option and rewrote the prompt so students learn from mistakes.

What I learned

  • Plan first. Writing the scope, requirements, and spec before coding kept the project small and focused.
  • Structured output has two layers: the model can follow a schema, but the server still has to check the relationships between fields.
  • Handle failure on purpose: loading states, rate limits, and malformed output are part of the product, not afterthoughts.
  • Keep secrets in server-side config, and check by eye that the live output means what the schema says it does.

What's next

Intermediate and Advanced levels, a "what to study next" list, and saved progress.

Built With

Share this project:

Updates

Submission history