Gautier Rollin

Customizable SaaS 3D configurator with React.

Context

I worked at Hapticmedia for +5 years and 3 years on the development of the Apviz SaaS product. I developed the whole frontend part of this application, from features prototyping to the code implementation on the platform. I had the opportunity to work with an experienced team of 10 people including 2 frontend developers, 4 backend developers and 4 3D engineers.

Technical part

The web application was developed in JavaScript ESNext, TypeScript, with React and Relay to communicate with the GraphQL API. The build part was managed with a custom Webpack configuration.

We used AWS Amplify to manage authentication, Ant Design as React UI framework, GitHub for maintenance and issue tracking and I was also responsible for security issues, setting up the Content Security Policy (CSP) and Cross-Origin Resource Sharing (CORS).

Architecture

My main challenge for this project was the conception of the micro services architecture to make maintenance and feature creation easier. After a lot of research and testing, we decided to split the old monolith into several small web applications (micro frontends), as independent as possible, thanks to Webpack Module Federation plugin and Single SPA. No less than 8 repositories on GitHub with continuous integration make up this project.

Technical specifications to meet solved by Webpack Module Federation plugin and Single SPA:

  • when a micro frontend is released, there are no further steps to follow to see the changes in production
  • some dependencies should not be added several times (like React)
  • micro frontend applications should be loaded only when necessary
  • micro frontend applications should be as independent as possible