Join the world’s BEST developer community & course Zero to Full Stack Hero: https://www.papareact.com/course
Join me on one of my LARGEST builds yet as I show you how to build a COMPLETE SaaS Platform with Stripe Payments & Next.js 13. You’ll learn the following in this build:
How to leverage the power of the Firebase Extension called “Run Payments with Stripe”, connecting your entire Firebase setup to Stripe seamlessly!
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!
Learn to create 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!
LOOKING FOR THE CODE? ️
https://links.papareact.com/github
Want coding problems (with solutions!) delivered to your inbox daily!?
Sign Up Here: https://www.papareact.com/universityofcode
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 made for informational and educational purposes only. We are not responsible with how you, and/or anyone chooses to utilise the contents of this tutorial.
#nextjs #saas #stripe #typescript #reactjs #firebase #javascript #tailwindcss #tutorial #nosql #reactjstutorial #coding #tutorial #beginner
