Embeddable Product Locator app for Beverage and CPG brands

Grappos' Product Locator is a highly configurable application that can be embedded in a customer's website to provide a branded, accessible UI for finding products based on the visitor's location. Used extensively in the Beverage and CPG industries, this application has grown to adapt to client's needs for reporting, tracking, branding, and website technology.

The Challenge

Product locators tend to come in a couple categories:

• Manual and rigid
• Complex and expensive

Grappos entered the market with a vision to deliver premium features, high-touch customer service, and an exceptional user experience. The goal was to provide enterprise-class features, without the complexity and cost of larger competitors.

The final product needed to be able to embed directly in a customer's website and meet the needs for branding, customized functionality, and analytics.

In addition to consent laws like GDPR and CIPA, the beverage market is also a frequent target for legal action for failure to meet accessibility criteria. In order to succeed, the Locator needed to avoid tracking personal data by default, and provide a compliant and genuinely usable interface.

The Solution

The Grappos Locator brings together quality data from their custom REST API, a huge number of options for customization, GDPR compliant activity tracking, and WCAG 2.1 AA certification.

I began by breaking down the provided designs into reusable components, following the need to reuse data across multiple interface elements.

Since this interface powers critical sales path functionality, there is zero tolerance for downtime and breaking changes. A robust suite of checks and tests help prevent disruption, while allowing rapid iteration and continuous deployment.

My Role

I own the public UI end-to-end. I have built and iterated the UI across React and Vue, from Javascript into TypeScript, and migrated dependencies like moving from Google Maps to MapBox. I was responsible for interfacing with our partners for accessibility audits, taking their feedback and making adjustments that worked within our needs.

I frequently interface with clients and their technology/marketing teams to help address edge case needs for installing the locator or implementing tracking.

I consult with our development partner company on how to implement and manage the Public API and Admin interfaces, and keep it aligned with Grappos' needs.

Key Features

• Flexible Branding — Configurable branding colors that affect buttons, text, and other UI elements. Also configurable are custom background images, fonts, and map styles.
• Multiple Embed strategies — Init script provides options to embed the locator as an iFrame or a Web Component, delay initialization, even deliver the app from a custom domain.
• Location Detection — A user's location can be discovered silently with AWS's CloudFront headers, explicity via the browser's Geolocation API, or manually by typing a location into the Search Box. The Search Box implements MapBox's Search API.
• Custom Analytics — A client can optionally add behavior tracking with native integrations into GTM, Google Analytics, Meta, Snapchat, Pinterest, TikTok, and bespoke tracking pixels.
• Accessible experience — Audited to meet WCAG 2.1, level AA standards.

Built With

UI

The application interface is built with Vue + TypeScript and utilizes MapBox services for mapping rendering, reverse geolocation, and place search. Tailwind provides the utility classes

Build

The application is built with Vite, including a secondary process for building a collection of init scripts based environment variables and common modules. The code is kept to a consistent standard with eslint, and Prettier.

Testing

Unit testing is implemented in Vitetest, covering utilities, api calls, and state modification. Playwright provides E2E testing, with the a11y package to prevent regression from WCAG requirements.

Deployment

The UI and API are served by Amazon Web Services. CodePipeline is triggered by CodeCommit, built with CodeBuild, deployed to S3, and invalidated on CloudFront. Multiple pipelines exist to deploy to development, staging, and production environments.

API

The Public API runs on AWS' Elastic Beanstalk and served via CloudFront. It is powered by Node.js, with data housed in OpenSearch.