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
Added to CourseFlix
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
- Language
- English
- Added to CourseFlix
- August 2024
- 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 |
Watch the other 51 lessons
One payment unlocks this course and every other premium course. No auto-renew.
See plansWhat courses are similar to Build A Canva Clone?
Updated 1mo agoFull Stack Authentication in 20 Minutes With Clerk (Next.js + NestJS)
By: Michael GuaySet up full-stack authentication fast with Clerk, connecting a Next.js frontend to a NestJS backend for secure registration and login.18m
Updated 1mo agoBuild A Finance Platform
By: Antonio Erdeljac (Code With Antonio)Build a full SaaS finance platform over 11 hours: import transactions via CSV, connect a bank with Plaid, and monetize with Lemon Squeezy.13h 43m5/5
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 3y agoUltimate Next.js 13 Course + eBook
By: JavaScript MasteryEnter the new era of React. Here’s a little known fact. 17% of the top 1 million websites use Next.js. And Next 13 usage in those top 1 million is doubling ever51h 35m
Updated 1mo agoNestJS Server-Sent Events | Build a Real Time Crypto Dashboard
By: Michael GuayBuild a real-time crypto dashboard by streaming price updates from NestJS to Next.js with Server-Sent Events and the browser's EventSource API.23m
Updated 1mo agoBuild and Deploy a B2B SaaS AI Support Platform
By: Antonio Erdeljac (Code With Antonio)Build a full B2B AI support platform: real-time chat, voice support, RAG-powered knowledge base, billing, and error tracking.22h 20m5/5
Updated 2y agoNext.js 14 Real-Time Chat App using Socket IO
By: UdemyDiscover the potential of real-time communication applications by building a chat app from scratch using Next.js 14 and Socket.IO.12h 22m
ClassicThe Road to Next
By: Robin WieruchAs a full-stack developer, you have numerous opportunities. Whether it's launching a successful startup, building a career in a corporate company, or.30h 40m5/5
More courses by Antonio Erdeljac (Code With Antonio)
Updated 2y agoBuild a Jira clone
In this 16-hour course, consisting of two parts (by the way, this is my longest course!).16h 26m
FreeUpdated 1mo agoNext Auth V5 - Advanced Guide
Free 8-hour course: build a complete Next Auth v5 (Auth.js) toolkit with 2FA, password recovery, email verification, and Google/GitHub OAuth.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 1mo ago
Build A Finance Platform
Build a full SaaS finance platform over 11 hours: import transactions via CSV, connect a bank with Plaid, and monetize with Lemon Squeezy.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.