Alexandre Zajac is a Software Engineering and Data Science Student at ESILV Graduate School of Engineering and an author on Medium.com, a web-publishing platform. In one of his latest Medium articles, Alexandre takes us on a journey through the process of building his version of a Sorting Visualizer with React and Redux using Typescript.
The tutorial, made by Clement Mihailescu, an Ex-Google and Ex-Facebook Software engineer, shows how to build a great software engineering project to add to the resume.
My Version of The Everlasting Sorting Visualizer
In this post, I will be presenting one of the most known software applications, a sorting visualizer!
I think that it is one of the first things I saw when I started classes about programming, and I remember the teacher introducing us to different kinds of sorting algorithms this way. I was intrigued by both the algorithms that powered the animations and the overall technical implementation behind the visualizer.
On top of that, I have been following a lot of Youtube channels related to Computer Science, whether it be interview preparation, coding challenges or talks about new tech trends.
One video by Clement Mihailescu particularly sparked my interest in building coding projects. Building a sorting visualizer was also a way to confront two concepts of CS: Core Algorithms and Visualization/UI. So I decided to build my own.
Challenges and implementation
The choice of the stack for building this application wasn’t that easy, because I had the choice between a traditional HTML/CSS/JS implementation or a stack I was more familiar with, React with custom Styled Components.
I chose the latter because I represented more of a challenge to me and because I was more familiar with it. I chose TypeScript as the main language because I have been using it in some other projects and I really appreciated the advantages it provided:
The static typing allows to read and debug more easily the code with functions containing complex arguments/returns.
Encourages to build interfaces before diving into the actual implementation (particularly useful with PropTypes in React). Easier to find function signature and to extend functionalities.
I also considered the fact that TypeScript adds a compiling step, and that it could add more boilerplate code to the project, but I chose to keep it because I found that the advantages overweighted the drawbacks for such a project.
For State Management, I hesitated a lot between native React top-down prop communication and a dedicated Redux store.
Even if the app contains only two core Presentational components, I chose to use the Redux Store for several reasons:
Even if it added a lot of setup code to the project, it allowed a more coherent and structured state management system.
I had to choose a way to hold all the sorting steps in memory to pass them to my React Component in charge of the sorting process, and Redux serving as a global store was the perfect choice for that.
It forced me to understand the “Redux way” of managing state and to structure my components according to it.
The last tweak that I created a class for providing sorting steps to my main component, but I had to find a better way of managing the sorting steps coming out of my algorithms.
This wasn’t a big issue, but it was a choice made especially for recursive algorithms such as Merge sort, Quick sort or Heap sort, holding all the nested steps for sorting in memory. What I did is converting all the sorting functions into generator functions, it blended better with Redux and the processing of each action at a time.
The last point I wanted to expose is strictly concerning the UI. As a huge fan, I couldn’t deliver such an app without a Dark mode.
I knew that this could be implemented with Redux, but the React Context API was perfect for handling such a feature, and as it was my first time trying it, I was pretty satisfied with it.
Demo and final notes
Here is a demo of the final version: https://alexzajac.github.io/ReduSort/
