Refactor GitLab CI/CD pipelines

- Replaced alpine/git v2.47.2 image with node:22 image for the sync_branches job.
- Added node:22 image to the frontend_build_job for consistency in builds.
- This ensures compatibility with Node.js-based tasks and streamlines CI setup.

.gitlab-ci.yml

@@ -1,15 +1,22 @@
 image: docker:20.10@sha256:2967f0819c84dd589ed0a023b9d25dcfe7a3c123d5bf784ffbb77edf55335f0c
 
 include:
+  - local: 'ci-templates.yml'
   - local: 'backend/.gitlab-ci.yml'
   - local: 'frontend/.gitlab-ci.yml'
 
 stages:
   - backend_build
   - frontend_build
+  - dockerize
   - deploy
   - sync
 
+variables:
+  CI_REGISTRY_IMAGE: registry.gitlab.com/$CI_PROJECT_PATH
+  RAW_TAG: $CI_COMMIT_REF_NAME
+  TAG: "${RAW_TAG//\//_}"  # replace "/" with "_"
+
 sync_branches:
   stage: sync
   image: node:22@sha256:f6b9c31ace05502dd98ef777aaa20464362435dcc5e312b0e213121dcf7d8b95

backend/.gitlab-ci-backend.yml

@@ -1,7 +0,0 @@
-stages:
-  - backend_build
-
-backend_build_job:
-  stage: backend_build
-  script:
-    - echo "Building backend project on branch: $CI_COMMIT_BRANCH"

backend/.gitlab-ci.yml

@@ -1,7 +1,46 @@
 stages:
   - backend_build
 
+variables:
+  REGISTRY: registry.gitlab.com/$CI_PROJECT_PATH
+
 backend_build_job:
   stage: backend_build
+  image: maven:3.9.9-eclipse-temurin-21@sha256:2e3824afeb41f61761adee95318814e6669bd59aaf61255b2af47064b8755c02
   script:
-    - echo "Building backend project"
+    - cd backend
+    - mvn package
+  artifacts:
+    paths:
+      - backend/shared/target/
+      - backend/gateway/target/
+      - backend/discoveryServer/target/
+      - backend/services/**/target
+    expire_in: 1 hour
+
+build_shared_base_image:
+  stage: dockerize
+  extends: .docker_build_template
+  variables:
+    DOCKER_CONTEXT: backend
+    DOCKERFILE: Dockerfile.base
+    DOCKER_IMAGE: "$DOCKER_IMAGE/shared-base"
+    DOCKER_BUILD_ARGS: ""
+
+build_gateway_image:
+  stage: dockerize
+  extends: .docker_build_template
+  variables:
+    DOCKER_CONTEXT: backend
+    DOCKERFILE: Dockerfile.service
+    DOCKER_IMAGE: "$DOCKER_IMAGE/gateway"
+    DOCKER_BUILD_ARGS: "--build-arg JAR_FILE=gateway/target/gateway-*.jar"
+
+build_discovery_image:
+  stage: dockerize
+  extends: .docker_build_template
+  variables:
+    DOCKER_CONTEXT: backend
+    DOCKERFILE: Dockerfile.service
+    DOCKER_IMAGE: "$DOCKER_IMAGE/discovery-server"
+    DOCKER_BUILD_ARGS: "--build-arg JAR_FILE=discoveryServer/target/discoveryServer-*.jar"

backend/Dockerfile.base

@@ -0,0 +1,6 @@
+# Dockerfile.base
+FROM eclipse-temurin:21-jre-alpine
+
+WORKDIR /shared
+
+COPY backend/shared/target/shared-*.jar shared.jar

backend/Dockerfile.service

@@ -0,0 +1,9 @@
+# Dockerfile.service
+FROM your-registry/shared-base:latest
+
+WORKDIR /app
+ARG JAR_FILE=app.jar
+COPY backend/gateway/target/gateway-*.jar app.jar
+
+# Use JarLauncher and include shared.jar in classpath
+ENTRYPOINT ["java", "-cp", "/shared/shared.jar:/app/app.jar", "org.springframework.boot.loader.JarLauncher"]

ci-templates.yml

@@ -0,0 +1,17 @@
+.docker_build_template:
+  image: docker:20.10@sha256:2967f0819c84dd589ed0a023b9d25dcfe7a3c123d5bf784ffbb77edf55335f0c
+  before_script:
+    - echo "$CI_REGISTRY_PASSWORD" | docker login "$CI_REGISTRY" -u "$CI_REGISTRY_USER" --password-stdin
+    - if [ -z "$TAG" ]; then echo "ERROR: TAG variable is empty"; exit 1; fi
+  script:
+    - cd $DOCKER_CONTEXT
+    - |
+      echo "Building Docker image for $DOCKER_IMAGE with tag $TAG"
+      docker build $DOCKER_BUILD_ARGS -t $DOCKER_IMAGE:$TAG -f $DOCKERFILE .
+    - |
+      if [[ "$RAW_TAG" == "dev" || "$RAW_TAG" == "production" ]]; then
+        echo "Pushing Docker image $DOCKER_IMAGE:$TAG"
+        docker push $DOCKER_IMAGE:$TAG
+      else
+        echo "Skipping Docker push for non-dev or production branch: $RAW_TAG"
+      fi

frontend/.gitlab-ci-frontend.yml

@@ -1,7 +0,0 @@
-stages:
-  - frontend_build
-
-frontend_build_job:
-  stage: frontend_build
-  script:
-    - echo "Building frontend project on branch: $CI_COMMIT_BRANCH"

frontend/.gitlab-ci.yml

@@ -1,8 +1,35 @@
 stages:
   - frontend_build
+  - dockerize
+
+cache:
+  key: ${CI_COMMIT_REF_SLUG}
+  paths:
+    - node_modules/
+    - .next/cache/
+
+variables:
+  NEXT_PUBLIC_ENV: "production"
+  OUTPUT_DIR: ".next"
+  PROJECT_NAME: $CI_PROJECT_NAME
+  DOCKER_IMAGE: $CI_REGISTRY_IMAGE
 
 frontend_build_job:
   stage: frontend_build
   image: node:22@sha256:f6b9c31ace05502dd98ef777aaa20464362435dcc5e312b0e213121dcf7d8b95
   script:
-    - echo "Building frontend project"
+    - cd frontend
+    - npm install
+    - npx next build
+    - npm run lint
+
+dockerize_frontend:
+  stage: dockerize
+  extends: .docker_build_template
+  variables:
+    DOCKER_CONTEXT: frontend
+    DOCKERFILE: Dockerfile
+    DOCKER_IMAGE: $DOCKER_IMAGE
+    DOCKER_BUILD_ARGS: ""
+  needs:
+    - job: frontend_build_job

frontend/components/Contact/Section/ContactFormSection.tsx

@@ -1,8 +1,8 @@
 'use client';
 
-import React, { useState } from "react";
+import React, {useState} from "react";
-import { motion } from "framer-motion";
+import {motion} from "framer-motion";
-import { useThemeColors } from "@/utils/useThemeColors";
+import {useThemeColors} from "@/utils/useThemeColors";
 import HCaptcha from "@hcaptcha/react-hcaptcha";
 
 const ContactFormSection = () => {
@@ -28,7 +28,7 @@ const ContactFormSection = () => {
         : "ES_ff59a664dc764f92870bf2c7b4eab7c5";
 
     const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-        setForm({ ...form, [e.target.name]: e.target.value });
+        setForm({...form, [e.target.name]: e.target.value});
     };
 
     const handleSubmit = async (e: React.FormEvent) => {
@@ -42,24 +42,22 @@ const ContactFormSection = () => {
             return;
         }
 
-        try {
-            const res = await fetch("/api/contact", {
-                method: "POST",
-                headers: { "Content-Type": "application/json" },
-                body: JSON.stringify({ ...form, captcha: captchaToken }),
-            });
 
-            if (res.ok) {
+        const res = await fetch("/api/contact", {
-                setSubmitted(true);
+            method: "POST",
-                setForm({ name: "", email: "", company: "", phone: "", website: "", message: "" });
+            headers: {"Content-Type": "application/json"},
-            } else {
+            body: JSON.stringify({...form, captcha: captchaToken}),
-                const resJson = await res.json();
+        });
-                setError(resJson?.error || "Ein Fehler ist aufgetreten. Bitte versuche es später erneut.");
+
-            }
+        if (res.ok) {
-        } catch (_err) {
+            setSubmitted(true);
-            setError("Serverfehler. Bitte versuche es später erneut.");
+            setForm({name: "", email: "", company: "", phone: "", website: "", message: ""});
+        } else {
+            const resJson = await res.json();
+            setError(resJson?.error || "Ein Fehler ist aufgetreten. Bitte versuche es später erneut.");
         }
 
+
         setLoading(false);
     };
 
@@ -67,46 +65,77 @@ const ContactFormSection = () => {
         <div className="w-full px-6 sm:px-12 py-20 text-left transition-theme">
             <motion.h2
                 className="text-2xl sm:text-3xl font-bold mb-2"
-                style={{ color: colors.primaryText }}
+                style={{color: colors.primaryText}}
-                initial={{ opacity: 0, y: 20 }}
+                initial={{opacity: 0, y: 20}}
-                whileInView={{ opacity: 1, y: 0 }}
+                whileInView={{opacity: 1, y: 0}}
-                viewport={{ once: true }}
+                viewport={{once: true}}
-                transition={{ duration: 0.5 }}
+                transition={{duration: 0.5}}
             >
                 Schreib uns eine Nachricht
             </motion.h2>
 
             <motion.p
                 className="text-sm mb-8 max-w-xl"
-                style={{ color: colors.secondaryText }}
+                style={{color: colors.secondaryText}}
-                initial={{ opacity: 0, y: 10 }}
+                initial={{opacity: 0, y: 10}}
-                whileInView={{ opacity: 1, y: 0 }}
+                whileInView={{opacity: 1, y: 0}}
-                viewport={{ once: true }}
+                viewport={{once: true}}
-                transition={{ duration: 0.5, delay: 0.2 }}
+                transition={{duration: 0.5, delay: 0.2}}
             >
                 Wir freuen uns über dein Interesse und melden uns schnellstmöglich bei dir zurück.
             </motion.p>
 
             {submitted ? (
-                <div className="text-green-600 font-semibold text-lg">✅ Deine Nachricht wurde erfolgreich gesendet!</div>
+                <div className="text-green-600 font-semibold text-lg">✅ Deine Nachricht wurde erfolgreich
+                    gesendet!</div>
             ) : (
                 <form className="space-y-6" onSubmit={handleSubmit}>
                     <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                         {[
-                            { label: "Dein Name *", name: "name", type: "text", required: true, placeholder: "Max Mustermann" },
+                            {
-                            { label: "Deine E-Mail *", name: "email", type: "email", required: true, placeholder: "max@example.com" },
+                                label: "Dein Name *",
-                            { label: "Firmenname (optional)", name: "company", type: "text", required: false, placeholder: "Mustermann GmbH" },
+                                name: "name",
-                            { label: "Telefonnummer (optional)", name: "phone", type: "tel", required: false, placeholder: "+49 123 456789" },
+                                type: "text",
-                            { label: "Webseite (optional)", name: "website", type: "url", required: false, placeholder: "https://..." },
+                                required: true,
+                                placeholder: "Max Mustermann"
+                            },
+                            {
+                                label: "Deine E-Mail *",
+                                name: "email",
+                                type: "email",
+                                required: true,
+                                placeholder: "max@example.com"
+                            },
+                            {
+                                label: "Firmenname (optional)",
+                                name: "company",
+                                type: "text",
+                                required: false,
+                                placeholder: "Mustermann GmbH"
+                            },
+                            {
+                                label: "Telefonnummer (optional)",
+                                name: "phone",
+                                type: "tel",
+                                required: false,
+                                placeholder: "+49 123 456789"
+                            },
+                            {
+                                label: "Webseite (optional)",
+                                name: "website",
+                                type: "url",
+                                required: false,
+                                placeholder: "https://..."
+                            },
                         ].map((field, index) => (
                             <motion.div
                                 key={field.name}
-                                initial={{ opacity: 0, y: 10 }}
+                                initial={{opacity: 0, y: 10}}
-                                whileInView={{ opacity: 1, y: 0 }}
+                                whileInView={{opacity: 1, y: 0}}
-                                viewport={{ once: true }}
+                                viewport={{once: true}}
-                                transition={{ duration: 0.5, delay: index * 0.1 }}
+                                transition={{duration: 0.5, delay: index * 0.1}}
                             >
-                                <label className="block font-semibold mb-1" style={{ color: colors.primaryText }}>
+                                <label className="block font-semibold mb-1" style={{color: colors.primaryText}}>
                                     {field.label}
                                 </label>
                                 <input
@@ -128,12 +157,12 @@ const ContactFormSection = () => {
                     </div>
 
                     <motion.div
-                        initial={{ opacity: 0, y: 10 }}
+                        initial={{opacity: 0, y: 10}}
-                        whileInView={{ opacity: 1, y: 0 }}
+                        whileInView={{opacity: 1, y: 0}}
-                        viewport={{ once: true }}
+                        viewport={{once: true}}
-                        transition={{ duration: 0.5, delay: 0.6 }}
+                        transition={{duration: 0.5, delay: 0.6}}
                     >
-                        <label className="block font-semibold mb-1" style={{ color: colors.primaryText }}>
+                        <label className="block font-semibold mb-1" style={{color: colors.primaryText}}>
                             Deine Nachricht *
                         </label>
                         <textarea
@@ -154,12 +183,12 @@ const ContactFormSection = () => {
 
                     <motion.div
                         className="pt-2"
-                        initial={{ opacity: 0, y: 10 }}
+                        initial={{opacity: 0, y: 10}}
-                        whileInView={{ opacity: 1, y: 0 }}
+                        whileInView={{opacity: 1, y: 0}}
-                        viewport={{ once: true }}
+                        viewport={{once: true}}
-                        transition={{ duration: 0.5, delay: 0.7 }}
+                        transition={{duration: 0.5, delay: 0.7}}
                     >
-                        <HCaptcha sitekey={hCaptchaSiteKey} onVerify={setCaptchaToken} />
+                        <HCaptcha sitekey={hCaptchaSiteKey} onVerify={setCaptchaToken}/>
                     </motion.div>
 
                     {error && (
@@ -170,10 +199,10 @@ const ContactFormSection = () => {
 
                     <motion.div
                         className="pt-4 flex justify-end"
-                        initial={{ opacity: 0, y: 10 }}
+                        initial={{opacity: 0, y: 10}}
-                        whileInView={{ opacity: 1, y: 0 }}
+                        whileInView={{opacity: 1, y: 0}}
-                        viewport={{ once: true }}
+                        viewport={{once: true}}
-                        transition={{ duration: 0.5, delay: 0.8 }}
+                        transition={{duration: 0.5, delay: 0.8}}
                     >
                         <button
                             type="submit"

frontend/eslint.config.mjs

@@ -18,8 +18,9 @@ const eslintConfig = [
                 {
                     argsIgnorePattern: '^_',
                     varsIgnorePattern: '^_'
-                }
+                },
-            ]
+            ],
+            '@typescript-eslint/no-explicit-any': 'off'
         }
     })
 ];