Let’s build a Complete SaaS with NEXT.JS 13! (Stripe Payments, Shadcn, Firebase, TS, NextAuth)

Let’s build a Complete SaaS with NEXT.JS 13! (Stripe Payments, Shadcn, Firebase, TS, NextAuth)

Sonny Sangha

8 месяцев назад

153,279 Просмотров

🚨 Join the world’s BEST developer community & course Zero to Full Stack Hero: https://www.papareact.com/course

🫂 Join my Community, "University of Code" for FREE: https://www.universityofcode.com

🔴 LOOKING FOR THE CODE? 🛠️
https://links.papareact.com/github

Join me on one of my LARGEST builds as I show you how to build a COMPLETE SaaS Platform:

👉 How to leverage the power of the Firebase Extension called "Run Payments with Stripe", seamlessly connecting your entire Firebase setup to Stripe!
👉 Learn to use the 'Translate Text in Firestore' Firebase Extension to dynamically translate user's messages into several languages in REAL-TIME!
👉 How to leverage Firebase v9 including the Firestore Database & Firebase Authentication
👉 How to Implement Stripe Checkout sessions to subscribe a user to payments!
👉 How to use Stripe Webhooks to dynamically update our Firestore database when Stripe events occur!
👉 Create a Beautiful UI & UX for our SaaS platform using the highly Popular Shadcn!
👉 How to correctly Validate forms with Zod to ensure Type Safety!
👉 How to leverage Global State Management with Zustand!
👉 Learn how to use NextAuth Middleware to protect page routes and API routes
👉 Learn how to implement Firebase Rules to secure your Firestore Database
👉 How to build a Login and Logout Authentication flow using NextAuth on Next.js 13!
👉 How to use Skeleton Loaders whilst data is fetched and custom hooks to simplify your code!
👉 How to build a beautiful SaaS with Tailwind CSS!
👉 Learn how to implement Dark Mode toggling to update the UI based on user preference!
👉 How to use TypeScript to reduce the overall number of Bugs and Errors
👉 How to deploy the final build on Vercel!

📩 Want coding problems (with solutions!) delivered to your inbox daily!?
Sign Up Here: https://www.papareact.com/dailycodingchallenges

🎵 WANT TO LISTEN TO THE EXCLUSIVE PAPAFAM PLAYLIST?
Sign up for the PAPAFAM Newsletter here 👉 https://links.papareact.com/newsletter


🕐 TIMESTAMPS
00:00 Introduction
01:02 Build Showcase
11:33 Build Tech
19:45 Initialising the Build
24:25 Planning out the Home Page
25:47 Creating the Header Component
27:13 Building the Logo Component
30:20 Implementing Shadcn/UI
40:06 Building the Header Component (1/2)
44:03 Implementing Dark / Light Mode
48:49 Building the User Button Component (1/2)
51:18 Building the User Avatar Component
1:00:15 Implementing Authentication Functionality with NextAuth (1/2)
1:03:49 Setting Up Firebase
1:07:03 Implementing Middleware
1:08:06 Implementing Authentication Functionality with NextAuth (2/2)
1:11:42 Building the Header Component (2/2)
1:17:57 Building the User Button Component (2/2)
1:28:32 Building the Create Chat Button Component (1/2)
1:32:44 Building the Home Page
1:42:05 Building the Pricing Page
1:55:00 Building the Registration Page
1:57:52 Building the Checkout Button Component
2:02:36 Adding to the Authentication Functionality
2:04:03 Setting up the Cloud Firestore Database
2:07:49 Implementing Firebase Admin
2:30:00 Implementing Stripe Checkout Session
2:32:35 Implementing Firebase Extension “Run Payments with Stripe”
2:35:49 Setting Up a Stripe Account / API Key
2:43:22 Implementing Firebase Extension “Translate Text in Firestore”
2:46:12 Implementing Stripe Webhooks
2:50:55 Setting up Products in Stripe (Free & Pro Memberships)
2:56:26 Building the Checkout Button Component
3:00:18 Creating the Subscription Provider Component
3:02:20 Setting Up Type Definitions
3:08:10 Building the Subscription Provider Component
3:09:32 Implementing Zustand for State Management
3:16:45 Building the Upgrade Banner Component
3:27:48 Restricting Pro Features for Free Members
3:31:24 Building the Manage Account Button Component
3:32:10 Implementing Server Actions
3:40:07 Building the Chats Page
3:44:20 Building the Create Chat Button Component (2/2)
3:49:09 Implementing Adding a Chat Functionality
3:59:28 Building the Chat List & Chat List Row(s) Components
4:11:22 Implementing a Skeleton Loader for the Chat List
4:14:36 Building the Chat List Row Component
4:19:17 Adding Language State & Functionality
4:30:00 Adding a Loading Screen
4:31:49 Building the Chat Input Component with Zod
4:47:19 Building the Chat Messages Component
4:54:11 Building the Chat Members Badges Component & Creating a Custom Hook
4:59:52 Implementing Admin Controls
5:01:24 Building the Invite User Functionality
5:12:24 Building the Share Chat Link Functionality
5:16:35 Building the Delete Chat Functionality
5:25:59 Enabling Chat Creation Restriction for Free Tier
5:34:57 Final Build Demo
5:43:37 Deploying to Vercel & Final Build Demo
5:52:45 Outro

Let’s get it PAPAFAM 🔥.

DISCLAIMER: This Video is for informational and educational purposes only. We are not responsible for how you and/or anyone else choose to use the contents of this tutorial.

#nextjs #saas #stripe #typescript #reactjs #firebase #javascript #tailwindcss #tutorial #nosql #reactjstutorial #coding #tutorial #beginner

Тэги:

#react #developer #reactjs #html #css #js #javascript #papa #papareact #papa-react #tutorial #frontend #webdev #web-dev #clone #fullstack #backend #motivation #reactnative #react-native #redux #typescript #nextjs13 #next_js_13
Ссылки и html тэги не поддерживаются


Комментарии:

@tharukerajapaksha7774
@tharukerajapaksha7774 - 30.11.2023 05:48

wow this is great

Ответить
@nayocrow
@nayocrow - 30.11.2023 03:22

Hi Guys, dont works the component createChatButton en my project, someone can share de firebase rules? i think may is for that reason

Ответить
@Missing_man
@Missing_man - 28.11.2023 14:53

can we do things without pay blaze fee?

Ответить
@znkdev
@znkdev - 28.11.2023 09:47

Spotify playlist link?

Ответить
@oluwaseunladeinde410
@oluwaseunladeinde410 - 23.11.2023 11:32

This was absolutely phenomenal!!! You can literarily deploy this as a full working Saas solution and be good. It's just sad that I could not continue with some parts of the tutorial especially the stripe integration with Firebase. Unfortunately, Stripe is not supported here in Nigeria. But I would implement this using some of our indigenous payment gateways. I should get the same result eventually. Thank you so much, Sonny. This is really good content. Cheers.

Ответить
@phdz9390
@phdz9390 - 22.11.2023 19:50

Free israel 🇮🇱

Ответить
@noelethan6230
@noelethan6230 - 22.11.2023 14:44

Do i have to pay to access the github repo? Coz after clicking the link it shows something about payment. So just wanted to make sure.

Ответить
@nitheesnithees1913
@nitheesnithees1913 - 20.11.2023 06:02

Build flowchart react application

Ответить
@Firewallnad
@Firewallnad - 19.11.2023 23:31

First of all thank you for the nice content '❤❤
I'm getting this error name: 'GetUserByAccountError', code: 16

Ответить
@ti6i
@ti6i - 19.11.2023 18:02

At which point did he implement the translation bit (How the chat is actually translated)? I don't see any timestamp for it

Ответить
@codingvidya4084
@codingvidya4084 - 18.11.2023 19:41

Hello Sonny sir, I am unable to update my role in the firebase. Please help me out if possible, please I want to learn SaaS development, on top of it I want to learn payment integrations and more about firebsae. I really learned a lot from this video, I've completed 3 hours, but I am now stuck because of I am unable to update the role in the firebase. Please help me. Thank you.

Ответить
@fallanstar
@fallanstar - 18.11.2023 16:39

please make React native Projects please sir

Ответить
@dananjayachathuranga7113
@dananjayachathuranga7113 - 17.11.2023 20:41

Thank u

Ответить
@user-bf2gb6li1r
@user-bf2gb6li1r - 17.11.2023 10:28

This is really awesome, though for the life of me I cannot get the role = 'pro', it is showing null. I have the GitHub and cannot find the reason and I keep going back and forth. Already completed the upgrade banner ... but since I can't get pro role, uggg.

Ответить
@chrisr1241
@chrisr1241 - 17.11.2023 00:07

Amazing that such tutorials exist. But also incredible how much work this basic stuff is. In the world of low and no code I am always blown away how much work the for sure better way of doing that stuff is…

Ответить
@shaoorss
@shaoorss - 16.11.2023 20:16

Great video, I don't know if I have missed anything, but I want to know how messages are being transferred from one user to another on runtime?? Just want to know what are you using for that.
PS: I may have skipped that. :(

Ответить
@fifaa155
@fifaa155 - 16.11.2023 12:56

Free Palestine

Ответить
@TejasThombare-rl4du
@TejasThombare-rl4du - 16.11.2023 06:39

anyone face issue in upgrading the blaze plan in INDIA

error :
Unable to verify your payment information. Please try again.
on every card VISA as well as mastercard also

Ответить
@Muneer_Bakkar
@Muneer_Bakkar - 15.11.2023 09:30

music is disturbing

Ответить
@incrediblemhi
@incrediblemhi - 15.11.2023 01:07

My exact stack 😮

Ответить
@AjaySingh-jz8qx
@AjaySingh-jz8qx - 14.11.2023 09:42

Best next js content ever seen. Sonny have you any plans about react native??

Ответить
@Maikkeru
@Maikkeru - 14.11.2023 06:02

I love this music. Is this original music for the channel?

Ответить
@ergys_sono
@ergys_sono - 13.11.2023 21:52

Hi Sonny! Great build, i am learning a lot of stuff following your videos! I would have a request if possible, could you share in the comments of your video the versions of the tools you are using? I was getting sick running at problems caused by tools versions. Thanks a lot

Ответить
@rakib8846
@rakib8846 - 13.11.2023 20:05

You wanna learn web development at a level where you can get a job? This. Videos like this are what you need. Great job!

Ответить
@frnz1821
@frnz1821 - 13.11.2023 14:16

what's the introoo musiccc?

Ответить
@reactworld8323
@reactworld8323 - 12.11.2023 19:41

how this guy can build everything

Ответить
@komseeh9191
@komseeh9191 - 11.11.2023 20:26

Which Backend is used here?

Ответить
@MawitGad
@MawitGad - 11.11.2023 11:56

Hey Sonny, It'l help me to know if this project is live right now, and if not why? I would love to understand what stops you from putting such a product to the use of your audience in order to gain potential clients?

Ответить
@jamessimon4804
@jamessimon4804 - 11.11.2023 09:11

It's yo boy!

Ответить
@DrAshishBamania
@DrAshishBamania - 11.11.2023 08:15

Don't forget to add "firebaseRole" to "pro" in the advanced options > metadata of the Stripe product, else things won't work.

Ответить
@yt-sh
@yt-sh - 11.11.2023 01:26

where's the code?

Ответить
@user-nc7iy5yw9b
@user-nc7iy5yw9b - 10.11.2023 21:26

Make a website that can finish Israeli😢

Ответить
@ghassanclassic7689
@ghassanclassic7689 - 10.11.2023 14:03

Amazing video, next time please upgrade to PWA

Ответить
@saidchaaba3849
@saidchaaba3849 - 10.11.2023 00:35

Even if you have nothing to do with coding, you can't move on and not watch iy!

Ответить
@dianazawislak294
@dianazawislak294 - 09.11.2023 05:58

aaah, i built the whole thing but ripping my hair out, when i click create chat is ee this "Unhandled Runtime Error
FirebaseError: Missing or insufficient permissions." to save my life for days now i cannot figure out where i made a mistake. anyone else ran into it?

Ответить
@kasper369
@kasper369 - 08.11.2023 18:41

Slow down Sonny I am gonna explode with excitement.

Ответить
@beastnighttv
@beastnighttv - 08.11.2023 16:35

is it possible to do the firebase extension stuff (run payments with stripe), without using the extension, for some complications I can't use a Blaze Plan.

Ответить
@johnathanvargas5594
@johnathanvargas5594 - 08.11.2023 15:17

Having trouble with the middleware not protecting routes. It does not redirect to the sign in anyone else have this problem?

Ответить
@amar5751
@amar5751 - 07.11.2023 16:43

Sonny can you make a video on authentication from scratch, like production base ...

Ответить
@gururajmoger8649
@gururajmoger8649 - 07.11.2023 12:01

Sony.. pls explain microfrontend from both next js and ReactJs..
Also lets start with Nest js 😊❤

Ответить
@robertmelendez712
@robertmelendez712 - 04.11.2023 22:43

Do you think this piece of code in the authOptions would do the trick instead of the HOC FirebaseAuthProvider?
events: {
signIn: async ({ account }) => {
const credential = GoogleAuthProvider.credential(account?.id_token);
await signInWithCredential(auth, credential);
}
},

Ответить
@dilhaque4614
@dilhaque4614 - 04.11.2023 17:51

are you from INDIA

Ответить
@SAAS-wo4uf
@SAAS-wo4uf - 04.11.2023 10:17

can you tell me how can i deploy this on my domain like if i want to host this website on my domain how to do it

Ответить
@user-jg8sd9te5b
@user-jg8sd9te5b - 03.11.2023 16:05

Is anyone else having problems with google authentication after deploying to vercel? I cannot get it to work, it says use a different account everytime, i cleared my database and checked all my variables, and nothing makes sense.

Ответить
@albertotomassteadhogg6218
@albertotomassteadhogg6218 - 02.11.2023 17:50

Sonny, i never coment on videos, but i need to say that you rock. Keep up the good work

Ответить
@podcast_MJ
@podcast_MJ - 01.11.2023 11:13

Free Palestine ❤

Ответить
@nayocrow
@nayocrow - 31.10.2023 02:54

When i get susbcription my user dont getting "pro" user.role is getting as null. Someone know how to fix it? thanks.

Ответить