Visualize Sorting Algorithms

Link to project source code : Project Link

Goal of the project

The Goal of this project is to visualize the working of two main sorting algorithms Merge Sort and Bubble Sort. We will use react and request animation frames to render our DOM elements. We will use the codesandbox platform to quickly prototype the idea instead of setting a new project with create-react-app.

Tools used

  • Code Sandbox.
  • React
  • Request animation frames

Outcomes

  • Learned to use react framework and its new hooks api.
  • How to use request animation frame and its advantage.
  • Using set timeout or setinterval is bad idea and can cause throttling of browser.
  • Learned the working of async functions.
  • using events in reacts.
  • Code sandbox can be used for quick prototyping.

My thoughts after it

  • This app helped me understand async functions better.
  • codesandbox is a great platform to quickly try out you ideas.
  • Concepts of different sorting algorithms can be understood and explained easily by visualizing them.
  • Whenever possible try to visualize them.