Build A Canva Clone
17h 48m 39s
English
Paid
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.
Watch Online Build A Canva Clone
Join premium to watch
Go to premium
# | Title | Duration |
---|---|---|
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 |
Similar courses to Build A Canva Clone
![Nest.js Microservices: Build & Deploy a Scaleable Backend](https://cdn.courseflix.net/courses/100x56/nest-js-microservices-build-deploy-a-scaleable-backend.jpg?d=1739917303871)
Nest.js Microservices: Build & Deploy a Scaleable Backendudemy
Category: Next.js
Duration 5 hours 39 minutes 49 seconds
Course
![React Node AWS - Build infinitely Scaling MERN Stack App](https://cdn.courseflix.net/courses/100x56/react-node-aws-build-infinitely-scaling-mern-stack-app.jpg?d=1739917303871)
React Node AWS - Build infinitely Scaling MERN Stack Appudemy
Category: React.js, AWS, Next.js, Node.js
Duration 25 hours 1 minute 19 seconds
Course
![Mastering Next.js 13 with TypeScript](https://cdn.courseflix.net/courses/100x56/mastering-next-js-13-with-typescript.jpg?d=1739917303871)
Mastering Next.js 13 with TypeScriptcodewithmosh (Mosh Hamedani)
Category: TypeScript, Next.js
Duration 5 hours 16 minutes 33 seconds
Course
![Build a Microservices app with .Net and NextJS from scratch](https://cdn.courseflix.net/courses/100x56/build-a-microservices-app-with-net-and-nextjs-from-scratch.jpg?d=1739917303871)
Build a Microservices app with .Net and NextJS from scratchudemy
Category: Next.js, C Sharp (C#)
Duration 31 hours 42 minutes 57 seconds
Course
![React Simplified - Next.js](https://cdn.courseflix.net/courses/100x56/react-simplified-next-js.jpg?d=1739917303871)
React Simplified - Next.jswebdevsimplified.com
Category: Next.js
Duration 8 hours 56 minutes 9 seconds
Course
![Complete Next.js Developer in 2023: Zero to Mastery](https://cdn.courseflix.net/courses/100x56/complete-next-js-developer-in-2023-zero-to-mastery.jpg?d=1739917303871)
Complete Next.js Developer in 2023: Zero to Masteryzerotomastery.io
Category: Next.js
Duration 32 hours 32 minutes 25 seconds
Course
![Next.js - The Full Course](https://cdn.courseflix.net/courses/100x56/next-js-the-full-course.jpg?d=1739917303871)
Next.js - The Full Coursefireship.io
Category: React.js, Next.js
Duration 1 hour 14 minutes 14 seconds
Course
![Shopify + Next.js + Tailwind CSS: Modern Ecommerce](https://cdn.courseflix.net/courses/100x56/shopify-next-js-tailwind-css-modern-ecommerce.jpg?d=1739917303871)
Shopify + Next.js + Tailwind CSS: Modern Ecommerceworkingwithshopify.com
Category: Next.js, Shopify
Duration 5 hours 7 minutes 23 seconds
Course
![Build A Slack Clone](https://cdn.courseflix.net/courses/100x56/build-a-slack-clone.jpg?d=1739917303871)
Build A Slack CloneCode With Antonio
Category: Next.js
Duration 15 hours 13 minutes 30 seconds
Course
![Next.js From Scratch 2024](https://cdn.courseflix.net/courses/100x56/next-js-from-scratch-2024.jpg?d=1739917303871)
Next.js From Scratch 2024Brad Traversy
Category: Next.js
Duration 11 hours 54 minutes 9 seconds
Course