misconsuption-detector

Inspiration

Education today is overly focused on the final answer. When a student gets a question wrong, traditional grading systems simply mark it with a red "X" and provide the correct answer. But as educators, we know that every wrong answer traces back to a specific cognitive error. We were inspired by the gap in modern EdTech: tools are great at telling students they are wrong, but terrible at explaining why their specific train of thought failed. We wanted to build a platform that acts like a 1-on-1 tutor—identifying the exact named misconception in a student's logic and gently correcting their mental model.

What it does

Misconception Detector goes beyond right and wrong. When a student answers a question, they are prompted to explain their underlying reasoning. Our AI engine then analyzes this text to instantly diagnose the specific cognitive misconception behind their logic.

Instead of a generic "Incorrect," the student receives a structured breakdown:

1. The Named Misconception: (e.g., Impetus Theory, Lamarckian Inheritance)
2. The Explanation: A personalized breakdown of where their logic diverged.
3. The Correction: The actual truth, explained simply.

For teachers, the platform aggregates these individual submissions into a live, class-wide Misconception Frequency Map, allowing educators to instantly see which flawed mental models are most prevalent in their classroom and adapt their lesson plans dynamically.

How we built it

We built the platform using a modern, high-performance web stack:

• Frontend: React 18 and Vite, utilizing Tailwind CSS for a premium, glassmorphic dark-mode UI. State management is handled smoothly via Zustand and TanStack React Query.
• Backend: Node.js and Express, architected as a lightweight, secure API. We utilized Zod for strict type validation and helmet for HTTP header security.
• AI Engine: We integrated the Groq API (specifically the blazing-fast llama-3.1-8b-instant model) utilizing aggressive system prompting to force the LLM to output highly structured JSON schemas for instantaneous, parse-able diagnoses.
• Deployment: To ensure rapid delivery, we utilized serverless-http to wrap our Express backend, allowing us to deploy the entire monorepo as a lightning-fast serverless application on Netlify.

Challenges we ran into

One of our biggest hurdles was engineering the AI prompt to be deterministic. LLMs are naturally conversational, but we needed our Groq endpoint to return strict, machine-readable JSON that adhered to our specific interface (containing severity levels, boolean flags, and strings) without any conversational filler. Fine-tuning the system instructions to strictly enforce this JSON schema took dozens of iterations.

Additionally, adapting a persistent Express backend to run smoothly on Netlify's serverless architecture required a deep dive into serverless-http and custom esbuild configurations to bundle the backend seamlessly within a monorepo setup.

Accomplishments that we're proud of

We are incredibly proud of the Teacher Dashboard. Watching individual student answers flow in and automatically aggregate into a ranked, color-coded "Misconception Frequency Map" is deeply satisfying. It perfectly bridges the gap between individual student struggles and classroom-level analytics.

We are also extremely proud of the premium UI/UX. The dark mode, subtle pulse animations, and glassmorphism make the platform feel like a luxury SaaS product rather than a typical, clunky educational tool.

What we learned

We learned a tremendous amount about AI structured output generation and how to effectively integrate rapid inference models like Groq into a traditional full-stack web application. We also gained deep practical experience in monorepo management, serverless deployment architectures, and advanced React state synchronization.

What's next for Misconception-Detector

This MVP is just the foundation. Moving forward, we plan to:

1. Database Persistence: Migrate our in-memory data store to a persistent PostgreSQL database (via Supabase) to support long-term analytics.
2. Custom Curriculum: Build a portal for teachers to upload their own questions, rubrics, and PDFs, allowing the AI to dynamically generate misconceptions based on proprietary lesson plans.
3. LMS Integration: Expose webhooks and APIs to integrate directly with Google Classroom and Canvas, making it a seamless addition to existing classroom workflows.

Built With

• esbuild
• express.js
• groq
• llama-3.1
• netlify
• node.js
• react
• tailwindcss
• typescript
• vite
• zustand