Implemented i18n and translated RatingCard

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(LanguageDetector) // Detects user language
+    .use(HttpBackend)
+    .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'