Meilisearch Full Text search with Firestore - Introduction

In this post we will look into the introduction of how we can implement a full text search feature in our application with firestore as our backend. Firestore does not support full text search solutions like MongoDB, so we are going to going to use a third party solution called Meilisearch and host it on Koyeb which can be used in our frontend applications made with React/Next JS and React Native applications or using any other frontend frameworks.

Firestore does not support full text search solutions like MongoDB, so we are going to going to use a third party solution called Meilisearch and host it on Koyeb.

This will a multi part series, where I will explain each and every step required to integrate full text search ability for your application up and ready for free and also have the ability to scale up whenever your user base increases.

What is Full Text Search?

Let's understand what is Full text search first. So lets take you have an array with multiple objects in them. So if you want to make a search feature, we can do this in multiple ways both in the frontend and the backend.

In the frontend we can use filter which is a higher order function in React/Next JS where you can filter the array of objects with your search term. In the backend you can query a single particular field such as title or any other field the array. I will explain with an example.

  const data = [
    {
      title: "Gautham's Firestore full text search",
      description:
        "Gautham's blog about integrating melli search full text search feature with firestore.",
    },
    {
      title: "Gautham's Firestore full text search deployment",
      description:
        "Gautham's blog about deploying melli search instance in Koyeb.",
    },
  ];

const searchParams = 'mellisearch'

const filteredData =  data?.filter((item)=>item?.title?.includes(searchParams))

// This is just a short example of how we would do a frontend 
// filter and not a real production solution.

Now if I want to do a search feature, I either have to take 'title' or 'description' and filter through the array in frontend or use the key 'title' or 'description' in the backend to retrieve values based on the search query. But what if you want to search all the fields in the objects which means you want to target both 'title' and 'description'

This is where full text search comes into play where we can search each and every parameter in the object. This comes in handy when in applications like Ecommerce where we display a list of items up for sale. When user searches the product we want to take all the fields in the data points into consideration and provide the products to the end user.

Unfortunately this extremely important feature is not available in firestore which comes as a bottle neck for big applications where other No SQL databases like MongoDB supports fulltext search. The firestore documentation, asks us to use a third party solution like Meilisearch, Typesense, Algolia or Elasticsearch to achieve this functionality.

After careful considerations, I have picked Meilisearch and have included it successfully in my applications where the data which gets added to firestorem gets automatically added in Meilisearch full text search instance with which we can perform the search operations at low costs and achieve higher performances with low latency. I have also made Express JS routes to manually add the data points into the instance.

Mellisearch is an open source full text search platform where we can deploy the instance in their own cloud server or host our own server in Google Cloud, Digital Ocean, AWS, Koyeb and multiple other providers. I will be using Koyeb, because it provides a free instance which can be deployed and once our user base increases, we can scale the instance up according to the traffic our app receives.

I will be posting a series of posts discussing each and every step involving a full stack solution of adding our data points to Melli search with Express JS routes and Firestore cloud listeners, deploying them to Koyeb, implementing the search feature in both a React/Next JS web application as well as on a react native app.

You can view the complete code and see how the search interface works in a live demo below.

https://github.com/Gautham495/blog-code-snippets

https://demos.gauthamvijay.com/