Connecter Lovable à Claude via GitHub : guide complet

Le cas — Gérer ses projets d'équipe avec Lovable et Claude Code

Dans l'ère du vibe coding, la vitesse d'exécution est devenue le critère numéro un. Pourtant, pour les projets d'entreprise, la sécurité et la maîtrise du code restent essentielles. Ce guide vous apprend à bâtir un Gestionnaire de Tâches d'Équipe en utilisant un workflow hybride : Lovable pour le design et le prototypage rapide, et Claude Code pour la logique métier complexe via GitHub.

L'objectif est de résoudre le problème des outils SaaS génériques trop rigides. Nous allons créer une application interne personnalisée où chaque modification visuelle dans Lovable est synchronisée avec un dépôt GitHub, permettant à un développeur (ou à vous-même via Claude Code) d'intervenir sur le code source avec précision. Créer une app avec l'IA ne signifie plus abandonner le contrôle du code.

Fonctionnalités clés

• Tableau de Bord Projets : Vue d'ensemble des projets actifs avec indicateurs de progression.
• Gestion des Tâches : Liste filtrable par statut, priorité et responsable.
• Système de Rôles : Distinction entre Administrateurs (gestion projets) et Membres (exécution tâches).
• Synchronisation GitHub : Exportation et importation automatique du code entre Lovable et votre IDE.
• Workflow Claude Code : Utilisation de l'agent CLI de Claude pour refactoriser les composants complexes.
• Previews en Temps Réel : Rebuild automatique de l'app Lovable à chaque git push.
• Base de Données Supabase : Persistance des données avec gestion fine de la sécurité (RLS).
• Notifications par Email : Alertes automatiques via Resend lors de l'assignation d'une tâche.

Stack & intégrations

• Lovable Cloud : Hébergement, interface de génération IA et prévisualisation.
• GitHub : Pivot central pour le versioning et le travail collaboratif.
• Supabase : Base de données PostgreSQL, authentification et stockage.
• Claude Code / Cursor : Environnement de développement local boosté à l'IA pour le code complexe.
• Resend : Envoi d'emails transactionnels pour le suivi des projets.

Prompts Lovable concrets

1. Design system & identité visuelle

Crée un design system professionnel pour notre outil 'SyncFlow'. L'interface doit être épurée, contrastée et centrée sur la productivité.
- Définis une palette de tokens sémantiques dans index.css (HSL) : --primary (262 83% 58% - un violet vibrant), --secondary (210 40% 96%), et --accent (160 84% 39% - vert succès).
- Typographie : Utilise 'Inter' pour le corps de texte et 'Plus Jakarta Sans' pour les titres.
- Composants : Personnalise les boutons shadcn avec des coins arrondis de 8px, des ombres portées légères (shadow-sm) et des transitions fluides au survol.
- Layout : Implémente une barre latérale de navigation avec un effet flou (glassmorphism) et une zone de contenu principale sur fond gris très clair (#F9FAFB).
- Mode Sombre : Assure-toi que chaque couleur a sa variante dark: pour une lisibilité parfaite la nuit.

2. Schéma de base de données & RLS

Configure la base de données Supabase pour SyncFlow. Crée les tables suivantes :
1. 'projects' : id, nom, description, statut, created_by (fk), created_at.
2. 'tasks' : id, titre, description, project_id (fk), assigned_to (fk), statut [todo, in_progress, done], priorité [low, medium, high], due_date.
3. 'profiles' : id (pk auth.users), full_name, avatar_url, role [admin, member].
- Active la sécurité Row Level Security (RLS) sur toutes les tables.
- RLS : Un utilisateur ne voit que les projets dont il est membre ou les projets publics.
- RLS : Seuls les 'admin' peuvent supprimer des projets.
- RLS : Les membres peuvent modifier les tâches qui leur sont assignées.

3. Authentification & onboarding

Construis le système d'authentification pour SyncFlow.
- Page de Connexion : Inclue un formulaire Email/Mot de passe et un bouton de connexion sociale Google.
- Flux d'Onboarding : Après la création du compte, demande le Nom complet et le Rôle.
- Logique de Protection : Si l'utilisateur n'est pas connecté, redirige-le systématiquement vers /login. Protège les routes /dashboard et /settings.
- Utilise les hooks Supabase Auth et affiche des messages d'erreur clairs via des composants 'toast' en cas d'échec de connexion.

4. Feature cœur : Workflow Lovable + Claude Code

Développe l'interface principale de gestion des tâches.
- Crée une liste de projets cliquable. Dans chaque projet, affiche les tâches sous forme de liste avec des filtres (Statut, Assigné).
- Ajoute un panneau latéral (Sheet) pour éditer les détails d'une tâche.
- IMPORTANT : Structure le code de manière modulaire (TaskItem.tsx, ProjectGrid.tsx) pour que je puisse facilement le modifier via Claude Code plus tard.
- Affiche des badges de couleur pour la priorité : Rouge (Urgent), Jaune (Moyen), Bleu (Faible).
- Prépare le terrain pour la synchronisation GitHub en commentant les fonctions complexes.

5. Intégration GitHub & Connexion Claude Code

Je veux activer la synchronisation GitHub pour ce projet SyncFlow.
1. Connecte mon compte GitHub dans les réglages.
2. Crée un dépôt privé nommé 'syncflow-app'.
3. Pousse tout le code actuel sur la branche 'dev'.
4. Explique-moi comment je peux maintenant cloner ce repo sur mon ordinateur pour utiliser Claude Code en local.
5. Indique à Lovable qu'il doit écouter les changements sur la branche 'dev' pour mettre à jour la preview.

6. Polish & SEO

Finalise l'application SyncFlow pour un usage en production.
- Responsive : La barre latérale doit devenir un menu escamotable sur mobile.
- États Vides : Crée des composants visuels sympas quand il n'y a pas encore de projet ou de tâche, avec un bouton "Créer mon premier projet".
- Loading States : Ajoute des squelettes de chargement (skeletons) pour les listes de tâches.
- SEO & Meta : Ajoute des balises Meta pour la page d'accueil (titre, description). Génère un fichier sitemap.xml basique.
- Toasts : Notifie l'utilisateur lors de chaque action réussie (tâche créée, projet supprimé).

Pièges courants & solutions

• Modifier 'main' directement : Ne poussez jamais vos modifications expérimentales directement sur main. Utilisez dev pour Lovable et créez des feature branches pour vos travaux sur Claude Code.
• Conflits de version : Si vous modifiez un fichier dans Lovable pendant que vous travaillez dessus localement, un conflit surviendra. Solution : Faites toujours un git pull avant de coder localement et attendez que Lovable ait fini de "synchroniser" avant de repousser.
• Oubli des RLS : Si vos données ne s'affichent pas, vérifiez vos politiques RLS dans Supabase. Une table sans policy est illisible par défaut.
• Crédits Lovable : Pour les refactorisations lourdes, préférez Claude Code en local. Cela économise vos crédits Lovable pour la partie design et itérations rapides.

FAQ

Comment ouvrir mon projet Lovable dans Claude Code ?

Une fois GitHub connecté, clonez le repo sur votre machine. Dans votre terminal, entrez dans le dossier et tapez claude. Vous pourrez alors lui demander : "Améliore la logique de filtrage des tâches" ou "Refactorise ce composant pour plus de performance".

Lovable voit-il mes modifications faites dans Claude Code ?

Oui ! Dès que vous faites un git push sur la branche liée (généralement dev), Lovable détecte le commit, télécharge les changements et reconstruit votre preview en quelques secondes.

Pourquoi utiliser des branches différentes ?

C'est la règle d'or : main pour la production stable, dev pour vos itérations dans Lovable, et des branches spécifiques pour vos développements locaux complexes. Cela permet de tester avant de fusionner (Merge Request).

Conclusion

Lier Lovable à Claude Code via GitHub est le workflow ultime pour tout maker sérieux. Vous bénéficiez de la vitesse fulgurante de l'IA visuelle pour vos interfaces, tout en gardant la puissance d'un environnement de développement professionnel pour votre logique. N'attendez plus, connectez votre projet GitHub et passez au niveau supérieur du vibe coding !