-
Notifications
You must be signed in to change notification settings - Fork 0
/
handpickd.html
104 lines (100 loc) · 5.88 KB
/
handpickd.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Anthony Vittoria | HandPickd</title>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<!-- Google fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@400;700&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/77d041732e.js" crossorigin="anonymous"></script>
<!-- Custom CSS -->
<link rel="stylesheet" href="static/css/style.css">
<link rel="shortcut icon" href="static/img/favicon.png" type="image/x-icon">
</head>
<body>
<div class="container" style="margin-top: 50px;">
<div class="projectHeader">
<p><a href="https://anthonyvittoria.com">< Back</a></p>
<h1 class="title" style="font-size: 70px;">HandPickd</h1>
</div>
<div class="p-5">
<h2 class="title">Front-End <span style="font-size: 14px;"><a target="_blank" href="https://github.com/anthonyvittoria/handpickd-site">See the Code <i class="fab fa-github"></i></a></span></h2>
<p>HandPickd was created using the <a target="_blank" href="https://getbootstrap.com/">Bootstrap</a>
front-end framework, and user interaction is handled by
<a target="_blank" href="https://jquery.com/">jQuery</a>. Users generate the nail polish catalog by selecting
a color using one of two tools.
</p>
<figure class="figure my-5">
<img src="static/img/handpickd-picker.gif" alt="HandPickd Color Picker GIF" class="mx-auto figure-image" style="display: block; width: 75%">
<figcaption class="figure-caption text-center">Finding nail polishes using the color picker widget. </figcaption>
</figure>
<p>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.
</p>
<figure class="figure my-5">
<img src="static/img/handpickd-eyedropper.png" alt="HandPickd Eyedropper" class="mx-auto figure-image" style="display: block; width: 75%">
<figcaption class="figure-caption text-center">Finding nail polishes using the eyedropper tool. </figcaption>
</figure>
<h2 class="title mt-4">Back-End <span style="font-size: 14px;"><a target="_blank" href="https://github.com/anthonyvittoria/handpickd-api">See the Code <i class="fab fa-github"></i></a></span></h2>
<p>The product catalog is generated by a <a target="_blank" href="https://handpickd.herokuapp.com">Flask application</a>
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.
</p>
<p>The local product catalog contains information for each nail polish and all of its shades in JSON format, acquired by
a <a target="_blank" href="https://github.com/anthonyvittoria/handpickd-api/blob/main/scraper.py">web scraper</a> 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.
</p>
<hr class="mx-auto my-5 w-25">
<p>The API can be accessed freely via POST requests containing RGB values.</p>
<p class="mt-5">Example in Python:</p>
<div class="code-block">
<pre style="margin: 0; border: 0px; line-height: 125%;">
<span class="code-darkpurple">import</span> json, requests
response = requests.post(
<span class="code-darkgreen">"https://handpickd.herokuapp.com/",</span>
{ <span class="code-darkgreen">'r'</span>: <span class="code-darkblue">102</span>, <span class="code-darkgreen">'g'</span>: <span class="code-darkblue">235</span>, <span class="code-darkgreen">'b'</span>: <span class="code-darkblue">49</span> }
)
<span class="code-darkpurple">print</span>(json.dumps(response.json(), <span class="code-darkblue">indent</span> = <span class="code-darkblue">1</span>))
</pre>
</div>
<p class="mt-5">Example output:</p>
<div class="code-block">
<pre>
{
"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"
},
// ...
}
</pre>
</div>
</div>
</div>
</body>
</html>