← Back to experiences

Kfzteile24

Frontend Engineer

Nov 2023 - July 2025

Key Responsibilities

  • Developed and maintained the company's main and secondary e-commerce websites, ensuring high performance and an efficient user experience.
  • Migrated legacy code to the new Vue.js architecture, improving performance and scalability.
  • Created automated tests for the new Vue.js architecture, ensuring the new code is working as expected and no features were missed from the legacy code.

Technical Projects

Migration from Twig PHP to Vue.js

Migrated the company's Cart, Wishlist, and Checkout pages from Twig PHP to Vue.js, improving performance and user experience. Adapted the FE to expect a lighter response structure, reducing the amount of data sent to the client from BE.

Kfzteile24 - wishlist
Kfzteile24 - Cart
Kfzteile24 - Checkout

Technologies Used:

Vue.jsJavascriptTwig PHPSCSSJestPlaywrightTypescript

Benefits:

  • Previously the BE response for any action (e.g add to wishlist, change quantity, add to cart) would be a HTML page which had to be remounted, after the VueJs migration, the BE response is a JSON object that is used to render the page and update only the component that changed.
  • Improved caching in browser and server side, reducing the amount of data sent to the client from BE.
  • Faster page load times

Create and Implement automated tests

Created and implemented automated tests for the new Vue.js architecture using Playwright and Typescript. Initially the tests were writtent to test the basic functionality of the website, but later on we expanded the tests to bugs that were reported by the users and the QA team.

Technologies Used:

PlaywrightTypescriptVue.js

Benefits:

  • Ease of implementation of new features, as the tests can be run before merging the new code into the main branch, ensuring that any new feature is not breaking existing ones.
  • The FE flags were used by the tests, to let understand for example: if the hydration is done, if a fetch is still ongoing, or if a certain animation is still running. This way the tests don't timeout and are more reliable. Some of the tests were ran on slower devices to ensure the website is still working as expected, but the flags enabled us to have one test for all devices.