Skip to content

feat: Add algorithm visualization with step-by-step animations#1

Merged
niklasmarderx merged 2 commits intomainfrom
feature/algorithm-visualization-improvements
Mar 14, 2026
Merged

feat: Add algorithm visualization with step-by-step animations#1
niklasmarderx merged 2 commits intomainfrom
feature/algorithm-visualization-improvements

Conversation

@niklasmarderx
Copy link
Owner

New Features

Algorithm Visualizer Components

  • Add AlgorithmVisualizer for array-based algorithms (sorting/searching)
  • Add GraphVisualizer for graph and tree algorithms
  • Side-by-side layout with visualization and code highlighting

Sorting Algorithms (6)

  • Bubble Sort, Selection Sort, Insertion Sort
  • Quick Sort, Merge Sort, Heap Sort
  • Real-world use cases documented

Search Algorithms (2)

  • Binary Search, Linear Search
  • Visual highlighting of search bounds

Graph Algorithms (6)

  • Dijkstra (GPS Navigation, Google Maps)
  • A* (A-Star) - Industry standard for pathfinding
  • Bellman-Ford - Network routing with negative weights
  • BFS (Breadth-First Search)
  • DFS (Depth-First Search)
  • Topological Sort (npm/yarn dependency resolution)

Tree Algorithms (4)

  • BST Search
  • Inorder Traversal (sorted output)
  • Preorder Traversal (tree copy/serialization)
  • Postorder Traversal (tree deletion)

UI Improvements

  • Animated step-by-step visualization
  • Code highlighting synced with current step
  • Play/pause/step controls
  • Speed adjustment slider
  • Progress bar for navigation

Technical

  • TypeScript with full type safety
  • ESLint compliant
  • Responsive design

Art der Änderung

  • Bug Fix (non-breaking change, löst ein Problem)
  • Neues Feature (non-breaking change, fügt Funktionalität hinzu)
  • Breaking Change (Fix oder Feature das bestehende Funktionalität ändert)
  • Dokumentation
  • Style/UI
  • Refactoring
  • Performance
  • Tests

Screenshots

Falls zutreffend, füge Screenshots der Änderungen hinzu.

Vorher Nachher
Screenshot Screenshot

Checklist

  • Mein Code folgt dem Style Guide des Projekts
  • Ich habe meinen Code selbst reviewed
  • Ich habe Kommentare hinzugefügt (bei komplexem Code)
  • Meine Änderungen generieren keine neuen Warnings
  • Ich habe Tests hinzugefügt (die beweisen dass mein Fix/Feature funktioniert)
  • Alle Tests passen lokal
  • Type-Check (npm run type-check) hat keine Fehler
  • Lint-Check (npm run lint) hat keine Fehler

Wie wurde getestet?

Beschreibe wie du getestet hast:

  • Manuell im Browser
  • Unit Tests
  • Andere:

Test Konfiguration:

  • Browser:
  • OS:

Weitere Infos

Weitere Informationen die für den Review wichtig sein könnten.

## New Features

### Algorithm Visualizer Components
- Add AlgorithmVisualizer for array-based algorithms (sorting/searching)
- Add GraphVisualizer for graph and tree algorithms
- Side-by-side layout with visualization and code highlighting

### Sorting Algorithms (6)
- Bubble Sort, Selection Sort, Insertion Sort
- Quick Sort, Merge Sort, Heap Sort
- Real-world use cases documented

### Search Algorithms (2)
- Binary Search, Linear Search
- Visual highlighting of search bounds

### Graph Algorithms (6)
- Dijkstra (GPS Navigation, Google Maps)
- A* (A-Star) - Industry standard for pathfinding
- Bellman-Ford - Network routing with negative weights
- BFS (Breadth-First Search)
- DFS (Depth-First Search)
- Topological Sort (npm/yarn dependency resolution)

### Tree Algorithms (4)
- BST Search
- Inorder Traversal (sorted output)
- Preorder Traversal (tree copy/serialization)
- Postorder Traversal (tree deletion)

## UI Improvements
- Animated step-by-step visualization
- Code highlighting synced with current step
- Play/pause/step controls
- Speed adjustment slider
- Progress bar for navigation

## Technical
- TypeScript with full type safety
- ESLint compliant
- Responsive design
@niklasmarderx niklasmarderx merged commit 2fecb14 into main Mar 14, 2026
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant