1er
This commit is contained in:
19
frontend/config_frontend.json
Normal file
19
frontend/config_frontend.json
Normal 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
22
frontend/package.json
Normal 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"
|
||||
}
|
||||
}
|
||||
12
frontend/public/index.html
Normal file
12
frontend/public/index.html
Normal 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
21
frontend/src/App.jsx
Normal 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;
|
||||
7
frontend/src/api/client.js
Normal file
7
frontend/src/api/client.js
Normal 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();
|
||||
};
|
||||
14
frontend/src/components/ProductCard.jsx
Normal file
14
frontend/src/components/ProductCard.jsx
Normal 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
11
frontend/src/main.jsx
Normal 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 d’entrée de l’interface React */}
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
);
|
||||
56
frontend/src/styles/global.scss
Normal file
56
frontend/src/styles/global.scss
Normal 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
9
frontend/vite.config.js
Normal file
@@ -0,0 +1,9 @@
|
||||
import { defineConfig } from "vite";
|
||||
import react from "@vitejs/plugin-react";
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
server: {
|
||||
port: 5173,
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user