diff --git a/client/src/App.tsx b/client/src/App.tsx
index a7a8af4..dfd9d7f 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -1,39 +1,15 @@
 import { useState } from 'react'
+import { getAllUsers, registerNewUser } from './util/apiUtils';
+import { userInfo } from './types/main';
 import './App.css'
 
 function App() {
   const [response, setResponse] = useState<any>(undefined);
 
-  type userInfo = {
-    email: string;
-    id?: number;
-    name: string;
-    password: string;
-  }
-
-  const doAPICall = async () => {
-    let serverCall = await fetch('http://localhost:8088/users')
-    .then(res => res.json());
-
-    serverCall && setResponse(serverCall);
-  }
-
-  const addSampleUser = async () => {
-    let newUser: userInfo = {
-      email: 'another@email.com',
-      name: "still another person",
-      password: "dumb_password"
-    }
-
-    let thing = await fetch('http://localhost:8088/register', {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json"
-      },
-      body: JSON.stringify(newUser)
-    });
-
-    if (thing.ok) alert('User added successfully.');
+  let newUser: userInfo = {
+    email: 'anotherperson@email.com',
+    name: "one more person",
+    password: "dumb_password"
   }
 
   return (
@@ -50,8 +26,8 @@ function App() {
       })}
       </div>
 
-      <button onClick={doAPICall}>API call?</button>
-      <button onClick={addSampleUser}>Add sample user</button>
+      <button onClick={() => getAllUsers().then(res => setResponse(res))}>API call?</button>
+      <button onClick={() => registerNewUser(newUser).then(res => alert(res))}>Add sample user</button>
     </div>
   )
 }
diff --git a/client/src/components/Cart.tsx b/client/src/components/Cart.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/client/src/components/Checkout.tsx b/client/src/components/Checkout.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/client/src/components/ItemCard.tsx b/client/src/components/ItemCard.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/client/src/components/ItemPage.tsx b/client/src/components/ItemPage.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/client/src/components/LoginForm.tsx b/client/src/components/LoginForm.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/client/src/types/main.d.ts b/client/src/types/main.d.ts
new file mode 100644
index 0000000..33da7be
--- /dev/null
+++ b/client/src/types/main.d.ts
@@ -0,0 +1,6 @@
+export type userInfo = {
+    email: string;
+    id?: number;
+    name: string;
+    password: string;
+}
diff --git a/client/src/util/apiUtils.ts b/client/src/util/apiUtils.ts
new file mode 100644
index 0000000..8cc63e2
--- /dev/null
+++ b/client/src/util/apiUtils.ts
@@ -0,0 +1,20 @@
+import { userInfo } from '../types/main';
+
+export const getAllUsers = async () => {
+    let serverCall = await fetch('http://localhost:8088/users')
+    .then(res => res.json());
+
+    return serverCall;
+}
+
+export const registerNewUser = async (user: userInfo) => {
+    let serverCall = await fetch('http://localhost:8088/register', {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify(user)
+    });
+  
+    if (serverCall.ok) return 'User added successfully.';
+}
diff --git a/client/tsconfig.json b/client/tsconfig.json
index 3d0a51a..4a9061b 100644
--- a/client/tsconfig.json
+++ b/client/tsconfig.json
@@ -14,7 +14,11 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "typeRoots": [
+      "./src/types/main.d.ts",
+      "./node_modules/@types"
+    ]
   },
   "include": ["src"],
   "references": [{ "path": "./tsconfig.node.json" }]