Base setup for easy translations in frontend

frontend/package.json

@@ -34,6 +34,10 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
     "eslint-plugin-tsdoc": "^0.2.17",
+    "i18next": "^23.10.1",
+    "i18next-browser-languagedetector": "^7.2.0",
+    "i18next-http-backend": "^2.5.0",
+    "react-i18next": "^14.1.0",
     "typescript": "^5.2.2",
     "vite": "^5.1.0"
   }

frontend/public/locales/en/translation.json

@@ -0,0 +1,7 @@
+{
+    "homepage": "Homepage",
+    "myProjects": "My Projects",
+    "myCourses": "My Courses",
+    "login": "Login",
+    "home": "Home"
+  }

frontend/public/locales/nl/translation.json

@@ -0,0 +1,7 @@
+{
+    "homepage": "Homepage",
+    "myProjects": "Mijn Projecten",
+    "myCourses": "Mijn Vakken",
+    "login": "Login",
+    "home": "Home"
+  }

frontend/src/components/Header/Header.tsx

@@ -7,12 +7,14 @@ import {
   Typography,
 } from "@mui/material";
 import MenuIcon from "@mui/icons-material/Menu";
+import { useTranslation } from "react-i18next";
 
 /**
  * The header component for the application that will be rendered at the top of the page.
  * @returns - The header component
  */
 export function Header(): JSX.Element {
+  const { t } = useTranslation();
   return (
     <Box sx={{ flexGrow: 1 }}>
       <AppBar position="sticky">
@@ -21,7 +23,7 @@ export function Header(): JSX.Element {
             <MenuIcon />
           </IconButton>
           <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
-            Home
+            {t('home')}
           </Typography>
           <Button color="inherit">Login</Button>
         </Toolbar>

frontend/src/i18n.js

@@ -0,0 +1,19 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import Backend from 'i18next-http-backend';
+import LanguageDetector from 'i18next-browser-languagedetector';
+
+i18n
+  .use(Backend)
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    fallbackLng: 'en',
+    debug: true,
+
+    interpolation: {
+      escapeValue: false,
+    }
+  });
+
+export default i18n;

frontend/src/main.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App.tsx'
 import './index.css'
+import './i18n'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>

frontend/src/pages/home/Home.tsx

@@ -1,12 +1,14 @@
+import { useTranslation } from "react-i18next";
 
 /**
  * This component is the home page component that will be rendered when on the index route.
  * @returns - The home page component
  */
 export default function Home() {
+  const { t } = useTranslation();
   return (
     <div>
-      <h1>HomePage</h1>
+      <h1>{t('homepage')}</h1>
     </div>
   );
 }