Skip to content

State Management

Jump to bottom
dagustin415 edited this page Feb 2, 2026 · 3 revisions

State Management

Architecture

Coding Drills uses a layered state management approach:

React Context (global) ──→ Custom Hooks (domain) ──→ localStorage (persistence)

Context Providers

ThemeProvider (components/ThemeProvider.tsx)

  • Provides dark/light theme toggle
  • Uses useSyncExternalStore for SSR-safe hydration
  • Persists theme choice to localStorage
  • Applies CSS class (dark/light) to <html> element
  • Default: dark mode

ProgressProvider (components/ProgressProvider.tsx)

  • Tracks solved problems per language (Set<string> per LanguageId)
  • Tracks drill stats (attempts, accuracy, streaks, average time)
  • Tracks quiz stats
  • Supports export/import (JSON with version)
  • Supports full reset
  • Uses useSyncExternalStore + localStorage

Custom Hooks

Hook File Purpose
useDrill hooks/useDrill.ts Full drill session state: problem management (shuffle, filter), answer checking, session results, auto-advance
useQuiz hooks/useQuiz.ts Full quiz session state: question management, scoring (base + streak + time), per-question time limits
useProgress hooks/useProgress.ts Wraps ProgressProvider context for easy consumption
useAllProgress hooks/index.ts All progress data across languages
useProblemProgress hooks/useProblemProgress.ts Problem-specific progress tracking
useTimer hooks/useTimer.ts Timer modes: up/down/none, countdown, stopwatch
useSettings hooks/useSettings.ts User settings: theme, sound, preferences
useTheme hooks/index.ts Theme access shortcut
useSound hooks/index.ts Sound effects
useCountdown hooks/index.ts Countdown timer
useDebounce hooks/index.ts Debounced value
useInterval hooks/index.ts Interval timer
useStopwatch hooks/index.ts Stopwatch timer

localStorage Keys

Key Content
coding-drills-progress Solved problems, drill stats, quiz stats
coding-drills-settings User preferences (theme, sound, etc.)
coding-drills-theme Theme choice (dark/light)
coding-drills-flashcards Study mode: card ratings, session history, mastery tracking
frontend-quiz-leaderboard-{framework} Per-framework quiz leaderboard

Storage Module (lib/storage.ts)

SSR-safe localStorage helper with:

  • isBrowser() guard for server-side rendering
  • Progress CRUD (drill/quiz/regex/session)
  • Settings management with sensible defaults
  • Export/import (JSON with version number)
  • Statistics queries (accuracy, time, recent languages)

URL State

Dynamic route segments provide URL-based state:

  • [language] — Current programming language
  • [framework] — Current frontend framework
  • [problemId] — Current problem
  • [exerciseId] — Current exercise
  • [patternId] — Current UI pattern

Interview-Recommended Module (lib/flashcards/interview-recommended.ts)

Curated interview-recommended method sets for technical screening preparation. Provides static method collections organized by language:

  • JavaScript: 130+ methods (Array, String, Object, Promise, etc.)
  • TypeScript: Superset of JavaScript (all JS methods + TypeScript-specific methods)
  • Python: 120+ methods (str, list, dict, tuple, set, etc.)

Used by StudySetup component to filter flashcards for interview prep focus.

Feature Flags (lib/feature-flags.ts)

OpenFeature SDK with InMemoryProvider (development mode). Ready to swap with LaunchDarkly/Flagsmith in production.

Flag Default Description
interviewMode on AI mock interview feature
animatedQuiz on Quiz animations
quizMethodHints on Show hints in quiz
darkModeToggle on Theme toggle visibility
leaderboard on Leaderboard feature
keyboardShortcuts on Keyboard shortcuts
aiHints on AI hint feature

Coding Drills Wiki

Home

Architecture

Systems

Implementation

Development

Clone this wiki locally