🚀🚀 ROADMAP DÉVELOPPEMENT SAAS — STACK MODERNE Supabase · Vercel · Stripe · Next.

js

⚡
ROADMAP DÉVELOPPEMENT
WEB SAAS
Stack moderne · Supabase · [Link] · Stripe · Vercel

[Link] Supabase Stripe Vercel Resend Clerk/Auth

10 Étapes · Commandes & Code snippets · Tier gratuit maximisé

De 0 à la production en 4 à 12 semaines en solo/duo

Roadmap Dev SaaS · Stack Moderne · Confidentiel

🚀🚀 ROADMAP DÉVELOPPEMENT SAAS — STACK MODERNE Supabase · Vercel · Stripe · [Link]

Philosophie & Stack Overview

Cette roadmap est conçue pour un développeur solo ou une petite équipe (1-3 devs) qui veut lancer un SaaS en
production rapidement en utilisant des services managés (BaaS/PaaS) plutôt que de tout construire from scratch.
L'objectif est d'éliminer les tâches à faible valeur ajoutée (gestion de serveurs, implémentation d'auth, gestion de
fichiers) pour se concentrer sur la logique métier différenciatrice.

Besoin Outil recommandé Tier gratuit

Frontend + SSR [Link] 14 (App Router) Open source

Base de données Supabase (PostgreSQL) 500 MB DB, 2 projets

Auth utilisateurs Supabase Auth ou Clerk Illimité (Supabase) / 10k MAU (Clerk)

Stockage fichiers Supabase Storage 1 GB inclus

Temps réel Supabase Realtime 200 connexions simultanées

Edge Functions Supabase Edge Functions 500k invocations/mois

Paiements Stripe 0% jusqu'aux premières transactions

Emails Resend 3 000 emails/mois gratuits

transactionnels

Déploiement Vercel Illimité projets perso + previews

Monitoring erreurs Sentry 5k erreurs/mois gratuites

Analytics produit PostHog Cloud 1M events/mois gratuits

Styling Tailwind CSS + Shadcn/ui Open source

State & Data fetching TanStack Query (React Open source

Query)

Formulaires & React Hook Form + Zod Open source

validation

Envoi emails React Email Open source

templates

Déploiement base de Supabase CLI + Migrations Open source

données

Roadmap Dev SaaS · Stack Moderne · Confidentiel

🚀🚀 ROADMAP DÉVELOPPEMENT SAAS — STACK MODERNE Supabase · Vercel · Stripe · [Link]

🛠🛠 ÉTAPE 1 — SETUP DU PROJET & ENVIRONNEMENT

⏱ Durée estimée (dev solo/duo) : 2–4 heures 💰💰 Coût outils (tier gratuit) : $0 (tout gratuit)

1.1 — Initialisation du Projet [Link]

Outil / Service Responsabilité Tâches concrètes & Commandes

Terminal Création projet → Créer le projet : npx create-next-app@latest mon-saas --typescript -

-tailwind --eslint --app --src-dir
→ Choisir : App Router (Yes), Turbopack (Yes), import alias @/* (Yes)
→ Entrer dans le dossier : cd mon-saas
→ Installer les dépendances essentielles en une commande
→ Ouvrir dans VS Code : code .

Shadcn/ui Composants UI → Initialiser Shadcn : npx shadcn@latest init

→ Choisir le style : Default, Base color: Slate, CSS variables: Yes
→ Installer les composants de base : npx shadcn@latest add button
input label card dialog dropdown-menu form select separator sheet
skeleton sonner table tabs tooltip badge avatar
→ Les composants sont dans src/components/ui — personnalisables à
100%

Git + GitHub Versioning → Créer un repo GitHub (public ou privé)

→ git init && git add . && git commit -m 'feat: initial setup'
→ git remote add origin <url> && git push -u origin main
→ Créer les branches : main (production), develop (staging), feat/*
(features)

# Installation des dépendances essentielles

npm install @supabase/supabase-js @supabase/ssr
npm install @tanstack/react-query react-hook-form zod @hookform/resolvers
npm install stripe @stripe/stripe-js
npm install resend react-email
npm install lucide-react clsx tailwind-merge
npm install @sentry/nextjs
npm i -D supabase

1.2 — Configuration des fichiers d'environnement

Outil / Service Responsabilité Tâches concrètes & Commandes

.[Link] Variables d'env → Créer le fichier .[Link] à la racine (jamais commité dans Git)
→ Ajouter NEXT_PUBLIC_SUPABASE_URL et
NEXT_PUBLIC_SUPABASE_ANON_KEY
→ Ajouter SUPABASE_SERVICE_ROLE_KEY (côté serveur
uniquement — jamais exposé)
→ Ajouter STRIPE_SECRET_KEY, STRIPE_WEBHOOK_SECRET,
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
→ Ajouter RESEND_API_KEY, NEXT_PUBLIC_APP_URL

Roadmap Dev SaaS · Stack Moderne · Confidentiel

🚀🚀 ROADMAP DÉVELOPPEMENT SAAS — STACK MODERNE Supabase · Vercel · Stripe · [Link]

Outil / Service Responsabilité Tâches concrètes & Commandes

→ Créer .[Link] (avec les noms des variables sans les valeurs)
pour l'équipe
→ Ajouter .[Link] dans .gitignore

TypeScript Configuration TS → Vérifier [Link] : strict: true, paths: { '@/*': ['./src/*'] }

→ Créer src/types/[Link] pour les types globaux
→ Créer src/lib/[Link] avec la fonction cn() de Shadcn

# .[Link]
NEXT_PUBLIC_SUPABASE_URL=[Link]
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGc...
SUPABASE_SERVICE_ROLE_KEY=eyJhbGc... # SERVER ONLY

STRIPE_SECRET_KEY=sk_test_...
STRIPE_WEBHOOK_SECRET=whsec_...
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_...

RESEND_API_KEY=re_...
NEXT_PUBLIC_APP_URL=[Link]

✅ Livrables & Checklist

→ Projet [Link] 14 créé avec TypeScript + Tailwind + Shadcn/ui
→ Toutes les dépendances installées et fonctionnelles
→ Repo GitHub configuré avec branching strategy
→ Variables d'environnement configurées (.[Link] + .[Link])
→ npm run dev fonctionne sans erreur sur localhost:3000

Roadmap Dev SaaS · Stack Moderne · Confidentiel

🚀🚀 ROADMAP DÉVELOPPEMENT SAAS — STACK MODERNE Supabase · Vercel · Stripe · [Link]

🗄🗄 ÉTAPE 2 — SUPABASE — BASE DE DONNÉES & BACKEND

⏱ Durée estimée (dev solo/duo) : 4–8 heures 💰💰 Coût outils (tier gratuit) : $0 (tier gratuit : 500
MB, 2 projets)

2.1 — Création et configuration du projet Supabase

Outil / Service Responsabilité Tâches concrètes & Commandes

Supabase Setup initial → Créer un compte sur [Link]

Dashboard → New Project → choisir une région proche de tes utilisateurs (Europe
West pour FR)
→ Copier les clés API dans .[Link] (URL + anon key + service role
key)
→ Activer le Row Level Security (RLS) dans Authentication > Policies
→ Configurer les URLs autorisées : Site URL = [Link]
(puis ton domaine)
→ Configurer les Redirect URLs pour l'auth :
[Link]

Supabase CLI Migrations locales → Initialiser le projet local : npx supabase init
→ Login : npx supabase login
→ Lier au projet distant : npx supabase link --project-ref <ref-id>
→ Lancer Supabase localement : npx supabase start (démarre
PostgreSQL, Auth, Storage en local)
→ Workflow : modifier supabase/migrations/ → push vers la prod

2.2 — Conception et création du schéma de base de données

Outil / Service Responsabilité Tâches concrètes & Commandes

SQL Editor Tables principales → Créer la migration initiale : npx supabase migration new
create_initial_schema
→ Table profiles : id (uuid, FK [Link]), email, full_name,
avatar_url, plan, created_at
→ Table organizations : id, name, slug (unique), owner_id, plan,
stripe_customer_id
→ Table memberships : user_id, org_id, role (owner|admin|member),
created_at
→ Table subscriptions : org_id, stripe_subscription_id, status, plan,
current_period_end
→ Créer les tables métier spécifiques à ton produit
→ Appliquer : npx supabase db push

Row Level Sécurité des → Activer RLS sur TOUTES les tables : ALTER TABLE table_name
Security données ENABLE ROW LEVEL SECURITY
→ Policy SELECT profiles : users can only see their own profile
→ Policy UPDATE profiles : users can only update their own profile
→ Policy SELECT organizations : members can see their orgs (JOIN
memberships)
→ Policy INSERT/UPDATE métier : vérifier le membership et le plan

Roadmap Dev SaaS · Stack Moderne · Confidentiel

🚀🚀 ROADMAP DÉVELOPPEMENT SAAS — STACK MODERNE Supabase · Vercel · Stripe · [Link]

Outil / Service Responsabilité Tâches concrètes & Commandes

→ Tester chaque policy depuis l'éditeur SQL avec set role

authenticated

Supabase Typage TypeScript → Générer les types TS depuis le schéma : npx supabase gen types
Types typescript --local > src/types/[Link]
→ Créer un script npm : 'supabase:types' dans [Link] pour
régénérer facilement
→ Importer Database type dans les server actions et API routes

-- Exemple : migration create_profiles_table

CREATE TABLE [Link] (
id UUID REFERENCES [Link](id) ON DELETE CASCADE PRIMARY KEY,
email TEXT NOT NULL,
full_name TEXT,
avatar_url TEXT,
plan TEXT DEFAULT 'free' CHECK (plan IN ('free','pro','enterprise')),
created_at TIMESTAMPTZ DEFAULT NOW(),
updated_at TIMESTAMPTZ DEFAULT NOW()
);

ALTER TABLE [Link] ENABLE ROW LEVEL SECURITY;

-- Policy : chaque user ne voit que son profil

CREATE POLICY "Users can view own profile"
ON [Link] FOR SELECT
USING ([Link]() = id);

CREATE POLICY "Users can update own profile"

ON [Link] FOR UPDATE
USING ([Link]() = id);

-- Trigger : auto-créer le profil à l'inscription

CREATE OR REPLACE FUNCTION public.handle_new_user()
RETURNS TRIGGER AS $$
BEGIN
INSERT INTO [Link] (id, email, full_name, avatar_url)
VALUES ([Link], [Link], NEW.raw_user_meta_data->>'full_name',
NEW.raw_user_meta_data->>'avatar_url');
RETURN NEW;
END;
$$ LANGUAGE plpgsql SECURITY DEFINER;

CREATE TRIGGER on_auth_user_created

AFTER INSERT ON [Link]
FOR EACH ROW EXECUTE FUNCTION public.handle_new_user();

2.3 — Client Supabase dans [Link]

Outil / Service Responsabilité Tâches concrètes & Commandes

Supabase Client config → Créer src/lib/supabase/[Link] → client pour le browser

SSR (createBrowserClient)
→ Créer src/lib/supabase/[Link] → client pour les Server
Components et Server Actions (createServerClient)
→ Créer src/[Link] → refresh des sessions auth
automatiquement sur chaque requête
→ Utiliser le client serveur dans les Server Components pour les
requêtes sécurisées

Roadmap Dev SaaS · Stack Moderne · Confidentiel

🚀🚀 ROADMAP DÉVELOPPEMENT SAAS — STACK MODERNE Supabase · Vercel · Stripe · [Link]

Outil / Service Responsabilité Tâches concrètes & Commandes

→ Utiliser le client browser dans les Client Components pour le temps

réel et les abonnements

// src/lib/supabase/[Link] (Server Components & Actions)

import { createServerClient } from '@supabase/ssr'
import { cookies } from 'next/headers'
import { Database } from '@/types/supabase'

export function createClient() {

const cookieStore = cookies()
return createServerClient<Database>(
[Link].NEXT_PUBLIC_SUPABASE_URL!,
[Link].NEXT_PUBLIC_SUPABASE_ANON_KEY!,
{ cookies: { getAll: () => [Link](),
setAll: (cs) => [Link](c => [Link](c)) } }
)
}

// Utilisation dans un Server Component :

// const supabase = createClient()
// const { data: profile } = await [Link]('profiles').select('*').single()

✅ Livrables & Checklist

→ Projet Supabase créé et configuré (EU region)
→ Schéma de base de données avec migrations versionées
→ Row Level Security actif sur toutes les tables
→ Types TypeScript générés depuis le schéma
→ Client Supabase configuré (server + browser + middleware)
→ Trigger auto-création de profil à l'inscription fonctionnel

Roadmap Dev SaaS · Stack Moderne · Confidentiel

🚀🚀 ROADMAP DÉVELOPPEMENT SAAS — STACK MODERNE Supabase · Vercel · Stripe · [Link]

🔐🔐 ÉTAPE 3 — AUTHENTIFICATION AVEC SUPABASE AUTH

⏱ Durée estimée (dev solo/duo) : 4–8 heures 💰💰 Coût outils (tier gratuit) : $0 (illimité avec
Supabase Auth)

3.1 — Configuration de l'Auth Supabase

Outil / Service Responsabilité Tâches concrètes & Commandes

Supabase Providers → Activer Email + Password dans Authentication > Providers

Auth → Configurer Google OAuth : créer un projet Google Cloud → OAuth
2.0 credentials → coller dans Supabase
→ Configurer GitHub OAuth : GitHub Settings > Developer Settings >
OAuth Apps → coller dans Supabase
→ Personnaliser les templates d'email (confirmation, reset password)
dans Authentication > Email Templates
→ Activer la confirmation d'email (Confirm email: ON)
→ Configurer le rate limiting anti-abus dans Authentication > Rate
Limits

[Link] Protection des → Créer src/[Link] pour intercepter toutes les requêtes
Middleware routes → Refresh automatique des tokens Supabase sur chaque requête
→ Rediriger les utilisateurs non connectés vers /login
→ Rediriger les utilisateurs connectés depuis /login vers /dashboard
→ Protéger les routes /dashboard/* et /api/* privées

3.2 — Développement des pages d'Auth

Outil / Service Responsabilité Tâches concrètes & Commandes

Server Logic auth → Créer src/app/auth/[Link] avec les Server Actions [Link]
Actions → Action signUp : [Link]({ email, password, options: {
data: { full_name } } })
→ Action signIn : [Link]({ email,
password })
→ Action signOut : [Link]() → redirect vers /login
→ Action resetPassword :
[Link](email)
→ Action signInWithOAuth : [Link]({
provider: 'google' })
→ Gérer les erreurs avec des messages user-friendly (toast Sonner)

Pages Auth UI → Créer src/app/(auth)/login/[Link] → formulaire email/password +

boutons OAuth
→ Créer src/app/(auth)/register/[Link] → formulaire inscription
→ Créer src/app/(auth)/reset-password/[Link] → formulaire reset
→ Créer src/app/auth/callback/[Link] → handler du retour OAuth
→ Créer src/app/(auth)/[Link] → layout centré pour les pages auth
→ Utiliser React Hook Form + Zod pour la validation des formulaires
→ Ajouter les états de chargement et les messages d'erreur inline

Roadmap Dev SaaS · Stack Moderne · Confidentiel

🚀🚀 ROADMAP DÉVELOPPEMENT SAAS — STACK MODERNE Supabase · Vercel · Stripe · [Link]

// src/app/auth/[Link] — Server Actions

'use server'
import { createClient } from '@/lib/supabase/server'
import { redirect } from 'next/navigation'

export async function signIn(formData: FormData) {

const supabase = createClient()
const { error } = await [Link]({
email: [Link]('email') as string,
password: [Link]('password') as string,
})
if (error) return { error: [Link] }
redirect('/dashboard')
}

export async function signUp(formData: FormData) {

const supabase = createClient()
const { error } = await [Link]({
email: [Link]('email') as string,
password: [Link]('password') as string,
options: { data: { full_name: [Link]('full_name') } }
})
if (error) return { error: [Link] }
redirect('/check-email') // Page "vérifie ton email"
}

// src/app/auth/callback/[Link] — OAuth callback

import { NextResponse } from 'next/server'
export async function GET(request: Request) {
const { searchParams, origin } = new URL([Link])
const code = [Link]('code')
const supabase = createClient()
if (code) await [Link](code)
return [Link](`${origin}/dashboard`)
}

✅ Livrables & Checklist

→ Inscription par email + confirmation email fonctionnelle
→ Connexion email/password fonctionnelle
→ OAuth Google et GitHub fonctionnels
→ Reset de mot de passe par email fonctionnel
→ Middleware de protection des routes en place
→ Profil auto-créé à chaque inscription (trigger Supabase)

⚠ Pièges à éviter
→ Ne JAMAIS utiliser la service_role_key côté client — uniquement dans les Server Actions ou API Routes
→ Toujours activer RLS avant de mettre en production — sans RLS tout le monde accède à tout
→ Pour le SSR [Link], utiliser impérativement @supabase/ssr et non pas @supabase/auth-helpers
(déprécié)

Roadmap Dev SaaS · Stack Moderne · Confidentiel

🚀🚀 ROADMAP DÉVELOPPEMENT SAAS — STACK MODERNE Supabase · Vercel · Stripe · [Link]

⚙ ÉTAPE 4 — LOGIQUE MÉTIER & FONCTIONNALITÉS CORE

⏱ Durée estimée (dev solo/duo) : 2–6 💰💰 Coût outils (tier gratuit) : $0 (pas d'outil
semaines (selon complexité) payant nécessaire)

4.1 — Architecture des Server Components et Server Actions

Outil / Service Responsabilité Tâches concrètes & Commandes

[Link] App Structure de fichiers → Créer le layout principal : src/app/(dashboard)/[Link] avec

Router Sidebar + Topbar
→ Créer src/app/(dashboard)/dashboard/[Link] → page principale
(Server Component)
→ Organiser les routes par feature : /dashboard/[feature]/[Link]
→ Utiliser les Server Components pour les fetches de données (pas
de useEffect/fetch côté client)
→ Créer src/app/(dashboard)/settings/[Link] → paramètres
utilisateur
→ Créer les [Link] et [Link] pour chaque segment de route
→ Utiliser les Route Groups () pour séparer layouts sans créer de
segments URL

Server Mutations de → Créer les Server Actions pour toutes les mutations (create, update,
Actions données delete)
→ Valider les inputs avec Zod dans chaque Server Action
→ Toujours vérifier l'authentification au début de chaque Server Action
→ Utiliser revalidatePath() ou revalidateTag() après chaque mutation
→ Gérer les erreurs et retourner des messages clairs
→ Utiliser useFormState + useFormStatus pour les formulaires
progressifs

4.2 — Développement des features

Outil / Service Responsabilité Tâches concrètes & Commandes

Supabase + Data fetching → Configurer TanStack Query : créer src/providers/[Link]

React Query patterns → Pattern Server Component : await [Link]('table').select()
directement
→ Pattern Client Component : useQuery({ queryKey, queryFn }) pour
les données dynamiques
→ Utiliser Supabase Realtime pour les updates en direct :
[Link]().on('postgres_changes',...)
→ Implémenter la pagination cursor-based pour les longues listes
→ Utiliser les Supabase RPC (fonctions SQL) pour les requêtes
complexes

Supabase Upload de fichiers → Créer les buckets dans Supabase Storage (ex: avatars, documents
Storage — public ou privé)
→ Configurer les policies RLS sur les buckets
→ Implémenter l'upload avec
[Link]('bucket').upload(path, file)

Roadmap Dev SaaS · Stack Moderne · Confidentiel

🚀🚀 ROADMAP DÉVELOPPEMENT SAAS — STACK MODERNE Supabase · Vercel · Stripe · [Link]

Outil / Service Responsabilité Tâches concrètes & Commandes

→ Générer les URLs publiques ou signées (pour les buckets privés)

→ Créer un composant FileUpload réutilisable avec preview et
progress bar
→ Limiter la taille des fichiers et les types MIME acceptés
→ Supprimer les anciens fichiers avant upload si remplacement
(avatar, etc.)

Supabase Temps réel → Activer Realtime sur les tables dans le Dashboard Supabase
Realtime → S'abonner aux changements : [Link]('table-
changes').on('postgres_changes', ...)
→ Implémenter les notifications in-app en temps réel
→ Utiliser les Broadcast channels pour les features collaboratives
→ Unsubscribe proprement au unmount du composant (cleanup dans
useEffect)

// Pattern : Server Component avec Supabase

// src/app/(dashboard)/projects/[Link]
import { createClient } from '@/lib/supabase/server'
import { redirect } from 'next/navigation'

export default async function ProjectsPage() {

const supabase = createClient()
const { data: { user } } = await [Link]()
if (!user) redirect('/login')

const { data: projects } = await supabase

.from('projects')
.select('*, memberships(user_id, role)')
.order('created_at', { ascending: false })

return <ProjectsList projects={projects ?? []} />

}

// Pattern : Server Action pour créer un projet

// src/app/(dashboard)/projects/[Link]
'use server'
import { createClient } from '@/lib/supabase/server'
import { revalidatePath } from 'next/cache'
import { z } from 'zod'

const CreateProjectSchema = [Link]({

name: [Link]().min(1).max(100),
description: [Link]().max(500).optional(),
})

export async function createProject(formData: FormData) {

const supabase = createClient()
const { data: { user } } = await [Link]()
if (!user) return { error: 'Non autorisé' }

const parsed = [Link]({

name: [Link]('name'),
description: [Link]('description'),
})
if (![Link]) return { error: [Link]() }

const { error } = await [Link]('projects').insert({

...[Link], owner_id: [Link]
})
if (error) return { error: [Link] }
revalidatePath('/dashboard/projects')

Roadmap Dev SaaS · Stack Moderne · Confidentiel

🚀🚀 ROADMAP DÉVELOPPEMENT SAAS — STACK MODERNE Supabase · Vercel · Stripe · [Link]

return { success: true }

}

✅ Livrables & Checklist

→ Toutes les features MVP fonctionnelles et testées manuellement
→ Server Components pour toutes les pages data-heavy
→ Server Actions pour toutes les mutations
→ Upload de fichiers fonctionnel (si nécessaire)
→ Validation Zod sur toutes les inputs
→ Gestion des erreurs et états de chargement sur toutes les pages

Roadmap Dev SaaS · Stack Moderne · Confidentiel

🚀🚀 ROADMAP DÉVELOPPEMENT SAAS — STACK MODERNE Supabase · Vercel · Stripe · [Link]

💳💳 ÉTAPE 5 — PAIEMENTS AVEC STRIPE

⏱ Durée estimée (dev solo/duo) : 8–16 heures 💰💰 Coût outils (tier gratuit) : $0 (Stripe ne
prélève qu'à la transaction : 1.4% + 0.25€ EU)

5.1 — Configuration Stripe

Outil / Service Responsabilité Tâches concrètes & Commandes

Stripe Setup → Créer un compte Stripe et activer le mode test

Dashboard → Créer les Products et les Plans dans Stripe Dashboard > Products
→ Ex: Product 'Pro Plan' → Price mensuelle 29€/mois recurring +
Price annuelle 290€/an
→ Ex: Product 'Enterprise' → Price personnalisée (contact sales)
→ Copier les Price IDs dans les constantes du projet
→ Configurer le Stripe Customer Portal (apparence, features activées)
→ Ajouter webhook endpoint : Dashboard > Webhooks > Add endpoint
→ URL + events
→ Events à écouter : [Link],
[Link], [Link],
invoice.payment_failed

Stripe CLI Développement → Installer Stripe CLI : brew install stripe/stripe-cli/stripe

local → Login : stripe login
→ Écouter les webhooks en local : stripe listen --forward-to
localhost:3000/api/webhooks/stripe
→ Copier le webhook secret affiché dans .[Link] →
STRIPE_WEBHOOK_SECRET
→ Tester les événements : stripe trigger [Link]

5.2 — Intégration Stripe dans [Link]

Outil / Service Responsabilité Tâches concrètes & Commandes

Stripe Paiement → Créer src/lib/[Link] → instance Stripe avec la clé secrète

Checkout → Créer Server Action createCheckoutSession : Stripe Checkout
hosted (le plus simple)
→ Associer le Stripe Customer ID au profil Supabase (créer ou
récupérer le customer)
→ Passer les metadata : user_id, org_id, plan pour identifier dans le
webhook
→ Configurer success_url et cancel_url
→ Créer le bouton 'Upgrade' qui appelle la Server Action → redirect
vers Stripe

Webhook Synchronisation → Créer src/app/api/webhooks/stripe/[Link] (POST handler)

Handler → Vérifier la signature du webhook :
[Link](body, signature, secret)
→ Gérer [Link] → mettre à jour le plan dans
Supabase
→ Gérer [Link] → synchroniser le statut

Roadmap Dev SaaS · Stack Moderne · Confidentiel

🚀🚀 ROADMAP DÉVELOPPEMENT SAAS — STACK MODERNE Supabase · Vercel · Stripe · [Link]

Outil / Service Responsabilité Tâches concrètes & Commandes

→ Gérer [Link] → rétrograder au plan free

→ Gérer invoice.payment_failed → notifier l'utilisateur par email
→ Utiliser la service_role_key Supabase dans le webhook pour
bypasser le RLS

Customer Self-service → Créer Server Action createPortalSession → redirect vers le portail

Portal Stripe
→ Le portail Stripe gère : upgrade/downgrade, annulation, mise à jour
CB, téléchargement factures
→ Ajouter le bouton 'Gérer mon abonnement' dans la page Settings >
Billing

// src/app/(dashboard)/billing/[Link]
'use server'
import Stripe from 'stripe'
import { createClient } from '@/lib/supabase/server'
import { redirect } from 'next/navigation'

const stripe = new Stripe([Link].STRIPE_SECRET_KEY!)

export async function createCheckoutSession(priceId: string) {

const supabase = createClient()
const { data: { user } } = await [Link]()
if (!user) return { error: 'Non autorisé' }

// Récupérer ou créer le Stripe Customer

const { data: profile } = await supabase
.from('profiles').select('stripe_customer_id, email').eq('id', [Link]).single()

let customerId = profile?.stripe_customer_id

if (!customerId) {
const customer = await [Link]({
email: profile?.email!, metadata: { supabase_user_id: [Link] }
})
customerId = [Link]
await [Link]('profiles').update({ stripe_customer_id: customerId }).eq('id',
[Link])
}

const session = await [Link]({

customer: customerId,
mode: 'subscription',
payment_method_types: ['card'],
line_items: [{ price: priceId, quantity: 1 }],
success_url: `${[Link].NEXT_PUBLIC_APP_URL}/dashboard?upgraded=true`,
cancel_url: `${[Link].NEXT_PUBLIC_APP_URL}/pricing`,
metadata: { user_id: [Link] },
subscription_data: { trial_period_days: 14 }, // Free trial 14j
})
redirect([Link]!)
}

✅ Livrables & Checklist

→ Plans tarifaires créés dans Stripe Dashboard
→ Checkout Stripe fonctionnel (test mode)
→ Webhook handler synchronisant Supabase avec les événements Stripe
→ Customer Portal accessible depuis les Settings

Roadmap Dev SaaS · Stack Moderne · Confidentiel

🚀🚀 ROADMAP DÉVELOPPEMENT SAAS — STACK MODERNE Supabase · Vercel · Stripe · [Link]

→ Plan de l'utilisateur mis à jour automatiquement après paiement

→ Email de notification envoyé en cas d'échec de paiement

⚠ Pièges à éviter
→ Toujours vérifier la signature du webhook Stripe — ne jamais faire confiance au body sans vérification
→ Utiliser la service_role_key Supabase dans les webhooks pour contourner le RLS légitimement
→ Tester TOUS les événements webhook avec stripe trigger avant de passer en production
→ Ne pas mettre en prod sans avoir testé le flow complet : paiement → webhook → mise à jour DB

Roadmap Dev SaaS · Stack Moderne · Confidentiel

🚀🚀 ROADMAP DÉVELOPPEMENT SAAS — STACK MODERNE Supabase · Vercel · Stripe · [Link]

📧📧 ÉTAPE 6 — EMAILS TRANSACTIONNELS AVEC RESEND

⏱ Durée estimée (dev solo/duo) : 3–6 heures 💰💰 Coût outils (tier gratuit) : $0 (3 000
emails/mois gratuits)

6.1 — Setup Resend + React Email

Outil / Service Responsabilité Tâches concrètes & Commandes

Resend Configuration → Créer un compte sur [Link] → récupérer l'API Key

→ Ajouter et vérifier ton domaine dans Resend (ajouter les
enregistrements DNS SPF + DKIM)
→ Sans domaine vérifié : utiliser onboarding@[Link] pour les
tests
→ Ajouter RESEND_API_KEY dans .[Link]

React Email Templates → Initialiser React Email : npx create-email@latest (crée le dossier
emails/)
→ Lancer le preview : npm run dev dans le dossier emails →
localhost:3000
→ Créer les templates React pour chaque email : welcome, invite,
reset-password, billing-alert
→ Utiliser les composants @react-email/components (Html, Button,
Text, Link, Img, Hr, Section)
→ Tester le rendu sur différents clients mail (Gmail, Outlook) via le
preview

6.2 — Intégration et envoi d'emails

Outil / Service Responsabilité Tâches concrètes & Commandes

Resend API Envoi → Créer src/lib/[Link] → fonction sendEmail centralisée

programmatique → Envoyer l'email de bienvenue dans le webhook Supabase auth
(trigger PostgreSQL)
→ Envoyer l'email d'invitation de membre (Server Action)
→ Envoyer l'email de confirmation de paiement (webhook Stripe)
→ Envoyer l'email d'alerte d'échec de paiement (webhook Stripe
invoice.payment_failed)
→ Envoyer les emails de reset password (géré automatiquement par
Supabase Auth)
→ Ajouter les emails dans une queue BullMQ ou Supabase Edge
Function pour l'asynchrone

// src/lib/[Link]
import { Resend } from 'resend'
import { WelcomeEmail } from '@/emails/welcome'
import { InvitationEmail } from '@/emails/invitation'

const resend = new Resend([Link].RESEND_API_KEY)

export async function sendWelcomeEmail(to: string, name: string) {

Roadmap Dev SaaS · Stack Moderne · Confidentiel

🚀🚀 ROADMAP DÉVELOPPEMENT SAAS — STACK MODERNE Supabase · Vercel · Stripe · [Link]

return [Link]({
from: 'Mon SaaS <hello@[Link]>',
to,
subject: 'Bienvenue sur Mon SaaS ! 🎉🎉',
react: WelcomeEmail({ name }),
})
}

export async function sendInvitationEmail(

to: string, inviterName: string, orgName: string, inviteUrl: string
) {
return [Link]({
from: 'Mon SaaS <hello@[Link]>',
to,
subject: `${inviterName} t'invite à rejoindre ${orgName}`,
react: InvitationEmail({ inviterName, orgName, inviteUrl }),
})
}

// emails/[Link] — Template React Email

import { Html, Button, Text, Heading, Hr } from '@react-email/components'
export function WelcomeEmail({ name }: { name: string }) {
return (
<Html>
<Heading>Bienvenue, {name} ! 👋👋</Heading>
<Text>Ton compte est prêt. Commence dès maintenant :</Text>
<Button href="[Link]
Accéder au Dashboard
</Button>
<Hr />
<Text style={{ color: '#666', fontSize: '12px' }}>
Tu reçois cet email car tu as créé un compte sur Mon SaaS.
</Text>
</Html>
)
}

✅ Livrables & Checklist

→ Templates React Email créés pour les 4+ emails clés
→ Email de bienvenue envoyé automatiquement à l'inscription
→ Email d'invitation de membre fonctionnel
→ Emails de facturation (confirmation + échec) fonctionnels
→ Preview des emails validé sur Gmail et Outlook
→ Domaine d'envoi vérifié (SPF + DKIM configurés)

Roadmap Dev SaaS · Stack Moderne · Confidentiel

🚀🚀 ROADMAP DÉVELOPPEMENT SAAS — STACK MODERNE Supabase · Vercel · Stripe · [Link]

🚀🚀 ÉTAPE 7 — DÉPLOIEMENT SUR VERCEL

⏱ Durée estimée (dev solo/duo) : 2–4 heures 💰💰 Coût outils (tier gratuit) : $0 (Vercel Hobby
tier : illimité pour projets perso)

7.1 — Configuration et déploiement

Outil / Service Responsabilité Tâches concrètes & Commandes

Vercel Deploy initial → Créer un compte Vercel → Import Git Repository (connecter
GitHub)
→ Sélectionner le repo → Vercel détecte automatiquement [Link]
→ Configurer les variables d'environnement dans Vercel > Settings >
Environment Variables
→ Ajouter TOUTES les variables de .[Link] en Production et
Preview
→ Cliquer Deploy → Vercel build et déploie automatiquement
→ Configurer le domaine personnalisé : Settings > Domains → ajouter
ton domaine
→ Vercel configure automatiquement le SSL/TLS (Let's Encrypt)

Vercel CI/CD Automatisation → Chaque push sur main → déploiement automatique en Production
→ Chaque Pull Request → Preview Deployment avec URL unique
(partage facile pour review)
→ Configurer les Branch Protections sur GitHub (require PR before
merge)
→ Activer Vercel Analytics (Core Web Vitals intégrés) dans Settings >
Analytics
→ Activer Vercel Speed Insights pour les métriques de performance

Supabase Base de données → Créer un 2ème projet Supabase dédié à la production (ne jamais
Prod prod utiliser le projet dev en prod)
→ Appliquer toutes les migrations : npx supabase db push --db-url
<prod-db-url>
→ Mettre à jour les variables Vercel avec les clés du projet Supabase
de production
→ Configurer les URLs autorisées dans Supabase Auth avec le vrai
domaine
→ Activer les backups automatiques quotidiens dans Supabase
Dashboard

7.2 — Optimisation des performances

Outil / Service Responsabilité Tâches concrètes & Commandes

[Link] Config Optimisations → Activer les images optimisées : [Link] → images: {

remotePatterns: [...] }
→ Configurer les headers de cache pour les assets statiques
→ Activer la compression gzip/brotli (activée par défaut sur Vercel)
→ Configurer l'ISR (Incremental Static Regeneration) pour les pages
semi-statiques

Roadmap Dev SaaS · Stack Moderne · Confidentiel

🚀🚀 ROADMAP DÉVELOPPEMENT SAAS — STACK MODERNE Supabase · Vercel · Stripe · [Link]

Outil / Service Responsabilité Tâches concrètes & Commandes

→ Analyser le bundle : ANALYZE=true npm run build → vérifier les

chunks volumineux
→ Lazy-loader les composants lourds (charts, éditeurs) avec
next/dynamic
→ Utiliser next/image pour toutes les images (auto-optimisation WebP
+ responsive)

Supabase Optimisations DB → Créer les index sur les colonnes fréquemment filtrées (user_id,
org_id, status)
→ Activer le Connection Pooling (Supavisor) pour les environnements
serverless
→ Utiliser les vues matérialisées pour les agrégations coûteuses
→ Surveiller les queries lentes dans Supabase Dashboard > Reports

# Checklist pré-déploiement production

# 1. Variables d'environnement Vercel configurées

vercel env ls --environment production

# 2. Build sans erreur

npm run build

# 3. Migrations production appliquées

npx supabase db push --db-url postgresql://...

# 4. Stripe en mode Live (pas test!)

# Remplacer sk_test_... par sk_live_... dans Vercel env vars
# Mettre à jour le webhook Stripe avec l'URL de production
# Mettre à jour STRIPE_WEBHOOK_SECRET avec le nouveau secret

# 5. Tester le flow complet sur la prod (compte test)

# Inscription → Confirmation email → Dashboard → Upgrade → Webhook

# 6. Vérifier les headers de sécurité

curl -I [Link] | grep -i "strict-transport|x-frame|content-security"

✅ Livrables & Checklist

→ Application déployée sur Vercel avec domaine personnalisé + SSL
→ CI/CD automatique : push main = deploy prod, PR = preview deploy
→ Variables d'environnement de production configurées dans Vercel
→ Projet Supabase de production séparé avec migrations appliquées
→ Score Lighthouse > 90 sur les pages principales
→ Stripe passé en mode Live avec nouveau webhook configuré

Roadmap Dev SaaS · Stack Moderne · Confidentiel

🚀🚀 ROADMAP DÉVELOPPEMENT SAAS — STACK MODERNE Supabase · Vercel · Stripe · [Link]

📊📊 ÉTAPE 8 — MONITORING & OBSERVABILITÉ

⏱ Durée estimée (dev solo/duo) : 4–6 heures 💰💰 Coût outils (tier gratuit) : $0 (tiers gratuits de
tous les outils)

8.1 — Monitoring des erreurs avec Sentry

Outil / Service Responsabilité Tâches concrètes & Commandes

Sentry Error tracking → Créer un projet Sentry sur [Link] (framework : [Link])
→ Installer le wizard : npx @sentry/wizard@latest -i nextjs
→ Le wizard configure automatiquement [Link],
[Link], [Link]
→ Configurer le SENTRY_DSN dans les variables Vercel
→ Ajouter les informations utilisateur dans le contexte Sentry (email,
id) après connexion
→ Configurer les alertes email/Slack pour les nouvelles erreurs
→ Utiliser [Link](error) dans les catch blocks
critiques
→ Configurer le seuil d'alertes (ex: > 10 occurrences en 1h = alerte
immédiate)

8.2 — Analytics Produit avec PostHog

Outil / Service Responsabilité Tâches concrètes & Commandes

PostHog Analytics & Feature → Créer un compte PostHog Cloud (EU region pour RGPD)
flags → Installer : npm install posthog-js posthog-node
→ Créer src/providers/[Link] → tracker côté client
→ Tracker les événements business critiques : user_signed_up,
project_created, upgrade_clicked, payment_completed
→ Configurer les feature flags pour déployer les nouvelles features
progressivement
→ Créer des funnels pour analyser les conversions clés (Signup →
Activation → Paid)
→ Mettre en place les dashboards de métriques SaaS (MRR,
activation rate, churn)
→ Activer la session recording pour comprendre les comportements
utilisateurs

8.3 — Uptime & Performance

Outil / Service Responsabilité Tâches concrètes & Commandes

Better Stack Uptime monitoring → Créer un compte Better Stack (ex-Better Uptime) → tier gratuit très
généreux
→ Ajouter le monitor : URL [Link] → vérification toutes
les 3 minutes
→ Configurer les alertes : email + Slack en cas de downtime

Roadmap Dev SaaS · Stack Moderne · Confidentiel

🚀🚀 ROADMAP DÉVELOPPEMENT SAAS — STACK MODERNE Supabase · Vercel · Stripe · [Link]

Outil / Service Responsabilité Tâches concrètes & Commandes

→ Créer un Statuspage public : [Link]

→ Ajouter des monitors pour les endpoints critiques : /api/health,
/api/webhooks

Vercel Web vitals → Activer Vercel Analytics et Speed Insights dans les Settings
Analytics → Monitorer les Core Web Vitals (LCP, INP, CLS) en production
→ Configurer des alertes si un score descend sous le seuil

✅ Livrables & Checklist

→ Sentry configuré avec alertes pour les nouvelles erreurs critiques
→ PostHog trackant les 5+ événements business clés
→ Dashboard de métriques SaaS (activation, conversion, rétention)
→ Monitor d'uptime configuré avec Statuspage public
→ Alertes configurées (email + Slack) pour downtime et erreurs

Roadmap Dev SaaS · Stack Moderne · Confidentiel

🚀🚀 ROADMAP DÉVELOPPEMENT SAAS — STACK MODERNE Supabase · Vercel · Stripe · [Link]

🔒🔒 ÉTAPE 9 — SÉCURITÉ & CONFORMITÉ RGPD

⏱ Durée estimée (dev solo/duo) : 4–8 heures 💰💰 Coût outils (tier gratuit) : $0

9.1 — Sécurité applicative

Outil / Service Responsabilité Tâches concrètes & Commandes

[Link] Headers HTTP → Configurer les security headers dans [Link]

Headers → Content-Security-Policy (CSP) : définir les sources autorisées pour
scripts, styles, images
→ Strict-Transport-Security (HSTS) : forcer HTTPS
→ X-Frame-Options: DENY → protection contre le clickjacking
→ X-Content-Type-Options: nosniff
→ Referrer-Policy: strict-origin-when-cross-origin
→ Permissions-Policy : désactiver les APIs non utilisées (camera,
microphone, etc.)

Supabase Sécurité données → Audit final de toutes les RLS policies — tester chaque table avec
RLS différents roles
→ Vérifier qu'aucune table n'a RLS désactivé sans raison explicite
→ Tester les injections SQL via les fonctions RPC Supabase
→ Valider que les policies multi-tenant isolent bien les organisations
entre elles
→ Activer les logs d'accès DB dans Supabase pour auditer les
requêtes suspectes

Rate Limiting Anti-abus → Implémenter le rate limiting sur les endpoints sensibles (login,
signup, API)
→ Utiliser Upstash Redis (serverless Redis gratuit) avec la lib
@upstash/ratelimit
→ Pattern : 10 tentatives de login par IP par 10 minutes → blocage
temporaire
→ Implémenter le CAPTCHA sur le formulaire d'inscription si
nécessaire (hCaptcha)
→ Configurer les rate limits Supabase Auth dans le Dashboard

// [Link] — Security Headers

const securityHeaders = [
{ key: 'X-DNS-Prefetch-Control', value: 'on' },
{ key: 'Strict-Transport-Security', value: 'max-age=63072000; includeSubDomains;
preload' },
{ key: 'X-Frame-Options', value: 'SAMEORIGIN' },
{ key: 'X-Content-Type-Options', value: 'nosniff' },
{ key: 'Referrer-Policy', value: 'strict-origin-when-cross-origin' },
{ key: 'Permissions-Policy', value: 'camera=(), microphone=(), geolocation=()' },
]

[Link] = {
async headers() {
return [{ source: '/(.*)', headers: securityHeaders }]
},
}

Roadmap Dev SaaS · Stack Moderne · Confidentiel

🚀🚀 ROADMAP DÉVELOPPEMENT SAAS — STACK MODERNE Supabase · Vercel · Stripe · [Link]

9.2 — Conformité RGPD

Outil / Service Responsabilité Tâches concrètes & Commandes

Politique Légal → Rédiger la Politique de Confidentialité (données collectées, durée,

RGPD droits utilisateurs)
→ Rédiger les CGU/CGV
→ Implémenter la bannière de cookies si tu utilises des cookies tiers
(Google Analytics, etc.)
→ Ajouter la page /privacy et /terms accessibles depuis le footer
→ Implémenter le droit à l'oubli : bouton 'Supprimer mon compte' dans
les Settings
→ Implémenter l'export des données : bouton 'Exporter mes données'
(format JSON ou CSV)
→ Supabase est RGPD-compliant (hébergement EU possible) —
documenter ce choix
→ Stripe est RGPD-compliant — pas de données de carte stockées
chez toi
→ Configurer la durée de rétention des logs (maximum 90 jours
recommandé)

✅ Livrables & Checklist

→ Security headers configurés (A+ sur [Link])
→ Rate limiting sur les endpoints sensibles
→ Audit RLS final passé sans vulnérabilité
→ Politique de confidentialité + CGU publiées
→ Droit à l'oubli et export des données implémentés
→ Bannière de cookies si applicable

Roadmap Dev SaaS · Stack Moderne · Confidentiel

🚀🚀 ROADMAP DÉVELOPPEMENT SAAS — STACK MODERNE Supabase · Vercel · Stripe · [Link]

🎯🎯 ÉTAPE 10 — LANCEMENT & POST-LANCEMENT

⏱ Durée estimée (dev solo/duo) : 1 semaine de 💰💰 Coût outils (tier gratuit) : $0 (lancement
préparation Product Hunt, Twitter, etc.)

10.1 — Checklist finale avant lancement

Outil / Service Responsabilité Tâches concrètes & Commandes

Tests E2E Validation finale → Tester le flow complet en mode incognito sur la prod : inscription →
activation → upgrade → utilisation
→ Tester l'inscription via Google et GitHub OAuth
→ Tester le paiement Stripe avec la carte test 4242 4242 4242 4242
→ Tester la réception de tous les emails transactionnels
→ Vérifier que le webhook Stripe met bien à jour le plan dans
Supabase
→ Tester la page de settings : changement de nom, avatar, mot de
passe
→ Tester la déconnexion et la reconnexion
→ Vérifier l'affichage mobile responsive sur iOS et Android
→ Tester avec un compte sur le plan Free et vérifier les limitations

SEO & Meta Visibilité → Configurer les balises meta dans src/app/[Link] (title,
description, og:image)
→ Créer l'Open Graph image (1200x630px) pour les partages sur
réseaux sociaux
→ Configurer le [Link] automatique : src/app/[Link]
→ Configurer le [Link] : src/app/[Link]
→ Vérifier le rendu des liens partagés (Facebook Debugger, Twitter
Card Validator)
→ Soumettre le sitemap à Google Search Console

Stripe Live Paiements en prod → Basculer Stripe en mode Live dans le Dashboard
→ Mettre à jour les clés dans Vercel : sk_live_ et pk_live_
→ Créer un nouveau webhook Live et mettre à jour
STRIPE_WEBHOOK_SECRET
→ Faire un vrai paiement de test avec une vraie carte (1€ ou 1ème
mois) et se rembourser
→ Configurer les emails Stripe (reçus, factures)

10.2 — Stratégie de lancement

Outil / Service Responsabilité Tâches concrètes & Commandes

Product Hunt Lancement PH → Préparer les assets Product Hunt : logo, images produit
(1270x760px), vidéo démo
→ Rédiger le tagline (< 60 caractères) et la description
→ Planifier le lancement un mardi ou mercredi (meilleurs jours)
→ Prévenir ta communauté la veille (email, Twitter, LinkedIn)

Roadmap Dev SaaS · Stack Moderne · Confidentiel

🚀🚀 ROADMAP DÉVELOPPEMENT SAAS — STACK MODERNE Supabase · Vercel · Stripe · [Link]

Outil / Service Responsabilité Tâches concrètes & Commandes

→ Le jour J : être disponible toute la journée pour répondre aux

commentaires
→ Demander à tes bêta-testeurs et amis de voter (sans demander
explicitement — contre les règles PH)

Distribution Canaux → Publier sur les subreddits pertinents (/r/entrepreneur, /r/SaaS,

/r/startups)
→ Partager sur Hacker News (Show HN: Mon SaaS — description en
1 ligne)
→ Partager dans les communautés Slack et Discord de ton niche
→ Écrire un article de blog 'How I built X in Y weeks' ([Link],
Hashnode, Medium)
→ Poster une thread Twitter/LinkedIn documentant le lancement
→ Contacter des newsletters de la niche pour une mention

10.3 — Métriques à suivre dès J+1

Outil / Service Responsabilité Tâches concrètes & Commandes

PostHog Métriques produit → Taux d'activation : % users ayant complété l'onboarding dans les
24h
→ Time-to-value : temps entre inscription et première action clé
→ Rétention J1, J7, J30 : % users qui reviennent
→ Conversion Free → Paid : objectif > 2% pour un SaaS B2C, > 5%
pour B2B
→ Feature adoption : quelles features sont utilisées / ignorées

Stripe Métriques business → MRR (Monthly Recurring Revenue) : revenus mensuels récurrents
→ ARR (Annual Recurring Revenue) : MRR × 12
→ Churn rate mensuel : objectif < 5% mensuel (idéalement < 2%)
→ ARPU (Average Revenue Per User)
→ LTV/CAC ratio : objectif > 3:1

Amélioration Itération → Planifier des entretiens avec les 5 premiers clients payants (20 min
continue chacun)
→ Mettre en place un canal de feedback in-app (bouton 'Feedback' ou
widget Canny)
→ Analyser les sessions enregistrées dans PostHog pour identifier les
frictions
→ Prioriser le backlog post-lancement selon les retours
→ Publier un changelog public pour montrer la vélocité de livraison

✅ Livrables & Checklist

→ Flow complet testé et validé en production (mode Live)
→ SEO de base configuré (meta, sitemap, OG image)
→ Lancement sur Product Hunt, Reddit, HN préparé et exécuté
→ Dashboard de métriques opérationnel
→ Processus de feedback et d'itération en place
→ Premier sprint post-lancement planifié

Roadmap Dev SaaS · Stack Moderne · Confidentiel

🚀🚀 ROADMAP DÉVELOPPEMENT SAAS — STACK MODERNE Supabase · Vercel · Stripe · [Link]

ANNEXE — Coûts mensuels à l'échelle

Voici l'estimation des coûts quand le SaaS grandit, pour anticiper les seuils de passage au plan payant :

Service Tier gratuit Tier Pro (prix) Déclencheur upgrade

Supabase 2 projets, 500 MB DB, 1 GB Pro : $25/mois — 8 GB DB, Quand DB > 500 MB ou > 50k
storage, 50k MAU 100 GB storage users actifs

Vercel Illimité (perso), bandwidth 100 Pro : $20/mois/membre — Équipe de 2+ ou > 100 GB
GB/mois bandwidth illimitée bande passante

Resend 3 000 emails/mois Starter : $20/mois — 50k Quand > 3 000 emails/mois
emails/mois (actif à ~1k users)

Sentry 5k erreurs/mois, 1 membre Team : $26/mois — 50k Quand > 5k erreurs ou équipe
erreurs, 2+ membres 2+

PostHog Cloud 1M events/mois Scales to usage : Facturation usage : peu coûteux

~$0.00031/event au-delà longtemps

Better Stack 10 monitors, alertes email Starter : $24/mois — monitors Quand tu as besoin d'alertes
illimités + SMS SMS ou > 10 URLs

Stripe Gratuit + 1.4% + Idem (pas de plan fixe) Négocier les taux à partir de
0.25€/transaction EU 80k€/an

0 à 500 users 500 à 5 000 users 5 000+ users

Coût infra mensuel : Coût infra mensuel : Coût infra mensuel :
~$0/mois ~$50–100/mois ~$200–500/mois
(tout sur tiers gratuits) (Supabase Pro + Vercel Pro) (Supabase + plans upgradés)

— Fin de la Roadmap Dev SaaS Stack Moderne —

Roadmap Dev SaaS · Stack Moderne · Confidentiel