Build a Real-Time Miro Clone With Nextjs, React, Tailwind (2024)
HTML-код
- Опубликовано: 31 май 2024
- ⭐️ Source Code & More: www.codewithantonio.com/proje...
💬 Discord & Help: www.codewithantonio.com/discord
Clerk: dub.sh/mz7fwfW
Convex: convex.dev/c/cwa
Liveblocks: liveblocks.io/
Logoipsum: logoipsum.com/
Sally 3D illustrations: www.figma.com/community/file/...
In this 10 hour tutorial, you will learn how to create your very own Miro clone - A collaborative, real-time whiteboard. Packed with features such as real-time database, whiteboard from scratch with ability to add shapes like Rectangles and Ellipses, Sticky notes and Pencil drawing. Using the newest technologies such as Next.js. 14, Clerk, Convex and LiveBlocks.
Key Features:
- 🛠️ Whiteboard from scratch
- 🧰 Toolbar with Text, Shapes, Sticky Notes & Pencil
- 🪄 Layering functionality
- 🎨 Coloring system
- ↩️ Undo & Redo functionality
- ⌨️ Keyboard shortcuts
- 🤝 Real-time collaboration
- 💾 Real-time database
- 🔐 Auth, organisations and invites
- ⭐️ Favoriting functionality
- 🌐 Next.js 14 framework
- 💅 TailwindCSS & ShadcnUI styling
Timestamps
00:00 Intro & Demo
03:42 Additional information
04:07 Project setup
12:33 Project structure
30:41 Convex & Clerk
56:51 Dashboard layout
01:10:25 Sidebar
01:35:01 Organization Sidebar
01:49:49 Navbar
02:04:04 Empty States
02:23:22 Create Mutation
02:41:57 Board List
03:14:28 Card Actions
03:55:36 Favoriting Functionality
04:18:12 Search Querying
04:31:52 Canvas Layout
04:42:50 Liveblocks setup
05:00:13 Room Authentication
05:19:44 Room Info
05:36:23 Room Participants
05:49:46 Room Toolbar
05:56:45 Canvas State
06:22:01 Cursors Presence
06:47:41 Insert Layer
07:20:07 Select Layer
07:36:02 Selection Box
07:59:34 Resize Layer
08:17:52 Translate Layer
08:31:29 Color change & Deletion
08:50:09 Layer Depth
08:56:46 Selection Net
09:11:53 Other Elements
09:32:51 Pencil & Drawing
10:13:02 Deployment
Hello everyone 👋 Thank you for choosing this video. I hope you will have a great time in this FREE 10 HOUR tutorial! That being said, if you are interested in additional content, make sure to visit the link in the description to support me and my channel ❤
Here are just some of the key features
- 🛠 Whiteboard from scratch
- 🧰 Toolbar with Text, Shapes, Sticky Notes & Pencil
- 🪄 Layering functionality
- 🎨 Coloring system
- ↩ Undo & Redo functionality
- ⌨ Keyboard shortcuts
- 🤝 Real-time collaboration
- 💾 Real-time database
- 🔐 Auth, organisations and invites
- ⭐ Favoriting functionality
- 🌐 Next.js 14 framework
- 💅 TailwindCSS & ShadcnUI styling
I am waiting for Leetcode clone tutorial
Hello @codewithantonio excellent work! I'm new to React and Next.js, and I'm eager to learn. Could you please recommend the initial tutorials to watch on your channel? Also, are there any specific resources I should check out before diving into the Miro Clone project? Thank you!
please build part 2 of this video and integrate Figma features because Only you can do this... 🥹 ❤❤❤
Try audience poll or like target we can do it anyways and most of subscribers want this pleese ❤
Thanks for this tutorial! Can you perhaps make one where u use i18n to perhaps make a dashboard that has multiple languages? if possible 🙂
🎉🎉000000000😢#%
The only RUclipsr to give world class tutorials for free. Don't sleep on Antonio
Thank you very much!
Not the only, but definitly one of the best.
This man is a legend!.
But bruh all are saying frontend is saturated 😢 no job opportunities 🙄 I have a 10 months gap now previously working as a data analyst in a product based company 😢
@@abhi.r8yes kinda true, instead of entry job with 15k something has been changed to unpaid internship of 3 months in most of startups, some can pay stipend.
Finished the full project today. This 10 hours tutorial took me 2-3 hours per day for 2 weeks. Learned a lot of things. It was a nice experience. No bugs if you follow properly. Thank you. 😃👌👌👌🤟
Love to hear it! Hope you enjoyed it! Thank you for watching the whole thing
Great work.. Please confirm once if it involves any paid services like CMS or it can be completed without any payment needed?
You are amazing, my friend
You offer these advanced courses for free
While others monopolize education
You deserve a special award from RUclips
In appreciation for your effort
A few days ago we finished your Nextauth project
And we've barely started a new Snapchat cycle
But you're back again
And I threw this surprise in front of everyone
Thank you 🌹
Happy my content is helpful to you :)
Absolutely great work man. I have a lot of respect for what you do, congrats on getting this 10+ hour video out :D
Thank you so much Josh!
Josh..You are also best..but only thing to improve on is to elaborate each step like antonio
hey there can anyone do we need to have knowledge of next as a pre requisite or it is explained in the video?
I am halfway through your Notion Clone tutorial and it's great! You provide these next level comprehensive tutorials for free just makes learning easier🙏🏻. Keep up with the great work.
Glad you like them!
didnt he providing source code for free bro
@@abc-ym4zs source code is in the description, as in all of my videos
To say thank you is not enough for the time and effort you put in creating this real world contents for us. On behalf of me and the rest of your viewers/ subscribers we say thank you for everything. God bless you Antonio.. trust me you're my 1 favorite.
I am happy to hear that, thank you very much :)
We need to protect this man at all costs! This man’s contribution to the web dev community is nothing short of amazing. Thank you so much for your efforts!
Thank you very much! :)
Man, what quality of video, what quality of course, definitely. I haven't found another channel like this. Thank you Antonio, you are the best of all.
Thank you very much, glad you enjoy the content :)
I have to say this, I could master NextJs in less than 2weeks was due to your tutorials. Antonio, you're the best!
THANKS FOR BEING A GREAT TEACHER.
I am so happy to hear that, great job!
This is so amazing! The content you make is such great quality and I'm enormously thankful for it!
Glad you enjoy it!❤️
Can't wait for the 1M + sub - Amazing content again by Antonio!
Thank you for your support :)
Thank you Antonio for another world class project. I appreciate your tireless work and energy that you put into creating these tutorials and also for your eloquent teaching methods. I have learned a lot from you and like others have mentioned you are the best out there by far. I don't even look at any other tutorials any more. I just wait for yours. Others copy and drop their code whereas you code it step by step in front of my eyes and explain what is going on and why you are doing it in a specific way. Again thank you so much for all your hard work in putting these together.
I am very happy you like my content, thank you for the support ❤️
I was just looking for a good white boarding app to use for solidifying programing concepts and Antonio just goes ahead and teaches us how to make one, the levels to this I swear 😂😂
Hope you will like the course! :)
This is gold! Halfway through and it is well worth the effort!
Baby listen, antonio is back with yet another video. It's time to follow along.
hahaha thank you for the support!
Dear Antonio,
I wanted to take a moment to express my gratitude for your latest tutorial video on RUclips. Your expertise in Next.js is truly impressive, and I have learned so much from your previous videos. Your ability to break down complex concepts into understandable steps has been invaluable to my learning journey.
Thank you for your dedication to teaching and sharing your knowledge with others. Your passion for web development is evident in your tutorials, and I appreciate the time and effort you put into creating high-quality content. Your videos have been a valuable resource for me, and I look forward to seeing more of your work in the future.
Once again, thank you for your contributions to the web development community. Your tutorials have made a significant impact on my learning, and I am grateful for your commitment to helping others grow in their skills.
Best regards
Thank you very much ❤️
I come here while trying to find a good nextjs course. Some people on Reddit recommend your channel. Though I haven't spent time on your videos, I see your dedication. Thank you in advance and hope I can get nice knowledge from your channel.
Thank you very much for giving my channel a chance!
My goodness man, it seems that Andrej Karpathy and you are the only RUclipsrs who're providing insane, world class tutorials and knowledge without pushing their own paid courses.
Thank you so much man, for providing this free of cost and never ever change this please!
Finding you was best thing happened to me this year. Thank you, great tutorial again.
Wow, thanks! ❤️
The way you explaining all the things are awesome....
Reason - Whatever you are doing or you are using, you are first showing it's documentation so that people can also read it next time and explore.
Im glad you like my way of teaching!
diidnt he providing source code for free bro
Thorough, very thorough but explained in simple terms.
High Level. Making the verbose, simple which is an art.
21st century artisan 👌
Thank you very much for your kind words :) ❤️
I just can't thank you enough for not charging for all of these great lessons you are making or you could easily make a lot of money out of these. Respect to you!! ❤
Thank you for watching, enjoy! ❤️
Not easy to put 10 hour long video with excellent content. Kudos to you Antonio 💗
Thank you very much! ❤️
Crazy, We going to build these kind of project. Big Thanks Antonio
Hope you enjoy it!
Compared to other CRUD project, i really appreciate it for this kind of project , Thanks for the video!
Glad you liked it!
Another master piece from your side. Thanks a lot for your input to community.
My pleasure!
You are amazing. Always giving high-quality content with great effort. ❤
Thank you very much! ❤️
This channel is a gem! Always bringing quality videos
Thank you a lot!
Asked chat gpt to give me harder projects to build and this was one of the them. Didn't know how to go about it and you dropped this. Thank you Antonio 🙏🏿🙏🏿❤️❤️.
Enjoy the project!
To me it looks absolutely insane, black-magic-level that you are able to build something like that in 10 hours. I would think this takes teams and months of development.
Thank you for the kind words :)
That's not 10 hours , he put more like 100 hrs into this
Thank you so much for bringing this awesome tutorial, and also for keeping almost all of it free for everyone, keep up the great stuff
Glad you like it! ❤️
Mad respect, dude, for your patience in creating a 10-hour+ video!
Glad you enjoyed it! ❤️
❤ Oh man Antonio i really like it that's unbelievable. And
I hope your next will be inventory management system and you now I have been waiting for that project.
Please do it. I love it.
Can you be more specific about inventory management? To me it sounds like all of my previous projects can easily be converted into that. Could you give me an example of an app that does that so I can add it to a poll so people can vote? Since Inventory management is too vague
@@codewithantonio yeah sure Zoho Inventory! has a wide range of inventory management system.
@@codewithantonio yes sir Zoho clone Inventory management system.
@@codewithantonioZoho inventory is a great solution for businesses that need help managing their inventory levels.
Zoho inventory is a great solution for businesses that need help managing their inventory levels.
I haven't seen the tutorial yet but it sure is amazing like all the others.
Thank you for the kind wrods!
Awesome Content Antonio
I love the way you guide our hands each step across the learning process.
You are a real gem
Thank you for watching and enjoy! :)
I can't thank you enough for what you are doing, I am so grateful to have a teacher like you who chooses to teach for absolutely FREE, I wish I could help you in anyway I can, you are a gold for beginner developers ❤
You're very welcome!❤️
First time on your channel and I have subbed! This video is Terrific! A very detailed approach.
Thank you very much!
Really waited for this... Thanks man, you're the real deal
Happy you like my content :)
So good! Making it so easy to build super powerful stuff!
Thank you Steven!
Hey antonio I was searching you channel that is there any video but now it popped up thanks you such wonderfull tutorials one of the rarest content someone can give for free
I am glad I can help :)
i was searching yesterday about miro clone and i didn`t find anything thank youu 😭♥♥♥♥
Happy my video helps :)
finally i completed the project amazing work and thank you again 💛💛
Great job!
You are super amazing Antonio! Your generosity is highly appreciated 🙌🏻🙌🏻❤️
My pleasure!!
Amazing variety of projects on your channel
Glad you like them :)
We use Miro in my day job, should be interesting tutorial, thanks!!
Hope you like it!
I haven't completed the live stream app yet and u drop another banger Hats off
Hope you like my content! :)
This is an example of real life superhero. Non stop video packed with info. Don't stop Antonio. You are a man with mission mate!
Congrats🎊 😊 from India
Thank you a lot :)
Your projects are sensational, and easily understandable even for a French person. Keep it up, I love it.
appreciating his hard work for us 10 hours for us. amazing
I was away for 2 months and when I got back I finished this project. Absolutely brilliant. No Ill start your next project and soon I will join your subscription. But right now I cant afford the subscription.. But I will soon. Thankyou very much for doing this for us to learn.
You are doing an amazing job being dedicated for 2 months!!
it is incredible how great project you do just by yourself, mind blowing for me.
great great work
Thank you very much!
The best channel for learning Full Stack Development
Glad you think so! ❤️
@@codewithantonio ❤
Dear sir, you shouldn't provide this type of content for free. This is too much. Huge respect to you
Im glad you like it ❤️
This is the best learning web dev content ever exists on RUclips! Great job Antonio! Best for you and I’m pretty sure with your skills you could easily organize the best IT company in the world. P.S. would be great to be a part of the team 🤠👌👏👏
Thank you very much for the kind words! ❤️
I LOVE your videos! They are the only thing that actually help me to grow my coding skills. It would be awesome if you could make an UBER clone video. There is a lot of functionality in UBER I break my head over when trying to recreate it. :) Keep it up!
I definitely want to make an Uber clone when I brush up my React Native skills :)
Wow. Another great one. Thanks so much Antonio.
Thanks for watching!
Wow the intro of the project just got me, thank u for sharing
Glad you liked it!
Happen to see your channel when I was searching for NextAuth. The best video which taught me deeply about the authentication flows.
Thank you so much for such contents Antonio🎉❤.
Happy you like my content!
I have a great opinion about myself cause I work like nobody else but you are on another level of greatness. God bless you.
Thank you very much ❤️
I subbed when I saw the second mouse floating! man, I was looking for this feature.
Excited to start with this project🎉❤
Good luck!
Antonio gives us production level applications learning for free!
Thank you Antonio 😊
My pleasure! Enjoy and thank you for watching! ❤️
Tks Antonio. I have no words to say thank you.
You are very welcome!
This is amazing! Everytime I think you have gone further than everybody you go even further
Thank you very much!
Thank you Antonio ! I remember requesting Miro clone(or figma jam board clone ); and you did it. Thanks a lot !
Hope you like the result! :) Thank you for the suggestion!
🎉 Really looking forward to building this
❤️
Man! you deserve +1M subs. Thank you for the luxury content ❤
Glad you enjoy it!
You actually did it. Thanks. Can't wait for whats next 😁😁
More to come!
Nice one mate,
I am going to follow it and make something of my own!!!!!!
Cheers mate!!!
Have fun!
@@codewithantonio You are the best mate!!!
Thank you for an amazing project as usual🎉 I’ve just finished today and realize there all a lot of problems exist like if you re selecting a layer and choose pencil + start drawing, the item is still be selected, for text and sticky note is missing styles to make it visible - like whitespace is not preserved and cannot break to a new line since its using contenteditable = true and more… It’s just so overwhelming for me when a 10hrs project tutorial is barely enough to create a workable project (not usable since imo it still lack of logics like some I mention above). Again thank you for making this tutorial free ❤
It is because we are building a whiteboard from scratch. A lot of other tutorials will use finished libraries like tldraw or excalidraw - but not in this video, we build every single thing, from translating, resizing, layering, so obviously we are gonna have more bugs, but we also learn 10x more, and can adapt it 10x more as well
Antonio, you always show up when I need a you!🙌
Glad I could help!
oh man your projects are amazing
Glad you like them!
Can't believe you created a sellable MVP in 10 hours. Outstanding work! Would love to see some projects from you using SST and hosted on AWS. Also, you can use generics for the useApiMutation hook for the correct types to flow.
Honestly your content is better than All this paid courses Love you men🆒, keep the good work
Thank you very much :)
You must be the most followed developer on RUclips. You are perfect 💜
Thank you very much :) ❤️
Thanks a lot bro , i have done a twitter clone using your tutorial and got a job . Your content is Fabulos
Thank you for your support ❤️
Literally goosebumps intro videos as always ❤🎉
hahaha thank you!
You're insane to be able to not get tired of posting such long form videos man🙇
Hope you enjoy them! ❤️
Awesome work, as always! 🙌
Thank you so much 😀
Antonio i have been watching you from a long period of time you are the only person who made my coding skills much better the only request i would like to make from you is that please make a tutorial using next.js , redux toolkit, prisma, next auth, socket io. Thank you Master ❤
Thank you for the suggestion!
amazing content dude!
Glad you like it! :)
antonio one thing you can do is that when you are using a external library, what you can do is how you got those functions imported from. I mean basically you can explain audience on how to actually read documentation
Thanks for uploading this in RUclips🙏🏻
My pleasure 😊
Antonio your videos are truely a breed apart from anything on youtube. Thank you man. Ive been a software engineer for over 3 years now and these videos have really made me progress. If you see this comment can you work on a project similar to shopify or wordpress? A builder with the ability to publish websites and add sub domains to them. Even if its paid it would be truly amazing. Never stop what your doing.
Thank you for the kind words and the suggestion!
Great work as always. Learnt a lot from your tutorial. ❤
Thank you! ❤️
Ooh such a 💎💎💎!!! Thank you for your efforts
Happy you like my content!
Your incredible content deserves a community of 1 million subscribers🌟😊
Thank you so much :)
Great Tutorial! ❣ Loved all your tutorials. Great Work!
Thanks so much! 😊
Please keep the additional content also for free ,it's really valuable what you're teaching.
Thanks.a lot
I wait 4 weeks for this, and it's finally here💃💃💃🕺🕺
Code with Antonio to the world 🌏
Hope you enjoy it! ❤️
Your dedication, consistency and hard work have made tremendous impact on people's lives. Thank you and well done.
Thank you very much!
watched codevolution 51 videos on nextjs and immediately this. what a quick revision in the start
Was waiting for this video ❤
Hope it will be what you wanted!
Amazing Quality. Keep it up man
Thank you very much!
We just want to know about your whole planning and research before you make this type of great projects
Antonio you are a good sharperd who is truely leading his flock to mastery. God bless you
I am glad you like my content :) Thank you for the support
Absolutely, a top notch professional application
Happy you like it!
Amazing tutorial! 👏👏
As always amazing job by Antonio.❤❤
Thank you very much!
You are a giant bro, keep doing it for our community, please! God bless you 🙏
Happy you like the videos :)