🐚 La Banque des Coquillages — Hailey, Violette & Andreas

Application familiale Physique + Digitale (Site Web + API + Skill Alexa Echo Show) pour gérer les coquillages de Hailey, Violette et Andreas, leurs activités communes du mois, leur tirelire en euros (max 5 € / mois = 10 coquillages) et leur livret d'épargne bloquée avec intérêts mensuels.


📁 Structure du Projet

arrweek/
├── back/                 # API REST Node.js 22 + Express + SQLite (node:sqlite) + Webhook Alexa
│   └── Dockerfile        # Image Docker backend de production (Node 22 Alpine)
├── front/                # Application Web React + Vite + Tailwind CSS
│   ├── Dockerfile        # Image Docker frontend multi-stage (Node 22 + Nginx Alpine)
│   └── nginx.conf        # Configuration Nginx avec reverse proxy (/api/ & /uploads/)
├── skill/                # Skill Alexa officiel
│   ├── interactionModels/ # Modèle d'interaction vocal (fr-FR.json)
│   └── lambda/           # Handler ASK SDK avec écrans APL 1.8 tactiles pour Echo Show
├── docker-compose.yml    # Déploiement Docker complet (backend + frontend + volumes)
└── package.json          # Monorepo npm workspaces

🐳 Déploiement avec Portainer

Grâce à votre dépôt sur git.home.arrondeau.fr, vous pouvez déployer et mettre à jour la stack directement depuis l'interface Portainer :

1. Créer la Stack dans Portainer

  1. Dans Portainer, allez dans Stacks puis cliquez sur + Add stack.
  2. Nommez la stack (ex: coquillages).
  3. Choisissez l'option Repository :
    • Repository URL : https://git.home.arrondeau.fr/<votre-utilisateur>/<votre-depot>.git
    • Repository reference : refs/heads/main
    • Compose path : docker-compose.yml
    • Si votre dépôt Git est privé, activez Authentication et renseignez votre nom d'utilisateur et mot de passe (ou jeton d'accès personnel).
  4. (Optionnel) Activez Automatic updates (polling ou Webhook) pour que Portainer redéploie automatiquement l'application à chaque git push !
  5. Cliquez sur Deploy the stack.

💡 Persistance des données dans Portainer : La stack utilise deux volumes Docker nommés (coquillages_data et coquillages_uploads). Vos données (comptes, tirelire, historique des coquillages, images) sont visibles dans l'onglet Volumes de Portainer et restent 100% préservées lors des mises à jour ou recréations de stack.


🐳 Déploiement en ligne de commande (Docker Compose classique)

# Cloner le dépôt depuis votre git perso
git clone https://git.home.arrondeau.fr/<votre-utilisateur>/<votre-depot>.git
cd <votre-depot>

# Créer les dossiers de persistance
mkdir -p data uploads

# Lancer la stack en arrière-plan
docker compose up -d --build

Services démarrés :

  • coquillages-frontend : port 5180 (sert l'application React et relaie automatiquement /api/ et /uploads/ vers le backend).
  • coquillages-backend : port 4050 (API Node.js + base SQLite persistée dans ./data et images dans ./uploads).

🌐 2. Configuration dans Nginx Proxy Manager (NPM)

Dans l'interface web de votre Nginx Proxy Manager :

Option A (Recommandée — Domaine unique tout-en-un) :

Créez un nouveau Proxy Host :

  1. Domain Names : coquillages.home.arrondeau.fr (ou votre sous-domaine choisi)
  2. Scheme : http
  3. Forward Hostname / IP : IP_DE_VOTRE_SERVEUR_DOCKER (ou le nom du conteneur si NPM est sur le même réseau Docker : coquillages-frontend)
  4. Forward Port : 5180 (ou 80 en interne)
  5. Options recommandées :
    • Block Common Exploits
    • Websockets Support
  6. Onglet SSL :
    • Sélectionnez ou générez un certificat SSL Let's Encrypt
    • Force SSL
    • HTTP/2 Support
    • HSTS Enabled

🎉 Résultat :

  • Application Web : https://coquillages.home.arrondeau.fr
  • API REST : https://coquillages.home.arrondeau.fr/api/...
  • Endpoint Alexa Webhook permanent : https://coquillages.home.arrondeau.fr/api/alexa/webhook (plus besoin de tunnel SSH ou localhost.run !)

🎙️ 3. Configuration de l'Endpoint dans la Console Alexa Developer

Une fois exposé via NPM avec votre certificat HTTPS :

  1. Allez sur la Console Alexa Developer.
  2. Ouvrez votre Skill La Banque des Coquillages.
  3. Dans Endpoint :
    • Sélectionnez HTTPS.
    • Default Region : https://coquillages.home.arrondeau.fr/api/alexa/webhook
    • Sélectionnez l'option de certificat SSL : « My development endpoint has a Certificate from a trusted certificate authority » (Let's Encrypt).
    • Cliquez sur Save Endpoints.
  4. Dans Interaction Model > JSON Editor :

📦 4. Initialisation & Push sur votre Git perso (git.home.arrondeau.fr)

Pour initialiser ce dépôt local et le pousser sur votre instance Git personnelle :

# 1. Initialiser le dépôt git localement
git init

# 2. Ajouter tous les fichiers (le .gitignore protège les node_modules et sqlite)
git add .

# 3. Premier commit
git commit -m "feat: Banque des Coquillages v1.0 avec Docker et support NPM"

# 4. Définir la branche principale
git branch -M main

# 5. Lier votre serveur Git perso
git remote add origin https://git.home.arrondeau.fr/<votre-utilisateur>/<nom-du-depot>.git

# 6. Pousser le code
git push -u origin main

💻 Développement Local (sans Docker)

# Lancer Backend + Frontend simultanément
npm run start:all

# Ou séparément :
npm run dev:back   # Backend sur http://localhost:4050
npm run dev:front  # Frontend Vite sur http://localhost:5180
Description
coquillage maison
Readme 205 KiB
Languages
JavaScript 99.2%
Dockerfile 0.6%
HTML 0.2%