Next.js 14 and Tailwind CSS project | Build a social media app similar to instagram with next js 14

Published: 03 April 2024
on channel: React & Next js Projects with Sahand
72,671
1.3k

Get Hostinger Discount: https://hostinger.com/Sahand Coupon Code: SAHAND

🚀 Are you ready to master **Next.js 14**? Look no further! Dive into our complete tutorial and journey from beginner to pro. Whether you're a Next.js newbie or aiming to build a full-fledged website with Next.js and Tailwind CSS, this crash course is tailored for you.

📘 *What You'll Learn:*
Uncover Next.js 14's latest features
Craft stunning portfolios and projects
Gain the skills to handle any Next.js task

🔗 *Source Code & Final Version:*
https://github.com/sahandghavidel/ins...

🎨 *Eraser Diagram:*
https://app.eraser.io/workspace/EsoWB...

---

🎬 *Welcome to our Instagram Clone Project!*
With Next.js 14 and Tailwind CSS, website development has never been easier. We'll guide you step-by-step:

1️⃣ **Folder & File Structure**: Learn to organize your Next.js 14 project.
2️⃣ **Build an Instagram Clone**: Utilize Firebase to create your own Movie database app.
3️⃣ **Modern Design**: Elevate your website's look with Tailwind CSS.
4️⃣ **Advanced Features**: Add like, comment, post, error handling, and more.

---

⏰ *Timestamps:*
00:00 - Intro
03:00 - Project preview
07:47 - Install Next.js and Tailwind CSS and create the first template
27:00 - Add header component
41:06 - Add next-auth and and modify the header component
01:04:45 - Add modal functionality using react modal
01:21:47 - Add upload image functionality
01:45:28 - Add upload functionality to the Firestore
01:59:29 - Make the feed section responsive
02:04:12 - Complete the mini profile component
02:10:16 - Add post card of the feed section
02:25:53 - Add like functionality to the post
02:44:02 - Add comment functionality to the post
03:00:57 - Deploy to Hostinger


Watch video Next.js 14 and Tailwind CSS project | Build a social media app similar to instagram with next js 14 online without registration, duration hours minute second in high quality. This video was added by user React & Next js Projects with Sahand 03 April 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 72,67 once and liked it 1.3 thousand people.