Recommend - Swift Playground


Everyone who has done online shopping on sites such as Ebay or Amazon is aware of how some websites have the ability to recommend an item that the user might like based on their preferences. This particular function is very fascinating and many people are curious to find out how it works.

I want to bring more awareness to this topic and explain it in an interactive way with my program. By keeping it simple with step-by-step instructions, anyone can walk through this application and understand it easily without the need of mathematical or computer science background.


Apple WWDC2019



“WWDC19 Scholarships reward talented students and STEM organization members with the opportunity to attend this year’s conference. Developers selected for a scholarship will receive a WWDC19 ticket, lodging for the conference, and one year of membership in the Apple Developer Program free of charge.


The challenge: “Create an interactive scene in a Swift playground that can be experienced within three minutes using Swift Playgrounds 2.2 or Xcode 10.1. Be creative. If you need inspiration, use templates in Swift Playgrounds for a head start on more advanced creations. Make them your own by adding graphics, audio, and more.

Applications will be judged on:

- Technical accomplishment

- Creativity of ideas

- Content of written responses.”

How it works


Build the data set for the recommendation system by making purchases for three users.


The app generates the item-based filtering table based on the user's selections of purchases


Provide a detailed guide on all the calculations needed to find the best recommendation


Users can place up to two items in the basket to find out what the system recommends for them to buy additionally

The details

The playground starts with an introduction with audio interaction using AVFoundation framework, which explains the basic concept of how recommendation systems work.


To be able to explain the idea clearly, characters and illustrations were presented to guide the user to make sample purchases. By connecting UIPanGestureRecognizers to the items, the user can drag and drop them to the users’ baskets.

Once the user has finished making the purchases, collaborative filtering table will be displayed. The playground makes use of the item-to-item collaborative filtering technique so the table is laid out by placing the items on the leftmost column and the users lined up next to each other for each item.


The order of the users lined up also defines the elements of the vectors for each item. By walking the user step-by-step into how this powerful algorithm works, the user will understand the entire process of how to calculate the recommended item for a given item.

The tech talk


The user interface was designed using Sketch App and Adobe Photoshop, then put together using the UIKit framework. Avatar illustrations were generated from Avataaars, an open-source library.


All of the screens of the app are optimized to run perfectly on every iPad Pro devices using the Auto Layout technology. No data is lost after the user quits the app as the app saves the