Étude de cas

GESTION DE STOCK

Une application web de gestion de stock et de ventes pour un petit commerce : catalogue, réceptions fournisseurs, ventes, retours clients et inventaires, avec les montants en FCFA.

RôleConception et développement complets
StackReact, TypeScript, Node.js, Express, PostgreSQL
ContexteProjet personnel, démo avec données fictives

Sur la page de connexion, le bouton « Explorer la démo » ouvre l'application en lecture seule. L'API est hébergée sur un plan gratuit : le premier chargement peut prendre jusqu'à une minute.

Tableau de bord de Gestion de Stock : produits actifs, ruptures, stocks faibles et activité des 7 derniers jours

LE DÉFI

Un petit commerce a besoin de savoir, à tout moment, ce qu'il a en stock, ce que lui coûte chaque produit et ce qui se vend. Le piège classique est un stock affiché qui ne correspond plus à la réalité.

Mon objectif : une application où le stock affiché est toujours égal à la somme des mouvements enregistrés, même avec des unités multiples comme la bouteille, le carton de 12 ou le sac de 25 kg.

CE QUE FAIT L'APPLICATION

  • Catalogue avec plusieurs unités par produit et facteurs de conversion (bouteille, carton de 12, sac de 25 kg).
  • Grille de prix par type de client et par unité de vente, en FCFA entiers.
  • Réceptions fournisseurs : le stock entre à la validation et le coût moyen pondéré est recalculé.
  • Ventes et retours clients, avec le coût conservé au moment de la vente pour calculer les marges.
  • Inventaire : stock d'ouverture, ajustements (casse, péremption), comptages et annulation d'opérations.
  • Tableau de bord : ruptures, stocks faibles et activité des 7 derniers jours.

DÉCISIONS TECHNIQUES

Le stock repose sur un journal de mouvements

Chaque opération (réception, vente, retour, ajustement) écrit ses lignes et ses mouvements dans une seule transaction PostgreSQL, puis met à jour le stock courant et le coût moyen. Le stock affiché correspond donc toujours à la somme des mouvements.

Les conversions d'unités vivent dans la base

Chaque ligne stocke la quantité saisie et son facteur. La quantité en unité de base est une colonne calculée par PostgreSQL : impossible de la faire diverger de la saisie.

Le mode démo est appliqué côté serveur

Le rôle DEMO est contenu dans le jeton, et un seul middleware refuse toute requête d'écriture (403 DEMO_READ_ONLY). Masquer des boutons dans l'interface ne suffirait pas à protéger la démo.

Pas de CORS à configurer

Le navigateur ne parle qu'à Vercel, qui réécrit /api/* vers l'API hébergée sur Render. Moins de configuration, moins de surface d'erreur.

APERÇU

ARCHITECTURE

  1. 01NavigateurNe parle qu'à Vercel, en HTTPS.
  2. 02VercelReact 19 et Vite. Réécrit /api/* vers l'API.
  3. 03RenderAPI Express 5, jetons JWT, limitation des requêtes.
  4. 04NeonPostgreSQL 16, migrations SQL versionnées.

QUALITÉ ET DÉPLOIEMENT

  • Tests automatisés : Jest et Supertest côté API, Vitest et Testing Library côté interface.
  • ESLint, Prettier et Oxlint pour garder un code homogène.
  • CI GitHub Actions : audit des dépendances, base PostgreSQL de test, lint, build et tests à chaque push.
  • Déploiement automatique sur Vercel et Render à chaque push.
  • Sécurité de base : mots de passe hachés avec bcrypt, en-têtes helmet, limitation des tentatives de connexion, secrets uniquement dans l'environnement.

Suite

UN PROJET
À DISCUTER ?