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 10mo agoBuild a Full-Stack Todo App with Turborepo, tRPC, Next.js, NestJS & React Native
By: Michael GuayLearn to build a full stack todo app with TypeScript, Turborepo, tRPC, Next.js, NestJS, and React Native. You build web, backend, and mobile parts with steps.2h 47m
Updated 1mo agoNext.js and Apollo - Portfolio App (w/ React, GraphQL, Node)
By: UdemyBuild a full portfolio app with Next.js, Apollo, and GraphQL, using MongoDB Atlas and a Node.js server for data and state management.28h 38m
Updated 2y agoComplete Next.js with React & Node - Beautiful Portfolio App
By: UdemyMaster Next.js (Next 9), React (React 16+) & Node. Learn how to build Isomorphic Website, incl. SEO, Blog, Deployment59h 43m
Updated 3y agoFull Stack Development
By: NeetCodeThis course will take you on a journey to become a full-stack developer. You will learn how to build and deploy a modern web application from the ground up.4h 24m
Updated 3y agoNext JS & Open AI / GPT: Next-generation Next JS & AI apps
By: UdemyDon't get left behind! Increase your value as a web developer today by learning how to integrate AI in to your projects!5h 8m
Updated 1mo agoTesting Next.js Apps with Jest, Testing Library and Cypress
By: UdemyTest a real Next.js app end to end with Jest, React Testing Library, Mock Service Worker, and Cypress, covering routes, auth, and caching.7h 35m
Updated 2y agoEcommerce on the Jamstack with Snipcart, Next.js, & WordPress
By: Level Up Tutorials (Scott Tolinski)Welcome to E-commerce on the Jamstack with Snipcart, Next.js & WordPress! In this series, we will learn how make a fast, modern, e-commerce site using Next.j4h 18m
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.