GearBox — E-commerce Pièces Détachées

Application complète de gestion et vente de pièces détachées automobiles.

Architecture

Composant	Technologie
Front-office	React 18 + Bootstrap 5
Back-office	Vue 3 + Bootstrap 5
API	Node.js + Express
Base de données	SQLite (sql.js — WASM, zéro compilation native)

Installation

# 1. Installer les dépendances
npm install

# 2. Démarrer le serveur (crée et peuple automatiquement la BDD)
npm start

# 3. Accéder aux interfaces
# Front-office : http://localhost:3000
# Back-office  : http://localhost:3000/admin

Identifiants admin

• Utilisateur : admin
• Mot de passe : admin123

Structure du projet

auto-parts/
├── server.js              ← Serveur Express principal
├── package.json
├── db/
│   ├── init.js            ← Init SQLite + seed (149 pièces, 71 véhicules)
│   └── sqlite-wrapper.js  ← Wrapper sql.js → API compatible better-sqlite3
├── routes/
│   ├── auth.js            ← Authentification JWT
│   ├── categories.js      ← CRUD catégories
│   ├── pieces.js          ← CRUD pièces + filtres + upload image
│   ├── vehicules.js       ← CRUD véhicules
│   ├── compatibilites.js  ← Liaison véhicule ↔ pièce
│   └── orders.js          ← Panier + commandes + stats
├── middleware/
│   └── auth.js            ← Middleware JWT
└── public/
    ├── index.html          ← React SPA (front-office)
    ├── css/style.css       ← Styles front-office
    ├── js/app.jsx          ← App React complète
    ├── images/pieces/      ← Images produits
    └── admin/
        ├── index.html      ← Vue SPA (back-office)
        ├── css/admin.css   ← Styles back-office
        └── js/app.js       ← App Vue complète

API Endpoints

Public

Méthode	URL	Description
GET	/api/categories	Liste des catégories
GET	/api/pieces?categorie=&search=&disponibilite=&vehicule_id=&page=&limit=	Catalogue filtrable
GET	/api/pieces/:id	Détail pièce + prix + véhicules compatibles
GET	/api/vehicules	Liste véhicules
GET	/api/vehicules/marques	Marques distinctes
GET	/api/compatibilites/vehicule/:id	Pièces compatibles pour un véhicule
GET/POST/PUT/DELETE	/api/panier	Gestion du panier (session)
POST	/api/commandes	Créer une commande

Admin (JWT requis)

Méthode	URL	Description
POST	/api/auth/login	Connexion admin
GET	/api/stats	Statistiques dashboard
POST/PUT/DELETE	/api/categories/:id	CRUD catégories
POST/PUT/DELETE	/api/pieces/:id	CRUD pièces (multipart/form-data pour images)
POST/PUT/DELETE	/api/vehicules/:id	CRUD véhicules
POST/DELETE	/api/compatibilites/:id	Gestion compatibilités
GET	/api/commandes	Liste commandes
PUT	/api/commandes/:id	Modifier statut commande

Base de données

6 tables + 2 tables de commandes :

• categorie : 17 catégories de pièces
• piece : 149 pièces avec disponibilité et images
• piece_prix : 150 variantes de prix par qualité
• vehicule : 71 véhicules (6 marques)
• compatibilite : Liaison véhicule ↔ pièce
• panier : Panier par session
• commande + commande_ligne : Commandes clients
• admin : Comptes administrateurs

Personnalisation

• Modifier le port : variable PORT dans .env
• Modifier le secret JWT : variable JWT_SECRET dans .env
• Ajouter des images : placer dans public/images/pieces/