A custom wallet builder webapp for the boutique luxury leather goods brand, Decade. The web application enables customers to design their ideal wallet by choosing colors, materials and other options to build the product in real-time.

As the customer selects options, images of the interior and exterior of wallet are built programmatically from over 700 individual images and displayed using Ruby, Javascript, and CSS. The customer can switch views by toggling the view button or clicking the image itself.

When the customer adds the custom wallet to their cart, a composite of the images is created using the HTML5 canvas element, converted to data URL using JavaScript, and uploaded to the Amazon Web Services CDN. The custom product is then stored in the database and added to the customer’s cart for purchase.

The wallet builder application lives as a part of Decade’s digital storefront, which features pre-made leather goods and the ecommerce mechanism to complete purchases. In the future, additional wallet types (card wallet, id wallet, etc.) and other leather goods (notebook and passport covers) will be added to the web application.