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

Gain insights into how Algolia API works, explore building search experiences, and discover extending widgets to create a tailored, fast search in your application.

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 look into extending Aloglia's `InstantSearch` components using the second API layer which will give us the same functionality but allow us to customise how the DOM should be rendered.

To do that, we are going to create a new search component different from the one we built in the previous chapters to demonstrate how we can extend Algolia's components. 

By default, Aloglia's `InstantSearch` components are comprised of the following two parts:

1. Business logic code
2. Rendering code

The business logic, in this case, are the connectors that are implemented with higher order component (HOC). 

> HOC is a function that takes a component and returns a new component.

`Connectors` are the API implementation that we will use to extend components. They allow us to extend the existing component however we want. 

Additionally, there is a mapping between a component and a connector, which means each component has a connector and vice versa. Every time we want to extend a component, we will need to use a connector. 

The rendering code is the component that we pass to the connector as an argument, which will return to us the extended component. 


# Overview

In this lesson, we will look into extending Aloglia's `InstantSearch` components using the second API layer which will give us the same functionality but allow us to customise how the DOM should be rendered.

To do that, we are going to create a new search component different from the one we built in the previous chapters to demonstrate how we can extend Algolia's components. 

By default, Aloglia's `InstantSearch` components are comprised of the following two parts:

1. Business logic code
2. Rendering code

The business logic, in this case, are the connectors that are implemented with higher order component (HOC). 

> HOC is a function that takes a component and returns a new component.

`Connectors` are the API implementation that we will use to extend components. They allow us to extend the existing component however we want. 

Additionally, there is a mapping between a component and a connector, which means each component has a connector and vice versa. Every time we want to extend a component, we will need to use a connector. 

The rendering code is the component that we pass to the connector as an argument, which will return to us the extended component. 


Discover what you can do with Algolia's connectors by extending Algolia's InstantSearch components.

Introduction to Algolia

Sending and Managing Data in Algolia

Step by Step Implementation

Extending Algolia's Widgets

Extending Algolia's Widgets

Overview