Learn Algolia, Mdx and Sequelize

Today’s users expect great things from their search experiences — speed, relevance, and usability, to name a few. Algolia provides developers with out-of-the-box and customizable search experiences that are a joy to build.

This introductory course on the Algolia search solution focuses on the user-facing part of search. Using the Algolia InstantSearch.js front-end library, we’ll see how to build an engaging search experience in no time. (28 minutes, to be exact.) 

**Prerequisites:** 
You don’t need previous experience with search to follow this course — we’ll use an example index with an e-commerce data set preconfigured. We will work mainly in JavaScript, so basic JS knowledge is expected.

If you want to play with your own index settings and data set, you can [create a free Algolia account here](https://www.algolia.com/users/sign_up/hacker/?utm_medium=link&utm_source=egghead&utm_campaign=education), but this is not required to follow along with this first course. 

Algolia's full suite APIs enable teams to develop unique search and discovery experiences for their customers across all platforms and devices. Type a query. Click a link. Open an app. Everything your customers do sends a signal about what they want. Algolia decodes that intent to deliver the right content - instantly.

algolia

Getting Started with Algolia InstantSearch.js

MDX has grown rapidly since the first commit two and a half years ago. We'd like to celebrate our accomplishments so far, and talk about what lies ahead. We've got lots of plans.
Learn how MDX increases developer productivity, improves educational content authoring, and even peek behind the curtains to see how MDX works.

MDX is an authorable format that lets you seamlessly use JSX in your markdown documents. You can import components, like interactive charts or notifications, and export metadata. This makes writing long-form content with components a blast.



MDX Conf 2020

The stats widget is used to display useful insights about the current results like the number of hits and the time taken to compute the results inside the engine.

Inform users about the current result set with Instantsearch JS Stats widget

The first step to implement Algolia on the front end using Instantsearch : importing and setting up the library with your credentials. This is what will allow the library to initiate the connection to Algolia servers and the first step to complete before adding some useful widgets.

Set up the Instantsearch JS Library

In this lesson we’ll build a search experience reduced to it’s 2 essential components : a search input and the displayed results. As simple as it is, to build this from scratch would require a fair amount of work. Between listening to the input, making the api call, parsing and displaying the result... To build this using Algolia’s Instantsearch library requires a few lines of code with simply two widgets: the Searchbox and the Hits widget.

Search an Algolia Index with Instantsearch JS searchbox and hits widgets

Displaying barebones Hits won’t catch your user’s attention. The UI is key to provide a good search experience and hits are the meat of this experience so they need extra attention. By using Mustache templating we’ll see how to display rich results to your users. 

Display Rich results with templates in the Hits widget for Instantsearch JS

Every  good search UX make users understand instantly why a given hit is being displayed as part of the result set. One way to achieve that is to highlight the keywords from the query directly inside the Hits. This is built in the API JSON response and in this video we’ll explain how to leverage it easily.

Highlight Keywords in Query Results using the Instantsearch JS Hits Widget

Searching is obviously not limited to inputting text in a searchbox. If your dataset allows it Algolia can leverage of attributes and values. To make use of those facets on the front end, one of the most common widget that you can find in a search UI is the refinement list. With this widget, the user can filter the dataset based on facets. This widget only displays the most relevant facets for the current search context.

Filter Datasets with Facets using Instantsearch JS to add a Refinement List

The hierarchical menu widget is used to create a navigation based on a hierarchy of facet attributes. We generally implement it for categories with subcategories.

Browse results based on a hierarchy of Facets (HierarchicalMenu) in Instantsearch JS

The range input is a simple but useful widget that allows a user filter the results by selecting a numeric range with a minimum and maximum input. In an e-commerce website for instance, this widget would be useful to limit the results where the price is comprised between $X and $Y.

Refine a dataset using a numeric range in Instantsearch JS with the Range Input widget

When performing a complex query, based on several active facets and filters, its tedious for the user to start from scratch if she has to unset all refinements one by one. Thanks to the clearAll widget, this task becomes a one click action for the user and is trivial to implement for us developers as it requires no configuration.

Reset all active refinements with the clearRefinements Instantsearch JS widget

When you have a large result set for a specific query and usually not displaying more than a few dozen simultaneously. Pagination is a popular widget that allows the user to switch between pages of the results.

Paginate Large Sets of Algolia Data with Instantsearch JS Pagination widget

All Instantsearch widgets are added to the page in a similar fashion and they also share a number of common options that we’ll cover in this video. We will be playing with a dummy menu widget that won’t be part of the final project just to showcase all those options.

How to Add Instantsearch JS widgets and their common attributes 

Jonathan Bakebwa introduces MDX support for VueJS and NuxtJS while also using Chakra UI Vue for MDX components

MDX and VueJS/NuxtJS

Cole Bemis explains how MDX works by taking us though his own journey digging into what MDX does under the hood.

Demystifying MDX

Monica Powell, creator of React Ladies, talks through why someone would migrate from Remark to MDX before going into how to do that and what problems you might run into.

Migrating to MDX

Prince Wilson, MDX contributor, takes us through one aspect of his personal site playground and dives deep into interactive code blocks.

Personal Site Playgrounds with MDX

Rodrigo Pombo introduces [Code Hike](https://codehike.org/) and talks through how Code Hike and MDX empower advanced scrolly telling techniques.

The X in MDX

Kathleen McMahon walks us through a real-world MDX digital garden implementation

Digital Gardening with MDX Magic

Sequelize is a promise-based ORM for Node.js and io.js. It supports the dialects PostgreSQL, MySQL, MariaDB, SQLite and MSSQL and features solid transaction support, relations, read replication and more.

sequelize

Sequelize attribute getters and setters are a convenient way to encapsulate extra logic for model properties. In this video, we'll cover adding getters and setters to enhance and even virtualize a column.

Sequelize: Getters, Setters and Virtual Columns

Models in the Node.js ORM, Sequelize, can be expanded with both class level and instance level functions. This video will show you how to extend your models to add helpers or business logic, and explain the methods execution scope.

Topics

Instructors

Content Type