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 the previous lesson, we added the highlight feature to our search functionality to improve the user experience and demonstrate the highlighted attribute based on the search query.

In this lesson, we will learn how to add the stats feature to our search functionality to improve the search experience further 

## The `Stats` component

The `Stats` component displays the total number of matching hits from our results. Also, we get the time it takes to receive the results.

 

```jsx
import React from 'react';
import {
	Hits,
  InstantSearch,
  SearchBox,
  Stats
} from "react-instantsearch-dom";

class App extends React.Component {
	render() {
		return (
			<div>
				<InstantSearch>
			      <SearchBox/>
                  <Stats />
				  <Hits hitComponent={Hit} />
				</InstantSearch>
			</div>
		);
	}
}

const Hit = (props) => {
  return (
    <div>
      <img
        alt={props.hit.name}
        src={require(`../${props.hit.image}`).default}
      />
      <div className="title">
        <span>{props.hit.name}</span>
      </div>
      <div className="price">£{props.hit.price}</div>
    </div>
  );
};
```

### `Stats` props

The `translations` prop takes a value of type object that is optional. This value is a mapping of keys to translations.


```jsx
<Stats
       translations={{
          stats(nbHits, timeSpentMS) {
            return nbHits > 0
                      ? `Clothing (${nbHits})`
                      : "no results found";
                  },
          },
        }}
 />
```

# Overview

In the previous lesson, we added the highlight feature to our search functionality to improve the user experience and demonstrate the highlighted attribute based on the search query.

In this lesson, we will learn how to add the stats feature to our search functionality to improve the search experience further 

# The `Stats` component

The `Stats` component displays the total number of matching hits from our results. Also, we get the time it takes to receive the results.

 

```jsx
import React from 'react';
import {
	Hits,
  InstantSearch,
  SearchBox,
  Stats
} from "react-instantsearch-dom";

class App extends React.Component {
	render() {
		return (
			<div>
				<InstantSearch>
			      <SearchBox/>
                  <Stats />
				  <Hits hitComponent={Hit} />
				</InstantSearch>
			</div>
		);
	}
}

const Hit = (props) => {
  return (
    <div>
      <img
        alt={props.hit.name}
        src={require(`../${props.hit.image}`).default}
      />
      <div className="title">
        <span>{props.hit.name}</span>
      </div>
      <div className="price">£{props.hit.price}</div>
    </div>
  );
};
```

## `Stats` props

The `translations` prop takes a value of type object that is optional. This value is a mapping of keys to translations.


```jsx
<Stats
       translations={{
          stats(nbHits, timeSpentMS) {
            return nbHits > 0
                      ? `Clothing (${nbHits})`
                      : "no results found";
                  },
          },
        }}
 />
```

# Overview

In the previous lesson, we added the highlight feature to our search functionality to improve the user experience and demonstrate the highlighted attribute based on the search query.

In this lesson, we will learn how to add the stats feature to our search functionality to improve the search experience further 

# The `Stats` component

The `Stats` component displays the total number of matching hits from our results. Also, we get the time it takes to receive the results.

 

```jsx
import React from 'react';
import {
	Hits,
  InstantSearch,
  SearchBox,
  Stats
} from "react-instantsearch-dom";

class App extends React.Component {
	render() {
		return (
			<div>
				<InstantSearch>
			      <SearchBox/>
                  <Stats />
				  <Hits hitComponent={Hit} />
				</InstantSearch>
			</div>
		);
	}
}

const Hit = (props) => {
  return (
    <div>
      <img
        alt={props.hit.name}
        src={require(`../＄{props.hit.image}`).default}
      />
      <div className="title">
        <span>{props.hit.name}</span>
      </div>
      <div className="price">£{props.hit.price}</div>
    </div>
  );
};
```

## `Stats` props

The `translations` prop takes a value of type object that is optional. This value is a mapping of keys to translations.


```jsx
<Stats
       translations={{
          stats(nbHits, timeSpentMS) {
            return nbHits > 0
                      ? `Clothing (＄{nbHits})`
                      : "no results found";
                  },
          },
        }}
 />
```

Explore how we can improve search results and user experience by adding the number of hits based on user search by using the Stats component.

Introduction to Algolia

Sending and Managing Data in Algolia

Step by Step Implementation

Extending Algolia's Widgets

Implementing the Stats component

Overview

The `Stats` component

Implementing the Stats component

Overview

The Stats component

The `Stats` component