Win $20,000. Help build the future of education. Answer the call. Learn more

Integrate a virtual mirror with e-commerce products


Virtual try-on apps have the potential to become the next big thing in e-commerce. They relieve much of the stress of going into a store and physically trying on different products. They save consumers’ time and brands’ budgets, serving as a cost-effective yet convenient alternative for trying on products. Most importantly, it makes choosing products consumers love as easy as looking in the mirror.


In this developer code pattern, we will develop a hybrid mobile application using IBM MobileFirst® Platform Foundation integrated with a recommendation system, which takes age and gender as input and, based on this, returns a personalized recommendation of jewelry products. The user can later try these jewelry products using the virtual mirror feature.

When you have completed this code pattern, you will understand how to:

  • Connect to IBM MobileFirst Platform Foundation using a mobile application
  • Take inputs from the mobile app and process on IBM Cloud
  • Deploy and use Cloud Foundry apps
  • Access images from Cloud Object Storage using a mobile app
  • Connect and access Db2® on IBM Cloud
  • Set up a recommendation engine and integrate it with the mobile app


Recommendation engine flow diagram

  1. Take input from user’s mobile.
  2. Input is passed via IBM MobileFirst Platform Foundation.
  3. IBM MobileFirst Platform Foundation passes the user’s input to the recommendation engine.
  4. The recommendation engine interacts with IBM Db2 to get the necessary product details for the recommended products.
  5. Images of the recommended products are retrieved from Cloud Object Storage.
  6. The recommendation engine returns images and details of the recommended products to the user’s mobile app.
  7. User clicks on the virtual mirror button to access the virtual mirror.
  8. IBM MobileFirst Platform Foundation passes the user’s input to the virtal mirror application.
  9. The virtual mirror application gives access to the user.
  10. User views the virtual mirror.


Ready to give it a try? For detailed instructions, refer to the README file. These instructions tell you step by step how to:

  1. Clone the repo.
  2. Set up the recommendation engine.
  3. Set up the virtual mirror.
  4. Set up the mobile app.