-
Notifications
You must be signed in to change notification settings - Fork 1
Components
dagustin415 edited this page Feb 2, 2026
·
4 revisions
| Component | File | Description |
|---|---|---|
CodeEditor |
components/CodeEditor.tsx |
Monaco Editor wrapper — syntax highlighting, IntelliSense, language-aware |
CodeBlock |
components/CodeBlock.tsx |
Static code display with syntax highlighting |
CodeDisplay |
components/CodeDisplay.tsx |
Code output display (inline + block variants) |
LivePreview |
components/LivePreview.tsx |
Sandboxed iframe for live code preview (srcDoc + sandbox="allow-scripts") |
CategoryPicker |
components/CategoryPicker.tsx |
Category filter UI for drilling/quizzing |
DifficultyBadge |
components/DifficultyBadge.tsx |
Color-coded difficulty indicator (easy/medium/hard) |
LanguageIcon |
components/LanguageIcon.tsx |
Language icon with grid variant |
LanguageGrid |
components/LanguageGrid.tsx |
Home page language selection grid with problem counts |
MethodCard |
components/MethodCard.tsx |
Card for displaying method info in reference/quiz contexts |
Modal |
components/Modal.tsx |
Generic modal with Header, Body, Footer composition |
ProgressBar |
components/ProgressBar.tsx |
Animated progress bar |
QuestionCounter |
components/QuestionCounter.tsx |
"Question X of Y" display |
QuestionCountSlider |
components/QuestionCountSlider.tsx |
Slider for configuring quiz question count |
StatsBar |
components/StatsBar.tsx |
Stats display (accuracy, streak, time) |
Timer |
components/Timer.tsx |
Countdown/stopwatch timer |
| Component | File | Description |
|---|---|---|
GlobalNavbar |
components/GlobalNavbar.tsx |
Top-level global navigation bar |
Navbar |
components/Navbar.tsx |
Secondary navbar |
Breadcrumb |
components/Breadcrumb.tsx |
Breadcrumb navigation with typed items |
BackLink |
components/BackLink.tsx |
Back navigation link |
GoBackButton |
components/GoBackButton.tsx |
Go-back button |
Footer |
components/Footer.tsx |
Page footer |
| Component | File | Description |
|---|---|---|
ThemeProvider |
components/ThemeProvider.tsx |
Dark/light theme via React Context + useSyncExternalStore. Persists to localStorage. Applies CSS class to <html>. |
ProgressProvider |
components/ProgressProvider.tsx |
Progress tracking via React Context. Solved problems (Set<string> per language), drill stats, quiz stats. useSyncExternalStore + localStorage. |
ThemeToggle |
components/ThemeToggle.tsx |
Dark/light toggle button |
ClearDataDialog |
components/ClearDataDialog.tsx |
Confirmation dialog for clearing progress data |
| Component | File | Description |
|---|---|---|
FlashcardCard |
components/flashcards/FlashcardCard.tsx |
Card with front/back reveal animation |
ConfidenceRater |
components/flashcards/ConfidenceRater.tsx |
3-button rating (Missed/Shaky/Knew It) |
StudySetup |
components/flashcards/StudySetup.tsx |
Setup phase — sources, categories (with question count badges), deck size, card-based Q&A preview grid (side-by-side layout on large screens), Interview Recommended filter |
StudyProgress |
components/flashcards/StudyProgress.tsx |
Progress bar + running tally |
StudySummary |
components/flashcards/StudySummary.tsx |
Session results with breakdown chart |
| Component | File | Description |
|---|---|---|
PatternQuizContent |
components/PatternQuizContent.tsx |
Pattern recognition quiz UI |
PatternRecognitionGuide |
components/PatternRecognitionGuide.tsx |
Guide for algorithm pattern recognition |
ExerciseTutor |
components/ExerciseTutor.tsx |
AI exercise tutor (WebLLM integration) |
| Component | File | Description |
|---|---|---|
LoadingSpinner |
components/LoadingSpinner.tsx |
Loading indicator |
LoadingSkeleton |
components/LoadingSkeleton.tsx |
Skeleton loading placeholders |
EmptyState |
components/EmptyState.tsx |
Empty state display |
ErrorBoundary |
components/ErrorBoundary.tsx |
React error boundary with dev details toggle |
Located in components/visualizations/. 100+ lazy-loaded algorithm visualizations registered in components/visualizations/index.ts.
-
VizControls.tsx— Play/pause, step forward/back, speed slider, reset button
| Category | Example Visualizations |
|---|---|
| Tree Traversal | BFS, DFS, Level Order, Preorder, Postorder, Inorder |
| Binary Search | Standard, Rotated Array, Search Range |
| Sliding Window | Max Sum, Min Window Substring |
| Two Pointers | Valid Palindrome, Container with Most Water |
| Stack/Queue | Valid Parentheses, Min Stack |
| Linked List | Reverse, Merge Two, Remove Nth Node |
| Heap | Kth Largest, Merge K Sorted |
| Trie | Word Search, Autocomplete |
| Dynamic Programming | Climbing Stairs, Knapsack, LCS, Edit Distance, Coin Change, Unique Paths, Word Break |
| Graph | Course Schedule, Clone Graph, Number of Islands, Topological Sort, Word Ladder |
| Combinatorics | Permutations, Combinations, Subsets |
| Sorting | Merge Sort, Quick Sort |
| Backtracking | N-Queens, Sudoku Solver |
Each visualization implements a step-through animated walkthrough of the algorithm with shared VizControls.