Reproduire l'expérience apple.com — les scrolls millimétrés, les produits qui tournent en 3D — tout en encaissant par Mobile Money : voilà le pari d'iPhone Cameroon, une boutique Apple pensée pour le marché camerounais. Deux mondes que tout oppose, réconciliés dans un seul monorepo.
Un contrat, zéro duplication
Le piège d'un projet full-stack, c'est de redéclarer trois fois les mêmes types :
côté API, côté formulaire, côté affichage. J'ai centralisé tout ça dans un package
@repo/shared : un schéma Zod qui génère les types inférés, les DTO de l'API
et les resolvers de formulaires. Le front et le back parlent le même langage, et
une modification du contrat casse la compilation partout où il faut — pas en
production.
packages/shared # schémas Zod → types + DTO + formatter XAF
apps/api # NestJS 10 + Prisma + Postgres (JWT argon2)
apps/web # Next.js 15 + React 19 + Tailwind v4
Le panier n'est jamais source de vérité
Règle non négociable en e-commerce : le prix est recalculé côté serveur au checkout. Le panier envoyé par le client sert à connaître quoi, jamais combien. Le stock est décrémenté de façon transactionnelle — pas de survente si deux personnes achètent le dernier iPhone à la même seconde.
Mobile Money, proprement
Le paiement passe par un agrégateur (type Fapshi / Campay) qui expose MTN MoMo
et Orange Money. En local, mode sandbox par défaut : sans clés MOMO_*, tout
est simulé, donc je développe le tunnel de paiement sans dépendre d'un compte
marchand. Le retour du paiement arrive par un webhook POST /api/payments/webhook
dont je vérifie la signature HMAC-SHA256 — sinon n'importe qui pourrait marquer
une commande comme payée.
Le showroom : GSAP, Lenis, React Three Fiber
Côté vitrine, l'objectif était le « feel » Apple :
- Lenis pour le smooth scroll,
- GSAP (
@gsap/react) pour les timelines et reveals synchronisés au scroll, - React Three Fiber + drei pour les produits en 3D.
Le tout dans l'App Router de Next 15 / React 19, avec un design system Apple (tokens CSS + preset Tailwind v4).
Construire en public, aussi sur la sécurité
Je ne prétends pas que c'est parfait. Le README liste noir sur blanc ce qui reste
à durcir avant prod : rotation des secrets, la référence de commande courte
(IPC-2026-XXXXXX) à renforcer contre l'énumération, le JWT admin à sortir du
localStorage vers un cookie httpOnly. Nommer sa dette technique, c'est déjà la
moitié du travail.
Marque et visuels Apple utilisés à titre de démonstration — revendeur indépendant, non affilié à Apple Inc.
Tu as déjà branché du Mobile Money (MoMo/OM) sur un projet ? Agrégateur ou intégration directe opérateur — qu'est-ce qui t'a le plus surpris ? Raconte.