TeachBack

Inspiration :

There's a moment everyone recognizes: you're sure you understand something a concept from class, a system at work, how some piece of tech actually functions right up until someone asks you to explain it out loud. Suddenly the sentences don't finish themselves. That gap between recognizing an idea and being able to teach it is basically the whole premise of the Feynman technique: if you can't explain something simply, you don't understand it as well as you think you do.

Most study tools quiz you on facts. None of them make you actually talk, in your own words, to something that pushes back like a real student would. We wanted to build the thing that catches you mid-sentence the moment you say "and then it just... does the thing" and realize you skipped the part that actually matters.

What it does:

Teachback flips the usual tutoring model. You pick a topic anything, a theorem, a historical event, how the Krebs cycle works and instead of an AI explaining it to you, you explain it to the AI. The AI plays a curious, moderately sharp student: it asks genuine clarifying questions, gets confused on purpose to see if you can re-explain something a different way, and this is the part that actually stings notices when you contradict something you said two minutes earlier.

When you're done, Teachback hands you a report grounded entirely in your own words: what you explained clearly (with the exact quote that proved it), what had gaps (again, quoted directly from the transcript, not generic feedback), and a short list of what's worth reviewing next. No vague "great job!" just an honest mirror.

How I built it :

1. Next.js 14 (App Router) + TypeScript + Tailwind CSS for the frontend three routes: a landing page to name your topic, a live chat screen for the teaching session, and a report screen.

2. Claude (Anthropic API) does double duty with two distinct system prompts: A student persona for the live chat instructed to stay in character, keep responses short, ask real questions, and never accidentally teach the concept back to the user.

A grading pass at the end that receives the full transcript and returns a strict JSON schema (overallScore, clearPoints, gaps, reviewSuggestions), with every single point required to be grounded in an actual quote from the transcript rather than generic praise or criticism.

1. State is kept intentionally simple: the topic, the running chat history, and the generated report all live in localStorage, so a page refresh mid-session doesn't lose your progress.

2. The whole thing went through two full visual identities during the build I started with a hand-drawn chalkboard aesthetic (dark green board, paper-card message bubbles, a hand-drawn SVG annotation that circled key quotes in chalk) before pivoting to a cleaner, modern light-mode SaaS look. The signature interactive element survived the pivot in spirit: instead of a chalk circle, gaps in your explanation now get a hand-drawn red pen circle around the exact quote that gave it away, animated on scroll.

Challenges I ran into :

Getting the AI to reliably return JSON. Asking an LLM to "output only JSON, no preamble" mostly works until it doesn't. More than once the model opened its report response with something conversational like "I'll explain this..." before the actual JSON object, which broke a naive JSON.parse. We initially tried fixing this with an assistant-turn prefill (seeding the reply with { so the model could only continue into valid JSON) a technique that works well on most Claude models, but this one specifically rejected it, since it requires the final message in the conversation to be a genuine user turn. We landed on a more defensive two-layer parser instead: try a straight parse first, and if that fails, walk the text to pull out the first balanced {...} object rather than giving up.

A very literal "explain it or the report reflects that." During testing, one of us tried to stress-test the grader by refusing to actually explain anything ("me self no know," "quite it," "stop asking questions ahhhh"). The report came back with a 2/100 and gap after gap, each one honestly quoting exactly what was said. It was a good if slightly humbling confirmation that the grading prompt does what it's supposed to: no generous grading on vibes, just what's actually in the transcript.

Stale state across sessions. I cached the generated report in localStorage so a page refresh wouldn't force a costly regeneration but initially forgot to invalidate that cache when a new teaching session started. The result: finishing a fresh session on a completely different topic would still show the report from the last one. The fix was straightforward once found (clear the cached report whenever a new topic is submitted), but it was a good reminder that "cache for resilience" and "cache invalidation" are two separate problems that both need solving.

Environment drift is its own kind of bug. A meaningful chunk of the build's friction wasn't in the code at all it was keeping local dev environments consistent. Tailwind v3 vs. v4 config differences, a stray extra package-lock.json one directory up confusing Next.js's workspace-root detection, and a missing autoprefixer dependency all produced errors that looked like styling or logic bugs but were actually just tooling mismatches. Good lesson in reading error stack traces carefully before assuming the application code is at fault.

What we learned :

1. Prompting an LLM to play a consistent character (a curious student who never breaks role) is a different skill than prompting it to complete a task it needs much tighter constraints on tone and response length to stay believable turn after turn.

2. Grounding every piece of AI-generated feedback in a verbatim quote from the user is a small design decision with an outsized effect on trust it turns "the AI says I'm wrong" into "here's literally what I said, and it doesn't hold up," which is a much more persuasive teacher.

3. Don't trust JSON-out-of-an-LLM to be clean JSON, ever always parse defensively, and know that not every model supports every prompting trick (like prefill) the same way.

What's next for TeachBack:

1. Topic history, so you can revisit past sessions and track whether your explanations are getting sharper over time.

2. Difficulty modes for the AI student a true beginner vs. a skeptical expert who pushes much harder on edge cases.

3. Voice input, to get closer to the original spirit of "explain it out loud."

What sets it apart

The "explain it to an AI" pattern isn't new there's a crowded field of Feynman-technique study apps doing some version of explain → get feedback. Researching that space surfaced a consistent gap: most of them stop at identifying what's wrong and never make you prove you fixed it, and none of them advertise catching self-contradiction across a conversation. Two features address that directly:

• Contradiction detection. The report doesn't just flag vague or incomplete explanations it has a dedicated section that catches you asserting something, then later in the same session saying something that directly conflicts with it. Both quotes are shown side by side, verbatim, so it's not a vague "be more consistent" note but the exact two sentences that don't add up.
• Practice quiz per gap. Every gap in the report comes with a "Test yourself" button that generates a short, CBT-style multiple-choice quiz targeting that specific weak point not the topic in general. Answer all three questions and the score is saved into the report itself, so the loop doesn't end at "here's what you got wrong" it closes with "and here's proof you fixed it."

Built With

• anthropic
• app-router
• claude
• claude-api
• css
• eslint
• generative-ai
• google-fonts
• html
• javascript
• json
• llm
• localstorage
• nextjs
• node.js
• npm
• postcss
• prompt-engineering
• react
• rest-api
• server-side-rendering
• tailwindcss
• typescript
• vercel
• webapp