HRX
A made-to-order race suit configurator. Sponsors, flags and lettering, priced as you place them.
- HRX
- 2024
- Configurator
- E-commerce
- Unreal Engine
- WebSockets
- Payload CMS
- Unreal Engine Developer
Challenge
A race suit carries more options than a product page can hold. A base graphic, a pattern per zone, colours for knit and cuff, sponsor logos in five chest and arm positions, a flag, lettering in a racing face, then pockets, cooling holes and a size. Every one of those moves the price, and nobody signs off on a suit they cannot see.
Solution
The configurator lives in the HRX store and holds the whole specification. A base graphic comes first, then patterns and colours zone by zone, then sponsor logos, flags and lettering placed in numbered zones on the suit itself. Racing shoes work the same way. The price follows every change, and the finished suit goes to the cart.
My side was Unreal Engine. The suit renders in Unreal on a remote machine and streams to the browser, and I built the WebSocket API that carries each choice from the page into the scene. I also managed the Unreal content and was the contact for the 3D designers who made it.
A colleague built the frontend, which takes its content from Payload CMS. Two parts of it are mine: the loading screen, which plays racing footage while the stream connects, and the 2D editor, where a customer writes a line in a racing font, uploads a logo or picks a flag before placing it on the suit.
Results
Live in the HRX store, where a configured suit goes straight to the cart.
