πŸ”΄ 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