2 files changed, 43 insertions, 0 deletions
diff --git a/storefront/pages/_app.js b/storefront/pages/_app.js
new file mode 100644
index 0000000..1424c52
--- /dev/null
+++ b/storefront/pages/_app.js
@@ -0,0 +1,17 @@
+import { MedusaProvider } from "medusa-react"
+import { QueryClient } from "@tanstack/react-query"
+import { medusaClient } from "../lib/medusa-client"
+
+const queryClient = new QueryClient()
+
+export default function App({ Component, pageProps }) {
+  return (
+    <MedusaProvider
+      queryClientProviderProps={{ client: queryClient }}
+      baseUrl="http://localhost:9000"
+    >
+      <Component {...pageProps} />
+    </MedusaProvider>
+  )
+}
+
diff --git a/storefront/pages/index.js b/storefront/pages/index.js
new file mode 100644
index 0000000..fa4a592
--- /dev/null
+++ b/storefront/pages/index.js
@@ -0,0 +1,26 @@
+import { useProducts } from "medusa-react"
+
+export default function Home() {
+  const { products, isLoading } = useProducts()
+
+  return (
+    <div style={{ padding: "2rem", fontFamily: "sans-serif" }}>
+      <h1>Bienvenue sur la boutique Lucien-sens-bon</h1>
+      {isLoading && <span>Chargement des produits...</span>}
+      
+      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))", gap: "1rem" }}>
+        {products && products.map((product) => (
+          <div key={product.id} style={{ border: "1px solid #ccc", padding: "1rem", borderRadius: "8px" }}>
+            <h3>{product.title}</h3>
+            <p>{product.description}</p>
+          </div>
+        ))}
+      </div>
+      
+      {!isLoading && !products?.length && (
+        <p>Aucun produit trouvé. Connectez-vous à l'admin pour en ajouter !</p>
+      )}
+    </div>
+  )
+}
+