Day 44: Like Button with Animation Explained + Working Demo | Vibeshared

Day 44 – Animated Like Button Completed 🚀

website : www.vibeshared.com

Aaj Day 44 pe maine Like Button component ka complete code explain kiya aur website par uska live working result show kiya.

Ye simple button nahi hai —
isme authentication check, optimistic UI update, backend integration aur Framer Motion animation sab included hai.

✅ Aaj kya implement kiya:

❤️ Like / Unlike toggle

🔐 Login check (not logged-in → redirect to login)

⚡ Optimistic UI update

🔄 Real backend sync (/api/likes)

🔁 Like count update

💫 Framer Motion pulse animation

💥 Continuous pulse effect when liked

❌ Error handling & rollback logic

🔍 Component Behavior (From Code)
🔐 If User Not Logged In:

Redirect to:

/login?callbackUrl=currentPage

⚡ Optimistic Update:

UI instantly update hota hai

Like count increase / decrease hota hai

Backend response ke baad final sync hota hai

💫 Animation System:

Heart scale animation

Pulse ring effect every 3 seconds

AnimatePresence for smooth transitions

🎯 Why This Important Hai?

Like button social media ka core interaction feature hota hai.

Is implementation me:

UX smooth hai

Backend secure hai

UI responsive hai

Production-ready architecture follow kiya gaya hai

🔧 Tech Focus:

Next.js (Client Component)

useState, useEffect

NextAuth integration

Optimistic UI pattern

Framer Motion animations

Clean error handling

📌 About the Challenge:

Series: Building a Social Media Platform

Style: Build in Public

Frontend: Next.js

Progress: Day 44

Milestone: Interactive Like system live 🎉

👉 Subscribe to follow the journey
👉 Like the video to support the build
👉 Comment if you want next: Comment Like system

Видео Day 44: Like Button with Animation Explained + Working Demo | Vibeshared канала vibeshared