Skip to content

feat: add speaking practice with Web Speech API#19

Open
fasuizu-br wants to merge 2 commits intosilvioprog:mainfrom
fasuizu-br:feat/speaking-practice
Open

feat: add speaking practice with Web Speech API#19
fasuizu-br wants to merge 2 commits intosilvioprog:mainfrom
fasuizu-br:feat/speaking-practice

Conversation

@fasuizu-br
Copy link
Copy Markdown

Summary

  • Add pronunciation training feature to the study flow using the browser's native Web Speech API
  • Word-by-word visual diff (green=correct, red=missing, orange=extra) with accuracy score badge
  • Zero cost, zero new runtime dependencies, graceful degradation for unsupported browsers

Architecture

New files (7):

  • src/lib/speechUtils.ts — Pure text comparison (normalizeText, LCS algorithm, buildDiff, compareTexts)
  • src/hooks/useSpeechRecognition.ts — React hook wrapping Web Speech API with full state machine
  • src/components/Study/SpeakingPractice.tsx — UI component (idle → listening → processing → done/error)
  • src/lib/speechUtils.test.ts — 57 tests (normalization, LCS, diff, edge cases, stress tests)
  • src/hooks/useSpeechRecognition.test.ts — 21 tests (state transitions, errors, cleanup, memory leaks)
  • src/components/Study/SpeakingPractice.test.tsx — 17 tests (UI states, colors, interactions)
  • src/test-setup.ts — jest-dom matchers setup

Modified files (5):

  • src/components/Study/Transcript.tsx — Integration point
  • src/vite-env.d.ts — Web Speech API TypeScript declarations
  • vitest.config.ts — jsdom environment + coverage config
  • package.json / package-lock.json — Dev dependencies (@testing-library/react, jest-dom, jsdom, user-event)

Test plan

  • 121 tests passing (57 + 21 + 17 + 26 existing)
  • 100% coverage on speechUtils.ts (statements, branches, functions, lines)
  • Build clean (TypeScript + Vite)
  • Lint clean (ESLint)
  • Browser tested: all states verified visually (idle, listening, processing, error, done, retry)
  • Enterprise-grade review: fixed dead code in types, hyphen normalization, memory leak on double-start, stuck processing state

Claude DevOps Engineer added 2 commits February 16, 2026 19:19
Allow users to download their study data as a JSON file and import it
back, enabling backup and transfer between devices. Export serializes
all studies with version metadata; import validates and replaces current
data after user confirmation via dialog.
Add pronunciation training feature to the study flow. After viewing a
transcript, users can click "Practice speaking" to record their speech
via the browser's native Web Speech API. The spoken text is compared
word-by-word using an LCS (Longest Common Subsequence) algorithm,
producing a colored diff (green=correct, red=missing, orange=extra)
with an accuracy score badge.

- Zero cost: uses native browser API, no external services
- Zero new runtime dependencies
- Graceful degradation: hidden if browser lacks support
- 121 tests (57 speechUtils + 21 hook + 17 component + 26 existing)
- 100% coverage on speechUtils.ts
@fasuizu-br fasuizu-br force-pushed the feat/speaking-practice branch from bed78f3 to 8dda8f5 Compare February 16, 2026 22:19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant