🔴 Let’s build an AI NOTION Clone with NEXT.JS 14! (Realtime Collab, Cloudflare, Clerk, Firebase)

1️⃣ Get Started with Cloudflare Workers 👉 links.papareact.com/cloudflare
2️⃣ Get Started with Clerk Authentication 👉 go.clerk.com/H0xwGD8
3️⃣ Get the Cloudflare Workers Code for free 👉 www.papareact.com/cloudflare-workers-code

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

🛠️ Looking for the Code for my other builds? (Over 50+ others!)
links.papareact.com/github

Join me as I show you how to build a Notion-like App 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 👉 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