Concept
Boutique en ligne de cup cake, design cake, entremets... proposant deux type de retrait :
- En boulangerie partenaire
- En livraison
Cahier des charges
La cliente souhaiter :
- Pouvoir faire évolué son site au fur et à mesure à l'aide d'un BO simple et intuitif
- Avoir un bon SEO
- Une bonne accessibilité mobile et un site au TTI très faible
Solution
Un site statique réaliser a l'aide de Next JS consommant une API REST généré par Strapi un CMS Headless qui fournis une interface d'administration et qui permet les actions CRUD sur une base de donnée Mongo DB
Les étapes clés :
Création d'une maquette Mobile / PC
En collaboration avec la cliente j'ai élaborer une maquette harmonieuse avec l'image de La Maryse à l'aide d'Adobe XD
Mise en place des environnements
J'ai géré le choix de l'hébergement et la mise en place du serveur ainsi que la configuration d'un nom de domaine pour lequel j'ai générer un certificat SSL, J'ai mis en place un workflow d'intégration continue basé sur git afin de proposer à la cliente une preprod permettant de validé les ajouts au fur est mesure de l'avancement du projet. Le projet étant entièrement Dockerisé j'ai pu aisément déployé deux container de l'application utilisant des variables d'environnement différentes.
Intégration de la maquette
J'ai utilisé framework css Tailwind , les composants Material UI pour les formulaires, react-responsive-carousel pour les diffèrents carrousel, ainsi que react-select
SEO
J'ai :
- Mis en place dans le code toutes les bonnes pratique afin d'optimiser le page ranking
- Rendu dynamique la génération du sitemap en fonction des produits du BO
- Ajouter google Analytics
- Crée un compte business afin d'améliorer le SEO
- Mis en place un Rich Snippet et le balisage Open Graph sur les produits
Gestion des produits
J'ai rendu possible la création de produits avec déclinaisons dans le BO, il est très facile de créé un produit avec 1 ou plusieurs variations tel que, le nombre de part, la couleur, le choix d'un parfum... pour lesquelles le prix varie différemment
Panier
Calcul dynamique du total du panier en fonction de la variante sélectionné multiplier par la quantité souhaité, ce qui permet de crée un panier composé de plusieurs produit identique dont les variantes sont différentes et qui se stack si ils sont identique
Le panier est stocker en local storage
Prise de contact
Création d'un formulaire de contact à destination multiple protégé contre le spam par un captcha Google.
Ajout d'une messagerie instantané lier à une page Facebook
Tunnel de paiement
Une fois un produit ajouté au panier il est possible pour l'utilisateur de procédé au paiement, deux choix s'offre à lui selon la modalité de retrait Une date de retrait est alors demandé, selon le choix du mode de retrait certains jour ne sont pas sélectionnable, pour un retrait en magasin cela dépend des horaire d'ouvertures du magasin ainsi que du calendrier de disponibilité de l'administratrice, D'autre règle métiers s'applique pour la livraison
Le paiement est décomposé en étape pour ne pas décourager un potentiel client, les formulaire sont soumis à validation
La dernière étape de paiement est un résumé des informations panier et client ainsi qu'un formulaire de paiement
J'ai utilisé Stripe comme service de paiement. Les paiements sont crée sur le Backend après vérification de toutes les données du panier envoyé
Notifications
Trois types de notification :
- Mail, pour les clients et l'administratrice
- SMS, pour les rappel de commande aux clients
- Mobile Push pour l'administratrice
J'ai utilisé Mailjet comme service de messagerie pour envoyer aux clients finaux leur facture après commande, ainsi qu'a l'administratrice pour la notifier de chaque nouvelle commande, J'ai également utilise le service SMS de Mailjet afin d'envoyé un rappelle aux clients finaux le jour de la livraison
L'administratrice est également notifier sur mobile en cas de nouveau : message, avis, demande de devis, commande
Gestion des commandes
En cas de remboursement ou une fois la date de retrait dépassée le status de la commande est mis à jour, les commandes contiennent toute les informations nécessaire à l'administratrice pour la livraison, la prise de contact avec le client et concernant, le contenu du panier
Gestion des boulangeries partenaire
J'ai rendu possible l'ajout de boulangerie partenaire dans le BO afin d'alimenter le site dans le futur
Gestion des jours fermer
J'ai mis en place un système de jours-fermer qui rend impossible la prise de commande pour ces jours. Une fois la période de fermeture dépassé, l'entrée est automatiquement supprimer du BO
Gestion de la livraison
Possibilités de renseigner une zone de livraison en dessinant un masque sur une carte et d'exclure certains code postaux. Pour chaque code postale le cout est calculé en fonction de la distance de manière dynamique, le site récupère ainsi une liste parfaitement à jour de villes desservie par le service de livraison
Gestion de la galerie
- Possibilité d'ajouter des photos en BO et des commentaire sur celles ci
Gestion des avis
J'ai mis en place :
- Possibilité de joindre une image à son avis
- Un rating à base d'étoiles
- Un mécanisme qui modifie l'affichage du mot "La Maryse' dans les avis pour le mettre dans la police de la marque
Gestion du thème et des paramètres de configuration
- Possibilité de modifier les couleur primaire, secondaire, dégradé.... depuis le BO
- Possibilité de modifier les photos et les textes du carrousel dans le header
- Possibilité de modifier les titres de chaque section et l'icone associer
- Différents paramètre configurable "Livraison offerte à partir de" "Surcout de livraison en cas de panier inférieur à" "Rebuild le site en production" "Passer la boutique en maintenance" ...
Backups
- Export quotidien de la base de donnée Mongo
- Rotation de backup chaque mois