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

Building a Full-stack Multilingual Blog with Next.js 13.4udemy
Category: Next.js
Duration 9 hours 15 minutes 4 seconds
Course

Next.js 14 Real-Time Chat App using Socket IOudemy
Category: Next.js, Socket.IO
Duration 12 hours 22 minutes 25 seconds
Course

Next40. Master Next.js 14 in 40 days of epic projectsReed Bargernextjs40.com
Category: Next.js
Duration 4 hours 52 minutes 49 seconds
Course

CodeFast | Learn to code in weeks, not months.Marc Lou
Category: React.js, Next.js
Duration 11 hours 38 minutes 42 seconds
Course

Next.js Complex State Management Patterns with RSCfullstack.io
Category: Next.js
Duration 2 hours 56 minutes 24 seconds
Course

Building an AI Icon Generator using the T3 Stack (Next.js, Prisma, TailwindCSS, Typescript, Dall-E API)Web Dev Cody
Category: TypeScript, Next.js
Duration 5 hours 53 minutes 23 seconds
Course

Next.js EcommerceBrad Traversy
Category: Next.js
Duration 22 hours 12 minutes 23 seconds
Course

Build Your SaaS AI Web Platform From Zero to ProductionCode4Startup (coderealprojects)
Category: Next.js, Other (AI)
Duration 8 hours 36 minutes 2 seconds
Course

The No-BS Solution for Enterprise-Ready Next.js ApplicationsJack Herrington
Category: Next.js
Duration 8 hours 20 minutes 31 seconds
Course