diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
deleted file mode 100644
index a860f91c..00000000
--- a/frontend/src/App.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import {JSX, useState} from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
-import './App.css'
-
-function App(): JSX.Element {
-  const [count, setCount] = useState(0)
-
-  return (
-    <>
-      <div>
-        <a href="https://vitejs.dev" target="_blank" rel="noreferrer">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank" rel="noreferrer">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
-    </>
-  )
-}
-
-export default App
diff --git a/frontend/src/dataloaders/StudentLoader.ts b/frontend/src/dataloaders/StudentLoader.ts
new file mode 100644
index 00000000..891f5f71
--- /dev/null
+++ b/frontend/src/dataloaders/StudentLoader.ts
@@ -0,0 +1,18 @@
+import apiFetch from "../utils/ApiFetch.ts";
+import {Project, Subject} from "../utils/ApiInterfaces.ts";
+
+export interface studentLoaderObject {
+    projects: Project[]
+}
+export default async function studentLoader(): Promise<studentLoaderObject> {
+    const projects: Project[] = await (await apiFetch("/api/student/projects")).json() as Project[];
+    const subjects: Subject[] = await (await apiFetch("/api/student/subjects")).json() as Subject[];
+    for (let i = 0; i < projects.length; i++) {
+        const subject: Subject | undefined = subjects.find(subject => subject.id === projects[i].subject_id);
+        if (subject !== undefined) {
+            projects[i].subject_name = subject.name;
+        }
+    }
+    // TODO: add submission data
+    return {"projects": projects};
+}
\ No newline at end of file
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index 3467c88e..15b215b1 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import ReactDOM from 'react-dom/client'
+import {createRoot} from 'react-dom/client'
 import {createBrowserRouter, RouterProvider,} from "react-router-dom";
 import './index.css'
 import Root from './pages/root.tsx'
@@ -10,6 +10,7 @@ import HomeStudent from "./pages/student/HomeStudent.tsx";
 import HomeTeacher from "./pages/teacher/HomeTeacher.tsx";
 import 'bulma/css/bulma.min.css';
 import './assets/styles/mainpage.css'
+import studentLoader from "./dataloaders/StudentLoader.ts";
 
 const router = createBrowserRouter([
     {
@@ -27,14 +28,17 @@ const router = createBrowserRouter([
     },
     {
         path: "/student",
-        element: <HomeStudent/>
+        element: <HomeStudent/>,
+        id: "student",
+        loader: studentLoader
     },
     {
         path: "/teacher",
         element: <HomeTeacher/>
     }
 ]);
-ReactDOM.createRoot(document.getElementById('root')!).render(
+
+createRoot(document.getElementById('root')!).render(
     <React.StrictMode>
         <RouterProvider router={router}/>
     </React.StrictMode>,
diff --git a/frontend/src/pages/student/HomeStudent.tsx b/frontend/src/pages/student/HomeStudent.tsx
index e4ab35e5..d53fa306 100644
--- a/frontend/src/pages/student/HomeStudent.tsx
+++ b/frontend/src/pages/student/HomeStudent.tsx
@@ -3,8 +3,15 @@ import {Header} from "../../components/Header.tsx";
 import {Sidebar} from "../../components/Sidebar.tsx";
 import ProjectCardStudent from "./ProjectCardStudent.tsx";
 import '../../assets/styles/students_components.css'
+import {useRouteLoaderData} from "react-router-dom";
+import {studentLoaderObject} from "../../dataloaders/StudentLoader.ts";
 
 export default function HomeStudent(): JSX.Element {
+
+    // data contains a list of Project in data.projects (i think)
+    const data: studentLoaderObject = useRouteLoaderData("student") as studentLoaderObject
+    console.log(data) // TODO: remove
+
     return (
         <>
             <div className={"main-header"}>
diff --git a/frontend/src/utils/.keep b/frontend/src/utils/.keep
deleted file mode 100644
index e69de29b..00000000
diff --git a/frontend/src/utils/ApiFetch.ts b/frontend/src/utils/ApiFetch.ts
new file mode 100644
index 00000000..c9cd8772
--- /dev/null
+++ b/frontend/src/utils/ApiFetch.ts
@@ -0,0 +1,12 @@
+const DEBUG: boolean = false; // should always be false on the repo.
+
+export default function apiFetch(url: string, options?: RequestInit) {
+    if (typeof options === 'undefined') {
+        options = {}
+    }
+    if (DEBUG) {
+        url = "http://127.0.0.1:8000" + url;
+    }
+    // TODO: add auth things in options
+    return fetch(url, options)
+}
\ No newline at end of file
diff --git a/frontend/src/utils/ApiInterfaces.ts b/frontend/src/utils/ApiInterfaces.ts
new file mode 100644
index 00000000..60048858
--- /dev/null
+++ b/frontend/src/utils/ApiInterfaces.ts
@@ -0,0 +1,17 @@
+export interface Subject {
+    id: number,
+    name: string
+}
+
+export interface Project {
+    id: number,
+    name: string,
+    deadline: string | Date,
+    archived: boolean,
+    description: string,
+    requirements: string,
+    visible: string,
+    max_students: number,
+    subject_id: number,
+    subject_name: string | undefined | null
+}