Building Search API with ElasticSearch — Part 10: Front-End
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.
Facets
Resource that groups characteristics of the results and can be used to refine the results through filters.
Sort
Result sorting function. Sorting can be done by rating or popularity.
Suggestion
Functionality that will suggest the correction of the term. Popularly known as “did you mean”.
More Like This
Movie recommendation based on the similarity between the selected movie and the rest of the database
Source codes and references are available at the links below:
- Source code: app-seach-store
- Template Free: ReactJs Ecommerce Template
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