🔴 Let’s build TRELLO Clone with REACT! (Next.js 13.4, GPT-4, Drag & Drop, Zustand, Appwrite Cloud)

🚨 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

📩 Want coding problems (with solutions!) delivered to your inbox daily? https://www.papareact.com/dailycodingchallenges

Join me as show you how to build a Trello 2.0 AI app 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 Trello 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