Hecto

Projet d'entraînement, client fictif, jamais mis en ligne.

Le logo de Hecto : le mot HECT en jaune lumineux suivi d'un O formé de deux anneaux, violet et orange, sur fond nuit.

Site vitrine et espace de gestion pour une brasserie, 2026. J'ai cadré, dirigé, testé et fait construire le projet par une équipe d'agents Claude Code pilotés dans cmux, un agent par rôle, de la stratégie à la livraison. HTML, CSS et JavaScript sans framework, Supabase, Cloudflare Pages. Projet réalisé par Clément Gosselin, Product Builder no-code et IA à Ynov Bordeaux.

Le projet

Le site. Une brasserie et bar à bières, avec sa vitrine en français et en anglais : accueil, carte des bières à la tireuse, événements, privatisation de la salle, la brasserie, infos pratiques. Elle charge vite et se lit même sans JavaScript. J'ai défini l'arborescence, la charte et les maquettes avant de faire construire les pages.

La gestion. Un espace pensé pour un gérant qui n'a pas le temps, d'abord sur téléphone : il change une bière quand un fût est vide, ajoute un événement, règle ses horaires, remplace une photo et répond aux demandes de privatisation. Il vérifie l'aperçu, puis appuie sur Mettre en ligne. La base garde le contenu et l'historique des versions, avec un retour en arrière possible. Les mêmes règles de validation s'appliquent côté site, côté gestion et côté base : une erreur de saisie ne casse jamais une page. Chaque rôle, du design à la recette, avait son agent, et c'est moi qui testais le résultat.

La page Carte du site de Hecto sur ordinateur : le titre La carte à la tireuse, trois étiquettes inclinées, dont 15 tireuses, et le début de la liste des bières avec leurs prix.
La carte, avec les trois étiquettes de la charte.
La page Événements du site de Hecto sur téléphone : le titre Événements sur fond nuit, la tuile orange Quiz, DJ sets, jeux de société, le bouton Voir l'agenda, puis le début de l'agenda À venir.
Événements
La page Carte du site de Hecto sur téléphone : le titre La carte à la tireuse et la liste des bières avec leurs prix.
La carte
La page Privatiser du site de Hecto sur téléphone : le titre La salle sur une étiquette orange, le bouton Faire une demande, et l'étiquette jaune 15 tireuses pour la bande posée sur un aplat indigo.
Privatiser la salle
L'accueil de l'espace de gestion de Hecto sur téléphone : quatre grosses actions (ajouter un événement, changer une bière, fermer exceptionnellement, remplacer une photo), la rubrique En ce moment sur le site et la liste À faire.
Accueil : ce qu'il y a à faire aujourd'hui.
L'écran Événements de l'espace de gestion de Hecto sur téléphone : la liste des soirées à venir avec leur date et un bouton pour en ajouter une.
Événements : ajouter, modifier, retirer.
L'écran Carte de l'espace de gestion de Hecto sur téléphone : la liste des bières avec leur prix et un interrupteur pour les retirer quand le fût est vide.
Carte : une bière change en deux touches.
L'écran Demandes de l'espace de gestion de Hecto sur téléphone : un champ de recherche, trois filtres Nouvelles, Traitées et Archivées, et deux demandes dont les noms et les dates sont masqués par des aplats.
Demandes : nouvelles, traitées, archivées.
L'espace de gestion de Hecto sur ordinateur : une barre latérale indigo avec les rubriques à gauche et, à droite, un écran de gestion avec la liste de la carte.
Sur ordinateur, la même gestion avec la barre latérale.

Le gérant touche une bière, appuie sur Mettre en ligne, et le site suit tout seul, sans développeur.