build: init webapp project with React + Vite and shadcn/ui

.gitignore

@@ -205,3 +205,4 @@ cython_debug/
 marimo/_static/
 marimo/_lsp/
 __marimo__/
+.idea/**

webapp/.dockerignore

@@ -0,0 +1,8 @@
+node_modules
+dist
+.git
+*.md
+.gitignore
+.prettierrc
+.prettierignore
+eslint.config.js

webapp/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

webapp/.mcp.json

@@ -0,0 +1,11 @@
+{
+  "mcpServers": {
+    "shadcn": {
+      "command": "npx",
+      "args": [
+        "shadcn@latest",
+        "mcp"
+      ]
+    }
+  }
+}

webapp/.prettierignore

@@ -0,0 +1,7 @@
+node_modules/
+coverage/
+.pnpm-store/
+pnpm-lock.yaml
+package-lock.json
+pnpm-lock.yaml
+yarn.lock

webapp/.prettierrc

@@ -0,0 +1,11 @@
+{
+  "endOfLine": "lf",
+  "semi": false,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "printWidth": 80,
+  "plugins": ["prettier-plugin-tailwindcss"],
+  "tailwindStylesheet": "src/index.css",
+  "tailwindFunctions": ["cn", "cva"]
+}

webapp/Justfile

@@ -0,0 +1,35 @@
+default:
+    just --list
+
+up ENV:
+    #!/bin/bash
+    if [ "{{ENV}}" = "dev" ]; then
+        docker compose -f compose.dev.yml up --detach
+    elif [ "{{ENV}}" = "prod" ]; then
+        docker compose -f compose.prod.yml up --detach --build
+    else
+        echo "{{ENV}}: Accepted values are: 'dev', 'prod'." >&2
+        exit 1
+    fi
+
+down ENV:
+    #!/bin/bash
+    if [ "{{ENV}}" = "dev" ]; then
+        docker compose -f compose.dev.yml down
+    elif [ "{{ENV}}" = "prod" ]; then
+        docker compose -f compose.prod.yml down
+    else
+        echo "{{ENV}}: Accepted values are: 'dev', 'prod'." >&2
+        exit 1
+    fi
+
+logs ENV:
+    #!/bin/bash
+    if [ "{{ENV}}" = "dev" ]; then
+        docker compose -f compose.dev.yml logs --follow
+    elif [ "{{ENV}}" = "prod" ]; then
+        docker compose -f compose.prod.yml logs --follow
+    else
+        echo "{{ENV}}: Accepted values are: 'dev', 'prod'." >&2
+        exit 1
+    fi

webapp/README.md

@@ -0,0 +1,21 @@
+# React + TypeScript + Vite + shadcn/ui
+
+This is a template for a new Vite project with React, TypeScript, and shadcn/ui.
+
+## Adding components
+
+To add components to your app, run the following command:
+
+```bash
+npx shadcn@latest add button
+```
+
+This will place the ui components in the `src/components` directory.
+
+## Using components
+
+To use the components in your app, import them as follows:
+
+```tsx
+import { Button } from "@/components/ui/button"
+```

webapp/components.json

@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "radix-nova",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/index.css",
+    "baseColor": "stone",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "rtl": false,
+  "menuColor": "default",
+  "menuAccent": "subtle",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {
+    "@mapcn": "https://mapcn.dev/r/{name}.json"
+  }
+}

webapp/compose.dev.yml

@@ -0,0 +1,17 @@
+services:
+  webapp:
+    build:
+      context: .
+      dockerfile: docker/dev/Dockerfile
+    container_name: homepedia-webapp-dev
+    ports:
+      - "5173:5173"
+    volumes:
+      - .:/app
+      # Préserver les node_modules du container (évite l'écrasement par le bind mount)
+      - /app/node_modules
+    environment:
+      - NODE_ENV=development
+      # Variables Vite à définir si nécessaire :
+      # - VITE_MAPBOX_TOKEN=your_token_here
+    restart: unless-stopped

webapp/compose.prod.yml

@@ -0,0 +1,12 @@
+services:
+  webapp:
+    build:
+      context: .
+      dockerfile: docker/prod/Dockerfile
+      # Décommenter pour passer les variables au build Vite :
+      # args:
+      #   VITE_MAPBOX_TOKEN: ${VITE_MAPBOX_TOKEN}
+    container_name: homepedia-webapp-prod
+    ports:
+      - "80:80"
+    restart: unless-stopped

webapp/docker/dev/Dockerfile

@@ -0,0 +1,12 @@
+FROM node:22-alpine
+
+WORKDIR /app
+
+# Installer les dépendances en premier pour tirer parti du cache Docker
+COPY package*.json ./
+RUN npm ci
+
+# Le code source est monté via bind mount en dev
+EXPOSE 5173
+
+CMD ["npm", "run", "dev", "--", "--host", "0.0.0.0"]

webapp/docker/prod/Dockerfile

@@ -0,0 +1,25 @@
+# ─── Stage 1 : Build ────────────────────────────────────────────────────────
+FROM node:22-alpine AS builder
+
+WORKDIR /app
+
+COPY package*.json ./
+RUN npm ci
+
+COPY . .
+
+# Les variables VITE_xxx sont intégrées au build — passer les ARGs nécessaires ici
+# ARG VITE_MAPBOX_TOKEN
+# ENV VITE_MAPBOX_TOKEN=$VITE_MAPBOX_TOKEN
+
+RUN npm run build
+
+# ─── Stage 2 : Serve ─────────────────────────────────────────────────────────
+FROM nginx:alpine
+
+COPY --from=builder /app/dist /usr/share/nginx/html
+COPY docker/prod/nginx.conf /etc/nginx/conf.d/default.conf
+
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]

webapp/docker/prod/nginx.conf

@@ -0,0 +1,28 @@
+server {
+    listen 80;
+    root /usr/share/nginx/html;
+    index index.html;
+
+    # Compression gzip
+    gzip on;
+    gzip_vary on;
+    gzip_min_length 1024;
+    gzip_types text/plain text/css text/xml application/json application/javascript application/xml+rss text/javascript image/svg+xml;
+
+    # SPA routing — renvoie index.html pour les routes inconnues
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+
+    # Cache long terme pour les assets versionnés par Vite
+    location ~* \.(js|css|woff2?|ttf|eot|svg|png|jpg|jpeg|gif|ico|webp)$ {
+        expires 1y;
+        add_header Cache-Control "public, immutable";
+        access_log off;
+    }
+
+    # Pas de cache pour index.html
+    location = /index.html {
+        add_header Cache-Control "no-cache, no-store, must-revalidate";
+    }
+}

webapp/eslint.config.js

@@ -0,0 +1,23 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])

webapp/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>vite-app</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>