added basic table

app/routes/home.tsx

@@ -1,9 +1,53 @@
 import type { Route } from "./+types/home";
+import { useEffect, useState } from "react";
+import "../../config.json";
+
+const API_URL = process.env.API_URL;
+type transaction = { id: number; tier: number; type: string; cost: number };
 
 export function meta({}: Route.MetaArgs) {
   return [{ title: "Albion Online Transaction Tracker" }];
 }
 
 export default function Home() {
-  return <></>;
+  return (
+    <>
+      <TransactionTable />
+    </>
+  );
+}
+
+function TransactionTable() {
+  const [transactions, setTransactions] = useState<transaction[]>([]);
+
+  useEffect(() => {
+    fetch(`${API_URL}/transactions`)
+      .then((response) => response.json())
+      .then((data) => {console.log(data); setTransactions(data);});
+  }, [API_URL]);
+
+  return (
+    <>
+      <table>
+        <thead>
+          <tr>
+            <th>Timestamp</th>
+            <th>Tier</th>
+            <th>Type</th>
+            <th>Amount</th>
+          </tr>
+        </thead>
+        <tbody>
+          {transactions.map((transaction) => (
+            <tr key={transaction.id}>
+              <td></td>
+              <td>{transaction.tier}</td>
+              <td>{transaction.type}</td>
+              <td>{transaction.cost}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </>
+  );
 }