Learn any language vocabulary — add your own words or use built-in templates and let the app quiz you until every word sticks.

https://crare.github.io/vocabulary-app?ref=readme

• Custom word lists — type words in two languages (one per line), or import/export JSON files.
• Built-in templates — Finnish–Swedish sets included; load them with one click.
• Multiple test modes — writing, multi-select, drag-and-drop matching, and sentence fill-in-the-blank.
• Sentence training — optionally add sentences for contextual practice.
• Configurable difficulty — adjust how many correct answers are needed, number of choices, answer delay, etc.
• Progress tracking — results, charts, and full test history stored in local storage.
• Dark mode — toggle between light and dark themes.
• Sound effects — synthesised audio feedback with adjustable volume.
• Tooltips & instructions — hover over buttons and controls for contextual help; a dismissible "How to use" banner guides new users.
• Offline-ready — works fully in the browser; no server required.

The app follows WAI-ARIA best practices:

• Skip-to-content link — keyboard users can jump straight to the main area.
• Semantic landmarks — <nav>, <main> and proper heading hierarchy.
• ARIA labels — all inputs, sliders, buttons, and interactive elements have meaningful labels.
• Live regions — test results (correct / incorrect) are announced to screen readers via aria-live="assertive".
• Keyboard navigation — drag-and-drop items support Enter / Space as alternatives; all controls are reachable via Tab.
• Color contrast — default theme colours meet WCAG AA.
• Focus management — text inputs auto-focus when a new question appears.

Input your own words or use existing sets. Any language possible, if you have the words for both languages.

Writing test, randomly switching between both languages.

Multiselection test, randomly switching between both languages.

Drag and drop words in order.

Fill in words for sentences.

Check results after test, see what words you have to improve more.

Check graphs for progress.

Change settings to your liking.

Try dark mode for those late night hours.

• React 19
• Vite 5
• TypeScript 5
• MUI 7
• Vitest for testing
• Deployed to GitHub Pages

npm install

npm run dev

Opens at http://localhost:3000/vocabulary-app/

npm run build

Tests live in the tests/ folder and use Vitest.

Run once:

npm test -- --run

Run in watch mode:

npm test

npm run preview

npm run deploy

src/
  pages/          # Route-level views (Main, Settings, Testing, Results, History, Credits)
  components/     # Shared UI components (charts, tables, chips)
  hooks/          # Custom React hooks
  util/           # Helpers, storage, logger, sounds
  wordsets/       # Built-in word set JSON files & types
tests/            # Vitest unit tests
.spec/            # Architecture & design specs for AI agents

See src/AGENTS.md and the .spec/ directory for architecture docs, data models, and coding conventions aimed at AI coding assistants.