System Configurator

Vaillant, a global market leader in central heating solutions, provides innovative technologies for heating, cooling, and hot-water supply, contributing to the energy transition in the building sector. The System Configurator tool revolutionizes the planning process for installers by fully digitalizing it. With an intuitive and intelligent user interface, it enables installers to efficiently configure and plan heating systems quickly and effortlessly, enhancing both speed and ease of use.

Tech Stack: Vue.js, TypeScript, HTML, SCSS, Jest, Cypress, Webpack, JSON, REST, Html2Pdf, Thymeleaf, Spring Boot, Azure, Git

As an experienced frontend developer, I contributed to the successful planning, design, and implementation of the system configurator following the Scrum methodology. The development process was organized into two-week sprints and included daily stand-ups, sprint planning, refinements, reviews, and retrospectives. Collaborating within a dynamic team of a Scrum Master, Product Owner, two backend developers, and another frontend developer, I played a key role in delivering high-quality results.

Key Contributions and Responsibilities:

Frontend Development & Code Quality Assurance

Designed and developed the frontend of the application using Vue.js (integrated with Webpack) and TypeScript to ensure type safety and minimize errors. Pair programming with a fellow frontend developer under the “four-eyes principle” was employed to maintain code quality and error-free development.
Later in the project, I led the migration from Vue.js 2 to Vue.js 3, leveraging the latest framework features for enhanced performance and maintainability.

Styling and User Interface

Developed visually appealing and responsive stylesheets using SCSS, aligning with UI/UX design specifications.

Integration and Communication

Ensured seamless integration with the Spring Boot backend through REST API endpoints, managing authentication using JSON Web Tokens (JWT).

Testing & Quality Assurance

Developed robust unit tests with Jest and end-to-end tests with Cypress for each increment, ensuring functionality and reliability.

PDF Report Generation

Created automated and visually complex project reports in PDF format using the OpenHtmlToPDF Java library, enabling clear and professional presentation of configured projects to end clients.
Report templates were crafted using Thymeleaf, HTML4/5, and CSS 2.1.

Continuous Improvement

Proactively identified optimization opportunities to enhance efficiency, maintainability, and technology adoption. Regular refactoring efforts improved performance and reduced dependency on external libraries. Custom solutions were implemented where necessary, such as:

  • A custom store pattern instead of Vuex.
  • A bus system for global events instead of emit chaining.
  • A tailored form validation system using Vue directives.

Build & Deployment Pipeline

Participated in the continuous integration and delivery process through a Jenkins-based build pipeline, supporting daily incremental development and deployments. After approval by the Product Owner, increments were deployed to the production environment.

Collaboration & Agile Practices

Worked closely with the Product Owner to define tasks and stories, as well as with backend developers to align technical implementation. Tasks were executed based on the design specifications provided by the UI/UX designer.