Creating A Streaming Platform: Practical Mern Stack Course

Build a Twitch-like Streaming Site with MERN: From Zero to Hero

What you'll 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

Requirements

JavaScript knowledge and some basics related with React

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!

Overview

Section 1: App Preview and Theory Introduction

Lecture 1 Application Preview

Lecture 2 Architecture

Lecture 3 MongoDB - NoSQL Database

Lecture 4 Express - Node.js web application framework

Lecture 5 React - Client Side Library

Lecture 6 Node.js - Server Side

Lecture 7 Socket.IO - Realtime Communication

Lecture 8 MERN Stack Advantages

Section 2: Creating Express Server

Lecture 9 Node.js installation

Lecture 10 Project initialization

Lecture 11 Installing dependencies

Lecture 12 Creating Express Server

Lecture 13 Complete Section Code

Section 3: Authentication Routes

Lecture 14 Creating Auth Routes

Lecture 15 Testing Authentication Routes with Postman

Lecture 16 Authentication Controllers

Lecture 17 Validation middleware

Lecture 18 Validation with Joi

Section 4: MongoDB Connection

Lecture 19 Creating MongoDB Database

Lecture 20 Connecting with Database

Lecture 21 Saving Data in Database

Lecture 22 Complete Section Code

Section 5: Implementing JWT Authentication

Lecture 23 Introduction to JWT

Lecture 24 Encrypting User Password

Lecture 25 Issuing JWT Token

Lecture 26 Testing Registration

Lecture 27 Creating Login Logic

Lecture 28 Testing Login Funcionallity

Lecture 29 Complete Section Code

Section 6: Creating React Application with Authentication Form

Lecture 30 Module Introduction

Lecture 31 Creating React Application

Lecture 32 Clean up of initial project

Lecture 33 Routing ,,react-router-dom" package

Lecture 34 Creating first components

Lecture 35 Login Form Basic Structure

Lecture 36 Logo Component

Lecture 37 Creating Reusable Input Component

Lecture 38 Handling Input Value Changes

Lecture 39 Creating Validation Functions

Lecture 40 Connecting validation with our Form

Lecture 41 Registration Form

Lecture 42 Preparing for HTTP requests

Lecture 43 Creating useLogin hook

Lecture 44 Creating useRegister hook

Lecture 45 Notifications ,,react-hot-toast"

Lecture 46 Testing Auth Forms

Lecture 47 Complete Section Code

Section 7: Server Side - Creating Routes

Lecture 48 Routes - Module Introduction

Lecture 49 Preparing Database Models

Lecture 50 Creating Channel Document with Registration

Lecture 51 Which Routes should be secured ? (JWT)

Lecture 52 Channel Details

Lecture 53 Fetching Real Channel Data from DB

Lecture 54 Fetching Channels

Lecture 55 Authentication Middleware - validating JWT Token

Lecture 56 Get Channel Settings Route

Lecture 57 Fetching Settings from DB

Lecture 58 Updating Channel Settings Route

Lecture 59 Solving bug - DB query returns old data

Lecture 60 Route Change Password

Lecture 61 Testing Change Password Route

Lecture 62 Follow Channel Route with Testing

Lecture 63 Route Get Followed Channels

Lecture 64 Complete Section Code

Section 8: Client Side - Creating Dashboard

Lecture 65 Dashboard Preview

Lecture 66 Router Adjustments

Lecture 67 Dashboard Components

Lecture 68 Creating Navbar

Lecture 69 Rendering List of Followed Channels

Lecture 70 Nested Routing

Lecture 71 Rendering Channels

Lecture 72 Rendering Channel View

Lecture 73 Channel View Description

Lecture 74 Settings Page - Stream key

Lecture 75 Auth Input Refactor

Lecture 76 Preparing Channel Settings Form

Lecture 77 Validators for Channel Settings

Lecture 78 Rendering inputs through mapping

Lecture 79 Form Handlers

Lecture 80 Form Button

Lecture 81 Change Password Form

Lecture 82 Complete Section Code

Section 9: Connecting Client Dashboard with API

Lecture 83 User Details hook

Lecture 84 Navigating between Pages

Lecture 85 Handling logout Functionality

Lecture 86 useChannelSettings hook

Lecture 87 Loading Spinner with Fetching Settings Data

Lecture 88 Debugging not working Channel Settings Route

Lecture 89 Attaching Token to the Requests

Lecture 90 Saving Channel Settings

Lecture 91 Channel Settings Validation

Lecture 92 useChangePassword hook

Lecture 93 Fetching Channels Hook

Lecture 94 Filtering Channels Array

Lecture 95 Preparing to render real Channels

Lecture 96 Displaying Real Followed Channels

Lecture 97 Channel Page

Lecture 98 Fetching Channel Details

Lecture 99 Displaying Channel Details

Lecture 100 Rendering Follow Button

Lecture 101 Following Channel

Lecture 102 Refetching Followed Channels

Lecture 103 Fixing Bug with Refetching

Lecture 104 Complete Section Code

Section 10: OBS with RTMP Server - Connecting Streams

Lecture 105 RTMP - Theory Introduction

Lecture 106 Node-Media-Server package Introduction

Lecture 107 Starting Media Server

Lecture 108 OBS Quick Introduction

Lecture 109 Streaming from OBS to Media Server

Lecture 110 Displaying Stream From Media Server

Lecture 111 Passing Correct Stream URL for every Channel

Lecture 112 Fixing Bug With Channel Id

Lecture 113 Checking if Channel is Online

Lecture 114 Channels - Online Status

Lecture 115 Complete Section Code

Section 11: Chat with Socket.IO

Lecture 116 Creating Chat Components

Lecture 117 Messages Container

Lecture 118 New Message Input

Lecture 119 Introduction to Socket.IO

Lecture 120 Connecting with Socket.IO from Client Side

Lecture 121 Preparing Event for Chat History at Server Side

Lecture 122 Getting Chat History at Client Side

Lecture 123 Fixing Bug with Mongoose Model

Lecture 124 Creating Logic of Saving Messages

Students who want to learn about live streaming with the MERN stack