CourseFlix

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.

About the Author: Code With Antonio

Code With Antonio thumbnail

My name is Antonio, and I am a software engineer with over 7 years of experience. I have always been passionate about the world of programming and consider myself fortunate to have found a career that aligns with my passions.

Throughout my career, I have worked with various programming languages and technologies, which has allowed me to grow and develop as a programmer. Despite the accumulated knowledge and experience, I always strive to learn and improve.

I created "Code With Antonio" to share my love for programming and help others learn and grow in this field. I hope my lessons and insights will be useful and that I can make a positive contribution to the programming community.

Watch Online 52 lessons

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

Related courses

  • The Road to Next thumbnail

    The Road to Next

    Sources: Robin Wieruch
    As a full-stack developer, you have numerous opportunities. Whether it's launching a successful startup, building a career in a corporate company, or working...
    30 hours 40 minutes 42 seconds 5 / 5
  • Build Your SaaS AI Web Platform From Zero to Production thumbnail

    Build Your SaaS AI Web Platform From Zero to Production

    Sources: Code4Startup (coderealprojects)
    Discover the new trend in the world of startups and indie hackers - the creation of microservice AI-SaaS products that do more than just meet needs...
    8 hours 36 minutes 2 seconds 5 / 5
  • Ecommerce on the Jamstack with Snipcart, Next.js, & WordPress thumbnail

    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
  • Solidity & Ethereum in React (Next JS): The Complete Guide thumbnail

    Solidity & Ethereum in React (Next JS): The Complete Guide

    Sources: udemy
    Create real Smart Contracts in Solidity and DApps with React & Next JS. Understand how the Ethereum blockchain works.
    38 hours 47 minutes 24 seconds
  • Build a Youtube Clone thumbnail

    Build a Youtube Clone

    Sources: Code With Antonio
    In this 24-hour course, you will learn how to create your own YouTube clone using modern technologies. We will go into detail on advanced topics, including...
    23 hours 42 minutes 10 seconds
  • Build a Shopping App With Next.js + NestJS & Prisma thumbnail

    Build a Shopping App With Next.js + NestJS & Prisma

    Sources: udemy, Michael Guay
    Learn to build a shopping app using Next.js and NestJS. Master modern web development with Prisma ORM, and deploy full-stack applications with AWS and Vercel.
    8 hours 6 minutes 54 seconds