https://github.com/alexzajac/redusort

Practicing data structures and modern web technologies with the everlasting example of a sorting visualizer.
https://github.com/alexzajac/redusort

react redux sorting-algorithms typescript visualization

Last synced: 1 day ago
JSON representation

Practicing data structures and modern web technologies with the everlasting example of a sorting visualizer.

• Host: GitHub
• URL: https://github.com/alexzajac/redusort
• Owner: alexZajac
• Created: 2019-09-12T09:08:28.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2024-04-23T02:02:22.000Z (10 months ago)
• Last Synced: 2024-04-23T05:35:31.547Z (10 months ago)
• Topics: react, redux, sorting-algorithms, typescript, visualization
• Language: TypeScript
• Homepage: http://alexZajac.github.io/ReduSort
• Size: 2.6 MB
• Stars: 34
• Watchers: 5
• Forks: 7
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# ReduSort | A sort visualization app made with React-Redux and TypeScript.

## Demo 

![demo](./public/demo.gif)

## Options

- Array Length: From 1 to 100.

- Speed of sorting: A slider allowing you to visualize sorting at your desired pace.

- Starting configuration: Choose starting array from random, nearly sorted or sorted in reverse order.

## Sorting algorithms

- Bubble Sort

- Selection Sort

- Insertion Sort

- Merge Sort

- Quick Sort

- Heap Sort

- Tim Sort

## Stack

- The project was initialized with CRNA and a TypeScript configuration. 

- The challenge (expecially for large inputs) was to allow the user to visualize the sorting process step by step without having to hold all the steps in memory. So the design choice was to rewrite each sort function into a generator function, to get steps only if needed. 

- That is also where Redux comes into play, providing a global store to the app, easing the process of processing and displaying sorting steps coming from the generator functions.