feat: Banque des Coquillages v1.0 avec Docker et configuration NPM

front/Dockerfile

@@ -0,0 +1,30 @@
+# Étape 1 : Build de l'application React Vite
+FROM node:22-alpine AS builder
+
+WORKDIR /app
+
+# Copie des configurations de paquets du monorepo
+COPY package.json package-lock.json ./
+COPY front/package.json ./front/
+
+# Installation des dépendances du frontend
+RUN npm install --workspace=front
+
+# Copie du code source frontend
+COPY front ./front
+
+# Construction du bundle statique de production
+RUN npm --workspace=front run build
+
+# Étape 2 : Image Nginx ultra-légère pour servir les fichiers statiques et relayer l'API
+FROM nginx:alpine
+
+# Copie des fichiers statiques générés
+COPY --from=builder /app/front/dist /usr/share/nginx/html
+
+# Configuration Nginx personnalisée avec reverse proxy vers backend:4050
+COPY front/nginx.conf /etc/nginx/conf.d/default.conf
+
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]

front/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="fr">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>🐚 La Banque des Coquillages — Hailey, Violette & Andreas</title>
+  </head>
+  <body class="bg-slate-950 text-slate-100 antialiased selection:bg-amber-400 selection:text-slate-950">
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
+

front/nginx.conf

@@ -0,0 +1,40 @@
+server {
+    listen 80;
+    server_name localhost;
+
+    # Compression gzip
+    gzip on;
+    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript image/svg+xml;
+
+    root /usr/share/nginx/html;
+    index index.html;
+
+    # Relai vers le backend Express pour toutes les requêtes API
+    location /api/ {
+        proxy_pass http://backend:4050/api/;
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection 'upgrade';
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+        proxy_set_header X-Forwarded-Host $host;
+        proxy_cache_bypass $http_upgrade;
+    }
+
+    # Relai vers les images uploadées servies par le backend
+    location /uploads/ {
+        proxy_pass http://backend:4050/uploads/;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+        proxy_set_header X-Forwarded-Host $host;
+    }
+
+    # Application React (Single Page Application - fallback sur index.html)
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+}

front/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "arrweek-front",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite --port 5180",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "lucide-react": "^0.475.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.0.6",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "tailwindcss": "^4.0.6",
+    "vite": "^6.1.0"
+  }
+}
+

front/src/index.css

@@ -0,0 +1,2 @@
+@import "tailwindcss";
+

front/src/main.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App.jsx';
+import './index.css';
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+

front/vite.config.js

@@ -0,0 +1,21 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import tailwindcss from '@tailwindcss/vite';
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  server: {
+    port: 5180,
+    proxy: {
+      '/api': {
+        target: 'http://localhost:4050',
+        changeOrigin: true
+      },
+      '/uploads': {
+        target: 'http://localhost:4050',
+        changeOrigin: true
+      }
+    }
+  }
+});
+