Build a Twitch-like Streaming Site with MERN: From Zero to Hero
What you will learn
Understand the MERN Stack: Gain foundational knowledge of MongoDB, Express, React and Node
Build a Streaming Platform: Create a basic version of a web-based streaming platform, similar to Twitch
Implement User Authentication: Set up user login and registration
Implement User Authentication: Set up user login and registration systems
Integrate with OBS: Learn to connect a platform with OBS for live broadcasting
Add Real-time Chat: Create a chat system using Socket IO for user interactions
Test APIs with Postman: Develop and test platform APIs to ensure functionality
Develop with React: Understand how to use React for building interactive web interfaces
Description
Have you ever thought about how sites like Twitch let people stream videos? Join our course to learn how to make your own streaming website using some great tools!
In this course, we’ll show you how to build a streaming app step by step. We’ll use:
- MongoDB to keep all our data.
- Express to manage our website’s server.
- React to design the parts of our website that users see and interact with.
- Node to run everything behind the scenes.
But that’s not all. We’ll also use OBS to let people stream their videos on our site. And with SocketIO, we’ll add a chat so viewers can talk to each other while watching. We’ll also use Postman to check that our site works well and fix any problems.
We made this course simple and easy to understand, even if English isn’t your first language. We’ll do real projects, so you can practice what you learn right away.
What will you get from this course?
- Learn to make a streaming website using MongoDB, Express, React, and Node.
- Add a live chat to your site with SocketIO.
- Use Postman to make sure everything works well.
At the end of this course, you’ll have your own streaming website to show off and lots of new skills. If you want to make a website where people can stream and chat, this course is for you. Join us and start learning!
English
language
Content
App Preview and Theory Introduction
Application Preview
Architecture
MongoDB – NoSQL Database
Express – Node.js web application framework
React – Client Side Library
Node.js – Server Side
Socket.IO – Realtime Communication
MERN Stack Advantages
Creating Express Server
Node.js installation
Project initialization
Installing dependencies
Creating Express Server
Complete Section Code
Authentication Routes
Creating Auth Routes
Testing Authentication Routes with Postman
Authentication Controllers
Validation middleware
Validation with Joi
MongoDB Connection
Creating MongoDB Database
Connecting with Database
Saving Data in Database
Complete Section Code
Implementing JWT Authentication
Introduction to JWT
Encrypting User Password
Issuing JWT Token
Testing Registration
Creating Login Logic
Testing Login Funcionallity
Complete Section Code
Creating React Application with Authentication Form
Module Introduction
Creating React Application
Clean up of initial project
Routing ,,react-router-dom” package
Creating first components
Login Form Basic Structure
Logo Component
Creating Reusable Input Component
Handling Input Value Changes
Creating Validation Functions
Connecting validation with our Form
Registration Form
Preparing for HTTP requests
Creating useLogin hook
Creating useRegister hook
Notifications ,,react-hot-toast”
Testing Auth Forms
Complete Section Code
Server Side – Creating Routes
Routes – Module Introduction
Preparing Database Models
Creating Channel Document with Registration
Which Routes should be secured ? (JWT)
Channel Details
Fetching Real Channel Data from DB
Fetching Channels
Authentication Middleware – validating JWT Token
Get Channel Settings Route
Fetching Settings from DB
Updating Channel Settings Route
Solving bug – DB query returns old data
Route Change Password
Testing Change Password Route
Follow Channel Route with Testing
Route Get Followed Channels
Complete Section Code
Client Side – Creating Dashboard
Dashboard Preview
Router Adjustments
Dashboard Components
Creating Navbar
Rendering List of Followed Channels
Nested Routing
Rendering Channels
Rendering Channel View
Channel View Description
Settings Page – Stream key
Auth Input Refactor
Preparing Channel Settings Form
Validators for Channel Settings
Rendering inputs through mapping
Form Handlers
Form Button
Change Password Form
Complete Section Code
Connecting Client Dashboard with API
User Details hook
Navigating between Pages
Handling logout Functionality
useChannelSettings hook
Loading Spinner with Fetching Settings Data
Debugging not working Channel Settings Route
Attaching Token to the Requests
Saving Channel Settings
Channel Settings Validation
useChangePassword hook
Fetching Channels Hook
Filtering Channels Array
Preparing to render real Channels
Displaying Real Followed Channels
Channel Page
Fetching Channel Details
Displaying Channel Details
Rendering Follow Button
Following Channel
Refetching Followed Channels
Fixing Bug with Refetching
Complete Section Code
OBS with RTMP Server – Connecting Streams
RTMP – Theory Introduction
Node-Media-Server package Introduction
Starting Media Server
OBS Quick Introduction
Streaming from OBS to Media Server
Displaying Stream From Media Server
Passing Correct Stream URL for every Channel
Fixing Bug With Channel Id
Checking if Channel is Online
Channels – Online Status
Complete Section Code
Chat with Socket.IO
Creating Chat Components
Messages Container
New Message Input
Introduction to Socket.IO
Connecting with Socket.IO from Client Side
Preparing Event for Chat History at Server Side
Getting Chat History at Client Side
Fixing Bug with Mongoose Model
Creating Logic of Saving Messages
Emitting Chat Message to Server
Socket.IO Rooms
Closing Chat Subscription
Zustand Installation (Global State Management)
Rendering Real Chat History
Displaying New Message
Complete Application