Build A Canva Clone

Name: Build A Canva Clone
Price: 9 USD
Availability: InStock

17h 48m 39s

English

Paid

August 9, 2024

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

0:00

#1: Intro

All Course Lessons (52)

#	Lesson Title	Duration
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?

Similar courses

React, NextJS and NestJS: A Rapid Guide - Advanced

Sources: udemy

React with Typescript, Next.js, Redux, NestJS, Docker, Redis, Stripe, Frontend & Backend Filtering. Learn how to create an Ambassador App using React, NextJS an

8 hours 40 minutes 51 seconds

Next JS & Open AI / GPT: Next-generation Next JS & AI apps

Sources: udemy

Don't get left behind! Increase your value as a web developer today by learning how to integrate AI in to your projects! Welcome to the exciting world of AI-powered, next-genera...

5 hours 8 minutes 46 seconds

Build a Multi-Tenant E-Commerce with Next.js, Tailwind v4, Stripe Connect

Sources: Code With Antonio

In this 20-hour course, you will create your own platform from scratch in the style of Gumroad - a full-fledged multi-vendor e-commerce application, where...

19 hours 52 minutes 3 seconds

Ultimate Next.js 13 Course + eBook

Sources: jsmastery.pro

Enter the new era of React. Here’s a little known fact. 17% of the top 1 million websites use Next.js. And Next 13 usage in those top 1 million is doubling ever

51 hours 35 minutes 4 seconds

Full Stack Authentication in 20 Minutes With Clerk (Next.js + NestJS)

Sources: Michael Guay

Find out how to set up authentication with Clerk in 20 minutes in a Next.js and NestJS application. A simple and secure integration for your project.

18 minutes 9 seconds