🔴 React.js Clones by PAPA React - 🔴 Lets build an AI Collaborative App with NEXT.JS 14! (Realtime Collab, Cloudflare, Clerk, Firebase)

1️⃣ Get Started with Cloudflare Workers 👉 https://links.papareact.com/cloudflare 2️⃣ Get Started with Clerk Authentication 👉 https://go.clerk.com/H0xwGD8 3️⃣ Get the Cloudflare Workers Code for free 👉 https://www.papareact.com/cloudflare-workers-code 🚨 Join the world’s BEST developer community & course Zero to Full Stack Hero: https://www.papareact.com/course 🛠️ Looking for the Code for my other builds? (Over 50+ others!) https://links.papareact.com/github Join me as I show you how to build it from scratch with the latest Next.js 14. You'll learn the following in this build: 👉 How to Deploy serverless Cloudflare workers in SECONDS, combining them with Hono to enable for a full Backend API with cors protection (EASY to follow for beginners) 👉 How to implement Real-time collaboration with Live Cursors and Live Rich Text Editing feature using Liveblocks 👉 How to create a Sleek Rich Text Editor which embraces realtime conflict-free data types to allow for realtime collaboration! 👉 How to build an authentication API route using the app router Route Handler syntax in Next.js 👉 How to use Next.js Server Components & Client Components and when/where to use them! 👉 How to Integrate OpenAI and Cloudflare AI Models via the use of Cloudflare Workers (To support Chat-To-Document & Summary Translation AI features) 👉 How to Integrate Cloudflare AI Workers to translate the Document Summary to any other language! 👉 How to Implement Firebase Firestore to store the user’s documents! 👉 How to use Clerk Authentication to add User Authentication with ease! 👉 Create a Beautiful UI & UX for our Frontend using the highly Popular Shadcn & Tailwind CSS 👉 How to use TypeScript to reduce the overall number of Bugs and Errors 👉 Create beautiful Dialog prompt’s, Toast Notifications & so much more with ShadCn Components! 👉 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: 0:00 Introduction 1:05 Build Demo 6:58 Build Tech & Explanation 11:42 Explaining Cloudflare Workers 19:37 Initialising the Build 23:41 Implementing Shadcn/ui 25:45 Setting Up Clerk for Authentication 31:18 Building the Header Component 42:13 Building the Sidebar Component 52:56 Setting Up Cloudflare & Firebase 56:03 Setting Up Cloudflare Workers with C3 (create-cloudflare-cli) 1:00:19 Implementing Firestore Database 1:03:45 Implementing Firebase Admin 1:09:19 Implementing the Create a New Document Functionality 1:23:59 Building the Sidebar Component for Displaying All Documents 1:40:10 Building the Sidebar Option Component 1:47:17 Building the Home Page 1:47:49 Building the Document Page 1:51:54 Building the Document Component 2:03:04 Implementing the Breadcrumbs Feature 2:10:59 Implementing Liveblocks 2.0 for the Real-time Collaboration Feature 2:18:43 Building the Live Blocks Provider Higher Order Component 2:24:26 Building the Room Provider Component 2:28:26 Implementing the Live Cursor Functionality with Liveblocks 2:35:46 Implementing the Follow Pointer Functionality with Liveblocks 2:48:11 Creating an API Endpoint 2:57:11 Building the Collaborative Document Editor 3:16:57 Implementing the Document Owner Features 3:20:46 Implementing the Delete Document Feature 3:33:51 Implementing the Invite to Document Feature 3:43:01 Implementing User Management Features 3:55:01 Implementing User Avatars 3:59:53 Implementing Cloudflare Workers AI with Hono 4:04:48 Implementing OpenAI API for the Document Translation Functionality 4:27:18 Implementing the Chat to Document Feature with OpenAI Completions API 4:40:49 Live Debugging 4:53:22 Deploying to Vercel 4:59:37 Final Deployed Build Demo 5:04:09 Zero to Full Stack Hero 5:04:40 Outro Let’s get it PAPAFAM 🔥. DISCLAIMER: This Video is made for informational and educational purposes only. We do not own or affiliate with Notion and/or any of its subsidiaries in any form. Copyright Disclaimer Under section 107 of the Copyright Act 1976, allowance is made for “fair use” of this video for educational purposes. #nextjs #nextjs15 #realtime #ai #cloudflare #reactjs #notion #javascript #tailwindcss #shadcn #openai #reactjstutorial #coding #tutorial #beginner #programming #chatgpt