Multimédi'Alpes

BarberClub est une plateforme web complète développée sur-mesure pour deux salons de barbier haut de gamme situés à Grenoble et Meylan. Ce projet a représenté environ un mois de développement intensif pour aboutir à un produit finalisé, déployé en production et utilisé quotidiennement par de vrais professionnels et leurs clients. Il regroupe trois produits qui fonctionnent ensemble : un site vitrine ouvert au public, un système de réservation en ligne pour les clients, et un tableau de bord d'administration pour les gérants et les barbers. Le site vitrine plonge le visiteur dans un univers visuel soigné dès l'arrivée avec une intro cinématique animée composée d'un glow multi-couche sur le logo, un écran de sélection entre les deux salons en split-screen avec des effets de parallaxe qui réagissent au gyroscope du téléphone ou au mouvement de la souris sur desktop, des arrière-plans en Ken Burns qui zooment lentement en boucle, un curseur personnalisé avec un point et un anneau en mix-blend-mode difference qui change de taille au survol des éléments interactifs, des boutons magnétiques qui se déplacent vers le doigt, des cartes qui s'inclinent en 3D avec perspective selon la position du regard, des titres dont les lettres apparaissent une par une en cascade avec un délai progressif, des effets de ripple au clic sur les boutons, des particules flottantes générées dynamiquement, et une texture grain en bruit fractal superposée pour un rendu tactile. Le site intègre des transitions de page avec un fondu lors de la navigation, une bannière de consentement cookies conforme RGPD qui charge les trackers uniquement après acceptation, et une page 404 stylisée. Chaque salon dispose de ses propres pages avec un hub de navigation central, une présentation de l'équipe sous forme de grille avec vidéos et effet tilt 3D au survol, des profils individuels par barber avec vidéo hero en autoplay et galerie de réalisations, une liste des prestations avec tarifs et durées et pastilles de couleur par service, une galerie photo du salon avec intégration des avis Google, et une page contact avec carte Leaflet interactive et informations de transport et horaires et lien vers Google Maps. Le site est pensé pour être utilisé principalement sur téléphone, comme une vraie application : c'est une Progressive Web App installable directement sur l'écran d'accueil avec support offline via Service Worker et cache network-first, des raccourcis rapides vers la réservation de chaque salon, et un affichage plein écran sans barre de navigateur. L'expérience mobile a été la priorité avec une navigation bottom bar glassmorphique fixe en bas de l'écran, des zones de tap larges, un forçage du font-size à seize pixels sur les inputs pour éviter le zoom automatique sur iOS, un support des safe areas pour les encoches des téléphones récents, et des transitions fluides pensées pour le tactile. Le site fonctionne aussi très bien sur desktop avec des interactions enrichies comme le curseur custom et le tilt 3D et les boutons magnétiques qui exploitent la souris, mais l'usage principal reste le mobile puisque les clients réservent depuis leur téléphone. Il est optimisé pour le référencement avec des données structurées Schema.org de type BarberShop et Person et BreadcrumbList et ReserveAction, des balises Open Graph et Twitter Cards, un sitemap XML et un robots.txt. Pour la réservation le client suit un parcours en cinq étapes : il choisit son barber sur une grille de cartes avec avatar et nom et rôle ou sélectionne le mode peu importe qui répartit automatiquement la charge entre les barbers disponibles, il choisit sa prestation parmi les services filtrés selon le barber avec affichage du prix et de la durée et d'une durée spécifique le samedi si applicable, il sélectionne une date sur un calendrier mensuel navigable puis un créneau de trente minutes parmi les disponibilités calculées en temps réel avec des suggestions rapides comme ce soir ou demain ou samedi, il renseigne son téléphone avec un sélecteur de pays au format E.164 et son email et son prénom et un éventuel code promo, il accepte la politique d'annulation via une modale dédiée puis confirme sur un récapitulatif complet. Après la réservation le client reçoit un email de confirmation immédiat avec un fichier ICS à ajouter à son calendrier et un SMS de rappel la veille à dix-huit heures ou immédiatement si la réservation est à moins de vingt-quatre heures et un SMS de demande d'avis Google soixante minutes après le rendez-vous envoyé une seule fois par client à vie. Le client peut gérer son rendez-vous sans créer de compte grâce à un lien sécurisé par token unique reçu par email qui lui permet de consulter les détails ou d'annuler gratuitement jusqu'à douze heures avant ou de reporter une fois avec un nouveau calendrier de créneaux ou de retélécharger le fichier ICS, et il peut aussi retrouver ses rendez-vous en recherchant par numéro de téléphone. Le système supporte aussi les réservations récurrentes avec différentes fréquences comme hebdomadaire ou bimensuelle et un nombre maximum de cinquante-deux occurrences. Le tableau de bord d'administration est une application web monopage construite en React 19 avec des mises à jour en temps réel via WebSocket et un thème dark et light commutable et des notifications toast qui apparaissent en glissant depuis la droite quand un client réserve ou annule et une cloche avec badge compteur pour les événements récents et une barre de recherche globale de clients et un cache offline via React Query qui permet de consulter les données même sans connexion. Il contient quinze modules : un planning interactif avec grille horaire de huit heures à vingt heures par barber en vue jour ou semaine qui affiche les nouveaux rendez-vous instantanément via Socket.IO avec création manuelle de réservation et actions rapides pour terminer ou marquer en faux plan ou annuler ou décaler un rendez-vous et un mini-calendrier de navigation et un indicateur de l'heure actuelle sur la grille, un module analytics avec le chiffre d'affaires par période et par barber et par service et le taux d'occupation et les heures de pointe sous forme de heatmap et les tendances comparées au mois précédent, un module de gestion des barbers avec les profils et les photos et les horaires hebdomadaires éditables jour par jour et les overrides pour les congés et pauses avec motif et les assignations de barbers invités entre les deux salons pour les remplacements, un module de gestion des prestations avec création et modification et suppression de services avec prix et durée et durée spéciale le samedi et couleur personnalisée et description et assignation par barber et restrictions horaires par barber et par jour et possibilité de marquer un service comme réservé à l'admin, un module clients avec une base de plus de six mille quatre cents fiches avec recherche et tri par nom ou dernière visite ou montant total dépensé ou nombre de visites et filtrage par comptes créés et affichage des drapeaux pays sur les numéros de téléphone et page de détail par client avec historique complet des rendez-vous et service et barber favoris et notes modifiables et badge VIP pour les clients à plus de dix visites et détection des clients inactifs à plus de trois visites et plus de quatre-vingt-dix jours sans rendez-vous et export CSV compatible Excel et suppression avec anonymisation conforme RGPD, un module faux plans qui liste tous les rendez-vous où le client ne s'est pas présenté avec suivi par client pour identifier les récidivistes, un module liste d'attente qui enregistre les demandes de clients pour des créneaux complets avec leurs préférences de date et horaire et barber et service et envoie automatiquement un SMS quand un créneau correspondant se libère suite à une annulation avec bouton de réservation rapide pour concrétiser et expiration automatique des entrées dépassées, un module historique des réservations filtrable par date et barber et statut avec pagination et un journal d'audit complet qui trace toutes les actions effectuées dans le système avec l'identité de l'auteur et le détail avant et après de chaque modification et un code couleur par type d'action, un module campagnes SMS avec quatre templates prédéfinis pour rappel et promotion et réactivation et personnalisé et envoi en masse ou ciblé avec compteur de caractères et nombre de SMS et historique des envois, un module campagnes email via Brevo avec templates et envoi groupé et historique, un module de suivi ROI des campagnes qui mesure les clics et conversions et le chiffre d'affaires généré par campagne, un module caisse avec enregistrement des transactions par méthode de paiement CB ou espèces ou Lydia ou autre et clôture journalière avec totaux par méthode et verrouillage des jours clôturés, un module boutique pour la gestion des produits vendus en salon avec prix d'achat et de vente et suivi de stock et alertes stock bas et historique des ventes et gestion de cartes cadeaux avec génération de code et suivi du solde et date d'expiration, un module objectifs mensuels gamifié avec classement des barbers par chiffre d'affaires et nombre de rendez-vous et taux de présence et valeur moyenne par rendez-vous avec médailles or argent bronze et barres de progression, un module portfolio photo par barber pour stocker et afficher les réalisations avec lightbox et statistiques de contributions, et un module de surveillance système qui affiche l'état de l'API et de la base de données et la mémoire utilisée et le statut de chaque tâche planifiée et les taux de livraison SMS et email sur trente jours et l'état du circuit breaker Brevo et un bouton de sauvegarde de la base de données. L'IA Claude a été utilisée comme assistant de développement sur ce projet, principalement pour accélérer l'écriture de certaines parties du code et résoudre des problèmes techniques ponctuels. La conception globale de l'architecture, les choix techniques, la logique métier, le design, les parcours utilisateurs et la gestion du projet dans son ensemble ont été réalisés par mes soins. Sur le plan technique le backend tourne sur Node.js avec Express et une base de données PostgreSQL composée de vingt-deux tables avec Row-Level Security et quarante-deux migrations incrémentales. L'authentification utilise des tokens JWT avec des access tokens de quinze minutes et des refresh tokens de quatre-vingt-dix jours avec rotation automatique et cookies httpOnly et verrouillage du compte après cinq tentatives échouées pendant quinze minutes et hachage des mots de passe en bcrypt douze rounds. Le système intègre un rate limiting adaptatif sur trois niveaux avec soixante requêtes par minute pour le public et dix par quinze minutes pour l'authentification et deux cents par minute pour l'admin, six tâches planifiées en production protégées par advisory locks PostgreSQL contre les exécutions concurrentes pour le traitement de la file de notifications toutes les deux minutes et la planification des rappels toutes les trente minutes et l'auto-complétion des rendez-vous passés et l'envoi des emails de review toutes les dix minutes et le nettoyage des vieilles notifications et tokens expirés et la sauvegarde quotidienne de la base, une file d'attente de notifications avec retry exponentiel en trois tentatives espacées de cinq puis quinze puis soixante minutes et un circuit breaker sur l'API Brevo qui se déclenche après trois échecs consécutifs avec une pause de soixante secondes par salon. La prévention des doubles réservations repose sur des advisory locks PostgreSQL combinés à un index unique transactionnel et une vérification SELECT FOR UPDATE. Le dashboard est construit en React 19 avec Vite 6 et React Router 7 en HashRouter pour la compatibilité Cloudflare Pages et utilise WebSocket via Socket.IO pour les mises à jour en temps réel et TanStack React Query pour le cache avec persistance offline en localStorage. Le tout est hébergé sur Cloudflare Pages pour le site et le dashboard et Railway pour le backend et la base de données pour un coût total inférieur à dix euros par mois, remplaçant un logiciel de réservation externe Timify qui coûtait quatre cents euros par mois à BarberClub, soit une économie de plus de quatre-vingt-quinze pourcent.