1er

frontend/src/App.jsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+const App = () => (
+  <div className="app-shell">
+    <header className="app-header">
+      <div className="brand">suivi_produits</div>
+      <div className="actions">
+        <button className="btn">Add Product</button>
+        <button className="btn">Refresh</button>
+      </div>
+    </header>
+    <main className="app-grid">
+      {/* état vide avant ajout de produit */}
+      <section className="empty-state">
+        <p>Aucun produit pour l'instant, ajoutez un lien Amazon.fr !</p>
+      </section>
+    </main>
+  </div>
+);
+
+export default App;

frontend/src/api/client.js

@@ -0,0 +1,7 @@
+const BASE_URL = import.meta.env.VITE_API_URL || "http://localhost:8008";
+
+export const fetchProducts = async () => {
+  // point d'entrée simple vers l'API FastAPI
+  const response = await fetch(`${BASE_URL}/products`);
+  return response.json();
+};

frontend/src/components/ProductCard.jsx

@@ -0,0 +1,14 @@
+import React from "react";
+
+const ProductCard = ({ product }) => (
+  <article className="product-card">
+    {/* vignette produit : image + infos principales */}
+    <div className="product-image" />
+    <div className="product-info">
+      <h3>{product.titre}</h3>
+      <p>Prix actuel : {product.prix_actuel ?? "-"} €</p>
+    </div>
+  </article>
+);
+
+export default ProductCard;

frontend/src/main.jsx

@@ -0,0 +1,11 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import "./styles/global.scss";
+
+ReactDOM.createRoot(document.getElementById("root")).render(
+  <React.StrictMode>
+    {/* point d’entrée de l’interface React */}
+    <App />
+  </React.StrictMode>
+);

frontend/src/styles/global.scss

@@ -0,0 +1,56 @@
+$bg: #282828;
+$text: #ebdbb2;
+$card: #3c3836;
+$accent: #fe8019;
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
+  background: $bg;
+  color: $text;
+}
+
+.app-shell {
+  min-height: 100vh;
+  background: $bg;
+  padding: 16px;
+}
+
+.app-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 16px;
+}
+
+.brand {
+  font-size: 1.5rem;
+  font-weight: 600;
+}
+
+.actions .btn {
+  background: $card;
+  border: none;
+  color: $text;
+  padding: 8px 16px;
+  margin-left: 8px;
+  border-radius: 999px;
+}
+
+.app-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 16px;
+}
+
+.empty-state {
+  background: $card;
+  border-radius: 16px;
+  padding: 32px;
+  text-align: center;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+}