Hello everyone 👋 In this 14 hour tutorial, (part 1 & part 2) you are going to learn how to build an amazing twitch clone / livestreaming application. Both part 1 that you are seeing now and part 2 will be uploaded on youtube for free. That being said, there is also "Additional content" in progress for this video, which goes even further than 14 hours. It will include migration to next-auth (auth.js), migration to postgresql (neon db), security improvements, bug fixes and refactors. It will also include all present and future additonal content that you might request for this project :) You can find the links for that in the description. Thank you!
I am 7+ year experienced Engineer and I would surely say that what you are providing on UA-cam is just next level and worth thousands of dollar course, thank you for providing such a level of content for free .
🎯 Key Takeaways for quick navigation: 13:03 🛠️ *ShadUI, a collection of reusable components, is introduced. Antonio installs the library, adds a button component, and showcases how to customize its variants.* 15:20 🌈 *The tutorial covers the configuration of ShatUI, integrating it with Next.js, ensuring TypeScript compatibility, and exploring customization options for components.* 20:08 🛣️ *Antonio explains Next.js routing basics, emphasizing the significance of the `app` folder and the `page.tsx` naming convention for client-side routing.* 22:30 📂 *Creating additional client routes in Next.js is demonstrated by creating a folder and adding a file with the reserved name `page.tsx` inside it, making it accessible at the corresponding route.* 23:27 🔄 *Server Components vs. Client Components:* 27:02 📁 *Reserved Keywords for Routes:* 46:37 🧩 *Integrating Clerk for Authentication:* 53:45 ⚙️ *Set specific environment variables in your project's environment file to let Clerk know the redirect URLs for sign-in and sign-up routes.* 56:32 🔐 *Integrate the `clerk user button` component to allow users to log out, and customize the appearance by importing styles from the provided GitHub repository.* 01:19:35 🔄 *Discussed the importance of synchronizing the authentication system with the database, including handling user creation, deletion, and updates for a complete integration.* 01:20:57 💽 *Initiated the process of connecting the application to a MySQL database on PlanetScale, explaining alternatives and recommending relational databases for the project.* 01:31:38 🚀 *Prepared for web hook implementation by exposing the local development environment using ngrok, a crucial step for allowing external services to connect during development.* 01:40:23 🤖 *Set up Clerk web hooks by enabling and configuring them in the Clerk dashboard, specifying the endpoint and message filtering for user-related events.* 01:41:59 🔐 *Implemented security measures in the web hook route, including verifying headers, checking the signing secret, and responding with a 200 status.* 02:12:47 🚀 *Implemented a navigation bar (navbar) with a GameHub logo and "Let's Play" tagline, including a clickable logo redirecting to the homepage.* 02:19:41 🎨 *The tutorial covers the development of a search bar component using Next.js, React, and Lucid UI.* 02:30:27 🔒 *User authentication is implemented with Clerk, allowing users to log in, log out, and access their dashboard.* 02:36:07 🎨 *UI buttons are styled with different variants, and the navbar is designed to be responsive for various screen sizes.* 02:42:18 📱 *The navbar design is responsive, ensuring a good user experience on both small and large devices.* 02:42:58 📐 *The tutorial focuses on creating a collapsible sidebar in a Fullstack Twitch Clone using Next.js 14, React, WebRTC, Sockets, Prisma, Tailwind, and MySQL.* 02:47:31 🌐 *The implementation involves creating a wrapper component to handle sidebar collapse/expand functionality and integrating a server component for fetching data.* 02:52:42 🎛️ *The use of the `use sidebar` store is demonstrated to manage the collapsed state, dynamically adjusting the sidebar width based on the state.* 02:53:53 ⚙️ *A toggle button is implemented within a client component, allowing users to collapse and expand the sidebar on desktop, with an automatic collapse on mobile.* 03:04:48 🛠️ *The tutorial introduces a `hint` component using the `tooltip` package, providing informative tooltips when hovering over elements, enhancing the user experience.* 03:19:54 🧭 *Added a "Recommended" section to the sidebar with a list of users fetched from the database, displaying usernames.* 03:20:06 🔄 *Utilized the `useSidebar` hook to determine the collapsed state of the sidebar and conditionally display the "Recommended" label on desktop.* 03:22:07 📏 *Dynamically adjusted the spacing and styling of the "Recommended" section based on the number of recommended users and the collapsed state.* 03:25:31 🔄 *Implemented a reusable `UserItem` component in the "Recommended" section to display user information, such as username and image, with conditional styling based on the active state.* 03:28:42 🌐 *Enhanced the `UserItem` component by using the `usePathName` hook to dynamically generate the hyperlink (`href`) and indicate the active state based on the current path.* 03:29:22 🖼️ *Developed a dynamic user avatar component with live indicator and optional badge for indicating live status.* 03:45:51 🚀 *Implemented a reusable "live badge" component with dynamic styling, demonstrating the use of component composition.* 03:51:36 🚀 *Resolved hydration errors caused by server-client rendering mismatches by conditionally rendering components on the client side using `isClient` or `useIsClient` hook.* 03:59:41 🦴 *Implemented loading skeletons during server-side rendering to prevent layout flickering and maintain a smoother user experience.* 04:09:27 🔄 *Modified the recommended service to exclude the currently logged-in user from the recommended list, enhancing data accuracy.* 04:14:19 🌐 *Demonstrated how to use Enro for exposing a local development server to the internet, ensuring consistency in webhook configurations for services like Clerk.* 04:14:34 🚀 *Ensure the web hook is running; create a new user account by logging in and check the recommendations.* 04:16:35 🌐 *Utilize dynamic routing with Next.js by creating a user page with a dynamic username parameter in the URL.* 04:19:23 🔗 *Implement the Prisma schema for a follow model, establishing relations between users for followers and following.* 04:24:29 ⚙️ *Develop a follow service with functions like 'isFollowingUser' to check if a user is already being followed, and 'followUser' to initiate a follow action.* 04:34:52 🔄 *Explore server actions in Next.js by creating an 'onFollow' server action to handle follow actions without the need for a separate API route.* 04:39:08 🔄 *Use `useTransition` to handle loading state and avoid manual loading toggles.* 04:40:19 🚫 *Disable follow button if already following or if the action is pending.* 04:44:33 🔄 *Utilize `revalidatePath` to refresh server components and instantly update data after actions like following/unfollowing.* 05:03:37 🛠️ *Resolved TypeScript error in Twitch clone project related to following data types.* 05:04:32 📊 *Implemented logic to dynamically display "Following" label and user data in the sidebar based on the user's following list.* 05:06:31 🔄 *Utilized server components and revalidation to update the sidebar content dynamically upon following/unfollowing users.* 05:12:52 🔗 *Extended the application by implementing a blocking system using Prisma, adding a "block" model, relations, and corresponding service functions.* 05:26:17 🚫 *Users can block each other, preventing interaction.* 05:27:42 🛑 *Server actions for blocking users are implemented using Next.js.* 05:41:32 🤔 *The system prevents blocked users from being recommended or followed.* 05:45:21 🎮 *Preparing for creating a live stream by building a creator dashboard.* 05:50:19 🚧 *Develops user authentication logic to fetch a user from the database based on the username for the creator dashboard.* 05:51:26 🧩 *Explains the choice of URL structure for the creator dashboard, allowing modularity for potential future features like enabling moderators.* 05:58:29 🎨 *Styles the creator dashboard, adding a Navbar and Exit button, and explains modifications to the Navbar for the creator dashboard.* 06:13:47 🚀 *Improved sidebar styling by adjusting pixel values, addressing flickering issues on collapse.* 06:14:42 🧭 *Created a navigation component with hard-coded routes (stream, keys, chat, community) and corresponding icons.* 06:22:14 🔄 *Implemented a loading state in the navigation component to handle asynchronous user data fetching.* 06:24:56 🚀 *Successfully integrated the stream model into the Prisma schema, allowing for database synchronization when a user is created.* 06:36:11 🌐 *Demonstrated the setup of ngrok to enable synchronization between local development and the Clerk web hook, testing the creation of a user and associated stream model.* 06:36:40 🔄 *After setting up Prisma and ensuring a user-stream relationship, consider using `npx Prisma migrate reset` if needed, allowing easy database reset during development.* 06:37:22 🚀 *To test different states during development, recommend running `enrock` on your domain, updating Clerk webhook, and creating new users with varied settings.* 06:38:47 🛠️ *Ensure each user in the database has a corresponding stream model for the creator dashboard, enabling the creation of keys for chat and community elements.* 06:39:13 🚧 *Create a page for chats by defining proper routes and building components in the chat folder. Use unique URLs based on the current username to navigate.* Made with HARPA AI
@@xenmods thanks buddy ! Would u tell me what's the difference between his discord video nd this video ..like both r based on real time communication right ?
You never stop overcoming yourself. Thanks for all your contributions Antonio! Truly, the best NextJS project creator I know right now.... Congratulations!
It is crazy just how well made, and in depth yet simple to understand these projects are. It speaks both volumes to you as a developer , and as a teacher
This is the best content for learning web. La maggior parte dei corsi a pagamento non coprirà mai così tanti argomenti contemporaneamente. Apprezzo molto il vostro duro lavoro, mi motiva a continuare. Thanks again, Antonio!
9:00 - 40:00 is the best breakdown I've heard of the Nextjs 13+ paradigm. Routing, Server components, layouts - all of it so clearly explained. Thank you.
This was sold for billion dollars to Amazon and now Antonio is giving it for free. I don’t know what to say. I’m a developer myself, this video has set a bar very very high. I’m looking for next big thing in my life, will visit you personally in 2024 if I get it done. Thank you for these gem of videos.
I look forward to every video because I know it's just going to be better each time. The amount of value this is offering is priceless! Antonio you GOAT!
Hi Antonio. Your dedication to creating tutorials is out of this world. I cant imagine the effort and struggles you go through in recording, editing and coding the projects. thanks men!
Can't even begin to imagine the amount of work that has gone into making this monster of a project. Big ups man and thank you for consistently pushing out high-quality content.
Man, I must admit that I wouldn't have improved as much as I have if it wasn't for you and the amazing content you share. Thank you for all your hard work!
Since Christmas is approaching ☃️, you have brought the best Christmas gift for us 🎁. Indeed, it's the best project on your channel in 2023 👍. Thank you so much, Antonio. Merry Christmas in advance 🎄.
My gf and I are from Nairobi Kenya and we have grown so much in a year since discovering your tutorials. Be blessed and please do a stripe clone especially the payment link part. But all in all thank you! God bless.
Hi Antonio, thank you so much for the consistent uploads. Your videos are extremely informative and educational. keep up the great work. Hope your channel reaches millions of people in 2024.
till today on youtube this is the best tutorial which should be premium, but fortunately it is completely for free., thanks will not be enough for this tutorial.
I started it right now, looks very appealing especially the functionality part is just on another level. I’ll connect with you once I complete this project with my learning’s. ❤️🔥
Wow another great project and this one looks like its going to be amazing. I'm still on Trello as I went on vacation but as soon as I finish that one which will be an the next couple of days, i cant wait to start and learn this one. Thankyou for all your hard work. Its most appreciated.
These projects you put out for us to participate and create with are crazy! I am following you since your airbnb clone and havent even started building that myself, there you are coming with all these bangers. Thank you!
Thanks for the clone, I really like your clones and how well you explain, I will do it on your platform, since I like how it is organized there and being able to see the progress
Another great tutorial as usual. for the database setup part, you mentioned every system has a different way to set it up. This might be the perfect occasion to add a simple docker tutorial which would add to the already huge content and solve the issue
The best tutorial I have seen in a very long time, really shows you taking the time to explain everything you are doing with incredible depth and understanding of not just how it works but also what does not work in order for people to understand WHY it works as it does. Amazing! Keep it up, just subscribed! 🥳
Great stuff... just wanted to mention that I modified the "user.updated" webhook event type to be more forgiving. If for any reason, you no longer had that user in your database, you could use the "user.updated" event to recreate it. There are a couple use cases I can see that user might not be in your database so I thought this would be a good improvement.
Wow this is sublime Antonio! Might be your best project so far. I'm really curious as to how livestream is implemented so I'm definitely looking forward to building this. Btw I'd love to see that Letterboxd clone someday ;) (The Page is so complex no one has dared to make a clone yet on YT lol).
Hello everyone 👋 In this 14 hour tutorial, (part 1 & part 2) you are going to learn how to build an amazing twitch clone / livestreaming application. Both part 1 that you are seeing now and part 2 will be uploaded on youtube for free.
That being said, there is also "Additional content" in progress for this video, which goes even further than 14 hours. It will include migration to next-auth (auth.js), migration to postgresql (neon db), security improvements, bug fixes and refactors. It will also include all present and future additonal content that you might request for this project :) You can find the links for that in the description.
Thank you!
I'm fired up now 🔥.
Leave it for us 😊. There's only so much you can show in 15 minutes.
Thanks so much for this amazing, in-depth project @CodeWithAntonio 🙏🏽🙌🏽.
Man it's 🔥
Thanx for keeping it free. ❤
OMG this video is going to be my best video so far, I excited and thrilled to follow it...🔥🔥🔥
Mans carrying the dev community and thinks we won’t notice. Thank you for all you do 🙏🏾
Thank you for the nice words :)
He is taking the dev community to a whole new level.🎉🎉
😂😂😂 couldn’t have said it any better ong.
I am 7+ year experienced Engineer and I would surely say that what you are providing on UA-cam is just next level and worth thousands of dollar course, thank you for providing such a level of content for free .
Antonio, I don't know how to thank you for what you have done for community. All I can say is thank you and May God bless you and your family. Amen.
Thank you very much for these kind words :)
🎯 Key Takeaways for quick navigation:
13:03 🛠️ *ShadUI, a collection of reusable components, is introduced. Antonio installs the library, adds a button component, and showcases how to customize its variants.*
15:20 🌈 *The tutorial covers the configuration of ShatUI, integrating it with Next.js, ensuring TypeScript compatibility, and exploring customization options for components.*
20:08 🛣️ *Antonio explains Next.js routing basics, emphasizing the significance of the `app` folder and the `page.tsx` naming convention for client-side routing.*
22:30 📂 *Creating additional client routes in Next.js is demonstrated by creating a folder and adding a file with the reserved name `page.tsx` inside it, making it accessible at the corresponding route.*
23:27 🔄 *Server Components vs. Client Components:*
27:02 📁 *Reserved Keywords for Routes:*
46:37 🧩 *Integrating Clerk for Authentication:*
53:45 ⚙️ *Set specific environment variables in your project's environment file to let Clerk know the redirect URLs for sign-in and sign-up routes.*
56:32 🔐 *Integrate the `clerk user button` component to allow users to log out, and customize the appearance by importing styles from the provided GitHub repository.*
01:19:35 🔄 *Discussed the importance of synchronizing the authentication system with the database, including handling user creation, deletion, and updates for a complete integration.*
01:20:57 💽 *Initiated the process of connecting the application to a MySQL database on PlanetScale, explaining alternatives and recommending relational databases for the project.*
01:31:38 🚀 *Prepared for web hook implementation by exposing the local development environment using ngrok, a crucial step for allowing external services to connect during development.*
01:40:23 🤖 *Set up Clerk web hooks by enabling and configuring them in the Clerk dashboard, specifying the endpoint and message filtering for user-related events.*
01:41:59 🔐 *Implemented security measures in the web hook route, including verifying headers, checking the signing secret, and responding with a 200 status.*
02:12:47 🚀 *Implemented a navigation bar (navbar) with a GameHub logo and "Let's Play" tagline, including a clickable logo redirecting to the homepage.*
02:19:41 🎨 *The tutorial covers the development of a search bar component using Next.js, React, and Lucid UI.*
02:30:27 🔒 *User authentication is implemented with Clerk, allowing users to log in, log out, and access their dashboard.*
02:36:07 🎨 *UI buttons are styled with different variants, and the navbar is designed to be responsive for various screen sizes.*
02:42:18 📱 *The navbar design is responsive, ensuring a good user experience on both small and large devices.*
02:42:58 📐 *The tutorial focuses on creating a collapsible sidebar in a Fullstack Twitch Clone using Next.js 14, React, WebRTC, Sockets, Prisma, Tailwind, and MySQL.*
02:47:31 🌐 *The implementation involves creating a wrapper component to handle sidebar collapse/expand functionality and integrating a server component for fetching data.*
02:52:42 🎛️ *The use of the `use sidebar` store is demonstrated to manage the collapsed state, dynamically adjusting the sidebar width based on the state.*
02:53:53 ⚙️ *A toggle button is implemented within a client component, allowing users to collapse and expand the sidebar on desktop, with an automatic collapse on mobile.*
03:04:48 🛠️ *The tutorial introduces a `hint` component using the `tooltip` package, providing informative tooltips when hovering over elements, enhancing the user experience.*
03:19:54 🧭 *Added a "Recommended" section to the sidebar with a list of users fetched from the database, displaying usernames.*
03:20:06 🔄 *Utilized the `useSidebar` hook to determine the collapsed state of the sidebar and conditionally display the "Recommended" label on desktop.*
03:22:07 📏 *Dynamically adjusted the spacing and styling of the "Recommended" section based on the number of recommended users and the collapsed state.*
03:25:31 🔄 *Implemented a reusable `UserItem` component in the "Recommended" section to display user information, such as username and image, with conditional styling based on the active state.*
03:28:42 🌐 *Enhanced the `UserItem` component by using the `usePathName` hook to dynamically generate the hyperlink (`href`) and indicate the active state based on the current path.*
03:29:22 🖼️ *Developed a dynamic user avatar component with live indicator and optional badge for indicating live status.*
03:45:51 🚀 *Implemented a reusable "live badge" component with dynamic styling, demonstrating the use of component composition.*
03:51:36 🚀 *Resolved hydration errors caused by server-client rendering mismatches by conditionally rendering components on the client side using `isClient` or `useIsClient` hook.*
03:59:41 🦴 *Implemented loading skeletons during server-side rendering to prevent layout flickering and maintain a smoother user experience.*
04:09:27 🔄 *Modified the recommended service to exclude the currently logged-in user from the recommended list, enhancing data accuracy.*
04:14:19 🌐 *Demonstrated how to use Enro for exposing a local development server to the internet, ensuring consistency in webhook configurations for services like Clerk.*
04:14:34 🚀 *Ensure the web hook is running; create a new user account by logging in and check the recommendations.*
04:16:35 🌐 *Utilize dynamic routing with Next.js by creating a user page with a dynamic username parameter in the URL.*
04:19:23 🔗 *Implement the Prisma schema for a follow model, establishing relations between users for followers and following.*
04:24:29 ⚙️ *Develop a follow service with functions like 'isFollowingUser' to check if a user is already being followed, and 'followUser' to initiate a follow action.*
04:34:52 🔄 *Explore server actions in Next.js by creating an 'onFollow' server action to handle follow actions without the need for a separate API route.*
04:39:08 🔄 *Use `useTransition` to handle loading state and avoid manual loading toggles.*
04:40:19 🚫 *Disable follow button if already following or if the action is pending.*
04:44:33 🔄 *Utilize `revalidatePath` to refresh server components and instantly update data after actions like following/unfollowing.*
05:03:37 🛠️ *Resolved TypeScript error in Twitch clone project related to following data types.*
05:04:32 📊 *Implemented logic to dynamically display "Following" label and user data in the sidebar based on the user's following list.*
05:06:31 🔄 *Utilized server components and revalidation to update the sidebar content dynamically upon following/unfollowing users.*
05:12:52 🔗 *Extended the application by implementing a blocking system using Prisma, adding a "block" model, relations, and corresponding service functions.*
05:26:17 🚫 *Users can block each other, preventing interaction.*
05:27:42 🛑 *Server actions for blocking users are implemented using Next.js.*
05:41:32 🤔 *The system prevents blocked users from being recommended or followed.*
05:45:21 🎮 *Preparing for creating a live stream by building a creator dashboard.*
05:50:19 🚧 *Develops user authentication logic to fetch a user from the database based on the username for the creator dashboard.*
05:51:26 🧩 *Explains the choice of URL structure for the creator dashboard, allowing modularity for potential future features like enabling moderators.*
05:58:29 🎨 *Styles the creator dashboard, adding a Navbar and Exit button, and explains modifications to the Navbar for the creator dashboard.*
06:13:47 🚀 *Improved sidebar styling by adjusting pixel values, addressing flickering issues on collapse.*
06:14:42 🧭 *Created a navigation component with hard-coded routes (stream, keys, chat, community) and corresponding icons.*
06:22:14 🔄 *Implemented a loading state in the navigation component to handle asynchronous user data fetching.*
06:24:56 🚀 *Successfully integrated the stream model into the Prisma schema, allowing for database synchronization when a user is created.*
06:36:11 🌐 *Demonstrated the setup of ngrok to enable synchronization between local development and the Clerk web hook, testing the creation of a user and associated stream model.*
06:36:40 🔄 *After setting up Prisma and ensuring a user-stream relationship, consider using `npx Prisma migrate reset` if needed, allowing easy database reset during development.*
06:37:22 🚀 *To test different states during development, recommend running `enrock` on your domain, updating Clerk webhook, and creating new users with varied settings.*
06:38:47 🛠️ *Ensure each user in the database has a corresponding stream model for the creator dashboard, enabling the creation of keys for chat and community elements.*
06:39:13 🚧 *Create a page for chats by defining proper routes and building components in the chat folder. Use unique URLs based on the current username to navigate.*
Made with HARPA AI
Hey buddy is it begginer friendly?. I mean the course ?
@@ItsHarsh18 yes it is! every part is explained in detail
@@xenmods thanks buddy ! Would u tell me what's the difference between his discord video nd this video ..like both r based on real time communication right ?
You never stop overcoming yourself. Thanks for all your contributions Antonio! Truly, the best NextJS project creator I know right now.... Congratulations!
Thank you very much for your support :)
It is crazy just how well made, and in depth yet simple to understand these projects are. It speaks both volumes to you as a developer , and as a teacher
Thank you for the kind words :) Enjoy the project!
Literally the best react tutorial youtuber in the world right now
Thank you very much!
You are the best on youtube currently when it comes to real world projects and advance techs
Thank you very much
This is the best content for learning web.
La maggior parte dei corsi a pagamento non coprirà mai così tanti argomenti contemporaneamente. Apprezzo molto il vostro duro lavoro, mi motiva a continuare.
Thanks again, Antonio!
Happy i can be of help! glad you like the projects :)
I am impressed with the project Antonio, 15 hours of a fantastic project.
Thank you very much!!!
You are welcome!
9:00 - 40:00 is the best breakdown I've heard of the Nextjs 13+ paradigm. Routing, Server components, layouts - all of it so clearly explained. Thank you.
Do not miss out on this one! What an absolute banger Antonio!!
Thank you!!!
This was sold for billion dollars to Amazon and now Antonio is giving it for free. I don’t know what to say. I’m a developer myself, this video has set a bar very very high. I’m looking for next big thing in my life, will visit you personally in 2024 if I get it done. Thank you for these gem of videos.
I try my best to exceed expectations with my content, and its easy to do when I have an amazing audience with so much support :)
Antonio never disappoint. I rated you no 1 on here and I believe everyone who watches your videos believed so.
Thank you a lot :)
I'm literally speechless for what I saw as an intro in this video . Dude u and ur projects are just amazing . Love from India ❤️
bro's taking nextjs to a whole new level.. goddamn, nice work.
Glad you like it!
dont use Gods name in vain pls :(
I look forward to every video because I know it's just going to be better each time. The amount of value this is offering is priceless! Antonio you GOAT!
Thank you a lot!! 🙏
This is the most impressive thing I have seen since sliced bread. Thanks Antonio.
Glad you liked it!
Antonio!
All I'll say is thanks for what you're doing for the community.
Thank you for supporting me :)
The man the myth the legend -> GOAT
Thank you very much!
Hi Antonio. Your dedication to creating tutorials is out of this world. I cant imagine the effort and struggles you go through in recording, editing and coding the projects. thanks men!
Thank you for the appreciation!
Antonio you deserve every bit of success. You are awesome giving this content for free.
Thank you :) Glad you like the content
Can't even begin to imagine the amount of work that has gone into making this monster of a project. Big ups man and thank you for consistently pushing out high-quality content.
Thank you for the kind words! :)
I said this on the trello clone as well, an architectural breakdown in the beginning would be very helpful. Thanks for the amazing work!
Will keep that in mind, thank you :)
This gotta be the craziest project you've made yet, very excited I have been eagerly waiting in the discord :)
Hope you enjoy it! It was fun building this one!
Man, I must admit that I wouldn't have improved as much as I have if it wasn't for you and the amazing content you share. Thank you for all your hard work!
Glad I could help!
Since Christmas is approaching ☃️, you have brought the best Christmas gift for us 🎁. Indeed, it's the best project on your channel in 2023 👍. Thank you so much, Antonio. Merry Christmas in advance 🎄.
Thank you very much and merry christmas to you as well!
bro said and delivered it. holly... ur amazing Antônio.
Glad you like it!
Antonio the Legend with another legendary tutorial :) Excited to learn this tutorial....
Good luck!!
My gf and I are from Nairobi Kenya and we have grown so much in a year since discovering your tutorials. Be blessed and please do a stripe clone especially the payment link part. But all in all thank you! God bless.
I am happy I could be of help to you both! Thank you for watching!
Hi Antonio, thank you so much for the consistent uploads. Your videos are extremely informative and educational. keep up the great work. Hope your channel reaches millions of people in 2024.
Thank you for your support!
Bro 😭You're made of something else. Definitely going through the whole thing!
Good luck!!
till today on youtube this is the best tutorial which should be premium, but fortunately it is completely for free., thanks will not be enough for this tutorial.
Thank you for the nice comment, enjoy the video!!
I started it right now, looks very appealing especially the functionality part is just on another level. I’ll connect with you once I complete this project with my learning’s. ❤️🔥
Good luck! Hope you enjoy!
Antonio this is awesome, and you're giving it all for free and it's even two part, you're amazing 🧑💻🧑💻😊😊
Glad you like it!
You are such a good teacher to me
Thanks to you, I'm interested in nextjs and studying it.
Thank you every time!
Happy to hear that!
I am addicted to your videos.
Glad you lik them!
This guy is the embodiment of the 100x developer lmao
hahaha thank you!
I think NextJS team should make you their CEO. You're incredible man, thank you.
hahaha thank you very much!
One of the best web coder on UA-cam.
Subscribed :D
Literally unbelievable man, huge respect to your hardwork 🔥
Glad you like it!
Thanks Antonio keep up the good work. It means a lot to me.
Happy you like it! :)
Obviously bro I like your work and learned a lot from your videos. Keep it up and we are here to support you 👍.
Hello Antonio...Thank you so much for this....all of your projects are real world projects
Glad you like them!
This is an amazing project, I'll do it along with this video and share this you deserve more views.
Thank you very much
thank you soo much for something you do it dear antonio,my knowledge of developing has changed since I find your amazing video tutorials
Happy to hear that!
I'm gonna watch the hell out of all your videos holy shit.
Enjoy!!!
I have never seen such amazing project before. Thanks
Glad you like it!!
Wow another great project and this one looks like its going to be amazing. I'm still on Trello as I went on vacation but as soon as I finish that one which will be an the next couple of days, i cant wait to start and learn this one. Thankyou for all your hard work. Its most appreciated.
These projects you put out for us to participate and create with are crazy! I am following you since your airbnb clone and havent even started building that myself, there you are coming with all these bangers. Thank you!
Thank you for your support all the way from my early videos, hope you enjoy the content!
Awesome bro.
I'm going to follow along, using Django and Django Channels for the backend.
I've been waiting to see WebRTC in action. Thank you.
Good luck!
I just came across this channel and I must say I will most definitely be following some of these soon. Thanks for your contributions
Glad you like them and welcome!
Genius ❣️
Antonio I like your way how explain everything with diagram and detail please continue this method for upcoming videos also
Glad you like that!
You're the beeest I've ever seen, thanks so much for your efforts, Antonio!❤❤
Thank you very much :)
You are too good for this world. Thanks.
You are most welcome!
Thank you for this wonderful tutorials. Keep up the good work
Thank you for watching!
This is awesome! Going to take me a whole week to follow along and understand everything, but it will be worth it. Thanks for all you do.
Keep in mind that this is just part 1 😄 Good luck!
i Havn't watched any of your tutorials yet but they are definitly in my watch later playlist. lets me learn after exams.
Good luck on your exams!!
@@codewithantonio 😍😍❤️❤️
Thanks for the clone, I really like your clones and how well you explain, I will do it on your platform, since I like how it is organized there and being able to see the progress
Happy you like my platform! Good luck!
Another great tutorial as usual.
for the database setup part, you mentioned every system has a different way to set it up. This might be the perfect occasion to add a simple docker tutorial which would add to the already huge content and solve the issue
Yup, or even easier, simply everyone uses planetscale 😄 Might add a free docker course on my platform at some point
That will be good sir
In 3:09:00 by putting `ml-[70px]` as default you could use short-circuit `collapsed || "lg:ml-60"` in the conditional.
Thanks for the tip! Hope you like the tutorial so far :)
bro antonio you are leading the game
Thank you!
And you guys think this man dont deserve to sell courses? Be honnest guys. Greate job Antonio
Thank you for the support!
Its nice to see great content coming for free. thanks antonio for creating such awesome content.
Glad you enjoy it!
Literally commenting so I can pick this up soon, insane and I’m excited to check this one out ❤
Thanks dude, as always content that exceeds expectations. keep up bro we are supporting you🥰
Thank you so much 😀
hats off Sir ! Just insane effort . Love It .
Glad you liked it!
Antonio, you are the best. Thank you for so informative videos
Glad you like them!
The best tutorial I have seen in a very long time, really shows you taking the time to explain everything you are doing with incredible depth and understanding of not just how it works but also what does not work in order for people to understand WHY it works as it does. Amazing! Keep it up, just subscribed! 🥳
Thank you for the feedback, glad you like the content! Enjoy! :)
Thank you for this amazing content.🙌
Glad you enjoy it!
Such and amazing tutorial!
Could learn so much from this thanks man!
Happy to hear that!
Damn, this is effort right there. Thank you man.
Thank you for watching my content!
Big thanks to CodeWithAntonio for the awesome free course! Really appreciate it!🎉
Thank you for watching!
Thank you soo much for the hard work! AMAZING AMAZING Content as usual 🎉
Thank you!
Great videos! I cant believe that we can access such a great Web-dev tutorial for free, much better than paid ones.
salute to you man what a project 🔥🔥🔥🔥
Thank you!
Absolutely incredible!
Glad you like it!
Great stuff... just wanted to mention that I modified the "user.updated" webhook event type to be more forgiving. If for any reason, you no longer had that user in your database, you could use the "user.updated" event to recreate it. There are a couple use cases I can see that user might not be in your database so I thought this would be a good improvement.
Thanks we really apreciate it king 👑, keep up the good work bro 🔥🔥
Thank you very much!
Just completed part 1...thanks for your awsome tutorial..till here my project is working fine..thank you❤
Bro what planet scale db it is not showing me free
Bro God just blessed you ! Trust me you are going to haven ! ❤❤❤❤
Thank you for the kind words :)
He delivered, amazing
Glad you like it!
Brah deserve million subs
Hope so one day! haha thank you!
Thanks Antonio 🎉, this is really insane! ❤
Thank you!
Thank you Antonio. You're the best. Btw you forgot to update the loading skeleton to include "want to learn more part" on your website. 🙂
Thanks! there is no skeleton because most projects dont have additional content so it would br weird to fill that space :)
Very excited 👍
Good luck!!
Bro, you are the game changer!!
Glad you like it!
Thanks God we have Antonio on Earth. It's like having Elon Musk but only in Web Dev
hahaha thank you very much
WOW, You are doing such an amazing job man, Thank you so much bro ♥
It's my pleasure!
Love from Finland 🇫🇮
I love you Boss
Thank you for your support!
Love you Antonio!
Love you back!
Such a fantastic job, i think we're all grateful for that! Many thanks!
Antonio, the goat the greatest
Thank you very much!
You're the goat 🐐 hats off to you
The best tutorial
Thank you very much :)
Yeah 🎉 Thanks Antonio ❤
Glad you like it!
Wow this is sublime Antonio! Might be your best project so far. I'm really curious as to how livestream is implemented so I'm definitely looking forward to building this. Btw I'd love to see that Letterboxd clone someday ;) (The Page is so complex no one has dared to make a clone yet on YT lol).
Thank you, good luck with the build!
U are rock in dev community 😮❤
Thank you ❤️
So great man. Thanks for your contribution to the global IT community. Can I ask when will you upload part 2?
Tomorrow, its ready, im just tired today haha
@@codewithantoniotake care ❤️