Trung HauTrung Hau
Nguyen Trung Hau2026-08-275 min read

English From Zero — All-in-One Self-Learning Platform

Comprehensive self-learning web app with a 6-month roadmap (180 lessons), Local-First IndexedDB architecture, integrated Gemini AI Coach & AI Practice Arena, Flashcard SRS & WebRTC P2P sync.

VibeCodingReactTypeScriptDexie (IndexedDB)Gemini AIWeb Speech APIWebRTC P2PTailwindCSSZodVitestPlaywright
English From Zero — All-in-One Self-Learning Platform

Project Overview & VibeCoding Mindset

English From Zero is an interactive, local-first web application designed specifically for absolute beginners progressing from CEFR A1 to B1. Instead of passive rote reading, English From Zero implements an active Interactive Learning Loop: learn new concepts, listen to pronunciation, type and correct sentences, practice speech shadowing, collect mistakes, and review via spaced repetition. Built with a VibeCoding approach—merging AI-assisted speed with clean client-side architecture—the app requires zero cloud database servers, offering instant load times and absolute user data privacy.

Curriculum Overview and Study Progress Dashboard (English UI)
Curriculum Overview and Study Progress Dashboard (English UI)

6-Month Curriculum & Interactive Learning Loop

  • Structured 180-Day Roadmap: Systematically divided across 6 months covering foundational IPA pronunciation, core grammar tenses, practical vocabulary, workplace communication, email writing, and conversational confidence.
  • Interactive Learning Loop: Each lesson engages multiple sensory pathways: Vocabulary/Grammar introduction → High-quality TTS audio listening → Speech Shadowing (MediaRecorder) → Typing & sentence translation → Automated mistake collection.
  • Smart Answer Checker: Context-aware answer evaluator with typo tolerance, contraction equivalence (e.g., don't = do not), and punctuation normalization for frictionless learning.
  • Grammar Lessons & Offline Dictionary: Over 100 dedicated grammar topics and a built-in Core Dictionary for instant word lookups without leaving the study flow.
Step-by-step interactive lesson player with audio feedback and smart validation
Step-by-step interactive lesson player with audio feedback and smart validation

Instant Text Selection Toolbar & Contextual AI Lookup

  • Contextual Selection Toolbar: Select any word, phrase, or sentence across the entire website to instantly trigger an interactive action bar: Browser TTS, Studio Gemini AI Voice, Multi-speed selector (0.5x - 1.25x), Dictionary Lookup, AI Quick Translation, and Deep AI Query.
  • Ask AI Assistant Dialog: Dedicated dialogue interface for querying the AI tutor regarding the selected text, equipped with one-tap prompt templates (Grammar breakdown, 3 realistic examples, Synonyms/antonyms, Common pitfalls).
  • Smart Vocabulary & Phrase Modal: Look up full definitions, IPA phonetics, and extracted sentence sub-phrases, with 1-click addition to personal spaced repetition decks.
Smart floating toolbar appearing instantly upon text selection anywhere on the site
Smart floating toolbar appearing instantly upon text selection anywhere on the site
Ask AI Assistant (Gemini) Modal — In-depth grammar, context, and usage explanations
Ask AI Assistant (Gemini) Modal — In-depth grammar, context, and usage explanations
Dictionary Lookup & Save Modal — Phrase analysis and instant SRS deck integration
Dictionary Lookup & Save Modal — Phrase analysis and instant SRS deck integration

Multi-Mode Flashcard Review & Spaced Repetition (SRS)

  • Interactive 2-Way Flashcards (EN ↔ VI): Smooth card-flipping with standard IPA phonetics, clear pronunciation audio, and contextual example sentences. Supports random bi-directional recall.
  • 4 Dedicated Study Modes: Flashcards, Multiple Choice, Spelling Dictation, and Listening Recall.
  • Keyboard-Centric Navigation: Full keyboard shortcuts: Space (Flip Card), Arrow keys (Navigate), C (Mark Mastered), R (Replay Audio), and S (Shuffle Deck).
  • Spaced Repetition Algorithm: Automatically schedules optimal review intervals (1, 3, 7, 14, 30 days) to prevent memory decay.
Multi-mode Interactive Flashcard Deck with Keyboard Shortcuts
Multi-mode Interactive Flashcard Deck with Keyboard Shortcuts

AI Practice Arena — Adaptive AI-Generated Exercise Sets

  • Dynamic Adaptive Exercise Generation: AI analyzes historical attempt logs and vocabulary weaknesses to construct tailored practice sets addressing specific learner gaps.
  • Diverse Exercise Types: Fill-in-the-blanks, Contextual Multiple Choice, Sentence Transformation, and Translation tasks.
  • Practice Library & Session History: Save generated sets locally for unlimited retakes, performance statistics tracking, and longitudinal progress monitoring.
AI Practice Arena — Solving Adaptive Practice Sets Generated by Gemini AI
AI Practice Arena — Solving Adaptive Practice Sets Generated by Gemini AI

AI Coach & Local-First P2P Sync Architecture

  • 24/7 AI Companion: Evaluates learning behaviors, independent production rates, error recovery efficacy, and tailors daily motivation.
  • 14 IndexedDB Tables via Dexie.js: Zero backend reliance, 100% on-device data persistence, uncompromising privacy, and zero server latency.
  • Serverless QR-Based WebRTC P2P Sync: Direct device-to-device synchronization pairing desktop and mobile in seconds.
  • Atomic Single-Transaction Backup/Restore: Full database backup and restoration in one ACID transaction.
AI Coach companion evaluating strengths and tailoring practice material
AI Coach companion evaluating strengths and tailoring practice material
Settings hub with QR-code WebRTC P2P synchronization and atomic backup
Settings hub with QR-code WebRTC P2P synchronization and atomic backup

Tech Stack

React 19, TypeScript 5.9, Vite 7, TailwindCSS v4, Dexie.js (IndexedDB), Google GenAI SDK (@google/genai), Web Speech API, WebRTC DataChannel (PeerJS), HTML5 QR Code, Lucide React, React Router 7, Zod, Vitest, Playwright.

Live Demo