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
About the Author: 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.
Watch Online 52 lessons
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 subscriptionCourse content
52 lessons · 17h 48m 39sShow all 52 lessons
- 1 Intro 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
Related courses
-
Updated 2y agoMERN Stack React, Socket io, Next.js Express,MongoDb, Nodejs
By: UdemyIf you are a person who is not picky about a CSS framework and wants to learn how to create enterprise-grade, practical full stack app using new technologies.13 hours 2 minutes 12 seconds 5 / 5 -
Updated 3mo agoBuild and Deploy an AI Automation SaaS
By: Antonio Erdeljac (Code With Antonio)Master the creation of AI-SaaS: developing Nodebase, automating processes, AI integration, and implementing monetization. A practical guide from idea to launch.11 hours 59 minutes 29 seconds -
Updated 1y agosupastarter - SaaS starter kit for Next.js & Nuxt
By: SupastarterSupastarter is a powerful starter kit for creating scalable and production-ready SaaS applications based on Next.js.5 / 5
Frequently asked questions
What is Build A Canva Clone about?
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…
Who teaches Build A Canva Clone?
Build A Canva Clone is taught by Antonio Erdeljac (Code With Antonio). You can find more courses by this instructor on the corresponding source page.
How long is Build A Canva Clone?
Build A Canva Clone contains 52 lessons with a total runtime of 17 hours 48 minutes. All lessons are available to watch online at your own pace.
Is Build A Canva Clone free to watch?
Build A Canva Clone is part of CourseFlix's premium catalog. A CourseFlix subscription unlocks the full video player; the course description, table of contents, and preview information are available to everyone.
Where can I watch Build A Canva Clone online?
Build A Canva Clone is available to watch online on CourseFlix at https://courseflix.net/course/build-a-canva-clone. The page hosts every lesson with the integrated video player; no download is required.