Déboguer votre app Lovable avec Claude sans crédits

Le cas — déboguer votre Dashboard RH sans gaspiller de crédits

Développer un outil interne comme un Dashboard RH Lovable (gestion des employés, congés et demandes) implique souvent des phases d'ajustements. Chaque fois que vous demandez à Lovable de corriger un bug, vous consommez des crédits. Ce guide vous montre comment utiliser Claude (via l'interface web ou Claude Code) comme copilote pour effectuer des diagnostics profonds et des corrections de code gratuitement (ou à moindre coût). En maîtrisant ce workflow, vous construisez des outils internes complexes tout en gardant vos crédits pour la génération de fonctionnalités à haute valeur ajoutée.

Fonctionnalités clés

• Gestion des demandes de congés : Un système centralisé pour suivre les absences des collaborateurs.
• Annuaire des employés : Profils détaillés avec rôles et départements.
• Workflow d'approbation : Les managers peuvent valider ou refuser les demandes depuis leur interface.
• Portail de débogage en temps réel : Un composant administrateur caché pour surveiller l'état de l'API et la santé des RLS.
• RBAC (Role-Based Access Control) : Vues différenciées pour les RH, les Managers et les Employés.
• Suivi des performances : Monitoring des re-renders de composants pour garantir une UI fluide.
• Intégration Supabase : Synchronisation directe avec Postgres et les politiques RLS.
• Export de données : Génération de rapports PDF/CSV pour la paie.

Stack & intégrations

• Lovable Cloud : Le moteur principal pour la génération d'UI et le déploiement.
• Supabase : Backend pour la base de données (Postgres), l'Auth et la sécurité (RLS).
• Claude (Anthropic) : Utilisé via le Chat Web pour l'analyse de logs et via Claude Code (CLI) pour l'édition directe du dépôt GitHub.
• GitHub : Le pont permettant à Claude Code de modifier le code source généré par Lovable.
• Lucide React & Shadcn/UI : Pour une interface d'outil interne professionnelle et cohérente.

Prompts Lovable concrets

1. Design system & identité visuelle

Je construis un Dashboard RH professionnel pour un usage interne. J'ai besoin d'un design system robuste. 
Crée une branche 'design-system' et configure le fichier index.css avec des tokens HSL sémantiques. 
La couleur primaire doit être un Bleu Marine professionnel (hsl(221.2 83.2% 53.3%)), avec une palette ardoise douce pour les fonds. 
Définis des tokens pour : --background, --foreground, --card, --popover, --primary, --secondary, --muted, --accent, --destructive, --border, --input, --ring. 
Assure des rayons de courbure spécifiques (0.75rem pour les cartes, 0.5rem pour les boutons). 
Configure la typographie : Inter pour le corps de texte, Geist Sans pour les titres. 
L'UI doit être propre, contrastée pour l'accessibilité, et inclure un effet 'glassmorphism' pour la sidebar. 
Le mode sombre doit être intégralement supporté avec des tokens de luminosité ajustés.

2. Schéma de base de données & RLS pour Dashboard RH

Configure le backend pour le Dashboard RH en utilisant Supabase. 
Crée trois tables : 
1. 'profiles' (id uuid references auth.users, full_name text, email text, role (enum: 'admin', 'manager', 'employee'), department text). 
2. 'leave_requests' (id uuid, user_id references profiles.id, type (enum: 'paid', 'sick', 'unpaid'), start_date date, end_date date, status (enum: 'pending', 'approved', 'rejected'), reason text). 
3. 'audit_logs' (id uuid, action text, performed_by references profiles.id, timestamp timestamptz). 
Active RLS sur toutes les tables. 
Crée les politiques : Les employés ne voient que leur propre profil et leurs demandes. Les managers voient et modifient les demandes de leur département. Les admins ont un accès total. 
Assure-toi que chaque requête est optimisée avec des index sur les colonnes user_id et status.

3. Authentification & workflow d'onboarding

Implémente un flux d'authentification complet pour l'app RH. 
Crée une page de connexion avec un bouton 'Connexion Employé' utilisant Supabase Auth (Email/Mot de passe + Google). 
Après la connexion, si un utilisateur n'a pas de données de profil, redirige-le vers une page /onboarding pour renseigner son 'Département' et son 'Nom Complet'. 
Si le profil est complet, redirige selon le rôle : Admins vers /admin/dashboard, Managers vers /manager/overview, et Employés vers /mes-demandes. 
Protège ces routes en utilisant un composant d'ordre supérieur ou un hook personnalisé (useAuth) pour empêcher les accès non autorisés. 
Affiche un spinner de chargement Shadcn/UI pendant la vérification de la session.

4. Interface de gestion des demandes RH

Crée la fonctionnalité cœur : Le Dashboard de gestion des congés. 
Pour les employés : Une vue affichant la liste de leurs demandes passées dans une Table Shadcn, et un bouton 'Nouvelle Demande' ouvrant un Dialogue avec un formulaire (dates, type, motif). 
Pour les managers : Une vue 'Approbations en attente' utilisant une grille de cartes. Chaque carte montre le nom de l'employé, la durée, et deux boutons : 'Approuver' (vert) et 'Refuser' (rouge). 
Lorsqu'une demande est approuvée, déclenche une notification toast 'Demande approuvée' et mets à jour le statut dans la table 'leave_requests'. 
Ajoute une barre de filtre pour trier par date ou par statut. Assure-toi que le layout est responsive pour mobile.

5. Composant de débogage et monitoring temps réel

Développe un composant 'DebugPanel' caché pour les administrateurs, accessible sur /admin/debug. 
Ce composant doit afficher : 
1. L'état actuel de la session Supabase (valide/expirée). 
2. Une liste des politiques RLS actives récupérées de la DB ou une checklist de tests de connectivité. 
3. Un intercepteur de logs console qui affiche les 5 dernières erreurs dans un encadré rouge. 
4. Un bouton 'Tester la connexion' qui effectue un simple fetch sur la table 'profiles' et affiche le JSON brut ou le code d'erreur PG spécifique. 
Cet outil est essentiel pour diagnostiquer pourquoi une liste est vide (ex: RLS bloquante) sans avoir à ouvrir la console du navigateur.

6. Polish & optimisation des performances

Affiner le Dashboard RH pour la production. 
Implémente des 'Skeleton' loaders pour toutes les tables de données afin d'améliorer la performance perçue. 
Optimise le composant principal du Dashboard pour éviter les re-renders inutiles lors de l'ouverture de la sidebar (utilise memo ou déplace l'état). 
Ajoute des balises meta SEO pour la page de login : Titre 'Portail RH - Interne', Description 'Accès sécurisé pour les collaborateurs'. 
Assure-toi que les 'Empty States' sont gérés : si aucune demande de congé n'existe, affiche une illustration sympathique et un bouton 'Créer votre première demande'. 
Vérifie que tous les éléments interactifs ont des états de focus corrects et des labels ARIA pour l'accessibilité.

Pièges courants & solutions

1. RLS bloquant les données (Table vide)

Symptôme : Vos données sont présentes dans Supabase mais l'app affiche "Aucune donnée". Diagnostic Claude : Collez votre politique SQL. Claude identifiera si auth.uid() ne correspond pas à la colonne de filtrage. Solution : Utiliser Claude Code pour modifier la politique SQL via une migration ou un prompt Lovable rectifié.

2. Boucle de Re-render infinie

Symptôme : L'onglet du navigateur ralentit et la console affiche des milliers de logs. Diagnostic Claude : Copiez le code du composant. Claude verra que votre useEffect met à jour un état qui est lui-même dans les dépendances de l'effet. Solution : Utiliser useCallback ou stabiliser les dépendances de l'effet.

3. JWT expiré ou session invalide

Symptôme : L'utilisateur est connecté mais les requêtes API renvoient une erreur 401. Diagnostic Claude : Collez l'erreur console. Claude suggérera de vérifier la persistance de la session dans le SupabaseClient. Solution : Ajouter un écouteur onAuthStateChange dans le layout racine.

4. Variables d'environnement manquantes

Symptôme : "Supabase URL not found" au déploiement. Diagnostic Claude : Claude analysera le fichier de configuration et signalera que process.env est vide. Solution : Vérifier les secrets dans Lovable Settings ou le fichier .env.local pour Claude Code.

Workflow Décisionnel : Quel outil utiliser ?

FAQ

Comment utiliser Claude Code gratuitement ?

Claude Code est un outil CLI. Bien qu'il utilise des jetons API (payants), vous pouvez souvent utiliser le chat gratuit Claude.ai pour analyser vos fichiers de code (exportés de Lovable via GitHub) et appliquer manuellement les corrections pour éviter toute dépense.

Pourquoi Lovable dépense des crédits pour de simples corrections ?

Lovable régénère des parties de votre application pour assurer la cohérence globale. Pour des erreurs logiques mineures, diagnostiquer le problème en "Plan Mode" (gratuit) puis appliquer la correction soi-même est bien plus efficace.

Puis-je déboguer les RLS Supabase avec Claude ?

Oui. Copiez votre politique SQL et le message d'erreur de la console, puis demandez à Claude : "Pourquoi cette politique RLS bloque-t-elle ma requête pour l'utilisateur X ?". Il est excellent pour trouver les failles logiques dans le SQL.

Conclusion

Le débogage ne doit pas être un gouffre à crédits. En utilisant le Plan Mode de Lovable pour le diagnostic initial, Claude Chat pour l'analyse approfondie, et Claude Code pour les corrections chirurgicales, vous pouvez bâtir un outil interne professionnel comme un Dashboard RH avec une précision totale. Ne devinez plus, commencez à "vibe coder" avec un workflow de débogage structuré !