Building Search API with ElasticSearch — Part 10: Front-End

André Coelho
3 min readJul 13, 2022

--

In this post I will present the front-end responsible for requests to our search API. I thought it was important to demonstrate this application because it makes the solution more complete (back-end and front-end), making it simpler to visualize all the created functionality.

The Front-End application was developed in ReactJs, I’m not a front-end developer, so I searched for a template and made the necessary changes to meet the requirements.

Next, it will be demonstrated how the features available in the API can be used from the created interface.

Autocomplete

Functionality that suggests terms from part or all of a search term.

Autocomplete

Facets

Resource that groups characteristics of the results and can be used to refine the results through filters.

Facets and Filters

Sort

Result sorting function. Sorting can be done by rating or popularity.

Sort Documents

Suggestion
Functionality that will suggest the correction of the term. Popularly known as “did you mean”.

"Did you mean?"

More Like This

Movie recommendation based on the similarity between the selected movie and the rest of the database

Recommendation

Source codes and references are available at the links below:

Building Search API with ElasticSearch — Part 01: Preparing the environment
Building Search API with ElasticSearch — Part 02: Pagination
Building Search API with ElasticSearch — Part 03: Autocomplete
Building Search API with ElasticSearch — Part 04: Search Query
Building Search API with ElasticSearch — Part 05: Simple Facets
Building Search API with ElasticSearch — Part 06: Filters
Building Search API with ElasticSearch — Part 07: “Did you mean”
Building Search API with ElasticSearch — Part 08: Sort results
Building Search API with ElasticSearch — Part 09: Recommendation with More Like This Query
Building Search API with ElasticSearch — Part 10: Front-End
Building Search API with ElasticSearch — Part 11: Elastic APM

--

--

André Coelho

Developer of web and mobile systems. Enthusiast in the area of ​​automation and electronics and I have hobbie music.