A search application focused on allowing users to quickly sift through large amounts of data to find exactly what they need.
-min.webp)
After looking for a solution for several months and going through various freelancers and agencies, the client approached me to find a solution that would allow their site visitors to easily search through their products. The client sells small electronic car parts which include terminals, eyelets, connectors, and seals. Search functionality in this category would have to be detailed due to the high number of parameters attached to each product.
For this project, I was a consultant so I couldn’t actually build their project. However, I did build a demo showing proof of concept and explained how they could implement this same solution for their use case with their own data. I suggested Algolia InstantSearch because of its smooth search experience, wide ecosystem, fast solution for a front-end problem, and it's a smooth integration with Webflow, which they were already using for their website.
To demonstrate that this was the perfect solution, I needed to work with some type of data. I decided to use the TMDB API because I used it in a recent project so it was still familiar.
Data needs to be added to Webflow and Algolia. Webflow has a powerful CMS API with webhooks which can be used to keep Webflow and Algolia in sync. Before populating data anywhere, I built the search index structure in Algolia, set up a webhook in Webflow to update Algolia, and a Node JS script to read data from the API and populate data into Webflow. As data is populated into Webflow, webhooks are fired to update Algolia accordingly, keeping data consistent between both platforms.
Every Algolia widget requires a DOM element (i.e., div) with the relevant ID so we can show the widget in it when widgets are rendered to the page. We can build the entire UI like this based on the Algolia widgets we decide to show.
For example, for the genres widget, here’s the definition in the javascript code…
And here’s the widget on the live page.
Here’s the full layout within Webflow.
After seeing this demo, the client felt reassured and confident moving forward. They had a clear path for a solution, especially due to the detailed level of filters available for each product.
After clicking on search result, users are taken to the specific item that was clicked to see more data about that particular item.
The customer was thrilled with the completed project because it empowered their users to easily navigate their product catalogue to find exactly what they need.
