Voici Ma STACK ULTIME Pour Créer un SaaS en 2024

[@julientavernier1174]

Résumé de la stack : *Frontend* - React.js - Next.js - Tailwind CSS - ShadCDN (ui lib) - Zustand (state managment state) - TanStack Query (asynchronous state managment) - Zod (schema validation in Typescript) - Lucide (icons lib) - React Hook Form (hook for form managment) - Recharts (chart lib) *Backend* - Next.js - Prisma (ORM for database) - PostGresSQL (in Neon) - NextAuth.js (auth system) *Hosting* - Vercel (deploy, storage image, branching) - Neon (serveless PostGresSQL)

[@melvynxdev]

merci !

[@julientavernier1174]

@@melvynxdev avec plaisir ! 👋

[@Neurokardiak]

J'apprécie beaucoup tes vidéos, mais parfois je remarque un ton un peu agressif et critique. Quand tu possèdes déjà un grand savoir, tu n'as pas besoin d'être trop assertif. Ta confiance en toi-même est suffisante pour transmettre tes connaissances. 🤗

[@melvynxdev]

Hello, effectivement c'est plus un ton fun que j'essaie de donner et c'est plutôt second degré.

[@gode_el_malek8973]

Oui tu abuses un peu, en tant que débutant je me sens pas agressé du tout. Très bonne vidéo premier degré

[@Neurokardiak]

@@gode_el_malek8973 Je ne critique pas loin de là, je commente, et c'est bon pour le référencement de la vidéo !!

[@gode_el_malek8973]

@@shinobye4259 cool

[@cisseDev-p8i]

pourquoi pas le db PostgreSQL de vercel?

[@saulgoodman7802]

@@flavien.bonvin bonne remarque, il faut être un vrai engineer et pas un simple frameworker.

[@melvynxdev]

plus chère

[@TheSephix57]

Donc ta stack ce résume à vercel, front vercel, back vercel, ops vercel

[@didubako6738]

Oui mais comme il a dit ça lui fait le taff donc si il est plus performant avec cette stack pourquoi la changé

[@TheSephix57]

@@didubako6738 je n'ai aucun soucis avec les technos utilisées, mais le titre de la vidéo peut se résumer à "comment développer avec vercel en 2024".

[@melvynxdev]

STACK !== CI ? Tu es un peu perdu non ? La stack c'est les outil que tu utilises en général, donc y'a Taiwind / Stripe / NextAUth / Vercel / Neon etc.

[@benchteoulahcen7411]

O​@@TheSephix57

[@MrJohAA]

2:10 T'es abonné à Masdak toi je reconnais 🤣 ==> I'm out

[@melvynxdev]

Mdr ! Ma stack !

[@code-alchimie]

La stack de merguez. Les Hunters sont full vanilla sur leurs serveurs bare metal 😂

[@melvynxdev]

mdrrr

[@vfb6265]

Je suis développeur python (data IA) alors pour mon backend j'ai Django et pour le frontend j'ai choisi...htmx 😂suis-je un déchu pour les développeur JS ?

[@melvynxdev]

Oui totalement

[@vfb6265]

@@melvynxdev Et pourtant j'ai des excellentes performances avec htmx !

[@marc-lou]

La chemise et tout!

[@melvynxdev]

❤

[@wilonweb]

Chakra ui VS shadCDN t’en pense quoi ?

[@melvynxdev]

ShadCN car.... Tailwind !

[@davadou]

SupaBase est gratuit sur ton serveur

[@melvynxdev]

ah oui mais bon

[@nuketoto3868]

espece de charlot ! stack pourrie

[@melvynxdev]

😂😂😂

[@julien5468]

Nextjs c'est bien mais il y a un gros problème à quand une version stable ! Et cela ne va pas s'arranger avec turbopack quand tu vois le nombre de version qu'il sorte sa fais peur. Si tu as une version stable à me proposer je suis preneur car quand tu developpe tout ce passe bien et dès que tu passe en prod tout pars en vrille bug sur bug !

[@melvynxdev]

non ça va

[@Seavyy]

As-tu déjà combiné un projet Vercel en Next.js et avec Firebase. En termes de rapidité et de tarification, je ne trouve rien de mieux actuellement. J'ai environ une vingtaine de projets, et tous mes projets me coûtent 0 par mois, sauf 3 qui ont plus de 5000 utilisateurs quotidiens. Ps: Merci pour ta vidéo et ta bibliothèque d'icônes, je la valide !

[@PierreAtman]

Firebase ça va pas marcher pour tous les projets. Par exemple si tu dois récuperer beaucoup de document dans ta base et que les documents sont un peu lourd, même avec de l'indexation ça prend pas mal de temps. Mais c'est vrai que tous les projets au le user n'a pas 500mo de données c'est top et ca coute presque rien

[@Seavyy]

@@PierreAtman Je crois que c'est possible meme dans ce cas si je me trompe pas il faut utiliser Realtime Database pour ne pas avoir des problèmes de ce genre.

[@PierreAtman]

@@Seavyy Perso, j'ai toujours eu beaucoup de soucis avec firebase sur des gros volumes, pas tester avec Realtime Database, mais le cout de realtime DB quand tu veux gerer plusieurs 100aine de milliers de documents, je suis pas sur que ça soit un bon choix, en tout cas moi je l'ai déjà regretté et je prefere pas m'y reprendre sauf pour vraiment des trucs plus legers. apres je suis pas un grand specialiste de Firebase

[@melvynxdev]

Oui mais firebase je suis vraiment pas fan en vrai

[@art-sider]

Super cool la vidéo ✨. J'ai un souci avec *shadcn ui* quand j'essaie de l'installer, j'ai une message d'erreur, disant qu'il n'est pas compatible avec la version 20 de nodejs. A tu une solution à me proposer Stp 🙏

[@meschack04]

As tu essayé de mettre à jour ta version de Node ?

[@melvynxdev]

Ah oui, je te conseil de mettre à jour xD

[@alexeay]

@@melvynxdev excuser moi les gars je viens de debuter la en gros dans le lien y'a le lien de la stack que t'as a creer qui regroupe tout les outils de creation d'appli dont ta besoins c'est ca ? sa aide aussi a creer un saas sans conaissance de code ? je veux creer un saas avec des chatbot y'a tellement de outil c'est une galere...

[@linode7412]

Merci pour cette vidéo. Par contre, tu parles du fait que Supabase est payant mais Prima l'est aussi et c'est 49$ par mois pour 6 projets, ce que tu oublies de préciser ;)

[@melvynxdev]

Prima n'est pas payant, leur service de gestion oui

[@TojoRODIALSON]

Dire nextjs que c'est un outil backend c'est un peu abusé. Pour ton front backend, là on se comprend. Super vidéo mais parfois abusé

[@melvynxdev]

no ntkt

[@remidufeu]

Si vous maitrisez le frontend masi pas le backend, je vous conseille la stack react + xano pour le backend (outil no code complet et performant j'utilise ca)

[@melvynxdev]

ok

[@noklipio]

Salut, je regarde pas mal de video de dev Français qui parlent de leur stacks, en backend je n'entend jamais (en France) personne parler de Strapi ou Directus, voir Medusa (pour ecommerce), c'est dommage !

[@melvynxdev]

Oui j'utilises jamais xD

[@blackhole-w6y]

Je pensais qu'avec Vercel tu ne pouvait que deployer des projets avec uniquement du Frontend

[@melvynxdev]

Non tkt

[@ld2037]

Super vidéo.... Pour l'authentification que pensez vous de keycloak?

[@melvynxdev]

jamais testé

[@carlitokite]

Il manque peut etre un mot dans le titre de la vidéo "Stack ultime JS*". Ca ship 10x plus vite un sass avec ce bon vieux Rails.

[@melvynxdev]

C'est surtout écris MA Stack* ;)

[@naimelmaftouhi4672]

Salut et merci pour la vidéo ! Toi qui utilise Vercel sur plusieurs projets, tu as dis que tu payais 20€/mois, tu n’as jamais eu de mauvaises nouvelles ou quoi (genre du jour au lendemain tu te retrouves avec une facture à 1000€) (bande passante). En tout cas merci pour ton partage c’est cool.

[@melvynxdev]

Non jamais eu de problèmes

[@phptempaltedf]

Super ! Continue

[@melvynxdev]

Merci !

[@DarylMbakop-ts6eq]

Salut est ce qu'avec nextauth tu peux implementer le sign in et le sign up parce que dans les normes quand un utilisateur clique sur connecter on verifie dabord dans la bd s'il est enregistre s'il nest pas on lenvoit sur la partie inscription or nextauth linscription et la connection cest la meme chose ya pas de différence contrairement aux services comme kindeauth ou clerkjs

[@melvynxdev]

NextAuth ne fait pas nativement : - Récupérer les données saisies par l'utilisateur. - Vérifier si l'utilisateur existe déjà dans ta base de données. - Si l'utilisateur n'existe pas, créer un nouvel utilisateur dans ta base de données.

[@hansoucrl9143]

On en parle de flutter en front avec Fastapi en backend. En ce moment j'utilise cette stack pour le développement de ma saas

[@melvynxdev]

j'ai peur

[@alexmge9182]

8:50 Le JSX, c'est tellement moche. Les composants Reacts sont trop verbeux, une grosse usine. Avec Svelte, on a du pur JS sans code framework, sans usine à gaz.

[@melvynxdev]

le JSX c'est tellement beau

[@alexmge9182]

🤣@@melvynxdev

[@batoobdx]

Ce serait cool de faire aussi une vidéo où tu créé une app utilisant cette stack de A à Z

[@melvynxdev]

oui c'est en préparation

[@mahfoudh_arous]

Question: tu n'a pas considérer d'utiliser SQLite, comme ça tu n'aura pas besoin d'un hébergement pour la base de données? La vidéo est TOP comme d'hab! Merciiiiiiiiiii!

[@melvynxdev]

Merci, non je suis plus postgrees

[@megasticky8968]

perso je suis sur du mongo, next, react, django et ...clerk

[@melvynxdev]

c'est cool aussi

[@ericngatia3656]

Merci pour tes partages, mais j'aurai une question concernant ZUSTAND parce que moi j'utilise redux pour gérer les états alors je me demande pourquoi prioriser ZUSTAND ??

[@romancecile]

Il à fait une vidéo sur Zustand et il compare les deux

[@melvynxdev]

yes et zustand better better

[@OutongOutong-zh3zw]

t'es trop bon. Je de me faire former personellement par toi.

[@melvynxdev]

Yeah !

[@floppyBE565]

Un backend c'est laravel ouin ouin 😏 (signé un backist converti à nextjs)

[@melvynxdev]

Laravel ou c'est pas un vrai backend non ?

[@kevinhuet6330]

@@melvynxdev ça reste un vrai framework back basé sur Symfony, qui te propose une archi MVC de base, un ORM (Eloquent je crois ?) et un bon paquet d'outils : - Artisan, qui va te simplifier la vie pour pas mal de chose, générer des classes (model, controller, validator etc) - un système de validation de donnée - storage de fichier - routing Je trouve que ça reste "moins bien" que Symfony quand t'as besoin de faire certaines choses précises ou que t'as envie de custom un peu plus, mais ça reste un bon framework lorsque tu veux développer un bon back assez rapidement

[@Maxxamande]

Pour ma part php vanilla en back, html css js vanilla pour le front. Quasi zéro maintenance à prévoir.

[@poischiche2933]

Oui, mais tes projets doivent être chiants comme la mort à faire

[@Maxxamande]

@@poischiche2933 oui c’est vrai après moi je suis sur du gros projet que je vais devoir maintenir des années donc je préfère que ce soit plus long à faire mais plus revenir dessus. Que me faire chier avec un spaghetti de dépendances. c’est une question de point de vue. Après demain j’ai un mvp à faire pour aller vite je ferai pas ça c’est sure 😅

[@melvynxdev]

gg man tkt

[@xls666]

c'est quoi ce missile nucléaire à 1:54

[@melvynxdev]

xDD

[@BelHajAmorYassine]

Merci pour la video elle est top ! Question: que penses-tu d'utiliser Signals au lieu de react hooks ?

[@melvynxdev]

J'en ferrais une vidéo mais je suis pas fan des signeau

[@mehmetsarier9790]

Tu es exactement comme moi !

[@melvynxdev]

Tellement cool

[@yam-kingdev598]

Ta stack est bonne sauf Prisma qui écrit tous dans un seul et unique fichier

[@tdrapied]

Après il fait des mini app ... Tu fais pas ton backend sur Next quand tu veux faire une usine à charbon 😅

[@melvynxdev]

yes

[@melvynxdev]

j'ai une app qui est usine et qui est avec nextjs tkt

[@nickdibrilain]

tu connais appwrite ?

[@melvynxdev]

non

[@wilonweb]

T’as dés exemple d’application ?

[@guillaumebertin4775]

C'est dans la video

[@melvynxdev]

xD

[@alexandrelecorre]

Tu n'utilises pas swr?

[@melvynxdev]

non

[@defdev007]

Comment bien utiliser next auth pour gerer l'authentification pour une application mobile via api ?

[@DavidPoghosyan-px7wi]

ask chatgpt

[@funckysom7817]

Google it

[@melvynxdev]

xD utiliser l'api soit même

[@vigee2707]

Top !

[@melvynxdev]

Merci !

[@nazimzidi]

Magnifique !

[@melvynxdev]

love

[@marcdugas5772]

Super stack ! Mais un truc me chiffone... J'ai un projet nextjs + socket + webrtc. Si j'utilise autre chose que Vercel est ce que ça fonctionnera ou va falloir de toute façon mettre le back ailleurs ?

[@bennyspy3583]

Vercel ne supporte pas les websocket.

[@marcdugas5772]

@@bennyspy3583 oui mais si je mets l'app sur Render par exemple ça fonctionnerait ?

[@marcdugas5772]

Du coup si j'host ça sur Render par exemple ça fonctionnerait ?@@bennyspy3583

[@maxpiau4004]

@@bennyspy3583 ha, merci pour le gain de temps

[@melvynxdev]

faut utiliser un service pour les websocket

[@axelpo9390]

🔥🔥

[@melvynxdev]

yeah

[@jeremyh9841]

Je trouve ça trop complexe comme stack (ptet car je suis débutant ?). - Next change tout le temps de version et on peut faire du SEO en React avec Helmet. La performance, on ne voit presque pas de différence et react-router-dom est facile. - Pour le style, je trouve tailwind moche avec toutes les classes. Je préfère styled-components pour avoir une maîtrise totale et coder moi-même ou copier coller du css pour créer mes composants réutilisables. - La BDD si tu veux quelque chose de flexible, Mongo est mieux que SQL. - TS, Zod etc je trouve ça prise de tête quand on a un projet solo. - Backend : l'api de Next n'est pas assez flexible, j'utiliserais un bon vieux Express. - Ops : j'hébergerai aussi sur des clouds (heroku etc) pour éviter d'avoir à configurer le https.

[@TheHouseTutorials]

- Tu ne peux pas faire de SEO avec React de manière facile sauf avec un truc qui render ton JS avant comme next ou autre - Styled-components tu as un runtime, ça ne force pas les design tokens, ce n'est pas réutilisable car il y a un runtime/ - MongoDB ce sont tous les gens qui apprennent avec un mooc qui utilisent ça, dans le monde pro on utilise SQL pour du relationnel avec éventuellement du Redis. C'est vraiment se tirer une balle dans le pied d'utiliser du NoSQL sauf si on sait exactement ce qu'on fait. Au pire t'as du JsonB en posgresql. - L'api NextJS dans la version app router permet de faire plein de choses même l'upload de fichiers ! Tu peux utiliser graphql avec ou trpc donc ça marche. - Heroku c'était trop bien avant mais maintenant c'est devenu nul depuis l'achat par salesforce. C'est tout le temps en maintenance, c'est super cher, ça bug pas mal, pas serverless. Bref je préfère large un VPS ou un truc à la Vercel Je suis assez aligné avec la stack de melvynx

[@flosrn]

« TS je trouve ça prise de tête » J’ai arrêté de lire ici.

[@melvynxdev]

Hello, c'est plutôt une stack simple, je peux te dire que certains créent des trucs bien plus compliqués ! TS c'est un gain de temps pour moi. Tailwind un gain de temps ÉNORME et très pratique. SQL est aussi "flexible", faut juste faire des migrations.

[@jeremyh9841]

@@melvynxdev Merci pour ta réponse. Et au niveau de Next, utiliser les action ou server components ça n'est pas très flexible si tu changes de front ou de back ? Ca n'existe nulle part ailleurs ?

[@thomasdubernet3650]

Mongo c’est pas une DB

[@Vicode1]

13:20 meilleur passage de la vidéo, j'étais au travail et j'ai éclater de rire 😂

[@sidikisako]

j'ai rigolé 😂

[@melvynxdev]

xDD

[@z1982_]

Hello merci. Grande question: ou héberges tu ta db postgres ?

[@melvynxdev]

Neon.tech ou Render

[@yanisoulhaci3369]

Bonne vidéo mais pour Zod tu peux pas contrer l'argument des perf "il est beau" 😰 Pour Vercel c'est idéal je trouve pour les side project, mais il me semble que c'est plus cher pour les projets qui prennent de l'ampleur et nécessitent un maximum de ressources

[@melvynxdev]

Oui c'est vrai après si ça coûte vraiment chère tu peux passer par AWS ou autre qui vont te faire économiser. et oui l'argument c'est beau bait valibot

[@perrinfanou2042]

top et que penses-tu de la Stack MERN( mongo, express, react et node) à la place de express je peux le remplacer par next ? alors qu'en penses-tu ?

[@melvynxdev]

Hello, je pense que c'est la PIRE stack

[@OpticFTN]

Pourquoi ?​@@melvynxdev

[@MisterPandoras]

Dire que c'est la pire stack sans arguments ça vaut un commentaire d'une personne lambda qui commente juste pour cracher sur tout ce qui bouge. Ayant appris le fullstack avec la stack MERN, ça fonctionne très bien, fais-toi plusieurs avis que de remettre en question une stack car une seule personne te l'as dit, quand tout est bien maîtrisé c'est top

[@didubako6738]

@@MisterPandoras Je l’avais essayé et effectivement ça fait le taff , je ne comprends pas pourquoi il dit que c’est la pire stack … Après personnellement je ne suis pas fan des bdd nosql mais on s’y fait rapidement

[@TojoRODIALSON]

Tout dépend de ton projet mais je pense que c'est déjà un bon choix ton techno. 😊

[@ayrtonlevy]

Toujours aussi clair même si je ne suis pas un grand fan de React/Next ayant pour préférence Vue/Nuxt... Un jour peut-être je trouverais quelqu'un comme toi mais spécialisé sur Vue/Nuxt 😂

[@melvynxdev]

Ahaha un jour oui !

[@jean-baptistebonaparte2200]

T’as peut être Guillaume de Codewithguillaume qui fait beaucoup de vue js mais pas forcément le même style et a choisi de faire en anglais

[@nour_it]

Le frontend et le backend font l'amour avec NextJs

[@melvynxdev]

ahaha 😂