Building a YouTube Channel Search Engine with Elasticsearch Serverless

As a YouTube channel like

https://youtube.com/@ubcodes

expands, locating specific technical tutorials within its extensive video library can become difficult for viewers. Whether seeking in-depth GraphQL content or a React Native crash course, the default search functionality often falls short. A solution was developed: a specialized YouTube Search Library utilizing Elasticsearch Serverless. A live demonstration is available here, and the GitHub repository can be explored here.

The Goal

The aim was to transcend basic client-side filtering and establish a sophisticated Search AI experience. The key requirements were straightforward yet impactful:

1. Fuzzy Search: If a user types “Nxtjs” instead of “Next.js,” they should still find the right video.
2. Hit Highlighting: Search terms should “glow” in the results so users immediately see why a video was recommended.
3. Speed: Results should appear almost instantly as the user types.

The Tech Stack

• Frontend: Next.js 14 (App Router) & Tailwind CSS
• Search Engine: Elasticsearch Serverless (Elastic Cloud)
• Client: @elastic/elasticsearch for Node.js

How It Was Built

1. The Data Schema

The process began by organizing video metadata into a structured JSON format. Each record contains the title, description, tags, and thumbnail_url.

2. The Elasticsearch Integration

Data was indexed using the Elasticsearch Serverless console. The core functionality resides within the API route, where a multi_match query with fuzziness enabled was employed, rather than a basic term match:

const response = await client.search({
  index: 'youtube-videos',
  body: {
    query: {
      multi_match: {
        query: searchTerm,
        fields: ['title', 'description', 'tags'],
        fuzziness: 'AUTO'
      }
    },
    highlight: {
      fields: { title: {}, description: {} }
    }
  }
});

3. Creating the “Creative Spark” (UI)

A responsive grid for displaying video cards was constructed using Tailwind CSS. A custom highlightText function was implemented to parse the tags from Elasticsearch results, wrapping them in a styled tag to achieve a professional “search-as-you-type” user experience.