Implemented i18n and translated RatingCard

01-frontend/package-lock.json

@@ -14,6 +14,7 @@
         "@mui/material": "^7.0.2",
         "i18next": "^25.2.0",
         "i18next-browser-languagedetector": "^8.1.0",
+        "i18next-http-backend": "^3.0.2",
         "mui": "^0.0.1",
         "react": "^19.0.0",
         "react-dom": "^19.1.0",
@@ -2336,6 +2337,15 @@
         "node": ">= 6"
       }
     },
+    "node_modules/cross-fetch": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-4.0.0.tgz",
+      "integrity": "sha512-e4a5N8lVvuLgAWgnCrLr2PP0YyDOTHa9H/Rj54dirp61qXnNq46m82bRhNqIA5VccJtWBvPTFRV3TtvHUKPB1g==",
+      "license": "MIT",
+      "dependencies": {
+        "node-fetch": "^2.6.12"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -2932,6 +2942,15 @@
         "@babel/runtime": "^7.23.2"
       }
     },
+    "node_modules/i18next-http-backend": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/i18next-http-backend/-/i18next-http-backend-3.0.2.tgz",
+      "integrity": "sha512-PdlvPnvIp4E1sYi46Ik4tBYh/v/NbYfFFgTjkwFl0is8A18s7/bx9aXqsrOax9WUbeNS6mD2oix7Z0yGGf6m5g==",
+      "license": "MIT",
+      "dependencies": {
+        "cross-fetch": "4.0.0"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -3250,6 +3269,26 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/node-fetch": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
+      "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
+      "license": "MIT",
+      "dependencies": {
+        "whatwg-url": "^5.0.0"
+      },
+      "engines": {
+        "node": "4.x || >=6.0.0"
+      },
+      "peerDependencies": {
+        "encoding": "^0.1.0"
+      },
+      "peerDependenciesMeta": {
+        "encoding": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/node-releases": {
       "version": "2.0.19",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz",
@@ -3875,6 +3914,12 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/tr46": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
+      "license": "MIT"
+    },
     "node_modules/ts-api-utils": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.1.0.tgz",
@@ -4097,6 +4142,22 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/webidl-conversions": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/whatwg-url": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
+      "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
+      "license": "MIT",
+      "dependencies": {
+        "tr46": "~0.0.3",
+        "webidl-conversions": "^3.0.0"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",

01-frontend/package.json

@@ -17,6 +17,7 @@
     "@mui/material": "^7.0.2",
     "i18next": "^25.2.0",
     "i18next-browser-languagedetector": "^8.1.0",
+    "i18next-http-backend": "^3.0.2",
     "mui": "^0.0.1",
     "react": "^19.0.0",
     "react-dom": "^19.1.0",

01-frontend/public/locales/de/translation.json

@@ -0,0 +1,3 @@
+{
+  "ratingFrom": "Bewertung vom"
+}

01-frontend/public/locales/en/translation.json

@@ -0,0 +1,3 @@
+{
+  "ratingFrom": "Rating from"
+}

01-frontend/src/components/i18n/i18n.ts

@@ -1,10 +1,19 @@
 import i18next from "i18next";
 import { initReactI18next } from "react-i18next";
 import LanguageDetector from "i18next-browser-languagedetector";
+import HttpBackend from "i18next-http-backend";
 
 i18next
-    .use(initReactI18next) // Passes i18n down to react-i18next
+    .use(HttpBackend)
-    .use(LanguageDetector) // Detects user language
+    .use(LanguageDetector)
+    .use(initReactI18next)
     .init({
-        fallbackLng: "en"
+        fallbackLng: "en",
-    })
+        debug: true,
+        interpolation: {
+            escapeValue: false,
+        },
+        backend: {
+            loadPath: "/locales/{{lng}}/translation.json",
+        }
+    });

01-frontend/src/helper/productpage/RatingCard.tsx

@@ -1,8 +1,11 @@
 import { Card, CardActionArea, CardContent, Paper, Rating, Typography } from "@mui/material";
 import RatingType from "../../components/Rating";
+import { useTranslation } from 'react-i18next';
 
 export default function RatingCard(ratingType: RatingType) {
 
+    const { t } = useTranslation();
+
     const handleClick = () => {
         console.log(`Clicked on rating with id: ${ratingType.id}`);
     }
@@ -13,7 +16,7 @@ export default function RatingCard(ratingType: RatingType) {
                 <CardActionArea onClick={handleClick}>
                     <CardContent>
                         <Typography gutterBottom variant="h5" component="div">
-                            Rating vom: {ratingType.date}
+                            {t('ratingFrom')} {ratingType.date}
                         </Typography>
                         <Rating name="half-rating" readOnly defaultValue={ratingType.rating} precision={0.5} />
                         <Typography variant="body2" sx={{ color: 'text.secondary' }} className="item-description">

01-frontend/src/main.tsx

@@ -1,3 +1,4 @@
+import './components/i18n/i18n';
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import './index.css'