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

Nest.js Microservices: Build & Deploy a Scaleable Backendudemy

Category: Next.js
Duration 5 hours 39 minutes 49 seconds
React Node AWS - Build infinitely Scaling MERN Stack App

React Node AWS - Build infinitely Scaling MERN Stack Appudemy

Category: React.js, AWS, Next.js, Node.js
Duration 25 hours 1 minute 19 seconds
Mastering Next.js 13 with TypeScript

Mastering Next.js 13 with TypeScriptcodewithmosh (Mosh Hamedani)

Category: TypeScript, Next.js
Duration 5 hours 16 minutes 33 seconds
Build a Microservices app with .Net and NextJS from scratch

Build a Microservices app with .Net and NextJS from scratchudemy

Category: Next.js, C Sharp (C#)
Duration 31 hours 42 minutes 57 seconds
React Simplified - Next.js

React Simplified - Next.jswebdevsimplified.com

Category: Next.js
Duration 8 hours 56 minutes 9 seconds
Complete Next.js Developer in 2023: Zero to Mastery

Complete Next.js Developer in 2023: Zero to Masteryzerotomastery.io

Category: Next.js
Duration 32 hours 32 minutes 25 seconds
Next.js - The Full Course

Next.js - The Full Coursefireship.io

Category: React.js, Next.js
Duration 1 hour 14 minutes 14 seconds
Shopify + Next.js + Tailwind CSS: Modern Ecommerce

Shopify + Next.js + Tailwind CSS: Modern Ecommerceworkingwithshopify.com

Category: Next.js, Shopify
Duration 5 hours 7 minutes 23 seconds
Build A Slack Clone

Build A Slack CloneCode With Antonio

Category: Next.js
Duration 15 hours 13 minutes 30 seconds
Next.js From Scratch 2024

Next.js From Scratch 2024Brad Traversy

Category: Next.js
Duration 11 hours 54 minutes 9 seconds