Skip to content

[FEATURE] Add "Step-by-Step Mode" for Sorting Visualizations #655

@gaurivvv

Description

@gaurivvv

SortVision already makes sorting algorithms fun and interactive 🎉 But sometimes, students want to go slower and see each step clearly. Adding a Step-by-Step Mode (next/previous step buttons) will make the learning process even more effective — helping beginners really understand why each swap or comparison happens.

Why This Matters?
Perfect for students who are just starting with algorithms 📚
Great for teachers to demonstrate sorting in class 👨‍🏫
Complements the existing "Play/Pause" and "Speed Control" features
Makes SortVision an even more powerful educational tool

What Needs to Be Done?
Add Next Step and Previous Step buttons to the control panel.
Modify the visualizer logic to pause after each sorting operation.
Allow users to manually go forward/backward in the algorithm steps.
Ensure compatibility with all supported algorithms (Bubble, Merge, Quick, etc.).
Keep the UI clean and responsive.

Expected Outcome
A toggle or button to switch into "Step-by-Step Mode".
Smooth navigation through sorting steps.
Works across desktop + mobile.

Tech Reference
React state management for step control

Example: AlgoVisualizer Step Mode

Difficulty Level 🟡 Medium

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions