🎬 Welcome to Part 1 of the Full-Stack Facebook Clone project! In this tutorial, we’ll be building a MERN stack application using Next.js on the frontend and preparing for our backend with Node.js and MongoDB. Whether you're a beginner or an experienced developer, this project will help you level up your full-stack development skills! 💪
📌 What you'll learn in this video:
⚡ Setting up the foundation of the project with Next.js.
💡 Building reusable components for Posts, Stories, User Profiles, and more.
🎨 Adding a Dark/Light mode toggle with ShadCN UI.
🌐 Implementing dynamic routing and setting up API routes.
💥 Crafting responsive layouts using Tailwind CSS for a modern, clean design.
In Part 2, we’ll focus on building the backend using Node.js, Express, and MongoDB – handling authentication, post management, and real-time data with ease! 🔥
Important Links 🔗:
Facebook Zest Github Link: [[ Ссылка ]]
GitHub Repo: [Coming in Next Part]
Instagram: [[ Ссылка ]]
LinkedIn: [[ Ссылка ]]
💻 Don't forget to subscribe and turn on the 🔔 to stay updated with the next video, where we’ll bring the backend to life and connect the entire app! 🚀
🔗 Watch Part 2 (Backend): [Coming Soon]
00:00:00 – Introduction
00:14:40 – Next.js Setup
00:25:00 – ShadCN UI Setup
00:33:40 – Building Header & Layout
01:08:30 – Implementing Theme Toggle (Dark/Light Mode)
01:14:50 – Creating the Left Sidebar
01:28:50 – Creating the Right Sidebar
01:48:14 – Building Home Page Layout
01:54:46 – Adding the Story Feed Feature
02:39:00 – Building the Post Form
03:17:00 – Implementing Zustand (store)
03:28:12 – Building the Post Feed Component
04:08:30 – Developing the Friends Section
04:32:54 – Creating the Video Section
05:20:00 – Dynamic Routing Setup
05:28:50 – Building the User Profile Component
07:09:15 – Login & Signup Page
07:50:00 – Recap & Preparing for Backend (Part 2)
#MERNStack #FullStackDevelopment #FacebookClone #NextJS #NodeJS #MongoDB #TailwindCSS #ShadCNUI #ReactJS #WebDevelopment #CodingTutorial #DesiStack #DarkMode #WebAppDevelopment #FullStackProject
Ещё видео!