Audiologic Website

Audiologic, one of the UK's largest suppliers, integrators and installers of audio visual equipment were in need of a new website to elevate their online presence, showcase their products, latest news and vast industry knowledge as well as an online hub for their thousands of customers to login and manage their accounts.

The core challenges

• The need to easily add and manage their thousands of products, categories and subcategories
• Manage news, case studies and learning zone features
• A highly configurable and layered pricing and discount structure based on customer groupings that needed to be dynamically applied to all products when a user is logged in
• In need of a fast and accurate search functionality across products, brands, categories and news
• Allow users to export custom price lists based on relevant product brands
• Allow users to create and export custom project kit lists of required products
• Produce daily usage and paper trail reports of both front and backend actions

To achieve a high level of customisation and configurability the headless CMS Strapi to power the backend, giving us the option to power multiple applications from the same api in the future. The frontend was built using the react based JS framework Next.js to produce a highly optimised and SEO friendly website. The combination of the two systems together allowing not only for endless flexibility but also a great development experience as both are nodejs and react based so context and language switching wasn't an issue.

Algolia was used to handle the search functionality, a custom integration between the CMS and Algolia was built to keep records in sync. The frontend performed search and displayed results using Algolia's instant-search library.

The backend initially built using Strapi V3 which is now end of life has been migrated to V4. The process of V3 to V4 migration is challenging on application of this size and complexity.

Strapi offer several tools with their Codemods plugin and custom database migration scripts, which were a good start and managed a bulk of the heavy lifting. However many of the custom parts of the application needed to be ported manually to the new Strapi api and custom database scripts and queries were used to port the data over to the new database schema correctly.

If updating the backend wasn't enough of a challenge, at the same time as updating the CMS the frontend was also migrated to Next.js 13 using the new app router. With the app router comes a whole new approach to almost every aspect of Next.js from data fetching to client side interaction. Along the way many of the previous libraries used has compatitbilty issues with the app router so as a result application had a complete overhaul from data fetching to the authentication stragegy migrating to use the robust Next-Auth.