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
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 |
Comments
0 commentsSimilar courses
Magic UI Pro
Sources: Dillion Verma
Magic UI Pro is a platform for creating modern, visually appealing landing pages with minimal effort. It offers over 50 pre-designed...
Next.js - The Full Course
Sources: fireship.io
Next.js - The Full Course provides a in-depth look into the Next.js App Router introduced in version 13.2. It puts React Server Components into practice by buil
1 hour 14 minutes 14 seconds
FULL Authentication WITH REACT JS NEXT JS TYPESCRIPT
Sources: udemy
This is simply the best course on the internet if you want to build and deploy the best authentication system that you can take and use in all of your projects
6 hours 52 minutes 28 seconds
Real-Time Collaborative Apps with Next.js and Supabase
Sources: fullstack.io
This course is here to assist you in efficiently creating real-time applications using Next.js, TypeScript, Tailwind CSS, and Supabase. We go beyond the fundame
51 minutes 59 seconds
Planning with Claude Code
Sources: Mckay Wrigley (takeoff)
In the workshop, participants create a simple front-end project— a landing page generator (marketing pages)- using Claude Code and Next.js. The focus is not...
47 minutes 32 seconds
Want to join the conversation?
Sign in to comment