🔴 React.js Clones by PAPA React - 🔴 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: 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 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