InvoicePro — Plateforme SaaS de Facturation Multi-Entreprises - Julien Saillot | Alternant Développeur & Cybersécurité Montpellier

Introduction

InvoicePro est une plateforme SaaS complète de gestion de devis et factures que j'ai conçue et développée de A à Z. L'objectif : offrir aux freelances, agences et PME un outil moderne, rapide et sécurisé pour centraliser toute leur facturation, sans compromis sur l'expérience utilisateur.

Ce projet m'a permis de mettre en pratique une architecture full-stack moderne avec une séparation claire entre le frontend et le backend, le tout orchestré autour de Supabase comme socle de données et d'authentification.

Capture de la landing page d'InvoicePro — hero section avec les statistiques clés et l'aperçu du dashboard

Le problème à résoudre

Les solutions de facturation existantes (QuickBooks, FreshBooks, Zoho Invoice) présentent plusieurs limites pour les petites structures françaises :

Pas de gestion multi-entreprises native : les freelances multi-activités ou les agences avec plusieurs structures doivent jongler entre plusieurs comptes
CRM séparé et payant : la gestion des clients est souvent un module additionnel
Personnalisation limitée : les templates de factures sont génériques et peu brandables
Tarification élevée : les plans grimpent vite dès qu'on a besoin de fonctionnalités avancées

InvoicePro répond à ces problèmes avec une approche tout-en-un, pensée dès le départ pour le multi-entreprises.

Architecture technique

Frontend — Next.js 15 + React 19

Le frontend est une application Next.js 15 utilisant l'App Router et Turbopack pour un rechargement instantané en développement. Les choix techniques clés :

React 19 avec les dernières optimisations de rendu
TailwindCSS 4 pour un design system rapide et cohérent
Radix UI + shadcn/ui pour des composants accessibles et robustes
Framer Motion pour les animations fluides de la landing page
Recharts pour les graphiques du tableau de bord
@react-pdf/renderer pour la génération de PDF côté client

src/
├── app/                          # Pages (App Router)
│   ├── (auth)/                   # Login, Register, Verify Email
│   ├── dashboard/
│   │   ├── (main)/               # Dashboard principal, entreprises, settings
│   │   └── workspace/[id]/       # Espace de travail par entreprise
│   │       ├── invoices/         # Gestion des factures
│   │       ├── quotes/           # Gestion des devis
│   │       ├── clients/          # CRM intégré
│   │       └── settings/         # Paramètres entreprise
│   └── invitations/              # Gestion des invitations
├── components/
│   ├── auth/                     # Formulaires d'authentification
│   ├── company/                  # Sélecteur & formulaires entreprise
│   ├── invoice/                  # Formulaires facture & devis
│   ├── invoice-customization/    # Personnalisation templates
│   ├── pdf/                      # Génération PDF
│   └── layout/                   # DashboardLayout
├── contexts/                     # Contextes React (auth, company)
├── hooks/                        # Hooks personnalisés
└── lib/                          # Clients Supabase, utilitaires

Backend — NestJS (Node.js)

Le backend est construit avec NestJS, le framework Node.js structuré qui apporte l'injection de dépendances, les modules, les guards et les pipes de validation. Il remplace une ancienne API AdonisJS et expose une API REST complète.

src/
├── auth/              # Signup, Login, OAuth Google, JWT cookies
├── users/             # Profils utilisateurs
├── companies/         # CRUD entreprises + gestion membres
├── projects/          # Projets par entreprise
├── clients/           # Module CRM complet
├── finances/
│   ├── invoices/      # CRUD factures + envoi email + PDF
│   ├── quotes/        # CRUD devis + conversion → facture
│   └── stats/         # Statistiques financières
├── invitations/       # Invitations par email avec tokens
├── invoice-customization/  # Templates + logos + watermarks
├── mail/              # Service Nodemailer
├── common/
│   ├── guards/        # AuthGuard + CompanyAccessGuard
│   └── decorators/    # @CurrentUser
└── supabase/          # Service Supabase centralisé

Points techniques notables :

Préfixe global /api sur toutes les routes
Validation stricte via class-validator avec whitelist et forbidNonWhitelisted
Cookies httpOnly pour les tokens JWT (sb_token, sb_refresh_token)
CORS configuré dynamiquement via variable d'environnement
Docker multi-stage build pour un déploiement optimisé

Base de données — Supabase (PostgreSQL)

Supabase est utilisé comme Backend-as-a-Service et fournit :

PostgreSQL robuste avec Row Level Security (RLS) activé sur toutes les tables
Supabase Auth pour l'authentification (email/password + OAuth Google)
Supabase Storage pour le stockage des logos, watermarks et fichiers
Migrations SQL versionnées dans le répertoire supabase/migrations/

Capture du dashboard Supabase montrant les tables et les politiques RLS

Fonctionnalités détaillées

Authentification & Sécurité

Le système d'authentification est robuste et prêt pour la production :

Inscription / Connexion par email + mot de passe
OAuth Google intégré (flux complet avec callback)
Vérification email post-inscription
Mot de passe oublié avec lien de réinitialisation
Sessions persistantes avec cookies httpOnly et auto-rafraîchissement des tokens
Guards NestJS protégeant toutes les routes sensibles
Rôles hiérarchiques : Owner > Admin > Member

Page de connexion avec option Google OAuth et design moderne sombre

Gestion Multi-Entreprises

C'est le différenciateur principal du projet. Chaque utilisateur peut :

Créer et gérer plusieurs entreprises depuis un seul compte
Renseigner les informations légales complètes (SIRET, TVA, adresse, logo)
Inviter des membres par email avec des tokens sécurisés
Attribuer des rôles granulaires (owner, admin, member)
Basculer instantanément d'une entreprise à l'autre via le sélecteur

Interface du sélecteur d'entreprises dans le dashboard

Module CRM Intégré

Un véritable mini-CRM est intégré nativement, sans surcoût :

CRUD complet des clients par entreprise
Distinction Entreprise vs Particulier avec champs adaptés
Informations légales (SIRET, TVA pour les entreprises)
Adresse complète avec pays
Contact principal dédié
Conditions commerciales : délai de paiement, moyen préféré
Statut actif / inactif
Recherche et filtrage en temps réel
Statistiques par client : chiffre d'affaires, nombre de factures et devis
Historique complet des transactions (factures et devis liés)

Page de gestion des clients avec la liste, les filtres et les statistiques

Facturation & Devis

Le coeur métier de l'application :

Formulaire multi-étapes avec validation en temps réel
Calculs automatiques : montant HT, TVA (taux variable par ligne), TTC
Gestion des lignes avec descriptions détaillées
Statuts de cycle de vie : brouillon → envoyé → payé/accepté (ou en retard/refusé)
Conversion devis → facture en un clic
Génération PDF professionnelle avec les templates personnalisés
Envoi par email avec PDF en pièce jointe
Rappels automatiques pour les factures impayées
Protection : les factures marquées comme payées ne sont plus modifiables
Informations bancaires (IBAN) sur les factures

Formulaire de création de facture avec les lignes de facturation et le calcul automatique

Aperçu d'une facture PDF générée avec le template Modern

Personnalisation Avancée des Factures

L'un des points forts du projet — permettre aux utilisateurs de brander leurs documents :

4 templates professionnels : Modern, Corporate, Creative, Elegant
Upload de logo (PNG, JPG, SVG, max 2 MB)
Upload de watermark avec opacité réglable via slider
Palette de 4 couleurs personnalisables avec color picker
Prévisualisation en temps réel qui reflète chaque modification
Stockage optimisé dans Supabase Storage

Interface de personnalisation des factures avec le sélecteur de template et le color picker

Tableau de Bord & Statistiques

Le dashboard offre une vue synthétique de l'activité financière :

Statistiques globales : CA total, factures en attente, devis en cours
Graphiques interactifs avec Recharts
Vue par entreprise avec isolation des données
Accès rapide aux dernières factures et devis

Dashboard principal avec les graphiques de revenus et les indicateurs clés

Gestion de Projets

Pour organiser le travail par mission ou par client :

Création de projets par entreprise
Membres du projet avec permissions dédiées
Dashboard spécifique par projet
Isolation des données : chaque projet a ses propres factures et devis

Sécurité

La sécurité a été une priorité de bout en bout :

Mesure	Implémentation
Authentification	JWT via Supabase Auth + cookies httpOnly
Autorisation	Guards NestJS + décorateur @CurrentUser
Isolation des données	Row Level Security (RLS) PostgreSQL
Validation	class-validator avec whitelist strict
CORS	Origines autorisées configurables
Rôles	Hiérarchie owner > admin > member
Tokens d'invitation	Tokens uniques avec expiration
Protection des factures	Factures payées non modifiables

Déploiement & DevOps

Les deux applications sont Docker-ready avec des Dockerfiles multi-stage optimisés :

Backend (NestJS) :

FROM node:20-alpine AS builder
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM node:20-alpine AS runner
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm ci --omit=dev
COPY --from=builder /usr/src/app/dist ./dist
EXPOSE 3334
CMD ["node", "dist/main"]

Le frontend Next.js dispose également de son propre Dockerfile multi-stage. L'ensemble peut être orchestré avec Docker Compose pour un déploiement simplifié.

Stack technique récapitulative

Couche	Technologies
Frontend	Next.js 15, React 19, TailwindCSS 4, Radix UI, shadcn/ui, Framer Motion, Recharts, @react-pdf/renderer
Backend	NestJS, Node.js 20, class-validator, cookie-parser, Nodemailer
Base de données	PostgreSQL (Supabase), Row Level Security
Auth	Supabase Auth (email + OAuth Google), JWT httpOnly cookies
Stockage	Supabase Storage (logos, watermarks, PDFs)
DevOps	Docker multi-stage, ESLint, TypeScript
UI/UX	Design sombre moderne, animations Framer Motion, responsive

Résultats & Métriques

85% des fonctionnalités prévues implémentées et fonctionnelles
9 modules backend couvrant auth, entreprises, projets, finances, clients, invitations, personnalisation, mail
4 templates PDF professionnels avec personnalisation complète
Temps de réponse API < 500ms en moyenne
Architecture conçue pour une scalabilité horizontale

Ce que j'ai appris

Ce projet m'a permis de consolider et approfondir de nombreuses compétences :

Architecture découplée : concevoir une API REST propre avec NestJS et la consommer depuis Next.js
Sécurité applicative : implémentation complète de l'authentification, des guards, du RLS et de la gestion des rôles
Gestion d'état complexe : contextes React pour le multi-entreprises, synchronisation auth frontend/backend
Génération PDF : création de documents professionnels personnalisés côté client avec @react-pdf/renderer
Design système : construction d'une UI cohérente et moderne avec TailwindCSS et shadcn/ui
DevOps : conteneurisation Docker multi-stage pour frontend et backend

Prochaines étapes

Le projet continue d'évoluer avec une roadmap ambitieuse :

Intégration paiements en ligne via Stripe
Notifications temps réel avec WebSocket
Application mobile React Native
Export Excel/CSV avancé
API publique et webhooks pour intégrations tierces
Multi-devises et internationalisation

Roadmap visuelle du projet avec les prochaines fonctionnalités planifiées

Conclusion

InvoicePro est bien plus qu'un simple outil de facturation. C'est une plateforme complète qui combine gestion multi-entreprises, CRM intégré, personnalisation avancée des documents et sécurité de niveau entreprise, le tout dans une interface moderne et intuitive.

Ce projet démontre ma capacité à concevoir et développer une application SaaS complète, de la base de données à l'interface utilisateur, en passant par l'API, la sécurité et le déploiement.