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

🔴 Looking for the Code? 🛠️

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

1:01:26 Intermission 1
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: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.

[JohnVandivier]

Kudos Sonny! You're raising the level of education available to all. The community appreciates you.

[omarezeldin]

​I was just going to watch the old NextJS course, and check the new NextJS 13 while creating projects. Now *this* actually saved me.

[CryptiqueFlow]

You're a true saint, Sonny -- joining the course.

[kylebaker]

SONNY THANK YOU SO MUCH! I HAVE BEEN WAITING FOR A PLAYLIST LIKE THIS WITH NEXT 13!

[rasmuselm]

Sonny is back and dropping science like the big prof he is. Daniel from Nigeria!!!

[zoltanmolnar]

We are all waiting this release, thank you @Jay, thank you @Sonny

[joshuakithyoma]

I subbed yesterday, Im all in with PAPA !

[nsikakakpan]

Thanks Sonny. Because of you I have a lot of projects on my portfolio website 🎉

[ChinazaDev]

Always learning new things, thanks Sonny

[jasper]

You made learning so awesome. Thanks Sonny!

[codetonic_arush]

Really osm !! Video Sunny ! But I would like to suggest something, Lower the background music little bit more so that we more focus on coding part. It's actually distract very much and doesn't allow us to watching video for long time.

[RecoveryEyo]

i missed you at cleverprogramming, and since then i have been looking for your channel, thank God i found you

[thedeveloperadam]

Sonny bro insane.

You helped me land my first role nearly two years ago - I'll be picking up one or two of these just to get to grips with some nextjs!

Thanks brother!

[nitinkumar-zodp]

Awesome, I'm waiting, it's helpful for beginning and advance developer

[hubesh]

Hey sir we are also waiting for React Native Projects so plz start as soon as possible

[alvinrumbaoa]

Thank you for doing this to everyone 🎉

[thekontuli]

When you said that helping those guys achieve their dreams was probably your best achievement in life 🔥🔥🔥
This brother has truly found his Purpose in Life!
Onwards and Upwards bro

[KARIAP]

The day after tomorrow is gonna be a busy day, i already have other prjects to work on, this will take me a loooot of time.

[walderfranco]

Pure gold, incredible value for freee

[swoodc]

Thanks bro! I’m trying to learn next js since I’m trying to make an app with the t4 stack so this is helpful