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
0:00
/ #1: Intro
All Course Lessons (52)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 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 subscriptionComments
0 commentsWant to join the conversation?
Sign in to commentSimilar courses
Next.js & React with ChatGPT - Development Guide (2023)
Sources: udemy
Throughout the course, you will gain experience developing a Next JS application from the ground up. Additionally, you'll receive instruction on integrating Ope
7 hours 6 minutes 49 seconds
Ecommerce on the Jamstack with Snipcart, Next.js, & WordPress
Sources: leveluptutorials
Welcome to E-commerce on the Jamstack with Snipcart, Next.js & WordPress! In this series, we will learn how make a fast, modern, e-commerce site using Next.js,
4 hours 18 minutes 15 seconds
Complete Next.js Developer in 2023: Zero to Mastery
Sources: zerotomastery.io
Learn Next JS from industry experts using modern best practices. The only Next JS tutorial + projects course you need to learn Next JS, build enterprise-level R
27 hours 12 minutes 37 seconds
React Node AWS - Build infinitely Scaling MERN Stack App
Sources: udemy
Master the art of building a highly scalable real world project using MERN Stack for a new startup that will scale infinitely. I will demonstrate how you could launch a project...
25 hours 1 minute 19 seconds
Build a Full-Stack Todo App with Turborepo, tRPC, Next.js, NestJS & React Native
Sources: Michael Guay
Master Turborepo, tRPC, Next.js, NestJS, and React Native by creating a full-stack Todo application with complete type safety and a mobile version.
2 hours 47 minutes 38 seconds