Build a Canva Clone With Nextjs, React, Honojs, Next Auth v5 (Premium Course)
Vložit
- čas přidán 1. 08. 2024
- 💫 Access the course: dub.sh/BVk0xd3
In this 18 hour course, we'll build a feature-rich graphic design SaaS platform from the ground up. You’ll learn how to create an intuitive editor that allows users to customize templates, manipulate text and shapes, and integrate advanced drawing tools. To handle authentication, we will use Auth.js, a new name for Next-Auth. We will master social providers like Google and Github, as well as regular credential providers using email and password. You will learn how to use AI technologies to remove backgrounds, and generate images from text using software like Replicate. We'll also implement a secure subscription & billing system using Stripe.
Here is everything we will learn:
🛠️ Building a graphic design editor
🖼️ Intuitive templates system
🎨 Text tool enhancements (fonts, styles, alignment)
📏 Shape manipulation and customization
🖌️ Drawing with freehand tools
🔄 Undo and redo history management
📡 Real-time autosave
🔒 Authentication with Next-Auth v5 (Auth.js)
🌟 AI Image generation using Replicate
🧹 AI Background removal using Replicate
💳 Payments & Subscriptions using Stripe
📤 Exporting projects as PNG, SVG, JPG & JSON
🚀 Framework Next.js
🔥 API using Hono.js
🛢️ Postgres using NeonDB
🌐 ORM using DrizzleORM
🎨 UI with TailwindCSS and Shadcn UI
💫 After 2 months of work, my first premium course is finally out! More than 18 hours of content spread across 52 chapters will teach you how to build your very own AI Canva clone!
Access it here: dub.sh/BVk0xd3
Your payment method not support in My country Cambodia.
Please kindly check. Do you have other methods payment? Because of I can't not subscribe for payment.
Congratulations, Antonio 😀😀😀 Very happy to see your achievement. I'll enter as soon as my personal circumstances improves to support your hard work, brother.
😊😊😅
Unable to pay in mainland China, prompted by the unsupported China region, but thanks for the fine course😂
Omu.
Looks like an amazing course. I will probably sign up for a month to get it done. If you ever consider offering just one course for a one time price (without a subscription), that would be nice. By the way, even though your rate is high, I’ll happily pay it. Why? I learned so much from you for free. Happy to pay some back.
I agree with the one time price model, that’s the reason why I usually feel more inclined to buy Udemy courses. When I want to learn something it’s usually a specific skill and I’m not interested in long term learning.
Yeah if is one time buy I would buy it in heartbeat. Monthly recurring cost is one thing I try to avoid at all costs. If he can bring that lifetime deal I would cons to support. Bring it back for one time purchase
i agree too , a one time price seems more attractive
UCWI5euClGtUxIhxLpHEHovQ
Great project. I also prefer the one time purchase model, similar to what Fireship offers. If you could provide a discount on a lifetime deal, I would be delighted to make a purchase.
Congratulations on your first premium course, Antonio!
Each one of your free course on CZcams is better than most paid resource out there. I hope your platform receives great success!
thank you so much!
@@codewithantonioCan you say how much of knowledge I need to build this and is it okay to build a website seeing you like ain't it means we just copying and I m new to this full stack field as 2nd yr btech please don't mind my absurd question
What would be a great gain is to make placeholders in a template that can be filled via API. A Feature that is only accessible for enterprise users in canva, but would be a huge gain, for producing content automatically.
really cool idea
Wow , your courses are absolutly amazing
Glad you like them!
From seeing sneek peeks in twitter, can't wait to build this clone ❤
Awesome to hear you like it!
Can you say how much of knowledge I need to build this and is it okay to build a website seeing you like ain't it means we just copying and I m new to this full stack field as 2nd yr btech please don't mind my absurd question@@codewithantonio
You are the best on CZcams, when I just have time I'm going to do this course!
I really love your potential at work and always recommend your channel to my newbie friends who are entering the Next.js world. However, I often wonder why so many projects depend heavily on using pre-made libraries. Wouldn't it be beneficial to teach people how to make these themselves? While I understand that most companies prioritize getting the job done, regardless of the tools used, it could be valuable to also teach how to create things from scratch, like an original authentication system, OTP, TOTP, or magic link. It's actually quite easy to do and can enhance understanding.
All love to you, Antonio
Can you say how much of knowledge I need to build this and is it okay to build a website seeing you like ain't it means we just copying and I m new to this full stack field as 2nd yr btech please don't mind my absurd question
@@UmeshKumar-em2pm
No, not at all. Building a website by copying is not a bad thing. In fact, learning by copying is one of the most valuable ways to learn, as long as you understand what you're copying. If the person teaching doesn't explain the code they're writing, pause the video and ask ChatGPT (the fastest way, though you might miss some best practices), or search on Google (a slower way, but people might point you to best practices or better methods). Then, go back to the video and follow along.
---
As for how much knowledge you need to create something like an authentication system, from designing the database to programming everything, it's not too much, but you do need a bit of knowledge. For instance, how do you manage the state of the account? Is it banned? Muted? Flagged for review? How do you activate the account by creating a tracking code in the database and sending it to the user's email with an endpoint on your site to activate it? Once you identify some patterns, it becomes easy and gives you a lot of power.
And if you ask why? Because at that point, you have no limits with that knowledge. You can rebuild these systems in more efficient languages like Go, Rust, or even C++ or C, and you'll be able to scale to millions of users without being scared of the limitations of JavaScript. I'm not saying you can't do it by relying on tools like NextAuth, but it will be much more efficient and flexible if you do it yourself.
---
More than that, the knowledge you gain by building these systems yourself can be applied in many places. If you rely on a library for live streaming or authentication, then what? You can't use NextAuth in your WPF app. You'll be stuck trying to find another framework or library, or you'll be confined to the JavaScript ecosystem, using things like Electron, just to avoid doing any extra work. Doing it yourself may require more effort, but it will benefit you greatly in the long run.
i am missing the function "elements" where you can insert individual graphics into the picture. is this function still coming, or will there be an extension for it?
My Gosh, it would be an amazing tutorial ❤ thank you ,Antonio
You're the best 👍
Thank you!
Can you say how much of knowledge I need to build this and is it okay to build a website seeing you like ain't it means we just copying and I m new to this full stack field as 2nd yr btech please don't mind my absurd question@codewithantonio
Hello, Antonio!
A quick question: Do you take some crush courses for the new technologies you want to learn or you just simply start using them on your Projects and figure out how this technology work while developing a project?
What approach of learning a new technology do you find is the best?
I love this guy
Great video! Would love to see a tutorial on building a game application (like a Rhythm game). Keep up the awesome content ❤
I never regret having you.. I swear
I believe that creating a smaller project and gaining more knowledge from it is a better approach than just forking, renaming, and deploying (mean :- Copy-pasting or coding as it is shown in YT videos) this type of large project.
Agreed. These type of projects are too huge.
Can you say how much of knowledge I need to build this and is it okay to build a website seeing you like ain't it means we just copying and I m new to this full stack field as 2nd yr btech please don't mind my absurd question@codewithantonio
@@UmeshKumar-em2pm Don't make this project if you are new. Try making easier and smaller projects. This project is overkill.
Hey antonio, thank you for your hard work and for making us learn. we really appreciate your hard work❤. I was thinking of the next project, a dubizzle clone. What do you think?
+1
Please can I download the whole course offline in case if I don’t get to finish it within a month
I will start this training in a few days, you have done a great job again.
I have a suggestion for the platform, can you add a question and answer section or a forum? Both you and us platform users can answer questions.
I think you are the only person who could make a quality guide on how to create your own website builder 🙄
Can you say how much of knowledge I need to build this and is it okay to build a website seeing you like ain't it means we just copying and I m new to this full stack field as 2nd yr btech please don't mind my absurd question@codewithantonio
I want a course - creating a website builder.will there be such a thing?
Man is the real Odogwu!
Looks great Antonio
Nice bro but your Website is not working Somali, I don't really, when I want choose premium what's wrong brother.
He is back 🙌...amazing video
What are the prerequisites for taking this course ?
A gift that keeps giving ❤.
Thank you for your support!
OMG, this is really amazing, I can't imagine the amount of work you have behind you, my respects to you
Thank you!
Your courses are top of the line, but I would really like a course to generate contracts for the financial sector, Bonds, Loans, etc...
And you could also upload a contract in pdf, doc, docx, etc... format and edit it.
We could use AI to generate and verify contracts.
To see the assets of the repository, do you also have to be subscribed by chance?
Hello, I tried following your NextAuth v5 tutorial and encountered an error when using the Prisma adapter. The OAuth authentication works properly without the Prisma adapter, but it fails when the adapter is included. I have written all the code exactly as shown in the tutorial, but it still doesn't work. Could you please help me ,
Please Antonio, You have extraordinary projects. Would u create a masterclass teching solo NEXTJS, React, Tailwind, These Arquiteture e design patterns, etc?
Great! We need to see the Teachable LMS Platform clone next.
when will do next project pool kindly do it as early as possible. I suggest build super performance static app with cloudflare edge functions using Hono js
Super special. That is special. Can you build a social app next. Like Instagram or any other. Thanks ❤
Thank you for the suggestion!
@@codewithantonio You are my mentor. I got my first job because of you. I truly love you and can never thank you enough. Thanks Guru . I love you and I always appreciate your work.
@@codewithantonioplease don’t
There are so many videos of that on CZcams
@@oyepariolaoluwalonimi8185 not like others. If he decide to make social platform, he wont do such a bull shit thing that will be amazing social platform
Hey Antonio your video are really helpful for us.
We need a detailed video on websocket from basic to top most advance things with high end project please make a free video on it. It will be very helpful to all the viewers please i request❤❤
Thank you so much antonio
How beginner friendly is the course? I know the basics of everything but don't have any idea of how i'd get started with any of that.
Awesome. Other ideas for a premium course could be milanote, kosmik, uizard
Thanks for the ideas!
i couldn't find image place holder feature or frames wherein you place that on the canvas and as soon as you insert image it gets fit into it and then with zoom in zoom out and hold you can adjust the image within the frame or place holder. please let me know if the entire graphic editing tool is mobile responsive and available for sale
Will we learn FabricJS in detail here? Also can we integrate videos and html elements on canvas in future after this course?
We build our own API on top of Fabric.js, so we definitely learn it in-depth. I might explore adding additional chapters with those features, but for now what is displayed in the demo is what's being taught in the course :)
Are you thinking of creating a place it style mockup creation site?
I would love if you create some courses on udemy
Due to offline download available and it will really help in this part of the world 🌎
It's really an excellent project, and I truly wish I could learn from it, but it's such a pity that my area doesn't support me to subscribe to the premium channel! 😭
@codewithantonio excellent course, are you planing to release an update where you show how to handle a video file as well? That will be amazing
So glad I got that lifetime subscription now 🥳
😁 thank you for supporting that early!
Have you started the course i have small error to ask ?
Reply me bro plz@@mohammadzaidbhati4663
to be honest, your course has been incredibly helpful to me
So happy to hear that!
Your all video contents are next level antonio. I request you to please make a theory videos for javascript react and next js concepts. Or please share good reaources for learning. It will be helpful for us.
Holy cow! Buying it instantly!
Is there a table of content for the course
Looks like a great project that i can't wait to sink my teeth into, but i would like to know why the video feature or slides feature wasn't included please. Because people usually love using canva or editors like that for dhorts and video content.
Please make another course on some other tech stack now, like Python django or GoLang, something like that with docker, AWS etc
Next js with Hono api is super combination
I really like it!
What version of authjs you use in this project
I saw the lastest of authjs is beta 19, do you think this is stable enough to use in production?
I use the latest from the documentation instructions
Guy is back with another bomb course. 😮😮😮
What ab Amazing Project bro
❤🔥
Thank you!
Sir , did you use fabric.js in this course ?
yes!
@@codewithantonio thanks for replying sir
Hi Can You Create a Full Stack Inkdrop Clone?
This is flames
Thank you!
Wow!!! Just wow!
thank you for creatin course without any sponsors!
70% discount for Nigerians?😭
I love you antonio
Antonio you are king!
Thank you very much!
Hi Antonio, is there way to buy only this course? i don't want to subscribe rather just only buy this one. Have a good one mate.
I also just want buy this one❤
Amazing Project bro
Thank you very much!
You are amazing!
Hi, ontonia i am totally beginner i want to learn coding and building website aa you shown has you have course for learning web development
Thank You!
You're welcome!
I love tutorial hell
Please add other payment methods like Google Pay if possible.
What packages have been used?
Can you please create a Laravel project suitable for production use?
can you explain why this is labelled as a SaaS product?
SaaS features are shown in the video, at 5:11
How does hono compare to nextjs
The link is not working
Superman is back ❤❤
❤️❤️
this editor is custom made or using an api ?
We build our own API on top of Fabric.js
@@codewithantonio well that's good and thanks for such an amazing project, I'll definately buy it. ❤️
Antonio can u please make video on notes selling app using razorpay
Will it available on CZcams
No
No
Can you build a Dune Analytics clone?
Thank you for the suggestion!
18 hours course... this is crazy 😅😢😂😓😥
Have you buy??
Will this course be available for free in the future?
no, this is a premium course
Thanks
🐐
❤
How can I pay you?Unfortunately, we don't support payments from Russian Federation at this time.
This is by far the best Nextjs channel I've ever came across on the Internet. Hope you'll get bigger my friend.
Code with Antonio!
Each one of your free course is better than most paid resource on udemy and other platforms. I hope your premium platform receives great success!
Thank you very much for your kind words :)
Drizzle ❤️❤️🔥🔥 I hope ??
yup!
very good🎉
Do you produce more than 6 premium courses per year? Else yearly subscription doesn’t worth it. 50 per month or per course and 300 for 6 courses.
And with yearly 24 per month which is almost 300.
maybe a trading app?
❤❤
❤
perfect
I have no way to payment by dollars 😞😞
Come back the Master!
❤
#codewithantonio sir i willing to know that,, Are you using Fabricjs or anyother libarary? then i will decide to buy it..
Hi, we build our own API around Fabric.js, so yes :)
❤❤❤❤
... Next ... I take over the Universe and make world leaders bow to my might... Oh how unenthused I feel...
FIRST!! 🎉❤
❤
Can you make a youtube clone?
Thanks for the idea!