Myster, is a German company with the motto: “Sorgenfrei renovieren” translating to “renovate worry-free”. They allowed ther customers just that – the ability to renovate their homes or offices without worry. The customers are now able to contact experts and not worry if renovations are going to be completed in time because Myster handled that for them.
Myster established a network of handymen and experts in the fields of painting, window and floor set-up. Most importantly, they were able to provide their customers with the guarantee that their house renovation is going to be perfect and on time.
With these conditions set-up, we set out to find Shopify approved apps that we could connect with the store and handle all these features.
Unfortunately, the applications available weren’t capable of handling a lot of these requirements. While there are calculators that will give a result based on area parameters, there wasn’t any support for product variants. While the store’s Liquid theme suits the design and Myster’s CI, giving it the functionality it needs is a completely different story. It would then need an embedded application that would override some of Shopify’s functionality with our own.
For that reason, we decided to use a different approach.
Shopify and React
The Shopify store remained, and it was used as a gateway to a React application.
We still used Shopify’s backend for products, for storing customers’ personal data and billing/invoicing.
On our own backend, we stored building data that would be displayed to the customers (paired to the Shopify backend by using the customer’s Shopify ID as a common value).
On the frontend, we displayed all the functionality that we couldn’t do on the Shopify store and more.
Firstly an Admin page was created, that allowed Myster employees to choose which users to grant access to the website.
Secondly, registration and callback pages were created for new customers and old customers who want to make changes.
Once the customer was cleared, they were able to choose products for each room in their new house on a floor-by-floor basis in a sleek and responsive UI.
The project diverted from its initial idea of a Shopify store. However, it transformed into a React application interconnected with Myster and backend. In conclusion, it shows that with the right combination of technologies a wide variety of things can be achieved.