This commit is contained in:
2026-01-18 12:23:01 +01:00
parent ef3d0ed970
commit bb1263edb8
86 changed files with 90289 additions and 0 deletions

View File

@@ -0,0 +1,19 @@
{
"ui": {
"theme": "gruvbox_vintage_dark",
"button_mode": "text/icon",
"columns_desktop": 3,
"card_density": "comfortable",
"show_fields": {
"price": true,
"stock": true,
"ratings": true,
"badges": true
},
"refresh_auto_seconds": 300
},
"versions": {
"frontend": "0.1.0",
"backend_expected": "0.1.0"
}
}

22
frontend/package.json Normal file
View File

@@ -0,0 +1,22 @@
{
"name": "suivi_produit_frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.3.1",
"react-dom": "^18.3.1",
"chart.js": "^4.4.0",
"zustand": "^4.4.0",
"@fortawesome/fontawesome-free": "^7.2.0"
},
"devDependencies": {
"vite": "^5.1.3",
"@vitejs/plugin-react": "^4.0.0",
"sass": "^2.0.0"
}
}

View File

@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>suivi_produits</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>

21
frontend/src/App.jsx Normal file
View File

@@ -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;

View File

@@ -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();
};

View File

@@ -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;

11
frontend/src/main.jsx Normal file
View File

@@ -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 dentrée de linterface React */}
<App />
</React.StrictMode>
);

View File

@@ -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);
}

9
frontend/vite.config.js Normal file
View File

@@ -0,0 +1,9 @@
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
export default defineConfig({
plugins: [react()],
server: {
port: 5173,
},
});