Nested translation files for readability and scalability

frontend/public/locales/en/translation.json

@@ -1,7 +1,16 @@
 {
-    "homepage": "Homepage",
+  "header": {
     "myProjects": "My Projects",
     "myCourses": "My Courses",
     "login": "Login",
     "home": "Home"
-  }
+  },
+  "home": {
+    "homepage": "Homepage"
+  },
+  "courseForm": {
+    "courseName": "Course Name",
+    "submit": "Submit",
+    "emptyCourseNameError": "Course name should not be empty"
+  }
+}

frontend/public/locales/nl/translation.json

@@ -1,7 +1,16 @@
 {
-    "homepage": "Homepage",
+  "header": {
     "myProjects": "Mijn Projecten",
     "myCourses": "Mijn Vakken",
     "login": "Login",
     "home": "Home"
-  }
+  },
+  "home": {
+    "homepage": "Homepage"
+  },
+  "courseForm": {
+    "courseName": "Vak Naam",
+    "submit": "Opslaan",
+    "emptyCourseNameError": "Vak naam mag niet leeg zijn"
+  }
+}

frontend/src/components/Header/Header.tsx

@@ -9,7 +9,7 @@ import { useEffect, useState } from "react";
  * @returns JSX.Element representing the header.
  */
 export function Header(): JSX.Element {
-  const { t } = useTranslation();
+  const { t } = useTranslation('translation', { keyPrefix: 'header' });
   const location = useLocation();
   const [open, setOpen] = useState(false);
   const [listItems, setListItems] = useState([

frontend/src/pages/home/Home.tsx

@@ -5,7 +5,7 @@ import { useTranslation } from "react-i18next";
  * @returns - The home page component
  */
 export default function Home() {
-  const { t } = useTranslation();
+  const { t } = useTranslation('translation', { keyPrefix: 'home' });
   return (
     <div>
       <h1>{t('homepage')}</h1>