Skip to main content

Build A Canva Clone

17h 48m 39s
English
Paid

Course description

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

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 52 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Intro

All Course Lessons (52)

#Lesson TitleDurationAccess
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 subscription

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Next40. Master Next.js 14 in 40 days of epic projects

Next40. Master Next.js 14 in 40 days of epic projects

Sources: Reed Barger, nextjs40.com
Become a Next.js pro in the best way - by building tons of amazing apps, from admin dashboards, personal websites, full-stack apps and more.
4 hours 52 minutes 49 seconds
Testing Next.js Apps with Jest, Testing Library and Cypress

Testing Next.js Apps with Jest, Testing Library and Cypress

Sources: udemy
Learn to test a real-world serverless React app with routes, authentication, database and more! Learn how to test your Next.js app from top to bottom! Tests pro
7 hours 35 minutes 24 seconds
Build your AI startup in hours using our customizable demo apps | AnotherWrapper

Build your AI startup in hours using our customizable demo apps | AnotherWrapper

Sources: Fekri
Create your AI startup quickly and efficiently using AnotherWrapper's customizable demo apps. Our all-in-one Next.js AI starter kit includes everything you...
Build a Jira clone

Build a Jira clone

Sources: Code With Antonio
In this 16-hour course, consisting of two parts (by the way, this is my longest course!), you will learn how to create a fully functional Jira clone with a...
16 hours 26 minutes 4 seconds
Stripe for SaaS

Stripe for SaaS

Sources: fireship.io
You will build a Stock Photography Subscription SaaS Product from scratch where users can sign up for a subscription to access a library of images. Every monetized action is tra...
1 hour 11 minutes 29 seconds