From 246be882e21d7b5828def36a4a53444f14323a76 Mon Sep 17 00:00:00 2001
From: Wilhelm Svensgaard Rolstad <wilhelsr@stud.ntnu.no>
Date: Mon, 14 Sep 2026 13:39:51 +0200
Subject: [PATCH 1/2] feat: added centralized api to fetch driver data, and
 displayed a little

---
 src/App.tsx     | 40 ++++++++++++++++++++++++++++++++++++++++
 src/api/api.tsx | 17 +++++++++++++++++
 2 files changed, 57 insertions(+)
 create mode 100644 src/api/api.tsx

diff --git a/src/App.tsx b/src/App.tsx
index d124401..d5d661a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,10 +1,50 @@
 import './App.css'
+import api from './api/api'
+import { useEffect, useState } from "react";
 
 function App() {
 
+  interface Driver {
+
+  driver_number: number;
+
+  full_name: string;
+
+  headshot_url : string;
+
+  team_name: string;
+
+}
+
+  const { getAllDrivers } = api()
+  const [drivers, setDrivers] = useState<Driver[]>([])
+
+  useEffect(() => {
+
+    async function loadDrivers() {
+        const allDrivers = await getAllDrivers()
+        setDrivers(allDrivers)
+        console.log(allDrivers)
+    }
+
+    loadDrivers()
+
+  }, [])
+
+  
+
   return (
     <>
       <h1>WEB</h1>
+
+      {drivers.map((driver) => (
+        <div key={driver.driver_number}>
+          <p>{driver.full_name}</p>
+          <img src={driver.headshot_url}></img>
+        </div>
+
+      ))}
+
     </>
   )
 }
diff --git a/src/api/api.tsx b/src/api/api.tsx
new file mode 100644
index 0000000..c0ccac8
--- /dev/null
+++ b/src/api/api.tsx
@@ -0,0 +1,17 @@
+
+export default function api(){
+    const API = "https://api.openf1.org/v1"
+
+    async function getAllDrivers(){
+        const result = await fetch(`${API}/drivers?session_key=latest`);
+        if (!result.ok) { throw new Error("Failed to fetch drivers");}
+        const drivers = await result.json();
+        return drivers
+    }
+
+    return {
+
+        getAllDrivers,
+
+    };
+}
\ No newline at end of file

From f33646e2dc075b7171323510d4990decc04ba2ce Mon Sep 17 00:00:00 2001
From: Wilhelm Svensgaard Rolstad <wilhelsr@stud.ntnu.no>
Date: Mon, 14 Sep 2026 13:51:26 +0200
Subject: [PATCH 2/2] moved Driver interface to api service

---
 src/App.tsx     | 20 +-------------------
 src/api/api.tsx | 17 ++++++++++++++++-
 2 files changed, 17 insertions(+), 20 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index d5d661a..15a3be5 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,38 +1,20 @@
 import './App.css'
-import api from './api/api'
+import api,{ type Driver } from './api/api'
 import { useEffect, useState } from "react";
 
 function App() {
-
-  interface Driver {
-
-  driver_number: number;
-
-  full_name: string;
-
-  headshot_url : string;
-
-  team_name: string;
-
-}
-
   const { getAllDrivers } = api()
   const [drivers, setDrivers] = useState<Driver[]>([])
 
   useEffect(() => {
-
     async function loadDrivers() {
         const allDrivers = await getAllDrivers()
         setDrivers(allDrivers)
         console.log(allDrivers)
     }
-
     loadDrivers()
-
   }, [])
 
-  
-
   return (
     <>
       <h1>WEB</h1>
diff --git a/src/api/api.tsx b/src/api/api.tsx
index c0ccac8..8736f99 100644
--- a/src/api/api.tsx
+++ b/src/api/api.tsx
@@ -1,11 +1,26 @@
 
+export interface Driver {
+    broadcast_name: string;
+    driver_number: number;
+    first_name : string,
+    last_name : string,
+    full_name: string;
+    headshot_url: string;
+    meeting_key: number;
+    name_acronym : string;
+    session_key: number;
+    team_colour: string;
+    team_name: string;
+    }
+
 export default function api(){
     const API = "https://api.openf1.org/v1"
 
+
     async function getAllDrivers(){
         const result = await fetch(`${API}/drivers?session_key=latest`);
         if (!result.ok) { throw new Error("Failed to fetch drivers");}
-        const drivers = await result.json();
+        const drivers: Driver[] = await result.json();
         return drivers
     }