๐Ÿ”ด Letโ€™s build a Professional Networking App 2.0 with NEXT.JS 14! (Azure, GitHub Copilot, MongoDB)

Sonny Sangha โ€ข April 23, 2024
Video Thumbnail
Sonny Sangha Logo

Sonny Sangha

@sonnysangha

About

I'm Sonny. ๐Ÿ’ฏ You might also know me as PAPA React! I've been coding for over 10 years now. As a Full Stack developer I've worked both with startups and large corporations to help build & scale their companies. Along the journey I realised my passion existed in helping others excel and pursue their dreams as upcoming developers and if thatโ€™s not enough I have cloned most of the applications you have used in your life! ๐ŸŒŸ ๐Ÿšจ Join the worldโ€™s BEST developer community โ€œZero to Full Stack Heroโ€ NOW: https://www.papareact.com/course

Video Description

โ—๏ธ Get the Source Code for FREE: https://github.com/sonnysangha/linkedin-clone-nextjs-14-copilot-azure-cosmos-db-typescript-shadcn ๐Ÿšจ 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 ๐Ÿ”ด Looking for the code for my other builds? ๐Ÿ› ๏ธ https://links.papareact.com/github Join me as I show you how to build it from scratch with the latest Next.js 14. You'll learn the following in this build: ๐Ÿ‘‰ Ability to Create/Delete a post, Like / Unlike posts and Comment on posts! ๐Ÿ‘‰ Create a complete Backend API with GET, POST, DELETE etc. requests! (With Error Handling) ๐Ÿ‘‰ How to implement MongoDB in combination with Azure Cosmos DB to provide a scalable storage/database solution ๐Ÿ‘‰ How to use Mongoose, a third-party library for MongoDB, to help structure and access your data with ease. ๐Ÿ‘‰ How to upload/download images to & from Microsoft Azure Blob Storage securely ๐Ÿ‘‰ How to utilise the powerful GitHub Copilot to get AI-based suggestions in real time to supercharge your code! ๐Ÿ‘‰ How to use Clerk Authentication to add Google user authentication with ease! (Including Authentication Middleware for Next.js) ๐Ÿ‘‰ How to utilise the power of Server Actions & caching in Next.js to create an optimal & efficient user experience! ๐Ÿ‘‰ How to use Next.js 14 Server Components & Client Components and when/where to use them! ๐Ÿ‘‰ Create a Beautiful UI & UX for our Frontend using the highly Popular Shadcn & Tailwind CSS ๐Ÿ‘‰ How to use TypeScript to reduce the overall number of Bugs and Errors ๐Ÿ‘‰ How to deploy the final build on Vercel ๐ŸŽต WANT TO LISTEN TO THE EXCLUSIVE PAPAFAM PLAYLIST? Sign up for the PAPAFAM Newsletter here ๐Ÿ‘‰ https://links.papareact.com/newsletter ๐Ÿ• TIMESTAMPS: 00:00 Introduction 1:08 Build Demo 3:45 VS Code Day 2024 6:37 Build Tech 12:29 Initialising the Build 20:17 Setting Up Shadcn/ui 22:50 Creating the Header Component 26:20 Building the Header Component 40:51 Implementing Clerk for Authentication 51:16 Building the User Information Component 1:06:15 Building the Post Form Component (1/2) 1:26:45 Implementing Next.js 14 Server Actions (1/2) 1:29:44 Setting Up Azure Cosmos DB for MongoDB 1:32:47 Implementing Azure Cosmos DB for MongoDB Cluster 1:34:34 Implementing Mongoose 1:38:11 Creating MongoDB Schemas for Posts 1:50:11 Creating MongoDB Schemas for Likes & Unlikes 1:53:28 Creating MongoDB Schema for Deleting Posts 1:54:33 Creating MongoDB Schemas for Comments 1:57:48 Creating MongoDB Schema for Getting All Posts 2:04:31 Implementing Next.js 14 Server Actions (2/2) 2:08:51 Explaining API Endpoints for the Backend 2:12:02 Creating an API Endpoint for Fetching All Posts 2:20:00 Creating an API Endpoint for Deleting a Post 2:24:18 Creating API Endpoints for Liking & Unliking Posts 2:26:24 [BONUS] API Endpoints for Followers & Following 2:27:10 Creating an API Endpoint for Comments 2:28:42 Testing All the API Endpoints 2:34:39 Implementing MS Azure Blob Storage for Image Upload Functionality 2:49:07 Building the Post Feed Component 2:51:38 Building the Post Component (1/2) 3:01:29 Implementing the Delete Post Server Action 3:08:14 Building the Post Component (2/2) 3:11:16 Building the Post Options Component 3:18:39 Calling the API Endpoints for Liking & Unliking Posts 3:25:21 Implementing the Comment Functionality 3:46:36 Fixing the UI & Adding Widgets 3:58:54 Implementing Toast Notifications with Sonner from Shadcn/ui 4:06:42 Deploying to Vercel 4:10:21 Final Deployed Build Demo 4:15:07 Build Summary 4:18:33 Outro Letโ€™s get it PAPAFAM ๐Ÿ”ฅ. DISCLAIMER: This Video is made for informational and educational purposes only. We do not own or affiliate with LinkedIn and/or 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 education purposes. #nextjs #nextjs14 #react #linkedin #typescript #reactjs #coding #javascript #tailwindcss #shadcn #nosql #reactjstutorial #coding #tutorial #beginner #programming #ai #machinelearning #mongodb #mern #mernstack #mongoose #microsoft #azure #github #copilot #microsoft #azure #vscode

You May Also Like

Upgrade Your Gaming Setup

AI-recommended products based on this video

Loading...
acer Nitro V 15 Gaming Laptop, Intel i9-13900H Up to 5.4GHz, GeForce RTX 4060, 15.6" 144 Hz IPS Display, 64 GB DDR5, 4 TB SSD, Wi-Fi 6, Backlit Keyboard, Windows 11 Pro, Gaming Mouse, 256GB UFD

acer Nitro V 15 Gaming Laptop, Intel i9-13900H Up to 5.4GHz, GeForce RTX 4060, 15.6" 144 Hz IPS Display, 64 GB DDR5, 4 TB SSD, Wi-Fi 6, Backlit Keyboard, Windows 11 Pro, Gaming Mouse, 256GB UFD

(2,753)
$1,899.99
FREE delivery Tomorrow, Jun 12Arrives before Father's Day
Loading...
acer Nitro V16 Gaming Laptop, Microsoft Office 2024 Lifetime License, 16" WUXGA 165Hz, AMD Ryzen 7 8845HS Up to 5.10 GHz, GeForce RTX 4060, 64 GB DDR5 RAM, 4 TB SSD, Backlit Keyboard, Win 11 Pro

acer Nitro V16 Gaming Laptop, Microsoft Office 2024 Lifetime License, 16" WUXGA 165Hz, AMD Ryzen 7 8845HS Up to 5.10 GHz, GeForce RTX 4060, 64 GB DDR5 RAM, 4 TB SSD, Backlit Keyboard, Win 11 Pro

(0)
$1,769.99
FREE delivery Jun 17 - 20
Loading...
acer Nitro V16 Gaming Laptop, 8-Core AMD Ryzen 7 8845HS Up to 5.10 GHz, 16" WUXGA 165Hz, GeForce RTX 4060, 64 GB DDR5 RAM, 4 TB SSD, Wi-Fi 6E, Backlit Keyboard, MS Office Lifetime & Win11 Pro

acer Nitro V16 Gaming Laptop, 8-Core AMD Ryzen 7 8845HS Up to 5.10 GHz, 16" WUXGA 165Hz, GeForce RTX 4060, 64 GB DDR5 RAM, 4 TB SSD, Wi-Fi 6E, Backlit Keyboard, MS Office Lifetime & Win11 Pro

(48)
$1,769.99
FREE delivery Tomorrow, Jun 12Arrives before Father's Day
Loading...
acer Nitro V16 Gaming Laptop, 16" WUXGA 165Hz Display, 8-Core AMD Ryzen 7 8845HS Up to 5.10 GHz, GeForce RTX 4060, 64 GB DDR5 RAM, 4 TB SSD, Backlit Keyboard, Office Lifetime License, Win11 Pro

acer Nitro V16 Gaming Laptop, 16" WUXGA 165Hz Display, 8-Core AMD Ryzen 7 8845HS Up to 5.10 GHz, GeForce RTX 4060, 64 GB DDR5 RAM, 4 TB SSD, Backlit Keyboard, Office Lifetime License, Win11 Pro

(988)
$1,769.99
FREE delivery Tomorrow, Jun 12Arrives before Father's Day
Loading...
Lenovo ThinkPad E14 Gen 5 Business Laptop (14" FHD+ Anti-glare, Intel 10-Core i7-1355U, 40GB RAM, 1TB SSD) Backlit, Fingerprint, Fast Charge, 1080p RGB Webcam, Wi-Fi 6, Win 11 Pro w/ Copilot

Lenovo ThinkPad E14 Gen 5 Business Laptop (14" FHD+ Anti-glare, Intel 10-Core i7-1355U, 40GB RAM, 1TB SSD) Backlit, Fingerprint, Fast Charge, 1080p RGB Webcam, Wi-Fi 6, Win 11 Pro w/ Copilot

(12)
$899.99
FREE delivery Wed, Jun 18
Loading...
Lenovo IdeaPad 15.6" FHD Touchscreen Laptop (40GB RAM, 1TB SSD, Intel 6-Core i3-1215U (> i5-1135G7)), Narrow Bezel, Webcam, 10-Hour Long Battery Life, Wi-Fi 6, Win 11 Home S Mode, Cloud Grey

Lenovo IdeaPad 15.6" FHD Touchscreen Laptop (40GB RAM, 1TB SSD, Intel 6-Core i3-1215U (> i5-1135G7)), Narrow Bezel, Webcam, 10-Hour Long Battery Life, Wi-Fi 6, Win 11 Home S Mode, Cloud Grey

(32)
$499.99
FREE delivery Wed, Jun 18
Loading...
Lenovo V15 Laptop | 15.6" FHD Anti-Glare Display | AMD Ryzen 7 7730U | 40GB RAM | 1TB PCIe SSD | HDMI | Type-C | Webcam | Wi-Fi | THUNDEROBOT Wireless Ergonomic Mouse | Windows 11 Pro | Black

Lenovo V15 Laptop | 15.6" FHD Anti-Glare Display | AMD Ryzen 7 7730U | 40GB RAM | 1TB PCIe SSD | HDMI | Type-C | Webcam | Wi-Fi | THUNDEROBOT Wireless Ergonomic Mouse | Windows 11 Pro | Black

(26)
$649.00$636.02
FREE delivery Jun 18 - 23
Loading...
Lenovo 15.6" Laptop, Intel 10-Core i7-13620H (Beat Ultra 7 255U), 40GB DDR4 RAM, 2TB PCIe SSD, WiFi 6, Bluetooth 5.2, FHD Computer for Business & Student, RJ45, Type-C, HDMI, Windows 11 Pro, Wendbo

Lenovo 15.6" Laptop, Intel 10-Core i7-13620H (Beat Ultra 7 255U), 40GB DDR4 RAM, 2TB PCIe SSD, WiFi 6, Bluetooth 5.2, FHD Computer for Business & Student, RJ45, Type-C, HDMI, Windows 11 Pro, Wendbo

(11)
$899.00
FREE delivery Jun 18 - 23
Loading...
ASUS TUF Gaming GeForce RTX โ„ข 5070 Ti 16GB GDDR7 OC Edition Gaming Graphics Card (PCIeยฎ 5.0, HDMIยฎ/DP 2.1, 3.125-slot, Military-Grade Components, Protective PCB Coating, axial-tech Fans)

ASUS TUF Gaming GeForce RTX โ„ข 5070 Ti 16GB GDDR7 OC Edition Gaming Graphics Card (PCIeยฎ 5.0, HDMIยฎ/DP 2.1, 3.125-slot, Military-Grade Components, Protective PCB Coating, axial-tech Fans)

(433)
999.99
1K+ bought in past month
Loading...
ASUS TUF Gaming A16 (2024) Copilot+ PC Gaming Laptop, 16 16:10 165Hz Display, AMD Ryzenโ„ข AI 9 HX 370, NVIDIAยฎ GeForce RTXโ„ข 4060, 16GB LPDDR5X, 1TB PCIe Gen 4.0 SSD, Wi-Fi 6E, Windows 11, FA608WV-DB94

ASUS TUF Gaming A16 (2024) Copilot+ PC Gaming Laptop, 16 16:10 165Hz Display, AMD Ryzenโ„ข AI 9 HX 370, NVIDIAยฎ GeForce RTXโ„ข 4060, 16GB LPDDR5X, 1TB PCIe Gen 4.0 SSD, Wi-Fi 6E, Windows 11, FA608WV-DB94

(24)
1,599.00
PrimeFREE delivery Saturday, June 14
Loading...
iPhone Charger Cord [MFi Certified] 3Pack 0.9M Lighting Cable Power Delivery Charging Cord Compatible with iPhone 14 13 13 Pro Max 12 12 Pro Max 11 XS XR X 8 iPad,White

iPhone Charger Cord [MFi Certified] 3Pack 0.9M Lighting Cable Power Delivery Charging Cord Compatible with iPhone 14 13 13 Pro Max 12 12 Pro Max 11 XS XR X 8 iPad,White

(4,813)
7.99
PrimeFREE delivery Saturday, June 14 on orders shipped by Amazon over $35
Loading...
UGREEN Uno 6 in 1 USB-C Hub with 10Gbps USB-C & USB-A Data Ports 4K@60Hz HDMI for MacBook Pro/Air, iPad Pro, Surface, XPS, Thinkpad and More.

UGREEN Uno 6 in 1 USB-C Hub with 10Gbps USB-C & USB-A Data Ports 4K@60Hz HDMI for MacBook Pro/Air, iPad Pro, Surface, XPS, Thinkpad and More.

(1,196)
22.49
PrimeFREE delivery Saturday, June 14 on orders shipped by Amazon over $35
100+ bought in past month
Loading...
UGREEN USB C to USB Hub with 4 USB 3.0, Powered USB C Splitter for Laptop, MacBook Pro, Mac mini M4, iMac, iPad Pro, Chromebook, Dell XPS, Galaxy S23, and More, 0.5FT

UGREEN USB C to USB Hub with 4 USB 3.0, Powered USB C Splitter for Laptop, MacBook Pro, Mac mini M4, iMac, iPad Pro, Chromebook, Dell XPS, Galaxy S23, and More, 0.5FT

(12,070)
9.99
PrimeFREE delivery Saturday, June 14 on orders shipped by Amazon over $35
400+ bought in past month
Loading...
Lenovo V15 Business Laptop | Intel Pentium N6000 4-core Processor | 15.6 FHD (1920 x 1080) | 40GB RAM | 2TB PCIe SSD | Military Durability | Ethernet RJ-45 | Anti-Glare | WiFi-6 | Windows 11 Pro

Lenovo V15 Business Laptop | Intel Pentium N6000 4-core Processor | 15.6 FHD (1920 x 1080) | 40GB RAM | 2TB PCIe SSD | Military Durability | Ethernet RJ-45 | Anti-Glare | WiFi-6 | Windows 11 Pro

(55)
$579.99$429.99
FREE delivery Jun 23 - 25