Tu travailles sur Linux/Mac ou sur Windows ? Toutes les commandes du site s'adaptent Ă ton choix â tu peux en changer Ă tout moment avec le bouton en haut Ă droite.
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.