3. Pushing the data

Here are a few illustrations from the Algolia docs that help explain some basic API concepts & vocabulary:

The first step of configuring an Algolia search is deciding which attributes to index. These are the attributes that will be searched when a user performs a query. To start configuring these attributes, I can simply drag & drop a JSON file into my Algolia dashboard. The data will immediately be indexed and displayed on the Browse Tab. This tab allows us to test and adjust the configuration of the index.

Uploading JSON via the Algolia dashboard

Attributes to index

The Algolia engine lets the user search inside of any configured attribute of the record. The name of the HS card is the most important attribute to match, but we also want to match against description, race, etc.

Point, click and drag to configure the attributes to index

There’s one very important thing to keep in mind here. We want to make sure that the content of the attribute matches what is displayed in the results. This way users can quickly understand why records have been selected (and why some records are ranked before others). Most of the time this information is textual in nature and clearly indicated with visual highlighting. But not always — a color attribute might be an exception to the textual rule.

Attributes for faceting

Faceting is a fancy term for searching within categories. Configuring an attribute to be faceted on is like creating a filter to refine search results.

A facet on the “set” attribute generates this menu

The list of filters (a.k.a. facets) is dynamic. The interface will display only filters available based on the results of the search, the count for each value can also be displayed.

In our case, the structure is quite simple and we can simply add all the attributes that have numerical values (mana, attack, health) as well as the ‘tags’ of cards (language, set, class, type).

Each faceted attribute gives users more options to refine their search

The Algolia dashboard allows me to quickly experiment with the settings.

Et voilà! Now we have an index with the right attributes and facets configured. There’s just one more challenge before we can start designing the real UI.