DEV Community

Amelia
Amelia

Posted on

Building a Shoe Recommendation Engine with JavaScript and a Simple Filtering Algorithm

As a developer who also happens to love fashion, I often find myself wanting to build tools that solve real-world shopping problems. Today, I want to share a simple but effective approach to building a shoe recommendation filter that helps users find the perfect pair of women's shoes based on comfort, style, and versatility.

Let's start with our data structure. We'll represent each shoe as an object with properties that matter to shoppers:

const shoes = [
  { id: 1, name: "Classic Sneakers", category: "sneakers", comfort: 9, style: "casual", heelHeight: 0 },
  { id: 2, name: "Elegant Heels", category: "heels", comfort: 6, style: "formal", heelHeight: 3 },
  { id: 3, name: "Everyday Flats", category: "flats", comfort: 10, style: "casual", heelHeight: 0 },
  { id: 4, name: "Walking Shoes", category: "walking", comfort: 9, style: "athletic", heelHeight: 0.5 }
];
Enter fullscreen mode Exit fullscreen mode

Now, let's build our recommendation engine. The key insight is that we want to find shoes that balance comfort, style, and versatility. Here's a filtering function that does exactly that:

function recommendShoes(preferences) {
  const { minComfort, maxHeelHeight, style } = preferences;

  return shoes.filter(shoe => {
    const comfortMatch = shoe.comfort >= (minComfort || 0);
    const heelMatch = shoe.heelHeight <= (maxHeelHeight || 10);
    const styleMatch = style ? shoe.style === style : true;

    return comfortMatch && heelMatch && styleMatch;
  }).sort((a, b) => b.comfort - a.comfort);
}
Enter fullscreen mode Exit fullscreen mode

For example, if someone wants comfortable shoes for walking (comfort ≥ 8, heel ≤ 1 inch), they'll get the walking shoes and flats first. If they need something for a formal event (style: "formal"), they'll see the elegant heels.

What makes this approach powerful is that we can extend it easily. Want to add price filtering? Just add a price property. Need to incorporate user reviews? Add a rating field. The beauty of this simple algorithm is that it's both transparent and extensible.

The best part? This pattern works for any product catalog - from women's shoes to home decor. You're basically teaching your code to understand what "comfortable and versatile" means in a specific context.

I built this while exploring how to make better shopping experiences, and it's surprisingly effective for quickly narrowing down choices. The full implementation with a UI is on my GitHub, but the core logic is just these few lines.

Have you built similar recommendation systems? What features would you add?
https://frishay.com/

Top comments (0)