Algolia is for search. Literally any website can take advantage of Algolia-powered search. You put JSON data (“records”) in, and then you can search them at lightning speed. The magic of Algolia is that they help you with both of those things: getting data in and getting search results out.
As far as getting data in, there are all sorts of ways. The most likely situation is that you already have data somewhere and you just need to give it to Algolia. They’ve got great docs on that. You basically write an integration that updates Algolia as you update your own data. There are so many things to help with this though. Got a WordPress site? They’ve got a PHP API client and people have built plugins around it.
Got a Rails site? They have integrations for you. What about a Jamstack site? No problem, they’ve got a Netlify build plugin. So, for example, your Jekyll site can have great search.
One way, and I’ve used this myself plenty of times, is literally entering records manually. While manually typing in records isn’t particularly scalable, I like that it’s possible.
So that’s all the “getting data in” part. Now the fun part: building a search UI experience. Great news here too: there is lots of help to make this awesome.
The core of it is InstantSearch.js, which Algolia provides directly. That native version also has versions in React, Vue, and Angular (you could make it work with anything). Wanna see it work super quickly? Try their Create InstantSearchApp flow, which will spin up a search UI super quickly for you.
While you don’t have to use any particular library, I find them very easy to use, very flexible configuration-wise, and no problem to style. Wanna see? CDNjs has everything on it in an Algolia index, so here’s a Pen that connects to that and provides a search UI:
You can see in the code how I’m controlling the number of results, the template and styles the results are shown in, and what happens when a search result is selected. That’s powerful stuff.
This is just the surface of Algolia though. Algolia is a very mature platform with all kinds of bells and whistles you can take advantage of. You can tweak algorithms, you can dig into analytics, you can take advantage of AI, you can use it on native mobile apps… and all with real customer support along the way.
The post Algolia appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.