Build and Deploy a Figma Clone
Вставка
- Опубліковано 14 тра 2024
- Build a Figma clone with real-world features like live collaboration through cursor chat, comments, reactions, and drawing designs (shapes, image upload) on the canvas using Next.js 14, Fabric.js, and Liveblocks.
⭐ Liveblocks: liveblocks.io
🌟 Become a top 1% Next.js 14 developer in only one course: jsmastery.pro/next14
📚 Materials/References:
GitHub Repository (give it a star ⭐): github.com/adrianhajdin/figma...
README (assets & code): github.com/adrianhajdin/figma...
💻 Join our Discord Community - / discord
🐦 Follow us on Twitter: / jsmasterypro
🖼️ Follow us on Instagram: / javascriptmastery
💼 Business Inquiries: contact@jsmastery.pro
Time Stamps 👇
00:00:00 - Intro
00:04:39 - Setup
00:09:13 - Liveblocks
00:16:07 - File Structure & Shadcn
00:25:17 - Live Cursors
01:03:46 - Reactions
01:27:46 - Active Users
01:47:00 - Sidebars
01:49:37 - Canvas
01:58:03 - Toolbar & Shapes Menu
02:08:09 - Real-Time Feature
02:33:03 - History Feature
02:35:00 - Undo & Redo
02:41:42 - Images
02:48:23 - Right Sidebar
02:59:46 - Dimensions Settings
03:07:48 - Text Settings
03:10:15 - Color Settings
03:13:49 - Export to PDF
03:16:16 - Comments Bubble
03:38:47 - Custom Context Menu
03:48:17 - Free Drawing Fix
03:50:38 - TypeScript Types Fix
03:54:04 - Dev Tool
03:55:47 - Deployment
This is the only figma clone video on youtube . hats off to you 🔥🔥
Thank you!
@@javascriptmastery In few days I think you will make photopea clone as a single project 😅.
Wow!! Another wonderful project!! I am working on DevOverflow right now, and I am being blown away at every step so far. Thanks for all that you do, Adrian!
Thank you so much, enjoy!
I think this is the most comprehensive video ever on whole UA-cam.
It's surely first of a kind
Check code with antonio once
you didn’t even watch it all the way through…
Sorry I forgot to add but this kind of project is a very new type of thing.
Indeed it is.
I searched for figma clone yesterday and there was nothing…and today you upload a vid 😮 …you are a legend.
First of a kind!
Just watched your Figma clone tutorial and it was awesome - really learned a lot, so thanks for sharing that!
Saw you're going to cover user authentication next, and I can't wait to see it. Eagerly looking forward to the next part! 🔥🔥
To bring such amazing and unique projects and that too for free on UA-cam, you surely deserve our respect. Thanks a lot ❤
Thanks a lot ❤
This is by far the most exciting project you have ever made. we're just loving it ❤️
It's one of a kind, glad you like it! ❤️
Most Unique & Comprehensive Dev Tutorial on UA-cam!
Kudos Adrian 🙌🏻
Thank you so much!
Ooooh man, you are too good. Thank You for making it for all developers. Hats off to you!
Thank you :)
I literally thought about how Figma was built. Man this is so useful. I've learnt a lot from your channel. Thanks a lot man.
You got it!
First completed the antonio's MIro clone, then Webprodigie's website builder clone, and now your's. and now compressing all these in one big project. you guys are awesome. thanks man 💋
Great to hear!
Which tutorial do you recommend watching before watching Antonio's vidoes? I'm a beginner and currently I found his videos hard to follow
@@mernik5599 i would not recommend watching that much tutorials as a beginner. i will recommend to build some basic fullstack projects with the same stack, like a todo app, apps with some crud operations etc etc. i know Antonio often use some complex third party liabraries like liveblocks(used in the miro clone) etc etc. you can learn that from their example projects. i will recommend going to the docs before writing the code of a liabrary.
@@mernik5599where do you stuck
@Aabid789 can you provide me the link of antomio's Mlro clone??
also Webprodigie's website builder clone if possible ...
Thanks for what you give to our community :) We appreciate you
Always!
Those were the most amazing 42 hours I've ever put into a project! You absolutely nailed it - thank you!!!
wdym 42 hours? you did the whole thing yourself w/o the tutorial? i don't get it
I watched the tutorial fully to understand the process, built it myself, and referred back to the tutorial for troubleshooting.
This likely is the 1st ever video on such project on UA-cam.
Only channel I've recommended to all my friends.
Thanks a lot for giving soo much for free.
Thank you so much! :)
Totally awesome with full features, so big big awesome works 🙏
Congrats for this amazing project, so many new things to learn 😍
Glad you like it!
I'm going to attempt to transfer what I learn from this to SolidJS. I haven't started watching yet but just wanted to say how grateful I am for this video. It came along at the right time for me.
I truely respect your efforts I can imagine how much hardwork and efforts you invested to build this project thank you very very much jsm
Thank you very much!
Dude you are literally carrying the whole developer community in your shoulder 💪🏻 keep on going ❤
That's the plan!
Thanks man !! i was waiting for a new awesome real time web app. I recently started following you. Your videos give me ton of confidence and knowledge.
That's why I'm here :)
Wtheck dude?! You taking over the whole Space man 🔥 super lit 🔥
Damn gorgeous! Bravo!! 🎉❤💥
We got to keep this dude safe guys, fr.
Thank you 🙌
You're on fire! 🔥🔥🔥🔥
Thanks 🔥
WOW i can't wait to try this one, thank you so much for the content
Have fun!
You really deserve a like and a subscriber, man. I also became one of your fans. Your teaching capability is so good. I really appreciate it.🥰🥰
Thank you so much, means a lot! 🥰
This is amazing. So excited to watch .
👏🏾👏🏾
Finally Catching up !
KEEP GOING you are the OG builder
Appreciate it
Sometimes I ask myself, how is this kind of tutorial free? Love you, bro. Keep up the first-of-its-kind work
More to come!
I've never seen a video like this. Wow thanks a lot for what you do for humanity!
Glad you enjoyed it!
Amazing project as always, Adrian! 👏
Thank you, Emilian! 👏
I don't believe someone just do it..... you are the Master of best Tutor... BRAVO.. millions thanks for you Sir..
Thank you for the Awseome build ever. 🥰
No problem 😊
Bro is trying to one up the OG of clone with next js and he's doing it.🔥❤️
Thank you! 🔥❤️
The only UA-cam channel that delivers remarkable, software development videos.❤😊
Thank you! ❤😊
18:48 he is actually adding className="text-5xl" , just in case any of you are going crazy trying to figure out what have you not configured correctly. You'll see that later on in the video. Worst thing about this sort of tutorials is that you can't go back 15 sec, but he explained really well what to install and set-up. So far it looks like it's comming along, altough for me on this channel some small details
THANK YOU!
font-5xl exists in the parallel universe.
Thank you so much! Looking forward to your future React Native tutorials with professional backend too! 👍
More to come!
Thanks for your efforts. Kudos Adrian.
Thanks! 😃
You're operating on a whole different level😮❤
Thank you so much!
Damn, Thank you Adrian for this amazing Project
You got it!
Wow! I hope I can finish this 4hrs in just 1 week! 2024 Tutorials are insane!!!!
Have fun!
Another one
Legendary release❤❤❤
Thank you!
Oh my god what a beast you outdone yourself again
Thank you!
Brother Ur the reason i am gaining confidence in building big projects thanks 🙏🙏
That's the goal! 🙏
You are the best,Thanks for your contribution to the Web Community🏅🏅🏅🏅🏅
I appreciate that!
Tremendous work. Well done!
Thank you! Cheers!
🤯 Thanks so much for this amazing content!
Any time!
Another banger is here ❤🔥 Thanks to JSM🥰
Glad you like it! 🥰
You and webprodigies are the wizards of the web
i love your content. you are the light in the dark for web developers
🔆
I think this is what we call QUALITY content. ❤🔥❤🔥
"Hey bro I can't come over, jsm just dropped!!" 💯💯💯
Nice one 💯
Hi there and welcome to a brand new project base video. Love it😍
Yess! :)
It's your most awaited video ever❤❤
❤❤❤
This course is unbelievable to me
You are amazing ❤❤❤
You're the best ! thanks for sharing your knowledge to us
I appreciate that!
yes at the end I watched the whole video 2 times and coded the same project thanks a lot now I have my own personal figma clone thanks a lot
Glad you like it!
You did it again!🤩
Thank you! ❤
Wow, this is amazing! Keep up the good work.....
I was always wondering how these apps are developed. Lots of thanks to you Adrian ❤💪
Excited 🔥🔥🔥
🔥🔥🔥
Bro you are a blessing
Legend at it's very best again and again ❤️❤️❤️
Yes, yes, yes! ❤️
A game changer clone.
You raised the bars❤
Always! 😊
This is nothing less than mind blowing.. I don't know how he does it.. but he does it👏👏
Thank you! 😊
Awesome as always 🙂
Thanks again!
Such a beautiful and useful project
Happy to hear that
This is insane ❤
You are insane! ❤
And all of these for FREE?! You are a Goat man!
Enjoy!
Great build tutorial, quite different build compared what you normally see people do A+
Glad you like it!
i've already done 2 projects using fabricjs and those were terrible :(( luckily i found you, you save my projects
Wow! You're a legend🔥
Thank you! 🔥
LOVE LOVE LOVE these videos!
Great topic, definetely going to do it
Please do!
Woho. 🎉 Thank you so much. ❤
You’re welcome 😊
There should be Oscar award for these coding UA-camrs, and the top would definitely go to this channel
Thank you so much! ❤️
Insane Bro ❤🎉
Thank you! ❤
can't imagine the amount of hard work and dedication put into a single video. thank you for being as comprehensive as always from start to end. 😊👌
I appreciate that!
Yes yes yes, thank you so much for this
You're so welcome!
this is just amazing, high level
Thanks!
What an incredible project
Thanks!
The more videos like this I see, the more I want to create one
Honestly, this is the best project of all time in UA-cam, just finished building the project. Its really helpful
You couldn't have built it yet! :D
dude seriously😐
OMG! It's amazing 🤩
Thank you! 🤩
This is so good ❤
You are good! ❤
This is insane....🔥🔥🔥🤯
bro you are amazing!
I appreciate that!
OMG you save my life. Thanks a lot, I appreciate that ❤❤❤❤
Thank you so much. I will learn more information and use it.
I requested you for a Figma design tutorial and you made the entire Figma clone..., you are awesome Adrian🔥🔥🔥
Please make next video on GraphQL with Nextjs 14🙏🏻🙏🏻🙏🏻
Will do!
Wow, awesome..! Really Mr. Adrian is JS monster
Rawr 👹
Using that tool for 2 years for building UI's and now cloning it with your video 😆. Great work
Thanks!
Much love from Kenya! You taught me how to build a Social Site that got me a job. And I wanted to build a Figma clone only to search for days and find this. I love you men. no homo.
Amazing! 🔥
Thanks, Chris, means a lot! 🔥
Awesome! 🤩🔥
Thanks 🤩🔥
Really amazing project.. 🔥
Thank you 🙌
Am I in a dream or something, dude you are littttttttt 🔥🔥🔥🔥🔥🔥🔥
Thank you so much! 🔥
Man you are a genius
Not a genius, just doing what I can :)
I won't share your videos to anyone --background😂😂😂😂
It's really awesome!
Thank you for your this :) you really have helped me out a lot :)
Enjoy :)
Amazing 🎉 You are a legend.
Wow, thanks
One of the Best Projects. Now I will have to watch it. What a drag😓.
Haha, enjoy!
Babe wake-up, jsm just dropped a new vid😭✨
Hahaha great one! 😭