REACT_APP_ALGOLIA_INDEX

REACT_APP_ALGOLIA_API_SEARCH_KEY

Algolia's Search-Only API key for frontend

REACT_APP_ALOGLIA_APP_ID

REACT_APP_ALGOLIA_API_KEY

Algolia's Api key for backend used to create/update/delete records

react.tar.gz

Sending Data To Algolia

Run React APP

Run React APP - SearchBox

Run React APP - Extending Algolia

In this course, you will learn how the Algolia API works by understanding its main components. The end goal is for you to be able to integrate Algolia into your application to deliver tailored, fast search experiences.

In the first half, you will learn how to build a full search experience using Algolia's search API and by utilizing Algolia's InstantSearch library. In the second half, you will learn how to extend Algolia's widgets by building a custom search experience.

By the end of this course, you will have gained hands-on experience by building a fully functional search experience using Algolia.

Getting Started with Algolia API

## Overview

In this lesson, we will be talking about the `InstantSearch` component, which is the root component of our search functionality implementation. It allows communication between the frontend application and Algolia. In addition, it offers all children components a way to interact with the `searchState`.

## `InstantSearch`

To implement search functionality on the frontend, we would first need to import the root container of the search, which is the `InstantSearch` component. 

In order for search functionality to work, the `InstantSearch` component requires a certain configuration so that it can connect with the Algolia service.

### InstantSearch props

The main index is **required** for search. We are storing its value in `indexName` at **line 22**.

We also need a search client that is **required** to connect with the Algolia service. Look at **line 23**. `searchClient` is providing the search client to our component.


# Overview

In this lesson, we will be talking about the `InstantSearch` component, which is the root component of our search functionality implementation. It allows communication between the frontend application and Algolia. In addition, it offers all children components a way to interact with the `searchState`.

# `InstantSearch`

To implement search functionality on the frontend, we would first need to import the root container of the search, which is the `InstantSearch` component. 

In order for search functionality to work, the `InstantSearch` component requires a certain configuration so that it can connect with the Algolia service.

## InstantSearch props

The main index is **required** for search. We are storing its value in `indexName` at **line 22**.

We also need a search client that is **required** to connect with the Algolia service. Look at **line 23**. `searchClient` is providing the search client to our component.


Break down the components of Algolia's InstantSearch in this lesson and understand what the search functionality is composed of.

Introduction to Algolia

Sending and Managing Data in Algolia

Step by Step Implementation

Extending Algolia's Widgets

Composition of the Search Component

Overview

`InstantSearch`

InstantSearch props