tl;dr: I used kbar

<KBarSearchProvider searchConfig="{some_search_index}">
  <div>{children}</div>
</KBarSearchProvider>

Prerequisites to understand this blog:

Basic knowledge of next.js(react.js) and node.js
Some knowledge of algorithm

Intro:

Searching engines are great inventions and you probably rely a lot on them without noticing it. And if you build a website, you might want to have a search bar too.

Objective:

From the users’ perspective, a search bar is just a place to input. A user puts in several key words and expects relevant results to pop out in a second if not immediately.

Specification

From the developers’ perspective, a search bar is a function. In mathematical language, it is just func: string |-> list of results

So really, your search engine should just be a black box. As for the algorithm behind it, it doesn’t matter to your clients/users.

Abstraction

Now let’s go deeper, what are these strings and lists of results?

To answer the question, you need to know what kind of content are you serving: blogs, codes, images, videos… You name it. You should also keep in mind that, users come to your search bar with questions and they want answers.

For instance, my website is full of blogs. My users might want to look up financial jargon like strike and hope to know what it means. So my strings could be “What does strike mean?”, “How to calculate strike”, etc.

And the engine should give back relevant pages like strike, exercise, call option

Abstractly, I want to design func: a string |-> list of pages, where the page is basically a longer string.

Note: When specifying or abstracting your program, you should not think of implementation questions like “Should I use Knuth–Morris–Pratt algorithm?”, “What if the users can’t spell, should I use the trigram algorithm to give approximate results?” …

Just be simple. But do be aware of your program’s structure. e.g. MERN. Some implementations might be hard.

Implementation

Now let’s focus on the “|->” part.

Conceptually, some string-search algorithms will be implemented. The language depends on your backend. My website is written in next.js, a variant of react.js, and I will use TypeScript.

I have 2 options:

Build my black box from scratch
Use ones made by others.

Obviously, I chose the second. Stackoverflow and GitHub will be our good friends. There are also language/framework-specific venues to find open-source packages that you can just plug into your code. And for node.js, npm.io is the venue.

kbar

kbar is one of the most popular search engine packages, though you might also want to try Algolia

Fundamentally, kbar is just a component. And based on kbar’s requirement, all I need is a search index.

This is a sketch of the implementation.

<KBarSearchProvider searchConfig="{some_search_index}">
  <div>{children}</div>
</KBarSearchProvider>

It’s that simple right! But not really.

New problem emerges: how to create a search index? LMAO. New objective: specify and implement func: list of blogs |→ a search index

I will write a separate tutorial on using kbar in the near future.