Stack Modulaire
Même socle technique pour tout projet web. On active ou on désactive des briques selon le besoin — jamais un nouvel outil sans raison concrète.
Le socle (Next.js, TypeScript, Tailwind, shadcn/ui, Git, Vercel) est toujours le même. Ce qui change d'un projet à l'autre, c'est quels modules optionnels on branche dessus : base de données, comptes utilisateurs, paiement, tests. Un site vitrine n'active presque rien ; un SaaS active tout.
Le socle — toujours actif
Ce socle est pensé pour le web. Pour du mobile, tu ne le remplaces pas : Prisma, Better Auth, Stripe et Zod restent tels quels côté serveur — tu ajoutes juste une brique Expo côté client mobile (voir plus bas).
Comprendre la stack — 24 technologies
C'est quoiDu JavaScript auquel on ajoute des types (on précise si une donnée est un texte, un nombre, etc.).
Sert à Attraper les erreurs de type à l'écriture du code, avant même de le lancer.
C'est quoiLe langage qui tourne dans le navigateur (et, avec Node.js, côté serveur).
Sert à Faire fonctionner tout ce qui bouge sur une page web. TypeScript compile vers du JavaScript à l'exécution.
C'est quoiUn moteur qui exécute du JavaScript en dehors du navigateur, sur ta machine ou un serveur.
Sert Ă Faire tourner les outils de dev (pnpm, Next.js) et, en prod, le serveur de l'appli.
C'est quoiUn gestionnaire de paquets : il télécharge et organise les librairies dont le projet dépend.
Sert à Installer Next.js, React etc. sans les écrire toi-même, et garder les versions cohérentes entre elles.
C'est quoiGit garde un historique de chaque changement du code. GitHub héberge ce dépôt en ligne.
Sert à Revenir en arrière si tu casses quelque chose, et avoir une sauvegarde hors de ta machine.
C'est quoiUn outil pour faire tourner un logiciel (ex. une base de données) dans un environnement isolé et reproductible.
Sert à Rien dans cette stack pour l'instant — Supabase évite d'en avoir besoin dès le départ. Utile plus tard si besoin réel.
C'est quoiUne bibliothèque pour construire des interfaces en petits blocs réutilisables, appelés composants.
Sert à Découper une page (bouton, formulaire, liste) en morceaux qui se mettent à jour tout seuls quand les données changent.
C'est quoiUn framework construit sur React qui ajoute le routage (les pages), le rendu côté serveur et les routes API.
Sert à Avoir front (pages) et back (logique serveur, accès base de données) dans un seul projet, sans les séparer.
C'est quoiUn framework CSS oĂą on stylise avec de petites classes directes dans le HTML (text-sm, p-4...).
Sert Ă Styliser vite, sans jongler entre un fichier .css et le composant.
C'est quoiDes composants d'interface (bouton, carte, formulaire) déjà stylés, copiés dans ton code — pas une dépendance figée.
Sert à Ne pas repartir de zéro pour chaque bouton ou champ de formulaire, tout en gardant la main pour les modifier.
C'est quoiUne librairie qui gère l'état d'un formulaire (valeurs saisies, erreurs, soumission) sans re-rendre toute la page à chaque frappe.
Sert à Brancher un formulaire à un schéma Zod pour valider et afficher les erreurs proprement.
C'est quoiUne base de données relationnelle : les données sont rangées dans des tables liées entre elles.
Sert à Stocker durablement des données structurées, et garantir qu'elles restent cohérentes.
C'est quoiUn service qui héberge une base PostgreSQL en ligne, gratuitement pour démarrer.
Sert à Avoir une vraie base accessible depuis n'importe où, sans installer ni gérer de serveur toi-même.
C'est quoiUn ORM : il traduit un schéma que tu écris en tables SQL, et génère du code TypeScript pour lire/écrire les données.
Sert à Créer et modifier les tables (migrations), et interroger la base sans écrire de SQL à la main, avec l'autocomplétion.
C'est quoiUne librairie qui décrit la forme attendue d'une donnée (ex. « un texte, entre 1 et 80 caractères »).
Sert à Vérifier ce qu'un utilisateur envoie (formulaire) avant de l'utiliser ou de l'enregistrer — bloquer les données invalides.
C'est quoiUne librairie qui gère inscription, connexion, sessions, rôles.
Sert à Ne pas réinventer la sécurité (hachage des mots de passe, cookies de session) toi-même — c'est facile à mal faire.
C'est quoiUne plateforme de paiement en ligne (cartes bancaires, abonnements, facturation).
Sert à Encaisser un paiement ou gérer un abonnement sans manipuler toi-même de données bancaires.
C'est quoiUn outil de tests unitaires : il exécute de petites fonctions et vérifie que le résultat est bien celui attendu.
Sert à Vérifier automatiquement qu'un bout de logique (ex. une validation Zod) ne se casse pas quand tu modifies le code.
C'est quoiUn outil de tests « bout en bout » : il pilote un vrai navigateur comme le ferait un utilisateur.
Sert à Vérifier qu'un parcours complet fonctionne (inscription → achat → confirmation...) sans le refaire à la main à chaque fois.
C'est quoiUne plateforme d'hébergement pensée pour Next.js.
Sert Ă Mettre le site en ligne automatiquement Ă chaque git push, sans configurer de serveur toi-mĂŞme.
C'est quoiUn robot qui exécute des commandes automatiquement à chaque push sur GitHub (ex. lancer les tests).
Sert à Bloquer une mise en ligne si les tests échouent.
C'est quoiComme React, mais les composants produisent de vrais écrans mobiles (iOS/Android) au lieu de pages web.
Sert à Réutiliser tes connaissances React pour écrire une app installable, sans apprendre un langage natif (Swift, Kotlin).
C'est quoiUn ensemble d'outils autour de React Native : démarrage rapide, test en direct sur ton téléphone, service de build (EAS).
Sert à Construire et publier une app sur l'App Store / Play Store sans installer Xcode ou Android Studio pour démarrer.
C'est quoiUne adaptation de Tailwind CSS pour React Native — mêmes classes, traduites en styles mobiles.
Sert à Garder les mêmes réflexes de style qu'en Tailwind web sans réapprendre une syntaxe.
Ta stack complète prévoit aussi NestJS et FastAPI (backends séparés) — volontairement absents ici : ton propre document les classe « à envisager plus tard », pas pour un premier projet.
Les modules — activés selon le projet
| Type de projet | Données Prisma + Supabase |
Comptes Better Auth |
Paiement Stripe |
Tests Vitest + Playwright |
Mobile Expo |
|---|---|---|---|---|---|
| Vitrine / statique | Non | Non | Non | Optionnel | Non |
| Gestion de données | Oui | Si accès restreint | Non | Recommandé | Non |
| E-commerce | Oui | Oui | Oui | Fortement recommandé | Optionnel |
| SaaS | Oui | Oui | Si formule payante | Fortement recommandé | Optionnel |
| Application mobile | Oui (via l'API existante) | Oui | Si formule payante | Optionnel | Oui |
Le mobile n'est pas un 5e type de projet isolé : c'est une couche qui se branche sur un backend web existant (Données + Comptes + Paiement restent les mêmes). La ligne ci-dessus suppose que ce backend est déjà en place.
Mode d'emploi par type de projet
Site vitrine / statique
Une présentation, pas d'espace membre, pas de données à conserver.
- Setup Next.js + Tailwind + shadcn/uiMêmes commandes que pour n'importe quel projet —
pnpm create next-app,shadcn init. - Construire les pagesContenu en dur ou récupéré d'un CMS externe si besoin — pas de base de données à toi.
- Déployer sur Vercel
Site avec gestion de données
Un backoffice, un outil interne, un catalogue Ă administrer.
- Socle
- Prisma + SupabaseSchéma propre au projet (ex. produits, clients, articles).
- Better AuthSeulement si tout le monde ne doit pas voir/modifier les données.
- CRUD spécifique au projetC'est la partie qui change à chaque nouveau projet — le reste est le même gabarit.
- Déployer
E-commerce
Vendre des produits en ligne, avec paiement réel.
- Socle
- Prisma + SupabaseProduits, stock, commandes.
- Better AuthComptes clients — historique de commandes, adresses.
- StripePaiement carte + webhooks pour confirmer une commande côté serveur.
- Pages produit / panier / commandeSpécifique au catalogue vendu.
- Tests sur le parcours de paiementLe seul endroit où un bug coûte de l'argent réel — ne pas sauter cette étape.
- Déployer
SaaS
Des comptes, un produit utilisé dans la durée, une formule payante possible.
- Socle
- Prisma + Supabase
- Better AuthComptes, et rôles si plusieurs niveaux d'accès (propriétaire, membre...).
- StripeUniquement si une formule payante existe dès le départ.
- CRUD métierLe cœur du produit — spécifique à chaque SaaS.
- Tests + déploiement
Application mobile
Une version iOS/Android d'un projet qui a déjà un backend web (données, comptes, paiement).
- Projet Expo, séparé du projet web
- Backend Next.js exposé en APILes Server Actions ne sont pas appelables depuis le mobile — il faut de vraies routes API.
- Better Auth côté mobileMême serveur d'auth, client adapté avec stockage sécurisé du token.
- NativeWind pour le style
- Écrans spécifiques au projet
- Build & publication via EASApp Store et Play Store, avec un temps de validation à prévoir.