I built this tool out of frustration of trying to find a specific pair of shoes that had seen someone wearing on the street. I tried searching for the using the limited shoe vocabulary that I had but the search results were all over the place and far from what I was actually looking for. I knew there were visual search tools that would find similar matches based on an image but I didn't have an image of the shoes, just my memory of them. I thought it would be cool if I could instead just "draw" the shoe shape and then see shoes that matched. I browsed several big shoe store websites but I couldn't find a tool that did this already. So, I built a prototype of it. Seeing how I couldn't find a similar tool, I'm not entirely sure if this is something that others might want to use. If it is, then I plan to continue working on it. I would like to add more filters (colors, patterns, materials, etc.) and expand the shoe dataset.

Some implementation details:

The front-end is plain old HTML, JavaScript and CSS files. I didn't use any frameworks. It's a small and straight forward website so I didn't see a need to bloat it with dependencies and build processes. Deploying frontend updates is as easy as copying over the 3 files to the server's public directory.

The backend uses Express.js to respond to HTTP requests and serve the public files (html, js, css, and images). The shoe dataset (505 shoes in total) is stored in a local JSON file. On server startup, the JSON file is read and the shoe data is loaded into memory. There are currently 166 valid shoe shapes that contain produce results. That means that there are 166 different API requests that can be made to the server that return actual shoe data. Since the shoe dataset is currently small and static, I decided to precache the responses to these requests using an in-memory map. I'm not expecting the server to be remotely close to being overloaded with requests so the precaching is a bit of premature optimization. All server requests go through NGINX which is set up as a reverse proxy. The SSL certificates are generated by certbot. This is all hosted on a single $5/month DigitalOcean Droplet (that I use to host other projects as well).

The silhouettes and the logo were created using GIMP. I stacked together several images of shoes and determined that breaking down a shoe into 4 sections (the sole, the heel/ankle, the middle/upper, and the toe) would be enough to represent any shoe. I then added several guidelines to help me ensure that all shapes across sections fit together and I started tracing a path for every unique shape. This resulted in a total of 113 paths that were then exported as SVGs. I had very little previous experience doing this type of work and this is where I spent 90% of my time (mostly stumbling around and figuring things out). In retrospect, I think that 3 sections instead of 4 would have sufficed.

The tool currently has 505 shoes that I manually classified. I created a browser extension to assist me and speed up with the classification. The extension parses the Once the shoe dataset is large enough, I would like to attempt to train a convolutional neural network with it that can classify a shoe. I'm not a deep learning expert so I don't know if this is feasible, but it would be a fun project to familiarize myself more with deep learning concepts.

Feedback is appreciated.