Create an Instant Search Experience in Less than 15 Minutes

Today, many applications need instant search experiences to help users navigate through their app and allow them to find the information they are looking for quickly and seamlessly. For example, when you type into Google and many other sites, you get search suggestions automatically as you type. Through React Instant Search, the tool we’ll build in this tutorial, you can easily add a search experience into your application!

React Instant Search combines both React, a popular JavaScript library for building user interfaces, and Algolia, a powerful API that allows you to easily implement a search engine within your applications, to provide an instant search experience to users.

In this tutorial, you will learn how to create a basic React app and use Algolia to add search to your app.

Before Getting Started You Should…

1. Have some React knowledge: If you are new to React or would like a refresher, I would suggest going through this tutorial before you begin.
2. Have npm or yarn (or other package manager) set up on your computer. In this tutorial, we will be using npm but any package manager will work!
3. Have Node 8.10 or higher installed in computer

Step 1: Create Your React App

Facebook provides a node module called create-react-app that is a boilerplate version of a React app. We will be using this module to set up our react app!

To start off, open terminal and run the following command to create a new app:

npm init react-app <enter_app_name>

If it successfully runs, you will see a list of commands that tell you how to use the application such as npm start or npm run build. You’ll want to check your Node installation and permissions if you get errors on this initial step.

Next we are going to navigate to the app directory and then start up the application through the following commands:

cd <enter_app_name>
npm start

This should automatically open a web page that is directed to http://localhost:3000/. If this doesn’t happen, then go ahead and directly go to that URL.

The web page should appear as the following:

Next, we can view the files and components that actually make up this project by listing the components of the directory using the ls command. In the newly created project directory, we can see that the create-react-app generated the initial project structure and installed all the transitive dependencies. Leaving the terminal open, we can use a text editor to open an important file, src/App.js.

This code is in JSX. JSX allows XML syntax to be combined with JavaScript in React, and it helps define what the UI should look like in React. You can play around with editing this code and see the real time changes in the browser.

Another important file is public/index.html. The only thing we need to change in this file is to add a style sheet. We will be using the basic Algolia stylesheet but feel free to use other styling guides. Add this line of code to the HTML file to incorporate this stylesheet:

In this section, we set up a basic React project. Now we will move onto integrating search into the app!

Step 2: Connect Your React Application to Algolia

The first thing we need to do is install React InstantSearch. Go back to your terminal and once again navigate to your app directory. Run the following command to install the search feature.

npm install react-instantsearch-dom

If that successfully installed than you should see this message in your terminal:

From the package we just installed, we are going to add an <InstantSearch> component that will connect to Algolia and will synchronize all of its children (search widgets) together.

To do this, we need to open the App.js file again. The first thing we need to do is delete the unnecessary content in the file, and just keep the framework. Modify your file to look like this:

We can see these changes reflected now in our browser, which should now just be a blank page.

Next, we import the <Instant Search> component, add it to our main method, and connect it to Algolia. We can import this component by adding this line of code at the top of your App.js file:

To connect to an index, we need to provide the Algolia application ID, API Key, and the index name. These credentials can be found in your Algolia Dashboard. For this tutorial, we are going to be using an already-configured index that has e-commerce data similar to Best Buy. This index is just a being used for front-end search, which is why the API key is public.

The credentials to this index are:

• appId: latency
• searchKey: 3d9875e51fbd20c7754e65422f7ce5e1
• indexName: bestbuy

**Note: this index is just for tutorial purposes. If you want to use this set-up for your own application, please use your index and just replace these values with your own index credentials. You can learn more about setting up an index from my previous article on Getting Started with Algolia.

After adding this information into App.js, your file should look something like this:

Step 3: Add Your Search Box Display

Next, we will add a Search Box widget that is integrated with Algolia, and for each text input will produce a query to Algolia’s servers.

The first thing we need to do is import the SearchBox component:

Then, we need to add this component to the render method. Moreover, we can use the translations attribute to customize what text we want the search box to show.

Looking at the browser, you should be able to see the search box as an added UI component!

Now that we have set up the display, we actually need to make the search function so it returns the most relevant hits based on a given query.

Step 4: Query Your Search Results

Our next step is to query search results, and to do that we are going to be adding some lines of code the App.js file. Just for reference, at the end our complete App.js file will look like this:

We will employ the Hits Widget to retrieve relevant matches based on query and display the rendered results from Algolia. Similar to how we imported InstantSearch and SearchBox components, we must also import the Hits component. Add this line to the top of your App.js file:

The first thing we need to do is explicitly state a functional component for content that will contain the hits widget, and be called in the render method.

Let’s work our way from the outside render method to internal nested components.

In the render method, we are going to call a component called Content in the main tag.

Content Component Function returns a hits array (given by the Algolia API), and takes in a hitComponent responsible for a singular hit.

Next we must define what a hitComponent is. A hitComponent takes in a hit parameter that is responsible for holding, accessing, and rendering the hit data itself inside the component.

We are going to be looking at two different types of hit data: the name and image of each item in the index. Let’s start with the image:

This code snippet is simply rendering the hit image. You can check to make sure the images are displaying correct by going to your browser. Upon submitting a query like “ipad”, the app should return the proper collection of images.

Now moving on to searching the name of items. This is a little different from simply searching through images because we need to figure out if a hit given the search query is relevant. To determine this, we need to use the Highlight Widget.

The first step is importing the widget:

Similar to how we added the image information to the Hit Component, we can employ the Highlight widget to add a new tag to check if an item’s name attribute matches the search query. This would look something like:

Thus, now the search can display the results and highlight the part of the hit attribute that matches the query. Similar to searching the images, we can test out if this search query works by searching for “Sony.” You should see something like this as a result:

Now You’ve Got Instant Search in React

Yay! We created an instant search experience in less than 15 Minutes! Through this tutorial, we were able to build a basic React application, and add a seamless and fast search to it with Algolia. For more advanced steps, you could continue to develop this search experience by adding additional search filters or multiple pages. Look at Algolia’s documentation for more examples and tutorials.