MERN Stack Canva Clone : Next.js, React, Fabric.js, Auth V5, Tailwind, Microservices, MongoDB

⭐▬▬▬▬▬▬ DOWNLOAD SOURCE CODE FOR FREE 👋 ▬▬▬▬▬▬⭐ https://acedevhub.com/projects/mern-stack-canva-clone 🎨 Build a Full Canva Clone with Next.js, Node.js Microservices & Fabric.js! In this full-stack video we will be building a feature-rich Canva-style design editor from scratch — using Next.js, Node.js microservices, Zustand, Fabric.js, and Shadcn UI. Here’s what we’re building step-by-step: 🚀 Next.js App Setup + Shadcn UI Component Integration ⚙️ API Gateway with Node.js Microservices (Upload, Design, Subscription) 🔐 Auth.js Integration (NextAuth v5) with API token forwarding via middleware 📁 Modular Service Architecture for scalable backend logic 💾 MongoDB as the database for all services 🖼️ Powerful Canvas Editor with Fabric.js ✨ Add & Manipulate Shapes, Text, Drawings, and Images 🎯 Full Sidebar UI: Shapes, Uploads, Text, Draw, AI Panel ⚡ Smart Shape Factory & Custom Property Editor 🔒 Canvas Lock/Unlock Mode for focused editing 🔄 Real-Time Auto Save + Load Designs Seamlessly 🧠 AI Image Generation Panel using external API 📤 Cloud Image Uploads with preview & Canvas integration 📥 Upload Service with Cloudinary Integration 📚 Organized client-side services, stores & utilities with Zustand 💎 Premium Membership Flow 💳 Paypal Subscription Integration 🚫 Limit Free Users to 5 Designs + AI Feature Gating 📊 Design History, Billing Info & Upgrade Dialogs 🗑️ Delete Design Projects Directly from Dashboard 📦 Export your designs as PNG, SVG, JPG, or JSON 🧠 Responsive UI built with TailwindCSS + Shadcn UI ⭐▬▬▬▬▬▬ TIMESTAMPS 👋 ▬▬▬▬▬▬⭐ 00:00 Intro & demo 12:25 Creating project and folder setup for client and backend microservices 30:30 Auth JS setup and login page 47:45 auth config, next auth route and middleware setup 59:30 API Gateway implementation and basic server setup for all services 01:18:59 Auth middleware logic 01:27:32 Client side homepage UI implementation 02:12:18 Design Service implementation 02:38:49 Client side design service integration and creating empty new design 02:54:50 Main editor component, store setup and initialize canvas on page load 03:12:19 Fabric initialize method & center canvas utils 03:36:07 Load design after canvas initialized 03:53:09 Header and sidebar component for main editor 04:20:22 Settings Panel implementation 04:32:00 Elements Panel implementation 04:53:20 Shape factory utils 04:56:35 Add shape to canvas 05:07:30 Text Panel implementation 05:15:20 Add Text to Canvas 05:22:35 Drawing Panel Implementation 06:04:30 Upload service implementation 06:22:20 Client side upload services implementation 06:26:25 Upload Panel implementation 06:44:10 Add image to Canvas utils 06:51:30 AI Image backend services implementation 07:07:11 AI Panel Implementation 07:31:15 Property editor basic setup implementation 07:42:32 Canvas lock and unlock feature 07:46:35 Property editor implementation 10:00:30 Export Service Implementation 10:36:10 Autosave feature Implementation 10:56:57 Customize bounding box 11:06:40 Design Preview implementation 11:18:11 Subscription module implementation 👋▬▬▬▬▬▬ BUY ME A COFFEE :) ▬▬▬▬▬▬👋 https://www.buymeacoffee.com/sangammukh6 🔔▬▬▬▬▬▬ Subscribe for more! ▬▬▬▬▬▬🔔 https://www.youtube.com/channel/UCuWZvXIeoDzZKCzpTuC5krQ 👋 ▬▬▬▬▬▬ CONNECT WITH ME ▬▬▬▬▬▬👋 Linkedin : https://www.linkedin.com/in/sangam-mukherjee-400488134/ Instagram: https://www.instagram.com/sangam_mukherjee/