🔴 React.js Clones by PAPA React - 🔴 Let’s build a Task Board App with REACT! (Next.js 13.4, GPT-4, Drag & Drop, Zustand, Appwrite)

🚨 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 Join me as show you how to build it with React.js. You'll learn the following in this build: 👉 How to use the Beautiful DnD (Drag and Drop) Library to create your own Task Board! 👉 How to leverage the open AI GPT-4 API to create summaries of your daily task 👉 Use Zustand as a far simpler state management library solution instead of Redux 👉 Leverage Appwrite cloud to easily setup a Database & Storage solution so we can store our todos and images! 👉 How to build a fully responsive site with Tailwind CSS! 👉 How to integrate Headless UI to build beautiful UI components! 👉 Leverage the power of Server components in Next.js 13 (and how to use client components alongside them correctly!) 👉 How to use the new App folder structure in Next.js 13! 👉 How to create new Next.js 13.4 API endpoints in the '/app' directory 👉 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 TO LISTEN TO THE EXCLUSIVE PAPAFAM PLAYLIST? Sign up for the PAPAFAM Newsletter here 👉 https://links.papareact.com/newsletter 👇🏻 FOLLOW ME HERE: Instagram: https://links.papareact.com/instagram Facebook: https://links.papareact.com/facebook LinkedIn: https://links.papareact.com/linkedin Twitter: https://links.papareact.com/twitter Discord: https://links.papareact.com/discord 💰 WANT TO SUPPORT THE CHANNEL? Donate here: https://links.papareact.com/donate Grab some PAPA Merch: https://links.papareact.com/merch 🕐 TIMESTAMPS: 00:00 Introduction 01:05 Build Showcase 04:00 Appwrite Sponsorship 05:44 Build Tech (1/2) 09:57 Zero to Full Stack Hero 11:05 University of Code 11:42 Build Tech (2/2) 12:46 Initialising the Build 20:59 Build Layout 22:37 Recommended VS Code Extensions 23:36 Explaining TypeScript Aliases 25:57 Building the Header Component (1/2) 28:42 Building the Search Box in the Header Component 35:33 Implementing the React Avatar Library 40:56 Building the Chat GPT-4 Suggestion Box in the Header Component 45:36 Building the Header Component (2/2) 49:19 Creating the Board Component 50:26 Implementing React Beautiful DnD Library 56:10 Implementing Appwrite Cloud 1:01:19 Creating a Database in Appwrite Cloud 1:06:31 Implementing the Appwrite Cloud Database 1:08:40 Explaining State Management 1:09:35 Implementing Zustand (1/2) 1:12:57 Setting up Type Definitions 1:17:50 Implementing Zustand (2/2) 1:23:08 Building the Board Component (1/2) 1:24:03 Implementing To-Do Data 1:36:20 Adding Empty To-Do Columns 1:38:11 Sorting Columns by Column Types 1:41:20 Building the Board Component (2/2) 1:47:42 Building the Column Component 2:01:24 Building the To-Do Card Component 2:06:48 Implementing the Drag and Drop Functionality 2:28:00 Implementing the Search Functionality 2:34:59 Implementing ChatGPT-4 Functionality 2:59:05 Implementing Headless UI Components 3:20:41 Implementing the Image Upload Functionality 3:54:25 Deploying to Vercel 4:00:54 Final Deployed Build Demo 4:01:41 Zero to Full Stack Hero 4:03:07 Outro Let’s get it PAPAFAM 🔥. DISCLAIMER: This Video is made for informational and educational purposes only. We do not own or affiliate with Trello, ChatGPT, OpenAI or/and 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. #reactjs #nextjs #javascript #trello #openai #javascript #tailwindcss #tutorial #chatgpt #reactjs #ai