This person could easily earn a lot of money by selling these valuable courses on Udemy, but instead, he shares them for free on RU-vid. He's a true hero. Thank you!
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!
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!
You are the best teacher I ever had in IT field. OMG, we absolutely need you as a teacher in some prestige university. It is absolutely insane. THANK YOU VERY VERY MUCH!!!!
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.
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!
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.
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
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!!
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! 👏
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😊
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.
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.
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.
🔥🔥🔥 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! 🙏❤🔥❤🔥❤🔥
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.
There is no video on youtube without using third party library. Please make a video using only webrtc. And i am talking about scalable group calling, not 2 person calling.
You can achieve this by manually implementing the services those third parties provide lol. You and I know the pain. I gave it a go with one of his projects. Instead of using appwrite, I used typescript, express, and sequlize, for the backend.
Please also create a video In which show us the process oof designing the apps that you create here. Excellent content you are creating. Thanks for helping us for free❤❤❤❤❤
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.
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!!!
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
@@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 🤣🤣
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
stream was built by hundreds of developers and you want one person to do that for you bro, that's not possible reinventing something that's already available and better than what you would even come up with is a waste of time bro, just use stream and be free from months/years of headache.
This is so awesome 🤩🤩🤩. Thank you sir and the entire team. I plan on, out of this tutorial, create an online lawyer teleconsult: finding lawyers by specialty, pay the consultation fee, choose the e-consultation day and time, get notifications and get the lawyer/s in a video call. Recordings should be perfect. Lawyers may sign up and pay a monthly subscription. A higher tier plan brings subscribers at the top of the search result. How do you think that app would look like in light of this features in this zoom clone app?
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.
00:02 Build Enterprise-ready video conferencing app in hours 02:11 Utilize top technologies like TypeScript and Next.js for sleek modern styling 07:00 Installing fonts and customizing the app structure. 09:16 Using Next.js route groups for organizing and nesting layouts 14:30 Exploring beyond replication 16:58 Creating separate layout for navbar and sidebar 21:33 Extending Colors in Tailwind CSS 23:46 Customizing the dark background for better visibility 28:28 Creating sidebar links with routes and icons 31:10 Checking and modifying styles based on active path name. 35:36 Setting up public folder for icons and images. 37:59 Implementing routing and creating different pages 43:47 Implementing the mobile navigation for the app. 46:11 Implementing the mobile navigation bar using Shatten UI component 50:53 Calculate full height minus nav bar height for flexible layout 53:20 Adjusting styles and functionality of the sidebar navigation component 58:06 Implement routing and Clerk's UI components 1:00:16 Setting up environment keys and adding middleware to the application. 1:05:02 Setting up protected routes using Clerk Middleware 1:07:17 Setting up sign-in and sign-up pages with Clerk NextJS 1:12:03 Customize color, logo, and buttons for better UI/UX 1:14:27 Customizing user profile and UI implementation 1:19:24 Styling date and time elements 1:21:48 Implementing date and time formats 1:26:16 Creating responsive card with Tailwind config 1:28:39 Create a reusable component for the meeting UI box 1:33:51 Customizing props for different home cards 1:36:22 Defining and passing props with TypeScript in Next JS 1:41:17 Defining and passing necessary props for creating a meeting model. 1:43:53 Installing and using the video conferencing app components 1:48:41 Using third-party tools for video and audio functionalities 1:51:03 Stream allows building video conferencing app for free. 1:55:45 Wrap the entire application with a stream video provider 1:58:05 Creating a new stream user directly from the currently logged in clerk user. 2:03:20 Install the stream node SDK package and create a client 2:05:43 Creating a new token for the user on the server 2:10:37 Initiating a call by checking user existence and initializing stream video client 2:12:57 Creating and setting up a call in the video conferencing app 2:17:58 Using toast notifications to show success and error messages. 2:20:22 Building the setup page for microphone and camera and the meeting room itself 2:25:20 Setting up call initialization and handling 2:27:44 Setting up call loading and accessing call in the stream call provider 2:32:45 Setting up video preview and camera/microphone control. 2:35:16 Setting up camera and microphone permissions 2:40:11 Create dynamic layout based on current state 2:42:37 Implementing call controls for managing video and audio 2:47:21 Customize video conferencing features 2:49:33 Styling the drop-down trigger and menu content 2:54:32 Implementing user permissions and ending meetings 2:56:53 Explanation of double exclamation mark usage 3:01:58 Implement state hooks for video conferencing app 3:04:15 Implementing functionality to schedule a meeting. 3:08:57 Customize text area and implement date and time picker 3:11:46 Installing and using date-time package in the app 3:16:50 Creating a reusable call list component for upcoming meetings, previous meetings, and recordings. 3:19:12 Creating a custom hook to fetch calls using Stream API 3:24:15 Filtering and organizing fetched calls for a video conferencing app 3:26:45 Creating reusable hooks for fetching call data 3:31:39 Creating and mapping meeting cards for calls using Next JS 3:34:06 Building a meeting card with images and buttons 3:38:57 Handling different states for meetings and recordings. 3:41:23 Creating meeting links and handling button clicks 3:47:29 Fetching and extracting call recordings for multiple meetings 3:49:57 Adding custom descriptions to meeting recordings 3:54:54 Adding user details and styling the meeting room interface 3:57:29 Meeting ID is equal to user ID and invite link is generated 4:02:22 Creating and navigating to a personal meeting room 4:04:47 Adding functionality to personal meeting rooms 4:09:31 Configuring meeting link and testing live functionalities 4:12:00 The video conferencing app supports screen sharing, recording, layout customization, and participant management. 4:16:23 Build and deploy a full stack video conferencing app with Next JS using Clerk for user management and Streams video and audio APIs and SDKs. 4:18:32 Build and deploy a modern stack Overflow clone application with NEX GS
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 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.
This might be a bit outta pocket, 😅 but i was wondering if MAYBE, just maybe we could also delve into other languages apart from javascript, whether in the near or far future? just curious by the way
Though I am very new to React Js, I am so impressed the way you teach every tough topics easy. My request : Can you make a tutorial on how to create a the below application with Next JS and any free or low cost Face Recognition API, Storage and Database ? Photo Sharing application with Face recognition feature ? Work Flow: Photographers -> 1) Register on our application 2) Create new Events 3) Share the QR Code to the visitors on that Event. 4) Upload the photos via our application to some Storage servers. Our Server: 1) Scan all the photos and prepare Face Recognition ID/FingerPrint on a database. Visitors -> 1) Scan the QR code 2) Visit our client page of the Photographer's account. 3) Enter their, Name/Contact Number/Email and click their photo with in the QR code page. Our Server: 1) Our application's Lamda function search the similar faces on the uploaded photos database with Face ID/FingerPrint and Create a Album page for the auto picked similar photos. 2) The a link is shared via Whatsapp or email to the visitors. Visitors -> 1) When visitors click the link, they could see the album page. 2) They can download the selected photos. Sample project site: www.fotoowl.ai www.algomage.com www.Kwikpic.in www.premagic.com www.wfolio.com
