Aadarsh Kr.

Year

2024

Tech & Technique

React, JavaScript, Styled Components, Material-UI, Zustand

Description

SortViz is an interactive React-based sorting algorithm visualizer with real-time animations, speed controls, and side-by-side algorithm comparisons. This educational tool helps users understand how different sorting techniques work through visual learning.

Key Features:

Algorithm Visualization: Sort arrays of 3-digit positive integers with real-time animations
Interactive Controls: Adjust execution speed, start, pause, and reset animations
Performance Metrics: View total swaps, comparisons, and real-time execution timing
Algorithm Comparison: Compare multiple sorting algorithms side by side
Educational Interface: Generate random arrays and learn through visual feedback
Multiple Algorithms: Bubble, Selection, Insertion, Heap, Merge, and Quick Sort

Technical Highlights:

Built with React hooks and modern JavaScript for optimal performance
Implemented pure CSS animations using FLIP principle for smooth transitions
Used Styled Components and Material-UI for professional component design
Integrated Zustand for efficient state management across components
Utilized Vite as bundler for fast development and optimized builds
Added JavaScript async generators for controlled algorithm execution

My Role

Frontend Developer & Algorithm Specialist
Developed this comprehensive educational visualization tool:

Algorithm Implementation: Coded multiple sorting algorithms with step-by-step visualization
Animation Engineering: Created smooth CSS animations using FLIP principle and Flexbox
State Management: Implemented Zustand for efficient component state handling
UI/UX Design: Built intuitive interface with Material-UI and responsive design
Performance Optimization: Used Vite bundler and async generators for smooth execution
Educational Features: Added comparison tools and performance metrics for learning