How I Built a Search Engine for my YouTube Channel using Elasticsearch Serverless

As my YouTube channel, Ubcodes, continues to grow, I’ve realized that finding specific technical tutorials in a sea of videos can be a challenge for my subscribers. Whether they are looking for a deep dive into GraphQL or a React Native crash course, the standard search experience doesn't always cut it.

I decided to build a solution: a dedicated YouTube Search Library powered by Elasticsearch Serverless.
View the Live Demo here | Explore the GitHub Repo

The Goal

I wanted to move beyond basic client-side filtering and implement a professional Search AI experience. My requirements were simple but high-impact:

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 I Built It

1. The Data Schema

I started by structuring my video metadata into a clean JSON format. Each entry includes the title, description, tags, and thumbnail_url.

2. The Elasticsearch Integration

Using the Elasticsearch Serverless console, I indexed my data. The "magic" happens in the API route. Instead of a simple term match, I used a multi_match query with fuzziness enabled:

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)

Using Tailwind CSS, I built a responsive grid that displays the video cards. I implemented a custom highlightText function to parse the <em> tags returned by Elasticsearch and wrap them in a styled <mark> tag for that professional "search-as-you-type" feel.

What I Learned

Building this project end-to-end reinforced how much Search AI can improve the Developer Experience (DX). It's not just about finding data; it's about the speed and relevance of the discovery process.

Even with a small initial dataset, the scalability of Elasticsearch Serverless means this library can grow alongside my channel.