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

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

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

🔴 LOOKING FOR THE CODE? 🛠️
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: www.papareact.com/dailycodingchallenges

🎵 WANT TO LISTEN TO THE EXCLUSIVE PAPAFAM PLAYLIST?
Sign up for the PAPAFAM Newsletter here 👉 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