⭐▬▬▬▬▬▬ DOWNLOAD SOURCE CODE FOR FREE 👋 ▬▬▬▬▬▬⭐
https://acedevhub.com/projects/mern-s...
🎨 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! ▬▬▬▬▬▬🔔
/ @sangammukherjee
👋 ▬▬▬▬▬▬ CONNECT WITH ME ▬▬▬▬▬▬👋
Linkedin : / sangam-mukherjee-400488134
Instagram: / sangam_mukherjee