Build a Machine Learning-Based Recommendation Engine with JavaScript

Learn the core concepts of recommendation engines, popular algorithms, and how to build a simple ML-powered recommendation engine using JavaScript.

This blog describes the steps to create the Recommendation engine using Javascript. We do have posts on building recommendation engine using Python. Please refer to those posts if you are interested in Python code.

🧠 Introduction

Recommendation engines are the driving force behind platforms like Amazon, Netflix, and Spotify. They use algorithms to analyze behavior and suggest relevant content, boosting engagement and personalization.

In this blog, you’ll learn:

• Key types of recommendation systems
• Core ML algorithms involved
• How to build a simple content-based recommender using JavaScript and TensorFlow.js

---

📚 Types of Recommendation Engines

1. Content-Based Filtering
   Recommends items similar to those a user liked, based on item features.
   Example: “You liked Inception, so try Interstellar.”
2. Collaborative Filtering
   Recommends items based on behavior of similar users.
   Example: “Users like you also enjoyed Breaking Bad.”
3. Hybrid Systems
   Combine both methods for higher accuracy.

---

📐 Core ML Concepts

🔢 Vector Representation

Items and users are encoded into numerical vectors. Similarity is measured using:

• Cosine Similarity
• Euclidean Distance
• Dot Product

🧠 Algorithms

• K-Nearest Neighbors (KNN)
• Matrix Factorization (SVD)
• Deep Learning (Neural Collaborative Filtering)

---

🛠️ Project Setup (JavaScript + TensorFlow.js)

We’ll build a content-based recommendation engine using TensorFlow.js. This version uses TF’s math for similarity scoring.

---

🗃️ Step 1: Sample Data

const books = [
  { id: 1, title: "The Hobbit", features: [1, 0, 1, 0, 1] },  // fantasy, adventure
  { id: 2, title: "1984", features: [0, 1, 0, 1, 1] },         // dystopian, politics
  { id: 3, title: "The Silmarillion", features: [1, 0, 1, 0, 0] },
  { id: 4, title: "Brave New World", features: [0, 1, 0, 1, 1] }
];

Each book is encoded into a feature vector based on genre tags:

• [fantasy, dystopia, mythology, politics, classic]

📏 Step 2: Cosine Similarity Function (with TensorFlow.js)

<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>

function cosineSimilarity(vecA, vecB) {
  const a = tf.tensor1d(vecA);
  const b = tf.tensor1d(vecB);
  const dotProduct = a.dot(b);
  const normA = a.norm();
  const normB = b.norm();
  return dotProduct.div(normA.mul(normB)).dataSync()[0];
}

🔍 Step 3: Get Top Recommendations

function getRecommendations(targetBookId, allBooks, topN = 2) {
  const target = allBooks.find(book => book.id === targetBookId);
  return allBooks
    .filter(book => book.id !== targetBookId)
    .map(book => ({
      ...book,
      similarity: cosineSimilarity(target.features, book.features)
    }))
    .sort((a, b) => b.similarity - a.similarity)
    .slice(0, topN);
}

✅ Step 4: Try It Out

const recommendations = getRecommendations(1, books);
console.log("Recommendations for 'The Hobbit':", recommendations);

Output might include:

Recommendations for 'The Hobbit':
[
  { title: 'The Silmarillion', similarity: 0.999 },
  { title: '1984', similarity: 0.4 }
]

🧠 What You Learned

• How recommendation engines work conceptually
• How to model item features with vectors
• How to use TensorFlow.js for similarity scoring
• How to return recommendations based on content similarity

---

🔄 Next Steps

Want to take it further?

• 🔄 Collaborative Filtering with matrix factorization
• 🧠 Neural networks for deep personalization
• 🌐 Use user history and feedback loop
• 🧰 Expand to React, Next.js, or integrate with a backend

---

📦 Resources

• TensorFlow.js Docs
• MovieLens Dataset
• ML for Recommender Systems – Google