< Back

HandPickd

Front-End  See the Code

HandPickd was created using the Bootstrap front-end framework, and user interaction is handled by jQuery. Users generate the nail polish catalog by selecting a color using one of two tools.

HandPickd Color Picker GIF
Finding nail polishes using the color picker widget.

The user chooses between the color picker widget, which allows them to select any RGB value, or the eyedropper tool, which allows them to upload an image and select a color from it.

HandPickd Eyedropper
Finding nail polishes using the eyedropper tool.

Back-End  See the Code

The product catalog is generated by a Flask application serving as a REST API. The API accepts the user's color and performs a color-matching algorithm against all of the nail polishes stored in the local catalog.

The local product catalog contains information for each nail polish and all of its shades in JSON format, acquired by a web scraper written in Python. The web scraper is automatically executed daily in order to ensure that the catalog is up-to-date. Currently, all products are scraped from Ulta Beauty, but I plan to expand the number of retailers in the future.


The API can be accessed freely via POST requests containing RGB values.

Example in Python:

import json, requests

response = requests.post(
    "https://handpickd.herokuapp.com/",
    { 'r': 102, 'g': 235, 'b': 49 }
)

print(json.dumps(response.json(), indent = 1))
                

Example output:

{
    "0": {
        "brand": "Orly",
        "name": "Nail Lacquer",
        "price": "$9.50",
        "product_url": "https://www.ulta.com/nail-lacquer?productId=xlsImpprod5260123",
        "shade": "So Fly (neon green cr\u00e8me)",
        "shade_url": "https://images.ulta.com/is/image/Ulta/2567589"
    },
    "1": {
        "brand": "China Glaze",
        "name": "Nail Lacquer with Hardeners",
        "price": "$7.50",
        "product_url": "https://www.ulta.com/nail-lacquer-with-hardeners?productId=VP12102",
        "shade": "In The Lime Light (neon green)",
        "shade_url": "https://images.ulta.com/is/image/Ulta/2239031"
    },
    "2": {
        "brand": "ULTA",
        "name": "Gel Shine Nail Lacquer Limited Edition Caribbean Collection",
        "price": "$7.50",
        "product_url": "https://www.ulta.com/gel-shine-nail-lacquer-limited-edition-caribbean-collection?productId=pimprod2003629",
        "shade": "Cabana Boy (light green cream)",
        "shade_url": "https://images.ulta.com/is/image/Ulta/2536448"
    },

    // ...
}