Présentation
ARE Beauty est une marque marocaine de soins du corps construite autour d’un rituel en trois étapes — gommage, sérum et crème — formulé à partir d’extraits et d’huiles de plantes marocaines. Le projet a été réalisé avec MS Signature, qui gérait la relation avec la cliente. J’étais responsable de toute la partie technique : j’ai conçu et développé la plateforme, une boutique Next.js avec son tableau de bord d’administration et une API REST Express, puis je l’ai déployée et je l’héberge.
Le défi
- Une image de marque haut de gamme et éditoriale à restituer dans trois langues, dont l’arabe en lecture de droite à gauche.
- Les habitudes d’achat au Maroc : la plupart des clients paient à la livraison et beaucoup ne veulent pas créer de compte avant de commander.
- Une stratégie marketing fondée sur les influenceurs, où l’équipe devait savoir quel partenaire avait généré quelle commande.
- Une petite équipe qui devait gérer seule produits, coffrets, contenus et commandes, dans chaque langue.
Ce que j’ai réalisé
Boutique trilingue
Une boutique Next.js 15 entièrement localisée en français, anglais et arabe avec next-intl et des URL préfixées par langue. Elle adopte un design éditorial façon magazine (titres à empattements, palette crème, encre, sauge et rose, animations Framer Motion) et propose des fiches produits avec variantes, une page ingrédients, une galerie avant/après, un blog « Journal », un formulaire Pro & Revendeur et une newsletter offrant une réduction sur la première commande.
Commande & livraison
- Un tunnel de commande en trois étapes (adresse, livraison, récapitulatif), avec une commande sans compte dédiée qui enregistre la commande et son adresse sans créer de profil.
- Le paiement à la livraison comme moyen de paiement, avec un modèle de paiement déjà préparé pour la carte bancaire et PayPal.
- Des frais de livraison calculés par zone, pays et ville, et des expéditions transmises à l’API du transporteur Speedaf.
- Des e-mails transactionnels de confirmation, d’expédition et de livraison, générés avec Nodemailer et des modèles EJS.
Espace client
Les clients suivent leurs commandes, gèrent leurs adresses et paramètres, conservent une liste de favoris, aiment et notent les produits et demandent un retour en ligne.
Suivi des influenceurs & des offres
Les codes promo peuvent s’appliquer à tous les produits, aux produits non soldés ou à une sélection, et être attribués à un influenceur. Les coffrets (offres) peuvent porter leur propre code, ce qui permet de relier chaque commande au code et à l’influenceur qui l’ont générée. Des ventes flash limitées dans le temps complètent l’ensemble.
Back-office d’administration
Environ vingt-cinq écrans de gestion couvrant produits, catégories, commandes, retours, remboursements, codes promo, influenceurs, offres, ventes flash, utilisateurs, newsletter, sliders, annonces, bandeau défilant, ingrédients, blocs de contenu, galerie, résultats avant/après, blog, transporteurs et livraison. Il comprend un éditeur de texte riche et des exports Excel. Chaque contenu se traduit dans chaque langue depuis les mêmes écrans.
Architecture & sécurité
- Modèle de données multilingue : presque chaque modèle de contenu Prisma possède une table de traduction associée par langue, ce qui rend possible un back-office en trois langues.
- API modulaire : une API REST Express 5 en TypeScript strict, organisée en 34 modules métier qui suivent tous le même schéma routes, contrôleur, service et validation.
- Authentification : jetons d’accès JWT de courte durée et jeton de rafraîchissement en cookie. Le frontend renouvelle le jeton une seule fois sur une erreur 401 et rejoue la requête, et les requêtes simultanées partagent un seul renouvellement.
- Renforcement : validation Zod sur chaque route, contrôle d’accès par rôle (client / administrateur) avec vérification de propriété, Helmet, liste blanche CORS explicite, limitation de débit globale et renforcée sur l’authentification, et envoi de fichiers limité aux images.
Stack technique & déploiement
- Frontend : Next.js 15 (App Router), React 19, TypeScript, Tailwind CSS v4, modules SCSS, Framer Motion, next-intl.
- Backend : Node.js, Express 5, TypeScript, Prisma, PostgreSQL, Zod, Nodemailer.
- Infrastructure : déploiement sur un VPS Linux derrière Nginx, que j’ai mis en place et que je maintiens.
Résultats
- Une boutique en ligne complète pour la marque, en trois langues, avec des moyens de paiement et de livraison adaptés au marché marocain.
- Un marketing d’influence mesurable commande par commande depuis le back-office.
- Une équipe qui gère seule son catalogue, ses contenus et ses commandes, dans chaque langue.