Frontend Drills System

Frontend Drills System

Overview

The Frontend Drills system (/lib/frontend-drills/) provides a complete learning platform for 4 frontend frameworks: React, Angular, Vue, and Native JavaScript. Each framework has its own set of drill problems, quiz questions, UI patterns, and cheatsheets.

Module Structure

lib/frontend-drills/
├── index.ts              # Public API barrel
├── types.ts              # All type definitions
├── config.ts             # Framework config (colors, icons, docs URLs)
├── validator.ts          # Drill answer validation
├── quizGenerator.ts      # Quiz generation + scoring engine
├── problems/             # Drill problems per framework
│   ├── index.ts
│   ├── react.ts
│   ├── angular.ts
│   ├── vue.ts
│   └── native-js.ts
├── quiz/                 # Quiz questions per framework
│   ├── index.ts
│   ├── react.ts
│   ├── angular.ts
│   ├── vue.ts
│   └── native-js.ts
├── cheatsheet/           # Cheatsheets per framework
│   ├── index.ts
│   ├── react.ts
│   ├── angular.ts
│   ├── vue.ts
│   └── native-js.ts
└── ui-patterns/          # UI pattern catalog per framework
    ├── index.ts
    ├── types.ts
    ├── tutor-prompt.ts
    ├── react.ts
    ├── angular.ts
    ├── vue.ts
    └── native-js.ts

Framework Configuration

Each framework has a config in config.ts:

Framework	ID	Color	Icon	Version	Docs
Native JavaScript	native-js	Yellow	JS	ES2024	MDN
React	react	Cyan	⚛	19	react.dev
Angular	angular	Red	Ng	19	angular.dev
Vue	vue	Emerald	V	3.5	vuejs.org

Learning Modes

1. Drill Mode

Users type framework-specific code from memory. Data in problems/[framework].ts.

Validation: JavaScript/TypeScript problems are executed via validateJavaScript() in lib/codeValidator.ts, which supports both single-expression answers (e.g. arr.map(x => x * 2)) and multi-statement code (e.g. const result = arr.filter(...)\nresult). The validator uses depth-aware statement detection — it tracks {}/()/[] nesting depth so that keywords like const inside IIFEs or arrow function bodies are not mistaken for top-level statements. Only statements at depth 0 trigger multi-statement handling and return-value extraction. Angular problems use validPatterns regex arrays for pattern-based validation instead of code execution.

TypeScript type annotations are stripped before execution via stripTypeScriptAnnotations() in lib/codeRunner.ts, using a looksLikeTypeAnnotation() heuristic to distinguish types (: string) from value expressions (: item.name) to avoid corrupting object literals.

2. Quiz Mode

Multiple-choice questions about framework concepts. Scoring includes:

• Base points per correct answer
• Streak multiplier (3x at 3+ streak, 3x at 5+ streak)
• Time bonus for fast answers
• localStorage-based leaderboard per framework

3. Training Mode

Individual problem selection. 460 problems across all 4 frameworks, each with hints, a real-world context example, and auto-generated starter code.

Starter code generation (generateTrainingStarter): When a training problem loads, the editor is pre-populated with scaffold code derived from the problem's sample solution and hints:

1. Hints are rendered as numbered comments at the top (e.g. // 1. Use ternary operator)
2. The sample's first line is parsed to detect structural patterns:
   • Arrow function (const fn = (args) => { ... }) — outputs the function signature with // Your code here placeholder
   • Traditional function (function fn(args) { ... }) — same treatment
   • Single-line arrow (const fn = (args) => expr) — expanded to block form with placeholder
   • Expressions / decorators / HTML — hints-only (no structural scaffold)
3. The Reset button restores this starter code (not an empty editor)

Real-World Context Examples: All 460 training problems include a realWorldExample field — a short sentence explaining why each pattern matters in real-world applications. Displayed as a blue callout below the problem description.

Comprehensive audit (2026-02): All 460 problems across React, Angular, Vue, and Native JS were audited for:

• Accurate problem text (no "Implement X" when setupCode provides X)
• Correct rendering behavior claims (e.g. React's falsy value rules)
• API name consistency between text and sample code
• Validator correctness (object literals with semicolons, comment filtering)
• Angular patterns accepting TypeScript idioms (! definite assignment, any variable name)

Coverage:

• React: 116 problems with real-world examples
• Angular: 116 problems with real-world examples
• Vue: 114 problems with real-world examples
• Native JavaScript: 114 problems with real-world examples

4. Study Mode

Self-paced flashcard review for framework knowledge with Q&A card preview.

Setup phase features:

• Source selection (Drill Mode Methods, Quiz Questions, UI Patterns)
  • Drill Mode Methods: Questions derived from training problems across all frameworks
  • Quiz Questions: Multiple-choice questions about framework concepts
  • UI Patterns: Pattern-specific questions
• Category filtering with question count badges per category
• Difficulty filter
• Interview Recommended filter (selective: 14 core pattern categories, 8 core frontend categories, excludes hard difficulty)
• Deck size slider
• Card-based preview grid with side-by-side Question/Answer layout (responsive: stacked on mobile, side-by-side on large screens)
• Category/Difficulty/Source badge pills for each preview card

Study session:

• Front/back flashcard reveal animation
• 3-button confidence rating (Missed/Shaky/Knew It)
• Progress bar with running tally
• Session summary with breakdown chart

5. UI Patterns

Catalog of real-world UI patterns per framework:

6 categories:

• Forms & Input — form validation, search, multi-step forms
• Interactive — modals, accordions, drag-and-drop
• Data Display — tables, cards, lists, charts
• Navigation — tabs, breadcrumbs, sidebars
• Advanced — infinite scroll, virtual lists, real-time
• UI Components — buttons, badges, tooltips

Pattern detail page features:

• Inline mode tabs (Study/Quiz modes with studyHref/quizHref props for seamless navigation)
• Skeleton starter code extracted from demoCode (setup/structure visible, logic as TODOs)
• Monaco code editor (editable JS tab, read-only HTML/CSS tabs)
• Live preview in sandboxed iframe
• Reference "Live Demo" with the complete working solution
• AI tutor (WebLLM) for hints and explanations
• Building Blocks checklist (pattern concepts)

Starter code generation: When a pattern has demoCode.js, the skeletonizeDemo() function creates a learning-friendly skeleton:

1. Extracts setup lines (imports, state declarations, DOM refs) from the actual demoCode
2. Replaces implementation logic with concept-based TODO steps
3. Adds framework-specific teardown (return/mount/template)

This ensures the starter code matches the Live Demo structure so users can cross-reference.

6. Cheatsheet

6 sections per framework with interactive Monaco editors:

• Overview, Core Concepts, Key APIs, Common Patterns, Code Examples, Ecosystem

Content block types: text, code, interactive-code, list, table, tip, warning, subheading.

Features: scroll spy for active section, collapsible sections, mobile TOC dropdown.

Public API (index.ts)

// Config
FRAMEWORK_CONFIG, FRAMEWORK_IDS, isValidFramework()

// Problems
getProblemCount(framework), getProblems(framework)

// Quiz
getQuizQuestionCount(framework), getQuizQuestions(framework)

// UI Patterns
getUIPatternCount(framework), getUIPatterns(framework),
getUIPatternById(framework, patternId),
UI_PATTERN_CATEGORIES, UI_PATTERN_DIFFICULTY_CONFIG

// Cheatsheet
getCheatsheetSectionCount(framework), getCheatsheet(framework)