Github & Additional Content: Clerk: LiveKit: Ngrok: Nodejs: 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 , 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 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 00:11 Additional content 00:45 Key settings 22:32 Ingress 47:09 OBS crash course 53:45 Livekit webhook 01:10:20 Viewer token 01:34:14 Video component 02:14:27 Chat component 03:01:16 Community component 03:29:14 Header component 03:53:08 Info card 04:35:21 About card 04:57:16 User page 05:18:52 Home page 05:46:28 Search page 06:14:57 Unblock page 06:46:00 Deployment
Hide player controls
Hide resume playing