Products configurator with React + Redux

Almost two years ago, our client approached us with an idea to create a product configurator. The configurator was to help users choose the right products at every stage. To finally get a package of products to buy. The client has prepared many scenarios that correspond to different user choices.

As developers, we faced the decision of how to do it. The main requirements we had to do were:

• reliable working all scenarios
• speed and excellent UX for a user by so as not to bore you with the next steps
• fast delivery MVP version for product validation

We knew that we need modern frontend tools for this. We decided on a popular React stack with Redux. It was a good choice. We created a fast SPA (Single Page App) application placed in Magento. We communicate with the back-end using JSON format. In Magento, the client determines various scenarios that are handled in the application. Moreover Redux was a great choice to work with different scenarios, thanks to middleware.

Later we created 3 similar configurators for other types of products. However, we have seen that our solution is not scalable enough and we have difficulties in adding new configurators and features. Thanks to the success of the previous configurators, we have got time to create 2 versions that will solve our problems we had to deal with before.

Firstly we didn’t have any tests so with each configurator and features there was a growing concern that some parts of the application will stop working correctly. The first point we have assumed before working on the new version is to write a more stable code. Secondly, we wanted some features to become more independent. The React version with which we started working on the configurator had no hooks.

We decided that React with Redux would again be the best choice. Additionally, we decided that Typescript will allow us to write better code. For the components tests we used React Testing Library. For E2E tests we have chosen Cypress. Such decisions allowed us to write much more stable code which was our main assumption. Additionally, custom Hooks allowed to write independent components.

We are in the process of writing second versions so I can’t write if our choices were right. So far, we are very satisfied and we hope that the final product will satisfy everyone.