Learning React and its ecosystem
In my search for animation ideas, I found Ben Frederickson’s blog which contains some interesting animations. Since I wanted something simple for my small demo project, I chose to implement the Heap Sort algorithm. And voila… I named this small project algozoom.
The animation is made with the amazing d3.js library with which you can bind the DOM with arbitrary data and then manipulate it by modifying the data. Apart from that, I used Redux to store global state and as I wanted to follow best practices and reduce boilerplate code, I wrote redux logic using the Redux toolkit with its nice utilities like
createAsyncThunk. I also used the Devias Kit Pro for the layout and that was a wonderful choice since not only it supports a lot of things out of the box, but most importantly, it is very well written. I highly recommend it. JWT authentication was also added so that users can register and login to empower themselves with create, delete and update rights. The back end is a small api built with django rest framework. You can see the source code in its github repository.
Note: Algozoom is currently hosted on heroku under a free tier and this means that the application goes to sleep if doesn’t receive any traffic for 30 minutes. Awaking from sleep takes some time, so if you experience a delay of a few seconds when you try to visit the website, know that you are awaking it.