Link iconthe-ecu-pro.com

A state of the art testing facility for mail-in automotive repairs

Headless eCommerce stack with smart, time-saving data mapping of services to thousands of vehicles. Frictionless transitions of generic web searches to vehicle-specific conversions on a lightening fast frontend. Realtime order support and operational guidance.

Case study published on 29 June 2025

Vehicle data mapping and content inheritance

The ECU Pro is a headless eCommerce site, using Shopify as its backend. I built the frontend application primarily with Nextjs, FaunaDB, and Shopify's GraphQL APIs.

I also built a standalone vehicle importer to populate thousands of vehicles and their related services using the client's preferred offline data. Initially, I used FaunaDB to manage normalised indexes and product mappings, but later migrated to Shopify Metaobjects; which eleminated a third-party dependency and helped to reduce hosting costs.

The system supports many-to-many vehicle-service mappings with cascading content inheritance. Collections define shared content, which products and then variants inherit and customise respectively. Vehicle mappings further tailor content on the frontend application, enabling scalable, unique updates across thousands of entries.

Additionally, proxy products inherit and pass on data from common products, allowing efficient creation of part-specific services without duplicating backend entries.

Illustration of the data mapping approach
← Swipe or scroll on image →

Realtime order support and operational guidance

The frontend includes a secure customer account section focused on guiding users through the post-order process.

The initial purchase flow is minimal and streamlined by not including information and requirements superfluous to the sale conversion. The account section then collects additional work order details and provides service-specific instructions for removing and sending in parts.

Custom Shopify order attributes, statuses, and Zoho Desk tickets drive dynamic order views, with clear statuses and prompts. A real-time messaging interface syncs with ticket threads and email correspondence, keeping customers informed and assured throughout the process.

Illustration of customer account section
← Swipe or scroll on image →

Get the traffic and convert quickly

Many incoming searches lack the specificity needed for accurate sales. To address this, catch-all landing pages confirm service availability and prompt users to select their vehicle. The vehicle selector adapts to user intent, taking them directly to the correct service type of many with the necessary vehicle-specific details.

Illustration of fast conversions of frontend
← Swipe or scroll on image →

Lightening fast edge network deployments with custom telemetry

The frontend uses Incremental Static Regeneration, a preloading router, and edge deployment for near-instant page transitions. Due to the limited server-side logging and debuging abilities within the severless deployment setup, I have implemented telemetry where needed to diagnose and resolve issues.