Build and Deploy a Full Stack Video Conferencing App with Next JS
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
Пікірлер: 701
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!
@javascriptmastery
3 ай бұрын
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!!
@javascriptmastery
3 ай бұрын
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! 👏
@javascriptmastery
3 ай бұрын
Awesome, thank you!
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.
@javascriptmastery
3 ай бұрын
You're very welcome!
Kudos 👏 to the number one Software Developer on KZread
@javascriptmastery
3 ай бұрын
Thank you! 😊
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.
You can't even imagine how your videos helps me to quickly catchup with the current technologies, keep up the good work dude :)
@javascriptmastery
3 ай бұрын
Glad to hear it!
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!
Free content for the common good. You are a blessed champion. Well done!
@javascriptmastery
3 ай бұрын
Thank you so much!
The first glimpse of Mastery's desktop setup is absolutely awesome! 😎
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!
@javascriptmastery
3 ай бұрын
Happy to hear that!
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.
@javascriptmastery
3 ай бұрын
Amazing suggestion!
Holy tutorial!!! My heart is excited ❤
@javascriptmastery
3 ай бұрын
Enjoy! ❤
I can now celebrate my Easter building this 🔥
@javascriptmastery
3 ай бұрын
Happy Easter!
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😊
@godloveinaction
3 ай бұрын
True🎉😂
@javascriptmastery
3 ай бұрын
Wow, thanks!
@liperanqey
3 ай бұрын
Well said brother 😀
@francisnjugunaldc
3 ай бұрын
@@liperanqey for real 💯
@francisnjugunaldc
3 ай бұрын
@@godloveinaction 💯
This channel deserves over 2M subscribers.. This is a mine. A gold mine!
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
@javascriptmastery
3 ай бұрын
So nice of you
The best software development university. Thank you, Adrian. You are the best! 👏👏
@javascriptmastery
3 ай бұрын
Thank you so much!
I don't know how to thank you buddy, you are a genius. You & your content always shine 🔥
@javascriptmastery
3 ай бұрын
Thank you so much 😀
I have learned so much from watching your videos. You are the best.
Love the way that how we can so easily follow along with you!!
By far... the best YT channel for devs
🔥🔥🔥 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! 🙏❤🔥❤🔥❤🔥
@javascriptmastery
3 ай бұрын
Awesome, thank you!
This project is amazing. Thank you so much. Love your content!!!
God bless. I even started pressing Command + P in order to navigate through my files quicker!
i love the way that you teach, i love the way that you explain, i love the way that you speak.
Would like to see someday entire app without using 3rd party services
@javascriptmastery
3 ай бұрын
Thanks for the feedback!
@heysoub
3 ай бұрын
Yeah ... a project without third party packages is 🔥
@babiescode7467
3 ай бұрын
Yes I too agree with it
@babiescode7467
3 ай бұрын
And all deployment will be always in vercel
@MoneyballTV
3 ай бұрын
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
Yooo thanks completed faster than thought as usual exceptional work
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!
@Seekimo
Ай бұрын
How long did it take you to finish?
@mikekoszasuki2969
Ай бұрын
@@Seekimo it took me around double the video time.
@CSE___SHIVAMCHHABRA
Ай бұрын
@@mikekoszasuki2969 plz share you github repository link asap . i need it urgently
Your content is always amazing! Thank you so much! Love from Indonesia
@javascriptmastery
3 ай бұрын
Thanks so much!
You’re a saint. Building out my portfolio before I graduate and these videos are huge
All the tutorials here make my portfolio! Thank you🔥
@javascriptmastery
3 ай бұрын
Glad you like them!
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!!!
He has done it again 🔥🔥 I really love this channel...and have learnt alot! The best so far 👏👏
@javascriptmastery
3 ай бұрын
Appreciate it! 🔥
Excited to see what everyone builds with the Video API 🔥
@javascriptmastery
3 ай бұрын
Exactly!
I was missing this ...was getting bored with KZread videos ..thanks for coming up ...am building this 😊
@javascriptmastery
3 ай бұрын
Hope you enjoy it!
You are on a whole other level of boss mode. Continued success!
@javascriptmastery
3 ай бұрын
Wow, thanks!
wow i love how everything is explained so precisily
Another Nice Project. Love you Adrian❤❤❤
@javascriptmastery
3 ай бұрын
Thanks!
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
@javascriptmastery
3 ай бұрын
Glad to hear 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
@vinniv6806
3 ай бұрын
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.
@javascriptmastery
3 ай бұрын
Thank you so much!
@javascriptmastery
3 ай бұрын
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.
Awesome Tutorial! I enjoy you Content and learn so much. appreciate it! Keep on going!
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
@javascriptmastery
3 ай бұрын
Enjoy!
@AnisH__MHATRE
10 сағат бұрын
is it just a ui clone or i can understand the actual working of video conferencing app?
One of my greatest wishes, thanks Adrian
@javascriptmastery
3 ай бұрын
My pleasure!
You always surprise us with something better, how insane
@javascriptmastery
3 ай бұрын
Thank you!
this is freaking owesome i needed this
@javascriptmastery
3 ай бұрын
Enjoy!
You are amazing Adrian, thanks for the video
@javascriptmastery
3 ай бұрын
Thank you so much!
One of the best ui among all real meeting application. As usual one of the best video 🤩
@javascriptmastery
3 ай бұрын
Thanks a ton
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 👍
@javascriptmastery
3 ай бұрын
Happy to help!
thank you for making this type of content (Tutorial) you are the best Mentor for me love from india
@javascriptmastery
3 ай бұрын
So nice of you
Thank you so much for sharing your experience and knowledge, Sir.
@javascriptmastery
3 ай бұрын
Appreciate it!
Andrian, you are awesome. Thank you.
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.
@javascriptmastery
3 ай бұрын
Thanks for the idea!
Thanks Adrian you are changing lives
@javascriptmastery
3 ай бұрын
Appreciate it!
Wow clerk is amazing..Thank u ❤❤
God of Content! This is one of the few youtubers where I click on the Bell icon! God speed!
@javascriptmastery
3 ай бұрын
Thank you so much! :)
I was searching video streaming project on youtube in the morning and in the evening I found this ❤❤ From India
@javascriptmastery
3 ай бұрын
Hope you enjoyed it!
Thank you bro! I learn lot of things!
Yet another great project!
@javascriptmastery
3 ай бұрын
Thank you! Cheers!
Excited to build this 🔥
@javascriptmastery
3 ай бұрын
Enjoy!
Man you are GENIUS!!💯💪
@javascriptmastery
3 ай бұрын
You are! 💯💪
Thank you so much for this man.
@javascriptmastery
3 ай бұрын
My pleasure!
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.
Wow this project is amazing. Thanks for sharing and teaching buddy.🥳🥳🥳👏👏
Dude Adrian, your vids are awesome! You gotta make a MERN stack course next, that would be fire
thank you so much for this amazing content!
@javascriptmastery
3 ай бұрын
My pleasure!
Great video. I'm greatful for this tutorial. I learn alot from this tutorial.
@javascriptmastery
3 ай бұрын
Glad it was helpful!
Great video, love it❤
@javascriptmastery
3 ай бұрын
Thank you!
this was so indepth i love it
@javascriptmastery
3 ай бұрын
Thsts the goal!
thanks brother for sharing such informative resource
My weekend starts with his videos 😅😅
@javascriptmastery
3 ай бұрын
Have fun! :)
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.
Thanks alot. This is really amazing
@javascriptmastery
3 ай бұрын
Thanks!
Thank you Adrian ❤
@javascriptmastery
3 ай бұрын
Thanks! 🙌
Hi thank you for real the projects are just amazing 👏
@javascriptmastery
3 ай бұрын
Thanks so much 😊
nah, we need someone making solid RemixJS tuts like this
@javascriptmastery
3 ай бұрын
React/Next rules :)
Shalom Mr. Adrian, another fantastic app. I am a bit surprised you did not include some nifty neat animations.
@javascriptmastery
3 ай бұрын
Thanks!
It's going next level day by day
@javascriptmastery
3 ай бұрын
Exactly
Great Project 🎉
@javascriptmastery
3 ай бұрын
Appreciate it!
Loved it great tutorial
Now I know my plans for this weekend
@javascriptmastery
3 ай бұрын
Enjoy!
Amazingly Taught🎉🎉
@taavi948
3 ай бұрын
The video was uploaded a minute ago? You havent even watched it.
@HarshDubeyUHD
3 ай бұрын
😂😂
@javascriptmastery
3 ай бұрын
Thank you!🤞
thank you Adrian.
@javascriptmastery
3 ай бұрын
Thanks!
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
@UFO_808
3 ай бұрын
Bro the best code is the one you don't have to write :))
@javascriptmastery
3 ай бұрын
I'll do my best!
@muhammedzulfiker1471
3 ай бұрын
@@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
@ayanmansuri4493
3 ай бұрын
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
@aryanpatil5389
3 ай бұрын
@@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.
yo ! man you deserves this 👑
@javascriptmastery
3 ай бұрын
Thank you! ❤️
thx for figma file. this is greate)
@javascriptmastery
3 ай бұрын
Yess, happy to hear that!
Great project, love you Sir
@javascriptmastery
3 ай бұрын
Thank you! Cheers!
thank you so much ♥
Damn, you're a blessing to developers
@javascriptmastery
3 ай бұрын
Enjoy!
@dbones-aow3
3 ай бұрын
Am a php developer, but these days I've been using more of JS, thank you
Thanks ❤
@javascriptmastery
3 ай бұрын
You're welcome 😊
Reached at 1:39:53 and it is working perfectly.
@siddharthasrivastava18
3 ай бұрын
Did you get clerk error?
@javascriptmastery
3 ай бұрын
Cool!
amazing waiting for full-stack banking app real world app next js 14
@javascriptmastery
3 ай бұрын
Will do!
Yoom Yoom 🔥🔥Amazing ❤
@javascriptmastery
3 ай бұрын
Haha thank you! ❤
THANK YOU
@javascriptmastery
3 ай бұрын
Thank you for watching!
nice fam. now i have something to do in weekends
@javascriptmastery
3 ай бұрын
Amazing, enjoy!
Great job 👍
CLERK IS AWESOME !!!!!!!!
amazing work
@javascriptmastery
3 ай бұрын
Thanks a lot!
Yoh this is fire🔥🔥🔥🔥🔥