Merge remote-tracking branch 'origin/feat/ssr' into feat/ssr

Reviewed-on: #39

backend/src/main/java/com/printcalculator/controller/SitemapController.java

@@ -0,0 +1,37 @@
+package com.printcalculator.controller;
+
+import com.printcalculator.service.shop.ShopSitemapService;
+import org.springframework.beans.factory.annotation.Value;
+import org.springframework.http.CacheControl;
+import org.springframework.http.MediaType;
+import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RestController;
+
+import java.time.Duration;
+
+@RestController
+public class SitemapController {
+    private final ShopSitemapService shopSitemapService;
+    private final long cacheSeconds;
+
+    public SitemapController(
+            ShopSitemapService shopSitemapService,
+            @Value("${app.sitemap.shop.cache-seconds:3600}") long cacheSeconds
+    ) {
+        this.shopSitemapService = shopSitemapService;
+        this.cacheSeconds = Math.max(cacheSeconds, 0L);
+    }
+
+    @GetMapping(value = "/api/sitemap-shop.xml", produces = MediaType.APPLICATION_XML_VALUE)
+    public ResponseEntity<String> getShopSitemap() {
+        CacheControl cacheControl = cacheSeconds > 0
+                ? CacheControl.maxAge(Duration.ofSeconds(cacheSeconds)).cachePublic()
+                : CacheControl.noCache();
+
+        return ResponseEntity.ok()
+                .contentType(MediaType.parseMediaType("application/xml;charset=UTF-8"))
+                .cacheControl(cacheControl)
+                .body(shopSitemapService.getShopSitemapXml());
+    }
+}

backend/src/main/java/com/printcalculator/service/shop/ShopSitemapService.java

@@ -0,0 +1,244 @@
+package com.printcalculator.service.shop;
+
+import com.printcalculator.entity.ShopCategory;
+import com.printcalculator.entity.ShopProduct;
+import com.printcalculator.repository.ShopCategoryRepository;
+import com.printcalculator.repository.ShopProductRepository;
+import org.springframework.beans.factory.annotation.Value;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
+
+import java.net.URLEncoder;
+import java.nio.charset.StandardCharsets;
+import java.text.Normalizer;
+import java.time.Clock;
+import java.time.Duration;
+import java.time.Instant;
+import java.time.OffsetDateTime;
+import java.time.format.DateTimeFormatter;
+import java.util.LinkedHashMap;
+import java.util.List;
+import java.util.Locale;
+import java.util.Map;
+import java.util.Set;
+import java.util.UUID;
+import java.util.stream.Collectors;
+
+@Service
+@Transactional(readOnly = true)
+public class ShopSitemapService {
+    private static final List<String> SUPPORTED_LANGUAGES = ShopProduct.SUPPORTED_LANGUAGES;
+    private static final String DEFAULT_LANGUAGE = "it";
+    private static final DateTimeFormatter LASTMOD_FORMATTER = DateTimeFormatter.ISO_OFFSET_DATE_TIME;
+
+    private final ShopCategoryRepository shopCategoryRepository;
+    private final ShopProductRepository shopProductRepository;
+    private final String frontendBaseUrl;
+    private final Duration cacheTtl;
+    private final Clock clock;
+
+    private volatile CachedSitemap cachedSitemap;
+
+    @Autowired
+    public ShopSitemapService(ShopCategoryRepository shopCategoryRepository,
+                              ShopProductRepository shopProductRepository,
+                              @Value("${app.frontend.base-url:http://localhost:4200}") String frontendBaseUrl,
+                              @Value("${app.sitemap.shop.cache-seconds:3600}") long cacheSeconds) {
+        this(shopCategoryRepository, shopProductRepository, frontendBaseUrl, cacheSeconds, Clock.systemUTC());
+    }
+
+    ShopSitemapService(ShopCategoryRepository shopCategoryRepository,
+                       ShopProductRepository shopProductRepository,
+                       String frontendBaseUrl,
+                       long cacheSeconds,
+                       Clock clock) {
+        this.shopCategoryRepository = shopCategoryRepository;
+        this.shopProductRepository = shopProductRepository;
+        this.frontendBaseUrl = normalizeBaseUrl(frontendBaseUrl);
+        this.cacheTtl = cacheSeconds > 0 ? Duration.ofSeconds(cacheSeconds) : Duration.ZERO;
+        this.clock = clock;
+    }
+
+    public String getShopSitemapXml() {
+        Instant now = Instant.now(clock);
+        CachedSitemap current = cachedSitemap;
+        if (current != null && now.isBefore(current.expiresAt())) {
+            return current.xml();
+        }
+
+        synchronized (this) {
+            current = cachedSitemap;
+            now = Instant.now(clock);
+            if (current != null && now.isBefore(current.expiresAt())) {
+                return current.xml();
+            }
+
+            String xml = buildSitemapXml();
+            Instant expiresAt = cacheTtl.isZero() ? now : now.plus(cacheTtl);
+            cachedSitemap = new CachedSitemap(xml, expiresAt);
+            return xml;
+        }
+    }
+
+    private String buildSitemapXml() {
+        List<ShopCategory> activeCategories = shopCategoryRepository.findAllByIsActiveTrueOrderBySortOrderAscNameAsc();
+        Set<UUID> activeCategoryIds = activeCategories.stream()
+                .map(ShopCategory::getId)
+                .collect(Collectors.toSet());
+
+        List<ShopProduct> activeProducts = shopProductRepository.findAllByIsActiveTrueOrderByIsFeaturedDescSortOrderAscNameAsc();
+
+        StringBuilder xml = new StringBuilder(16_384);
+        xml.append("<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n");
+        xml.append("<urlset xmlns=\"http://www.sitemaps.org/schemas/sitemap/0.9\" ");
+        xml.append("xmlns:xhtml=\"http://www.w3.org/1999/xhtml\">\n");
+
+        appendCategoryUrls(xml, activeCategories);
+        appendProductUrls(xml, activeProducts, activeCategoryIds);
+
+        xml.append("</urlset>\n");
+        return xml.toString();
+    }
+
+    private void appendCategoryUrls(StringBuilder xml, List<ShopCategory> categories) {
+        for (ShopCategory category : categories) {
+            if (!Boolean.TRUE.equals(category.getIndexable())) {
+                continue;
+            }
+
+            String encodedSlug = pathEncodeSegment(category.getSlug());
+            Map<String, String> hrefByLanguage = new LinkedHashMap<>();
+            for (String language : SUPPORTED_LANGUAGES) {
+                hrefByLanguage.put(language, frontendBaseUrl + "/" + language + "/shop/" + encodedSlug);
+            }
+
+            appendUrlEntry(xml, hrefByLanguage, category.getUpdatedAt());
+        }
+    }
+
+    private void appendProductUrls(StringBuilder xml,
+                                   List<ShopProduct> products,
+                                   Set<UUID> activeCategoryIds) {
+        for (ShopProduct product : products) {
+            if (!Boolean.TRUE.equals(product.getIndexable())) {
+                continue;
+            }
+            if (product.getCategory() == null || !activeCategoryIds.contains(product.getCategory().getId())) {
+                continue;
+            }
+
+            Map<String, String> hrefByLanguage = new LinkedHashMap<>();
+            for (String language : SUPPORTED_LANGUAGES) {
+                String publicSegment = localizedProductPathSegment(product, language);
+                hrefByLanguage.put(language, frontendBaseUrl + "/" + language + "/shop/p/" + pathEncodeSegment(publicSegment));
+            }
+
+            appendUrlEntry(xml, hrefByLanguage, product.getUpdatedAt());
+        }
+    }
+
+    private void appendUrlEntry(StringBuilder xml,
+                                Map<String, String> hrefByLanguage,
+                                OffsetDateTime lastmod) {
+        String defaultHref = hrefByLanguage.get(DEFAULT_LANGUAGE);
+        if (defaultHref == null || defaultHref.isBlank()) {
+            return;
+        }
+
+        xml.append("  <url>\n");
+        xml.append("    <loc>").append(xmlEscape(defaultHref)).append("</loc>\n");
+
+        for (String language : SUPPORTED_LANGUAGES) {
+            String href = hrefByLanguage.get(language);
+            if (href == null || href.isBlank()) {
+                continue;
+            }
+            xml.append("    <xhtml:link rel=\"alternate\" hreflang=\"")
+                    .append(language)
+                    .append("\" href=\"")
+                    .append(xmlEscape(href))
+                    .append("\" />\n");
+        }
+
+        xml.append("    <xhtml:link rel=\"alternate\" hreflang=\"x-default\" href=\"")
+                .append(xmlEscape(defaultHref))
+                .append("\" />\n");
+
+        if (lastmod != null) {
+            xml.append("    <lastmod>").append(LASTMOD_FORMATTER.format(lastmod)).append("</lastmod>\n");
+        }
+
+        xml.append("  </url>\n");
+    }
+
+    private String localizedProductPathSegment(ShopProduct product, String language) {
+        String localizedName = product.getNameForLanguage(language);
+        String idPrefix = productIdPrefix(product.getId());
+        String tail = firstNonBlank(slugify(localizedName), slugify(product.getSlug()), "product");
+        return idPrefix.isBlank() ? tail : idPrefix + "-" + tail;
+    }
+
+    private String productIdPrefix(UUID productId) {
+        if (productId == null) {
+            return "";
+        }
+        String raw = productId.toString().trim().toLowerCase(Locale.ROOT);
+        int dashIndex = raw.indexOf('-');
+        if (dashIndex > 0) {
+            return raw.substring(0, dashIndex);
+        }
+        return raw.length() >= 8 ? raw.substring(0, 8) : raw;
+    }
+
+    static String slugify(String rawValue) {
+        String safeValue = rawValue == null ? "" : rawValue;
+        String normalized = Normalizer.normalize(safeValue, Normalizer.Form.NFD)
+                .replaceAll("\\p{M}+", "")
+                .toLowerCase(Locale.ROOT)
+                .replaceAll("[^a-z0-9]+", "-")
+                .replaceAll("^-+|-+$", "")
+                .replaceAll("-{2,}", "-");
+        return normalized;
+    }
+
+    private String firstNonBlank(String... values) {
+        if (values == null) {
+            return null;
+        }
+        for (String value : values) {
+            if (value != null && !value.isBlank()) {
+                return value;
+            }
+        }
+        return null;
+    }
+
+    private String pathEncodeSegment(String rawSegment) {
+        String safeSegment = rawSegment == null ? "" : rawSegment;
+        return URLEncoder.encode(safeSegment, StandardCharsets.UTF_8).replace("+", "%20");
+    }
+
+    private String xmlEscape(String value) {
+        return String.valueOf(value)
+                .replace("&", "&amp;")
+                .replace("<", "&lt;")
+                .replace(">", "&gt;")
+                .replace("\"", "&quot;")
+                .replace("'", "&apos;");
+    }
+
+    private String normalizeBaseUrl(String baseUrl) {
+        String normalized = (baseUrl == null ? "" : baseUrl).trim();
+        if (normalized.isBlank()) {
+            return "http://localhost:4200";
+        }
+        while (normalized.endsWith("/")) {
+            normalized = normalized.substring(0, normalized.length() - 1);
+        }
+        return normalized;
+    }
+
+    private record CachedSitemap(String xml, Instant expiresAt) {
+    }
+}

backend/src/main/resources/application.properties

@@ -56,6 +56,7 @@ app.mail.contact-request.admin.enabled=${APP_MAIL_CONTACT_REQUEST_ADMIN_ENABLED:
 app.mail.contact-request.admin.address=${APP_MAIL_CONTACT_REQUEST_ADMIN_ADDRESS:info@3d-fab.ch}
 app.mail.contact-request.customer.enabled=${APP_MAIL_CONTACT_REQUEST_CUSTOMER_ENABLED:true}
 app.frontend.base-url=${APP_FRONTEND_BASE_URL:http://localhost:4200}
+app.sitemap.shop.cache-seconds=${APP_SITEMAP_SHOP_CACHE_SECONDS:3600}
 
 # Admin back-office authentication
 admin.password=${ADMIN_PASSWORD}

backend/src/test/java/com/printcalculator/service/shop/ShopSitemapServiceTest.java

@@ -0,0 +1,116 @@
+package com.printcalculator.service.shop;
+
+import com.printcalculator.entity.ShopCategory;
+import com.printcalculator.entity.ShopProduct;
+import com.printcalculator.repository.ShopCategoryRepository;
+import com.printcalculator.repository.ShopProductRepository;
+import org.junit.jupiter.api.BeforeEach;
+import org.junit.jupiter.api.Test;
+import org.junit.jupiter.api.extension.ExtendWith;
+import org.mockito.Mock;
+import org.mockito.junit.jupiter.MockitoExtension;
+
+import java.time.Clock;
+import java.time.Instant;
+import java.time.OffsetDateTime;
+import java.time.ZoneOffset;
+import java.util.List;
+import java.util.UUID;
+
+import static org.junit.jupiter.api.Assertions.assertFalse;
+import static org.junit.jupiter.api.Assertions.assertTrue;
+import static org.mockito.Mockito.times;
+import static org.mockito.Mockito.verify;
+import static org.mockito.Mockito.when;
+
+@ExtendWith(MockitoExtension.class)
+class ShopSitemapServiceTest {
+
+    @Mock
+    private ShopCategoryRepository shopCategoryRepository;
+    @Mock
+    private ShopProductRepository shopProductRepository;
+
+    private ShopSitemapService service;
+
+    @BeforeEach
+    void setUp() {
+        Clock fixedClock = Clock.fixed(Instant.parse("2026-03-11T10:00:00Z"), ZoneOffset.UTC);
+        service = new ShopSitemapService(
+                shopCategoryRepository,
+                shopProductRepository,
+                "https://3d-fab.ch/",
+                900,
+                fixedClock
+        );
+    }
+
+    @Test
+    void getShopSitemapXml_shouldGenerateLocalizedCategoryAndProductEntries() {
+        ShopCategory visibleCategory = new ShopCategory();
+        visibleCategory.setId(UUID.fromString("21111111-1111-1111-1111-111111111111"));
+        visibleCategory.setSlug("accessori");
+        visibleCategory.setIndexable(true);
+        visibleCategory.setIsActive(true);
+        visibleCategory.setUpdatedAt(OffsetDateTime.parse("2026-03-10T08:00:00Z"));
+
+        ShopCategory hiddenCategory = new ShopCategory();
+        hiddenCategory.setId(UUID.fromString("22222222-2222-2222-2222-222222222222"));
+        hiddenCategory.setSlug("bozza");
+        hiddenCategory.setIndexable(false);
+        hiddenCategory.setIsActive(true);
+        hiddenCategory.setUpdatedAt(OffsetDateTime.parse("2026-03-10T09:00:00Z"));
+
+        ShopProduct indexedProduct = new ShopProduct();
+        indexedProduct.setId(UUID.fromString("123e4567-e89b-12d3-a456-426614174000"));
+        indexedProduct.setCategory(visibleCategory);
+        indexedProduct.setSlug("supporto-bici");
+        indexedProduct.setNameIt("Supporto bici");
+        indexedProduct.setNameEn("Bike Holder");
+        indexedProduct.setNameDe("Fahrrad Halter");
+        indexedProduct.setNameFr("Support velo");
+        indexedProduct.setIndexable(true);
+        indexedProduct.setIsActive(true);
+        indexedProduct.setUpdatedAt(OffsetDateTime.parse("2026-03-11T07:30:00Z"));
+
+        ShopProduct hiddenProduct = new ShopProduct();
+        hiddenProduct.setId(UUID.fromString("33333333-3333-3333-3333-333333333333"));
+        hiddenProduct.setCategory(visibleCategory);
+        hiddenProduct.setSlug("draft");
+        hiddenProduct.setIndexable(false);
+        hiddenProduct.setIsActive(true);
+        hiddenProduct.setUpdatedAt(OffsetDateTime.parse("2026-03-11T08:00:00Z"));
+
+        when(shopCategoryRepository.findAllByIsActiveTrueOrderBySortOrderAscNameAsc())
+                .thenReturn(List.of(visibleCategory, hiddenCategory));
+        when(shopProductRepository.findAllByIsActiveTrueOrderByIsFeaturedDescSortOrderAscNameAsc())
+                .thenReturn(List.of(indexedProduct, hiddenProduct));
+
+        String xml = service.getShopSitemapXml();
+
+        assertTrue(xml.contains("<loc>https://3d-fab.ch/it/shop/accessori</loc>"));
+        assertTrue(xml.contains("hreflang=\"en\" href=\"https://3d-fab.ch/en/shop/accessori\""));
+        assertFalse(xml.contains("https://3d-fab.ch/it/shop/bozza"));
+
+        assertTrue(xml.contains("<loc>https://3d-fab.ch/it/shop/p/123e4567-supporto-bici</loc>"));
+        assertTrue(xml.contains("hreflang=\"en\" href=\"https://3d-fab.ch/en/shop/p/123e4567-bike-holder\""));
+        assertTrue(xml.contains("hreflang=\"de\" href=\"https://3d-fab.ch/de/shop/p/123e4567-fahrrad-halter\""));
+        assertTrue(xml.contains("hreflang=\"x-default\" href=\"https://3d-fab.ch/it/shop/p/123e4567-supporto-bici\""));
+        assertTrue(xml.contains("<lastmod>2026-03-11T07:30:00Z</lastmod>"));
+        assertFalse(xml.contains("33333333-draft"));
+    }
+
+    @Test
+    void getShopSitemapXml_shouldServeCachedPayloadWithinTtl() {
+        when(shopCategoryRepository.findAllByIsActiveTrueOrderBySortOrderAscNameAsc()).thenReturn(List.of());
+        when(shopProductRepository.findAllByIsActiveTrueOrderByIsFeaturedDescSortOrderAscNameAsc()).thenReturn(List.of());
+
+        String firstXml = service.getShopSitemapXml();
+        String secondXml = service.getShopSitemapXml();
+
+        assertTrue(firstXml.contains("<urlset"));
+        assertTrue(secondXml.contains("<urlset"));
+        verify(shopCategoryRepository, times(1)).findAllByIsActiveTrueOrderBySortOrderAscNameAsc();
+        verify(shopProductRepository, times(1)).findAllByIsActiveTrueOrderByIsFeaturedDescSortOrderAscNameAsc();
+    }
+}

frontend/Dockerfile

@@ -1,14 +1,13 @@
-# Stage 1: Build
+FROM node:22-alpine
-FROM node:20 as build
 
 WORKDIR /app
 COPY package*.json ./
-RUN npm install
+RUN npm ci --legacy-peer-deps
 COPY . .
-RUN npm run build --configuration=production
+RUN npm run build -- --configuration=production
 
-# Stage 2: Serve
+ENV NODE_ENV=production
-FROM nginx:alpine
+ENV PORT=80
-COPY --from=build /app/dist/frontend/browser /usr/share/nginx/html
-COPY nginx.conf /etc/nginx/conf.d/default.conf
 EXPOSE 80
+
+CMD ["node", "dist/frontend/server/server.mjs"]

frontend/Dockerfile.dev

@@ -1,15 +1,15 @@
-# Stage 1: Build
+FROM node:22-alpine
-FROM node:20 as build
 
 WORKDIR /app
 COPY package*.json ./
-RUN npm install
+RUN npm ci --legacy-peer-deps
 COPY . .
+
 # Use development configuration to pick up environment.ts (localhost)
 RUN npm run build -- --configuration=development
 
-# Stage 2: Serve
+ENV NODE_ENV=development
-FROM nginx:alpine
+ENV PORT=80
-COPY --from=build /app/dist/frontend/browser /usr/share/nginx/html
-COPY nginx.conf /etc/nginx/conf.d/default.conf
 EXPOSE 80
+
+CMD ["node", "dist/frontend/server/server.mjs"]

frontend/angular.json

@@ -36,7 +36,12 @@
               "@angular/material/prebuilt-themes/azure-blue.css",
               "src/styles.scss"
             ],
-            "scripts": []
+            "scripts": [],
+            "server": "src/main.server.ts",
+            "prerender": false,
+            "ssr": {
+              "entry": "src/server.ts"
+            }
           },
           "configurations": {
             "production": {

frontend/package.json

@@ -6,35 +6,41 @@
     "start": "ng serve",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
-    "test": "ng test"
+    "test": "ng test",
+    "serve:ssr:frontend": "node dist/frontend/server/server.mjs"
   },
   "private": true,
   "engines": {
     "node": "^22.0.0"
   },
   "dependencies": {
-    "@angular/cdk": "^19.2.19",
+    "@angular/cdk": "19.2.19",
-    "@angular/common": "^19.2.18",
+    "@angular/common": "19.2.19",
-    "@angular/compiler": "^19.2.18",
+    "@angular/compiler": "19.2.19",
-    "@angular/core": "^19.2.18",
+    "@angular/core": "19.2.19",
-    "@angular/forms": "^19.2.18",
+    "@angular/forms": "19.2.19",
-    "@angular/material": "^19.2.19",
+    "@angular/material": "19.2.19",
-    "@angular/platform-browser": "^19.2.18",
+    "@angular/platform-browser": "19.2.19",
-    "@angular/platform-browser-dynamic": "^19.2.18",
+    "@angular/platform-browser-dynamic": "19.2.19",
-    "@angular/router": "^19.2.18",
+    "@angular/platform-server": "19.2.19",
+    "@angular/router": "19.2.19",
+    "@angular/ssr": "19.2.19",
     "@ngx-translate/core": "^17.0.0",
     "@ngx-translate/http-loader": "^17.0.0",
     "@types/three": "^0.182.0",
+    "express": "^4.18.2",
     "rxjs": "~7.8.0",
     "three": "^0.182.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^19.2.19",
+    "@angular-devkit/build-angular": "19.2.19",
-    "@angular/cli": "^19.2.19",
+    "@angular/cli": "19.2.19",
-    "@angular/compiler-cli": "^19.2.18",
+    "@angular/compiler-cli": "19.2.19",
+    "@types/express": "^4.17.17",
     "@types/jasmine": "~5.1.0",
+    "@types/node": "^18.18.0",
     "jasmine-core": "~5.6.0",
     "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.2.0",

frontend/public/robots.txt

@@ -5,17 +5,19 @@ Disallow: /admin
 Disallow: /admin/
 Disallow: /*/admin
 Disallow: /*/admin/
+Disallow: /order
 Disallow: /order/
+Disallow: /*/order
 Disallow: /*/order/
+Disallow: /co
 Disallow: /co/
+Disallow: /*/co
 Disallow: /*/co/
 Disallow: /checkout
 Disallow: /checkout/
+Disallow: /checkout/cad
 Disallow: /*/checkout
 Disallow: /*/checkout/
-Disallow: /shop
+Disallow: /*/checkout/cad
-Disallow: /shop/
-Disallow: /*/shop
-Disallow: /*/shop/
 
 Sitemap: https://3d-fab.ch/sitemap.xml

frontend/public/sitemap-static.xml

@@ -0,0 +1,154 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset
+  xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
+  xmlns:xhtml="http://www.w3.org/1999/xhtml"
+>
+  <url>
+    <loc>https://3d-fab.ch/it</loc>
+    <xhtml:link rel="alternate" hreflang="it" href="https://3d-fab.ch/it" />
+    <xhtml:link rel="alternate" hreflang="en" href="https://3d-fab.ch/en" />
+    <xhtml:link rel="alternate" hreflang="de" href="https://3d-fab.ch/de" />
+    <xhtml:link rel="alternate" hreflang="fr" href="https://3d-fab.ch/fr" />
+    <xhtml:link rel="alternate" hreflang="x-default" href="https://3d-fab.ch/it" />
+    <changefreq>weekly</changefreq>
+    <priority>1.0</priority>
+  </url>
+  <url>
+    <loc>https://3d-fab.ch/it/calculator/basic</loc>
+    <xhtml:link
+      rel="alternate"
+      hreflang="it"
+      href="https://3d-fab.ch/it/calculator/basic"
+    />
+    <xhtml:link
+      rel="alternate"
+      hreflang="en"
+      href="https://3d-fab.ch/en/calculator/basic"
+    />
+    <xhtml:link
+      rel="alternate"
+      hreflang="de"
+      href="https://3d-fab.ch/de/calculator/basic"
+    />
+    <xhtml:link
+      rel="alternate"
+      hreflang="fr"
+      href="https://3d-fab.ch/fr/calculator/basic"
+    />
+    <xhtml:link
+      rel="alternate"
+      hreflang="x-default"
+      href="https://3d-fab.ch/it/calculator/basic"
+    />
+    <changefreq>weekly</changefreq>
+    <priority>0.9</priority>
+  </url>
+  <url>
+    <loc>https://3d-fab.ch/it/calculator/advanced</loc>
+    <xhtml:link
+      rel="alternate"
+      hreflang="it"
+      href="https://3d-fab.ch/it/calculator/advanced"
+    />
+    <xhtml:link
+      rel="alternate"
+      hreflang="en"
+      href="https://3d-fab.ch/en/calculator/advanced"
+    />
+    <xhtml:link
+      rel="alternate"
+      hreflang="de"
+      href="https://3d-fab.ch/de/calculator/advanced"
+    />
+    <xhtml:link
+      rel="alternate"
+      hreflang="fr"
+      href="https://3d-fab.ch/fr/calculator/advanced"
+    />
+    <xhtml:link
+      rel="alternate"
+      hreflang="x-default"
+      href="https://3d-fab.ch/it/calculator/advanced"
+    />
+    <changefreq>weekly</changefreq>
+    <priority>0.8</priority>
+  </url>
+  <url>
+    <loc>https://3d-fab.ch/it/shop</loc>
+    <xhtml:link rel="alternate" hreflang="it" href="https://3d-fab.ch/it/shop" />
+    <xhtml:link rel="alternate" hreflang="en" href="https://3d-fab.ch/en/shop" />
+    <xhtml:link rel="alternate" hreflang="de" href="https://3d-fab.ch/de/shop" />
+    <xhtml:link rel="alternate" hreflang="fr" href="https://3d-fab.ch/fr/shop" />
+    <xhtml:link rel="alternate" hreflang="x-default" href="https://3d-fab.ch/it/shop" />
+    <changefreq>weekly</changefreq>
+    <priority>0.8</priority>
+  </url>
+  <url>
+    <loc>https://3d-fab.ch/it/about</loc>
+    <xhtml:link rel="alternate" hreflang="it" href="https://3d-fab.ch/it/about" />
+    <xhtml:link rel="alternate" hreflang="en" href="https://3d-fab.ch/en/about" />
+    <xhtml:link rel="alternate" hreflang="de" href="https://3d-fab.ch/de/about" />
+    <xhtml:link rel="alternate" hreflang="fr" href="https://3d-fab.ch/fr/about" />
+    <xhtml:link
+      rel="alternate"
+      hreflang="x-default"
+      href="https://3d-fab.ch/it/about"
+    />
+    <changefreq>monthly</changefreq>
+    <priority>0.7</priority>
+  </url>
+  <url>
+    <loc>https://3d-fab.ch/it/contact</loc>
+    <xhtml:link
+      rel="alternate"
+      hreflang="it"
+      href="https://3d-fab.ch/it/contact"
+    />
+    <xhtml:link
+      rel="alternate"
+      hreflang="en"
+      href="https://3d-fab.ch/en/contact"
+    />
+    <xhtml:link
+      rel="alternate"
+      hreflang="de"
+      href="https://3d-fab.ch/de/contact"
+    />
+    <xhtml:link
+      rel="alternate"
+      hreflang="fr"
+      href="https://3d-fab.ch/fr/contact"
+    />
+    <xhtml:link
+      rel="alternate"
+      hreflang="x-default"
+      href="https://3d-fab.ch/it/contact"
+    />
+    <changefreq>monthly</changefreq>
+    <priority>0.7</priority>
+  </url>
+  <url>
+    <loc>https://3d-fab.ch/it/privacy</loc>
+    <xhtml:link rel="alternate" hreflang="it" href="https://3d-fab.ch/it/privacy" />
+    <xhtml:link rel="alternate" hreflang="en" href="https://3d-fab.ch/en/privacy" />
+    <xhtml:link rel="alternate" hreflang="de" href="https://3d-fab.ch/de/privacy" />
+    <xhtml:link rel="alternate" hreflang="fr" href="https://3d-fab.ch/fr/privacy" />
+    <xhtml:link
+      rel="alternate"
+      hreflang="x-default"
+      href="https://3d-fab.ch/it/privacy"
+    />
+    <changefreq>yearly</changefreq>
+    <priority>0.4</priority>
+  </url>
+  <url>
+    <loc>https://3d-fab.ch/it/terms</loc>
+    <xhtml:link rel="alternate" hreflang="it" href="https://3d-fab.ch/it/terms" />
+    <xhtml:link rel="alternate" hreflang="en" href="https://3d-fab.ch/en/terms" />
+    <xhtml:link rel="alternate" hreflang="de" href="https://3d-fab.ch/de/terms" />
+    <xhtml:link rel="alternate" hreflang="fr" href="https://3d-fab.ch/fr/terms" />
+    <xhtml:link rel="alternate" hreflang="x-default" href="https://3d-fab.ch/it/terms" />
+    <changefreq>yearly</changefreq>
+    <priority>0.4</priority>
+  </url>
+</urlset>

frontend/public/sitemap.xml

@@ -1,144 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<urlset
+<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
-  xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
+  <sitemap>
-  xmlns:xhtml="http://www.w3.org/1999/xhtml"
+    <loc>https://3d-fab.ch/sitemap-static.xml</loc>
->
+  </sitemap>
-  <url>
+  <sitemap>
-    <loc>https://3d-fab.ch/it</loc>
+    <loc>https://3d-fab.ch/api/sitemap-shop.xml</loc>
-    <xhtml:link rel="alternate" hreflang="it" href="https://3d-fab.ch/it" />
+  </sitemap>
-    <xhtml:link rel="alternate" hreflang="en" href="https://3d-fab.ch/en" />
+</sitemapindex>
-    <xhtml:link rel="alternate" hreflang="de" href="https://3d-fab.ch/de" />
-    <xhtml:link rel="alternate" hreflang="fr" href="https://3d-fab.ch/fr" />
-    <xhtml:link rel="alternate" hreflang="x-default" href="https://3d-fab.ch/it" />
-    <changefreq>weekly</changefreq>
-    <priority>1.0</priority>
-  </url>
-  <url>
-    <loc>https://3d-fab.ch/it/calculator/basic</loc>
-    <xhtml:link
-      rel="alternate"
-      hreflang="it"
-      href="https://3d-fab.ch/it/calculator/basic"
-    />
-    <xhtml:link
-      rel="alternate"
-      hreflang="en"
-      href="https://3d-fab.ch/en/calculator/basic"
-    />
-    <xhtml:link
-      rel="alternate"
-      hreflang="de"
-      href="https://3d-fab.ch/de/calculator/basic"
-    />
-    <xhtml:link
-      rel="alternate"
-      hreflang="fr"
-      href="https://3d-fab.ch/fr/calculator/basic"
-    />
-    <xhtml:link
-      rel="alternate"
-      hreflang="x-default"
-      href="https://3d-fab.ch/it/calculator/basic"
-    />
-    <changefreq>weekly</changefreq>
-    <priority>0.9</priority>
-  </url>
-  <url>
-    <loc>https://3d-fab.ch/it/calculator/advanced</loc>
-    <xhtml:link
-      rel="alternate"
-      hreflang="it"
-      href="https://3d-fab.ch/it/calculator/advanced"
-    />
-    <xhtml:link
-      rel="alternate"
-      hreflang="en"
-      href="https://3d-fab.ch/en/calculator/advanced"
-    />
-    <xhtml:link
-      rel="alternate"
-      hreflang="de"
-      href="https://3d-fab.ch/de/calculator/advanced"
-    />
-    <xhtml:link
-      rel="alternate"
-      hreflang="fr"
-      href="https://3d-fab.ch/fr/calculator/advanced"
-    />
-    <xhtml:link
-      rel="alternate"
-      hreflang="x-default"
-      href="https://3d-fab.ch/it/calculator/advanced"
-    />
-    <changefreq>weekly</changefreq>
-    <priority>0.8</priority>
-  </url>
-  <url>
-    <loc>https://3d-fab.ch/it/about</loc>
-    <xhtml:link rel="alternate" hreflang="it" href="https://3d-fab.ch/it/about" />
-    <xhtml:link rel="alternate" hreflang="en" href="https://3d-fab.ch/en/about" />
-    <xhtml:link rel="alternate" hreflang="de" href="https://3d-fab.ch/de/about" />
-    <xhtml:link rel="alternate" hreflang="fr" href="https://3d-fab.ch/fr/about" />
-    <xhtml:link
-      rel="alternate"
-      hreflang="x-default"
-      href="https://3d-fab.ch/it/about"
-    />
-    <changefreq>monthly</changefreq>
-    <priority>0.7</priority>
-  </url>
-  <url>
-    <loc>https://3d-fab.ch/it/contact</loc>
-    <xhtml:link
-      rel="alternate"
-      hreflang="it"
-      href="https://3d-fab.ch/it/contact"
-    />
-    <xhtml:link
-      rel="alternate"
-      hreflang="en"
-      href="https://3d-fab.ch/en/contact"
-    />
-    <xhtml:link
-      rel="alternate"
-      hreflang="de"
-      href="https://3d-fab.ch/de/contact"
-    />
-    <xhtml:link
-      rel="alternate"
-      hreflang="fr"
-      href="https://3d-fab.ch/fr/contact"
-    />
-    <xhtml:link
-      rel="alternate"
-      hreflang="x-default"
-      href="https://3d-fab.ch/it/contact"
-    />
-    <changefreq>monthly</changefreq>
-    <priority>0.7</priority>
-  </url>
-  <url>
-    <loc>https://3d-fab.ch/it/privacy</loc>
-    <xhtml:link rel="alternate" hreflang="it" href="https://3d-fab.ch/it/privacy" />
-    <xhtml:link rel="alternate" hreflang="en" href="https://3d-fab.ch/en/privacy" />
-    <xhtml:link rel="alternate" hreflang="de" href="https://3d-fab.ch/de/privacy" />
-    <xhtml:link rel="alternate" hreflang="fr" href="https://3d-fab.ch/fr/privacy" />
-    <xhtml:link
-      rel="alternate"
-      hreflang="x-default"
-      href="https://3d-fab.ch/it/privacy"
-    />
-    <changefreq>yearly</changefreq>
-    <priority>0.4</priority>
-  </url>
-  <url>
-    <loc>https://3d-fab.ch/it/terms</loc>
-    <xhtml:link rel="alternate" hreflang="it" href="https://3d-fab.ch/it/terms" />
-    <xhtml:link rel="alternate" hreflang="en" href="https://3d-fab.ch/en/terms" />
-    <xhtml:link rel="alternate" hreflang="de" href="https://3d-fab.ch/de/terms" />
-    <xhtml:link rel="alternate" hreflang="fr" href="https://3d-fab.ch/fr/terms" />
-    <xhtml:link rel="alternate" hreflang="x-default" href="https://3d-fab.ch/it/terms" />
-    <changefreq>yearly</changefreq>
-    <priority>0.4</priority>
-  </url>
-</urlset>

frontend/src/app/app.config.server.ts

@@ -0,0 +1,9 @@
+import { mergeApplicationConfig, ApplicationConfig } from '@angular/core';
+import { provideServerRendering } from '@angular/platform-server';
+import { appConfig } from './app.config';
+
+const serverConfig: ApplicationConfig = {
+  providers: [provideServerRendering()],
+};
+
+export const config = mergeApplicationConfig(appConfig, serverConfig);

frontend/src/app/app.config.ts

@@ -17,6 +17,10 @@ import {
   TranslateHttpLoader,
 } from '@ngx-translate/http-loader';
 import { adminAuthInterceptor } from './core/interceptors/admin-auth.interceptor';
+import {
+  provideClientHydration,
+  withEventReplay,
+} from '@angular/platform-browser';
 
 export const appConfig: ApplicationConfig = {
   providers: [
@@ -43,5 +47,6 @@ export const appConfig: ApplicationConfig = {
         },
       }),
     ),
+    provideClientHydration(withEventReplay()),
   ],
 };

frontend/src/app/features/admin/pages/admin-cad-invoices.component.ts

@@ -1,5 +1,5 @@
-import { CommonModule } from '@angular/common';
+import { CommonModule, isPlatformBrowser } from '@angular/common';
-import { Component, OnInit, inject } from '@angular/core';
+import { Component, OnInit, PLATFORM_ID, inject } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import {
   AdminCadInvoice,
@@ -16,6 +16,7 @@ import { CopyOnClickDirective } from '../../../shared/directives/copy-on-click.d
   styleUrl: './admin-cad-invoices.component.scss',
 })
 export class AdminCadInvoicesComponent implements OnInit {
+  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
   private readonly adminOperationsService = inject(AdminOperationsService);
   private readonly adminOrdersService = inject(AdminOrdersService);
 
@@ -112,11 +113,17 @@ export class AdminCadInvoicesComponent implements OnInit {
   }
 
   openCheckout(path: string): void {
+    if (!this.isBrowser) {
+      return;
+    }
     const url = this.toCheckoutUrl(path);
     window.open(url, '_blank');
   }
 
   copyCheckout(path: string): void {
+    if (!this.isBrowser) {
+      return;
+    }
     const url = this.toCheckoutUrl(path);
     navigator.clipboard?.writeText(url);
     this.successMessage = 'Link checkout CAD copiato negli appunti.';
@@ -126,6 +133,9 @@ export class AdminCadInvoicesComponent implements OnInit {
     if (!orderId) return;
     this.adminOrdersService.downloadOrderInvoice(orderId).subscribe({
       next: (blob) => {
+        if (!this.isBrowser) {
+          return;
+        }
         const url = window.URL.createObjectURL(blob);
         const a = document.createElement('a');
         a.href = url;
@@ -142,10 +152,16 @@ export class AdminCadInvoicesComponent implements OnInit {
   private toCheckoutUrl(path: string): string {
     const safePath = path.startsWith('/') ? path : `/${path}`;
     const lang = this.resolveLang();
+    if (!this.isBrowser) {
+      return `/${lang}${safePath}`;
+    }
     return `${window.location.origin}/${lang}${safePath}`;
   }
 
   private resolveLang(): string {
+    if (!this.isBrowser) {
+      return 'it';
+    }
     const firstSegment = window.location.pathname
       .split('/')
       .filter(Boolean)

frontend/src/app/features/admin/pages/admin-contact-requests.component.ts

@@ -1,5 +1,5 @@
-import { CommonModule } from '@angular/common';
+import { CommonModule, isPlatformBrowser } from '@angular/common';
-import { Component, inject, OnInit } from '@angular/core';
+import { Component, PLATFORM_ID, inject, OnInit } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import {
   AdminContactRequest,
@@ -17,6 +17,7 @@ import { CopyOnClickDirective } from '../../../shared/directives/copy-on-click.d
   styleUrl: './admin-contact-requests.component.scss',
 })
 export class AdminContactRequestsComponent implements OnInit {
+  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
   private readonly adminOperationsService = inject(AdminOperationsService);
 
   readonly statusOptions = ['NEW', 'PENDING', 'IN_PROGRESS', 'DONE', 'CLOSED'];
@@ -171,6 +172,9 @@ export class AdminContactRequestsComponent implements OnInit {
   }
 
   private downloadBlob(blob: Blob, filename: string): void {
+    if (!this.isBrowser) {
+      return;
+    }
     const url = window.URL.createObjectURL(blob);
     const a = document.createElement('a');
     a.href = url;

frontend/src/app/features/admin/pages/admin-dashboard.component.ts

@@ -1,5 +1,5 @@
-import { CommonModule } from '@angular/common';
+import { CommonModule, isPlatformBrowser } from '@angular/common';
-import { Component, inject, OnInit } from '@angular/core';
+import { Component, PLATFORM_ID, inject, OnInit } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import {
   AdminOrder,
@@ -16,6 +16,7 @@ import { CopyOnClickDirective } from '../../../shared/directives/copy-on-click.d
   styleUrl: './admin-dashboard.component.scss',
 })
 export class AdminDashboardComponent implements OnInit {
+  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
   private readonly adminOrdersService = inject(AdminOrdersService);
 
   orders: AdminOrder[] = [];
@@ -498,6 +499,9 @@ export class AdminDashboardComponent implements OnInit {
   }
 
   private downloadBlob(blob: Blob, filename: string): void {
+    if (!this.isBrowser) {
+      return;
+    }
     const url = window.URL.createObjectURL(blob);
     const a = document.createElement('a');
     a.href = url;

frontend/src/app/features/admin/pages/admin-home-media.component.html

@@ -130,7 +130,7 @@
                     <button
                       *ngFor="let language of mediaLanguages"
                       type="button"
-                      class="language-toggle-btn ui-language-toolbar__button"
+                      class="ui-language-toolbar__button image-language-button"
                       [class.active]="
                         getFormState(section.usageKey).activeLanguage ===
                         language
@@ -139,11 +139,28 @@
                         isLanguageComplete(section.usageKey, language)
                       "
                       [class.incomplete]="
-                        !isLanguageComplete(section.usageKey, language)
+                        isLanguageIncomplete(section.usageKey, language)
+                      "
+                      [class.empty]="
+                        !isLanguageStarted(section.usageKey, language)
                       "
                       (click)="setActiveLanguage(section.usageKey, language)"
                     >
+                      <span class="image-language-button__label">
                         {{ mediaLanguageLabels[language] }}
+                      </span>
+                      <span
+                        class="image-language-button__state"
+                        *ngIf="isLanguageComplete(section.usageKey, language)"
+                      >
+                        OK
+                      </span>
+                      <span
+                        class="image-language-button__state"
+                        *ngIf="isLanguageIncomplete(section.usageKey, language)"
+                      >
+                        ...
+                      </span>
                     </button>
                   </div>
                 </div>

frontend/src/app/features/admin/pages/admin-home-media.component.scss

@@ -27,6 +27,62 @@
   gap: var(--space-1);
 }
 
+.image-language-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  min-width: 3.15rem;
+  background: #ffffff;
+  color: var(--color-text-muted);
+}
+
+.image-language-button.empty {
+  opacity: 0.76;
+}
+
+.image-language-button.complete {
+  border-color: #b8ddc2;
+}
+
+.image-language-button.incomplete {
+  border-color: #e8c8c2;
+}
+
+.image-language-button.active {
+  background: #fff5b8;
+  border-color: var(--color-brand);
+  color: var(--color-text);
+  opacity: 1;
+}
+
+.image-language-button__label {
+  line-height: 1;
+}
+
+.image-language-button__state {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1rem;
+  height: 1rem;
+  padding: 0 0.2rem;
+  border-radius: 999px;
+  background: rgba(0, 0, 0, 0.08);
+  font-size: 0.62rem;
+  font-weight: 800;
+  line-height: 1;
+}
+
+.image-language-button.complete .image-language-button__state {
+  background: #dcefdc;
+  color: #25603b;
+}
+
+.image-language-button.incomplete .image-language-button__state {
+  background: #f7ddd7;
+  color: #944329;
+}
+
 .form-field--wide {
   grid-column: 1 / -1;
 }

frontend/src/app/features/admin/pages/admin-home-media.component.ts

@@ -1,5 +1,11 @@
-import { CommonModule } from '@angular/common';
+import { CommonModule, isPlatformBrowser } from '@angular/common';
-import { Component, inject, OnDestroy, OnInit } from '@angular/core';
+import {
+  Component,
+  PLATFORM_ID,
+  inject,
+  OnDestroy,
+  OnInit,
+} from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { of, switchMap } from 'rxjs';
 import {
@@ -17,12 +23,16 @@ type HomeSectionKey =
   | 'capability-prototyping'
   | 'capability-custom-parts'
   | 'capability-small-series'
-  | 'capability-cad';
+  | 'capability-cad'
+  | 'joe'
+  | 'matteo';
+
+type HomeMediaUsageType = 'HOME_SECTION' | 'ABOUT_MEMBER';
 
 interface HomeMediaSectionConfig {
-  usageType: 'HOME_SECTION';
+  usageType: HomeMediaUsageType;
   usageKey: HomeSectionKey;
-  groupId: 'galleries' | 'capabilities';
+  groupId: 'galleries' | 'capabilities' | 'about-members';
   title: string;
   preferredVariantName: 'card' | 'hero';
 }
@@ -81,6 +91,7 @@ const MEDIA_LANGUAGE_LABELS: Readonly<Record<AdminMediaLanguage, string>> = {
   styleUrl: './admin-home-media.component.scss',
 })
 export class AdminHomeMediaComponent implements OnInit, OnDestroy {
+  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
   private readonly adminMediaService = inject(AdminMediaService);
   readonly mediaLanguages = SUPPORTED_MEDIA_LANGUAGES;
   readonly mediaLanguageLabels = MEDIA_LANGUAGE_LABELS;
@@ -94,6 +105,10 @@ export class AdminHomeMediaComponent implements OnInit, OnDestroy {
       id: 'capabilities',
       title: 'Cosa puoi ottenere',
     },
+    {
+      id: 'about-members',
+      title: 'Chi siamo',
+    },
   ];
 
   readonly sectionConfigs: readonly HomeMediaSectionConfig[] = [
@@ -139,6 +154,20 @@ export class AdminHomeMediaComponent implements OnInit, OnDestroy {
       title: 'Home: consulenza e CAD',
       preferredVariantName: 'card',
     },
+    {
+      usageType: 'ABOUT_MEMBER',
+      usageKey: 'joe',
+      groupId: 'about-members',
+      title: 'Chi siamo: Joe',
+      preferredVariantName: 'card',
+    },
+    {
+      usageType: 'ABOUT_MEMBER',
+      usageKey: 'matteo',
+      groupId: 'about-members',
+      title: 'Chi siamo: Matteo',
+      preferredVariantName: 'card',
+    },
   ];
 
   sections: HomeMediaSectionView[] = [];
@@ -155,6 +184,8 @@ export class AdminHomeMediaComponent implements OnInit, OnDestroy {
       'capability-custom-parts': this.createEmptyFormState(),
       'capability-small-series': this.createEmptyFormState(),
       'capability-cad': this.createEmptyFormState(),
+      joe: this.createEmptyFormState(),
+      matteo: this.createEmptyFormState(),
     };
 
   get configuredSectionCount(): number {
@@ -219,7 +250,8 @@ export class AdminHomeMediaComponent implements OnInit, OnDestroy {
 
     this.revokePreviewUrl(formState.previewUrl);
     formState.file = file;
-    formState.previewUrl = file ? URL.createObjectURL(file) : null;
+    formState.previewUrl =
+      file && this.isBrowser ? URL.createObjectURL(file) : null;
 
     if (file && this.areAllTitlesBlank(formState.translations)) {
       const nextTitle = this.deriveDefaultTitle(file.name);
@@ -432,6 +464,25 @@ export class AdminHomeMediaComponent implements OnInit, OnDestroy {
     );
   }
 
+  isLanguageStarted(
+    sectionKey: HomeSectionKey,
+    language: AdminMediaLanguage,
+  ): boolean {
+    return this.isTranslationStarted(
+      this.getFormState(sectionKey).translations[language],
+    );
+  }
+
+  isLanguageIncomplete(
+    sectionKey: HomeSectionKey,
+    language: AdminMediaLanguage,
+  ): boolean {
+    return (
+      this.isLanguageStarted(sectionKey, language) &&
+      !this.isLanguageComplete(sectionKey, language)
+    );
+  }
+
   getItemTranslation(
     item: HomeMediaItem,
     language: AdminMediaLanguage,
@@ -540,6 +591,9 @@ export class AdminHomeMediaComponent implements OnInit, OnDestroy {
   }
 
   private revokePreviewUrl(previewUrl: string | null): void {
+    if (!this.isBrowser) {
+      return;
+    }
     if (!previewUrl?.startsWith('blob:')) {
       return;
     }
@@ -619,6 +673,10 @@ export class AdminHomeMediaComponent implements OnInit, OnDestroy {
     return !!translation.title.trim() && !!translation.altText.trim();
   }
 
+  private isTranslationStarted(translation: AdminMediaTranslation): boolean {
+    return !!translation.title.trim() || !!translation.altText.trim();
+  }
+
   private validateTranslations(
     translations: Record<AdminMediaLanguage, AdminMediaTranslation>,
   ): string | null {

frontend/src/app/features/admin/pages/admin-sessions.component.ts

@@ -1,5 +1,5 @@
-import { CommonModule } from '@angular/common';
+import { CommonModule, isPlatformBrowser } from '@angular/common';
-import { Component, inject, OnInit } from '@angular/core';
+import { Component, PLATFORM_ID, inject, OnInit } from '@angular/core';
 import {
   AdminOperationsService,
   AdminQuoteSession,
@@ -15,6 +15,7 @@ import { CopyOnClickDirective } from '../../../shared/directives/copy-on-click.d
   styleUrl: './admin-sessions.component.scss',
 })
 export class AdminSessionsComponent implements OnInit {
+  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
   private readonly adminOperationsService = inject(AdminOperationsService);
 
   sessions: AdminQuoteSession[] = [];
@@ -51,7 +52,9 @@ export class AdminSessionsComponent implements OnInit {
       return;
     }
 
-    const confirmed = window.confirm(
+    const confirmed =
+      this.isBrowser &&
+      window.confirm(
         `Vuoi eliminare la sessione ${session.id}? Questa azione non si puo annullare.`,
       );
     if (!confirmed) {

frontend/src/app/features/admin/pages/admin-shop.component.html

@@ -8,7 +8,8 @@
       </p>
     </div>
 
-    <div class="header-actions">
+    <div class="header-side ui-stack ui-stack--dense">
+      <div class="header-stats ui-row ui-row--wrap ui-row--end">
         <article class="ui-stat-chip">
           <strong>{{ products.length }}</strong>
           <span>prodotti</span>
@@ -17,6 +18,8 @@
           <strong>{{ categories.length }}</strong>
           <span>categorie</span>
         </article>
+      </div>
+      <div class="header-actions ui-row ui-row--wrap ui-row--end">
         <button
           type="button"
           class="ui-button ui-button--ghost"
@@ -28,6 +31,7 @@
           Nuovo prodotto
         </button>
       </div>
+    </div>
   </header>
 
   <p class="ui-banner ui-banner--error" *ngIf="errorMessage">
@@ -874,6 +878,7 @@
                     class="ui-form-control"
                     [(ngModel)]="material.materialCode"
                     [name]="'material-code-' + index"
+                    (ngModelChange)="onMaterialCodeChange(index, $event)"
                   >
                     <option [ngValue]="''" disabled>Seleziona materiale</option>
                     <option
@@ -911,6 +916,30 @@
                   />
                 </label>
 
+                <label class="ui-form-field" *ngIf="material.isDefault">
+                  <span class="ui-form-caption">Colore default</span>
+                  <select
+                    class="ui-form-control"
+                    [(ngModel)]="material.defaultColorKey"
+                    [name]="'material-default-color-' + index"
+                    [disabled]="materialColorCount(material.materialCode) === 0"
+                  >
+                    <option [ngValue]="''" disabled>
+                      Seleziona colore default
+                    </option>
+                    <option
+                      *ngFor="
+                        let option of materialColorOptions(
+                          material.materialCode
+                        )
+                      "
+                      [ngValue]="option.key"
+                    >
+                      {{ option.label }}
+                    </option>
+                  </select>
+                </label>
+
                 <div class="toggle-row toggle-row--compact">
                   <label class="ui-checkbox">
                     <input

frontend/src/app/features/admin/pages/admin-shop.component.scss

@@ -80,13 +80,6 @@
   color: var(--color-text-muted);
 }
 
-.header-actions {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-  gap: var(--space-2);
-}
-
 .workspace {
   align-items: start;
 }

frontend/src/app/features/admin/pages/admin-shop.component.ts

@@ -1,10 +1,11 @@
-import { CommonModule } from '@angular/common';
+import { CommonModule, DOCUMENT, isPlatformBrowser } from '@angular/common';
 import {
   Component,
   ElementRef,
   HostListener,
   OnDestroy,
   OnInit,
+  PLATFORM_ID,
   ViewChild,
   inject,
 } from '@angular/core';
@@ -53,6 +54,7 @@ interface CategoryFormState {
 
 interface ProductMaterialFormState {
   materialCode: string;
+  defaultColorKey: string;
   priceChf: string;
   isDefault: boolean;
   isActive: boolean;
@@ -138,6 +140,9 @@ const RICH_TEXT_ALLOWED_TAGS = new Set([
   styleUrl: './admin-shop.component.scss',
 })
 export class AdminShopComponent implements OnInit, OnDestroy {
+  private readonly platformId = inject(PLATFORM_ID);
+  private readonly isBrowser = isPlatformBrowser(this.platformId);
+  private readonly documentRef = inject(DOCUMENT);
   private readonly adminShopService = inject(AdminShopService);
   private readonly adminOperationsService = inject(AdminOperationsService);
   private descriptionEditorElement: HTMLDivElement | null = null;
@@ -200,12 +205,14 @@ export class AdminShopComponent implements OnInit, OnDestroy {
 
   ngOnDestroy(): void {
     this.revokeImagePreviewUrl(this.imageUploadState.previewUrl);
-    document.body.style.removeProperty('cursor');
+    if (this.isBrowser) {
+      this.documentRef.body?.style.removeProperty('cursor');
+    }
   }
 
   @HostListener('window:pointermove', ['$event'])
   onWindowPointerMove(event: PointerEvent): void {
-    if (!this.isResizingPanels) {
+    if (!this.isBrowser || !this.isResizingPanels) {
       return;
     }
     this.updateListPanelWidthFromPointer(event.clientX);
@@ -214,11 +221,13 @@ export class AdminShopComponent implements OnInit, OnDestroy {
   @HostListener('window:pointerup')
   @HostListener('window:pointercancel')
   onWindowPointerUp(): void {
-    if (!this.isResizingPanels) {
+    if (!this.isBrowser || !this.isResizingPanels) {
       return;
     }
     this.isResizingPanels = false;
-    document.body.style.cursor = '';
+    if (this.documentRef.body) {
+      this.documentRef.body.style.cursor = '';
+    }
     this.persistListPanelWidth();
   }
 
@@ -368,7 +377,7 @@ export class AdminShopComponent implements OnInit, OnDestroy {
     }
 
     if (
-      !window.confirm(
+      !this.confirmBrowser(
         "Eliminare questo prodotto? L'azione non puo essere annullata.",
       )
     ) {
@@ -412,12 +421,14 @@ export class AdminShopComponent implements OnInit, OnDestroy {
   }
 
   startPanelResize(event: PointerEvent): void {
-    if (window.innerWidth <= 1060) {
+    if (!this.isBrowser || window.innerWidth <= 1060) {
       return;
     }
     event.preventDefault();
     this.isResizingPanels = true;
-    document.body.style.cursor = 'col-resize';
+    if (this.documentRef.body) {
+      this.documentRef.body.style.cursor = 'col-resize';
+    }
     this.updateListPanelWidthFromPointer(event.clientX);
   }
 
@@ -507,7 +518,7 @@ export class AdminShopComponent implements OnInit, OnDestroy {
     }
 
     if (
-      !window.confirm(
+      !this.confirmBrowser(
         'Eliminare questa categoria? Fallira se contiene sottocategorie o prodotti.',
       )
     ) {
@@ -642,7 +653,14 @@ export class AdminShopComponent implements OnInit, OnDestroy {
       (_, currentIndex) => currentIndex !== index,
     );
     if (!nextMaterials.some((material) => material.isDefault)) {
-      nextMaterials[0].isDefault = true;
+      nextMaterials[0] = {
+        ...nextMaterials[0],
+        isDefault: true,
+        defaultColorKey: this.resolveMaterialDefaultColorKey(
+          nextMaterials[0].materialCode,
+          nextMaterials[0].defaultColorKey,
+        ),
+      };
     }
     this.productForm.materials = nextMaterials;
   }
@@ -652,10 +670,34 @@ export class AdminShopComponent implements OnInit, OnDestroy {
       (material, currentIndex) => ({
         ...material,
         isDefault: currentIndex === index,
+        defaultColorKey: this.resolveMaterialDefaultColorKey(
+          material.materialCode,
+          material.defaultColorKey,
+        ),
       }),
     );
   }
 
+  onMaterialCodeChange(index: number, nextMaterialCode: string): void {
+    const normalizedMaterialCode = nextMaterialCode.trim().toUpperCase();
+    this.productForm.materials = this.productForm.materials.map(
+      (material, currentIndex) => {
+        if (currentIndex !== index) {
+          return material;
+        }
+
+        return {
+          ...material,
+          materialCode: normalizedMaterialCode,
+          defaultColorKey: this.resolveMaterialDefaultColorKey(
+            normalizedMaterialCode,
+            material.defaultColorKey,
+          ),
+        };
+      },
+    );
+  }
+
   availableMaterialChoices(currentMaterialCode: string): string[] {
     const normalizedCurrentMaterialCode = currentMaterialCode
       .trim()
@@ -693,6 +735,22 @@ export class AdminShopComponent implements OnInit, OnDestroy {
       .slice(0, 6);
   }
 
+  materialColorOptions(
+    materialCode: string,
+  ): Array<{ key: string; label: string }> {
+    const normalizedMaterialCode = materialCode.trim().toUpperCase();
+    return this.stockVariantsForMaterial(normalizedMaterialCode).map(
+      (variant) => ({
+        key: this.variantKey(
+          normalizedMaterialCode,
+          variant.colorName,
+          variant.colorHex,
+        ),
+        label: this.stockVariantLabel(variant),
+      }),
+    );
+  }
+
   onModelFileSelected(event: Event): void {
     const input = event.target as HTMLInputElement | null;
     const file = input?.files?.[0] ?? null;
@@ -760,7 +818,9 @@ export class AdminShopComponent implements OnInit, OnDestroy {
     }
 
     if (
-      !window.confirm('Rimuovere il modello 3D associato a questo prodotto?')
+      !this.confirmBrowser(
+        'Rimuovere il modello 3D associato a questo prodotto?',
+      )
     ) {
       return;
     }
@@ -832,7 +892,7 @@ export class AdminShopComponent implements OnInit, OnDestroy {
     this.imageUploadState = {
       ...this.imageUploadState,
       file,
-      previewUrl: URL.createObjectURL(file),
+      previewUrl: this.isBrowser ? URL.createObjectURL(file) : null,
       translations: nextTranslations,
     };
   }
@@ -1008,7 +1068,7 @@ export class AdminShopComponent implements OnInit, OnDestroy {
       return;
     }
 
-    if (!window.confirm('Rimuovere questa immagine dal prodotto?')) {
+    if (!this.confirmBrowser('Rimuovere questa immagine dal prodotto?')) {
       return;
     }
 
@@ -1120,6 +1180,9 @@ export class AdminShopComponent implements OnInit, OnDestroy {
   }
 
   private restoreListPanelWidth(): void {
+    if (!this.isBrowser) {
+      return;
+    }
     const storedValue = window.localStorage.getItem(
       SHOP_LIST_PANEL_WIDTH_STORAGE_KEY,
     );
@@ -1134,6 +1197,9 @@ export class AdminShopComponent implements OnInit, OnDestroy {
   }
 
   private persistListPanelWidth(): void {
+    if (!this.isBrowser) {
+      return;
+    }
     window.localStorage.setItem(
       SHOP_LIST_PANEL_WIDTH_STORAGE_KEY,
       String(this.listPanelWidthPercent),
@@ -1282,6 +1348,7 @@ export class AdminShopComponent implements OnInit, OnDestroy {
   ): ProductMaterialFormState {
     return {
       materialCode,
+      defaultColorKey: this.resolveMaterialDefaultColorKey(materialCode),
       priceChf: '0.00',
       isDefault,
       isActive: true,
@@ -1361,8 +1428,21 @@ export class AdminShopComponent implements OnInit, OnDestroy {
           (left, right) => (left.sortOrder ?? 0) - (right.sortOrder ?? 0),
         );
         const firstVariant = sortedVariants[0];
+        const defaultVariantForMaterial =
+          materialVariants.find((variant) => variant.isDefault) ?? null;
+        const persistedDefaultColorKey = defaultVariantForMaterial
+          ? this.variantKey(
+              materialCode,
+              defaultVariantForMaterial.colorName,
+              defaultVariantForMaterial.colorHex,
+            )
+          : null;
         return {
           materialCode,
+          defaultColorKey: this.resolveMaterialDefaultColorKey(
+            materialCode,
+            persistedDefaultColorKey,
+          ),
           priceChf: Number(firstVariant?.priceChf ?? 0).toFixed(2),
           isDefault: materialVariants.some((variant) => variant.isDefault),
           isActive: materialVariants.some((variant) => variant.isActive),
@@ -1494,9 +1574,6 @@ export class AdminShopComponent implements OnInit, OnDestroy {
   }
 
   private buildVariantsFromMaterials(): AdminUpsertShopProductVariantPayload[] {
-    const persistedDefaultVariant = this.selectedProduct?.variants.find(
-      (variant) => variant.isDefault,
-    );
     const existingVariantsByKey = new Map(
       (this.selectedProduct?.variants ?? []).map((variant) => [
         this.variantKey(
@@ -1507,14 +1584,6 @@ export class AdminShopComponent implements OnInit, OnDestroy {
         variant,
       ]),
     );
-    const persistedDefaultKey = persistedDefaultVariant
-      ? this.variantKey(
-          persistedDefaultVariant.internalMaterialCode,
-          persistedDefaultVariant.colorName,
-          persistedDefaultVariant.colorHex,
-        )
-      : null;
-
     const variants: AdminUpsertShopProductVariantPayload[] = [];
     let defaultAssigned = false;
 
@@ -1525,20 +1594,10 @@ export class AdminShopComponent implements OnInit, OnDestroy {
     for (const material of sortedMaterials) {
       const materialCode = material.materialCode.trim().toUpperCase();
       const stockVariants = this.stockVariantsForMaterial(materialCode);
-      let defaultVariantKeyForMaterial: string | null = null;
+      const selectedDefaultColorKey = this.resolveMaterialDefaultColorKey(
-
-      if (material.isDefault && persistedDefaultKey) {
-        defaultVariantKeyForMaterial =
-          stockVariants
-            .map((variant) =>
-              this.variantKey(
         materialCode,
-                variant.colorName,
+        material.defaultColorKey,
-                variant.colorHex,
+      );
-              ),
-            )
-            .find((variantKey) => variantKey === persistedDefaultKey) ?? null;
-      }
 
       stockVariants.forEach((stockVariant, colorIndex) => {
         const variantKey = this.variantKey(
@@ -1550,9 +1609,7 @@ export class AdminShopComponent implements OnInit, OnDestroy {
         const isDefault =
           material.isDefault &&
           !defaultAssigned &&
-          (defaultVariantKeyForMaterial
+          variantKey === selectedDefaultColorKey;
-            ? variantKey === defaultVariantKeyForMaterial
-            : colorIndex === 0);
 
         variants.push({
           id: existingVariant?.id,
@@ -1623,6 +1680,51 @@ export class AdminShopComponent implements OnInit, OnDestroy {
       });
   }
 
+  private resolveMaterialDefaultColorKey(
+    materialCode: string,
+    preferredKey?: string | null,
+  ): string {
+    const normalizedMaterialCode = materialCode.trim().toUpperCase();
+    const stockVariants = this.stockVariantsForMaterial(normalizedMaterialCode);
+    if (stockVariants.length === 0) {
+      return '';
+    }
+
+    const normalizedPreferredKey = (preferredKey ?? '').trim();
+    if (
+      normalizedPreferredKey &&
+      stockVariants.some(
+        (variant) =>
+          this.variantKey(
+            normalizedMaterialCode,
+            variant.colorName,
+            variant.colorHex,
+          ) === normalizedPreferredKey,
+      )
+    ) {
+      return normalizedPreferredKey;
+    }
+
+    const firstVariant = stockVariants[0];
+    return this.variantKey(
+      normalizedMaterialCode,
+      firstVariant.colorName,
+      firstVariant.colorHex,
+    );
+  }
+
+  private stockVariantLabel(variant: AdminFilamentVariant): string {
+    const colorName = variant.colorName.trim();
+    const variantDisplayName = variant.variantDisplayName.trim();
+    if (
+      variantDisplayName &&
+      variantDisplayName.toLowerCase() !== colorName.toLowerCase()
+    ) {
+      return `${colorName} (${variantDisplayName})`;
+    }
+    return colorName;
+  }
+
   private nextAvailableMaterialCode(): string | null {
     const selectedCodes = new Set(
       this.productForm.materials
@@ -1741,6 +1843,9 @@ export class AdminShopComponent implements OnInit, OnDestroy {
   }
 
   private revokeImagePreviewUrl(previewUrl: string | null): void {
+    if (!this.isBrowser) {
+      return;
+    }
     if (previewUrl?.startsWith('blob:')) {
       URL.revokeObjectURL(previewUrl);
     }
@@ -1863,12 +1968,15 @@ export class AdminShopComponent implements OnInit, OnDestroy {
   }
 
   private applyDescriptionExecCommand(command: string): void {
+    if (!this.isBrowser) {
+      return;
+    }
     const editor = this.descriptionEditorElement;
     if (!editor) {
       return;
     }
     editor.focus();
-    document.execCommand(command, false);
+    this.documentRef.execCommand(command, false);
     this.syncDescriptionFromEditor(editor, false);
   }
 
@@ -1912,6 +2020,10 @@ export class AdminShopComponent implements OnInit, OnDestroy {
   }
 
   private sanitizeRichTextHtml(value: string): string {
+    if (!this.isBrowser) {
+      return this.stripPotentiallyUnsafeHtml(value);
+    }
+
     const parser = new DOMParser();
     const sourceDocument = parser.parseFromString(
       `<body>${value}</body>`,
@@ -2017,12 +2129,18 @@ export class AdminShopComponent implements OnInit, OnDestroy {
   }
 
   private extractTextFromHtml(value: string): string {
+    if (!this.isBrowser) {
+      return value.replace(/<[^>]+>/g, ' ');
+    }
     const parser = new DOMParser();
     const parsed = parser.parseFromString(`<body>${value}</body>`, 'text/html');
     return parsed.body.textContent ?? '';
   }
 
   private serializeNodeChildren(node: Node): string {
+    if (!this.isBrowser) {
+      return node.textContent ?? '';
+    }
     const serializer = new XMLSerializer();
     let html = '';
     for (const child of Array.from(node.childNodes)) {
@@ -2035,6 +2153,10 @@ export class AdminShopComponent implements OnInit, OnDestroy {
     element: HTMLElement,
     html: string,
   ): void {
+    if (!this.isBrowser) {
+      return;
+    }
+
     if (!html) {
       element.replaceChildren();
       return;
@@ -2043,11 +2165,21 @@ export class AdminShopComponent implements OnInit, OnDestroy {
     const parser = new DOMParser();
     const parsed = parser.parseFromString(`<body>${html}</body>`, 'text/html');
     const nodes = Array.from(parsed.body.childNodes).map((child) =>
-      document.importNode(child, true),
+      this.documentRef.importNode(child, true),
     );
     element.replaceChildren(...nodes);
   }
 
+  private confirmBrowser(message: string): boolean {
+    return this.isBrowser ? window.confirm(message) : false;
+  }
+
+  private stripPotentiallyUnsafeHtml(value: string): string {
+    return value
+      .replace(/<script[\s\S]*?>[\s\S]*?<\/script>/gi, '')
+      .replace(/<style[\s\S]*?>[\s\S]*?<\/style>/gi, '');
+  }
+
   private escapeHtml(value: string): string {
     return value
       .replace(/&/g, '&amp;')

frontend/src/app/features/calculator/calculator-page.component.ts

@@ -4,9 +4,12 @@ import {
   signal,
   ViewChild,
   ElementRef,
+  Inject,
   OnInit,
+  Optional,
+  PLATFORM_ID,
 } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { CommonModule, isPlatformBrowser } from '@angular/common';
 import { TranslateModule } from '@ngx-translate/core';
 import { forkJoin, of } from 'rxjs';
 import { catchError, map } from 'rxjs/operators';
@@ -53,6 +56,7 @@ type TrackedPrintSettings = {
   styleUrl: './calculator-page.component.scss',
 })
 export class CalculatorPageComponent implements OnInit {
+  private readonly isBrowser: boolean;
   mode = signal<'easy' | 'advanced'>('easy');
   step = signal<'upload' | 'quote' | 'details' | 'success'>('upload');
 
@@ -85,7 +89,10 @@ export class CalculatorPageComponent implements OnInit {
     private router: Router,
     private route: ActivatedRoute,
     private languageService: LanguageService,
-  ) {}
+    @Optional() @Inject(PLATFORM_ID) platformId?: Object,
+  ) {
+    this.isBrowser = isPlatformBrowser(platformId ?? 'browser');
+  }
 
   ngOnInit() {
     this.route.data.subscribe((data) => {
@@ -260,7 +267,7 @@ export class CalculatorPageComponent implements OnInit {
 
     // Auto-scroll on mobile to make analysis visible
     setTimeout(() => {
-      if (this.resultCol && window.innerWidth < 768) {
+      if (this.isBrowser && this.resultCol && window.innerWidth < 768) {
         this.resultCol.nativeElement.scrollIntoView({
           behavior: 'smooth',
           block: 'start',

frontend/src/app/features/contact/components/contact-form/contact-form.component.ts

@@ -1,5 +1,12 @@
-import { Component, signal, effect, inject, OnDestroy } from '@angular/core';
+import {
-import { CommonModule } from '@angular/common';
+  Component,
+  signal,
+  effect,
+  inject,
+  OnDestroy,
+  PLATFORM_ID,
+} from '@angular/core';
+import { CommonModule, isPlatformBrowser } from '@angular/common';
 import {
   ReactiveFormsModule,
   FormBuilder,
@@ -16,6 +23,7 @@ import {
 import { QuoteEstimatorService } from '../../../calculator/services/quote-estimator.service';
 import { QuoteRequestService } from '../../../../core/services/quote-request.service';
 import { LanguageService } from '../../../../core/services/language.service';
+import { SuccessStateComponent } from '../../../../shared/components/success-state/success-state.component';
 
 interface FilePreview {
   file: File;
@@ -23,8 +31,6 @@ interface FilePreview {
   type: 'image' | 'video' | 'pdf' | '3d' | 'document' | 'other';
 }
 
-import { SuccessStateComponent } from '../../../../shared/components/success-state/success-state.component';
-
 @Component({
   selector: 'app-contact-form',
   standalone: true,
@@ -41,6 +47,7 @@ import { SuccessStateComponent } from '../../../../shared/components/success-sta
   styleUrl: './contact-form.component.scss',
 })
 export class ContactFormComponent implements OnDestroy {
+  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
   form: FormGroup;
   sent = signal(false);
   files = signal<FilePreview[]>([]);
@@ -127,7 +134,8 @@ export class ContactFormComponent implements OnDestroy {
         return {
           file: f,
           type,
-          url: this.shouldCreatePreview(type)
+          url:
+            this.isBrowser && this.shouldCreatePreview(type)
               ? URL.createObjectURL(f)
               : undefined,
         };
@@ -185,7 +193,8 @@ export class ContactFormComponent implements OnDestroy {
       const preview: FilePreview = {
         file,
         type,
-        url: this.shouldCreatePreview(type)
+        url:
+          this.isBrowser && this.shouldCreatePreview(type)
             ? URL.createObjectURL(file)
             : undefined,
       };
@@ -354,6 +363,9 @@ export class ContactFormComponent implements OnDestroy {
   }
 
   private revokePreviewUrl(file: FilePreview): void {
+    if (!this.isBrowser) {
+      return;
+    }
     if (file.url?.startsWith('blob:')) {
       URL.revokeObjectURL(file.url);
     }

frontend/src/app/features/order/order.component.ts

@@ -1,5 +1,5 @@
-import { Component, OnInit, inject, signal } from '@angular/core';
+import { Component, OnInit, PLATFORM_ID, inject, signal } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { CommonModule, isPlatformBrowser } from '@angular/common';
 import { ActivatedRoute, Router } from '@angular/router';
 import { AppButtonComponent } from '../../shared/components/app-button/app-button.component';
 import { AppCardComponent } from '../../shared/components/app-card/app-card.component';
@@ -75,6 +75,7 @@ export class OrderComponent implements OnInit {
   private router = inject(Router);
   private quoteService = inject(QuoteEstimatorService);
   private translate = inject(TranslateService);
+  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
 
   orderId: string | null = null;
   selectedPaymentMethod: 'twint' | 'bill' | null = 'twint';
@@ -115,6 +116,9 @@ export class OrderComponent implements OnInit {
   }
 
   downloadQrInvoice() {
+    if (!this.isBrowser) {
+      return;
+    }
     const orderId = this.orderId;
     if (!orderId) return;
     this.quoteService.getOrderConfirmation(orderId).subscribe({
@@ -153,7 +157,7 @@ export class OrderComponent implements OnInit {
 
   openTwintPayment(): void {
     const openUrl = this.twintOpenUrl();
-    if (typeof window !== 'undefined' && openUrl) {
+    if (this.isBrowser && openUrl) {
       window.open(openUrl, '_blank');
     }
   }

frontend/src/app/features/shop/product-detail.component.ts

@@ -1,8 +1,9 @@
-import { CommonModule } from '@angular/common';
+import { CommonModule, isPlatformBrowser } from '@angular/common';
 import {
   Component,
   DestroyRef,
   Injector,
+  PLATFORM_ID,
   computed,
   inject,
   input,
@@ -62,6 +63,7 @@ export class ProductDetailComponent {
   private readonly seoService = inject(SeoService);
   private readonly languageService = inject(LanguageService);
   private readonly shopRouteService = inject(ShopRouteService);
+  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
   readonly shopService = inject(ShopService);
 
   readonly categorySlug = input<string | undefined>();
@@ -444,7 +446,7 @@ export class ProductDetailComponent {
 
   goBackToShop(): void {
     const returnUrl =
-      typeof history.state?.shopReturnUrl === 'string'
+      this.isBrowser && typeof history.state?.shopReturnUrl === 'string'
         ? history.state.shopReturnUrl
         : null;
 
@@ -671,6 +673,15 @@ export class ProductDetailComponent {
     if (!this.containsHtmlMarkup(normalized)) {
       return normalized;
     }
+
+    if (!this.isBrowser) {
+      const text = normalized
+        .replace(/<[^>]+>/g, ' ')
+        .replace(/\s+/g, ' ')
+        .trim();
+      return text || null;
+    }
+
     const parser = new DOMParser();
     const parsed = parser.parseFromString(
       `<body>${normalized}</body>`,
@@ -694,6 +705,10 @@ export class ProductDetailComponent {
   }
 
   private syncPublicUrl(product: ShopProductDetail): void {
+    if (!this.isBrowser) {
+      return;
+    }
+
     const currentProductSlug = this.productSlug()?.trim().toLowerCase() ?? '';
     const targetProductSlug = this.shopRouteService.productPathSegment(product);
     if (currentProductSlug === targetProductSlug) {

frontend/src/app/shared/components/stl-viewer/stl-viewer.component.ts

@@ -5,10 +5,12 @@ import {
   OnChanges,
   OnDestroy,
   OnInit,
+  PLATFORM_ID,
   ViewChild,
   SimpleChanges,
+  inject,
 } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { CommonModule, isPlatformBrowser } from '@angular/common';
 import { TranslateModule } from '@ngx-translate/core';
 import * as THREE from 'three';
 // @ts-ignore
@@ -24,6 +26,9 @@ import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
   styleUrl: './stl-viewer.component.scss',
 })
 export class StlViewerComponent implements OnInit, OnDestroy, OnChanges {
+  private readonly platformId = inject(PLATFORM_ID);
+  private readonly isBrowser = isPlatformBrowser(this.platformId);
+
   @Input() file: File | null = null;
   @Input() color: string = '#facf0a'; // Default Brand Color
   @Input() height = 300;
@@ -39,14 +44,22 @@ export class StlViewerComponent implements OnInit, OnDestroy, OnChanges {
   private animationId: number | null = null;
   private currentMesh: THREE.Mesh | null = null;
   private autoRotate = true;
+  private resizeObserver: ResizeObserver | null = null;
 
   loading = false;
 
   ngOnInit() {
+    if (!this.isBrowser) {
+      return;
+    }
     this.initThree();
   }
 
   ngOnChanges(changes: SimpleChanges) {
+    if (!this.isBrowser) {
+      return;
+    }
+
     if (changes['file'] && this.file) {
       this.loadFile(this.file);
     }
@@ -57,6 +70,9 @@ export class StlViewerComponent implements OnInit, OnDestroy, OnChanges {
   }
 
   ngOnDestroy() {
+    this.resizeObserver?.disconnect();
+    this.resizeObserver = null;
+
     if (this.animationId) cancelAnimationFrame(this.animationId);
     this.clearCurrentMesh();
     if (this.controls) this.controls.dispose();
@@ -121,7 +137,7 @@ export class StlViewerComponent implements OnInit, OnDestroy, OnChanges {
     this.animate();
 
     // Handle resize
-    const resizeObserver = new ResizeObserver(() => {
+    this.resizeObserver = new ResizeObserver(() => {
       if (!this.rendererContainer) return;
       const w = this.rendererContainer.nativeElement.clientWidth;
       const h = this.rendererContainer.nativeElement.clientHeight;
@@ -129,7 +145,7 @@ export class StlViewerComponent implements OnInit, OnDestroy, OnChanges {
       this.camera.updateProjectionMatrix();
       this.renderer.setSize(w, h);
     });
-    resizeObserver.observe(this.rendererContainer.nativeElement);
+    this.resizeObserver.observe(this.rendererContainer.nativeElement);
   }
 
   dimensions = { x: 0, y: 0, z: 0 };

frontend/src/app/shared/directives/copy-on-click.directive.ts

@@ -1,10 +1,20 @@
-import { Directive, HostBinding, HostListener, Input } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+import {
+  Directive,
+  HostBinding,
+  HostListener,
+  Input,
+  PLATFORM_ID,
+  inject,
+} from '@angular/core';
 
 @Directive({
   selector: '[appCopyOnClick]',
   standalone: true,
 })
 export class CopyOnClickDirective {
+  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+
   @Input('appCopyOnClick') value: string | null | undefined;
 
   @HostBinding('style.cursor') readonly cursor = 'pointer';
@@ -21,6 +31,10 @@ export class CopyOnClickDirective {
   }
 
   private async copy(text: string): Promise<void> {
+    if (!this.isBrowser) {
+      return;
+    }
+
     if (navigator.clipboard?.writeText) {
       try {
         await navigator.clipboard.writeText(text);

frontend/src/main.server.ts

@@ -0,0 +1,11 @@
+import {
+  BootstrapContext,
+  bootstrapApplication,
+} from '@angular/platform-browser';
+import { AppComponent } from './app/app.component';
+import { config } from './app/app.config.server';
+
+const bootstrap = (context: BootstrapContext) =>
+  bootstrapApplication(AppComponent, config, context);
+
+export default bootstrap;

frontend/src/server.ts

@@ -0,0 +1,67 @@
+import { APP_BASE_HREF } from '@angular/common';
+import { CommonEngine, isMainModule } from '@angular/ssr/node';
+import express from 'express';
+import { dirname, join, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import bootstrap from './main.server';
+
+const serverDistFolder = dirname(fileURLToPath(import.meta.url));
+const browserDistFolder = resolve(serverDistFolder, '../browser');
+const indexHtml = join(serverDistFolder, 'index.server.html');
+
+const app = express();
+const commonEngine = new CommonEngine();
+
+/**
+ * Example Express Rest API endpoints can be defined here.
+ * Uncomment and define endpoints as necessary.
+ *
+ * Example:
+ * ```ts
+ * app.get('/api/**', (req, res) => {
+ *   // Handle API request
+ * });
+ * ```
+ */
+
+/**
+ * Serve static files from /browser
+ */
+app.get(
+  '**',
+  express.static(browserDistFolder, {
+    maxAge: '1y',
+    index: false,
+  }),
+);
+
+/**
+ * Handle all other requests by rendering the Angular application.
+ */
+app.get('**', (req, res, next) => {
+  const { protocol, originalUrl, baseUrl, headers } = req;
+
+  commonEngine
+    .render({
+      bootstrap,
+      documentFilePath: indexHtml,
+      url: `${protocol}://${headers.host}${originalUrl}`,
+      publicPath: browserDistFolder,
+      providers: [{ provide: APP_BASE_HREF, useValue: baseUrl }],
+    })
+    .then((html) => res.send(html))
+    .catch((err) => next(err));
+});
+
+/**
+ * Start the server if this module is the main entry point.
+ * The server listens on the port defined by the `PORT` environment variable, or defaults to 4000.
+ */
+if (isMainModule(import.meta.url)) {
+  const port = process.env['PORT'] || 4000;
+  app.listen(port, () => {
+    console.log(`Node Express server listening on http://localhost:${port}`);
+  });
+}
+
+export default app;

frontend/tsconfig.app.json

@@ -4,10 +4,14 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./out-tsc/app",
-    "types": []
+    "types": [
+      "node"
+    ]
   },
   "files": [
-    "src/main.ts"
+    "src/main.ts",
+    "src/main.server.ts",
+    "src/server.ts"
   ],
   "include": [
     "src/**/*.d.ts"