Ups-Batteries

Présentation

Ups-Batteries est un distributeur agréé basé à Casablanca des onduleurs Eaton et des batteries Sunlight, qui vend aussi des stabilisateurs de tension et des prises protégées aux entreprises comme aux particuliers. Le projet a été réalisé avec MS Signature, qui gérait la relation avec le client. J’étais responsable de toute la partie technique : j’ai conçu et développé la boutique, l’espace client, le panneau d’administration et l’API REST qui les alimente, puis j’ai déployé la plateforme et je l’héberge.

Le défi

Un catalogue technique où les clients choisissent selon les caractéristiques (tension, capacité en Ah, puissance en VA/W, technologie de batterie) plutôt que sur photo.
Deux types d’acheteurs : des particuliers qui commandent en ligne et des entreprises qui ont besoin d’un devis pour les équipements plus importants.
Les habitudes de paiement des entreprises marocaines (espèces à la livraison, chèque et virement), avec un paiement par carte à activer une fois les comptes marchands prêts.
Une livraison partout au Maroc avec des tarifs qui dépendent de la ville, et une boutique qui devait être trouvée sur Google pour des recherches comme « onduleur Maroc ».

Ce que j’ai réalisé

Catalogue technique

Des pages marques, catégories et gammes avec un catalogue filtrable et paginé (marque, catégorie, attributs techniques, prix) et un méga-menu.
Un script de maintenance qui lit les intitulés de produits comme « 12V-100Ah » ou « 6kVA 5,4kW » pour compléter les attributs de filtre manquants, en simulation par défaut pour ne rien écraser par erreur.
Des fiches produits avec caractéristiques, fiches techniques et manuels à télécharger, produits associés et souvent achetés ensemble, avis clients et prix « sur devis » pour les équipements vendus sur demande.
Un import du catalogue depuis Excel, pour que l’équipe charge ou mette à jour les produits en masse.

Panier & commande

Un panier invité conservé dans le navigateur et fusionné avec le panier du client après connexion, avec une nouvelle vérification des prix et du stock avant chaque commande.
Un tunnel de commande en trois étapes (adresse avec recherche des villes marocaines, options de livraison tarifées par ville, récapitulatif et paiement) pour les invités comme pour les clients, avec création de compte proposée après une commande invité.
Espèces à la livraison, chèque et virement au moment du paiement, et un formulaire de demande de devis envoyé directement à la boutique.

Paiements, livraison & notifications

Une intégration CMI 3-D Secure côté API : formulaires de paiement signés, retour serveur à serveur qui vérifie l’empreinte, le montant et les appels en double, et journalisation de chaque transaction. Un parcours PayPal avec conversion MAD vers USD est également développé, prêt à être activé dans le tunnel de commande.
Un modèle de livraison indépendant du transporteur : transporteurs, zones et tarifs par ville se gèrent depuis l’administration, ce qui permet à la boutique de changer de partenaire de livraison sans toucher au code.
Des messages de commande et d’expédition via l’API WhatsApp Cloud, en complément des e-mails transactionnels pour les comptes, commandes, retours, remboursements et paniers abandonnés.

Panneau d’administration

Des écrans pour le tableau de bord, les commandes, retours, remboursements, la modération des avis, les produits avec éditeur de texte riche, les catégories, les marques (y compris des remises par marque), les gammes, les fiches techniques, les zones, tarifs et transporteurs de livraison, les sliders, les annonces, les paramètres du site et les utilisateurs, avec un classement par glisser-déposer et des exports Excel.

Architecture & SEO

API modulaire : une API Express 5 en TypeScript avec Prisma et PostgreSQL, découpée en modules métier qui ont chacun leurs routes, contrôleur, service et validation Zod.
Modèle de données multilingue : produits, catégories, marques et contenus du site ont chacun une table de traduction, qui alimente les versions française et anglaise.
Sécurité : jetons d’accès JWT de courte durée et jeton de rafraîchissement en cookie httpOnly, rôles client, client B2B et administrateur, Helmet, liste blanche CORS, limitation de débit et assainissement du HTML.
SEO : balises canonical et hreflang sur chaque page, données structurées JSON-LD pour les produits, fils d’Ariane et FAQ, sitemap généré à partir du catalogue et pages d’atterrissage dédiées aux recherches clés.

Stack technique & déploiement

Frontend : Next.js 16 (App Router), React 19, TypeScript, Tailwind CSS 4, SCSS, next-intl, TanStack Query, Framer Motion.
Backend : Node.js, Express 5, TypeScript, Prisma, PostgreSQL, Zod, Nodemailer.
Infrastructure : l’API tourne derrière Nginx en HTTPS sur un serveur Linux, que j’ai mis en place et que je maintiens.

Résultats

Une boutique complète pour un catalogue technique, où les clients filtrent selon les caractéristiques qui comptent pour eux.
Une seule plateforme pour les commandes en ligne et les devis professionnels, avec les moyens de paiement réellement utilisés par les entreprises marocaines.
Un paiement par carte déjà intégré côté API, prêt à être mis en service dès que le compte marchand le sera.