German Flashcard

A lightweight German vocabulary learning experience.

TECH STACK:Next.jsTypeScriptTailwind CSSWeb Speech API

THE PROBLEM

Operational Friction

One of the most persistent hurdles in learning German is mastering grammatical gender (der, die, das) and case agreements. Existing apps often bury rapid drill practice beneath complex gamification.

THE SOLUTION

Targeted Architecture

A lightweight, distraction-free flashcard web application centered around rapid article drills, color-coded noun genders, and native browser speech pronunciation.

CAPABILITIES // PRODUCT FEATURES

Key Product Capabilities

A1–B1 curated noun deck with gender color coding
SM-2 algorithmic spaced repetition review queue
Native speech synthesis pronunciation audio
Offline progressive web app capability

ENGINEERING OBSERVATIONS

Architecture & Decisions

Built with static generation for instant page transitions. Uses Web Speech API for zero-cost audio pronunciation.

## Project Overview German Flashcard was built to solve a practical personal learning need: rapidly internalizing noun genders and declensions without opening bloated language learning platforms. ### Architecture Highlights - **Static JSON Data**: Curated word lists are embedded as static data structures, enabling instantaneous offline drills. - **Spaced Repetition Algorithm**: Implements a modified SuperMemo (SM-2) algorithm calculated client-side to schedule subsequent card reviews based on user recall ratings (1 to 5).

SPECIFICATION SHEETJTM/SPEC

IDENTIFIERgerman-flashcard

STATUSLIVE

YEAR2025

ORIGINJATIMULYO / ID