Benn59 — Boutique e-commerce

Projet de boutique en ligne « Benn59 ». Deux parties cohabitent dans ce dépôt :

• backend/ : API REST Node.js (Express) + base de données SQLite.
• frontend/ : boutiques publiques en HTML / CSS / JavaScript pur (sans framework), plus un back-office d'administration connecté à l'API.

---

1. Stack technique

Couche	Technologie
Langage	JavaScript (CommonJS côté serveur, modules ES6 côté navigateur)
Serveur HTTP	Express ^5
Base de données	SQLite via better-sqlite3 (base fichier backend/database.sqlite)
Front public	HTML + CSS + JS vanilla (aucun framework)
Carrousels	Glide.js (CDN)
Icones	Bootstrap Icons (CDN)
Back-office	admin.html + js/admin.js (pure JS, appels fetch à l'API)

Registre d'accès : GitHub classique (node_modules est versionné dans le repo).

---

2. Structure du projet

ben-56/
├── README.md              ← ce fichier
├── backend/
│   ├── index.js           ← point d'entrée réel (le serveur complet)
│   ├── server.js          ← fichier vide (inutilisé, à supprimer)
│   ├── package.json       ← scripts/dépendances (start = node index.js)
│   ├── database.sqlite    ← base de données (créée + seed au démarrage)
│   └── node_modules/
└── frontend/
    ├── index.html, shop.html, single-product.html, cart.html,
    │   checkout.html, account.html, admin.html, blog.html,
    │   blog-detail.html, single-blog.html, contact.html,
    │   about.html, coupons.html, forgotpassword.html,
    │   product-detail.html
    ├── css/
    │   ├── main.css, base.css, admin.css
    │   ├── layout/ (header.css, footer.css)
    │   ├── components/ (slider, product-item, modal-search, …)
    │   ├── pages/ (home, contact, cart, blog, account)
    │   └── single-products/ (breadcrumb, gallery, info, tabs)
    ├── js/
    │   ├── main.js, header.js, product.js, search.js, cart.js,
    │   │   admin.js, slider.js, glide.js, single-product.js
    │   ├── data.json        ← <-- produits affichés côté public (source de vérité du front)
    │   └── single-product/  (tabs, colors, comments, zoom, thumbsActive, values)
    └── img/  (produits, catégories, marques, blogs, slider, avatars…)

---

3. Comment démarrer

Le serveur Express sert aussi les pages front (statique + route racine). Une seule commande suffit :

cd backend
npm install     # la 1ère fois seulement
npm start       # = node index.js

Puis ouvrir : http://localhost:3000

• Boutique publique : http://localhost:3000/
• Back-office : http://localhost:3000/admin.html

Variables d'environnement optionnelles (il n'y a aucun fichier .env actuellement) :

Variable	Rôle	Défaut
PORT	Port du serveur	3000
ADMIN_EMAIL	Email de l'admin principal	``
ADMIN_PASSWORD	Mot de passe de l'admin principal	``
FRONTEND_ORIGIN	En-tête CORS Access-Control-Allow-Origin	*

---

4. Backend (backend/index.js)

4.1 Principe

Express + SQLite. Au démarrage le serveur :

1. crée les tables si elles n'existent pas (CREATE TABLE IF NOT EXISTS …),
2. ajoute des colonnes manquantes (ensureColumn) pour les users,
3. exécute seedDatabase() : insère les données de démonstration et le compte admin par défaut.

4.2 Tables SQLite

Table	Contenu
users	Clients (nom, email, statut, date de création)
admins	Comptes administrateurs (mot de passe haché)
admin_sessions	Sessions admin (token haché, expiration 8 h)
suppliers	Fournisseurs
products	Produits (prix, stock, seuil d'alerte low_stock_threshold, view_count, fournisseur)
orders	Commandes (total, statut, client)
coupons	Codes promo (réduction %, expiration, limite d'usage)
announcements	Annonce en bandeau (une seule ligne, id = 1)
blog_posts	Articles de blog
reviews	Avis clients (statuts : pending, approved, rejected)
cart_sessions	Paniers abandonnés / convertis (statistiques)
newsletter_campaigns	Campagnes email (brouillon / programmée)
store_settings	Paramètres boutique (une seule ligne, id = 1)
page_seo	Title / description / keywords par page

4.3 Sécurité

• Mots de passe hachés avec scrypt (sel aléatoire 16 octets + hash 64 octets, format sel:hash).
• Tokens de session (48 octets base64url) stockés hachés en SHA-256, expiration 8 h.
• Sessions vérifiées via Authorization: Bearer <token>.
• requirePermission(scope) interdit l'accès selon le rôle (403) et contrôle la session (401).

4.4 Rôles & permissions

Rôle	Permissions
super_admin	tout (['*'])
catalog_manager	tableau de bord, produits, inventaire
orders_manager	tableau de bord, commandes
marketing_manager	tableau de bord, marketing, contenu, SEO
support_manager	tableau de bord, clients, avis

4.5 Compte par défaut (seed)

Email    : 
Mot de passe : 

⚠️ À changer avant toute mise en production !

4.6 Routes API

Endpoints publics (vitrine, sans authentification)

• GET /api/products → produits formatés pour la vitrine (id, name, price.oldPrice/newPrice, discount, stock, img.singleImage/thumbs)
• GET /api/products/:id → un produit
• POST /api/products/:id/view → incrémente le compteur de vues
• GET /api/blog-posts (+ /api/blog-posts/:id) → articles publiés
• GET /api/announcement → l'annonce active (bandeau haut de page)
• GET /api/settings → paramètres boutique
• GET /api/reviews?product_id= → avis approuvés

Authentification

• POST /api/auth/login → renvoie { token, expiresAt, admin }
• POST /api/auth/logout
• GET /api/admin/session → admin actuel

Administration (toutes protégées par rôle)

• Tableau de bord : GET /api/admin/dashboard, GET /api/admin/analytics
• Clients : GET /api/admin/users, PATCH /api/admin/users/:id
• Produits : GET|POST /api/admin/products, PATCH|DELETE /api/admin/products/:id
• Commandes : GET /api/admin/orders, PATCH /api/admin/orders/:id
• Codes promo : GET|POST /api/admin/coupons, DELETE /api/admin/coupons/:id
• Annonce : GET /api/admin/announcement, PUT /api/admin/announcement
• Articles : GET|POST /api/admin/blog-posts, DELETE /api/admin/blog-posts/:id
• Avis : GET /api/admin/reviews, PATCH /api/admin/reviews/:id, DELETE /api/admin/reviews/:id
• Fournisseurs : GET|POST /api/admin/suppliers, DELETE /api/admin/suppliers/:id
• Paramètres : GET /api/admin/settings, PUT /api/admin/settings
• Marketing : GET|POST /api/admin/campaigns, DELETE /api/admin/campaigns/:id
• Équipe : GET|POST /api/admin/admins, PATCH /api/admin/admins/:id (réservé super_admin)
• SEO : GET /api/admin/seo, PUT /api/admin/seo/:pageKey

---

5. Frontend public (sans framework)

5.1 D'où viennent les produits affichés ?

Depuis le branchement sur l'API, main.js :

1. fetch("/api/products") → les produits viennent de la base SQLite gérée par l'admin,
2. s'il échoue (serveur arrêté), repli automatique sur frontend/js/data.json,
3. stocke le tableau dans localStorage["products"],
4. lance le rendu (product.js), la recherche (search.js) et le header (header.js).

main.js charge aussi et affiche :

• le bandeau d'annonce (.global-notification) depuis /api/announcement,
• la liste des articles de blog (.blog-list) depuis /api/blog-posts (si des articles existent).

Le panier reste en localStorage (voir 5.2) ; la fiche produit (single-product.js) cherche d'abord dans localStorage["products"], sinon interroge /api/products/:id, et incrémente le compteur de vues.

5.1bis Données du produit côté vitrine

Le format attendu par la vitrine est imposé par les modèles (data.json / réponse API) :

{
  "id": 1,
  "name": "Bracelet en résine analogique",
  "price": { "oldPrice": 165, "newPrice": 108 },
  "discount": 22,
  "stock": 45,
  "img": { "singleImage": "img/products/product1/1.png", "thumbs": [".../1.png", ".../2.png", ".../3.png"] }
}

Dans l'admin, l'ancien prix et la galerie d'images (séparées par des virgules) sont modifiables : s'ils sont absents, l'API calcule pas de réduction et utilise l'image principale.

5.2 Le panier (localStorage)

Le panier n'est pas géré côté serveur pour la boutique publique :

• Stocké dans localStorage["cart"] (tableau de produits avec quantity).
• Le compteur .header-cart-count affiche le nombre d'articles.
• product.js (addToCart) câble les boutons .add-to-cart, met le bouton en disabled si le produit est déjà au panier.
• cart.js affiche le panier, permet de supprimer, calcule sous-total / total, et une option « expédition rapide » à 15 $.
• single-product.js affiche la fiche produit à partir de localStorage["productId"] et localStorage["products"].

5.3 Fiche produit

single-product.html est une page unique générique : tout dépend de l'id stocké. Le module single-product.js alimente : titre, prix, image principale, vignettes (glide + gestion de l'image active), et le bouton « ajouter au panier » avec quantité. Modules annexes : tabs.js (onglets description/avis), comments.js (envoyer un avis), colors.js, values.js, zoom.js (zoom image), thumbsActive.js.

5.4 Recherche

search.js : filtre les produits par nom au fil de la saisie dans la modale de recherche, et redirige vers la fiche produit (single-product.html).

5.5 Slider / carrousels

• slider.js : slider d'accueil (bannières).
• glide.js : 3 configurations Glide.js (product1 : 4 vues, product2 : 3 vues, product3 : vignettes 5 vues).

5.6 CSS

Organisation par couches :

• main.css (regroupe les imports), base.css,
• layout/ (header, footer),
• components/ (produits, sliders, modales, catégories, campagnes, marques, blogs…),
• pages/ (home, contact, cart, blog, account),
• single-products/ (breadcrumb, galerie, infos, onglets),
• admin.css (back-office).

---

6. Back-office (frontend/admin.html + js/admin.js)

Écran unique en pur JavaScript (pas de framework) qui gère tout :

• Connexion/déconnexion via l'API (/api/auth/login, logout), token conservé en sessionStorage["adminToken"].
• Un menu latéral bascule entre 13 panneaux : Tableau de bord (stats + graphique de ventes sur 6 mois, top produits, paniers abandonnés), Clients, Produits, Inventaire (alerte stock faible), Commandes, Avis, Codes promo, Marketing (campagnes + abonnés), Annonces, Articles, SEO, Paramètres, Équipe & droits.
• Toutes les mutations passent par l'API d'administration (CRUD produit, statut commande, modération des avis, création de codes promo, article de blog, campagne, fournisseur, admin, réglages boutique, SEO).
• HTML échappé (escapeHtml) avant injection, dates et montants formatés en fr-FR.

---

7. Points à corriger / à discuter ensemble

J'ai relevé pendant l'analyse quelques incohérences à traiter quand on travaillera dessus :

1. Sources de données alignées. La vitrine lit désormais l'API (/api/products) donc les produits créés/modifiés dans l'admin apparaissent sur le site. data.json ne sert plus que de secours hors serveur. Les noms de produits seedés sont encore en anglais (« Analogue Resin Strap »…) : à renommer en français quand tu veux.
2. Le panier vitrine ne crée pas encore de commande en base. On peut brancher checkout.html ou cart.html sur un futur endpoint POST /api/orders.
3. Pages ou feuilles CSS potentiellement manquantes/incorrectes :
   • account.html → css/account.css (le fichier est css/pages/account.css),
   • coupons.html → css/coupons.css (introuvable),
   • contact.html → /frontend/css/main.css (chemin absolu, peut casser si servi depuis un autre sous-chemin).
4. blog-detail.html est vide ; la liste du blog pointe vers single-blog.html?id=N qui reste un template statique (à brancher si on veut afficher le contenu des articles). product-detail.html, coupons.html, forgotpassword.html sont aussi des templates non câblés.
5. server.js est le point d'entrée (démarre le serveur HTTP) ; index.js construit l'app + la base et l'exporte. OK, rien à faire.
6. data.json → search.js : message turc « Aradığınız Ürün Bulunamadı » (produit introuvable) dans la recherche ; discount douteux dans les données de secours.
7. node_modules est commité dans git (initial commit) — en général on l'exclut (.gitignore).

---

8. Note de collaboration

Ce README est notre référence commune (moi = l'assistant de dev, toi = développeur). On s'appuiera dessus pour :

• retrouver rapidement l'architecture et les responsabilités de chaque fichier,
• décider ensemble des corrections (section 7),
• rendre le projet cohérent : une seule base de données pour la vitrine et l'admin, un panier/commande réellement branché sur l'API, etc.

Quand on modifie le projet, on mettra ce fichier à jour au fil de l'eau.