The Ultimate NEXT.JS 13 Crash Course for Beginners - Build 6 Apps in 18 Hours!

🚨 JOIN the world’s BEST developer Course & Community Zero to Full Stack Hero: https://www.papareact.com/course 🔴 Looking for the Code? 🛠️ https://links.papareact.com/github 🖥️ Join me as I build 6 Apps using Next.js 13, ReactJS, Tailwind CSS & TypeScript & More: 1️⃣ TRELLO 2️⃣ BLOG 3️⃣ LIVE NEWS 4️⃣ META MESSENGER 5️⃣ AMAZON WEB SCRAPER 6️⃣ GOOGLE SHOPPING 🕐 TABLE OF CONTENTS: ➡️ Introduction 0:00 Build Showcases & Tech Stack 6:29 Next.js 12 to Next.js 13 Tutorial 1:01:26 Intermission 1 1:01:54 Next.js 13 Server Actions Lesson 1:26:10 Intermission 2 1️⃣ Trello Clone 1:27:38 Build Showcase 1:47:57 Building the Header Component (1/2) 1:57:16 Implementing the React Avatar Library 2:02:17 Building the Chat GPT-4 Suggestion Box in the Header Component 2:05:44 Building the Header Component (2/2) 2:10:59 Implementing React Beautiful DnD Library 2:16:31 Implementing Appwrite Cloud 2:28:34 Implementing Zustand 2:41:51 Building the Board Component (1/2) 2:42:46 Implementing To-Do Data 2:56:16 Sorting Columns by Column Types 3:05:48 Building the Column Component 3:18:48 Building the To-Do Card Component 3:23:22 Implementing the DnD and Search Functionality 3:50:51 Implementing ChatGPT 4 Functionality with OpenAI API 4:13:26 Implementing Headless UI Components 4:34:00 Implementing the Image Upload Functionality 5:02:45 Deploying to Vercel & Final Build Demo 5:07:35 Intermission 3 2️⃣ Blog App 5:09:18 Build Showcase & Tech 5:23:19 Setting up Sanity & Sanity Embedded Studio 6:00:49 Building the Header Component 6:05:45 Building the Banner Component 6:09:00 Implementing Preview Mode 6:25:28 Building the Blog List Component 6:52:16 Upgrading the Preview Mode 6:58:08 Building the Blog Article Content Page 7:11:21 Implementing React Portable Text Plugin 7:12:01 Building the Rich Text Components Component 7:19:37 Final Build Demo 7:20:25 Making the Blog Site Faster with Next.js 13 7:33:28 Deploying to Vercel & Final Build Demo 7:42:08 Intermission 4 3️⃣ Live News App 7:44:03 Build Showcase & Tech 7:58:58 Building the Header Component 8:09:00 Building the Nav Links and Nav Link Components 8:17:46 Building the Search Box Component 8:28:07 Building the Home Page 8:34:00 Implementing GraphQL Request Library 8:35:02 Implementing Mediastack API 8:38:56 Implementing StepZen 9:12:52 Building the News List Component 9:15:53 Building the Article Component 9:22:56 Implementing Line Clamp for Tailwind CSS 9:24:56 Adding Dark Mode 9:34:51 Implementing the Read More Button 9:37:49 Building the Article Page 9:44:59 Implementing the Search Functionality 9:54:47 Implementing Live Timestamp Functionality 9:57:13 Deploying to Vercel & Final Build Demo 10:10:03 Intermission 5 4️⃣ Meta Messenger App 10:12:36 Build Showcase & Tech 10:30:17 Building the Header Component 10:46:51 Building the Chat Input Component (1/4) 10:54:46 Setting up Upstash 11:02:13 Implementing UUID Library 11:07:24 Building the Chat Input Component (3/4) 11:08:58 Building the Add Message API Endpoint using Redis 11:16:10 Explaining & Implementing SWR 11:34:05 Building the Message List & Message Component 11:52:07 Implementing Pusher 12:18:48 Implementing the Loading Functionality 12:23:27 Implementing NextAuth Authentication with Facebook 13:00:59 Implementing Timestamp Functionality & Final Build Demo 13:05:36 Intermission 6 5️⃣ Amazon Web Scraper 13:07:48 Build Showcase & Tech 13:24:25 Building the Home Page (1/2) 13:27:50 Building the Sidebar Component (1/2) 13:37:13 Building the Header Component 13:55:05 Setting Up Bright Data 14:04:54 Explaining the Complete Build Flow 14:10:49 Setting up Firebase and Cloud Functions 14:17:22 Implementing the onScrapperComplete Webhook 14:21:12 Explaining & Implementing ngrok 14:31:45 Setting up Firebase Admin and Cloud Firestore Database 14:36:47 Implementing Bright Data 15:33:44 Building the Sidebar and Sidebar Row Components 15:50:19 Implementing Loading Animations & React Hot Toast Notifications 16:00:07 Deploying to Vercel & Final Build Demo 16:14:25 Intermission 7 6️⃣ Google Shopping Clone 16:17:31 Build Showcase & Tech 16:31:39 Building the Header Component 17:11:32 Building the Search Page 17:16:08 Implementing Oxylabs E-Commerce Scraper API 17:40:12 Building the Results List Component 18:03:48 Implementing the React Loading Skeleton Library 18:08:38 Building the Product & Home Page 18:47:12 Deploying to Vercel & Final Build Demo 19:03:40 Outro DISCLAIMER: This Video is made for informational and educational purposes only. We do not own or affiliate with Trello, OpenAI, Amazon, Google or any of their 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.