Build and Deploy a Full Stack Video Conferencing App with Next JS
Вставка
- Опубліковано 21 тра 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
this is unbelivable, i finished the video with you, and deploy the app, thanks boss, you are the real hero.🥰
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! ❤️
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!
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.
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!
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!
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!
Thank you so much!
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!
This channel deserves over 2M subscribers..
This is a mine. A gold mine!
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.
Love the way that how we can so easily follow along with you!!
Holy tutorial!!! My heart is excited ❤
Enjoy! ❤
I have learned so much from watching your videos. You are the best.
Kudos 👏 to the number one Software Developer on UA-cam
Thank you! 😊
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
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!
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!!!
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.
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 can now celebrate my Easter building this 🔥
Happy Easter!
By far... the best YT channel for devs
Awesome Tutorial! I enjoy you Content and learn so much. appreciate it!
Keep on going!
The best software development university. Thank you, Adrian. You are the best! 👏👏
Thank you so much!
All the tutorials here make my portfolio! Thank you🔥
Glad you like them!
I don't know how to thank you buddy, you are a genius. You & your content always shine 🔥
Thank you 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!
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?
@@markeesfuller5389 it took me around double the video time.
Your content is always amazing! Thank you so much! Love from Indonesia
Thanks so much!
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
Andrian, you are awesome. Thank you.
Wow clerk is amazing..Thank u ❤❤
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!
He has done it again 🔥🔥
I really love this channel...and have learnt alot!
The best so far 👏👏
Appreciate it! 🔥
Thank you bro! I learn lot of things!
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 💯
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.
You are on a whole other level of boss mode. Continued success!
Wow, thanks!
Another Nice Project. Love you Adrian❤❤❤
Thanks!
Excited to see what everyone builds with the Video API 🔥
Exactly!
One of my greatest wishes, thanks Adrian
My pleasure!
this is freaking owesome i needed this
Enjoy!
You always surprise us with something better, how insane
Thank you!
I was missing this ...was getting bored with UA-cam videos ..thanks for coming up ...am building this 😊
Hope you enjoy it!
You are amazing Adrian, thanks for the video
Thank you so much!
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!
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 man.
My pleasure!
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 brother for sharing such informative resource
Man you are GENIUS!!💯💪
You are! 💯💪
Thanks Adrian you are changing lives
Appreciate it!
Thank you so much for sharing your experience and knowledge, Sir.
Appreciate it!
One of the best ui among all real meeting application. As usual one of the best video 🤩
Thanks a ton
thank you so much for this amazing content!
My pleasure!
Excited to build this 🔥
Enjoy!
Loved it great tutorial
Yet another great project!
Thank you! Cheers!
this was so indepth i love it
Thsts the goal!
thank you for making this type of content (Tutorial) you are the best Mentor for me love from india
So nice of you
God of Content! This is one of the few youtubers where I click on the Bell icon! God speed!
Thank you so much! :)
yo ! man you deserves this 👑
Thank you! ❤️
Great video. I'm greatful for this tutorial. I learn alot from this tutorial.
Glad it was helpful!
thank you so much ♥
I was searching video streaming project on youtube in the morning and in the evening I found this ❤❤ From India
Hope you enjoyed it!
Great video, love it❤
Thank you!
Thank you Adrian ❤
Thanks! 🙌
Thanks alot. This is really amazing
Thanks!
nah, we need someone making solid RemixJS tuts like this
React/Next rules :)
Damn, you're a blessing to developers
Enjoy!
Am a php developer, but these days I've been using more of JS, thank you
My weekend starts with his videos 😅😅
Have fun! :)
Hi thank you for real the projects are just amazing 👏
Thanks so much 😊
Amazingly Taught🎉🎉
The video was uploaded a minute ago? You havent even watched it.
😂😂
Thank you!🤞
Shalom Mr. Adrian, another fantastic app. I am a bit surprised you did not include some nifty neat animations.
Thanks!
It's going next level day by day
Exactly
Now I know my plans for this weekend
Enjoy!
I loved this tutorial!
Yeah I Would like to see a Figma Shared every time.
thx for figma file. this is greate)
Yess, happy to hear that!
nice fam. now i have something to do in weekends
Amazing, enjoy!
Thank you so much for creating such an excellent video with smooth progress and concise explanations.
I feel unsatisfied when almost every tutorial videos only demonstrate implementing protected routes via middleware files in dev mode.
This is because middleware inherently involves caching, resulting in differences between what is shown in dev mode and production mode.
It would be great if you could create a video addressing this issue.
Great suggestion!
Great job 👍
Great Project 🎉
Appreciate it!
thank you Adrian.
Thanks!
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
The best video for NextJS out there. Thanks a lot and hoping for more such content. 100%
Great project, love you Sir
Thank you! Cheers!
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!
Yoh this is fire🔥🔥🔥🔥🔥
Awesome video❤
Yoom Yoom 🔥🔥Amazing ❤
Haha thank you! ❤
Yes. Kindly do switch to figma in between the video so that we know what's going on there
Will do!
THANK YOU
Thank you for watching!
Awesome video. I love it. Do you mind if I ask what tool you use to edit these videos?
thank you master ❣ from indonesia
Thank you!
amazing work
Thanks a lot!