🔴 Let’s build LinkedIn 2.0 with NEXT.JS 14! (Microsoft Azure, GitHub Copilot, MongoDB, TypeScript)
ฝัง
- เผยแพร่เมื่อ 31 พ.ค. 2024
- ❗️ Get the Source Code for FREE: github.com/sonnysangha/linked...
🚨 Join the world’s BEST developer community & course Zero to Full Stack Hero: www.papareact.com/course
🫂 Join my Community, "University of Code" for FREE: www.universityofcode.com
🔴 Looking for the code for my other builds? 🛠️
links.papareact.com/github
📩 Want coding problems (with solutions!) delivered to your inbox daily? 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 👉 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
![เปิดบ้าน เปิด Supercar อั๋นโอกิ เคยเอา rolls Royce เเลกพระ องค์ละ 100 ล้าน l [Nickynachat]](http://i.ytimg.com/vi/FeGwJwXauZ0/mqdefault.jpg)
I me Brazilian and I have acomponhed your contents, thanks for project, much great !!
Watching from Kenya, I love it
This was a great project, thanks!
great project. i have finished building it but am having issues deploying it to vercel. is anyone else getting errors?
Awesome!!! Thank you Sonny for this new tutorial. I am so excited to watch and follow it all
That is amazing🎉🎉🎉🎉🎉good vibes from El Salvador!
This is great. I'm enjoying this project. First there is so much concepts and techniques to learn. Second and most of all It's easy to follow and each time I get to understand how every piece of code works, where and how to use it in other projects! Please keep up the good work. We really want to see an eCommerce project with the latest technologies! Please It's a good idea!!!
Amazing content, so happy seeing your videos. What happened to the live version production url ?
Amazing, Nice
Sonny Bhai,
Please tell how we can implement the same with firebase as Azure is quite costly 🙏
Watching from Burundi
I am from India that's amazing 🤩
What is the baackground music at introoo?
@Sonny Sangha is this a full stack project or front end project??
yoyo #papafam amazing video brother love from india
I am watching from Islamabad Pakistan.
is this project is free for every thing , i mean any buying subscriptions in that ?
Dang I just got to this and tried the viscose link but looks like I am too late. That mean I cannot get the "GitHub" repo for this Build? Either way, I am in this and rock it! Thanks PAPPA FAM!!!
Hey, here it is: github.com/sonnysangha/linkedin-clone-nextjs-14-copilot-azure-cosmos-db-typescript-shadcn
Create some Web3 Dapps sir🙏
Azure is not available in my country so please use other DB😢 like Firebase or Sanity
Bro I am your daily viewer. Could you please make a full architecture software development, using redis, graphql, rabbitmq implement to your next video. Plz plz plz.
Skool clone ?
Nice IDEA!!!!
please build cringein 🙏
South africa
Please use free cloud database because microsft azure ask card information
me too it happened did you solve it
Any one got code?
first link in description, sign up & you'll get an email with the link in!
@@SonnySangha Thanks!!! you are inspiration ❤️❤️
microsoft azure wants credit card yet i dont have any it hjas made me stuck