NEXT.JS Crash Course for Beginners – Build 6 Apps in 17 Hours (SSR, Auth, Full-Stack + More) [2023]

Sonny Sangha

🚨 Join the world’s BEST developer community Zero to Full Stack Hero: https://www.papareact.com/course

🕐 TABLE OF CONTENTS:

INTRODUCTION
00:00 Intro
01:21 Sanity Sponsorship

MEDIUM BUILD
02:56 Build Showcase & Breakdown
19:32 Building the Header Component
36:20 Adding Sanity CMS
53:00 Adding Next.js SSR
01:06:39 Implementing the Posts Section
01:18:48 Linking Post Page
01:34:33 Building the Post Page
01:46:04 Adding Comments
02:27:30 Deployment
02:38:57 Final Demo
02:39:42 Break 1

FACEBOOK BUILD
02:40:46 Build Showcase
02:52:39 Building the Header Component
02:54:38 Building the Header (Left Side)
03:11:31 Building the Header (Center)
03:27:12 Building the Header (Right Side) (1/2)
03:33:43 Adding NextAuth.js
03:46:27 Building the Login Component
03:54:33 Building the Header (Right Side) (2/2)
03:57:08 Building the Sidebar Component
04:00:57 Building the SidebarRow Component
04:09:33 Building the Feed Component
04:10:18 Building the Stories Component
04:11:44 Building the StoryCard Component
04:23:03 Building the InputBox Component (2/2)
04:35:41 Adding Cloud Firestore
04:39:20 Building the InputBox Component (2/2)
04:58:46 Building the Post(s) Component
05:14:20 Building the Widgets Component
05:19:44 Building the Contact Component
05:25:18 Adding SSR
05:31:08 Final Demo
05:31:50 Break 2

INSTAGRAM BUILD
05:32:40 Build Showcase & Breakdown
05:48:37 Building the Header Component
05:51:31 Building the Left Section of the Header
06:02:30 Building the Middle Section of the Header
06:14:26 Building the Right Section of the Header
06:33:05 Adding the Sticky Header
06:35:18 Building the Feed Component
06:37:27 Building the Stories Section (1/2)
06:41:44 Adding Faker.js
06:53:35 Building the Stories Section (2/2)
07:05:22 Building the Post(s) Component (1/2)
07:11:18 Building the Header Section
07:15:15 Building the Image Section
07:16:15 Building the Buttons Section
07:20:18 Building the Captions Section
07:22:03 Building the Input Box Section
07:25:19 Building the MiniProfile Component
07:32:25 Building the Suggestions Component
07:40:05 Explaining NextAuth Custom Page
07:41:20 Adding NextAuth (1/2)
07:46:33 Adding Firebase
07:55:48 Adding & Customising SignIn Page
08:21:13 Adding NextAuth (2/2)
08:34:42 Adding Recoil & Recoil Atoms
08:42:28 Building the Modal Component
09:02:53 Adding Firebase v9
09:18:52 Building the Post(s) Component (2/2)
09:28:30 Beating the Hacker(s)
09:30:47 Adding Comment Functionality
09:44:50 Adding the Like Functionality
10:02:12 Deployment
10:10:16 Final Demo
10:12:11 Break 3

WHATSAPP BUILD
10:13:01 Build Showcase
10:23:13 Adding Styled Components
10:24:33 Adding a chat.js Page
10:26:51 Building the Sidebar Component (1/3)
10:48:37 Adding Firebase & Firestore
10:55:15 Building the Sidebar Component (2/3)
11:01:51 Adding a login.js Page
11:11:39 Building the Loading Component
11:20:14 Building the Sidebar Component (3/3)
11:33:27 Building the Chat Component
11:50:56 Building the [id] Component
12:10:03 Building the ChatScreen Component (1/2)
12:43:52 Live Debugging
12:57:24 Building the Message Component
13:03:10 Building the ChatScreen Component (2/2)
13:07:03 Deployment
13:12:27 Final Demo
13:12:44 Check Pinned Comment for Hulu & Google Build Timestamps!

DISCLAIMER: This Video is made for informational and educational purposes only. We do not own or affiliate with Medium, Facebook, Instagram, WhatsApp, Hulu or 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 education purposes.

#nextjs #beginner #tutorial #reactjs