🔴 Let’s build a LinkedIn Clone with NEXT.JS 14! (Microsoft Azure, GitHub Copilot, MongoDB, TS)
❗️ Get the Source Code for FREE: https://github.com/sonnysangha/linked...
🚨 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
📩 Want coding problems (with solutions!) delivered to your inbox daily? https://www.papareact.com/dailycoding...
Join me as I show you how to build a LinkedIn 2.0 clone 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
Watch video 🔴 Let’s build a LinkedIn Clone with NEXT.JS 14! (Microsoft Azure, GitHub Copilot, MongoDB, TS) online without registration, duration hours minute second in high quality. This video was added by user Sonny Sangha 01 January 1970, don't forget to share it with your friends and acquaintances, it has been viewed on our site 55,385 once and liked it 1.6 thousand people.