We help organisations accelerate their software development! Hire Us
Myster
About Myster
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.
Our collaboration
We’ve collaborated with Myster’s in-house development team and external consultants. Together we created a new application that would integrate React, and Shopify, an e-commerce platform.
Firstly, the idea was to use Shopify, creating a new storefront and adding all necessary logic to it and keeping everything on Shopify’s side.
The store would need to have an app embedded in it that would allow the user to customize their cart (which is basic Shopify functionality). It should only render products based on user data provided by Myster’s home-building partners. Adding services based on the product the user chose, and choosing the quantity of supplies needed on a room-by-room basis.
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.
Want to know more about our other case studies?
