Finished basic layout of application.

2025-09-07 00:03:12 +02:00
parent 12bdd22cbe
commit 136d9d9d19
29 changed files with 18485 additions and 0 deletions
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -0,0 +1,46 @@
+# Getting Started with Create React App
+
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm start`
+
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.\
+You will also see any lint errors in the console.
+
+### `npm test`
+
+Launches the test runner in the interactive watch mode.\
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.\
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.\
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+### `npm run eject`
+
+**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+
+If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+
+Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+
+You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+
+## Learn More
+
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -0,0 +1,52 @@
+{
+  "name": "frontend",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.8.0",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^27.5.2",
+    "@types/node": "^16.18.126",
+    "i18next": "^22.5.1",
+    "i18next-browser-languagedetector": "^7.2.2",
+    "i18next-http-backend": "^2.7.3",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "react-i18next": "^12.3.1",
+    "react-router-dom": "^7.8.2",
+    "react-scripts": "5.0.1",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.24",
+    "@types/react-dom": "^18.3.7",
+    "@types/react-i18next": "^7.8.3",
+    "typescript": "^4.9.5"
+  }
+}
--- a/frontend/postcss.config.js
+++ b/frontend/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/logo.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>Self-Determination Theory</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
--- a/frontend/public/logo.png
+++ b/frontend/public/logo.png
--- a/frontend/public/manifest.json
+++ b/frontend/public/manifest.json
@@ -0,0 +1,13 @@
+{
+  "short_name": "Self-Determination Theory",
+  "name": "Self-Determination Theory",
+  "icons": [
+    {
+      "src": "logo.png",
+      "type": "image/png",
+      "sizes": "1024x1024"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone"
+}
--- a/frontend/public/robots.txt
+++ b/frontend/public/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -0,0 +1,38 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
--- a/frontend/src/App.test.tsx
+++ b/frontend/src/App.test.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -0,0 +1,27 @@
+import './App.css';
+import { Routes, Route } from "react-router-dom";
+import { Header } from "./components/Header";
+import Home from './pages/Home';
+import { Footer } from './components/Footer';
+import Imprint from './pages/Imprint';
+import Privacy from './pages/Privacy';
+
+function App() {
+  return (
+    <div className="flex min-h-screen flex-col bg-white text-neutral-900 dark:bg-neutral-950 dark:text-neutral-100">
+      <Header />
+      <main className="flex-grow">
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/imprint" element={<Imprint />} />
+          <Route path="/privacy" element={<Privacy />} />
+          {/* add more routes here */}
+          <Route path="*" element={<p>Page not found</p>} />
+        </Routes>
+      </main>
+      <Footer />
+    </div>
+  );
+}
+
+export default App;
--- a/frontend/src/components/Footer/Footer.tsx
+++ b/frontend/src/components/Footer/Footer.tsx
@@ -0,0 +1,30 @@
+// src/components/layout/Footer.tsx
+import { Link } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+
+export function Footer() {
+
+    const { t } = useTranslation("comp:footer");
+
+    return (
+        <footer className="mt-16 border-t dark:border-neutral-800">
+            <div className="mx-auto max-w-6xl px-4 py-8 text-sm text-neutral-600 dark:text-neutral-300">
+                <div className="flex flex-col gap-6 md:flex-row md:items-center md:justify-between">
+                    {/* Legal links */}
+                    <nav className="flex flex-wrap items-center gap-x-6 gap-y-3">
+                        <Link to="/imprint" className="hover:underline">{t("imprint")}</Link>
+                        <Link to="/privacy" className="hover:underline">{t("data_protection")}</Link>
+                        <Link to="/cookies" className="hidden hover:underline">{t("cookies")}</Link>
+                        <Link to="/contact" className="hidden hover:underline">{t("contact")}</Link>
+                    </nav>
+                </div>
+
+                <div className="mt-6 flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
+                    <p className="opacity-75">
+                        {t("quote")}
+                    </p>
+                </div>
+            </div>
+        </footer>
+    );
+}
--- a/frontend/src/components/Footer/index.ts
+++ b/frontend/src/components/Footer/index.ts
@@ -0,0 +1 @@
+export { Footer } from "./Footer"
--- a/frontend/src/components/Header/Header.tsx
+++ b/frontend/src/components/Header/Header.tsx
@@ -0,0 +1,141 @@
+import { Link, NavLink } from "react-router-dom";
+import { useTheme } from "../../hooks/useTheme";
+import { useTranslation } from "react-i18next";
+import React from "react";
+
+export function Header() {
+  const { theme, toggle } = useTheme();
+  const isDark = theme === "dark";
+  const { i18n, t } = useTranslation("comp:header");
+  const [open, setOpen] = React.useState(false);
+
+  const changeLanguage = (lng: string) => i18n.changeLanguage(lng);
+
+  return (
+    <header className="sticky top-0 z-50 border-b bg-white/70 backdrop-blur dark:bg-neutral-900/70 dark:border-neutral-800">
+      <div className="mx-auto max-w-6xl px-4">
+        {/* Top bar */}
+        <div className="flex items-center justify-between py-3 md:grid md:grid-cols-3">
+          {/* Left: brand */}
+          <Link
+            to="/"
+            className="flex items-center gap-2 text-xl font-semibold tracking-tight hover:opacity-90"
+          >
+            <img
+              src="logo.png"
+              alt="Little smiling brain surrounded by three dots and curly braces"
+              className="h-9 w-9"
+            />
+            <p className="sm:inline">{t("app_name")}</p>
+          </Link>
+
+          {/* Center: nav (desktop only) */}
+          <nav className="hidden md:flex items-center justify-center gap-6">
+            <NavLink
+              to="/"
+              className={({ isActive }) =>
+                `text-sm ${isActive ? "font-semibold underline" : "opacity-80 hover:opacity-100"}`
+              }
+            >
+              {t("nav.home", "Home")}
+            </NavLink>
+            {/* Add more pages here */}
+            {/* <NavLink to="/about" ...>About</NavLink> */}
+          </nav>
+
+          {/* Right: controls */}
+          <div className="flex items-center justify-end gap-2">
+            {/* Desktop controls */}
+            <div className="hidden md:flex items-center gap-2">
+              <button
+                type="button"
+                onClick={toggle}
+                aria-label="Toggle dark mode"
+                className="rounded-lg border px-3 py-1 text-sm hover:bg-neutral-100 dark:hover:bg-neutral-800 dark:border-neutral-700 border-neutral-200"
+                title={isDark ? "Switch to light mode" : "Switch to dark mode"}
+              >
+                {isDark ? "☀️ Light" : "🌙 Dark"}
+              </button>
+              <button
+                onClick={() => changeLanguage("en")}
+                className="rounded px-2 py-1 text-sm ring-1 ring-black/10 hover:bg-black/5"
+              >
+                EN
+              </button>
+              <button
+                onClick={() => changeLanguage("de")}
+                className="rounded px-2 py-1 text-sm ring-1 ring-black/10 hover:bg-black/5"
+              >
+                DE
+              </button>
+            </div>
+
+            {/* Mobile: hamburger */}
+            <button
+              className="md:hidden inline-flex items-center justify-center rounded-md p-2 ring-1 ring-black/10 hover:bg-black/5"
+              aria-label="Open menu"
+              aria-expanded={open}
+              onClick={() => setOpen((v) => !v)}
+            >
+              {/* simple icon */}
+              <span className="i-[menu]">
+                <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
+                  <path d="M4 7h16M4 12h16M4 17h16" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+                </svg>
+              </span>
+            </button>
+          </div>
+        </div>
+
+        {/* Mobile panel */}
+        {open && (
+          <div className="md:hidden pb-3 border-t border-neutral-200 dark:border-neutral-800">
+            <nav className="flex flex-col gap-1 pt-3">
+              <NavLink
+                to="/"
+                onClick={() => setOpen(false)}
+                className={({ isActive }) =>
+                  `px-2 py-2 rounded ${isActive ? "font-semibold underline" : "opacity-90 hover:opacity-100"}`
+                }
+              >
+                {t("nav.home", "Home")}
+              </NavLink>
+              {/* More mobile links… */}
+
+              <div className="mt-2 flex items-center gap-2">
+                <button
+                  type="button"
+                  onClick={() => {
+                    toggle();
+                    setOpen(false);
+                  }}
+                  className="flex-1 rounded-lg border px-3 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-neutral-800 dark:border-neutral-700 border-neutral-200"
+                >
+                  {isDark ? "☀️ Light" : "🌙 Dark"}
+                </button>
+                <button
+                  onClick={() => {
+                    changeLanguage("en");
+                    setOpen(false);
+                  }}
+                  className="rounded px-3 py-2 text-sm ring-1 ring-black/10 hover:bg-black/5"
+                >
+                  EN
+                </button>
+                <button
+                  onClick={() => {
+                    changeLanguage("de");
+                    setOpen(false);
+                  }}
+                  className="rounded px-3 py-2 text-sm ring-1 ring-black/10 hover:bg-black/5"
+                >
+                  DE
+                </button>
+              </div>
+            </nav>
+          </div>
+        )}
+      </div>
+    </header>
+  );
+}
--- a/frontend/src/components/Header/index.ts
+++ b/frontend/src/components/Header/index.ts
@@ -0,0 +1 @@
+export { Header } from "./Header"
--- a/frontend/src/hooks/useTheme.tsx
+++ b/frontend/src/hooks/useTheme.tsx
@@ -0,0 +1,50 @@
+import React, { createContext, useContext, useEffect, useMemo, useState } from "react";
+
+type Theme = "light" | "dark";
+type ThemeContextValue = { theme: Theme; toggle: () => void; setTheme: (t: Theme) => void };
+
+const ThemeContext = createContext<ThemeContextValue | null>(null);
+const STORAGE_KEY = "theme";
+
+function getInitialTheme(): Theme {
+  const stored = (localStorage.getItem(STORAGE_KEY) || "").toLowerCase();
+  if (stored === "light" || stored === "dark") return stored as Theme;
+  const prefersDark = window.matchMedia?.("(prefers-color-scheme: dark)").matches;
+  return prefersDark ? "dark" : "light";
+}
+
+export const ThemeProvider: React.FC<React.PropsWithChildren> = ({ children }) => {
+  const [theme, setTheme] = useState<Theme>(getInitialTheme);
+
+  // Apply theme class to <html> and store persistently
+  useEffect(() => {
+    const root = document.documentElement;
+    if (theme === "dark") root.classList.add("dark");
+    else root.classList.remove("dark");
+    localStorage.setItem(STORAGE_KEY, theme);
+  }, [theme]);
+
+  // Listen to system theme changes only if user hasn’t chosen explicitly
+  useEffect(() => {
+    const media = window.matchMedia("(prefers-color-scheme: dark)");
+    const handler = (e: MediaQueryListEvent) => {
+      const stored = localStorage.getItem(STORAGE_KEY);
+      if (!stored) setTheme(e.matches ? "dark" : "light");
+    };
+    media.addEventListener?.("change", handler);
+    return () => media.removeEventListener?.("change", handler);
+  }, []);
+
+  const value = useMemo(
+    () => ({ theme, setTheme, toggle: () => setTheme(theme === "dark" ? "light" : "dark") }),
+    [theme]
+  );
+
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
+};
+
+export const useTheme = () => {
+  const ctx = useContext(ThemeContext);
+  if (!ctx) throw new Error("useTheme must be used within ThemeProvider");
+  return ctx;
+};
--- a/frontend/src/i18n.ts
+++ b/frontend/src/i18n.ts
@@ -0,0 +1,40 @@
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+import LanguageDetector from "i18next-browser-languagedetector";
+import Backend from "i18next-http-backend";
+
+i18n
+  .use(Backend)
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    // List your supported languages & default
+    supportedLngs: ["en", "de"],
+    fallbackLng: "en",
+
+    // Tell i18next to load from your API
+    backend: {
+      // If your API is on another origin, use the absolute URL
+      // Example: loadPath: (lngs, ns) => `https://api.example.com/i18n?namespace=${ns[0]}&lang=${lngs[0]}`
+      loadPath: (lngs: string[], namespaces: string[]) =>
+        `https://sdt.taocs.de/api/v1/translations?namespace=${encodeURIComponent(namespaces[0])}&lang=${encodeURIComponent(lngs[0])}`,
+
+      // If your API returns a custom shape, you can transform it:
+      // parse: (data: string) => JSON.parse(data).translations,
+      // requestOptions: { credentials: "include" } // if you need cookies
+    },
+
+    // i18next will request one namespace at a time by default.
+    // If you prefer to request multiple at once, you can implement it on the server side.
+    ns: ["page:home"],          // default namespace(s)
+    defaultNS: "page:home",
+
+    interpolation: { escapeValue: false },
+
+    // Good DX for React
+    react: {
+      useSuspense: true,
+    },
+  });
+
+export default i18n;
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -0,0 +1,25 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html, body, #root { height: 100%; }
+
+/* Optional: smooth transitions for theme changes */
+* {
+  transition: background-color 150ms linear, color 150ms linear, border-color 150ms linear;
+}
+
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
+import App from "./App";
+import "./index.css";
+import { ThemeProvider } from "./hooks/useTheme";
+import "./i18n";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <ThemeProvider>
+        <App />
+      </ThemeProvider>
+    </BrowserRouter>
+  </React.StrictMode>
+);
--- a/frontend/src/pages/Cookies.tsx
+++ b/frontend/src/pages/Cookies.tsx
@@ -0,0 +1,11 @@
+export default function Cookies() {
+  return (
+    <main className="mx-auto max-w-3xl px-4 py-10 prose dark:prose-invert">
+      <h1>Cookie-Hinweis</h1>
+      <p>Wir verwenden notwendige Cookies zur Bereitstellung der Website. Für optionale Cookies (z. B. Statistik, Marketing) holen wir Ihre Einwilligung ein.</p>
+      <button className="rounded border px-3 py-1" onClick={() => (window as any)?.__cmp?.('open')}>
+        Cookie-Einstellungen öffnen
+      </button>
+    </main>
+  );
+}
--- a/frontend/src/pages/Home.tsx
+++ b/frontend/src/pages/Home.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+const Home: React.FC = () => {
+
+  const { t } = useTranslation();
+
+  return (
+    <main className="prose dark:prose-invert mx-auto max-w-3xl px-4 py-12">
+      <h1 className="text-2xl font-bold">{t("heading")}</h1>
+      <p className="mt-2">{t("home_content_1")}</p>
+      <p className="mt-2">{t("home_content_2")}</p>
+      <p className="mt-2">{t("home_content_3")}</p>
+      <p className="mt-2">{t("home_content_4")}</p>
+      <p className="mt-2">{t("home_content_5")}</p>
+      <p className="mt-2">{t("home_content_6")}</p>
+      <p className="mt-2">{t("home_content_7")}</p>
+    </main>
+  );
+};
+
+export default Home;
--- a/frontend/src/pages/Imprint.tsx
+++ b/frontend/src/pages/Imprint.tsx
@@ -0,0 +1,23 @@
+import { useTranslation } from "react-i18next";
+
+export default function Imprint() {
+
+    const { t } = useTranslation("page:imprint");
+
+    return (
+        <main className="prose dark:prose-invert mx-auto max-w-3xl px-4 py-12">
+            <h1 className="text-2xl font-bold">{t("imprint_heading")}</h1>
+            <p>
+                {t("imprint_content_1")}
+            </p>
+            <p>
+                {t("imprint_content_2")}
+                <br />
+                {t("imprint_name")}
+            </p>
+            <p>
+                {t("imprint_content_3")} <a href={`mailto:${t("imprint_email")}`}>{t("imprint_email")}</a>.
+            </p>
+        </main>
+    );
+}
--- a/frontend/src/pages/Privacy.tsx
+++ b/frontend/src/pages/Privacy.tsx
@@ -0,0 +1,22 @@
+import { useTranslation } from "react-i18next";
+
+export default function Privacy() {
+
+    const { t } = useTranslation("page:privacy");
+
+    return (
+        <main className="prose dark:prose-invert mx-auto max-w-3xl px-4 py-12">
+            <h1 className="text-2xl font-bold">{t("privacy_heading")}</h1>
+            <p>
+                <p className="mt-2">{t("privacy_content_1")}</p>
+                <p>{t("privacy_content_2")}</p>
+                <p>{t("privacy_content_3")}</p>
+                <p className="mt-2">{t("privacy_content_4")}</p>
+                <p className="mt-2">{t("privacy_content_5")}</p>
+                <p className="mt-2">{t("privacy_content_6")}</p>
+                <p className="mt-2">{t("privacy_content_7")} <a href={`mailto:${t("privacy_email")}`}>{t("privacy_email")}</a>.</p>
+                <p className="mt-2">{t("privacy_content_8")}</p>
+            </p>
+        </main>
+    );
+}
--- a/frontend/src/react-app-env.d.ts
+++ b/frontend/src/react-app-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="react-scripts" />
--- a/frontend/src/reportWebVitals.ts
+++ b/frontend/src/reportWebVitals.ts
@@ -0,0 +1,15 @@
+import { ReportHandler } from 'web-vitals';
+
+const reportWebVitals = (onPerfEntry?: ReportHandler) => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;
--- a/frontend/src/setupTests.ts
+++ b/frontend/src/setupTests.ts
@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -0,0 +1,10 @@
+// tailwind.config.js
+export default {
+  content: [
+    "./public/index.html",
+    "./src/**/*.{js,jsx,ts,tsx}"
+  ],
+  theme: { extend: {} },
+  darkMode: "class",
+  plugins: [],
+}
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "src"
+, "../tailwind.config.js"  ]
+}