Vocab deck
Vocab Deck I've been revisiting my existing projects to improve them by adding features, refining the UI/UX, and making them more reliable. Vocab Deck is one of them. It's a vocabulary practice app that helps users lea
Vocab Deck
I've been revisiting my existing projects to improve them by adding features, refining the UI/UX, and making them more reliable. Vocab Deck is one of them.
It's a vocabulary practice app that helps users learn words through different study modes and track their progress.
Vocab Deck lets users choose a built-in or custom vocabulary deck and practice through flashcards, quizzes, typing exercises, or a matching game. The frontend validates vocabulary data and uses a pure-function game engine to generate randomized sessions, with features like answer checking, distractor generation, and real-time feedback. Built-in decks are served by the FastAPI backend, while custom decks and theme preferences are stored in the browser. Study progress stays in memory and resets when the page reloads.
FEATURES -
Four Study Modes
β’ 3D Flashcards - Review words and meanings.
β’ Multiple-Choice Quizzes - Test your understanding.
β’ Typing Practice - Practice active recall with accent-insensitive answer checking.
β’ Matching Game - Match words with their meanings
Built-in Language Decks:
β’ English β French
β’ English β German
β’ English β Japanese
Custom Decks:
Create and edit decks, with JSON and CSV import/export to manage and reuse vocabulary lists.
Progress Tracking:
Track study statistics, streaks, and time spent across different study modes.
TECH STACK
Backend -
Python 3.11
FastAPI 0.110+
Uvicorn
Pydantic 2
Frontend -
Node.js 18+
React 18 + TypeScript
Vite
Testing -
Vitest + Testing Library
Playwright
The project is live, and contributions are welcome! You can contribute to the codebase or open an issue to report bugs, suggest improvements, or propose new features.
Live Demo: https://vocab-deck.vercel.app/
Vocab Deck
Vocab Deck is a vocabulary practice application that helps language learners memorize words through four interactive study modes. It provides a modern React frontend backed by a FastAPI vocabulary service. Built-in decks cover EnglishβFrench, EnglishβGerman, and EnglishβJapanese; users can also create, edit, import, and export custom decks entirely in the browser.
Features
- Four study modes: Flashcards (with 3D flip), Multiple-choice Quiz, Typing (accent-insensitive option), Matching
- Three built-in language pairs: EnglishβFrench, EnglishβGerman, EnglishβJapanese (50 entries each, directly comparable)
- Custom decks: Create, edit, import (JSON/CSV), export; validated client-side with same rules as built-in decks
- Session tracking: Per-mode stats (correct/incorrect, streaks, time) preserved across mode switches; reset on demand
-
Theme support: Light/dark with
prefers-color-schemedetection andlocalStoragepersistence, no flash on load -
Accessibility:
prefers-reduced-motionswaps flip for instant face swap; focus-visible outlines; semantic HTML -
Offline-capable custom decks: Stored in
localStorage, portable via JSON/CSVβ¦
Feel free to explore the project and share your feedback.
Originally published by Dev.to WebDev. Aggregated on AIWithGhost for educational purposes β full credit and traffic to the original publisher.