La stack ultime pour créer un SaaS en 2024
ฝัง
- เผยแพร่เมื่อ 6 มิ.ย. 2024
- Merci infiniement à Nuxt d'avoir sponsorisé cette vidéo. Obtenez -20% sur leur incroyable librarie Nuxt UI Pro avec mon code BENJAMINCODE.
ui.nuxt.com/pro/pricing?aff=v...
Démo de la librairie : dashboard-template.nuxt.dev/
Sébastien Chopin : / atinux
Benjamin Canac : / benjamincanac
Romain Lanz : / romainlanz
Nuxt : nuxt.com/
Nuxt UI : ui.nuxt.com/pro?aff=vo0YP
AdonisJS : adonisjs.com/
Lemon Squeezy : lemonsqueezy.com/
Planet Scale : planetscale.com/
Mon SaaS pour mettre en relation les TH-camrs et les Sponsors
meetsponsors.com
Devenez affiliés et gagnez 20% sur tous les abonnements
meetsponsors.lemonsqueezy.com...
Mes tutos et codes sources :
shop.benjamincode.tv
Rejoignez moi sur Twitter :
/ benjamincode
Insta : / benjamincode
Twitch : / benjamincode
Mail : b1jam1code@gmail.com
Partners Manager : Loic Coutal
Miniamaker : / kas0bel
Monteur : / teddycoste1 & Moi
Les musiques que j'utilise sur la chaîne sont soit :
- de moi (dans de nombreux cas : guitar / saxo / nappes de synthés)
- de Obsimo
- de Luxie (Ilovedyou • Luxie - ilovedyoumybaby )
- de Paradise of Yesterday (paradiseofyesterday.bandcamp....) pour tout ce qui est synth pop
Chapitrage :
00:00 Introduction
00:55 L'Architecture
01:30 Priorité 1
02:08 PNPM
03:08 Le Frontend
07:20 Le Backend
10:12 Le Paiement
12:39 La base de données
Alors, vous en pensez-quoi de cette stack ?
Merci infiniement à Nuxt d'avoir sponsorisé cette vidéo. Obtenez -20% sur leur incroyable librarie Nuxt UI Pro avec mon code BENJAMINCODE : ui.nuxt.com/pro/pricing?aff=vo0YP
Démo de la librairie : dashboard-template.nuxt.dev/
Comment ce commentaire peut être daté de 2 heures avant la publication ? Sorcier va !
j'approuve 100% le choix de Nuxt :)
Je l'utilise depuis 2022 et je suis largement convaincu
"Alors, vous en pensez-quoi de cette stack ?"
Elle est incroyable. Il n'y a pas d'autre mot pour la désigner !
Merci de nous avoir donner cette opportunité et que tu kiffes Nuxt UI et UI Pro 😊
Je kiff votre personne comment travailler avec vous ?
Le retour de VUE dans le TH-cam game français... ça fait grave plaisir, ils méritent tellement !
Tu as le talent particulier de rendre passionnant la présentation d'une stack😍😂
Petite précision sur Nx. Oui c'est une solution monorepo, mais l'outil est surtout recommandé lorsque l'on suit une philosophie très particulière de fragmentation de ses features en sous-librairies.
Ça peut être très pratique pour les micro frontends par exemple. Mais même si on ne part pas dans cette direction, fragmenter son code en une multitude de sous librairies Nx te permet de gagner un temps fou au niveau de la CI. En effet Nx sait identifier le code des librairies modifiées et à l'aide de la commande "nx affected", la CI n’exécutera les tests, le lint et le build que sur ce qui a été modifié. En terme de gain niveau CI c'est tout sauf négligeable.
Par contre dans ton cadre, je suis d'accord que ça peut paraitre un peu overkill. Ton choix semble donc légitime.
Tu est l’abonnement le plus rentable de l’histoire de TH-cam 🔥
Contrairement à la vidéo backend boom-boom, là tu as donné de vrais justifications pour adonis, milles mercis car ça m'a bien donné envie de tester ce framework !! Bon courage pour ton projet qui est déjà top
ça manquait une vidéo technique, merci!
Merci Benjamin, je l'attendais celle là! Très inspirant tes choix.
Très très lourd le travail de Nuxt, merci du partage !
Petit coup de pouce Benjamin ! Merci pour les insights sur Lemon Squeezy, je vais probablement opté pour ça de mon côté 👌🏻
Vidéo de super qualité et motivante à l'idée de tester ce boilerplate ! Bravo !
Une vidéo bien technique ça fait plaisir. Good job 🤝
Un délice de voir que ses stacks, sont aussi plébiscite pour leur solidité 😎
Bravo pour TAF 🎉
Merci pour la reco lemonsqueezy!
WoW job exceptionnel, ce choix de stack est excellent 🎉
Hyper intéressant ! Merci de partager cette stack qui a l'air d'enfer !
Bravo ! des choix atypiques en plus !
Jamais essayé cette stack mais c'est très inspirant, et je rencontre actuellement pas mal de frustration avec React et la dernière version de Next en particulier. Peut être qu'un vent de changement s'imposera sur le prochain projet ! Merci pour cette vidéo, top !
Ah j'attendais cette vidéo avec impatience hehe
Je m'attendais pas du tout a entendre Adonis pour le back! Tres complet comme framework en tout cas
Stack de dingue !
VUE / NUXT C'est tellement LA VIE ! Après pour le backend j'ai obté pour STRAPI qui est vraiment hyper agréable à l'utilisation.
Tu m'as fait découvrir Romain avec la vidéo sur boumboum, une pépite il m'a réconcilier avec le back en js
Même feeling à propos de React ici 😆
Penser React avant de commencer à penser métier...
Bravo pour la mise en lumière d'Adonis, il mérite clairement.
Au top ce stack ! Tu nous ferai pas une vidéo dédié a Nuxt ? Le potentiel à l'air cool et c'est une boite française (j'te donne presque une idée de série de vidéo là... ! )
Cool, merci pour le partage !
Hello !
Super vidéo, mais j’attends plus de technique 🤓😉
- Comment sont gérés les modèles et autres fonctions communes ? Package « common » à côté de tes « backend » et « frontend » ?
- Quid du build/serving de tes deux packages ?
- Conteneurisé ?
- Intégration CI/CD ?
J’espère avoir quelques réponses mais merciiiii quand même 🤩
Hello Benjamin super stack :) perso le combo adonis / nuxt c'est 100% mon kiff ^^ par contre je suis plutot postgres que mysql mais bon :p ca a l'air super interessant lemon pour le paiement merci du partage !! hate de voir comment tu fait le déploiement , perso j'ai commencer à prendre l'habitude de scinder back et front en deux repos et de déclencher le build d'image docker sur certaine branch ( comme le passage en préprod ou en prod ) on peut faire la même chose en monorepo ? hate de voir ce que tu nous a réalisé ! je te l'ai déja dit mais quand j'ai eu le choix de me reconvertir ou de continué dans ma lancer ( j'était coté ops , management ops pour être précis ) tes vidéos mon clairement aiguiller sur mon choix ! )
Bravo pour Vue
Elle est géniale cette vidéo, je pense que ça en aidera plus d'un
Purée la miniature ❤
Ça m’a donné envie d’apprendre Adonis 😁
Je comprend que dalle mais je regarde quand même tes vidéos 😂
"Regardé comme il est bien fait" en plus de m'apprendre un tas de choses tu me fais rire! Thanksss!
Top tes vidéos, pour un vieux issus du backend ça donne envie de plus en plus de faire du front!
T'as vraiment géré la transition sur ton sponsor comme un maître :)
T’es trop fort… je regrette trop de pas avoir creuser la partie front et back et framework plus jeune au lieu de juste avoir des connaissances en HTML/CSS pour WordPress. Savoir faire tout en solo de AàZ c’est trop bien. Bravo mon bon
Si t’as déjà des bases en html / css c’est déjà pas mal … il te reste plus qu’à apprendre un langage de programmation et tu pourra tout faire solo
Il n'est jamais trop tard, je m'y met à 35 balais
Tes vidéos sont toujours très instructives à regarder 😃😃. Si tu à un nouveau saas à faire je suis partant pour t'aider.
Super trop interessant ! et VueJs est selon moi le top du top trop simple à utiliser, à mettre en place et en plus il se rapproche le plus de la syntax native
Merci pour cette vidéo full valeur. Grâce à toi, j'ai découvert Lemon Squeezy, grosse pépite !
superbe vidéo
J'adore le son en back, je ne sais pas quel est l'instrumental mais ça me détend de ouff
Merci pour la vidéo !
Questions "sensibles" :
- Comment tu te protèges contre les DDoS ou de façon générale scale le service si d'un coup tu croules sous le succès 🚀 ?
- Comment tu te protèges contre le partage de compte ? (Si ce n'est pas une protection technique, peut-être que des astuces UX peuvent dissuader le partage ?)
Pour le DDoS il existe (en Java en tout cas) des librairies de rate limiting. Possible que ça soit la même chose en typescript.
Et pour la scalabilité si il utilise des containeurs avec un orchestrateur l'orchestrateur a la responsabilité de gérer la charge ( à la hausse comme à la baisse) dans les limites hardware du cluster qui l'héberge.
Hyper intéressant :)
Stripe a ajouté les taxes automatiques! (c'est une option a configurer) en tout cas top les videos sur le saas
A propos de stripe tax sur twitter j’avais lu ceci :
It’s not the calculation and application that’s the issue, stripe tax indeed works well for that.
It’s the registration and remittance to all the different jurisdictions which is very challenging and not covered by stripe tax.
Propre !
J'ai globalement la même aujourd'hui, sauf que j'ai gardé React/Next pour l'écosystème mais surtout avec une compatibilité avec React Native pour les projets ou j'ai besoin d'une app mobile.
(Mais je suis d'accord, Vue c'est 1000x plus friendly que React)
Merci pour cette vidéo
Nice. Moi-même je bosse sur un projet client avec Nuxt et Nuxt-UI :) C'est vrai que ça marche très bien ! Je découvre aussi Adonis grâce à Romain (que j'ai découvert grâce à toi et BoomBoom :p). Une très belle stack ;)
Très sympa, j'adorerais voir le bootstrap
Merci benji😊
Organisation des branches, CI/CD,
Plutôt gitflow ou trunkflow ?
Semantic versioning ?
Le cote "DevOps" ;)
Woah merci pour les infos
Tu m'as bien fait rigoler avec: il m'a tété donné.😂😂😂
Trop bien les infos !!!
sympa la vidéo ^^beau boulot
Pour un back en TypeScript, proche d'une experience de Symfony, je suis sur FoalTS depuis 2 ans maintenant.
C'est fait par un francais, ancien dev PHP SF et on y retrouve presque toute nos habitudes :)
ça a l'air vraiment bien FoalTS merci, mieux que ce qui est présenté dans la vidéo en tout cas
mais pourquoi utiliser ça plutôt que symfony ? le ts apporte vraiment quelque chose ou c'est pour une autre raison genre les perfs ?
@@Arkounay C'est surtout dans le but d'etre uniforme sur la stack. Mes fronts sont de plus en plus via Vite/React/TypeScript donc c'est plus simple en terme d'environnement. Plus besoin de maintenir une version de PHP sur la machine
Nickel la vidéo merci !
Tu l'as hosté comment finalement ?
Super vidéo! Tu partagerai pas ton boilerplate alléger avec les packages de premières nécessités ? 😀😀
J'adore tes vidéos un peu plus tech !
À chaque pièce de ta stack je m'y attendais en mode "j'espère qu'il a choisi ça" 😍
Petite question : tu dis qu'il y a des choses qui te font rager côté TS avec Vue, tu penses à quoi ?
Et enfin : à la place de Nuxt est-ce que tu avais jeté un œil à Quasar et si oui, t'en penses quoi ?
Excellente video ! Je suis entrain de faire mon SaaS avec le combo Wasp/Prisma/Ts c'est plutot pas mal aussi
Belle présentation de ton stack, je pense que je vais rechercher sur Upwork si Adonisjs est réputé 👍
Toujours aussi sympa à regarder, et même si je ne suis pas toujours aligné avec tes choix techno, le résultat est la. Il faudra cependant penser à ajouter la fameuse bannière d’acceptation des cookies ainsi que l’explication sur quel cookie sert à quoi afin d’être en règle niveau GDPR
Tant que tu t’inscris pas à l’app, t’as pas de cookie, donc je me suis dit que c’était pas nécessaire d’encombrer la landing page de tout ce bazar mais peut être que je me trompe. Je vais faire une vidéo entière sur le thème de la RGPD avec des spécialistes pour justement mieux comprendre tout ça et sensibiliser par la même occasion
Ceux qui veulent une stack typée, objet, avec du rendu server side sans devoir apprendre javascript/typescript et surtout sans prise de tête au niveau des dépendances regardez du côté de blazor.
Encore un joli coup de la part de Microsoft. FluentUI blazor pour les composants visuels.
Ce que j'adore c'est le debug qui est parfait, l'IDE Visual Studio qui evite d'aller configurer le moindre fichier de build a la main et la communauté qui est gigantesque.
Sympa le casque des Mythiques Daft Punk derrière !
Merci pour la video ! J'aimerais bien que tu parles de comment gerer la scalabilité d'une app ?
Yo, j'attendais cette vidéo avec impatience, je t'avais demandé sur twitter la semaine dernière ;) Trop bien. J'ai une question par contre sur l'utilité d'adonis. Je développe sur vue depuis un moment et j'ai eu envi de tester nuxt sur un projet perso récemment. En lisant la doc, je vois que le dossier server est censé faire office de backend. As-tu envisagé l'utilisation de ce dossier afin de n'avoir qu'un projet, ou y a t'il des raisons qui t'on poussé à adopter un backend dédié ? En DB, as tu envisagé d'utiliser supabase ? c'est du postgres, ca semble pas cher, et tout est embarqué, db, authentification, etc ....
Je partage ces deux très bonnes remarques et questions !
Merci de nous avoir partagé ta stack, personnellement j'ai beaucoup de points communs avec ta stack frontend pour mes projets et j'en suis très satisfait aujourd'hui. Pour ce qui est du backend j'ai pas du tout le même avis :') J'utilise NestJS depuis 4 bonnes années déjà et j'en suis plus que satisfait. Suis-je un backend développeur fou ? 😂 Une question me vient du coup, pourquoi les workspaces de pnpm plutot que ceux de yarn ?
Merci benjamin pour Lemon Squeezy comme un vieux dans ses pantoufles j'utilisais Strippe
Super interessant, cette vidéo tombe à point nommé car je suis en train de monter un projet web et je suis toujours en reflexion sur les outils qui vont composer la stack.
Petite question : quel ORM utilises-tu ?
celui d'adonis peut-être ?
bravo pour la video et ton SaaS! y étant passé par la l'an dernier, ca fais plaisir de voir le chemin d'autres et comparer nos choix.
Par contre, a 12:39 je comprends vraiment pas le choix de la DB.. ton cas d'usage est autours des connections entre personnes/marques/affiliations, tu aurais clairement plus d'intérêt a partir sur une base graphe, qui t'ajouterais énormément de valeur comme par exemple la recherche par communauté, connection , etc. Et pour la partie cloud, si je prends la plus grosse bdd graphe aujourd'hui (neo4j il me semble) ils ont un service cloud aussi. donc le choix de mysql... comprends pas
Salut Benjamin, je ne comprend pas bien comment on gère ses utilisateurs dans les SAAS ? Tu gères toi même la base de données des utilisateurs et de leur infos ? quid des questions de sécurité ? Est ce qu'il y a des services qui gèrent cela (données users et authentication) ?
BRAVOOOO
Au top la stack, ça me donne envie de remettre à Nuxt! (en vrai ta vidéo peut avoir un vrai impacte sur la comu)
Je suis curieux de savoir comment tes scripts pour détecter les nouvelles sponso. Est-ce que cest juste avec l'api youtube ? Du webscraping ? De l'IA?
Je développe aussi avec Nuxt et je l'utilise pour la partie backend également, pourquoi ne pas avoir utilisé Nuxt dans sa globalité pour ton projet ? ça va encore plus vite dans le développement.
Très intéressant la partie DB.
J'ai pas compris grand chose, je manque de connaissances pointues, mais j'ai adoré ta vidéo ! 😁
Merci pour ta video tu m'as fait decouvrir Adonisjs et ça c'est fabuleux ❤ etant un ancien pratiquant de Symfony je me retrouve facilement dedans.
Par contre j'aurai bien voulu savoir comment tu geres le deploiement, l'hebergement de ton site. Peut etre une prochaine video ?
Salut mec je découvre ta chaîne au top et je débute en dev depuis environ 6 mois j’ai commencé avec react la depuis quelques semaines je me disais quand est ce que je pourrais me lancer dans une mini startup, avec le tech stack dont tu parles. Il y a tellement de notions à savoir que bon voilà la je suis encore à comprendre les props et les useStates par encore commence avec typescript 😅
Dude, les dépendances ca se met à jour sur un projet existant aussi hein
Ça à l'air hyper tentant mais j'ai vraiment du mal avec TS.. enfin, surtout les 15 millions de dépendance et de packages qui s'installent avec npm, sont utilisation.. c'est difficile de ne pas choisir python quand je démarre un projet, j'aime tellement, mais, pas de front 😬 cette vidéo me donne envie de ressayer, ça fait quand-même envie :) merci pour cette présentation ! (Tu penses faire une vidéo qui rentre plus dans les détails de ces technos ?)
On attend le repo public pour le boilerplate ! Sinon une vidéo très attendu
Méga super vidéo !! Jai pas trop compris a quoir sert pnpm par contre... Mais je suis encore un peu noob dans le dev
Bonjour Benjamin, pourquoi ne pas avoir utilisé Nuxt pour le front et le back ?
Oui, cela m'intéresse aussi comme question
Je dirais que c'est pour tout ce qui est inclus dans adonis.
Si il y avait ça dans nuxt ça serait un Banger indétrônable
@@mathnewphentièrement d’accord, j’y travaille actuellement avec NuxtHub, pour faire carrément du full stack dans le edge 🚀
C'est la question que je me suis poser?
Ce n’est pas fais pour, Nuxt permet de faire du « backend » mais c’est un très grand mot.
Ça ne permet pas de faire toute une API complète comme Adonis par exemple. En tout cas sa serait un enfer de le faire.
La partie server de Nuxt c’est bien pour quelques petites fonctions, ou des call API par exemple.
Salut benjamin super vidéo !! Juste tu pourrai donné une idée du prix de lemon squezzy ? Et t’es taches cron sont fais via des service que tu lance x temps ?
Salut Benjamin ! Tu pourrais nous parler des enjeux de sécurité que tu as rencontré lors de la création de ton app ? Je créé moi même une app actuellement (un peut trop gros pour appeler ça un SaaS) et elle sera vulnérable à pleins de types d'attaques différentes (botting, spamming, etc.). Ca serait cool que tu nous montre comment tu as sécurisé tout ça.
Pour l'instant j'utilise Supabase pour l'auth et une self-hosted DB (que je vais probablement monter en cloud) que je consomme avec Drizzle mais rien qui ne protège la création massive de comptes par exemple ou même le spamming de request au niveau de l'API.
Si tu peux nous faire un retour sur comment toi tu as fais ou si tu connais du monde pour expliquer ça dans un Tweet ou vidéo (encore mieux) ça pourrais être top, d'autant plus que ce sujet deviens de plus en plus important.
Merci à toi !
Adonis à l'air intéressant, en revanche quid de l'injection de dépendance pour pouvoir faire du TDD efficacement par exemple ?
C'est marrant que tu n'es pas accroché un nestjs toi qui as fait de l'Angular :D moi, j'ai kiffé pour ça justement !
Merci beaucoup pour cette vidéo très complète ! Aurais-tu connaissance d'un starter de projet utilisant cette stack ? Je pense qu'on serait nombreux à être intéressés !
Hello Benjamin, tu utilises VueJs3 en composition Api ? Commebt tu utilises les memes types avec front et back ?
En attente de voir le Nuxt version React sortir un jour..
Hello,
Super cette vidéo. De mon côté je participe à la refonte d'un SaaS vers NuxtJs.
Je n'ai pas bien compris à quoi sert Nuxtui Pro. peut-être qu'une vidéo, sur ce sujet, serait intéressante.
un avis sur Nitro, le backend de nuxt ? comment tu as géré les emails ?
j'ai bien aimé la vidéo . Après mes débuts fait avec vuejs2 & 3,en utilisant souvent la bibliothèque Material bootstap design vue,ou le tailwind . je m demandais bien si je devais forcément allé vers du react . À un moment j'ai démarrer l'apprentissage de REACT mais 😂,j'ai pas vraiment kiffé .Après cette vidéo je sais quoi faire maintenant .
Quels outils tu utilise pour héberger ton site et ton backend? Tu héberge tout sur vercel?
Et l'hébergement ? Hostinger en sueur ?
salut, pour l'ORM t'as utilisé celui proposé par adonis ?
N'était-il pas possible d'utiliser Nuxt pour le back-end également?
Très bonne vidéo, mais pourquoi n'as-tu pas utilisé AnalogJS avec ton framework de cœur ? c'est vrai que le SSR officiel d'Angular est très bof (c'est de l'universal rebadgé ...).
Merci pour lemon squeezy je ne connaissais pas.
Trop drole, j'ai vécu exactement la même frustration, comme toi je fais un SaaS, et j'ai commencé avec Adonis, mais comme je fais du Nest au taff, j'ai switché sur Nest, je regrette et je regrette pas à la fois, c'est rude au début mais le code est proprement organisé...
MAIS! La DX folle d'Adonis me manque cruellement et je vais certainement retourner dessus 😂
C'est beau ! C'est Bordeaux ❤❤
T’as pas un système de monitoring ?
Et si ton app est down, ton PRA est prêt ?
Et petite question, l’argument du SSR pour l’app est valable pour la vitrine mais pas forcément pour l’app, tu aurais pu choisir du client side pour l’app sans impact sur ton referencement