Client Dive: Techstack
At the top of the architecture, there are five external services: Enapps LTD HubSpot , Storyblok , Lokalise and Bynder.
Storyblok is our CMS (#ContentManagementSystem) (see my recent Storyblok love-in here). This hosts and organises all the static content on the site (home page content, etc.)
Bynder is our DAM (#DigitalAssetManagement) platform. It holds all of our digital assets and is directly connected to the custom-built Admin User Interface (UI) and Storyblok. Bynder allows us to tag and filter tens of thousands of product and project images, as well as all our other digital assets (design files, documents, etc.)
Enapps LTD is our ERP system. It holds all BOM (Bill of Materials) information, core product parameters, stock data, and customer pricing. Whilst it has lots of product information in it, we don’t actually pull marketing product information from the ERP - we populate that in the Admin UI.
Enapps feeds data into our serverless functions hosted in Amazon Web Services (AWS) and uses a GraphQL API to communicate with our custom-built Admin UI.
The Admin UI is an integrator that brings data in from Enapps, Storyblok, and Bynder. It allows us to aggregate product categorisation, media (via Bynder), and ERP data into one database for the API to query. This is much faster and simpler, both in build and operation than querying each service individually.
Lokalise is a translation and localisation management system that allows both human and AI translations to take place. Lokalise will be used by both the Joseph Giles team and external translators. The platform not only stores translations in a library to be re-used but also suggests spelling, grammatical, and semantic improvements. As translations are made in Lokalise, the content is queued for approval before being pushed into Storyblok.
Algolia is our search platform and is split into frontend and backend. Algolia's frontend operations focus on integrating and customising the search experience for end-users, while its backend operations handle data indexing, search algorithms, scalability, analytics, and security, ensuring efficient and effective search functionality. It’s pretty much the best search system out there, essentially a ‘Google for websites’.
Below the serverless functions, there's Netlify, a web hosting and automation platform that serves the static files and operates the CI/CD (Continuous Integration/Continuous Deployment) pipeline (a method of minimising deploy time.)
The NextJS section represents a JavaScript framework for building server-side rendered React applications. (a collection of pre-written JavaScript code that helps us build the site more efficiently. It provides a structured foundation on which to build the site, meaning we don't have to start from scratch or reinvent common features.) Within this, there are PSP (Product Search Page), PLP (Product Listing Page), and PDP (Product Detail Page), which are three key components of our largely product-based website.
Algolia (Frontend) is connected to these NextJS components, powering the search and results functionality on the client side.
HubSpot is our CRM, service, sales, and marketing automation platform. We run it at enterprise level, allowing us to leverage the huge volume of data it collects to automate marketing operations and inform business decisions. We’ve created a two-way integration with our ERP system, as well as building elements into the front end of the website to allow for lead capture, A/B testing, and analytics.
The diagram shows the flow of data primarily from left to right, indicating how information moves from the serverless functions through the API and into the frontend components.
This tech stack is a complex, multi-service architecture that relies on modern web technologies and services to provide a robust, scalable content management and delivery system, for a web application that handles a considerable amount of product data and requires translation/localisation for different markets.
