Build and Deploy a Full Stack Video Conferencing App with Next JS
HTML-код
- Опубликовано: 7 июн 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.
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!
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!
This channel deserves over 2M subscribers..
This is a mine. A gold mine!
The first glimpse of Mastery's desktop setup is absolutely awesome! 😎
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!
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!
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 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!
Kudos 👏 to the number one Software Developer on RUclips
Thank you! 😊
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!
Holy tutorial!!! My heart is excited ❤
Enjoy! ❤
I can now celebrate my Easter building this 🔥
Happy Easter!
I have learned so much from watching your videos. You are the best.
The best software development university. Thank you, Adrian. You are the best! 👏👏
Thank you so much!
Love the way that how we can so easily follow along with 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
🔥🔥🔥 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 don't know how to thank you buddy, you are a genius. You & your content always shine 🔥
Thank you so much 😀
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 is amazing. Thank you so much. Love your content!!!
I was missing this ...was getting bored with RUclips videos ..thanks for coming up ...am building this 😊
Hope you enjoy it!
Awesome Tutorial! I enjoy you Content and learn so much. appreciate it!
Keep on going!
God bless. I even started pressing Command + P in order to navigate through my files quicker!
Your content is always amazing! Thank you so much! Love from Indonesia
Thanks so much!
You are on a whole other level of boss mode. Continued success!
Wow, thanks!
Excited to see what everyone builds with the Video API 🔥
Exactly!
He has done it again 🔥🔥
I really love this channel...and have learnt alot!
The best so far 👏👏
Appreciate it! 🔥
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 💯
All the tutorials here make my portfolio! Thank you🔥
Glad you like them!
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!
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
wow i love how everything is explained so precisily
Another Nice Project. Love you Adrian❤❤❤
Thanks!
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 clerk is amazing..Thank u ❤❤
One of my greatest wishes, thanks Adrian
My pleasure!
this is freaking owesome i needed this
Enjoy!
Wow this project is amazing. Thanks for sharing and teaching buddy.🥳🥳🥳👏👏
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 always surprise us with something better, how insane
Thank you!
You are amazing Adrian, thanks for the video
Thank you so much!
Andrian, you are awesome. Thank you.
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!
Thank you bro! I learn lot of things!
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 for making this type of content (Tutorial) you are the best Mentor for me love from india
So nice of you
One of the best ui among all real meeting application. As usual one of the best video 🤩
Thanks a ton
God of Content! This is one of the few youtubers where I click on the Bell icon! God speed!
Thank you so much! :)
Thank you so much for this man.
My pleasure!
Excited to build this 🔥
Enjoy!
Thank you so much for sharing your experience and knowledge, Sir.
Appreciate it!
thanks brother for sharing such informative resource
I was searching video streaming project on youtube in the morning and in the evening I found this ❤❤ From India
Hope you enjoyed it!
Thanks Adrian you are changing lives
Appreciate it!
thank you so much for this amazing content!
My pleasure!
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
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.
Man you are GENIUS!!💯💪
You are! 💯💪
Yet another great project!
Thank you! Cheers!
this was so indepth i love it
Thsts the goal!
Great video. I'm greatful for this tutorial. I learn alot from this tutorial.
Glad it was helpful!
My weekend starts with his videos 😅😅
Have fun! :)
nah, we need someone making solid RemixJS tuts like this
React/Next rules :)
Loved it great tutorial
Thanks alot. This is really amazing
Thanks!
Now I know my plans for this weekend
Enjoy!
Shalom Mr. Adrian, another fantastic app. I am a bit surprised you did not include some nifty neat animations.
Thanks!
Hi thank you for real the projects are just amazing 👏
Thanks so much 😊
Great video, love it❤
Thank you!
Thank you Adrian ❤
Thanks! 🙌
yo ! man you deserves this 👑
Thank you! ❤️
It's going next level day by day
Exactly
I loved this tutorial!
thx for figma file. this is greate)
Yess, happy to hear that!
nice fam. now i have something to do in weekends
Amazing, enjoy!
Great Project 🎉
Appreciate it!
CLERK IS AWESOME !!!!!!!!
Damn, you're a blessing to developers
Enjoy!
Am a php developer, but these days I've been using more of JS, thank you
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?
Great project, love you Sir
Thank you! Cheers!
thank you Adrian.
Thanks!
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!
Yeah I Would like to see a Figma Shared every time.
Amazingly Taught🎉🎉
The video was uploaded a minute ago? You havent even watched it.
😂😂
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
thank you so much ♥
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!
amazing waiting for full-stack banking app real world app next js 14
Will do!
Great job 👍
Yoom Yoom 🔥🔥Amazing ❤
Haha thank you! ❤
Thanks ❤
You're welcome 😊
Thanks for this tutorial. Please make video on handling this natively without any third party. It would be great learning experience and there's not much content around it
Cool idea!
Awesome video. I love it. Do you mind if I ask what tool you use to edit these videos?