01
Contexte et problème
Moomen Pro est une application de caisse et de gestion pour les PME : ventes, stocks, clients et reçus.
L'ancien site était daté et ne donnait pas envie de s'inscrire. Le client voulait un site moderne qui présente l'application, affiche les offres et vende ses consommables, comme les imprimantes et les rouleaux de papier.
02
Mon rôle
J'ai conçu et développé les pages du site, puis je les ai reliées à deux API existantes : celle des tarifs et celle de la boutique. J'ai aussi réalisé la vidéo de présentation en vibe motion design.
- 01Design des pages
- 02Intégration des API
- 03Commande sur WhatsApp
- 04Vidéo de présentation
03
Démarche
Les visiteurs sont surtout sur mobile, parfois avec une connexion lente. J'ai donc fait un site léger, en pages statiques, qui s'affichent vite.
Dans la boutique, chaque produit a un bouton qui ouvre WhatsApp avec le produit déjà indiqué : c'est ainsi que les clients ont l'habitude de commander. Les tarifs s'affichent dans la devise du pays.
Capture 1 sur 4
04
Choix techniques
Ce sont surtout des problèmes concrets qui ont guidé mes choix.
- Astro
- Tailwind CSS
- TypeScript
- API REST
01Un affichage cassé seulement en ligne
Le site s'affichait bien sur mon ordinateur, mais pas une fois publié : la version ordinateur ressemblait à la version mobile. J'ai trouvé que l'outil qui compresse le CSS supprimait une partie des styles, et je l'ai désactivé.
02Afficher tout le catalogue
L'API envoyait les produits page par page, mais le site n'affichait que la première. J'ai ajouté une pagination.
03Le bon prix dans la bonne devise
J'ai combiné deux réponses de l'API pour afficher chaque offre dans la monnaie du pays.
04Les bases du référencement et de l'accessibilité
Un titre et une description par page, un plan du site, un lien pour aller directement au contenu, et le respect du réglage qui réduit les animations.
05
Résultats
Le nouveau site est en ligne. Il présente l'application, affiche les offres dans la devise de chaque pays et permet de commander les consommables sur WhatsApp.
- pages au design unifié
- 15
- API intégrées, tarifs et boutique
- 2
06
Ce que j'ai appris
Toujours tester la version publiée, pas seulement celle de développement : le bug d'affichage n'existait qu'une fois le site en ligne.
La prochaine fois, je suivrai les inscriptions et les clics vers WhatsApp, pour savoir si les choix de design fonctionnent.
