Myvideo

Guest

Login

Build a Livestream App With | Twitch Clone | Part 1/2

Uploaded By: Myvideo
8 views
0
0 votes
0

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 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

Share with your friends

Link:

Embed:

Video Size:

Custom size:

x

Add to Playlist:

Favorites
My Playlist
Watch Later