MERN Stack Full Course - ECommerce App with CMS React, Next.js, Tailwind, Framer Motion
데브허브 | DEVHUB | MERN Stack Full Course - ECommerce App with CMS React, Next.js, Tailwind, Framer Motion🚀 Learn how to build a full-stack E-Commerce website with Next.js 14, OneEntry CMS & Tailwind CSS! 🛒🔥 Step-by-step tutorial covering authentication, payments, cart management & more!
🔥 Use code KISHAN2024 for free STUDY plan on OneEntry: https://oneentry.cloud/
🧑💻 Source Code: https://topmate.io/kishansheth/1238437
🚀 Hindi Channel: / @codewithkishan21
Discord for any problems/errors/bugs: / discord
Contact for Collaborations/Freelancing/Projects: kishansheth21@gmail.com
📚 Resources & Links:
--------------------------------------------------------------------------------
OneEntry: https://oneentry.cloud/
Next.js: https://nextjs.org/
ShadCn: https://ui.shadcn.com/
Framer Motion: https://www.framer.com/motion/
Vercel: https://vercel.com/
👇 Follow me here:
--------------------------------------------------------------------------------
💻 Join our Discord Community - / discord
🐦 Follow me on Twitter - / thekishansheth
🖼️ Follow me on Instagram - / thekishansheth
💼 Follow me on LinkedIn - / koolkishan
💰 WANT TO SUPPORT THE CHANNEL?
--------------------------------------------------------------------------------
https://buymeacoffee.com/koolkishansheth
🚀 App Features:
--------------------------------------------------------------------------------
Frontend: Built with Next.js 14 ⚛️
UI Components: ShadCN 🧩
Styling: Tailwind CSS 🎨
Responsiveness: Fully Responsive Design 📱💻
Animations: Framer Motion for Smooth Animations 🎥
Backend: OneEntry for Headless CMS and API 🛠️
Server Actions: Powered by Next.js Server Actions ⚡
State Management: Zustand for Seamless State Handling 🧠
Search: Filters for Easy Product Search 🔍
Cart & Checkout: Smooth Cart and Secure Checkout Experience using Stripe 🛒💳
Orders: Order Management with Status Updates 📦
Profile: Customizable User Profiles 👤
Loading State: Skeletons for Optimized Data Loading ⏳
Deployment: Hosted on Vercel 🚀
Code Quality: Typescript for Structured and Maintainable Code 📚
⏱️ Timestamps
--------------------------------------------------------------------------------
00:00 Demo
09:36 OneEntry Headless CMS
11:30 Environment Setup
25:45 Auth Component
01:10:10 OneEntry CMS Setup
01:13:10 OneEntry Auth Setup
01:24:00 OneEntry Local Setup
01:40:00 Signup with OneEntry
02:24:36 Login with OneEntry
02:35:50 Navbar
03:08:45 Auth Navbar
03:24:30 Logout
03:31:40 Responsive Navbar
03:50:10 Footer
03:52:00 Home Page Banner
03:59:40 Product Skeletons
04:05:24 Create Catalog on OneEntry
04:10:40 Create Products on OneEntry
04:18:35 Fetch Catalog & Products from OneEntry
04:28:48 Catalog & Products UI
04:42:45 Zustand Cart Store Setup
04:51:15 Add Products to Cart
04:55:50 Cart Page UI
05:11:15 Update/Remove Product from Cart
05:29:00 Search Products from OneEntry
05:31:35 Search Products UI
05:42:50 Search Products Filters
05:59:15 Get Product Details from OneEntry
06:02:00 Product Detail Page UI
06:17:05 Related Products from OneEntry
06:22:40 Related Products UI
06:27:00 Order Success & Cancel Page
06:30:00 Orders & Payments Setup on OneEntry
06:37:30 Integrate Orders & Payments on Cart Page
06:52:30 Orders Page
07:02:00 Profile Page
07:05:06 Deployment on Vercel