Mid Sweden University

This thesis project was carried out as part of a larger development initiative at the company CTC, a manufacturer of heat pumps. The aim was to develop a prototype for a quote configurator that automatically suggests compatible control units, product functions, and accessories based on the selected heat pump. The user is guided through a step-by-step interface where available options are dynamically adjusted according to previous se lections. The purpose was to reduce the risk of invalid combinations and create a dynamic, user-friendly configuration flow. To achieve this, product data was retrieved from multiple data sources. Server and backend logic was developed to generate technically valid product combinations. The interface was built with Next.js and React, with Zustand used for global state management of user selections, and TanStack Query employed for data fetching and caching. Components were styled using shadcn/ui and Tail wind CSS to ensure a consistent user interface. The prototype also includes functionality to generate a compiled PDF document, developed using the PDFKit library. This summary includes selected products and their associated documentation. The results show that the prototype largely meets the project’s goals and demonstrates that it is feasible to integrate data from multiple sources to create a dynamic and user-friendly solution.

Det här examensarbetet har genomförts som en del av ett större utvecklingsprojekt hos företaget CTC, som tillverkar värmepumpar. Målet med arbetet var att utveckla en prototyp för en offertkonfigurator som automatiskt föreslår kompatibla styrenheter, produktfunktioner och tillbehör uti från vald värmepump. Användaren vägleds genom ett stegvis gränssnitt där tillgängliga alternativ anpassas dynamiskt baserat på tidigare val. Syftet var att minska risken för felaktiga kombinationer och skapa ett dynamiskt, an vändarvänligt konfigurationsflöde. För att möjliggöra detta hämtades pro duktdata från flera datakällor. Serverlogik utvecklades för att ta fram tekniskt godkända produktkombinationer. Gränssnittet byggdes med Next.js/React, Zustand användes för global hantering av användarens val och TanStack Query användes för att hämta och cacha data. Komponen terna utformades med shadcn/ui och Tailwind CSS för att skapa ett enhetligt gränssnitt. Prototypen inkluderar även funktionalitet för att generera en sammanställning i PDF-format vilket utvecklades med biblioteket PDFKit. I sammanställningen ingår valda produkter och tillhörande dokumentation. Resultatet visar att prototypen i stort sett uppfyller projektets mål och att det är möjligt att koppla samman data från flera källor för att skapa en dynamisk och användarvänlig lösning.