- 34
- 310 126
Build SaaS with Ethan
United States
Приєднався 12 чер 2016
I'm Ethan Mick, and I'm here to help you make money from writing software, learn how to launch great products, and help more people too. I'm building a community of like-minded individuals who help others and love writing code.
I worked at big tech and then moved into startups. I interned at Apple, then Microsoft, and instead of returning, I went to work at early-stage startups to help them succeed. My first failed. My second was acquired in 2020.
I've learned that building a startup is more than creating a novel product. It's about connecting with people, learning about them, empathizing with their problems, and doing whatever you can to help. That's what I'm doing here.
I'm building my new business with diverse income streams: SaaS products, affiliate marketing, books, coaching, public speaking, online courses, and more. I want to show you how.
Follow along and get real honest advice from someone who walks the walk and truly wants to help.
Subscribe now and join me!
I worked at big tech and then moved into startups. I interned at Apple, then Microsoft, and instead of returning, I went to work at early-stage startups to help them succeed. My first failed. My second was acquired in 2020.
I've learned that building a startup is more than creating a novel product. It's about connecting with people, learning about them, empathizing with their problems, and doing whatever you can to help. That's what I'm doing here.
I'm building my new business with diverse income streams: SaaS products, affiliate marketing, books, coaching, public speaking, online courses, and more. I want to show you how.
Follow along and get real honest advice from someone who walks the walk and truly wants to help.
Subscribe now and join me!
Set up Google OAuth with Next.js using Next-Auth!
Setting up OAuth is more than just writing a little code. You need to configure the app with your identity provider and ensure the configuration is correct. This guide walks you through how to set it up end-to-end with Google as the identity provider.
📰 Newsletter 📰
Sign up for my newsletter, "A Bit of SaaS," to keep you informed, inspired, and engaged with the latest trends, tips, and resources in the ever-evolving SaaS industry.
ethanmick.com/newsletter/
🎬 Related Videos 🎬
• Set up Next Auth - ua-cam.com/video/2kgqPvs0j_I/v-deo.html
📜 Code 📜
• ethanmick.com/how-to-set-up-google-oauth-with-next-js-using-next-auth/
🔗 Links 🔗
• console.cloud.google.com/
👨🏼💻 About Me 👨🏼💻
I am a principal software engineer and architect who loves building cool cloud software.
• Website: ethanmick.com/
• GitHub: github.com/ethanmick
• Twitter: Ethan_Mick
• LinkedIn: www.linkedin.com/in/ethan-mick/
• Agency: ethanmick.dev/
🔖 Chapters 🔖
00:00 - Intro
00:23 - OAuth
03:29 - Google Setup
11:30 - The Code
17:36 - Production
20:38 - Outro
📰 Newsletter 📰
Sign up for my newsletter, "A Bit of SaaS," to keep you informed, inspired, and engaged with the latest trends, tips, and resources in the ever-evolving SaaS industry.
ethanmick.com/newsletter/
🎬 Related Videos 🎬
• Set up Next Auth - ua-cam.com/video/2kgqPvs0j_I/v-deo.html
📜 Code 📜
• ethanmick.com/how-to-set-up-google-oauth-with-next-js-using-next-auth/
🔗 Links 🔗
• console.cloud.google.com/
👨🏼💻 About Me 👨🏼💻
I am a principal software engineer and architect who loves building cool cloud software.
• Website: ethanmick.com/
• GitHub: github.com/ethanmick
• Twitter: Ethan_Mick
• LinkedIn: www.linkedin.com/in/ethan-mick/
• Agency: ethanmick.dev/
🔖 Chapters 🔖
00:00 - Intro
00:23 - OAuth
03:29 - Google Setup
11:30 - The Code
17:36 - Production
20:38 - Outro
Переглядів: 30 296
Відео
Build a password reset flow for your SaaS app! Next.js | Radix | Tailwind | Source Code
Переглядів 3,4 тис.Рік тому
Learn how to build a password reset flow for your SaaS app. Requires you to have the user's email to send them the password reset email. 📰 Newsletter 📰 Sign up for my newsletter, "A Bit of SaaS," to keep you informed, inspired, and engaged with the latest trends, tips, and resources in the ever-evolving SaaS industry. ethanmick.com/newsletter/ 🎬 Related Videos 🎬 • Verify Email - ua-cam.com/vide...
Build your own ChatGPT with GPT-4 and Vercel AI in 10 minutes! Stream responses and custom prompts!
Переглядів 2,7 тис.Рік тому
Build a ChatGPT clone in mere minutes with these powerful new libraries. Streaming responses and custom prompts! 📰 Newsletter 📰 Sign up for my newsletter, "A Bit of SaaS," to keep you informed, inspired, and engaged with the latest trends, tips, and resources in the ever-evolving SaaS industry. ethanmick.com/newsletter/ 📜 Code & Docs 📜 SOURCE CODE • ethanmick.com/build-your-own-chatgpt-with-gpt...
File Upload in Next.js 13 App Directory with NO libraries! Client and React Server Components!
Переглядів 49 тис.Рік тому
Easily upload files and then use them server-side in Next.js 13! In the past, you would need to use third-party libraries to help with this, but NO MORE. See how you can upload files easily in client and server components. 📰 Newsletter 📰 Signup for my newsletter, "A Bit of SaaS," to keep you informed, inspired, and engaged with the latest trends, tips, and resources in the ever-evolving SaaS in...
Verify an email during user registration with Next.js 13! Mailgun and React Server Components!
Переглядів 12 тис.Рік тому
Verify an email during user registration with Next.js 13! Mailgun and React Server Components!
The Ultimate Button with React Aria! Build a React Component Library with Tailwind CSS & Next.js
Переглядів 4 тис.Рік тому
The Ultimate Button with React Aria! Build a React Component Library with Tailwind CSS & Next.js
Add Variants and Loading to your Button! Build a React Component Library with Tailwind CSS & Next.js
Переглядів 6 тис.Рік тому
Add Variants and Loading to your Button! Build a React Component Library with Tailwind CSS & Next.js
Basic Button: Build a React Component Library with Tailwind CSS, TypeScript, React, and Next.js
Переглядів 5 тис.Рік тому
Basic Button: Build a React Component Library with Tailwind CSS, TypeScript, React, and Next.js
Build a REST API in Next.js 13 app directory! Master RESTful techniques and paging w/ Prisma & Auth!
Переглядів 9 тис.Рік тому
Build a REST API in Next.js 13 app directory! Master RESTful techniques and paging w/ Prisma & Auth!
Build a custom login page for your SaaS app with Next.js, Tailwind CSS, and Next Auth (App Dir)!
Переглядів 18 тис.Рік тому
Build a custom login page for your SaaS app with Next.js, Tailwind CSS, and Next Auth (App Dir)!
Build a custom register page for your SaaS app with Next.js, Tailwind CSS, and Next Auth (App Dir)!
Переглядів 8 тис.Рік тому
Build a custom register page for your SaaS app with Next.js, Tailwind CSS, and Next Auth (App Dir)!
Set up Next-Auth with Next.js and Prisma with this ultimate guide!
Переглядів 57 тис.Рік тому
Set up Next-Auth with Next.js and Prisma with this ultimate guide!
How to set up Prisma with Next.js and Postgres!
Переглядів 39 тис.Рік тому
How to set up Prisma with Next.js and Postgres!
FIRST LOOK! Next.js App Directory API Routes! (Canary Build, Brand New!)
Переглядів 2,1 тис.Рік тому
FIRST LOOK! Next.js App Directory API Routes! (Canary Build, Brand New!)
Build a contact form and send an email with React + Next.js (End-To-End!)
Переглядів 15 тис.Рік тому
Build a contact form and send an email with React Next.js (End-To-End!)
Let's Build... A Clock! Make a digital clock with Next.js, React, Tailwind and TypeScript!
Переглядів 2,9 тис.Рік тому
Let's Build... A Clock! Make a digital clock with Next.js, React, Tailwind and TypeScript!
Install Tailwind CSS with Next.js 13 App Directory
Переглядів 4,4 тис.Рік тому
Install Tailwind CSS with Next.js 13 App Directory
Getting started with Next.js 13's new app directory
Переглядів 1,1 тис.Рік тому
Getting started with Next.js 13's new app directory
Exactly the overview I was looking for, thanks! I'm surprised there is not more indication in the "MyComponent" that it is server rendered. I'm a bit concerned it makes it harder to read and reason about what a large codebase is doing. Any thoughts?
exactly what I was looking for thanks!
Liking cuz I got the 69th like
can anyone help me using multer
When i try to migrate am receiving : Error: Failed to create a new migration directory. 0: schema_core::state::CreateMigration with migration_name="init" draft=false at schema-engine\core\src\state.rs:247
Excelente explicación, muchas gracias por tu ayuda!
giga-huge respect for a video! exactly what I need right now! Like, subscription and comment from me 🎉
Did you try react-aria-components already? The setup is a lot simpler that way.
Stright to the point, easy to follow, clear explanations, thank you so much, have a nice day !
This is wonderful and well explained Thanks 👍🏼
Great tutorial! Short and to the point. Thanks!
u earn a subscription sir.......thanks for millions time or more over
Thanks alot Ethan!!!!keep it up and keep forward u done best and its best to learn from u..
const imagePath = join(process.cwd(), 'public/images', imageFile.name)
Nice simple tutorial. Thanks
teaching and presenting skills are through the roof! THANK YOU! Instant subscribe.
I've been looking for this exact info for hours now. Thank you for this
Hi Ethan, do you have any updates on this?
Thank you so much sir for such a simple and great explanatin...😇
Great video Ethan, thank you!
Thanks for sharing! I've seen many tutorials using third-party services for this, so it's great to know you can do it with Server Actions instead! 💪
Awesome!
Hi, Mate i saw your video about postgres it is very nice and informative, i understand it well, But when you entered the command into terminal , please also mention the command for windows users. Thanks
Thanks brother, i was stuck for 5 day and now i am good to go.
hi i get unhandeled runtime error: Unhandled Runtime Error Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of `Form`.
Do we have to add NEXT_PUBLIC prefix for google's id and secret for 14?
Those who are suffering from "error: no such file or directory" try this, it make a folder in you codebase. const path = join(__dirname, file.name);
const imagePath = join(process.cwd(), 'public/images', imageFile.name)
Your video is fire, i implemented on a project in my company and the project was in production. It worked very well, thank you.
Very helpful, thanks a lot!
but this is basically me messaging me ? when I check who sent the email it is the user we entered so how can random people mail me for my portfolio website?
you are just amazing!!!! the way you explain the things was quite simple. no need to install 25 packages from npm.
Bro, you brought the understanding of nextjs server components to a simplified level which can cause a great misunderstanding among newbies. Thanks, bro
Thanks Bro ❤
can we store these images while our website is live?
This dude solved my problem I had for two weeks. He deserves way much more subscribers
awesome Thanks a lot.
but how can i access that with a URL??
Have you found any solution? If yes can you please share your approach
@@sidyboy6998 const data = await file.arrayBuffer(); const randomString = randomBytes(8).toString('hex'); const fileName = `${Date.now()}_${randomString}_${file.name}`; const filePath = path.resolve('public/uploads', fileName); await fs.writeFileSync(filePath, Buffer.from(data)); ...and the url will be available const imageUrl = `/uploads/${fileName}`; the file can be accesed by going to the base url + the imageUrl .......this is how u can do it with the fs module, this approach will write files inside the upload folder in the project itself but make sure u have a folder named uploads in the public folder or u can also use cloud storage like cloudinary to store files online and get their url from the cloud itself, both work very well.
@@sidyboy6998 const data = await file.arrayBuffer(); const randomString = randomBytes(8).toString('hex'); const fileName = `${Date.now()}_${randomString}_${file.name}`; const filePath = path.resolve('public/uploads', fileName); fs.writeFileSync(filePath, Buffer.from(data)); const imageUrl = `/uploads/${fileName}`;...make sure u have a fodler inside public named uploads...the url will be the base url/uploads/fileName . or u can also use cloud services like cloudinary to directly upload that on the cloud and get url from that
wtf just read your blog, i just discovered you man, sigh... best of luck
exactly what i was looking for thanks you are a life saver
If you are trying to use prisma with supabase add in .env file variable with name DIRECT_URL, which will be the same as DATABASE_URL, but will have a 5432 port, instead of 6543. After that update your schema.prisma file and add directUrl after url. It will look like this: datasource db { provider = "postgresql" url = env("DATABASE_URL") directUrl= env("DIRECT_URL") }
What if user wants to update their gmail email address? with different gmail email address?
awesome!
VERY HELPFUL THANKS ethen @Build SaaS with Ethan
THANK YOU
Men you save me again
thanks, you saved me lot of time
You save a file outside the Nextjs folder, How can Nextjs read it?
make new one with Auth.js!!!
Your explanation is clean and straight to the point that others can't!
I noticed you searching through a long list of commands when searching for docker postgres in the terminal. What are you using to do that?
at 14:40 of video, content of route.ts file which is visible in screen are completely changed
This video doesn't help.