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 1y agoMagic UI Pro
By: Dillion Verma (Magic UI)Discover Magic UI Pro, your go-to platform for creating modern landing pages. With 50+ animated sections, this tool uses React and Next.js for fast and visually
Updated 2y agoNextJS & OpenAI - 2024 Edition
By: UdemyEmbark on a journey to mastering modern web development with our comprehensive video course on building applications using Next JS 14 and the OpenAI API. This c13h 41m
ClassicCodeFast | Learn to code in weeks, not months.
By: Marc LouCodeFast is a course designed specifically for those who want to turn their idea into a real online business quickly and effectively.11h 38m5/5
Updated 2y agoAdvanced NextJS WooCommerce REST API, TailwindCSS - Part-2
By: UdemyThis is part two of the course "Advanced NextJS WooCommerce With REST API And TailwindCSS". If you haven't already please complete the previous part of the cour8h 6m
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
FreeUpdated 3y agoNext.js - The Full Course
By: FireshipNext.js - The Full Course provides a in-depth look into the Next.js App Router introduced in version 13.2. It puts React Server Components into practice by buil1h 14m5/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 agoBuild 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.