Build and Deploy a Full Stack Video Conferencing App with Next JS
ฝัง
- เผยแพร่เมื่อ 19 มิ.ย. 2024
- Learn to develop a professional enterprise-ready video conferencing app in hours using Next.js 14, Stream, and Tailwind CSS.
⭐ Stream: gstrm.io/4cwPaLp
⭐ Clerk: go.clerk.com/JZu31Lm
🎨 Zoom Clone Figma File: resource.jsmastery.pro/zoom-c...
🌟 Become a top 1% Next.js 14 developer in only one course: jsmastery.pro/next14?...
🚀 Skyrocket your career in 4 months: jsmastery.pro/masterclass?utm...
📚Materials/References:
GitHub Repository (give it a star ⭐): github.com/adrianhajdin/zoom-...
README (assets & code): github.com/adrianhajdin/zoom-...
💻 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:03 - Setup
00:08:55 - File & Folder Structure
00:25:10 - Sidebar
00:42:23 - Navbar
00:58:15 - Clerk Auth
01:15:28 - HomePage
01:40:12 - Reusable Modal
01:50:00 - Stream Create Meeting
02:20:24 - Meetings Calls Setup
02:29:14 - Meeting Setup
02:38:06 - Meeting Room
03:05:00 - Schedule Meeting
03:17:28 - Upcoming Meetings Page
03:44:37 - Previous Meetings Page
03:45:56 - Recordings Page
03:53:22 - Personal Meeting Room
04:07:47 - Join Meeting Modal
04:13:32 - Deployment
![พบรัก - INK WARUNTORN [Official MV]](http://i.ytimg.com/vi/n2wjOYVC38Y/mqdefault.jpg)
![แฟนแนวใด๋ - ยูริ โตเกียวมิวสิค [ SyncVersion ]](http://i.ytimg.com/vi/Fm8oDwos2uc/mqdefault.jpg)
What always amuse me is how you come up with these ideas and how you can picture someone finding it difficult to do something! You're a gift to the web development community! The very best!
Thank you! ❤️
this is unbelivable, i finished the video with you, and deploy the app, thanks boss, you are the real hero.🥰
These are amazing! You've really helped me get up to speed with NextJS and Tailwind. And I hadn't used Clerk before either. Thank you for making all of this quality learning material!!
Glad you like them!
Absolutely blown away by your Next.js tutorials! 🚀 Each video is incredibly insightful and well-paced, making complex concepts feel approachable. Your explanations are crystal clear, and the examples provided really solidify understanding. Thanks a ton for sharing your expertise with the community! Can't wait to see what's next! 👏
Awesome, thank you!
The first glimpse of Mastery's desktop setup is absolutely awesome! 😎
I was researching how to solve and adapt a learning app with video streaming that I will make, and suddenly I see this incredible content, congratulations on your work, you are the man and an excellent mentor, I am a subscriber to the Ultimate Next.js course.
You're very welcome!
Kudos 👏 to the number one Software Developer on TH-cam
Thank you! 😊
As someone who uses Figma designs in their everyday job, I would love to see Figma designs with all new videos from now own! Love that you've incorporated that piece to this project!
Hey there Adrian greetings from Nigeria. I can't thank you enough for this content. You make me a better developer and i have no idea the amount of time and resources into making content like this. Once again, thank you.
As always your videos are More better than All paid courses out there, you explain everything more clearer and if that was not enough it's all free, amazing 🎉, I like jsm community never disappoints😊
True🎉😂
Wow, thanks!
Well said brother 😀
@@liperanqey for real 💯
@@godloveinaction 💯
You can't even imagine how your videos helps me to quickly catchup with the current technologies, keep up the good work dude :)
Glad to hear it!
This channel deserves over 2M subscribers..
This is a mine. A gold mine!
By far... the best YT channel for devs
Free content for the common good. You are a blessed champion. Well done!
Thank you so much!
Yet another banger.. i finished iPhone clone.. learnt so much.. and now almost in week I have another project to work... Zoom clone sounds interesting
Enjoy!
Love the way that how we can so easily follow along with you!!
Holy tutorial!!! My heart is excited ❤
Enjoy! ❤
I can now celebrate my Easter building this 🔥
Happy Easter!
This channel is gold for people who want to "get started" with building projects. I'd recommend users to do a little bit of tweaking as well instead of copying the entire code.
Amazing suggestion!
I have learned so much from watching your videos. You are the best.
the css copy and paste used to throw me off by giving me a false level of understanding, this video properly closed down on all the knowledge gaps. Thank you for the amazing work!
Happy to hear that!
Would like to see someday entire app without using 3rd party services
Thanks for the feedback!
Yeah ... a project without third party packages is 🔥
Yes I too agree with it
And all deployment will be always in vercel
Look back to the 90s and early 2000s. It wasn’t a great time. The Cambrian explosion of frameworks and services has been a gift to humanity
God bless. I even started pressing Command + P in order to navigate through my files quicker!
wow i love how everything is explained so precisily
This project is amazing. Thank you so much. Love your content!!!
Yooo thanks completed faster than thought as usual exceptional work
Hey Adrian!! Thank you so much for teaching us with this wonderful project. Amazing content and amazing explanation. Please do keep up with such project videos!!!
i love the way that you teach, i love the way that you explain, i love the way that you speak.
This video is truly amazing and i am also happy that you took your time to explain every detail and avoid blindly copying codes as i had problems before in your music player video thank you so much this video is a masterpiece
So nice of you
All the tutorials here make my portfolio! Thank you🔥
Glad you like them!
This project and quite a few other ones have made me appreciate having a visual guide and a solid design system overall, before even attempting to write code....
I for one would definitely love to see more Figma presentations in the future.
The best software development university. Thank you, Adrian. You are the best! 👏👏
Thank you so much!
I don't know how to thank you buddy, you are a genius. You & your content always shine 🔥
Thank you so much 😀
Awesome Tutorial! I enjoy you Content and learn so much. appreciate it!
Keep on going!
Excited to see what everyone builds with the Video API 🔥
Exactly!
Andrian, you are awesome. Thank you.
Wow clerk is amazing..Thank u ❤❤
Thank you bro! I learn lot of things!
Your content is always amazing! Thank you so much! Love from Indonesia
Thanks so much!
🔥🔥🔥 Adrian, many many tnx for your videos!! It's the BEST and №1 as usually!! Design, code, explains, usefully... fantastic! Yes, we really love you!!
Please, don't forget us! 🙏❤🔥❤🔥❤🔥
Awesome, thank you!
I was missing this ...was getting bored with TH-cam videos ..thanks for coming up ...am building this 😊
Hope you enjoy it!
You are on a whole other level of boss mode. Continued success!
Wow, thanks!
Finally I finished following along this tutorial and deployed my first app. This was my first tutorial and im glad I finished it. I don't understand a lot of the topics as a beginner though but im sure to improve!
How long did it take you to finish?
@@Seekimo it took me around double the video time.
@@mikekoszasuki2969 plz share you github repository link asap . i need it urgently
Another Nice Project. Love you Adrian❤❤❤
Thanks!
this is freaking owesome i needed this
Enjoy!
One of my greatest wishes, thanks Adrian
My pleasure!
You are amazing Adrian, thanks for the video
Thank you so much!
You always surprise us with something better, how insane
Thank you!
lol i was planning to learn something related to socketAPI and you here motivated me to leave every work and do it now. Keep up the good Work
Glad to hear it!
I love all your content, I really would like to see extra tools in your project like GraphQL, tanstack query, Redux Toolkit, Because it starts felling repetitive, This tools really give an extra plus! Thank you.
Thank you so much for this man.
My pleasure!
Excited to build this 🔥
Enjoy!
thanks brother for sharing such informative resource
Wow this project is amazing. Thanks for sharing and teaching buddy.🥳🥳🥳👏👏
Yet another great project!
Thank you! Cheers!
He has done it again 🔥🔥
I really love this channel...and have learnt alot!
The best so far 👏👏
Appreciate it! 🔥
Thanks Adrian you are changing lives
Appreciate it!
Wow, You added so many features to it. Right now, it's nothing comes to my mind beyond these features. Thanks, I will build it with you
is he tho? 95% of work is to just install 3rd party libs... This is not really coding. It's wordpress-like-coding. Install some plugins, sprinkle theming. Done. Also - Vercel and Clerk. I just cannot watch another projects with those adverts. Those 2 companies will make this whole app worthless. They will quickly charge you more, than you can make.
I get it - youtubers need money. Sure. But I;m still waiting for honesty - why they are using those options, not the others.
Not a single very big project is using Clerk / Vercel. I've seen very, very big projects, with hundreds of people per minute. Not a single one is using Clerk / Vercel. They have own auth system and the project is deployed on VPS / Azure.
Why? Money. It just saves a lot of money per month. In thousands.
Thank you so much!
It's far from no-code/low-code tools. While I do agree with you that super huge project don't use them, it doesn't mean they wouldn't start with them if they were starting now. It quickly gets you going. And then you can switch to other solutions as you scale.
Thank you so much for sharing your experience and knowledge, Sir.
Appreciate it!
Loved it great tutorial
Insane tut as always, keep up the good work.
It would be lovely if you would do the same type of content, but add next-intl library for example to translate the app and make it multi language.
Thanks for the idea!
thank you so much for this amazing content!
My pleasure!
Thank you Adrian ❤
Thanks! 🙌
Now I know my plans for this weekend
Enjoy!
Man you are GENIUS!!💯💪
You are! 💯💪
Thank you so much for helping growing devs like us with free and amazing videos... Also thanks for using free tools and services.. Helps us alot 👍
Happy to help!
this was so indepth i love it
Thsts the goal!
Thanks alot. This is really amazing
Thanks!
My weekend starts with his videos 😅😅
Have fun! :)
Hi thank you for real the projects are just amazing 👏
Thanks so much 😊
Great video, love it❤
Thank you!
thank you Adrian.
Thanks!
thank you for making this type of content (Tutorial) you are the best Mentor for me love from india
So nice of you
Great Project 🎉
Appreciate it!
Great video. I'm greatful for this tutorial. I learn alot from this tutorial.
Glad it was helpful!
thank you so much ♥
I loved this tutorial!
One of the best ui among all real meeting application. As usual one of the best video 🤩
Thanks a ton
As a junior developer i would like this video more if the video conferencing part were implemented from scratch.
There is practically nothing we learn in this video except learning stream's API and copying their code.
I would know nothing about how javascript is handling these internally.
As your long time viewer , i used to love your videos and always gets excited whenever your videos drop. But nowadays there is nothing different.
You are a good teacher, you have great experience in the industry. So please teach us things from scratch instead of copying some company's code
Bro the best code is the one you don't have to write :))
I'll do my best!
@@UFO_808 I know bro, even I use shadcn and other third-party services in my project. But when someone teaches I think it's better to learn basic principles and core development rather than the sugarcoated thing
I agree with @muhammedzulfiker1471 here, Implementing it from scratch and explaining whats happing under the hood would be much more better than just copying the code. Hope that helps
@@muhammedzulfiker1471 brother making a video conferencing software is not something that fits in a 4 hour video, its years of work in low level languages and you need to be extremely knowledgeable in networking.
Great job 👍
Yoom Yoom 🔥🔥Amazing ❤
Haha thank you! ❤
God of Content! This is one of the few youtubers where I click on the Bell icon! God speed!
Thank you so much! :)
nah, we need someone making solid RemixJS tuts like this
React/Next rules :)
Shalom Mr. Adrian, another fantastic app. I am a bit surprised you did not include some nifty neat animations.
Thanks!
I was searching video streaming project on youtube in the morning and in the evening I found this ❤❤ From India
Hope you enjoyed it!
yo ! man you deserves this 👑
Thank you! ❤️
Thanks ❤
You're welcome 😊
Thank you so much, I have learned a lot from your videos. Have you created any videos on building a website using a website builder (like dnd-kit or something else) with React or Next.js? If not, do you plan to create such videos in the future?
thx for figma file. this is greate)
Yess, happy to hear that!
Amazingly Taught🎉🎉
The video was uploaded a minute ago? You havent even watched it.
😂😂
Thank you!🤞
amazing waiting for full-stack banking app real world app next js 14
Will do!
It's going next level day by day
Exactly
nice fam. now i have something to do in weekends
Amazing, enjoy!
Awesome 😎
Where did you get the link to the video? :)
Bro commented before the video got posted 😮😮
@@ArunKumar-1123that's because adrian already updated the GitHub Readme and put the yt link in that watch tutorial section or the main banner of that github repo but the video was unlisted before he actually put the video available for publically 🤣🤣
THANK YOU
Thank you for watching!
Awesome video❤
CLERK IS AWESOME !!!!!!!!
Actually, what I strongly believe is if you could make another video, but recreate this video streaming call from scratch in code. I know that you already said that we don’t have to reinvent the wheel, but i think that it is worth to do it once, to actually learn something low level, and then from there onwards use Stream, and other third party tools. I would love to see a tutorial that actually teaches how to do this without any frameworks
Thanks for the feedback!
Damn, you're a blessing to developers
Enjoy!
Am a php developer, but these days I've been using more of JS, thank you
Nice Video. I was looking for something that uses third party tools to speed up the process of development. Mainly with something like Chadcn, Daisyui or NextUI. Though I love building from scratch constant changes of design and requirements from client just doesn't fit well with it. Keep up the good work