NST PARTS
Using Algolia search to help build a Car
CLIENT:
NORTH SHORE TOYOTA PARTS
ROLE:
DEVELOPER
COMPANY:
FLIGHT DIGITAL - 2023
STACK:
- REACT
- TYPESCRIPT
- GATSBY JS
- SANITY CMS
- SHOPIFY API
- ALGOLIA
Tuning search, and tuning engines.
North Shore Toyota (NST) Parts required a new e-commerce store to handle the demand of their growing performance car parts business. The primary challenge for this project was to present the thousands of products they had on offer in a way that made sense to both car enthusiasts and newbies.
I had to solve two main issues for the website. The first being how a user can more easily find parts based on the car they drive, and the second being how a user can determine if a part is compatible with their specific car. By identifying these problems, I was able to create a “Search for parts” and a “Fit my car” feature that allowed users to filter through parts using more commonly used terms, such as make, model and chassis.
My role in this project also included supporting the lead developer by building out many of the site’s front end components. Most notable of which was the “Installer’s Map”, an interactive map that allowed users to find local installers who could install the parts purchased on the site.
The architecture.
The “Search for Parts” and “Fit My Car” features both utilised Algolia hooks to achieve the final result. Algolia as a platform provided the level of customisation and speed required for these features to work effectively.
Using a hook based search system also allowed for the high level of customisation to be executed, without much challenge. Since the hooks decoupled the search from the styling of the site, it made for a tidy codebase that kept the styling and functionality separate.
The functionality for the installers list was a combination of both MapBox and Algolia hooks. This allowed not only for installers to be displayed based on what was filtered, but also meant that users could move and interact with the map as the filtering was happening.
