Overview of Algolia

Introduction to Algolia

As users browse the internet, one of the first things they come across is Google Search, a feature that allows users to search for anything.

Similarly, one of the most important parts of any user experience on a website/web app is its search functionality, which allows for fast and easy user interaction.

In this course, we will look into Algolia search API and learn how to integrate it into our React application using InstantSearch library through a step-by-step implementation walkthrough. For integration, Algolia provides us production-ready UI widgets that let us quickly build an instant search experience in our application.

Getting started

What is Algolia?

According to the website:

Algolia is a search-as-a-service solution that offers a full suite of APIs, which allow teams to easily develop tailored, fast search & discovery experiences that delight and convert.

What is InstantSearch?

React InstantSearch is a production-ready UI library for React that lets us build a search interface in our application. Algolia also offers libraries in Vanilla JS, Vue, Angular, iOS, and Android.

The InstantSearch library provides a variety of widgets that can be used to assemble a smooth search interface. The InstantSearch library presents 3 levels of usage as follows that get progressively more powerful, with each level giving you more control:

1. using predefined widgets that can be configured and placed in the component, however, they do not give us access to how the DOM should output.
2. extending these widgets gives us the same functionality but allows us to customise how the DOM should be rendered.
3. implementing new custom widgets.

Note: Widgets in React InstantSearch are React components that have a predefined output.

How does Algolia InstantSearch work?

Before we start looking into how InstantSearch works, we need to define some terms that are going to be used in this course:

• Index is a collection of records that are to be queried by the user.
• Record is an array of objects, with each object containing information that will be shown to the user. These objects are composed of attributes.
• Attribute is a key-value pair that describes the parent record.

Moving on to how it works; inside the root component (InstantSearch), the SearchBox component will interact with Algolia API by sending a post request to the Algolia server on keystroke event, which will then filter the record in the available index and return the records with the relevant attributes based on the search query.

The following image shows the result of the AJAX post request made to the Algolia server, which returns the filtered result from the index.