rudimentary integration between rest api and client -- allProducts fetches product data from database. to do: map onto card components

README.md

@@ -16,3 +16,6 @@ Payment information will be supported through the Stripe API, with session suppo
 ## Accessing the Project and its REST API Online
 1. The REST API for this project is exposed at https://mikayla-spice-market-api.herokuapp.com/
 2. The client site will be hosted on Netlify and is not online as of yet.
+
+## Accessing API Documentation
+The Swagger docs for this project can be accessed at https://mikayla-spice-market-api.herokuapp.com/api-docs/

client/src/components/Product/AllProducts.tsx

@@ -1,4 +1,19 @@
+import { useEffect, useState } from "react"
+import { getAllProducts } from "../../util/apiUtils";
+
 export default function AllProducts() {
+    const [productData, setProductData] = useState<Response>();
+
+    useEffect(() => {
+        getAllProducts()
+        .then(res => res.json())
+        .then(res => setProductData(res));
+    }, [])
+
+    useEffect(() => {
+        console.log(productData);
+    }, [productData])
+
     return (
         <h1>All Products!</h1>
     )

client/src/util/apiUtils.ts

@@ -0,0 +1,4 @@
+export const getAllProducts = async () => {
+    const response = await fetch("https://mikayla-spice-market-api.herokuapp.com/product");
+    return response;
+}