index-1-1.jpg

Building a User-friendly Search Experience with Algolia

Updated: Jan 28


In modern apps, a fast search engine is often an important feature. There’s no need to reinvent the wheel with the modern tech available at hand. There are some excellent APIs out there that will help you focus on writing code rather than worrying about search!


This blog will focus on using Algolia to implement search within your Firebase Projects. Before we dive in further, let’s run through Firebase basics and its services.


What is Firebase?

Firebase is Google’s application development platform that helps you build, improve, and grow your app quickly. It is a toolset covering many of the services developers would typically have to build themselves but don’t want to because they’d instead focus on the app experience itself. The toolset includes things like backend, analytics, authentication, databases, configuration, file storage, push messaging, and the list goes on. All these services are maintained and operated by Firebase.


Firebase Products:

Firebase offer products that help you:


1-Accelerate and scale app development without having to manage your infrastructure.

2-Release with confidence and monitor performance and stability.

3-Boost engagement with rich analytics, A/B testing, and messaging campaigns.


The image below shows that these products fall into three categories. For more details, go to: https://firebase.google.com/products-build

Firebase Products


Coming to the focal point of this blog; how to harness the power of Firebase and Algolia to create a blazingly fast search experience with just a few lines of code. Algolia does all the heavy lifting! Before we dig in, let’s know a little about Algolia.


What is Algolia?

Simply put, Algolia is a search-as-a-service solution that makes the

search easier by providing all the tools via an API and SDKs. You might be thinking, why not we use the Firebase search engine instead of Algolia?




Well, here are a few reasons why we went for the Algolia for our search experience over Firestore, which is typically built for data storage use-cases and not optimized for search.


1- Our queries and filters are based on text search. Cloud Firestore doesn't support native indexing or search for text fields in documents. Whereas, downloading an entire collection to search on the client-side isn't a practical approach.


2- Firebase text search is case-sensitive.


3- Comparatively, Algolia has a faster search engine.


4- Algolia provides built-in pagination. Unlike Firebase, you don’t have to write a custom code to retrieve paginated results, which is also not cost-effective. You can read more about it here.


5- Typo tolerance in Algolia allows users to make mistakes while typing and helps find better records for the intended search.



Typo Tolerance - Demo



Time for some Action!




Coming to ‘How we did it?


Our senior developer, Danyal Zahid, has done some fantastic work. He built a search engine for our product, Capture. Let’s dig in!


Adding Algolia’s configuration in the Firebase project:


Here we are defining Algolia appId, adminAPIkey, and adminsearchAPIkey in our firebase project environment variables. We store keys in the firebase function config to ensure that the secret API keys never leave the system and appear in code. Another reason is to separate dev configuration with prod configuration. To start working with Algolia, we initialize these configurations in our app. It is like a bridge between the Firebase back-end and Algolia.



Initializing a connection between Firebase and Algolia collection


We have several models which correspond to their specific collections. So each model will only be making changes in its corresponding collection.



Assigning role-based API keys:


Here we are assigning search API keys to control and limit the scope and behavior of each user when interacting with Algolia. For example, you can exclude some users, group others, limit the duration of a user’s access, and more.



Migrating data from Firestore to Algolia


All the data from Firebase is imported into Algolia to be searched. Later we’ll see how to keep the data in sync between the two services. We just ran a bootstrap function to read all data from Firestore and write it into Algolia.


Auto-update Algolia when Firebase data changes


Data synchronization with the Algolia database was also necessary to incorporate changes made in the firebase database. This way, whenever changes happen in Firebase, they’ll be sent over to Algolia through the Firebase back-end. Now, the Algolia search bar will always be up to date with the data in Firebase.





In a similar way, we can have events to handle the update and delete operations on Firestore data and keep our changes synchronized in Algolia.



Conclusion:

Congratulations, you have supercharged your search with Algolia API with Firebase as your database with just a few simple steps:


1- We added Algolia’s configuration in the Firebase project.

2- Initialized a connection between your database and the Algolia collection.

3- Assigned role-based API keys.

4- Migrated data from Firestore to Algolia.

5- Synchronized data with the Algolia database to incorporate changes made in the firebase database.


Isn’t it easy? Using Firebase and Algolia together can bolster your search engine with a few lines of code. We can do the same with Firebase as well but with Algolia it’s time-efficient and cost-effective.








200 views0 comments