Build a Livestream App With Next.js | Twitch Clone | Part 1/2
Vložit
- čas přidán 24. 07. 2024
- Github & Additional Content: www.codewithantonio.com/proje...
PART 2: • Build a Livestream App...
Clerk: dub.sh/UyH5Jb2
LiveKit: livekit.io/
Ngrok: ngrok.com/download
Nodejs: nodejs.org/en
Hi all 👋 In this free 14 hour tutorial you are going to learn how to build a Twitch Clone using Next 14. We are going to start with the basics like configuring Next.js, learning the routing concepts, and then slowly go deeper into setting up authentication, database, local tunnels, webhooks, all the way to generating RTMP and WHIP connections to connect to our OBS streaming software.
Key Features:
- 📡 Streaming using RTMP / WHIP protocols
- 🌐 Generating ingress
- 🔗 Connecting Next.js app to OBS / Your favorite streaming software
- 🔐 Authentication
- 📸 Thumbnail upload
- 👀 Live viewer count
- 🚦 Live statuses
- 💬 Real-time chat using sockets
- 🎨 Unique color for each viewer in chat
- 👥 Following system
- 🚫 Blocking system
- 👢 Kicking participants from a stream in real-time
- 🎛️ Streamer / Creator Dashboard
- 🐢 Slow chat mode
- 🔒 Followers only chat mode
- 📴 Enable / Disable chat
- 🔽 Collapsible layout (hide sidebars, chat etc, theatre mode etc.)
- 📚 Sidebar following & recommendations tab
- 🏠 Home page recommending streams, sorted by live first
- 🔍 Search results page with a different layout
- 🔄 Syncing user information to our DB using Webhooks
- 📡 Syncing live status information to our DB using Webhooks
- 🤝 Community tab
- 🎨 Beautiful design
- ⚡ Blazing fast application
- 📄 SSR (Server-Side Rendering)
- 🗺️ Grouped routes & layouts
- 🗃️ MySQL
- 🚀 Deployment
Timestamps
00:00 Intro & Demo
06:55 Additional content
07:29 Setup
20:19 Routing concepts
40:21 Authentication
59:21 Dark mode
01:20:48 Database setup
01:31:31 Local tunnel
01:39:14 Clerk webhook
02:06:13 Navbar
02:43:05 Sidebar
03:14:01 Recommended list
03:55:38 Hydration error
04:09:38 Follow service
04:59:22 Follow list
05:12:57 Block service
05:45:43 Creator dashboard
06:25:17 Stream model
06:38:52 Chat settings
07:03:50 Part 2
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 🔥.
Long videos are not really useful. Because attention cannot be held for so long. So a 10-15 minute video is most useful.
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. ❤
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 CZcams 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
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 :)
Literally the best react tutorial youtuber in the world right now
Thank you very much!
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 ❤️
I am impressed with the project Antonio, 15 hours of a fantastic project.
Thank you very much!!!
You are welcome!
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!
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!
Do not miss out on this one! What an absolute banger Antonio!!
Thank you!!!
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!! 🙏
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.
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!
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.
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!
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 :)
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!
Antonio!
All I'll say is thanks for what you're doing for the community.
Thank you for supporting me :)
You are the best on youtube currently when it comes to real world projects and advance techs
Thank you very much
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!
Antonio you deserve every bit of success. You are awesome giving this content for free.
Thank you :) Glad you like the content
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!
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!
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!
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!
bro's taking nextjs to a whole new level.. goddamn, nice work.
Glad you like it!
dont use Gods name in vain pls :(
One of the best web coder on CZcams.
Subscribed :D
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 :)
Thank you soo much for the hard work! AMAZING AMAZING Content as usual 🎉
Thank you!
Thank you for this wonderful tutorials. Keep up the good work
Thank you for watching!
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!
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!
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! :)
Such a fantastic job, i think we're all grateful for that! Many thanks!
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 😀
This is the most impressive thing I have seen since sliced bread. Thanks Antonio.
Glad you liked it!
Its nice to see great content coming for free. thanks antonio for creating such awesome content.
Glad you enjoy it!
Thanks we really apreciate it king 👑, keep up the good work bro 🔥🔥
Thank you very much!
Antonio the Legend with another legendary tutorial :) Excited to learn this tutorial....
Good luck!!
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 👍.
I have never seen such amazing project before. Thanks
Glad you like it!!
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!
Thank you for your great help and huge impact all your videos and tutorials is having on me.
God bless your efforts. Thank you Antonio
Glad you like them!
Literally unbelievable man, huge respect to your hardwork 🔥
Glad you like it!
Hello Antonio...Thank you so much for this....all of your projects are real world projects
Glad you like them!
bro said and delivered it. holly... ur amazing Antônio.
Glad you like it!
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 never disappoint. I rated you no 1 on here and I believe everyone who watches your videos believed so.
Thank you a lot :)
Bro 😭You're made of something else. Definitely going through the whole thing!
Good luck!!
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 for this amazing content.🙌
Glad you enjoy it!
WOW, You are doing such an amazing job man, Thank you so much bro ♥
It's my pleasure!
You're the beeest I've ever seen, thanks so much for your efforts, Antonio!❤❤
Thank you very much :)
Bro, this is purely insane ... this reminds me how much I still have to learn to be great.
Glad you like it!
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!
You're the goat 🐐 hats off to you
Great videos! I cant believe that we can access such a great Web-dev tutorial for free, much better than paid ones.
Antonio, you are the best. Thank you for so informative videos
Glad you like them!
Thanks Antonio 🎉, this is really insane! ❤
Thank you!
Damn, this is effort right there. Thank you man.
Thank you for watching my content!
Such and amazing tutorial!
Could learn so much from this thanks man!
Happy to hear that!
hats off Sir ! Just insane effort . Love It .
Glad you liked it!
Antonio I like your way how explain everything with diagram and detail please continue this method for upcoming videos also
Glad you like that!
Absolutely incredible!
Glad you like it!
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 😍😍❤️❤️
Very excited 👍
Good luck!!
Genius ❣️
Hi Antonio, I'm really impressed with all your tutorials! Probably idea for you next tutorial: It would be incredibly fascinating to see a tutorial that utilizes TypeScript and Next.js to demonstrate fetching data and implementing simple linear regression using TensorFlow.
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!
I am addicted to your videos.
Glad you lik them!
I'm gonna watch the hell out of all your videos holy shit.
Enjoy!!!
Love you Antonio!
Love you back!
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
salute to you man what a project 🔥🔥🔥🔥
Thank you!
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
@@vilasmankar6958just use another one like turso, supabase
This guy is the embodiment of the 100x developer lmao
hahaha thank you!
The man the myth the legend -> GOAT
Thank you very much!
Thank you for this one 🙌
My pleasure!
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!!
Big thanks to CodeWithAntonio for the awesome free course! Really appreciate it!🎉
Thank you for watching!
Yeah 🎉 Thanks Antonio ❤
Glad you like it!
You are too good for this world. Thanks.
You are most welcome!
man, you are really amazing! Thank you
Thank you very much!
Awesome! I just finished the trello clone earlier today.
Amazing job!!
@@codewithantonio Your tutorials have been the best way for me to learn all of the new React and Next.js stuff and I genuinely enjoy going through them in my free time. Learning can be fun when you get to build really cool applications and use the latest tech.
I also like that you don't over explain things and just build the app while talking through it. I think it's the pace of the videos that work well for me. If there is ever anything I don't understand I just pause the video and figure it out.
I have been working with react since 2016 and I still enjoy these tutorials.
Amazing✨thanks for it
I'm glad you like it
Good work
Thank you sir ❤
Great contribution in web dev world
Thank you!
He delivered, amazing
Glad you like it!
That's art, thank you so much.
Thank you!
so amazing bro. thanks for teaching
Thank you for your support!
Waiting for Instagram Clone
There's a lot to learn, although I'm not a huge fan of Prisma, but I'd love to know how to do this with Mongo. Also, props for using TS!
my man this is crazy, thanks alot!
Happy to help!
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! :)
The best tutorial
Thank you very much :)
LEGEND ❤
Thank you!
You’re the goat fr 🐐🙏🏼
Thank you very much :)
Bro, you are the game changer!!
Glad you like it!
Amazing !!
Thank you!!