logo

ExplainIt — Instant clarity + teach-back learning in one place

Inspiration

Learning breaks down when “understanding” is scattered: an article in one tab, a video in another, half-finished notes somewhere else—and no fast way to confirm you can actually explain the idea.

ExplainIt is built around two ideas:

Instant clarity: paste a topic and get a structured explanation you can use.
Teach-back: the fastest way to learn is to explain it back—and get feedback on what’s missing.

What it does

ExplainIt is a dark, local-first learning app that helps you learn any topic faster:

Input a topic (typed or voice input/recording) and choose an audience level (5-year-old → expert)
Generate a structured explanation:
- title, 1‑sentence summary, analogy, key points, key terms (with definitions), and related topics
Listen in-app with a built-in player:
- plays via Web Speech API (TTS) for generated scripts
- plays recorded audio when you used voice recording
- play/pause, speed control, skip, and seek (plus a transcript view you can jump around)
Stay organized locally:
- History, Saved, and Settings
- everything stored local-first in localStorage (no account required)
Share:
- copy/share a direct /results/[id] link from the results screen

How we built it

Next.js (App Router) for routing + server route handlers
Central app context for app state, settings, toasts, and explanation lifecycle
Local-first persistence using localStorage for history/saved/settings
Speech features
- Voice input via browser Speech Recognition (fills the input live)
- Voice recording via MediaRecorder + transcript segments with timestamps
- Audio playback via Web Speech API (TTS) or recorded audio playback when available
Server routes implemented for AI + speech
- ElevenLabs speech-to-text (/api/transcribe)
- Optional ElevenLabs text-to-speech in teach (returns a data URL when enabled)

Challenges

Speech APIs vary by browser → required fallbacks and careful UX handling
TTS isn’t a real media element → progress + seeking needed custom logic
Keeping the UI “never stuck” → loading overlays, errors, and reliable state transitions
Strict JSON outputs → disciplined contracts so the UI can safely parse and render

What we’re proud of

A polished, design-driven dark UI with clean navigation
A strong local-first loop: generate → review → history/saved → revisit
A “player-like” experience on top of browser speech synthesis and recorded audio
A solid foundation for teach-back (server routes already in place)

What we learned

AI features need contracts: structured output makes UI predictable and maintainable
Mocking early lets you ship UX fast without blocking on prompting/model tuning
Browser-native speech is great for MVPs—but needs guardrails for reliability

What’s next

Replace mocked generation with a real /api/generate endpoint returning the same schema
Implement real PDF export from the structured explanation
Ship the full teach-back loop: teach → user explains → analyze → next question
Improve voice reliability across browsers + optional higher-quality TTS