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

Описание к видео Build a Livestream App With Next.js | Twitch Clone | Part 1/2

Github & Additional Content: https://www.codewithantonio.com/proje...
PART 2:    • Build a Livestream App With Next.js |...  
Clerk: https://dub.sh/UyH5Jb2
LiveKit: https://livekit.io/
Ngrok: https://ngrok.com/download
Nodejs: https://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

Комментарии

Информация по комментариям в разработке