1 create centralized openf1 api service

src/App.tsx

@@ -1,10 +1,32 @@
 import './App.css'
+import api,{ type Driver } from './api/api'
+import { useEffect, useState } from "react";
 
 function App() {
+  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>
+
+      ))}
+
     </>
   )
 }

src/api/api.tsx

@@ -0,0 +1,32 @@
+
+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: Driver[] = await result.json();
+        return drivers
+    }
+
+    return {
+
+        getAllDrivers,
+
+    };
+}