geewey / algo-front

Algos is an algorithm visualizer built by Gee-Wey Yue, Gordy Lanza, and Li Xie using React.

Algos

Algos is an algorithm visualizer built by Gee-Wey Yue, Gordy Lanza, and Li Xie using React.

Motivation

• We were interested in exploring algorithms and their different sorting logic to learn about a complicated topic.
• We wanted to share our learnings with easy-to-follow visualization, so we used react-spring to animate the sorting steps and chose colors to showcase the sorting logic.
• We wanted to explore differences in algorithm performance based on array size, so we allow users to set the number of elements for sorting.

Stack

• React.js
• Semantic UI for Styling
• react-spring for Animation
• Deployed through Netlify

Features

• Users can add to or remove from displayed algorithm cards
• Users can set the number of elements for each new algorithm card
• Users can toggle play, pause, forward, back, and reset for all algorithm cards, either using the control panel or with keyboard options ("p" for play/pause, "right arrow" for forward, "left arrow" for back, "r" for reset)
• Users can set speed of sorting display
• Users can view the application on mobile

License

MIT © @gortron / @geewey / @liko