Hey guys,
Following on this thread (Retool App of the Week!), I wanted to show a tool that is very powerful for companies and relatively easy to build. I made this Product Configurator on retool based on a simplified version of Tesla's Design your Model 3. Product configurators are a great way for companies to make life easier for their customers, their sales teams and their distributors. Especially, if you have a very complex product or if your product has many small features to choose from. This will often make the total number of possible configurations explode pretty fast and your catalogue will become very confusing. This tool solves all those issues and gives the company an opportunity to integrate its "digital catalogue" with the rest of its retool apps and databases, e.g. manufacturing, sales, logistics etc.
So here's the Tesla demo:
You can check a video demo 
here.
Or a couple of screenshots here below 
The skeleton of the app consists of 4 main "structures":
-
The feature selector on the right with different components depending on the configuration
-
The stock photos of the product configurations stored in S3 and called by retool for each configuration
-
Temporal States storing the features selected for the current configuration (eg paint.value → "red-multi-coat")
-
And the Postgres database with all the possible product configurations and their corresponding prices and SKUs
As I start choosing my Tesla's features, they will be stored in the temporal states. This will automatically trigger certain events:
• The set of features to choose from in other categories will also change accordingly. For example, when I configure a Model 3 - Performance Range I will only be able to select the 20" Überturbine Wheels.
• A query will get the total price and SKU for the new configuration, which will appear at the bottom of the feature selector right before the Continue to Payment button.
• The picture on the left will change to a perspective which lets the user better appreciate the change selected. For example, when I change the type of wheel it will switch to the wheel close-up photo.
Finally, when I've made my decision about the car I want to buy, I can simply just click on Continue to Payment. This will change the feature selector for a payment interface, where I can choose to contact a Sales Rep or to pay directly with card. As I complete the purchase, the Product Configurator will insert the configuration, purchase order number, price and customer details into a new row in the manufacturing, sales and logistics databases. This way we can integrate all our processes from the very beginning. Everything just in one place, in Retool. And with the added advantage of the new navigation component which allows us to switch from interface/process to interface/process very swiftly.
Hope you like it!
