Automotive e-commerce · 3D and AR · Case study
AutoViz: 3D and AR wheel configurator SaaS for aftermarket brands
Embeddable 3D wheel configurator with WebXR and Quick Look AR, two admin dashboards and a 50+ endpoint API, white-labelled for multiple wheel brands.
- Client
- AutoViz is a B2B SaaS that gives aftermarket wheel brands an embeddable 3D and AR configurator for their e-commerce sites.
- Team
- 3 engineers, 1 designer
- Timeline
- Ongoing engagement, started February 2025
- Services
- Web development, Enterprise software, Cloud and DevOps, UI/UX design
- 50+
- API endpoints
- 340+
- frontend components
- 13+
- database entities
- 4
- repositories, 500+ source files
In short
AutoViz lets wheel brands embed a 3D configurator with augmented reality into any e-commerce site using a single script tag. Innovation Insight built the whole platform: a REST API with 50+ endpoints, two Next.js admin dashboards, a vanilla JavaScript SDK on Google Model-Viewer with WebXR and Quick Look AR, and a metadata system that lets each brand define its own product attributes. It serves brands such as Amani Forged, Variant Wheels and Azara.
Where they started.
- Aftermarket wheel brands sell products whose appeal is visual, but their e-commerce sites could only show flat photos of each finish and size.
- Every brand has a different catalogue structure, so attributes such as diameter, bolt pattern and finish could not be hard-coded into a database schema.
- The configurator had to drop into any third-party website with one script tag and still support AR on both iOS and Android.
- Brands needed to see how shoppers used the configurator, which wheels were saved and where quote requests came from.
The approach.
- Built a service-oriented platform: an Express.js REST API, a B2B admin dashboard, a parts-catalogue dashboard and a vanilla JavaScript SDK, each independently deployable.
- Rendered GLB models in real time with Google Model-Viewer and delivered AR through WebXR on Android, Quick Look on iOS and a QR code hand-off for desktop shoppers.
- Designed a flexible metadata system with ten value types so each part type defines its own attributes without schema migrations.
- Implemented multi-brand white-labelling with per-brand builds, theming and feature flags for filters, saving, export, AR and quote requests.
- Added analytics for tool adoption, most-viewed and most-saved wheels, user location, funnel progression, save rates and time-on-configurator.
- Set up CI/CD with GitHub Actions and AWS OIDC, deploying the API to EC2 via SSM, the dashboards to Elastic Beanstalk and the SDK to S3 with CloudFront invalidation.
What shipped.
- Embeddable configurator SDK with one-line integration, saved configurations and QR sharing
- Parts catalogue admin: parts, brands, variants, 3D model uploads, Algolia search and short links
- B2B admin: companies, domains with API keys and embed snippets, roles, quote tracking and API monitoring
- REST API with 50+ endpoints, Swagger documentation and BullMQ background queues
- PostgreSQL schema with 13+ entities and a ten-type metadata system
- Multi-cloud storage on AWS S3 and Google Cloud Storage with presigned uploads
- Docker Compose local environment and PM2 process management
How the engagement ran.
Context
The aftermarket wheel industry sells on looks: finish, size and how a wheel sits on a specific vehicle. Flat product photos cannot answer those questions, and building a bespoke 3D experience for every brand's website would be expensive. AutoViz set out to offer 3D visualisation and augmented reality as a white-label SaaS that any wheel brand can embed. Innovation Insight built the platform from the API and admin tools through to the embeddable widget, and continues to develop it.
What we built
- An embeddable configurator that auto-initialises on page load, renders GLB models with environment lighting and shadows, lets shoppers change finish, size and bolt pattern with a live preview, save up to five configurations locally and request a quote.
- Augmented reality across platforms: WebXR and Scene Viewer on Android, Quick Look on iOS, and a QR code modal so desktop users can continue on their phone.
- A parts catalogue admin with full lifecycle management, brand profiles with AAIA codes, variants per part, GLB model uploads, Algolia-powered search and shareable short links.
- A B2B admin for onboarding companies and brand groups, configuring domains with API keys, embed snippets and GA4 tracking, managing four user roles and tracking quote requests and API usage per domain.
- Analytics on adoption, popular wheels, shopper locations, funnel steps, save rates, session duration and monthly trends, filterable by company, domain and date.
Architecture and stack
| Layer | Technology | Why |
|---|---|---|
| API | Node.js 20, Express 4, TypeScript 5.7, TypeORM, express-validator, Swagger | Modular REST modules with per-route validation and generated documentation |
| Data and cache | Neon serverless PostgreSQL, Redis, BullMQ | Normalised schema with flexible metadata; async email and cache jobs off the request path |
| Admin dashboards | Next.js 14, React 18, Tailwind CSS, shadcn/ui, Zustand, React Table, ApexCharts | Fast internal tools with dark and light themes and rich data visualisation |
| SDK | Vanilla JavaScript IIFE, Google Model-Viewer, WebXR, Quick Look, QRCode.js, PostMessage | No framework dependency on the host site, sandboxed iframe, origin-verified messaging |
| Storage and CDN | AWS S3 with presigned URLs, Google Cloud Storage for 3D models, CloudFront | Large GLB files delivered from the edge with time-limited uploads |
| DevOps | GitHub Actions with AWS OIDC, SSM deployments to EC2, Elastic Beanstalk, PM2, Docker Compose | No long-lived cloud credentials in CI and one-push deployments per component |
How we worked
The work is organised as four repositories with branch-based environments: main deploys to production and dev to staging. The SDK is versioned with standard-version and published to S3, with CloudFront invalidation so brand sites pick up new releases immediately. Security was built into every layer: JWT access and refresh tokens with a queued refresh to avoid race conditions, four-tier role checks in API middleware, Helmet content security policy, presigned time-limited file URLs and iframe sandboxing for the widget.
Brand onboarding is a repeatable ten-step flow, from creating the company and domains to defining part types, metadata, parts, variants and 3D models, then dropping the script tag into the brand's site. Analytics start flowing as soon as shoppers use the configurator.
Scale and complexity
| Metric | Value |
|---|---|
| API endpoints | 50+ |
| Database entities | 13+ |
| Frontend components | 340+ |
| Repositories and source files | 4 repositories, 500+ files |
| Metadata value types | 10 (number, string, boolean, date, datetime, JSONB, image, GLB, colour, enum) |
| Upload limits | 50 MB per file, 10 files per request |
| Current versions | API v0.1.43, admin v0.1.100, SDK v1.5.0 |
What this means for your project
Any product that is bought on appearance, from furniture and lighting to eyewear and vehicles, benefits from the same building blocks: a lightweight embeddable widget, browser-based AR without an app, a catalogue with flexible attributes and analytics that show which configurations convert.
Innovation Insight can deliver an embeddable configurator and admin tooling as a fixed-scope project or grow it as a SaaS under a dedicated team, as we do for AutoViz.
What changed.
- Live platform serving multiple wheel brands including Amani Forged, Variant Wheels and Azara
- 50+ API endpoints, 13+ database entities and 340+ frontend components across four repositories.
- Cross-platform AR on Android, iOS and desktop via QR hand-off.
- Shipped as API v0.1.43, admin v0.1.100 and SDK v1.5.0 under continuous deployment.
Questions about this project.
Can a 3D configurator be embedded in Shopify or WordPress?
Yes. The AutoViz SDK loads from a single script tag, communicates with the host page over PostMessage and runs in a sandboxed iframe, so it works on Shopify, WordPress, custom storefronts and any site that can include a script.
Does AR work without an app?
Yes. Android devices use WebXR or Scene Viewer and iOS uses Quick Look, all from the browser. Desktop shoppers get a QR code that opens the same configuration on their phone.
How do you handle products with very different attributes?
Through a metadata system rather than fixed columns. Each part type defines its own fields across ten value types, including images, 3D models, colours and enums, so a new product category needs configuration, not a database migration.