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 subscriptionRelated courses
-
Updated 2y agoBuild A Finance Platform
By: Antonio Erdeljac (Code With Antonio)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 -
Updated 1y agoReact Simplified - Next.js
By: Web Dev Simplified (Kyle Cook)Welcome to my Next.js course. This course is a little bit interesting in how it's structured because it's actually broken into two main sections. That's because9h 33m5/5 -
Updated 2y agoMastering Next.js 13 with TypeScript
By: Mosh Hamedani (Code with Mosh)Clear. Concise. Comprehensive. Tired of piecing together disconnected tutorials or dealing with rambling, confusing instructors? This course is for you! It's pe5h 16m5/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.