Concordia Elasticsearch Upgrade
An Elasticsearch integration project for Concordia, upgrading their legacy vanilla JavaScript search implementation to a modern React-based experience using Elasticsearch UI components, managed within the existing Optimizely CMS architecture.
Concordia's site search was built with vanilla JavaScript against Elasticsearch, making it difficult to maintain and extend as the site grew. The existing implementation lacked the filtering, faceting, and UX refinements users expected. The project required migrating the search frontend to React and integrating Elasticsearch UI's component library, without disrupting the underlying Elasticsearch index or the Optimizely CMS editorial workflow.
Elasticsearch
Elasticsearch provides a number of advantages for client going forward including features that were not previously feasible given the parameters of the old implementation. A robust auto completion capability alongside some strong conditionals for facets and filtering. The client can also specify synonyms and relational keywords with plans to integrate the synonyms api to allow for changes directly from the cms for a more user friendly interface.
Vanilla JS to React Migration
The existing search UI was a collection of imperatively written vanilla JavaScript scripts tightly coupled to the DOM structure and also utilizing some outdated jquery patterns. The migration involved decomposing this into React components: a search input with debounced query dispatch, a results list with lazy-loaded item rendering, and a filter panel with controlled state. The component boundaries were designed to map onto the Optimizely block structure, so editors retain full control over search placement and configuration through the CMS.
Elasticsearch UI Component Integration
Elasticsearch UI (from Elastic) provides a suite of headless React components for building search experiences on top of Elasticsearch. These were integrated to handle query construction, facet management, pagination, and result highlighting, taking over the heaviest search logic and leaving custom code responsible only for rendering and site-specific business rules. The integration was styled with Sass to match Concordia's brand, replacing Elastic's default stylesheet.