01
Contexte et problème
Yofeii Délices vend des assaisonnements et des marinades. La marque voulait un site où ses clients découvrent les produits, remplissent un panier et paient en ligne.
Elle avait aussi besoin d'un outil interne, pour ajouter un produit, suivre une commande ou changer une bannière sans passer par un développeur.
02
Mon rôle
J'ai développé le front du site et du back-office. L'API, en Laravel, était développée en parallèle par un développeur backend, avec qui je me coordonnais au fil des livraisons.
- 01Site e-commerce
- 02Back-office
- 03Intégration de l'API
- 04Composants réutilisables
03
Démarche
Sur le site, le client parcourt le catalogue, consulte une fiche produit, remplit son panier et paie avec Stripe. Son panier reste enregistré s'il ferme la page.
Dans le back-office, l'équipe gère les produits, les stocks, les commandes et les clients, et change les bannières de la page d'accueil. Un tableau de bord résume les ventes.
Capture 1 sur 6
04
Choix techniques
Quelques choix m'ont aidée à travailler avec une API qui évoluait en même temps que le front.
- Astro
- React
- TypeScript
- Tailwind CSS
- TanStack Query
- Stripe
- API Laravel
01Un catalogue toujours à jour
Au départ, un produit ajouté dans le back-office n'apparaissait pas sur le site. J'ai fait générer les pages à chaque visite, pour que les produits et les prix soient toujours à jour.
02Les appels à l'API au même endroit
Toutes les requêtes passent par une même fonction. Quand l'API changeait, je n'avais qu'un fichier à modifier.
03Des composants réutilisables
Couleurs, thème clair et sombre, boutons et champs partagés par tous les écrans. Ça m'a permis de refaire le visuel sans réécrire les pages.
04Signaler ce que je remarquais
En testant le paiement, j'ai remarqué deux points à sécuriser côté serveur. Je les ai expliqués par écrit au développeur backend.
05
Résultats
Le site et le back-office sont en ligne. L'équipe gère elle-même son catalogue, ses commandes et ses bannières.
- écrans dans le back-office
- 30+
- semaines pour développer le back-office
- 7
06
Ce que j'ai appris
Travailler avec une API qui change demande de l'organisation : regrouper les appels au même endroit m'a évité beaucoup de corrections.
J'aurais dû écrire des tests dès le début, surtout pour un outil lié aux paiements. Je le ferai sur mon prochain projet.
