~/rjRaghavendra JayateerthReact
Viewing
Project
← All projects

TVS Apache RTR 310 Configurator

Interactive 360° bike configurator for TVS Motor — colours, variants, accessories and kits on a rotating 3D model, embedded on tvsmotor.com.

ClientTVS Motor Company
RoleFront-end build
Type3D product configurator
StackReact, Redux, WebGL
Year2024
Visit live site ↗
Configurator — 360° view

What it is

The build-to-order configurator for the Apache RTR 310. A rider drags the bike through a full 360°, pinches to zoom, taps hotspots to change colours, and steps through variants, accessories and kits — then lands on a configuration they can take to a dealer. It runs as its own app and is embedded into the product page on tvsmotor.com.

What I built

The React front end, with Redux holding the single source of truth for the configuration. Every control — colour swatch, variant toggle, accessory checkbox — dispatches into that store, and the 3D view, the summary and the pricing all derive from it, so nothing can drift out of sync mid-configuration.

Rendering was the performance problem: a 3D canvas plus a control panel re-rendering on every state change is a recipe for dropped frames on a mid-range phone. Memoised selectors and component boundaries keep each state change repainting only what it touched.