Flashcards AI
Interactive active recall study tool featuring 3D card flips, phonetic speech audio, and AI magic generation.
Active Recall study and memorization web application designed to master technical terms and bilingual vocabulary without friction. Features realistic 3D card-flip animations via CSS 3D, spoken phonetic pronunciation using Web Speech API, CSV deck import/export powered by PapaParse, and an AI magic mode powered by Google Gemini API to autocomplete definitions and translations in one click.
System Objectives
Facilitate bilingual study and Active Recall memorization, removing friction from traditional static study methods.
Enable study deck import and export via standard CSV files and persistent client-side LocalStorage.
Integrate generative AI capabilities (Google Gemini API) to autocomplete translations, definitions, and phonetics in one click.
Deliver a fluid and accessible user experience with 3D card-flip animations and speech pronunciation across multiple languages.
Key Capabilities & Modules
Gemini Magic Mode: automatically generate comprehensive definitions and accurate translations by connecting your Gemini API Key.
Realistic 3D Card Flip: smooth 3D CSS rotateY transform effects allowing fluid toggling between question and answer sides.
Live Phonetic Pronunciation: in-browser text-to-speech synthesis via Web Speech API to practice accurate language pronunciation.
CSV Import & Export: instantly process and backup structured tabular study decks in the browser using PapaParse.
Client-Side Privacy: study decks and user API keys reside strictly inside your browser (LocalStorage) with zero external tracking.
Architecture & Design Specifications
Strict client-only privacy architecture: deck management and study state reside entirely within the browser's JavaScript runtime. When the AI mode is triggered, direct client-side HTTPS calls hit the Gemini API via the user's provided API Key with zero intermediate servers.
🔍 Click diagram to enlarge to fullscreen
Invariant Architectural Principles:
- Data Sovereignty & Privacy: zero user data is logged on backend servers, keeping all study progress strictly inside LocalStorage.
- Zero Friction: direct manual input, bulk CSV ingestion, or AI-assisted generation with no mandatory accounts or login walls.
- Sensory & Accessible: 3D tactile feedback paired with speech synthesis to reinforce multi-sensory bilingual retention.
Technology Stack
FRONTEND
LIBRARIES
APIS
AI
HOSTING
Reference Articles & Architecture Series
This application is fully documented in an engineering series published on the blog:
AI-Powered Programming: Creating My Own Magical Flashcards Study App
While helping my son study science in English, I realized we needed more than just covering the page with a hand. That’s how my …
Read full article →Evolutionary History & Versions (SemVer)
Formal record of releases, feature additions, and security patches:
Official Flashcards release with Gemini AI engine and phonetic speech synthesis
- Intelligent autocomplete mode integration with Google Gemini API for automated term and definition generation.
- Phonetic voice synthesis implementation powered by the browser's native Web Speech Synthesis API.
- CSV import and export support with PapaParse including downloadable sample templates.
- Three-dimensional card flipping animation (CSS 3D rotateY) and progress persistence in LocalStorage.
- Frozen state as a completed and self-contained study application.
3D animation engine and CSV template support
- Three-dimensional card flip implementation and basic text file processing.
Initial manual cards and bilingual study prototype
- Simple interface with manual term/definition pairs and basic score counter.