In this 18-hour course, we will create a graphic design platform with a variety of features. You will learn how to create an intuitive editor for customizing templates, working with text and shapes, and integrating drawing tools. For authentication, we will use Auth.js (the new name for Next-Auth) and master social providers such as Google and Github. You will also learn to use AI to remove backgrounds and generate images from text, as well as implement a subscription and payment system using Stripe.
Build A Canva Clone
17h 48m 39s
English
Paid
Build A Canva Clone is a 52-lesson 17 hours 48 minutes self-paced course by Antonio Erdeljac (Code With Antonio). In this 18-hour course, we will create a graphic design platform with a variety of features.
Course facts
- Lessons
- 52
- Duration
- 17 hours 48 minutes
- Level
- All levels
- Language
- English
- Updated
- Instructor
- Antonio Erdeljac (Code With Antonio)
- Price
- Premium
Who teaches Build A Canva Clone? Antonio Erdeljac (Code With Antonio)
Antonio Erdeljac is a Croatian developer behind the Code With Antonio YouTube channel — one of the more active independent full-stack JavaScript channels online, with a focus on long-form, project-based clones of well-known applications (Netflix clone, Spotify clone, Notion clone, Discord clone, Trello clone). The channel's distinctive contribution is the depth of those clone tutorials — each typically runs 8-15 hours and covers the full back-end-to-front-end implementation of a working app.
The course catalog covers the modern Next.js / React stack: App Router patterns, server components, server actions, Prisma + PostgreSQL, NextAuth / Clerk authentication, Stripe billing, file uploads, real-time features with Pusher, and the deployment workflow with Vercel. Material is paid extended versions of the YouTube content with additional features and context.
The CourseFlix listing under this source carries over 15 Code With Antonio courses spanning that range. Material is aimed at intermediate-and-up React developers building real full-stack applications.
What lessons are included in Build A Canva Clone?
0:00
/ #1: Intro
All Course Lessons (52)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 1 | Intro Demo | 06:02 | |
| 2 | Setup | 14:10 | |
| 3 | Basics of Next.js | 33:03 | |
| 4 | Setting up Fabric.js | 29:15 | |
| 5 | Responsive Canvas | 13:10 | |
| 6 | Editor Layout | 11:44 | |
| 7 | Editor Navbar | 28:56 | |
| 8 | Editor Active Tool | 19:31 | |
| 9 | Editor Shape Sidebar | 17:19 | |
| 10 | Editor Shape Tool | 32:46 | |
| 11 | Editor Fill Color Tool | 52:56 | |
| 12 | Editor Stroke Color Tool | 19:57 | |
| 13 | Editor Stroke Width Tool | 21:45 | |
| 14 | Editor Layering | 07:22 | |
| 15 | Editor Opacity Tool | 11:08 | |
| 16 | Editor Text Sidebar | 16:56 | |
| 17 | Editor Font Family Tool | 17:31 | |
| 18 | Editor Font Style Tools | 33:01 | |
| 19 | Editor Font Size Tool | 11:06 | |
| 20 | Editor Delete Tool | 02:47 | |
| 21 | Basics of Hono | 26:42 | |
| 22 | Editor Image Sidebar | 32:58 | |
| 23 | Editor File Upload | 11:05 | |
| 24 | Editor Image Filter Tool | 22:58 | |
| 25 | AI Image Generation | 25:03 | |
| 26 | AI Background Removal | 16:54 | |
| 27 | Clipboard (Copy & Paste) | 10:13 | |
| 28 | Drawing Tool | 13:13 | |
| 29 | Canvas Settings | 16:29 | |
| 30 | Zoom Tool | 07:40 | |
| 31 | History (Undo & Redo) | 26:16 | |
| 32 | Hotkeys & Shortcuts | 10:47 | |
| 33 | Export & Import | 19:55 | |
| 34 | Basics of Auth.js | 09:37 | |
| 35 | Database & Drizzle Setup | 19:07 | |
| 36 | Custom Auth Pages | 28:06 | |
| 37 | Google Login | 05:24 | |
| 38 | Credentials Login | 47:53 | |
| 39 | Auth.js & Hono | 16:23 | |
| 40 | Session Provider & User Button | 11:47 | |
| 41 | Home Page & Layout | 26:19 | |
| 42 | Projects Schema & API | 23:37 | |
| 43 | Fetch Existing Project | 12:42 | |
| 44 | Autosave Feature | 43:30 | |
| 45 | Projects Infinite Load | 26:57 | |
| 46 | Duplicate a Project Feature | 08:51 | |
| 47 | Delete a Project Feature | 14:49 | |
| 48 | Templates Feature | 32:39 | |
| 49 | Templates Sidebar | 07:39 | |
| 50 | Subscriptions UI | 21:28 | |
| 51 | Subscriptions API | 01:02:22 | |
| 52 | Deployment on Vercel | 08:51 |
Unlock unlimited learning
Get instant access to all 51 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.
Learn more about subscriptionWhat courses are similar to Build A Canva Clone?
Updated 2y agoBuild a Jira clone
By: Antonio Erdeljac (Code With Antonio)In this 16-hour course, consisting of two parts (by the way, this is my longest course!).16h 26m
Updated 2y agoNext.js 14 & React - The Complete Guide
By: Udemy, Academind Pro (Maximilian Schwarzmüller)I created the bestselling Udemy course on React, now I'm super excited to share this course on NextJS with you - an in-depth course about an amazing React frame36h 13m5/5
Updated 2y agoBuilding a Full-stack Multilingual Blog with Next.js 13.4
By: UdemyAre you looking to build a modern, full-stack blog with the latest technologies? Look no further than this comprehensive Udemy course, which will guide you thro9h 15m
ClassicNext.js Ecommerce
By: Brad TraversyNext.js Ecommerce Course is a comprehensive 22-hour program that teaches step by step how to create a full-fledged e-commerce platform using Next.js 15.22h 12m5/5
Updated 1y agoPlanning with Claude Code
By: Mckay WrigleyIn this workshop, you build a small landing page generator with Next.js and Claude Code.47m
Updated 2y agoNext.JS with Sanity CMS - Serverless Blog App (w/ Vercel)
By: UdemyWe will start with integration of a very clean application layout I have prepared for you. We will follow latest practices of React and Next JS, this means we w13h 5m
Updated 2y agoReal-Time Collaborative Apps with Next.js and Supabase
By: Fullstack.ioThis course is here to assist you in efficiently creating real-time applications using Next.js, TypeScript, Tailwind CSS, and Supabase. We go beyond the fundame51m
Updated 8mo agoBuild a Shopping App With Next.js + NestJS & Prisma
By: Udemy, Michael GuayLearn to build a shopping app using Next.js and NestJS. Master modern web development with Prisma ORM, and deploy full-stack applications with AWS and Vercel.8h 6m
More courses by Antonio Erdeljac (Code With Antonio)
- Updated 2y ago
Build a Jira clone
In this 16-hour course, consisting of two parts (by the way, this is my longest course!).16h 26m 
FreeUpdated 2y agoNext Auth V5 - Advanced Guide
In this 8-hour course, you will learn how to create your own authentication toolkit using the latest version of Next Auth v5 (Auth.js).8h 1m
FreeUpdated 2y agoBuild A Slack Clone
In this 15-hour course, you will create your own Slack clone using advanced technologies such as Next.js, Convex, Tailwind CSS, Shadcn UI, and others.15h 13m
Updated 2y agoDuolingo Clone
In this 11-hour course, you will learn how to create your own SaaS application for language learning, similar to Duolingo. Users will be able to choose language11h 12m
Updated 2y agoCode With Antonio Workshops
These workshops show you how to build real apps with modern tools. You follow clear steps in each task. You learn by doing and test ideas as you go.17h 3m
Updated 2y agoBuild A Finance Platform
In this 11-hour course, you will learn how to create your own SaaS financial platform with the ability to track income and expenses, categorize transactions.13h 43m5/5
Frequently asked questions
What are the prerequisites for this course?
Before enrolling, you should have a basic understanding of JavaScript and React, as the course focuses on using Next.js, a React framework. Familiarity with web development concepts will help you follow along with setting up tools like Fabric.js and implementing authentication using Auth.js.
What will I build by the end of the course?
By the end of the course, you will have built a graphic design platform similar to Canva. The platform will include features like an intuitive editor for customizing templates, working with text and shapes, AI tools for image generation and background removal, and a subscription system using Stripe.
Who is the target audience for this course?
This course is ideal for web developers interested in building complex web applications and learning about graphic design platforms. It is also suitable for those who want to integrate features like AI, authentication with social providers, and payment systems into their projects.
How does this course compare to other web development courses?
This course offers a focused project-based approach, specifically on building a graphic design platform. Compared to general web development courses, it provides hands-on experience with tools like Fabric.js, Auth.js, and Stripe, and covers advanced features like AI image processing and subscription management.
Which specific tools and platforms will I learn to use?
The course covers the use of Next.js for building the application, Fabric.js for creating the editor, Auth.js for authentication, and Stripe for handling subscriptions and payments. It also includes lessons on deploying the application using Vercel.
What topics are not covered in this course?
The course does not cover basic programming fundamentals or in-depth AI model training. It assumes prior knowledge of JavaScript and React, focusing instead on integrating existing tools and libraries to build the platform.
What is the expected time commitment for this course?
The course has a total runtime of 18 hours, spread across 52 lessons. It is designed to be completed at your own pace, with practical exercises and project work that may require additional time beyond the video lectures.