PortfolioRobinetterie Agnel

Description de l'expérience

Site vitrine conçu pour un professionnel de la robinetterie, avec pour objectif de présenter l'ensemble du catalogue produits de manière claire et structurée, mais sans vente en ligne. L'enjeu principal était de donner au professionnel une autonomie totale sur la gestion de son contenu, sans dépendance technique pour les mises à jour du quotidien. Le site s'articule autour d'une architecture pensée pour faciliter la navigation : une page d'accueil offrant une vue d'ensemble et des accès rapides, des pages par catégorie et par collection pour organiser le catalogue, une page dédiée à chaque produit présentant l'ensemble des informations disponibles (prix, références, dimensions, photos, descriptions, ...) et enfin des pages fournisseurs permettant de valoriser les partenaires. En parallèle du site public, un back office complet a été développé en **Next.js**, permettant au professionnel de gérer en totale autonomie l'ensemble de son catalogue, du produit pur, à la catégorie ou encore aux horaires d'ouverture du professionnel, liens, réseaux sociaux, etc. Les données sont persistées dans **Supabase** et exposées via des **API REST** développées à la main et documentées avec **Swagger**. L'objectif était de livrer un outil suffisamment intuitif pour que le client puisse prendre la main sans formation particulière.

Mots clés

• Front-End
• Backoffice
• Next.JS
• Supabase
• REST
• Vercel
• OVH

Missions et détails

• Réalisation du backofficeDéveloppement

  Le back office a été développé en Next.js, intégré au même projet que le site vitrine sous un espace d'administration dédié. Ce choix permet de mutualiser l'infrastructure tout en conservant une séparation claire entre les interfaces publiques et administratives.

  Les besoins ont été cadrés en amont avec le client afin de cibler précisément les éléments nécessitant une gestion autonome. L'outil offre un tableau de bord centralisant la saisie et l'enregistrement des données, permettant de modifier facilement l'ensemble des informations du catalogue : produits, collections, fournisseurs, prix, photos, références, dimensions, ... L'objectif était de livrer une interface intuitive et complète, donnant au professionnel une maîtrise totale de son contenu sans dépendance technique.

  La persistance des données repose sur Supabase, retenu pour sa robustesse, sa compatibilité SQL et la flexibilité qu'il offre pour des évolutions futures. Le stockage des images est également géré via Supabase Storage. L'ensemble des opérations passe par des API REST développées à la main, entièrement documentées via Swagger, garantissant une interface claire et maintenable entre le front et la base de données.

  Les mises à jour du site sont déclenchées automatiquement via des webhooks connectés aux événements de la base de données : toute modification depuis le back office propage un signal qui déclenche une revalidation côté site, sans intervention manuelle. Un historique des actions est conservé grâce à un cron qui purge automatiquement les entrées de plus de 6 mois, maintenant ainsi un journal exploitable sans accumulation de données obsolètes.

  Une interface de supervision intégrée au back office permet de visualiser en temps réel la consommation mémoire de l'instance, offrant une visibilité opérationnelle directe sans outil tiers.

  L'application est hébergée sur Vercel avec un domaine chez OVH.

  • Backoffice
  • Next.js
  • Supabase
  • REST
  • Swagger
  • Webhooks
  • Cron
  • Vercel
  • Autonomie
  • OVH
• Réalisation du site webDéveloppement

  Le site a été pensé et conçu en collaboration avec le client, de la structure des pages à l'organisation de la navigation, afin de coller au plus près de ses besoins et de son activité.

  L'ensemble du contenu est dynamique, piloté directement par les données saisies via le back office : l'affichage des produits, des collections et des fournisseurs, mais aussi la navigation elle-même, qui s'adapte en temps réel aux éléments disponibles. Le site consomme les API REST maison pour récupérer les données stockées dans Supabase, images comprises via Supabase Storage. Les pages sont automatiquement revalidées grâce à des webhooks déclenchés par les événements base de données, garantissant que le contenu affiché reflète toujours fidèlement ce qui a été saisi dans le back office.

  Next.js a été retenu pour ses capacités de rendu côté serveur (SSR), garantissant un affichage rapide et une bonne indexation des pages pour le référencement naturel. Une stratégie de cache navigateur d'une heure a été mise en place à partir du chargement de la page, un équilibre pensé pour allier performance et fraîcheur des données : les modifications apportées depuis le back office sont prises en compte sans nécessiter de réinitialisation des instances, tout en bénéficiant d'un affichage rapide géré côté serveur.

  Comme son backoffice, le site est hébergé chez Vercel.

  • Site vitrine
  • Next.js
  • SSR
  • Dynamique
  • Supabase
  • REST
  • Vercel

Avis client