Gautier Rollin

Single 3D configurator page application with React.


Live project: home-design.schmidt/3d-kitchen-configurator

Context

I worked on this project as a frontend developer for Hapticmedia. My main tasks were to work on the UX, the frontend development of the whole web application and a bit of project management with daily exchanges with the client.

Technical part

The web application was developed in JavaScript ES6 and with React, at the time of class components. The build part was managed with a custom Webpack configuration.

To make communications easier between the website and the web application, we developed a proxy class that acted as a bridge and was the only way to get data from the website to the web application, or from the application to the website.

All business rules were managed outside React with purely testable functions. All regressions were reproduced by a test before being corrected in the code.

Finally, to avoid CSS being overridden by website styles as much as possible, we have used styled components, a CSS in JS tool, that hash classnames at build time.

A few statistics

  • Project still live since 2017
  • Available in 6 different languages
  • Working within a team of 7 (2 frontend developers, 2 backend developers, 2 3D designers, 1 project manager)
  • Client annual revenue over €640,000,000