🔧 Guide de développement
Prérequis
| Outil | Version | Vérification |
|---|---|---|
| Node.js | ≥ 18 LTS | node --version |
| npm | ≥ 9 | npm --version |
| Git | récente | git --version |
| Supabase CLI | dernière | supabase --version |
Installation complète
# 1. Cloner
git clone https://github.com/seb001/lovable-dev-hub.git
cd lovable-dev-hub
# 2. Dépendances
npm install
# 3. Variables d'environnement
cp .env.example .env
# Éditer .env :
# VITE_SUPABASE_URL=https://lknpnomhfqcgkktxydui.supabase.co
# VITE_SUPABASE_PUBLISHABLE_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
# 4. Lancer
npm run dev
# → http://localhost:8080
Variables d'environnement
Frontend (.env)
| Variable | Obligatoire | Description |
|---|---|---|
VITE_SUPABASE_URL | ✅ | URL de votre projet Supabase |
VITE_SUPABASE_PUBLISHABLE_KEY | ✅ | Clé publique (anon key) Supabase |
Secrets Edge Functions (Dashboard Supabase)
| Secret | Description | Obligatoire |
|---|---|---|
IPQUALITYSCORE_API_KEY | Fallback si aucune clé utilisateur | Non |
ABUSEIPDB_API_KEY | Fallback | Non |
VIRUSTOTAL_API_KEY | Fallback | Non |
MAKE_WEBHOOK_URL | URL Make.com par défaut | Non |
MAKE_AUTH_TOKEN | Token auth Make.com | Non |
Scripts npm
npm run dev # Serveur de développement (port 8080)
npm run build # Build production (TypeScript + Vite)
npm run build:dev # Build sans minification
npm run preview # Prévisualisation build (port 4173)
npm run lint # ESLint
Structure du projet
lovable-dev-hub/
│
├── src/
│ ├── App.tsx # Routeur + Providers
│ ├── main.tsx # Point d'entrée
│ ├── index.css # Design system (4 thèmes HSL)
│ │
│ ├── components/
│ │ ├── AppNavbar.tsx # Navigation responsive
│ │ ├── AppBreadcrumb.tsx # Fil d'Ariane
│ │ ├── EmailHeaderAnalyzer.tsx # Analyse SSE streaming
│ │ ├── SpamAnalysisCard.tsx # Résultats spam
│ │ ├── ExportModule.tsx # Exports multi-formats
│ │ ├── ExportStatusBadge.tsx # Badge statut export
│ │ ├── ThemeSelector.tsx # Sélecteur thèmes
│ │ ├── NavLink.tsx # NavLink shadcn-compatible
│ │ └── ui/ # 40+ composants shadcn/Radix
│ │
│ ├── pages/
│ │ ├── Home.tsx # Accueil + stats
│ │ ├── Analyzer.tsx # Mail Analyseur
│ │ ├── Dashboard.tsx # Mail Dashboard
│ │ ├── PhoneChecker.tsx # BlocNum Analyseur
│ │ ├── SmsDashboard.tsx # BlocNum Dashboard
│ │ ├── Export.tsx # Export & Intégrations
│ │ ├── Settings.tsx # Paramètres
│ │ ├── Aide.tsx # Documentation intégrée
│ │ ├── Auth.tsx # Authentification
│ │ └── NotFound.tsx # 404
│ │
│ ├── hooks/
│ │ ├── useEmailAnalyses.ts # CRUD analyses email
│ │ ├── usePhoneChecks.ts # CRUD vérifications téléphone
│ │ ├── useCommunityReports.ts # Signalements + realtime
│ │ ├── useSpamAnalysis.ts # Mutation analyze-spam
│ │ ├── use-toast.ts # Système toast
│ │ └── use-mobile.tsx # Breakpoint 768px
│ │
│ ├── data/
│ │ ├── spam_patterns.json # 13 patterns manuels
│ │ ├── spam_kaggle_patterns.json # 6 patterns Kaggle
│ │ ├── spam_uci_patterns.json # 4 patterns UCI
│ │ └── spam_huggingface_patterns.json
│ │
│ ├── lib/
│ │ ├── credits.ts # Crédits quotidiens
│ │ └── utils.ts # cn() clsx + tailwind-merge
│ │
│ └── integrations/supabase/
│ ├── client.ts # createClient()
│ ├── auth.tsx # AuthProvider + useAuth
│ └── types.ts # Types DB auto-générés
│
├── supabase/
│ ├── config.toml
│ ├── functions/
│ │ ├── analyze-email-headers/index.ts
│ │ ├── analyze-spam/index.ts
│ │ ├── arcep-check/index.ts
│ │ ├── trigger-n8n-export/index.ts
│ │ └── trigger-make-scenario/index.ts
│ └── migrations/
│ └── 20260406145132_*.sql
│
├── scripts/
│ └── extract-spam-patterns.cjs
│
├── docs/ # Documentation source
├── .env.example
├── package.json
├── vite.config.ts # Port 8080, alias @/
├── tailwind.config.ts
└── tsconfig.json
Développement des Edge Functions
# Installer Supabase CLI
npm install -g supabase
# Démarrage local
supabase start
supabase functions serve
# Test d'une fonction
curl -X POST http://localhost:54321/functions/v1/arcep-check \
-H "Content-Type: application/json" \
-H "Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..." \
-d '{"action":"check","phoneNumber":"0612345678"}'
# Déployer une fonction
supabase functions deploy analyze-spam
# Configurer un secret
supabase secrets set IPQUALITYSCORE_API_KEY=votre_clé
Régénérer les patterns spam
# Tous les patterns
node scripts/extract-spam-patterns.cjs --source=all
# Par source
node scripts/extract-spam-patterns.cjs --source=kaggle
node scripts/extract-spam-patterns.cjs --source=uci
node scripts/extract-spam-patterns.cjs --source=huggingface
Conventions de code
Nommage
| Élément | Convention | Exemple |
|---|---|---|
| Composants React | PascalCase | EmailHeaderAnalyzer.tsx |
| Hooks | camelCase + use | useSpamAnalysis.ts |
| Types/Interfaces | PascalCase | SpamAnalysisResult |
| Fichiers utilitaires | kebab-case | spam-patterns.json |
| Clés DB | snake_case | email_content |
| Variables TS | camelCase | emailContent |
Import alias
// ✅ Correct
import { supabase } from '@/integrations/supabase/client';
import { useEmailAnalyses } from '@/hooks/useEmailAnalyses';
// ❌ Éviter
import { supabase } from '../../../integrations/supabase/client';
Classes CSS
// Toujours utiliser cn() de @/lib/utils
import { cn } from '@/lib/utils';
<div className={cn(
"base-classes",
condition && "conditional-classes"
)} />
Tests (à mettre en place — Q2 2026)
Priorités
# Tests unitaires (Vitest)
# Cibles : credits.ts, scoring hybride, normalisation numéros
npm run test
# Tests E2E (Playwright)
# Flux critiques : analyse email, vérification numéro, export, auth
npm run test:e2e
Dépannage courant
| Problème | Solution |
|---|---|
VITE_SUPABASE_URL manquant | Vérifier .env à la racine |
| Port 8080 occupé | lsof -ti:8080 | xargs kill -9 |
| Edge Function timeout | Vérifier les secrets Supabase |
| Erreur CORS | Vérifier l'URL Supabase dans .env |
| localStorage plein | Vider via Paramètres ou DevTools |
| Crédits bloqués | localStorage.removeItem('dailyCredits') |
Voir TROUBLESHOOTING.md pour plus de détails.