Étude de cas · Poissonnerie & Click & Collect

La Marée Malouine : du catalogue au retrait en boutique

Permettre aux clients de préparer leur commande depuis leur téléphone, tout en donnant au commerçant la main sur son activité : j’ai conçu un site vitrine et une application Click & Collect pour La Marée Malouine.

  • Click & Collect
  • React
  • TanStack Start
  • PostgreSQL
  • Brevo
Parlons de votre projet

Le besoin : vendre en ligne, encaisser sur place

La poissonnerie souhaitait présenter ses arrivages, mettre en avant ses promotions et recevoir des commandes sur des créneaux de retrait définis. Le parcours devait rester simple sur mobile et le commerçant devait pouvoir faire évoluer son catalogue au quotidien, sans intervention technique.

  • Consultation des produits et réservation depuis un téléphone.
  • Choix d’un créneau avec une capacité adaptée à la préparation.
  • Paiement au retrait et montant estimatif pour les produits vendus au poids.

Un parcours client jusqu’au retrait

Le visiteur parcourt les catégories, consulte une fiche produit et compose sa sélection. Il renseigne ses coordonnées, choisit un créneau disponible puis reçoit une référence de commande. Le commerçant accepte ou refuse la demande, et peut prévenir le client lorsque la préparation est prête.

  • Catalogue filtrable et promotions visibles sur les produits concernés.
  • Récapitulatif des quantités, des tarifs et du lieu de retrait.
  • Emails de réception, d’acceptation, de refus ou de commande prête selon son avancement.

Un espace commerçant pour le quotidien

L’administration rassemble les opérations courantes dans un espace protégé. Le commerçant ajuste sa sélection selon les arrivages, organise les retraits et suit les demandes dans la même interface.

  • Création et modification des produits, photos, stocks, prix et disponibilités.
  • Promotions datées et génération de créneaux récurrents avec capacité maximale.
  • Suivi des commandes, recherche et filtres par statut.
  • Messages clients, réponses depuis l’interface, coordonnées et horaires modifiables.

Des commandes cohérentes, même en cas de reprise

La validation d’une commande recalcule les prix et promotions côté serveur, puis contrôle les stocks et la capacité du créneau dans une transaction PostgreSQL. Un identifiant de soumission permet de reprendre une demande sans créer une seconde commande.

  • Contrôles de disponibilité au moment de la validation.
  • Notifications enregistrées avec la commande, puis envoyées en arrière-plan via Brevo.
  • Nouvelle tentative en cas d’échec d’envoi et suivi consultable par le commerçant.

Une architecture structurée et des pages indexables

React, TypeScript et TanStack Start assurent l’interface et le rendu serveur. Les routes composent les pages ; les services portent les règles métier ; les modules d’accès aux données utilisent Drizzle ORM et PostgreSQL. Cette séparation permet de faire évoluer les parcours et la gestion sans mêler affichage et persistance.

  • Tailwind CSS pour une interface adaptée au mobile et au bureau.
  • Métadonnées, URL canoniques, sitemap et données structurées pour les pages publiques.
  • Authentification de l’administration, validation serveur et protection anti-robot des formulaires.
  • Application conteneurisée avec Docker pour le déploiement sur VPS.

Une réalisation accompagnée jusqu’à la prise en main

Le site est en ligne et les outils de gestion permettent au commerçant d’alimenter son catalogue et d’organiser ses retraits. Un guide de prise en main documente les opérations courantes. Le projet comprend aussi un historique des actions, un export de sauvegarde et une procédure de restauration réservée à l’exploitant.

  • Tests des règles de commande et des scénarios de concurrence en base.
  • Vérifications des réponses aux messages, de la sécurité et de la restauration.
  • Transmission d’un guide commerçant pour l’utilisation au quotidien.

Voir le site

Pour aller plus loin

Commençons par votre besoin.

Votre objectif, votre échéance, les outils que vous utilisez : quelques lignes suffisent pour engager la discussion.

Décrire mon projet