We can see that the UI is composed of four main constituents:

A Search UI over repositories and their descriptions A List Dropdown (used for Language, Topics, Last Active and Created info) A Range Slider UI for filtering by stars and forks count A Result Card to display the results.

Let’s map these annotated UI components to their ReactiveSearch equivalent components.

DataSearch is a handy component for searching over categories.

ReactiveList creates a data-driven result list UI component.

Language and Topics are shown using the MultiDropdownList component.

For showing repo stars and repo forks info (both are integer values), we use the RangeSlider component.

Deep Dive with Code

Now that we have the basic design in mind and know which components, we can deep dive into writing the actual code.

ReactiveBase

First Component that we will make use of is ReactiveBase .

ReactiveBase is a container component that wraps all the ReactiveSearch components together. It binds the backend app (data source) with the UI view components (elements wrapped within ReactiveBase), allowing a UI component to be reactively updated every time there is a change in the data source or in other UI components.

To read more about it feel free to explore the docs. Here is the snippet of code reflecting the properties that are passed to ReactiveBase component.

gist showing usage of ReactiveBase.

Now let’s talk about props passed to the component, these are some of the props passed by us but there are other’s well if you want to know feel free to explore the docs.

app String

app name as it appears on the dashboard. Refers to an index if you’re using your own Elasticsearch cluster. (Multiple indexes can be connected to by specifying comma separated index names)

app name as it appears on the dashboard. Refers to an index if you’re using your own Elasticsearch cluster. (Multiple indexes can be connected to by specifying comma separated index names) type String [optional]

types on which the queries should run on. Multiple types can be passed as comma separated values. The default behavior here is to search on all the app types.

[optional] types on which the queries should run on. Multiple types can be passed as comma separated values. The default behavior here is to search on all the app types. credentials String [optional]

app credentials as they appear on the dashboard. It should be a string of the format “username:password” and is used for authenticating the app. If you are not using an appbase.io app, credentials may not be necessary - although having an open-access Elasticsearch cluster is not recommended.

The app and credentials are specific for your app which you can get from the app’s credentials page. You can also pass a theme prop which will set the theme for all the child components. Read more about theming here.

Updated Sandbox

After adding our first component

DataSearch

Second Component that we will make use of is DataSearch , it creates a search box UI component that is connected to one or more database fields.

We’ll be using DataSearch component to search through repositories categorized on the basis of languages. DataSearch component creates a category search UI widget with an autosuggest functionality. It lets us search across one or more fields easily. Read more about it in the docs.

gist showing usage of DataSeearch.

Now let’s talk about props passed to the component, these are some of the props passed by us but there are other’s well if you want to know feel free to explore the docs.

componentId String

unique identifier of the component, can be referenced in other components’ react prop.

unique identifier of the component, can be referenced in other components’ prop. dataField String or Array

database field(s) to be connected to the component’s UI view. DataSearch accepts an Array in addition to String, useful for applying search across multiple fields.

database field(s) to be connected to the component’s UI view. DataSearch accepts an Array in addition to String, useful for applying search across multiple fields. placeholder String [optional]

set the placeholder text to be shown in the searchbox input field. Defaults to “Search”.

[optional] set the placeholder text to be shown in the searchbox input field. Defaults to “Search”. iconPosition String [optional] sets the position of the search icon. Can be left or right . Defaults to right .

Please find sandbox with all the changes made.

Updated Sandbox

MultiDropdownList

Third Component that we will make use of is MultiDropDownList .

MultiDropdownList is perfect to filter the results based on our repository language . It creates a multiple select dropdown based list UI widget. You can find more about it in the docs.

gist showing usage of MultiDropdownList.

Now, some of the properties like dataField , componentId , are similar to that of the previous component, but we have some new properties that we haven’t see before for instance placeholder , filterLabel , title let me define them.

Now let’s talk about props passed to the component, these are some of the props passed by us but there are other’s well if you want to know feel free to explore the docs.

placeholder String [optional]

set the placeholder text to be shown in the searchbox input field. Defaults to “Search”.

[optional] set the placeholder text to be shown in the searchbox input field. Defaults to “Search”. filterLabel String [optional]

An optional label to display for the component in the global selected filters view. This is only applicable if showFilter is enabled. Default value used here is componentId .

[optional] An optional label to display for the component in the global selected filters view. This is only applicable if is enabled. Default value used here is . title String or JSX [optional]

title of the component to be shown in the UI.

Please find sandbox with all the changes made.

Updated Sandbox

RangeSlider

Fourth Component that we will make use of is RangeSlider .

We’ll be using RangeSlider components to search the repositories on the basis of the number of stars and forks , defining a starting and ending limit. It creates a numeric range slider UI component, very useful for granular filtering of numeric data. Find out more about it in the docs.(docs for vue not added yet, will update the link once they are added.)

gist showing usage of RangeSlider.

Now let’s talk about props passed to the component, these are some of the props passed by us but there are other’s well if you want to know feel free to explore the docs.

range Object an object with start and end keys and corresponding numeric values denoting the minimum and maximum possible slider values.

an object with and keys and corresponding numeric values denoting the minimum and maximum possible slider values. defaultSelected Object [optional]

an object with start and end keys and corresponding numeric values denoting the pre-selected range values.

Please find the sandbox with all the changes made.

Updated Sandbox

ReactiveList

Fifth Component that we will make use of is ReactiveList , Up until now we’ve been creating search components, to filter out the repositories. Now we’ll need a component to display the results according to the selected filters.

ReactiveList creates a data-driven result list UI component. This list can reactively update itself based on changes in other components or changes in the database itself.

gist showing usage of ReactiveList Component.

Now let’s talk about props passed to the component, these are some of the props passed by us but there are other’s well if you want to know feel free to explore the docs.

pagination Boolean [optional]

pagination <> infinite scroll switcher. Defaults to false , i.e. an infinite scroll based view. When set to true , a pagination based list view with page numbers will appear.

[optional] pagination <> infinite scroll switcher. Defaults to , i.e. an infinite scroll based view. When set to , a pagination based list view with page numbers will appear. innerClass Object [optional]

ReactiveSearch components also allow class injections to overwrite the default styles for any component at a more granular level. This can be achieved with the innerClass prop.

[optional] ReactiveSearch components also allow injections to overwrite the default styles for any component at a more granular level. This can be achieved with the prop. react Object [optional]

a dependency object defining how this component should react based on the state changes in the sensor components.

This accepts an object with the key and , or , not and an array as value with the componentId of all components that it should reactively update to. Here we want the results to update based on the updates to all our search components that we used before.

sortOptions Object Array [optional]

an alternative to the sortBy prop, sortOptions creates a sorting view in the ReactiveList component’s UI. Each array element is an object that takes three keys:

label - label to be displayed in the UI.

dataField - data field to use for applying the sorting criteria on.

sortBy - specified as either asc or desc .

Notice slot and slot-scope it is used to get data from the child component to parent component. If you have used React it is like a render-prop . You can read more about it here.

onData Function|scoped-slot [optional]

returns a list element object to be rendered based on the res data object. This callback function prop or slot is called for each data item rendered in the ReactiveList component’s view.

gist Showing Usage of onData

Please find sandbox with all the changes made.

Updated Sandbox

Conclusion

After taking into account CSS styling, we walked through building a complete UI that mimics how we can leverage search service powered by ReactiveSearch that lets users search for different repositories in GitHub and classify them with features encompassing stars, forks preferences such as languages, topics etc.

This post introduces ReactiveSearch-Vue — A Vue.js UI components library for ElasticSearch that provides scaffolding for building great search experiences. You can read more about it below.

Next, we went step-by-step to add different UI components and style our app.

Starter sandbox configured with first component ReactiveBase and all the external libraries over here. Adding our second component, a DataSearch here. Adding our third component, two MultiDropDownLists here. Adding the fourth component, two RangeSliders here. And adding the final component, rendering results using ReactiveList here.

The entire app, along with each version of the app as we built it through this tutorial can also be found on Github at the GitXplore-App repo.

Further reading

If you enjoyed reading this post, you should also read our earlier post on how to build a BookSearch app with Vue.JS and ReactiveSearch.

If you’re stuck at any moment and/or have further questions, you’re more than welcome to leave a comment or message me directly! Feedback is always welcome and If you enjoyed this article, please hold down the clap button below 👏 to help others find it. The longer you hold it, the more claps you give. And don’t forget to ⭐️ the repo on Github, so you can find it when you need to build that awesome search UI.

Have fun building awesome search interfaces with ReactiveSearch and don’t forget to share your latest projects with us. We ❤️ seeing what you create!